/* ============================================================
   stil-kirke-turnus.css — turnus som org-fane
   ============================================================
   Hører til app-kirke-turnusflate.js. Egen fil, som all Church-lab-CSS
   (AGENTS.md § Church-lab): en ny fil merger alltid rent mot upstream.

   HVORFOR DEN FINNES I DET HELE TATT
   Fram til 20.09.2026 hadde turnusflata ingen CSS — hver eneste regel sto som
   `style="…"` i en malstreng. Det er grunnen til at den ikke lignet resten av
   appen: en inline-stil kan ikke arve et tema, kan ikke svare på en
   media-spørring, og kan ikke overstyres av mørk modus.

   SPRÅKET ER BEMANNINGENS
   .bem-subnav-btn, .bem-tabell og .bem-kand-rad i css/stil-personell.css er
   446 regler bygget på de samme tokenene. Turnus låner formen deres —
   pille-knappene, tabellrytmen, kandidatradene — så flata leses som
   bemanning, uten at en eneste regel der endres. Det som står her er det
   turnus har og bemanning ikke: rutenettet roller × søndager, merkene fra
   motoren, og sammenbrettingen til kort på telefon.

   INGEN HARDKODEDE FARGER. Alt er tokens fra css/stil-kirke-tema.css.
   Status formidles aldri med farge alene (docs/DESIGN.md §2): hvert merke har
   en tekst i forklaringen over rutenettet og som title på cella.
   ============================================================ */

.trn-flate {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ── Verktøylinja ───────────────────────────────────────────────────────
   Samme pille-i-en-ramme som .bem-subnav. «Lukk» finnes ikke: en fane
   lukkes ved å bytte fane. */
.trn-verktoy {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 10px;
  margin: 0 16px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.trn-verktoy-fyll { flex: 1 1 auto; }

.trn-hvile-felt {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--text-muted);
}

.trn-hvile-felt select,
.trn-celle {
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
}

.trn-hvile-felt select { padding: 6px 9px; font-size: 12.5px; }

.trn-knapp { border:1px solid var(--border); background:var(--surface); color:var(--text); font-family:inherit; cursor:pointer; }

.trn-knapp:hover { background: var(--primary-pill); }

.trn-knapp.btn--primar {
  border-color: var(--primary-dark);
  background: var(--primary-dark);
  color: #fff;
}

.trn-knapp--primar:hover { background: var(--primary-dark, var(--primary)); }
.trn-knapp[disabled] { opacity: .55; cursor: default; }

/* ── Innhold og status ──────────────────────────────────────────────────── */
.trn-innhold { padding: 0 16px; }

.trn-status {
  margin: 12px 16px 0;
  padding: 9px 0 0;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--text-muted);
  min-height: 18px;
}

.trn-status--feil { color: var(--st-feil-tekst); }
.trn-feil { color: var(--st-feil-tekst); font-size: 13px; }
.trn-ingen { color: var(--text-muted); font-size: 11.5px; }

.trn-forklaring {
  font-size: 11.5px;
  color: var(--text-muted);
  margin: 0 0 10px;
  line-height: 1.6;
}

/* Nøkkelen til merkene. Understrekingen er den SAMME som på cella under, så
   forklaringen og rutenettet viser samme tegn. */
.trn-nokkel--tom { border-bottom: 1px dashed var(--st-obs-tekst); }
.trn-nokkel--hvile { border-bottom: 1.5px solid var(--st-obs-tekst); }
.trn-nokkel--vikar { border-bottom: 1.5px solid var(--primary); }

/* «N plasser uten folk» er HUSETS varselrad — .pf-funn-rad + .pf-funn--gul i
   css/stil-moduler.css, samme som app-kirke-styringsflate.js bruker. Her står
   bare margen. En egen kopi ville vært en andre varselrad som ligner, og den
   ene får en rettelse den andre ikke får. */
.trn-hull { margin: 0 0 12px; }

/* ── Rutenettet ─────────────────────────────────────────────────────────
   Roller nedover, søndager bortover. Rullingen ligger på containeren og ikke
   på siden, så org-sidens egen scroll ikke blir vannrett. */
.trn-rull {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface);
}

.trn-tabell {
  border-collapse: collapse;
  width: 100%;
  font-size: 12.5px;
}

.trn-tabell th,
.trn-tabell td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  text-align: left;
}

.trn-tabell thead th { border-bottom-width: 1.5px; white-space: nowrap; }

/* Rollekolonnen står stille når man ruller bortover — uten den vet man ikke
   hvilken rad man leser ved åttende søndag. */
.trn-hjorne,
.trn-tabell tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--surface);
  white-space: nowrap;
}

.trn-hjorne {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.trn-kolonne-dato { font-size: 12.5px; font-weight: 700; }

.trn-kolonne-fs {
  font-size: 10.5px;
  font-weight: 400;
  color: var(--text-muted);
  max-width: 132px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.trn-tabell td { min-width: 136px; }

/* ── Rollehodet ─────────────────────────────────────────────────────────
   Fellesskapet står under navnet. To rader som begge heter «Lovsang» ER
   riktig når de hører til hvert sitt fellesskap — uten etiketten ser det ut
   som en dublett, og den som leser retter en feil som ikke finnes. */
.trn-rolle-navn { font-size: 13px; font-weight: 700; }

.trn-rolle-fs {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.trn-rolle-gruppe { font-size: 11px; font-weight: 400; color: var(--text-muted); }

/* ── Plassene ───────────────────────────────────────────────────────────── */
.trn-plass { display: flex; gap: 4px; margin-bottom: 3px; }

.trn-celle {
  flex: 1;
  min-width: 0;
  padding: 4px 5px;
  font-size: 11.5px;
}

/* Merkene fra motoren. Fargen er aldri alene: cella bærer en title, og
   forklaringen over rutenettet sier hva hver av dem betyr. */
.trn-celle--tom { border-style: dashed; border-color: var(--st-obs-tekst); }
.trn-celle--hvile { border-width: 1.5px; border-color: var(--st-obs-tekst); }
.trn-celle--vikar { border-width: 1.5px; border-color: var(--primary); }

/* Den som alt står oppført — tekst, ikke velger. */
.trn-alt { display: flex; gap: 4px; align-items: center; padding: 3px 4px; }

.trn-alt-navn {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11.5px;
  color: var(--text-muted);
}

.trn-kikk {
  flex: 0 0 auto;
  padding: 3px 7px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text-muted);
  font-family: inherit;
  font-size: 11px;
  line-height: 1.25;
  cursor: pointer;
}

.trn-kikk:hover { background: var(--primary-pill); color: var(--text); }

/* ── Telefon: ett kort per gudstjeneste ─────────────────────────────────
   Et rutenett med åtte kolonner finnes ikke på 375 px. Under 761 px tegner
   app-kirke-turnusflate.js korta i stedet — ikke begge med CSS som skjuler
   den ene: to <select> med samme data-rolle/data-gt ville begge blitt
   plukket opp av endringslytteren. */
.trn-kortliste { display: flex; flex-direction: column; gap: 9px; }

.trn-kort {
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface);
}

.trn-kort > summary {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
}

.trn-kort > summary::-webkit-details-marker { display: none; }

.trn-kort-dato { font-size: 13.5px; font-weight: 700; }

.trn-kort-fs {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11.5px;
  color: var(--text-muted);
}

/* «3/7» — hvor mye av gudstjenesten som er fylt, lesbart uten å åpne kortet. */
.trn-kort-tall {
  flex: 0 0 auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-muted);
}

.trn-kort-roller { padding: 0 14px 12px; }

.trn-kort-rolle {
  padding: 10px 0;
  border-top: 1px solid var(--border);
}

.trn-kort-plasser { margin-top: 6px; }

/* Maks to felt per rad på telefon — en velger og knappen ved siden av er de
   to. Rollehodet står over, ikke ved siden av. */
@media (max-width: 760px) {
  .trn-verktoy { margin: 0 12px 12px; }
  .trn-innhold { padding: 0 12px; }
  .trn-status { margin: 12px 12px 0; }
  .trn-knapp { flex: 1 1 auto; }
  .trn-hvile-felt { flex: 1 1 100%; }
  .trn-hvile-felt select { flex: 1; }
  .trn-celle { font-size: 13px; padding: 7px 8px; }
  .trn-kikk { padding: 6px 9px; }
}

/* Turnustavle: vaktlistens personbenk, med gudstjenester som kolonner. */
.trn-tavle { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 18px; align-items: start; }
.trn-plan { min-width: 0; }
.trn-tavle .trn-rull { max-height: 65vh; overflow: auto; scrollbar-gutter: stable; }
.trn-tavle .trn-tabell { border-collapse: separate; border-spacing: 0; }
.trn-tavle .trn-tabell td { min-width: 180px; padding: 14px 10px; }
.trn-tavle .trn-tabell th { padding: 14px 10px; }
.trn-tavle .trn-tabell thead th { position: sticky; top: 0; z-index: 2; background: var(--surface); }
.trn-tavle .trn-tabell thead .trn-hjorne { z-index: 3; }
.trn-tavle .trn-tabell tbody th { min-width: 150px; vertical-align: middle; }
.trn-tavle .trn-kolonne-fs { white-space: normal; max-width: 180px; margin: 5px 0; }
.trn-tabell tr.er-valgt td, .trn-tabell tr.er-valgt th { background: var(--primary-pill); }
.trn-rollevalg { border: 0; background: transparent; color: var(--text); padding: 8px 4px; text-align: left; font: 600 14px var(--kirke-skrift, inherit); cursor: pointer; width: 100%; }
.trn-rollevalg small { display: block; font-size: 11px; font-weight: 400; color: var(--text-muted); margin-top: 6px; }
.trn-rollevalg[aria-pressed="true"] { color: var(--primary-dark-adaptiv); }
.trn-tavle .trn-plass { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); margin: 4px 0; align-items: stretch; gap: 0; }
.trn-tavle .trn-plass.er-valgt { outline: 2px solid var(--primary-dark-adaptiv); outline-offset: 2px; }
.trn-personkort { border: 0; border-radius: 10px; background: transparent; color: var(--text); font: inherit; text-align: left; flex: 1; padding: 12px 10px; cursor: pointer; min-width: 0; }
.trn-personkort.er-tom { color: var(--primary-dark-adaptiv); border: 1px dashed var(--border); }
.trn-personkort:hover { background: var(--primary-pill); }
.trn-merke { display: block; color: var(--st-obs-tekst); margin-top: 6px; font-size: 10px; }
.trn-fjern { border: 0; background: transparent; color: var(--text-muted); cursor: pointer; padding: 8px; font-size: 18px; }
.trn-benk { border: 1px solid var(--border); background: var(--surface); border-radius: 12px; padding: 16px; min-width: 0; }
.trn-benk-hode { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.trn-benk-hode h3 { font-family: var(--kirke-tittelskrift, inherit); font-size: 22px; font-weight: 500; margin: 0; }
.trn-filter { color: var(--primary-dark-adaptiv); font-size: 12px; min-height: 18px; }
.trn-sok { display: flex; gap: 4px; margin-bottom: 12px; }
.trn-sok input { width: 100%; min-width: 0; border: 1px solid var(--border); border-radius: 8px; padding: 10px; font: inherit; background: var(--bg); color: var(--text); }
.trn-personliste { max-height: 48vh; overflow-y: auto; scrollbar-gutter: stable; }
.trn-person { width: 100%; display: flex; align-items: center; gap: 9px; padding: 12px 2px; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--text); text-align: left; font: inherit; cursor: grab; }
.trn-person > span:nth-child(2) { flex: 1; min-width: 0; }
.trn-person strong { display: block; font-size: 12px; font-weight: 600; }
.trn-person small { display: block; font-size: 10px; color: var(--text-muted); margin-top: 5px; }
.trn-avatar { display: grid; place-items: center; flex: 0 0 32px; height: 32px; border-radius: 50%; background: var(--primary-pill); color: var(--primary-dark-adaptiv); font-size: 11px; }
.trn-person:hover:not(:disabled) { background: var(--primary-pill); }
.trn-person:disabled { opacity: .6; cursor: not-allowed; }
.trn-tavle button:focus-visible, .trn-rull:focus-visible { outline: 2px solid var(--primary-dark-adaptiv); outline-offset: 2px; }
@media (max-width: 1000px) and (min-width: 761px) { .trn-tavle { grid-template-columns: minmax(0, 1fr) 240px; gap: 10px; } }
@media (max-width: 760px) {
  .trn-tavle { display: flex; flex-direction: column-reverse; }
  .trn-plan, .trn-benk { width: 100%; box-sizing: border-box; }
  .trn-personliste { max-height: 190px; }
  .trn-kort summary { flex-wrap: wrap; }
}
.trn-personkort.er-slipp { background: var(--primary-pill); outline: 2px dashed var(--primary-dark-adaptiv); outline-offset: 2px; }

/* Samme smale kontrakt når verten gir en smal arbeidsflate i test/harness. */
.trn-tavle--smal { display: flex; flex-direction: column-reverse; }
.trn-tavle--smal .trn-plan, .trn-tavle--smal .trn-benk { width: 100%; box-sizing: border-box; }
.trn-tavle--smal .trn-personliste { max-height: 190px; }

/* Tjenesteplanens signatur: en rolig grønn statusstripe over selve tavlen. */
.trn-intro {display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 20px 22px;}
.trn-oyenbryn {color:var(--primary-dark-adaptiv);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;}
.trn-intro h2 {font:500 30px/1.15 var(--kirke-tittelskrift,inherit);margin:7px 0 8px;}
.trn-intro p {font-size:13px;color:var(--text-muted);margin:0;}
.trn-utkastmerke {padding:8px 12px;border:1px solid var(--border);border-radius:20px;color:var(--text-muted);font-size:11px;white-space:nowrap;}
.trn-puls {display:flex;gap:0;flex-wrap:wrap;border:1px solid var(--border);border-radius:14px;background:var(--primary-pill);margin-bottom:15px;overflow:hidden;}
.trn-puls>span {flex:1;min-width:125px;padding:16px 20px;color:var(--primary-dark-adaptiv);font-size:12px;border-right:1px solid var(--border);}
.trn-puls>span:last-child {border-right:0;}
.trn-puls strong {display:block;font:500 30px/1.1 var(--kirke-tittelskrift,inherit);font-variant-numeric:tabular-nums;margin-bottom:5px;}
.trn-puls .trn-puls--apne {background:var(--st-obs-bg);color:var(--st-obs-tekst);}
.trn-flate .trn-verktoy {padding:14px 16px;border:1px solid var(--border);border-radius:14px;background:var(--surface);}
.trn-flate .trn-hvile-felt[hidden] {display:none;}
.trn-tavle .trn-kolonne-dato {font:600 20px var(--kirke-tittelskrift,inherit);}
.trn-tom {padding:28px;border:1px dashed var(--border);border-radius:16px;text-align:center;}
.trn-flate--enkelt .trn-intro {margin:18px 0;align-items:flex-start;}
.trn-flate--enkelt .trn-intro h2 {font-size:25px;}
.trn-flate--enkelt .trn-verktoy,.trn-flate--enkelt .trn-status {margin-inline:0;}
.trn-flate--enkelt .trn-innhold {padding:0;}
/* Én gudstjeneste: ingen personkolonne. Velgeren åpner under valgt plass
   (app-kirke-turnusflate.js), og visningsvalg og ledigliste gjelder serier. */
.trn-flate--enkelt .trn-tavle {display:block;}
.trn-flate--enkelt .ktv-verktøy,.trn-flate--enkelt .ktv-ledigliste,.trn-flate--enkelt .trn-filter {display:none;}
.trn-flate--enkelt .trn-kort {margin:0;}
.trn-flate--enkelt .trn-kort-roller {padding:16px;}
.trn-flate--enkelt .trn-kort-rolle {padding:14px 0;border-top:1px solid var(--border);}
.trn-flate--enkelt .trn-utkastmerke {display:none;}
.ktj-behovdialog .ktj-panel {width:min(760px,calc(100vw - 32px));max-height:calc(100dvh - 40px);overflow:auto;padding:24px;box-sizing:border-box;border-radius:22px;}
.ktj-behovdialog .kof-hode {margin-bottom:14px;}
.ktj-ingress {margin:0 0 22px;color:var(--text-muted);font-size:14px;line-height:1.5;}
.ktj-behovliste {display:grid;gap:14px;}
.ktj-behovrad {padding:18px;border:1px solid var(--border);border-radius:14px;background:var(--surface);}
.ktj-behovrad-hode {display:flex;align-items:flex-end;gap:12px;}
.ktj-rollenummer {display:grid;place-items:center;width:32px;height:40px;flex-shrink:0;font-size:14px;font-weight:700;color:var(--primary-dark-adaptiv);}
.ktj-rollenavn {flex:1;min-width:0;}
.ktj-antall {width:82px;}
.ktj-behovvalg {display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:15px;}
.ktj-behovdialog .kfs-felt {display:flex;flex-direction:column;gap:7px;font-size:12px;font-weight:600;min-width:0;}
.ktj-behovdialog .felt {box-sizing:border-box;width:100%;min-width:0;padding:10px 12px;font-size:14px;}
.ktj-tider {margin-top:16px;font-size:12px;color:var(--text-muted);}
.ktj-minutter {display:flex;align-items:center;gap:7px;}
.ktj-lasthjelp {font-size:12px;color:var(--text-muted);margin:12px 0 0;}
.ktj-leggtil {margin:18px 0;}
.ktj-lagrefot {position:sticky;bottom:-24px;background:var(--surface);border-top:1px solid var(--border);padding:16px 0;display:flex;align-items:center;gap:10px;z-index:2;}
.ktj-lagrefot p {flex:1;color:var(--text-muted);font-size:12px;}
.ktj-behovdialog [aria-invalid=true] {border-color:var(--st-feil-tekst);}
.ktj-behovdialog button:focus-visible,.ktj-behovdialog summary:focus-visible {outline:2px solid var(--primary-dark-adaptiv);outline-offset:3px;}
@media(max-width:760px){.trn-intro{margin:0 12px 18px;align-items:flex-start;}.trn-intro h2{font-size:25px;}.trn-utkastmerke{display:none;}.trn-puls>span{min-width:80px;padding:14px 10px;}.ktj-behovdialog .ktj-panel{padding:16px;width:calc(100vw - 16px);}.ktj-behovrad{padding:12px;}.ktj-rollenummer{display:none;}.ktj-behovvalg{grid-template-columns:1fr;}.ktj-lagrefot{bottom:-16px;flex-wrap:wrap;}.ktj-lagrefot p{flex-basis:100%;margin:0;}.ktj-lagrefot button{flex:1;}}
.ktj-behovdialog .kof-hode {display:flex;justify-content:space-between;align-items:center;gap:14px;}

/* Kompakt planmatrise: status på én linje, sammenhengende celler og rolig benk. */
.trn-flate .trn-verktoy {padding:8px 0;margin:0 0 10px;border:0;border-bottom:1px solid var(--border);border-radius:0;background:transparent;box-shadow:none;gap:10px;}
.trn-flate .trn-innhold {padding:0;}
.trn-flate .trn-status {margin-inline:0;}
.trn-flate .trn-puls {border:0;border-radius:0;background:transparent;gap:20px;margin:0 0 8px;}
.trn-flate .trn-puls>span {flex:0 1 auto;min-width:0;padding:2px 0;border:0;background:transparent;font-size:12px;color:var(--text-muted);}
.trn-flate .trn-puls strong {display:inline;font:600 13px var(--kirke-skrift,inherit);margin-right:4px;color:var(--text);}
.trn-flate .trn-puls--apne strong {color:var(--st-obs-tekst);}
.trn-forklaring {font-size:11px;margin-bottom:12px;}
.trn-tavle {grid-template-columns:minmax(0,1fr) 230px;gap:16px;}
.trn-tavle .trn-rull {max-height:calc(100vh - 235px);border-radius:6px;}
.trn-tavle .trn-tabell td {min-width:142px;padding:5px 6px;border-right:1px solid var(--border);vertical-align:middle;}
.trn-tavle .trn-tabell th {padding:8px;}
.trn-tavle .trn-tabell tbody th {min-width:124px;border-right:1px solid var(--border);}
.trn-tavle .trn-tabell thead th {background:var(--bg2);}
.trn-tavle .trn-kolonne-dato {font:600 14px var(--kirke-skrift,inherit);}
.trn-tavle .trn-kolonne-fs {font-size:10px;max-width:150px;margin:3px 0;}
.trn-rollevalg {padding:4px 2px;font-size:12px;}
.trn-rollevalg small {margin-top:3px;font-size:10px;}
.trn-tavle .trn-plass {margin:2px 0;border:0;border-radius:4px;background:transparent;}
.trn-tavle .trn-personkort {min-height:32px;padding:6px 8px;border-radius:4px;font-size:12px;}
.trn-tavle .trn-personkort.er-tom {border:0;color:var(--text-muted);}
.trn-tavle .trn-personkort:not(.er-tom) {background:var(--primary-pill);}
.trn-tavle .trn-personkort.er-tom:hover {color:var(--primary-dark-adaptiv);background:var(--primary-pill);}
.trn-benk {border:0;border-left:1px solid var(--border);border-radius:0;background:transparent;padding:0 0 0 16px;}
.trn-benk-hode h3 {font-size:17px;}
.trn-filter {font-size:11px;margin:8px 0;}
.trn-sok {margin-bottom:6px;}
.trn-sok input {font-size:12px;padding:8px;}
.trn-person {padding:8px 2px;}
.trn-person small {margin-top:3px;}
.trn-personliste {max-height:calc(100vh - 335px);}
.trn-tavle--smal .trn-benk {border-left:0;padding:0;border-bottom:1px solid var(--border);padding-bottom:12px;}
@media(max-width:760px){.trn-flate .trn-verktoy{gap:6px;}.trn-flate .trn-hvile-felt{flex:1 1 140px;}.trn-flate .trn-puls{gap:12px;}.trn-personliste{max-height:160px;}.trn-benk{border-left:0;padding:0;}.trn-flate .trn-knapp{font-size:12px;}}

/* Bemanningsbehov: én arbeidsrad per rolle, detaljer ved behov. */
.ktj-behovdialog .ktj-panel {width:min(780px,calc(100vw - 32px));max-height:calc(100dvh - 40px);padding:0;border-radius:16px;overflow:hidden;background:var(--surface);display:flex;flex-direction:column;}
.ktj-behovdialog .ktj-panel>.kof-hode {flex:0 0 auto;margin:0;padding:18px 22px;border-bottom:1px solid var(--border);}
.ktj-behovdialog .ktj-panel .ktj-tittel {font:500 23px/1.2 var(--kirke-tittelskrift,inherit);margin:0;}
.ktj-behovdialog .ktj-panel>.kof-innhold {display:flex;flex-direction:column;padding:0;min-height:0;overflow:hidden;}
.ktj-behovdialog #ktj-behov {display:flex;flex-direction:column;min-height:0;margin:0;}
.ktj-behovkropp {overflow:auto;min-height:0;padding:14px 22px 4px;scrollbar-gutter:stable;}
.ktj-behovdialog .ktj-ingress {margin:0 0 16px;font-size:12px;}
.ktj-kolonnehode,.ktj-behovdialog .ktj-behovrad-hode {display:grid;grid-template-columns:minmax(0,1fr) 112px 32px;gap:14px;align-items:center;}
.ktj-kolonnehode {padding:0 0 7px;color:var(--text-muted);font-size:11px;}
.ktj-kolonnehode>span:nth-child(2) {text-align:center;}
.ktj-behovdialog .ktj-behovliste {display:block;border-top:1px solid var(--border);}
.ktj-behovdialog .ktj-behovrad {padding:8px 0;border:0;border-bottom:1px solid var(--border);border-radius:0;background:transparent;}
.ktj-behovdialog .ktj-panel .felt {height:36px;padding:6px 9px;font:400 13px var(--kirke-skrift,inherit);border:1px solid var(--border);border-radius:6px;background:var(--surface);color:var(--text);box-shadow:none;}
.ktj-behovdialog .ktj-panel .ktj-rollenavn {font-weight:600;border-color:transparent;background:transparent;padding-left:0;}
.ktj-behovdialog .ktj-panel .ktj-rollenavn:hover,.ktj-behovdialog .ktj-panel .ktj-rollenavn:focus {border-color:var(--border);background:var(--bg);}
.ktj-antallkontroll {display:grid;grid-template-columns:32px minmax(0,1fr) 32px;align-items:center;border:1px solid var(--border);border-radius:6px;overflow:hidden;}
.ktj-antallkontroll>button,.ktj-fjern {display:grid;place-items:center;min-height:34px;border:0;background:transparent;color:var(--text-muted);font:400 19px var(--kirke-skrift,inherit);cursor:pointer;}
.ktj-antallkontroll>button:hover:not(:disabled),.ktj-fjern:hover:not(:disabled) {background:var(--primary-pill);color:var(--primary-dark-adaptiv);}
.ktj-antallkontroll>button:disabled,.ktj-fjern:disabled {opacity:.35;cursor:not-allowed;}
.ktj-behovdialog .ktj-panel .ktj-antallkontroll input {height:34px;text-align:center;padding:0;border:0;border-radius:0;appearance:textfield;-moz-appearance:textfield;font-variant-numeric:tabular-nums;}
.ktj-antallkontroll input::-webkit-inner-spin-button,.ktj-antallkontroll input::-webkit-outer-spin-button {-webkit-appearance:none;margin:0;}
.ktj-fjern {border-radius:6px;}
.ktj-tilpasning>summary {display:flex;align-items:baseline;gap:10px;cursor:pointer;list-style:none;padding:4px 0;font-size:11px;line-height:1.5;color:var(--text-muted);}
.ktj-tilpasning>summary::-webkit-details-marker {display:none;}
.ktj-tilpass {color:var(--primary-dark-adaptiv);font-weight:600;white-space:nowrap;}
.ktj-tilpass::before {content:'›';display:inline-block;margin-right:5px;}
.ktj-tilpasning[open] .ktj-tilpass::before {transform:rotate(90deg);}
.ktj-radsammendrag {overflow-wrap:anywhere;}
.ktj-behovdialog .ktj-behovvalg {margin-top:10px;gap:12px;}
.ktj-behovdialog .kfs-felt {font-size:11px;gap:5px;}
.ktj-behovdialog .ktj-tider {margin-top:8px;}
.ktj-behovdialog .ktj-tilpasning[open] {padding:2px 12px 10px;background:var(--bg);border-radius:6px;margin-top:6px;}
.ktj-behovdialog .ktj-leggtil {margin:12px 0;}
.ktj-behovdialog .ktj-lagrefot {position:static;flex:0 0 auto;bottom:auto;display:flex;flex-wrap:nowrap;gap:8px;margin:0;padding:14px 22px;border-top:1px solid var(--border);background:var(--bg);}
.ktj-behovdialog .ktj-lagrefot p {flex:1;flex-basis:auto;margin:0;font-size:12px;}
.ktj-behovdialog .ktj-lagrefot button {flex:0 0 auto;}
.ktj-behovdialog .ktj-panel .btn {font-size:12px;padding:8px 13px;min-height:34px;}
.ktj-behovdialog .ktj-panel>.kof-status:not(:empty) {flex:0 0 auto;padding:10px 22px;margin:0;font-size:12px;max-height:100px;overflow:auto;}
.ktj-behovdialog .ktj-panel [aria-invalid=true] {border:1px solid var(--st-feil-tekst);}
@media(max-width:540px){
  .ktj-behovdialog {padding:8px;}
  .ktj-behovdialog .ktj-panel {width:100%;max-height:calc(100dvh - 16px);border-radius:12px;}
  .ktj-behovdialog .ktj-panel>.kof-hode {padding:14px;}
  .ktj-behovdialog .ktj-panel .ktj-tittel {font-size:21px;}
  .ktj-behovkropp {padding:12px 14px 0;}
  .ktj-kolonnehode,.ktj-behovdialog .ktj-behovrad-hode {grid-template-columns:minmax(0,1fr) 100px 28px;gap:6px;}
  .ktj-behovdialog .ktj-lagrefot {padding:12px 14px;flex-wrap:wrap;}
  .ktj-behovdialog .ktj-lagrefot p {flex-basis:100%;margin-bottom:2px;}
  .ktj-behovdialog .ktj-lagrefot button {flex:1;}
  .ktj-behovdialog .ktj-behovvalg {grid-template-columns:1fr;}
}

/* Valgt omfang er synlig før arbeidslisten, uten et ekstra bekreftelsessteg. */
.ktj-omfang {border:0;padding:0;margin:0 0 16px;min-width:0;}
.ktj-omfang legend {font-size:11px;font-weight:600;padding:0;margin-bottom:8px;}
.ktj-omfangvalg {display:flex;gap:6px;flex-wrap:wrap;}
.ktj-omfangvalg label {display:flex;align-items:center;gap:7px;padding:9px 12px;border:1px solid var(--border);border-radius:7px;font-size:12px;cursor:pointer;}
.ktj-omfangvalg label:has(input:checked) {background:var(--primary-pill);border-color:var(--primary);color:var(--primary-dark-adaptiv);}
.ktj-omfangvalg input {margin:0;accent-color:var(--primary);}
.ktj-omfangvalg small {font-size:inherit;}
.ktj-seriedato,.ktj-omfanghjelp {font-size:11px;line-height:1.5;color:var(--text-muted);margin:7px 0 0;}
.ktj-behovdialog .ktj-tidstittel {font-weight:600;color:var(--text);margin:12px 0 4px;}

/* Per gudstjeneste: samme plasser og personbenk, samlet under hver dato. */
.ktv-visninger { flex-wrap: wrap; }
.trn-tavle .ktv-datotavle {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 0 0 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: auto;
  scrollbar-gutter: stable;
}
.ktv-gudstjeneste { flex: 0 0 250px; min-width: 0; }
.ktv-datohode {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 14px 12px 12px;
  border-top: 3px solid var(--primary);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.ktv-ukedag { color: var(--text-muted); font-size: 11px; text-transform: capitalize; }
.ktv-datohode h3 { margin: 5px 0; font: 600 26px/1.2 var(--kirke-tittelskrift); color: var(--text); }
.ktv-gudstjenestenavn { margin: 0 0 12px; min-height: 2.8em; font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.ktv-datodekning { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.ktv-dekningslinje { display: block; width: 100%; height: 8px; margin: 6px 0 10px; accent-color: var(--primary); }
.ktv-dekningslinje::-webkit-meter-bar { background: var(--bg2); border: 0; }
.ktv-dekningslinje::-webkit-meter-optimum-value { background: var(--primary); }
.ktv-dekningslinje::-moz-meter-bar { background: var(--primary); }
.ktv-datoroller { padding: 12px 0; display: grid; gap: 10px; }
.ktv-gudstjenesterolle { padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm, 6px); background: var(--surface); }
.ktv-rolleteam { display: block; color: var(--text-muted); font-size: 10px; overflow-wrap: anywhere; }
.ktv-gudstjenesterolle .trn-rollevalg { padding: 6px 0 10px; }
.ktv-gudstjenesterolle .trn-rollevalg:hover { color: var(--primary-dark-adaptiv); }
.ktv-gudstjenesterolle .trn-rollevalg small { margin-top: 3px; }
.trn-tavle .ktv-gudstjenesterolle .trn-personkort { min-height: 40px; }
.trn-tavle .ktv-gudstjenesterolle .trn-personkort.er-tom { border: 1px dashed var(--border); }
.ktv-gudstjenesterolle button { scroll-margin-top: 210px; }

/* Laptop: to korte kontrollrader, filtre åpnes først når de trengs. */
body:not(.eventlab-modus):has(#org-tab-content > .trn-flate) #org-modal-tittel {
  font-size: 24px;
  margin-block: 8px 2px;
}
body:has(#org-tab-content > .trn-flate) #org-tab-hjelp { font-size: 11px; margin-block: 0 6px; }
.trn-flate .trn-verktoy { margin-bottom: 4px; padding-block: 4px 6px; gap: 8px; }
.trn-planlinje { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 4px; }
.trn-planlinje .trn-puls { gap: 12px; margin: 0; min-height: 32px; align-items: center; }
.ktv-filtervalg { min-width: 0; font-size: 12px; }
.ktv-filtervalg>summary { box-sizing: border-box; display: inline-flex; align-items: center; gap: 7px; min-height: 30px; list-style: none; }
.ktv-filtervalg>summary::-webkit-details-marker { display: none; }
.ktv-filtervalg[open]>summary { background: var(--primary-pill); border-color: var(--primary); color: var(--primary-dark-adaptiv); }
.ktv-filtervalg[open] .ktv-filterpil { transform: rotate(180deg); }
.ktv-filtervalg>summary:focus-visible { outline: 2px solid var(--primary-dark-adaptiv); outline-offset: 2px; }
.ktv-filterutvalg { color: var(--primary-dark-adaptiv); max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ktv-filterantall { color: var(--text-muted); font-size: 11px; white-space: nowrap; }
.ktv-filtergruppe { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; min-width: 0; }
.ktv-filtergruppe:has(.ktv-filtervalg[open]), .ktv-filtervalg[open] { flex-basis: 100%; }
.ktv-filtersammendrag { display: inline-flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ktv-filtervalg[open] .ktv-filtre { margin-top: 6px; }
.trn-flate .ktv-filtre { gap: 8px; padding: 8px; margin: 0; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); }
.trn-flate .ktv-filtre .trn-hvile-felt { gap: 3px; }
.trn-flate .ktv-filtre p { font-size: 11px; }
.trn-plan .ktv-verktøy { min-height: 32px; gap: 8px; margin-bottom: 6px; }
.trn-plan .ktv-verktøy>p { margin: 0; font-size: 11px; }
.trn-tavle .ktv-datohode { padding: 8px 10px; border-top-width: 2px; }
.ktv-datohode h3 { display: inline; margin: 0 0 0 6px; font-size: 20px; }
.ktv-gudstjenestenavn { min-height: 0; margin: 4px 0 6px; }
.ktv-dekningslinje { height: 5px; margin: 4px 0; }
.ktv-datoroller { padding-top: 8px; gap: 8px; }
.ktv-gudstjenesterolle { padding: 8px 10px; }
.ktv-gudstjenesterolle button { scroll-margin-top: 145px; }
@media(max-width:760px) {
  .trn-planlinje { gap: 2px; }
  .ktv-filterutvalg { max-width: 110px; }
  .trn-planlinje .trn-puls { min-height: 28px; }
}

/* De kompakte periodevalgene beholder native popup og tilgjengelige etiketter. */
.trn-verktoy .trn-hvile-felt { gap: 5px; font-size: 11px; flex: 0 0 auto; }
.trn-verktoy .trn-hvile-felt select.lv-filter-sel { width: 118px; min-height: 30px; padding: 5px 22px 5px 8px; font-size: 12px; }
.trn-verktoy #trn-hvile.lv-filter-sel { width: 112px; }

/* Den oppførte personen i en rolle (app-kirke-turnusflate.js) tegnes uten
   .trn-alt-navn og arvet dermed ~17 px fra knappen rundt — navnene sto
   større enn alt annet i kolonnen. Navnet er rollens innhold her, så det
   står i brødtekststørrelse med vekt, og svarstatusen under. */
.trn-alt > :is(span, .trn-navneknapp):first-child { flex:1; min-width:0; font-size:13px; font-weight:600; line-height:1.3; color:var(--text); overflow-wrap:anywhere; }

/* Navnet åpner tjenestekortet (app-kirke-turnusflate.js § kikkKnapp): det ser
   ut som navnet og oppfører seg som en knapp. Negativ marg = paddingen, så
   teksten står der den sto og bare hover-flaten stikker ut. */
.trn-navneknapp { display:block; margin:-2px -4px; padding:2px 4px; border:0; border-radius:6px; background:none; font:inherit; color:inherit; text-align:left; cursor:pointer; }
.trn-navneknapp:hover { background:var(--primary-pill); }
/* Status/belastning under navnet, som i radhodet — på telefon sto de klistret
   inntil («Ida Berge0 vakter i perioden»). */
.trn-navneknapp small { display:block; }
.trn-navneknapp:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }

/* Personvelgeren ved plassen ligger inne i rollen, rett under plassen — i én
   gudstjeneste, i datotavla og på telefonen (.trn-velger). Står sist fordi
   .trn-tavle--smal .trn-benk og .trn-tavle .trn-benk over tar bort rammen. */
.trn-flate--enkelt .trn-benk, .trn-plan .trn-benk {margin-top:8px;padding:12px;border:1px solid var(--border);border-radius:10px;background:var(--surface);}
/* Personene er Eventlabs chips (.chip-select/.chip i stil-mobil.css). */
.trn-velger .trn-personliste.chip-select {margin-top:8px;max-height:190px;overflow-y:auto;}
.trn-velger .chip:disabled {opacity:.45;cursor:not-allowed;}
.trn-velger .chip:disabled:hover {background:transparent;border-color:var(--border);}
.trn-chiptall {margin-left:6px;font-size:10px;opacity:.65;}