/* ==========================================================================
   Kirkebrass – designsystem «Kalkhvit og gull»
   Én CSS-fil. Ingen rammeverk, ingen byggesteg.
   Regler og bruk: se DESIGN.md. Ikke legg til nye farger, skygger,
   gradienter eller radier her uten å oppdatere DESIGN.md samtidig.
   ========================================================================== */

/* ---------- 0. Fonter (selvhostet, SIL Open Font License) ------------- */
@font-face {
  font-family: 'Alegreya';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("../fonter/alegreya-500-kursiv-latin-ext.8fa0f4f28388.woff2") format('woff2');
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Alegreya';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("../fonter/alegreya-500-kursiv-latin.1d26e6b011d0.woff2") format('woff2');
  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: 'Alegreya';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonter/alegreya-500-latin-ext.9ff7b59ea7ab.woff2") format('woff2');
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Alegreya';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonter/alegreya-500-latin.97a4bfd7b3ce.woff2") format('woff2');
  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: 'Alegreya';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonter/alegreya-700-latin-ext.9ff7b59ea7ab.woff2") format('woff2');
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Alegreya';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonter/alegreya-700-latin.97a4bfd7b3ce.woff2") format('woff2');
  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: 'Alegreya Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonter/alegreya-sans-400-latin-ext.19c52c5ec74e.woff2") format('woff2');
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Alegreya Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonter/alegreya-sans-400-latin.dec96422d9be.woff2") format('woff2');
  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: 'Alegreya Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonter/alegreya-sans-500-latin-ext.e2555cdfbd01.woff2") format('woff2');
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Alegreya Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonter/alegreya-sans-500-latin.43fe131a4e92.woff2") format('woff2');
  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: 'Alegreya Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonter/alegreya-sans-700-latin-ext.b10558b07723.woff2") format('woff2');
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Alegreya Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonter/alegreya-sans-700-latin.c198fa600447.woff2") format('woff2');
  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: 'Alegreya Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonter/alegreya-sans-800-latin-ext.a372c51f2f4e.woff2") format('woff2');
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Alegreya Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonter/alegreya-sans-800-latin.fd5f8b12e47e.woff2") format('woff2');
  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: 'Caveat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonter/caveat-500-latin-ext.2a8768f8ef1f.woff2") format('woff2');
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonter/caveat-500-latin.2d9de14f93a2.woff2") format('woff2');
  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: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonter/caveat-700-latin-ext.2a8768f8ef1f.woff2") format('woff2');
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonter/caveat-700-latin.2d9de14f93a2.woff2") format('woff2');
  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: 'Noto Music';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonter/noto-music-400-music.f1ff60889856.woff2") format('woff2');
  unicode-range: U+25CC, U+2669-266F, U+1D000-1D0F5, U+1D100-1D245;
}
@font-face {
  font-family: 'Noto Music';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonter/noto-music-400-latin-ext.02dd7388d6ad.woff2") format('woff2');
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Noto Music';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonter/noto-music-400-latin.be9e8df51991.woff2") format('woff2');
  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;
}

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
  /* Flater */
  --kb-bg:            #FFFFFF;  /* hovedflate */
  --kb-flate:         #FAF8F3;  /* bunnen av paneler, avspillingslinje */
  --kb-flate-varm:    #FBF8F1;  /* beskjeder, hover på rader */
  --kb-desk:          #F4F1EA;  /* bakgrunn bak noteark */
  --kb-side-1:        #FCFBF8;  /* sidefelt topp */
  --kb-side-2:        #F2EEE5;  /* sidefelt bunn */
  --kb-valgt:         #FAF7F0;  /* valgt rad */

  /* Streker */
  --kb-strek:         #ECEAE5;  /* hårstrek mellom rader, rundt paneler */
  --kb-strek-sterk:   #DCD7CC;  /* kant på ikonknapper og segmenter */
  --kb-side-kant:     #E6E2DA;  /* kant mellom sidefelt og innhold */
  --kb-felt-kant:     #8C8880;  /* kant på input/select (3,5:1) */

  /* Tekst */
  --kb-tekst:         #171717;  /* brødtekst (17:1) */
  --kb-dempet:        #5E5B55;  /* hjelpetekst (6,8:1) – aldri lysere */
  --kb-side-dempet:   #66625B;  /* hjelpetekst i sidefelt (5,2:1) */

  /* Gull – eneste aksentfarge */
  --kb-gull:          #B8892B;  /* gullstreken, primærknapp bunn */
  --kb-gull-lys:      #D4AA55;  /* primærknapp topp */
  --kb-gull-mork:     #8A6516;  /* gull som TEKST på lys flate (5,3:1) */
  --kb-gull-tint:     #FBF4E4;  /* aktiv av/på-knapp */
  --kb-gull-tint-2:   #FBF6EA;  /* valgt radiokort */

  /* Salmetavla – signaturen */
  --kb-tavle:         #171717;
  --kb-tavle-tekst:   #FFFFFF;
  --kb-tavle-mnd:     #E2BE6E;  /* månedsnavn/aksent på tavla (10:1) */

  /* Status */
  --kb-fare:          #8A2E2E;  /* avlyst, feil, slett (8,4:1) */
  --kb-felles:        #5B3A70;  /* felles notater fra styret (9,2:1) */

  /* Notatfarger (kun redigeringsmodus) */
  --kb-not-svart: #171717; --kb-not-rod: #C0392B; --kb-not-bla: #2F6DB5;
  --kb-not-gronn: #2E8B57; --kb-not-gul: #F2C230; --kb-not-rosa: #E26D9F;

  /* Gradienter – de ENESTE som er lov */
  --kb-grad-side:   linear-gradient(172deg, var(--kb-side-1) 0%, var(--kb-side-2) 100%);
  --kb-grad-topp:   linear-gradient(180deg, #FDFBF6 0%, #FFFFFF 100%);
  --kb-grad-panel:  linear-gradient(180deg, #FFFFFF 0%, var(--kb-flate) 100%);
  --kb-grad-knapp:  linear-gradient(180deg, var(--kb-gull-lys) 0%, var(--kb-gull) 100%);
  --kb-grad-desk:   linear-gradient(180deg, #F7F5F0 0%, #EFECE4 100%);

  /* Skygger – de ENESTE som er lov */
  --kb-skygge-ark:     0 1px 3px rgba(23,23,23,.10), 0 8px 24px rgba(23,23,23,.06);
  --kb-skygge-popover: 0 10px 30px rgba(23,23,23,.14);
  --kb-glans:          inset 0 1px 0 rgba(255,255,255,.35); /* kun primærknapp */

  /* Gullstreken – aktiv tilstand */
  --kb-aktiv-venstre: inset 3px 0 0 var(--kb-gull);
  --kb-aktiv-under:   inset 0 -3px 0 var(--kb-gull);

  /* Typografi */
  --kb-serif: "Alegreya", Georgia, serif;
  --kb-sans:  "Alegreya Sans", system-ui, sans-serif;
  --kb-musikk: "Noto Music", serif;
  --kb-hand:  "Caveat", cursive;            /* kun tekstnotater på noter */

  --kb-fs-xs: 12px; --kb-fs-s: 13px; --kb-fs-m: 15px; --kb-fs-l: 17px;
  --kb-fs-h3: 19px; --kb-fs-h2: 24px; --kb-fs-h1: 34px; --kb-fs-vis: 48px;

  /* Avstand (4-punkts skala) */
  --kb-1: 4px; --kb-2: 8px; --kb-3: 12px; --kb-4: 16px;
  --kb-5: 20px; --kb-6: 24px; --kb-8: 32px; --kb-12: 48px;

  /* Radius */
  --kb-r-tavle: 2px;   /* tavler */
  --kb-r: 4px;         /* knapper, felt, paneler */
  --kb-r-pop: 6px;     /* popover, dialog */
  --kb-r-ark: 12px;    /* kun øverste hjørner på bunnark (mobil) */
  --kb-r-pille: 999px; /* kun av/på-brikker og mottakere */

  /* Mål */
  --kb-trykk: 44px;          /* minste trykkflate */
  --kb-side-apen: 260px;
  --kb-side-lukket: 72px;
  --kb-detalj: 360px;
  --kb-topp-mobil: 56px;
  --kb-bunnmeny: 64px;

  --kb-fart: 160ms;
}

/* ---------- 2. Grunnlag -------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--kb-bg); color: var(--kb-tekst);
  font: 400 var(--kb-fs-m)/1.5 var(--kb-sans);
}
h1, h2, h3 { margin: 0; font-family: var(--kb-serif); font-weight: 700; letter-spacing: -0.015em; line-height: 1.1; }
h1 { font-size: var(--kb-fs-h1); }
h2 { font-size: var(--kb-fs-h2); }
h3 { font-family: var(--kb-sans); font-size: var(--kb-fs-h3); letter-spacing: 0; }
p { margin: 0; }
a { color: var(--kb-tekst); text-underline-offset: 3px; }
.kb-tall { font-variant-numeric: tabular-nums lining-nums; }
.kb-dempet { color: var(--kb-dempet); }
.kb-skjult { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

:focus-visible { outline: 2px solid var(--kb-gull-mork); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- 3. App-skall ------------------------------------------------- */
.kb-app {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: var(--kb-side-apen) minmax(0, 1fr);
  transition: grid-template-columns var(--kb-fart) ease;
}
.kb-app[data-sidefelt="lukket"] { grid-template-columns: var(--kb-side-lukket) minmax(0, 1fr); }
.kb-app--detalj { grid-template-columns: var(--kb-side-apen) minmax(0, 1fr) var(--kb-detalj); }
.kb-app--detalj[data-sidefelt="lukket"] { grid-template-columns: var(--kb-side-lukket) minmax(0, 1fr) var(--kb-detalj); }

.kb-sidefelt {
  position: sticky; top: 0; height: 100dvh; overflow-y: auto;
  background: var(--kb-grad-side); border-right: 1px solid var(--kb-side-kant);
  display: flex; flex-direction: column; gap: var(--kb-6); padding: var(--kb-5) 0;
}
.kb-sidefelt__topp { display: flex; align-items: center; justify-content: space-between; padding: 0 14px 0 var(--kb-6); min-height: 40px; }
.kb-ordmerke { font: 700 23px/1 var(--kb-serif); color: var(--kb-tekst); text-decoration: none; }
.kb-sidefelt__gruppe { display: flex; flex-direction: column; gap: 2px; padding: 0 var(--kb-6); }
.kb-sidefelt__tittel { font-size: var(--kb-fs-s); font-weight: 500; color: var(--kb-side-dempet); padding-bottom: 6px; }
.kb-app[data-sidefelt="lukket"] .kb-sidefelt__tekst,
.kb-app[data-sidefelt="lukket"] .kb-sidefelt__gruppe,
.kb-app[data-sidefelt="lukket"] .kb-ordmerke { display: none; }
.kb-app[data-sidefelt="lukket"] .kb-sidefelt { align-items: center; }

.kb-meny { display: flex; flex-direction: column; gap: 2px; padding: 0 10px; }
.kb-meny a {
  display: flex; align-items: center; gap: var(--kb-3); height: 42px; padding: 0 var(--kb-3);
  border-radius: var(--kb-r); color: var(--kb-tekst); text-decoration: none; font-size: 16px; white-space: nowrap;
}
.kb-meny a:hover { background: rgba(255,255,255,.6); }
.kb-meny a[aria-current="page"] { background: #FFFFFF; font-weight: 700; box-shadow: var(--kb-aktiv-venstre), 0 0 0 1px var(--kb-side-kant); }

.kb-innhold { min-width: 0; display: flex; flex-direction: column; }
.kb-sidetopp { padding: 26px 28px 14px; background: var(--kb-grad-topp); display: flex; flex-direction: column; gap: 14px; }
.kb-sidetopp__rad { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--kb-6); flex-wrap: wrap; }
.kb-brodsmule { font-size: 14px; color: var(--kb-dempet); text-decoration: none; }

.kb-detalj {
  border-left: 1px solid var(--kb-strek); background: var(--kb-grad-panel);
  padding: 28px 26px; display: flex; flex-direction: column; gap: var(--kb-5);
  position: sticky; top: 0; height: 100dvh; overflow-y: auto;
}

/* Bunnmeny – kun mobil */
.kb-bunnmeny { display: none; }

/* ---------- 4. Knapper --------------------------------------------------- */
.kb-knapp {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--kb-2);
  min-height: var(--kb-trykk); padding: 0 var(--kb-4); border-radius: var(--kb-r);
  font: 500 var(--kb-fs-m)/1 var(--kb-sans); text-decoration: none; cursor: pointer;
  border: 1px solid var(--kb-strek-sterk); background: #FFFFFF; color: var(--kb-tekst);
  transition: border-color var(--kb-fart), background var(--kb-fart);
}
.kb-knapp:hover { border-color: var(--kb-felt-kant); }
.kb-knapp--primar {
  border: 0; background: var(--kb-grad-knapp); box-shadow: var(--kb-glans);
  color: #1F1D1A; font-weight: 700;
}
.kb-knapp--primar:hover { filter: brightness(1.04); }
.kb-knapp--stor { min-height: 52px; font-size: var(--kb-fs-l); }
.kb-knapp--bred { width: 100%; }
.kb-knapp--stille { border-color: transparent; background: transparent; text-decoration: underline; padding: 0 var(--kb-2); }
.kb-knapp--fare { border-color: var(--kb-fare); color: var(--kb-fare); }
.kb-ikonknapp {
  width: 40px; height: 40px; flex: 0 0 40px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--kb-strek-sterk); border-radius: var(--kb-r); background: #FFFFFF; color: var(--kb-tekst); cursor: pointer;
}
.kb-ikonknapp:hover { border-color: var(--kb-felt-kant); }
/* Av/på-knapper (avspilling, A–B, følg noten, Om stykket) */
.kb-knapp[aria-pressed="true"], .kb-ikonknapp[aria-pressed="true"], .kb-knapp[aria-expanded="true"] {
  background: var(--kb-gull-tint); border-color: var(--kb-gull);
}
.kb-spill {
  width: 48px; height: 48px; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--kb-grad-knapp); box-shadow: var(--kb-glans); color: #1F1D1A;
  display: inline-flex; align-items: center; justify-content: center;
}
.kb-ikon { width: 20px; height: 20px; flex: 0 0 auto; stroke: currentColor; fill: none; stroke-width: 1.7; }

/* ---------- 5. Valg: faner, segmenter, radiokort, brikker -------------- */
.kb-faner { display: flex; gap: 22px; border-bottom: 1px solid var(--kb-strek); overflow-x: auto; scrollbar-width: none; }
.kb-fane {
  height: 44px; padding: 0 2px; border: 0; background: transparent; cursor: pointer; white-space: nowrap;
  font: 500 var(--kb-fs-m) var(--kb-sans); color: var(--kb-dempet);
}
.kb-fane[aria-selected="true"] { color: var(--kb-tekst); font-weight: 700; box-shadow: var(--kb-aktiv-under); }

.kb-segment { display: inline-flex; border: 1px solid var(--kb-strek-sterk); border-radius: var(--kb-r); overflow: hidden; }
.kb-segment > * {
  min-height: 36px; padding: 0 var(--kb-3); border: 0; background: #FFFFFF; color: var(--kb-tekst);
  font: 500 14px var(--kb-sans); cursor: pointer; display: inline-flex; align-items: center; text-decoration: none;
}
.kb-segment > [aria-checked="true"], .kb-segment > [aria-selected="true"] { background: var(--kb-tavle); color: #FFFFFF; font-weight: 700; }

.kb-radiokort {
  display: flex; gap: var(--kb-3); align-items: flex-start; text-align: left; width: 100%;
  padding: var(--kb-3) 14px; border: 1px solid var(--kb-strek-sterk); border-radius: var(--kb-r);
  background: #FFFFFF; cursor: pointer; font-family: var(--kb-sans); color: var(--kb-tekst);
}
.kb-radiokort[aria-checked="true"] { border-color: var(--kb-gull); background: var(--kb-gull-tint-2); }
.kb-radiokort__tittel { font-weight: 700; font-size: 16px; }
.kb-radiokort__tekst { font-size: 14px; color: var(--kb-dempet); }

.kb-filter {
  display: flex; justify-content: space-between; align-items: center; height: 34px;
  padding: 0 10px; margin: 0 -10px; border: 0; border-radius: var(--kb-r); background: transparent;
  font: 400 var(--kb-fs-m) var(--kb-sans); color: var(--kb-tekst); cursor: pointer; text-align: left;
}
.kb-filter:hover { background: rgba(255,255,255,.6); }
.kb-filter[aria-pressed="true"] { background: #FFFFFF; font-weight: 700; box-shadow: var(--kb-aktiv-venstre); }
.kb-filter__antall { font-size: 14px; color: var(--kb-side-dempet); font-weight: 400; }

.kb-brikke {
  min-height: 30px; padding: 0 10px; border: 1px solid var(--kb-strek-sterk); border-radius: var(--kb-r-pille);
  background: #FFFFFF; font: 600 13px var(--kb-sans); color: var(--kb-tekst); cursor: pointer;
}
.kb-brikke[aria-pressed="true"] { background: var(--kb-gull-tint); border-color: var(--kb-gull); }

/* ---------- 6. Skjema ---------------------------------------------------- */
.kb-felt { display: flex; flex-direction: column; gap: 6px; }
.kb-felt label { font-size: var(--kb-fs-m); font-weight: 500; }
.kb-felt__hjelp { font-size: var(--kb-fs-s); color: var(--kb-dempet); }
.kb-felt__feil { font-size: var(--kb-fs-s); color: var(--kb-fare); font-weight: 700; }
.kb-input, .kb-select, .kb-textarea {
  min-height: 46px; padding: 0 14px; border: 1px solid var(--kb-felt-kant); border-radius: var(--kb-r);
  background: #FFFFFF; font: 400 16px var(--kb-sans); color: var(--kb-tekst); width: 100%;
}
.kb-textarea { padding: var(--kb-3) 14px; min-height: 120px; line-height: 1.5; }
.kb-input[aria-invalid="true"] { border-color: var(--kb-fare); }
.kb-sok { position: relative; }
.kb-sok .kb-ikon { position: absolute; left: 14px; top: 50%; translate: 0 -50%; color: var(--kb-dempet); }
.kb-sok .kb-input { padding-left: 42px; padding-right: 52px; }
.kb-sok kbd { position: absolute; right: 12px; top: 50%; translate: 0 -50%; }
kbd {
  font: 600 12px var(--kb-sans); color: var(--kb-dempet); background: var(--kb-flate);
  border: 1px solid var(--kb-strek-sterk); border-bottom-width: 2px; border-radius: 3px; padding: 0 6px;
}
input[type="range"], input[type="checkbox"], input[type="radio"] { accent-color: var(--kb-gull); }

/* ---------- 7. Lister og tabeller --------------------------------------- */
.kb-liste { list-style: none; margin: 0; padding: 0; }
.kb-tabell { width: 100%; border-collapse: collapse; }
.kb-tabell th {
  text-align: left; padding: 8px var(--kb-3); font-size: var(--kb-fs-s); font-weight: 500;
  color: var(--kb-dempet); border-bottom: 1px solid var(--kb-tekst);
}
.kb-tabell th[aria-sort] { color: var(--kb-tekst); font-weight: 700; }
.kb-tabell td { padding: 11px var(--kb-3); border-bottom: 1px solid var(--kb-strek); vertical-align: middle; font-size: 14px; }
.kb-tabell tbody tr:hover { background: var(--kb-flate-varm); }
.kb-tabell tbody tr[aria-selected="true"] { background: var(--kb-valgt); box-shadow: var(--kb-aktiv-venstre); }
.kb-rad__tittel { font-weight: 700; font-size: 16px; color: var(--kb-tekst); text-decoration: none; }
.kb-rad__tittel:hover { text-decoration: underline; }
.kb-rad__under { display: block; font-size: 14px; color: var(--kb-dempet); }
.kb-tom-verdi { color: var(--kb-dempet); }

/* Merker (alltid tekst, aldri bare farge) */
.kb-merke { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; }
.kb-merke--neste { color: var(--kb-gull-mork); }
.kb-merke--neste::before { content: ""; width: 7px; height: 7px; border-radius: 1px; background: var(--kb-gull); }
.kb-merke--bekreftet { color: var(--kb-gull-mork); }
.kb-merke--planlagt { color: var(--kb-dempet); font-weight: 500; }
.kb-merke--avlyst { color: var(--kb-fare); }
.kb-avlyst-tittel { text-decoration: line-through; color: var(--kb-dempet); }

/* ---------- 8. Signaturen: datotavle og setliste ------------------------ */
.kb-datotavle {
  flex: 0 0 auto; width: 56px; height: 62px; border-radius: var(--kb-r-tavle);
  background: var(--kb-tavle); border-top: 3px solid var(--kb-gull);
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  text-decoration: none;
}
.kb-datotavle__dag { font: 800 25px/1 var(--kb-sans); color: var(--kb-tavle-tekst); font-variant-numeric: tabular-nums lining-nums; }
.kb-datotavle__mnd { font: 500 13px/1 var(--kb-sans); color: var(--kb-tavle-mnd); }
.kb-datotavle--stor { width: 68px; height: 74px; }
.kb-datotavle--stor .kb-datotavle__dag { font-size: 32px; }
.kb-datotavle--liten { width: 40px; height: 44px; border-top-width: 2px; }
.kb-datotavle--liten .kb-datotavle__dag { font-size: 17px; }
.kb-datotavle--liten .kb-datotavle__mnd { font-size: 11px; }
.kb-datotavle--avlyst { background: var(--kb-felt-kant); border-top-color: var(--kb-felt-kant); }
.kb-datotavle--avlyst .kb-datotavle__mnd { color: #FFFFFF; }

.kb-setliste { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--kb-gull); }
.kb-setliste li { border-bottom: 1px solid var(--kb-strek); }
.kb-setliste > li > a {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; gap: var(--kb-4);
  align-items: center; padding: var(--kb-3) var(--kb-2); text-decoration: none; color: var(--kb-tekst);
}
.kb-setliste > li > a:hover { background: var(--kb-flate-varm); }
.kb-setliste__nr { font: 800 30px/1 var(--kb-sans); text-align: right; font-variant-numeric: tabular-nums lining-nums; }

/* ---------- 9. Paneler, beskjeder, utvidbare seksjoner ------------------ */
.kb-beskjed { padding: var(--kb-3) var(--kb-4); background: var(--kb-flate-varm); border: 1px solid #EFE7D6; border-radius: var(--kb-r); }
.kb-beskjed--feil { background: #FBF1F1; border-color: #EBCFCF; color: var(--kb-fare); }
.kb-fakta { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kb-3) var(--kb-4); }
.kb-fakta dt { font-size: var(--kb-fs-s); color: var(--kb-dempet); }
.kb-fakta dd { margin: 2px 0 0; font-weight: 500; }
.kb-utvid { border-top: 1px solid var(--kb-strek); border-bottom: 1px solid var(--kb-strek); }
.kb-utvid > summary { padding: var(--kb-3) 0; font-weight: 700; cursor: pointer; min-height: var(--kb-trykk); display: flex; align-items: center; }
.kb-skille { width: 1px; height: 24px; background: var(--kb-strek); margin: 0 4px; }

.kb-popover {
  background: #FFFFFF; border: 1px solid var(--kb-strek-sterk); border-radius: var(--kb-r-pop);
  box-shadow: var(--kb-skygge-popover); padding: 14px;
}
.kb-dialog { border: 1px solid var(--kb-strek-sterk); border-radius: var(--kb-r-pop); box-shadow: var(--kb-skygge-popover); padding: var(--kb-6); max-width: 440px; }
dialog:not([open]) { display: none !important; } /* .kb-send setter display: flex – lukket dialog skal aldri vises */
.kb-dialog::backdrop { background: rgba(23,23,23,.35); }

.kb-melding { /* toast, nederst til høyre / over bunnmenyen på mobil */
  position: fixed; right: var(--kb-6); bottom: var(--kb-6); z-index: 50;
  background: var(--kb-tavle); color: #FFFFFF; border-top: 2px solid var(--kb-gull);
  border-radius: var(--kb-r-tavle); padding: var(--kb-3) var(--kb-4); font-size: var(--kb-fs-m);
}

.kb-tom { padding: var(--kb-12) var(--kb-6); text-align: center; color: var(--kb-dempet); display: flex; flex-direction: column; gap: var(--kb-3); align-items: center; }
.kb-laster.htmx-request, form.htmx-request .kb-laster { opacity: .5; pointer-events: none; transition: opacity var(--kb-fart); }

/* ---------- 10. Notevisning (fremføring / øving / redigering) ----------- */
.kb-visning { position: fixed; inset: 0; background: var(--kb-desk); display: flex; flex-direction: column; z-index: 40; }
.kb-visning__topp, .kb-visning__bunn {
  flex: 0 0 auto; background: rgba(255,255,255,.97); display: flex; align-items: center; gap: var(--kb-2); padding: 0 10px;
}
.kb-visning__topp { height: 44px; border-bottom: 1px solid var(--kb-strek); justify-content: space-between; }
.kb-visning__bunn { height: 56px; border-top: 1px solid var(--kb-strek); }
.kb-visning__ark { flex: 1; min-height: 0; display: flex; justify-content: center; overflow: hidden; }
.kb-visning__ark canvas, .kb-ark { background: #FFFFFF; box-shadow: var(--kb-skygge-ark); }
.kb-visning[data-modus="fremforing"].kb-rolig .kb-visning__topp,
.kb-visning[data-modus="fremforing"].kb-rolig .kb-visning__bunn { opacity: 0; pointer-events: none; transition: opacity 300ms; }

.kb-stykke { /* et stykke i setliste-stripa nederst */
  flex: 1; min-width: 0; height: 40px; display: flex; align-items: center; gap: var(--kb-2); padding: 0 10px;
  border-radius: var(--kb-r); text-decoration: none; color: var(--kb-tekst); font-size: 13px;
}
.kb-stykke__nr { font: 800 18px var(--kb-sans); }
.kb-stykke[aria-current="step"] { background: var(--kb-tavle); color: #FFFFFF; box-shadow: inset 0 2px 0 var(--kb-gull); font-weight: 700; }
.kb-stykke[aria-current="step"] .kb-stykke__nr { color: var(--kb-tavle-mnd); }

.kb-avspilling {
  border-top: 1px solid var(--kb-side-kant); background: var(--kb-grad-panel);
  padding: 14px 18px; display: flex; flex-direction: column; gap: 14px;
}
.kb-avspilling__rad { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kb-bolge { flex: 1; min-width: 120px; height: 34px; position: relative; }
.kb-bolge__loop { position: absolute; top: -4px; bottom: -4px; background: rgba(212,170,85,.18); border-inline: 2px solid var(--kb-gull); }
.kb-takt-markor { background: rgba(212,170,85,.22); } /* «Følg noten» */

.kb-verktoy { display: flex; align-items: center; gap: 4px; padding: 0 12px; height: 56px; background: var(--kb-grad-panel); border-bottom: 1px solid var(--kb-strek); }
.kb-verktoy__knapp {
  width: 44px; height: 44px; border: 0; border-radius: var(--kb-r); background: transparent; color: var(--kb-tekst);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font: 500 10px var(--kb-sans); cursor: pointer;
}
.kb-verktoy__knapp[aria-pressed="true"] { background: var(--kb-tavle); color: #FFFFFF; box-shadow: inset 0 -2px 0 var(--kb-gull); }
.kb-fargeprikk { width: 30px; height: 30px; border: 0; border-radius: 50%; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.kb-fargeprikk[aria-checked="true"] { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--kb-tekst); }
.kb-symbol { height: 40px; border: 1px solid var(--kb-strek); border-radius: var(--kb-r); background: #FFFFFF; font: 26px/1 var(--kb-musikk); cursor: pointer; }
.kb-symbol:hover { border-color: var(--kb-gull); background: var(--kb-gull-tint-2); }

/* ---------- 10b. Deling og sending (alle skjermer) --------------------- */
/* Handlingsrad: alltid E-post · Del … · Kopier lenke · Last ned */
.kb-handlinger { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--kb-2); }
.kb-handling {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 72px; padding: var(--kb-2) var(--kb-1); border: 1px solid var(--kb-strek); border-radius: var(--kb-r);
  background: #FFFFFF; color: var(--kb-tekst); font: 500 var(--kb-fs-s) var(--kb-sans); text-decoration: none; cursor: pointer;
}
.kb-handling:hover { border-color: var(--kb-gull); background: var(--kb-gull-tint-2); }
.kb-handling[hidden] { display: none; } /* f.eks. «Del …» der Web Share mangler */

/* Send-arket: dialog på desktop/nettbrett, bunnark på mobil */
.kb-send { width: min(520px, 100vw); max-height: min(760px, 92dvh); display: flex; flex-direction: column; padding: 0; }
.kb-send__hode { display: flex; align-items: center; justify-content: space-between; padding: var(--kb-3) var(--kb-2) var(--kb-1) var(--kb-5); }
.kb-send__kropp { flex: 1; min-height: 0; overflow-y: auto; padding: var(--kb-1) var(--kb-4) var(--kb-4); display: flex; flex-direction: column; gap: var(--kb-4); }
.kb-send__fot { padding: var(--kb-3) var(--kb-4) var(--kb-4); border-top: 1px solid var(--kb-strek); display: flex; flex-direction: column; gap: 6px; }
.kb-hank { display: none; width: 40px; height: 4px; border-radius: 2px; background: var(--kb-strek-sterk); margin: var(--kb-2) auto 0; }
.kb-mottaker {
  display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0 4px 0 10px;
  border-radius: var(--kb-r-pille); background: var(--kb-desk); font-size: 14px;
}
.kb-mottaker button { width: 28px; height: 28px; border: 0; background: transparent; color: var(--kb-dempet); cursor: pointer; }
.kb-mottaker--ny { border: 1px dashed var(--kb-felt-kant); background: #FFFFFF; padding: 0 10px; cursor: pointer; }
.kb-melding__angre { border: 0; background: transparent; color: var(--kb-tavle-mnd); font: 700 var(--kb-fs-m) var(--kb-sans); cursor: pointer; min-height: 36px; padding: 0 10px; }

/* Flervalg-modus */
.kb-flervalg-linje {
  display: flex; flex-direction: column; gap: 10px; padding: var(--kb-3) var(--kb-3) var(--kb-4);
  border-top: 1px solid var(--kb-strek); background: var(--kb-grad-panel);
}
.kb-flervalg-linje .kb-handlinger { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kb-flervalg-linje .kb-handling { min-height: 60px; }

/* ---------- 11. Responsivt ---------------------------------------------- */
/* Nettbrett liggende / liten laptop: sidefelt lukket som standard, detalj som skuff */
@media (max-width: 1199px) {
  .kb-app, .kb-app--detalj { grid-template-columns: var(--kb-side-lukket) minmax(0, 1fr); }
  .kb-app[data-sidefelt="apen"] { grid-template-columns: var(--kb-side-apen) minmax(0, 1fr); }
  .kb-detalj {
    position: fixed; top: 0; right: 0; bottom: 0; width: min(var(--kb-detalj), 92vw); z-index: 30;
    box-shadow: var(--kb-skygge-popover); translate: 100% 0; transition: translate var(--kb-fart) ease;
  }
  .kb-detalj[data-apen="true"] { translate: 0 0; }
}

/* Nettbrett stående og mindre: sidefelt blir skuff fra venstre */
@media (max-width: 899px) {
  .kb-app, .kb-app--detalj, .kb-app[data-sidefelt] { grid-template-columns: minmax(0, 1fr); }
  .kb-sidefelt {
    position: fixed; inset: 0 auto 0 0; width: var(--kb-side-apen); z-index: 35;
    translate: -100% 0; transition: translate var(--kb-fart) ease; box-shadow: var(--kb-skygge-popover);
  }
  .kb-app[data-sidefelt="apen"] .kb-sidefelt { translate: 0 0; }
  .kb-app[data-sidefelt="apen"] .kb-sidefelt__gruppe,
  .kb-app[data-sidefelt="apen"] .kb-ordmerke { display: flex; }
  .kb-mobiltopp { display: flex; }
}
.kb-mobiltopp {
  display: none; position: sticky; top: 0; z-index: 20; height: var(--kb-topp-mobil);
  align-items: center; justify-content: space-between; gap: var(--kb-3); padding: 0 var(--kb-4);
  background: rgba(255,255,255,.97); border-bottom: 1px solid var(--kb-strek);
}

/* Mobil: bunnmeny, ingen sidefelt i flyten, primærhandling klistret nederst */
@media (max-width: 599px) {
  body { font-size: 16px; }
  h1 { font-size: 28px; }
  .kb-sidetopp { padding: var(--kb-5) var(--kb-4) var(--kb-3); }
  .kb-innhold { padding-bottom: calc(var(--kb-bunnmeny) + env(safe-area-inset-bottom)); }
  .kb-bunnmeny {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
    height: calc(var(--kb-bunnmeny) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    background: #FFFFFF; border-top: 1px solid var(--kb-strek);
  }
  .kb-bunnmeny a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    font-size: 12px; color: var(--kb-dempet); text-decoration: none;
  }
  .kb-bunnmeny a[aria-current="page"] { color: var(--kb-tekst); font-weight: 700; box-shadow: inset 0 3px 0 var(--kb-gull); }
  .kb-klistret-handling {
    position: sticky; bottom: calc(var(--kb-bunnmeny) + env(safe-area-inset-bottom) + 8px);
    margin: 0 var(--kb-4); z-index: 15;
  }
  .kb-tabell--mobil thead { display: none; }
  .kb-tabell--mobil tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--kb-3); padding: var(--kb-3) var(--kb-4); border-bottom: 1px solid var(--kb-strek); }
  .kb-tabell--mobil td { padding: 0; border: 0; }
  .kb-tabell--mobil td[data-mobil="skjul"] { display: none; }
  .kb-melding { left: var(--kb-4); right: var(--kb-4); bottom: calc(var(--kb-bunnmeny) + 12px); }
  .kb-visning__bunn .kb-stykke__tittel { display: none; }
  .kb-send {                                   /* bunnark */
    position: fixed; inset: auto 0 0 0; width: 100%; max-width: none; max-height: 92dvh; margin: 0;
    border: 0; border-radius: var(--kb-r-ark) var(--kb-r-ark) 0 0; box-shadow: 0 -10px 30px rgba(23,23,23,.18);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .kb-send .kb-hank { display: block; }
  .kb-flervalg-linje { position: sticky; bottom: 0; z-index: 26; padding-bottom: calc(var(--kb-4) + env(safe-area-inset-bottom)); }
  .kb-app[data-flervalg="ja"] .kb-bunnmeny { display: none; }
}

/* ---------- 12. Tillegg (bygget av tokens over; se DESIGN.md §7 «Tillegg») */
/* Sidefelt: neste oppdrag og utlogging nederst */
.kb-sidefelt__neste { margin-top: auto; }
.kb-neste { display: flex; gap: var(--kb-3); align-items: center; text-decoration: none; color: var(--kb-tekst); font-size: var(--kb-fs-s); }
.kb-neste strong { font-size: var(--kb-fs-m); }
.kb-sidefelt__ut .kb-knapp { justify-content: flex-start; padding: 0 var(--kb-2); color: var(--kb-dempet); }
.kb-app[data-sidefelt="lukket"] .kb-sidefelt__ut,
.kb-app[data-sidefelt="lukket"] .kb-sidefelt__neste { display: flex; padding: 0; }
.kb-app[data-sidefelt="lukket"] .kb-sidefelt__neste .kb-neste > span:last-child,
.kb-app[data-sidefelt="lukket"] .kb-sidefelt__neste .kb-sidefelt__tittel { display: none; }
.kb-skuffbakgrunn { position: fixed; inset: 0; z-index: 34; background: rgba(23,23,23,.35); }
.kb-mobiltopp__plass { width: 40px; }

/* Meldinger: stables nederst til høyre */
.kb-meldinger { position: fixed; right: var(--kb-6); bottom: var(--kb-6); z-index: 50; display: flex; flex-direction: column; gap: var(--kb-2); }
.kb-meldinger .kb-melding { position: static; }
.kb-melding--feil { border-top-color: var(--kb-fare); }
@media (max-width: 599px) { .kb-meldinger { left: var(--kb-4); right: var(--kb-4); bottom: calc(var(--kb-bunnmeny) + 12px); } }

/* Innholdsområdet */
.kb-flate { padding: var(--kb-4) 28px var(--kb-12); display: flex; flex-direction: column; gap: var(--kb-6); }
.kb-skjema { max-width: 640px; display: flex; flex-direction: column; gap: var(--kb-4); }
.kb-knapperad { display: flex; flex-wrap: wrap; gap: var(--kb-2); align-items: center; }
.kb-verktoylinje { display: flex; flex-wrap: wrap; gap: var(--kb-2); align-items: center; }
.kb-lesebredde { max-width: 65ch; }
@media (max-width: 599px) { .kb-flate { padding: var(--kb-3) var(--kb-4) var(--kb-8); } }

/* Skjemafelt: avkrysning og grupper av valg */
.kb-felt--avkrysning label { display: flex; align-items: center; gap: var(--kb-2); min-height: var(--kb-trykk); font-weight: 400; }
.kb-felt fieldset { border: 0; padding: 0; margin: 0; }
.kb-felt legend { font-size: var(--kb-fs-m); font-weight: 500; padding: 0 0 6px; }
.kb-felt fieldset > div { display: flex; flex-wrap: wrap; gap: 0 var(--kb-5); }
.kb-felt fieldset label { display: inline-flex; align-items: center; gap: var(--kb-2); min-height: var(--kb-trykk); font-weight: 400; }
.kb-felt input[type="file"] { font: inherit; min-height: var(--kb-trykk); }
.kb-felt input[type="checkbox"], .kb-felt input[type="radio"] { width: 20px; height: 20px; }

/* Offentlige sider (uten app-skall) */
.kb-offentlig-topp { display: flex; align-items: center; justify-content: space-between; gap: var(--kb-4); flex-wrap: wrap;
  max-width: 1080px; margin: 0 auto; padding: var(--kb-5) var(--kb-6); border-bottom: 1px solid var(--kb-strek); }
.kb-offentlig-topp nav { display: flex; gap: var(--kb-5); flex-wrap: wrap; }
.kb-offentlig-topp nav a { text-decoration: none; min-height: var(--kb-trykk); display: inline-flex; align-items: center; }
.kb-offentlig-topp nav a[aria-current="page"] { font-weight: 700; box-shadow: var(--kb-aktiv-under); }
.kb-offentlig { max-width: 1080px; margin: 0 auto; padding: var(--kb-8) var(--kb-6) var(--kb-12); display: flex; flex-direction: column; gap: var(--kb-6); }
.kb-offentlig-fot { max-width: 1080px; margin: 0 auto; padding: var(--kb-6); border-top: 1px solid var(--kb-strek); color: var(--kb-dempet); font-size: var(--kb-fs-s); }
.kb-prosa { font-family: var(--kb-serif); font-size: var(--kb-fs-l); max-width: 65ch; display: flex; flex-direction: column; gap: var(--kb-3); }
.kb-prosa h2 { margin-top: var(--kb-4); }
.kb-smal { max-width: 440px; width: 100%; }
@media (max-width: 599px) { .kb-offentlig { padding: var(--kb-5) var(--kb-4) var(--kb-8); } .kb-offentlig-topp { padding: var(--kb-4); } }

/* Oppdragsliste: datotavle + tekst */
.kb-oppdragsrad { display: flex; gap: var(--kb-4); align-items: center; padding: var(--kb-3) 0; border-bottom: 1px solid var(--kb-strek); text-decoration: none; color: var(--kb-tekst); }
.kb-oppdragsrad:hover { background: var(--kb-flate-varm); }
.kb-oppdragsrad__tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kb-oppdragsrad__tittel { font-weight: 700; font-size: 16px; }

/* Min konto: Innstillinger-knapp bare på mobil (der sidefeltet ikke finnes) */
.kb-mobil-innstillinger { display: none; align-self: flex-start; }
@media (max-width: 599px) { .kb-mobil-innstillinger { display: inline-flex; } }

/* Forside (offentlig) og innstillinger */
.kb-forside { display: grid; gap: var(--kb-8) var(--kb-12); grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
.kb-forside__konserter { display: flex; flex-direction: column; gap: var(--kb-3); }
.kb-oppdragsrad--hoy { align-items: flex-start; }
@media (max-width: 899px) { .kb-forside { grid-template-columns: minmax(0, 1fr); } }
.kb-innstillinger { display: grid; gap: var(--kb-6) var(--kb-12); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.kb-innstillinger h2 { margin-bottom: var(--kb-2); }
.kb-lenkeliste li { border-bottom: 1px solid var(--kb-strek); }
.kb-lenkeliste a { display: flex; align-items: center; gap: var(--kb-3); min-height: var(--kb-trykk); text-decoration: none; }
.kb-lenkeliste a:hover { background: var(--kb-flate-varm); }

/* Notearkiv: filtre som lenker, flervalg, detaljpanel */
.kb-filter[aria-current="true"] { background: #FFFFFF; font-weight: 700; box-shadow: var(--kb-aktiv-venstre); }
.kb-filter { text-decoration: none; }
.kb-arkivsok { display: flex; gap: var(--kb-2); align-items: center; }
.kb-arkivsok .kb-sok { flex: 1; }
.kb-mobilfilter { display: none; }
.kb-arkivliste { padding: 0 28px var(--kb-8); }
.kb-tabell th a { color: inherit; text-decoration: none; }
.kb-tabell th[aria-sort="ascending"] a::after { content: " ▲"; font-size: 10px; }
.kb-tabell th[aria-sort="descending"] a::after { content: " ▼"; font-size: 10px; }
.kb-velgkolonne { width: 36px; display: none; }
.kb-app[data-flervalg="ja"] .kb-velgkolonne { display: table-cell; }
.kb-tabell tbody tr[data-kb-rad] { cursor: pointer; }
.kb-bare-mobil { display: none; }
.kb-sider { display: flex; gap: var(--kb-4); align-items: center; justify-content: center; padding: var(--kb-4) 0; }
.kb-flervalg-linje[hidden] { display: none; }
.kb-flervalg-linje { position: sticky; bottom: 0; z-index: 10; }
.kb-panelhode { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--kb-3); }
.kb-panel-lukk { display: none; }
.kb-fakta > div { display: contents; }
.kb-stemmeliste li { display: flex; align-items: center; justify-content: space-between; gap: var(--kb-2); padding: 6px 0; border-bottom: 1px solid var(--kb-strek); }
.kb-stemmeliste a:first-child { text-decoration: none; font-weight: 500; }
.kb-filterark .kb-sidefelt__gruppe { padding: 0; }
@media (max-width: 1199px) { .kb-panel-lukk { display: inline-flex; } }
@media (max-width: 899px) {
  .kb-detalj { display: none; }
  .kb-arkivliste { padding: 0 var(--kb-4) var(--kb-8); }
}
@media (max-width: 599px) {
  .kb-mobilfilter { display: inline-flex; }
  .kb-bare-mobil { display: inline; }
  .kb-app[data-flervalg="ja"] .kb-tabell--mobil tr { grid-template-columns: 32px minmax(0, 1fr) auto; }
  .kb-app[data-flervalg="ja"] .kb-tabell--mobil td.kb-velgkolonne { display: block; }
}

/* Verkside (dokument) */
.kb-dokumentverktoy { justify-content: flex-end; }
.kb-verkflate { display: flex; flex-direction: column; gap: var(--kb-4); }
.kb-stemmeinfo { display: flex; justify-content: space-between; align-items: center; gap: var(--kb-3); flex-wrap: wrap; }
.kb-stemmeinfo p { margin: 0; }
.kb-arkflate { display: flex; flex-direction: column; align-items: center; gap: var(--kb-4); padding: var(--kb-4); background: var(--kb-desk); border-radius: var(--kb-r); min-height: 240px; }
.kb-arkflate .kb-ark { max-width: 100%; height: auto; }
.kb-mobildeling { display: none; flex-direction: column; gap: var(--kb-3); }
.kb-om-mobil { display: none; }
.kb-om-panel { overflow-y: auto; }
.kb-ovespiller { display: flex; flex-direction: column; gap: var(--kb-3); }
.kb-ovespiller .kb-avspilling { border: 1px solid var(--kb-strek); border-radius: var(--kb-r); }
.kb-avspilling__tittel { display: flex; flex-direction: column; flex: 1; min-width: 160px; }
.kb-egenskap input[type=range] { flex: 1; accent-color: var(--kb-gull); }
.kb-klikk[aria-pressed="true"] { background: var(--kb-tavle); color: #FFFFFF; box-shadow: inset 0 -2px 0 var(--kb-gull); }
.kb-klikk__tempo { display: inline-flex; align-items: center; gap: 6px; font-size: var(--kb-fs-s); }
.kb-klikk__tempo input { width: 72px; min-height: 36px; }
@media (min-width: 1200px) { .kb-app--detalj .kb-om-panel { position: static; translate: none; } }
@media (min-width: 600px) and (max-width: 899px) { .kb-om-panel { display: block; } }
@media (max-width: 599px) {
  .kb-dokumentverktoy { display: none; }
  .kb-mobildeling, .kb-om-mobil { display: flex; }
  .kb-om-mobil { display: block; }
  .kb-om-panel { display: none; }
  .kb-arkflate { padding: var(--kb-2); }
  .kb-stemmeinfo .kb-knapp--stille { display: none; }
}

/* Notevisning: moduser, lag og verktøy */
.kb-visning__midt, .kb-visning__hoyre { display: flex; align-items: center; gap: var(--kb-2); min-width: 0; }
.kb-visning__midt { flex: 1; justify-content: center; }
.kb-visning__status { margin: 0; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.kb-visning__ark { position: relative; align-items: center; padding: 8px; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.kb-side { position: relative; flex: 0 0 auto; }
.kb-side .kb-ark { display: block; }
.kb-notatlag { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
.kb-markorlag { mix-blend-mode: multiply; } /* markører multipliseres som ett lag: de bygger seg ikke opp */
.kb-notat--symbol { font-family: var(--kb-musikk); }
.kb-notat--sans { font-family: var(--kb-sans); font-weight: 800; }
.kb-visning__laster { position: absolute; inset: 0; justify-content: center; }
.kb-visning__laster[hidden] { display: none; }
.kb-visning__hint { position: absolute; left: 50%; bottom: var(--kb-4); translate: -50% 0; margin: 0; background: var(--kb-tavle); color: #FFFFFF; border-top: 2px solid var(--kb-gull); border-radius: var(--kb-r-tavle); padding: var(--kb-2) var(--kb-4); font-size: var(--kb-fs-s); }
.kb-visning__hint[hidden] { display: none; }
.kb-setlistestripe { display: flex; gap: 4px; width: 100%; overflow-x: auto; scrollbar-width: none; }
.kb-setlistestripe .kb-stykke { border: 0; background: transparent; font-family: var(--kb-sans); cursor: pointer; min-width: 120px; }
.kb-setlistestripe .kb-stykke:disabled { color: var(--kb-dempet); cursor: not-allowed; }
.kb-stykke__tittel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-sidebla { display: flex; align-items: center; justify-content: center; gap: var(--kb-3); width: 100%; }
.kb-lagvalg { position: relative; }
.kb-lagmeny { position: absolute; right: 0; top: calc(100% + 6px); width: 260px; z-index: 5; display: flex; flex-direction: column; gap: var(--kb-2); }
.kb-lagmeny[hidden], .kb-symbolpalett[hidden] { display: none; }
.kb-symbolpalett { position: fixed; z-index: 45; width: min(340px, calc(100vw - 16px)); }
.kb-symbolrad { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-bottom: var(--kb-2); }
.kb-symbol--tekst { font: 800 16px var(--kb-sans); }
.kb-symbol[aria-pressed="true"] { border-color: var(--kb-gull); background: var(--kb-gull-tint); }
.kb-verktoy { overflow-x: auto; scrollbar-width: none; }
.kb-verktoy__knapp .kb-ikon { width: 20px; height: 20px; }
.kb-verktoy__symbol { font: 20px/1 var(--kb-musikk); height: 20px; }
.kb-farger { display: flex; gap: 8px; padding: 0 4px; }
.kb-egenskaper { display: flex; align-items: center; gap: var(--kb-4); flex-wrap: wrap; padding: 6px 12px; background: #FFFFFF; border-bottom: 1px solid var(--kb-strek); font-size: var(--kb-fs-s); }
.kb-egenskap { display: inline-flex; align-items: center; gap: var(--kb-2); }
.kb-visning__oving { flex: 0 0 auto; max-height: 45dvh; overflow-y: auto; }
.kb-visning__oving .kb-avspilling { padding: 10px 14px; gap: 8px; }

/* Hva som vises i hver modus */
.kb-visning__topp--rediger, .kb-verktoy, .kb-egenskaper, .kb-visning__oving, .kb-bare-oving { display: none; }
.kb-visning[data-modus="rediger"] .kb-visning__topp--vis,
.kb-visning[data-modus="rediger"] .kb-visning__bunn,
.kb-visning[data-modus="oving"] .kb-visning__bunn { display: none; }
.kb-visning[data-modus="rediger"] .kb-visning__topp--rediger { display: flex; }
.kb-visning[data-modus="rediger"] .kb-verktoy, .kb-visning[data-modus="rediger"] .kb-egenskaper { display: flex; }
.kb-visning[data-modus="oving"] .kb-visning__oving { display: block; }
.kb-visning[data-modus="oving"] .kb-bare-oving { display: inline-flex; }
.kb-visning[data-modus="rediger"] .kb-notatlag { pointer-events: auto; touch-action: none; cursor: crosshair; }
.kb-visning[data-modus="rediger"][data-verktoy="velg"] .kb-notatlag { cursor: move; }
.kb-visning[data-modus="rediger"][data-verktoy="tekst"] .kb-notatlag { cursor: text; }
.kb-visning[data-modus="rediger"][data-lag="mine"] .kb-notatlag__felles { opacity: .55; }
.kb-visning[data-lag="felles"] .kb-farger { opacity: .4; pointer-events: none; } /* felles notater tegnes alltid i --kb-felles */
.kb-bare-desktop { display: inline; }

.kb-avslutt { flex: 0 0 auto; }
@media (max-width: 599px) {
  .kb-bare-desktop { display: none; }
  /* Mobil: Avslutt · «2 / 5 Glade jul» · lag · Rediger, og segmentet på egen rad under */
  .kb-visning__topp--vis { flex-wrap: wrap; height: auto; padding-block: 4px; row-gap: 4px; }
  .kb-visning__topp--vis .kb-modusvalg { order: 10; flex-basis: 100%; justify-content: center; border: 0; }
  .kb-visning__topp--vis .kb-modusvalg > * { flex: 1; justify-content: center; border: 1px solid var(--kb-strek-sterk); }
  .kb-visning__midt { gap: 0; }
  .kb-visning__midt .kb-ikonknapp { width: 36px; height: 36px; }
  .kb-visning__status { font-size: 13px; }
  .kb-setlistestripe .kb-stykke { min-width: 44px; flex: 0 0 auto; justify-content: center; }
  /* Redigering: verktøy helt nederst (tommelavstand), egenskaper rett over */
  .kb-visning[data-modus="rediger"] .kb-visning__ark { order: 1; }
  .kb-visning[data-modus="rediger"] .kb-egenskaper { order: 2; border-top: 1px solid var(--kb-strek); }
  .kb-visning[data-modus="rediger"] .kb-verktoy { order: 3; border-top: 1px solid var(--kb-strek); border-bottom: 0; padding-bottom: env(safe-area-inset-bottom); height: auto; min-height: 56px; }
  .kb-visning__oving { max-height: 55dvh; }
}


.kb-visuelt-skjult { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Oppdrag: sidefelt-kontekst, liste og kalender */
.kb-sideoppdrag { display: flex; gap: var(--kb-3); align-items: center; padding: 6px 10px; margin: 0 -10px; border-radius: var(--kb-r); text-decoration: none; color: var(--kb-tekst); font-size: var(--kb-fs-s); }
.kb-sideoppdrag:hover { background: rgba(255,255,255,.6); }
.kb-sideoppdrag[aria-current="page"] { background: #FFFFFF; box-shadow: var(--kb-aktiv-venstre); }
.kb-sideoppdrag[aria-current="page"] .kb-sideoppdrag__tittel { font-weight: 700; }
.kb-sideoppdrag > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.kb-sideoppdrag__tittel { font-size: 15px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-oppdragsflate { display: flex; flex-direction: column; gap: var(--kb-8); }
.kb-oppdragsflate h2 { margin: 0 0 var(--kb-2); }
.kb-oppdragsrad { padding: var(--kb-3) var(--kb-2); }
.kb-oppdragsrad__tekst { flex: 1; }
.kb-oppdragsrad__hoyre { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: var(--kb-fs-s); flex: 0 0 auto; }

.kb-kalender { border: 1px solid var(--kb-strek); border-radius: var(--kb-r); background: var(--kb-bg); overflow: hidden; }
.kb-kalender__hode { display: flex; align-items: center; justify-content: space-between; gap: var(--kb-3); padding: var(--kb-3) var(--kb-4); background: var(--kb-grad-panel); border-bottom: 1px solid var(--kb-strek); }
.kb-kalender__hode h2 { margin: 0; font-size: 24px; }
.kb-kalender__hode .kb-knapperad { gap: var(--kb-2); }
.kb-kalender__uke { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.kb-kalender__ukedager span { padding: var(--kb-2) var(--kb-3); font-size: var(--kb-fs-s); font-weight: 500; color: var(--kb-dempet); border-bottom: 1px solid var(--kb-strek); }
.kb-kalender__dag { min-height: 104px; padding: var(--kb-2); border-right: 1px solid var(--kb-strek); border-bottom: 1px solid var(--kb-strek); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kb-kalender__uke > :nth-child(7) { border-right: 0; }
.kb-kalender__uke:last-child .kb-kalender__dag { border-bottom: 0; }
.kb-kalender__uke > :nth-child(n+6) { background: var(--kb-flate); }        /* helg */
.kb-kalender__dag--utenfor { background: var(--kb-flate); }
.kb-kalender__dag--utenfor .kb-kalender__dato { color: var(--kb-dempet); font-weight: 400; }
.kb-kalender__dato { font: 700 15px/1 var(--kb-sans); align-self: flex-start; padding: 4px 2px; }
/* I dag: en liten tavle – salmetavla er signaturen */
.kb-kalender__dag--idag .kb-kalender__dato { background: var(--kb-tavle); color: var(--kb-tavle-tekst, #FFFFFF); border-top: 2px solid var(--kb-gull); border-radius: var(--kb-r-tavle); padding: 4px 7px; font-weight: 800; }
.kb-kalender__oppdrag { display: flex; flex-direction: column; gap: 1px; padding: 4px 6px; border-radius: var(--kb-r); background: var(--kb-gull-tint); box-shadow: inset 3px 0 0 var(--kb-gull); color: var(--kb-tekst); text-decoration: none; font-size: 13px; line-height: 1.25; min-width: 0; }
.kb-kalender__oppdrag:hover { background: var(--kb-gull-tint-2); }
.kb-kalender__tid { font-weight: 800; }
.kb-kalender__tittel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.kb-kalender__oppdrag--avlyst { background: var(--kb-flate); box-shadow: inset 3px 0 0 var(--kb-felt-kant); }
.kb-kalender__oppdrag--avlyst .kb-kalender__tittel { text-decoration: line-through; color: var(--kb-dempet); }
@media (max-width: 899px) { .kb-kalender__dag { min-height: 84px; } .kb-kalender__tid { font-size: 12px; } }
@media (max-width: 599px) {
  .kb-kalender__hode { padding: var(--kb-2) var(--kb-3); }
  .kb-kalender__hode h2 { font-size: 20px; }
  .kb-kalender__ukedager span { padding: var(--kb-2) 0; text-align: center; }
  .kb-kalender__dag { min-height: 48px; padding: 4px 2px; align-items: center; }
  .kb-kalender__dato { align-self: center; }
  /* På mobil: bare en gullprikk under datoen; detaljene står i lista under */
  .kb-kalender__oppdrag { width: 8px; height: 8px; padding: 0; border-radius: 1px; background: var(--kb-gull); box-shadow: none; }
  .kb-kalender__oppdrag > * { display: none; }
  .kb-kalender__oppdrag--avlyst { background: var(--kb-felt-kant); }
  .kb-oppdragsrad__hoyre .kb-tall { display: none; }
}

/* Oppdragsside (dokument) */
.kb-oppdragstopp { display: flex; gap: var(--kb-5); align-items: flex-start; }
.kb-oppdragstopp h1 { margin: 0 0 var(--kb-1); }
.kb-oppdragstopp p { margin: 0; }
.kb-oppdragstopp__tid { font-size: var(--kb-fs-l, 18px); font-weight: 700; }
.kb-oppdragstopp__merker { margin-top: var(--kb-2) !important; display: flex; gap: var(--kb-2); flex-wrap: wrap; align-items: center; font-size: var(--kb-fs-s); }
.kb-oppdragsside { display: flex; flex-direction: column; gap: var(--kb-6); max-width: 900px; }
.kb-seksjonstopp { display: flex; align-items: baseline; justify-content: space-between; gap: var(--kb-3); margin-bottom: var(--kb-2); }
.kb-seksjonstopp h2 { margin: 0; }
.kb-setliste > li > a { grid-template-columns: 44px minmax(0, 1fr) auto 44px; }
.kb-setliste__tekst { display: flex; flex-direction: column; min-width: 0; }
.kb-setliste__stemme { display: flex; flex-direction: column; align-items: flex-end; font-weight: 500; text-align: right; }
.kb-setliste__sider { text-align: right; font-size: var(--kb-fs-s); }
.kb-tabellboks { overflow-x: auto; border: 1px solid var(--kb-strek); border-radius: var(--kb-r); margin-bottom: var(--kb-3); }
.kb-besetning th { vertical-align: bottom; white-space: nowrap; }
.kb-besetning th .kb-knapp--stille { padding: 0; min-height: 0; font-size: var(--kb-fs-s); }
.kb-fareomrade { padding-top: var(--kb-6); border-top: 1px solid var(--kb-strek); }
.kb-mine-noter { display: flex; flex-direction: column; gap: var(--kb-4); }
.kb-mine-noter h2 { margin: 0; }
.kb-mine-noter__form { display: flex; flex-direction: column; gap: var(--kb-3); }
.kb-radiokort-gruppe { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--kb-2); }
.kb-radiokort input { margin-top: 3px; accent-color: var(--kb-tavle); }
.kb-radiokort:has(input:checked) { border-color: var(--kb-gull); background: var(--kb-gull-tint-2); }
.kb-radiokort > span { display: flex; flex-direction: column; gap: 2px; }
.kb-mine-noter .kb-handlinger .kb-handling { min-height: 64px; }
.kb-annen-stemme { display: flex; flex-direction: column; gap: var(--kb-2); padding-top: var(--kb-4); border-top: 1px solid var(--kb-strek); }
.kb-mine-noter .kb-lenkeliste a { display: inline-flex; align-items: center; gap: var(--kb-2); }
.kb-bare-smal { display: none; }
@media (max-width: 1199px) {
  .kb-bare-smal { display: flex; }
  .kb-mine-noter--panel { display: none; }
  .kb-mine-noter.kb-bare-smal { padding: var(--kb-4); border: 1px solid var(--kb-strek); border-radius: var(--kb-r); background: var(--kb-grad-panel); }
}
@media (min-width: 1200px) { .kb-mine-noter .kb-handlinger { display: none; } }  /* desktop: samme handlinger som lenker */
@media (min-width: 600px) and (max-width: 1199px) { .kb-mine-noter .kb-lenkeliste { display: none; } }
@media (max-width: 599px) {
  .kb-oppdragstopp { gap: var(--kb-3); }
  .kb-oppdragstopp .kb-datotavle--stor { width: 56px; height: 62px; }
  .kb-mine-noter .kb-lenkeliste { display: none; }
  .kb-setliste > li > a { grid-template-columns: 32px minmax(0, 1fr) auto; gap: var(--kb-3); }
  .kb-setliste__nr { font-size: 24px; }
  .kb-setliste__sider { display: none; }
}

/* Avspillingslinja (øving): transport + bølge øverst, valg under */
.kb-avspilling__start { display: flex; align-items: center; gap: var(--kb-3); flex-wrap: wrap; }
.kb-avspilling__ui { display: flex; flex-direction: column; gap: 10px; }
.kb-avspilling__ui[hidden], .kb-avspilling[hidden] { display: none; }
.practice-player:has(.pp-ui:not([hidden])) .kb-avspilling__start { display: none; }
.practice-player:has(.pp-ui:not([hidden])) .pp-fallback { display: none; }
.kb-avspilling__transport { flex-wrap: nowrap; }
.kb-avspilling__transport .kb-bolge { height: 48px; min-width: 0; }
.kb-avspilling__tid { font-size: var(--kb-fs-s); white-space: nowrap; min-width: 84px; text-align: right; }
.kb-avspilling .pp-status:empty { display: none; }
.kb-avspilling__valg { gap: var(--kb-2) var(--kb-3); }
.kb-kontroll { display: inline-flex; align-items: center; gap: 6px; font-size: var(--kb-fs-s); }
.kb-kontroll label { font-weight: 500; white-space: nowrap; min-width: 112px; }
.kb-kontroll input[type=range] { width: 96px; accent-color: var(--kb-gull); }
.kb-ab { flex-wrap: nowrap; }
.kb-avspilling__utvid { display: none; }
.kb-kontroll--smal label { min-width: 70px; }
.kb-kontroll--smal input[type=range] { width: 80px; }
.kb-ikonknapp--liten { width: 32px; height: 32px; font-weight: 700; }
.kb-ab .kb-knapp, .kb-avspilling__valg .kb-knapp { min-height: 36px; padding: 0 var(--kb-3); }
.kb-ab .kb-ikonknapp { width: 36px; height: 36px; }
.kb-innspillingsvalg { max-width: 100%; overflow-x: auto; }
.kb-visning__oving .kb-innspillingsvalg { margin: 8px 14px 0; }
.kb-visning__oving .kb-avspilling { border-top: 0; }
@media (max-width: 899px) {
  .kb-kontroll input[type=range] { width: 90px; }
  .kb-avspilling__valg .kb-skille { display: none; }
}
@media (max-width: 599px) {
  /* Mobil: tre rader – innspilling og bølge · spill, −5, +5, A–B, Klikk · tempo og tonehøyde */
  .kb-avspilling__transport { flex-wrap: wrap; }
  .kb-avspilling__transport .kb-bolge { order: -1; flex-basis: 100%; }
  .kb-avspilling__tid { margin-left: auto; }
  .kb-kontroll { flex-basis: 100%; }
  .kb-kontroll label { min-width: 0; flex: 1; }
  .kb-kontroll input[type=range] { flex: 2; width: auto; }
  .kb-avspilling__valg .pp-start, .kb-avspilling__valg .pp-reset { display: none; }
  /* Minispiller: spill, tempo og «Flere valg» – resten kommer fram når man utvider */
  .kb-avspilling__utvid { display: inline-flex; }
  .practice-player:not([data-utvidet]) .kb-avspilling__valg > :not(.kb-kontroll:first-child),
  .practice-player:not([data-utvidet]) .kb-avspilling__ui > .kb-felt__hjelp { display: none; }
}
.kb-avspilling .kb-knapp { white-space: nowrap; }
/* Detaljpanelet står stille mens lista ruller (desktop) */
@media (min-width: 1200px) { .kb-detalj { position: sticky; top: 0; height: 100dvh; overflow-y: auto; align-self: start; } }
.kb-mobilvisning .kb-knapp { flex: 1; justify-content: center; }
@media (max-width: 899px) {
  .kb-mobiltopp { display: flex; }
  .kb-app:not([data-sidefelt="apen"]) .kb-sidefelt { box-shadow: none; visibility: hidden; }
  .kb-arkflate { cursor: zoom-in; }
}
.kb-mobiltopp .kb-ordmerke { display: inline; }

/* Send-arket (DESIGN.md §9) */
.kb-send__skjema { display: flex; flex-direction: column; min-height: 0; max-height: inherit; }
.kb-send__hode h2 { margin: 0; font-size: 22px; }
.kb-send__del { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--kb-2); }
.kb-send__del > legend, .kb-send__del > span:first-child { font-weight: 700; font-size: var(--kb-fs-m); padding: 0 0 var(--kb-2); }
.kb-send__brikker .kb-brikke { min-height: 36px; }
.kb-send__mottakere { display: flex; flex-wrap: wrap; gap: 6px; }
.kb-send__mottakere:empty { display: none; }
.kb-send__personer { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 4px var(--kb-3); max-height: 220px; overflow-y: auto; padding: var(--kb-2); border: 1px solid var(--kb-strek); border-radius: var(--kb-r); }
.kb-send__personer[hidden] { display: none; }
.kb-send__stemme { margin-top: var(--kb-2); }
.kb-send .kb-segment label { min-height: 40px; padding: 0 var(--kb-5); display: inline-flex; align-items: center; cursor: pointer; background: #FFFFFF; font: 500 14px var(--kb-sans); }
.kb-send .kb-segment label[aria-checked="true"] { background: var(--kb-tavle); color: #FFFFFF; font-weight: 700; }
.kb-send .kb-segment label:focus-within { outline: 2px solid var(--kb-gull-mork); outline-offset: -2px; }
.kb-send-side { display: flex; justify-content: center; }
.kb-send-side .kb-send { border: 1px solid var(--kb-strek); border-radius: var(--kb-r-pop); max-height: none; }
.kb-melding { display: flex; align-items: center; gap: var(--kb-3); }
.kb-melding .kb-knapp--stille { color: #FFFFFF; min-height: 0; padding: 0; }
.kb-melding__handling { display: inline; }
.kb-lenkeliste { list-style: none; margin: 0; padding: 0; }

/* Redigerbare lister (deltakere, sjangre, filer) */
.kb-redigerliste li { display: flex; align-items: center; gap: var(--kb-3); padding: var(--kb-2) 0; border-bottom: 1px solid var(--kb-strek); }
.kb-redigerliste__tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.kb-redigerliste .kb-select { width: auto; min-width: 180px; }
.kb-innlinje { display: flex; align-items: center; gap: var(--kb-2); flex-wrap: wrap; }
.kb-innlinje .kb-input { flex: 1; min-width: 160px; }
.kb-legg-til { margin-top: var(--kb-3); }
.kb-input--liten { min-height: 36px; font-size: var(--kb-fs-m); }
.kb-avkrysningsliste { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px var(--kb-4); }
.kb-seksjon { display: flex; flex-direction: column; gap: var(--kb-3); margin-bottom: var(--kb-8); }
.kb-seksjon h2 { margin: 0; }
.kb-celle--mangler .kb-select { border-color: var(--kb-fare); }
.kb-besetning--rediger .kb-select { min-width: 150px; min-height: 36px; }
/* Programredigering */
.kb-programflate { display: flex; flex-direction: column; gap: var(--kb-8); max-width: 1000px; }
.kb-setliste--rediger li { padding: var(--kb-2) var(--kb-2); }
.kb-setliste__rad { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: var(--kb-3); align-items: center; }
.kb-setliste--rediger .kb-input { margin-top: 4px; }
.kb-lagrestatus:empty { display: none; }
.kb-programsok { display: flex; flex-direction: column; gap: var(--kb-2); margin-bottom: var(--kb-3); }
.kb-programsok .kb-select { width: auto; }
/* Opplasting */
.kb-opplasting { display: flex; flex-direction: column; gap: var(--kb-6); max-width: 900px; }
.kb-slippflate { display: flex; flex-direction: column; align-items: center; gap: var(--kb-2); padding: var(--kb-8) var(--kb-4); border: 2px dashed var(--kb-strek-sterk); border-radius: var(--kb-r); background: var(--kb-flate); text-align: center; }
.kb-slippflate p { margin: 0; }
.kb-slippflate.dragging { border-color: var(--kb-gull); background: var(--kb-gull-tint); }
.kb-slippflate > .kb-ikon { width: 32px; height: 32px; color: var(--kb-dempet); }
.kb-fremdrift { width: 100%; max-width: 480px; }
.kb-fremdrift progress { width: 100%; height: 8px; accent-color: var(--kb-gull); }
.kb-feilliste li { color: var(--kb-fare); font-weight: 700; font-size: var(--kb-fs-s); }
.kb-rapport li { padding: 6px 0; border-bottom: 1px solid var(--kb-strek); }
.kb-rapport--warning, .kb-rapport--error { color: var(--kb-fare); }
.kb-rapportrad { display: flex; flex-direction: column; padding: var(--kb-2) 0; border-bottom: 1px solid var(--kb-strek); }
.kb-stemmetabell .kb-input, .kb-stemmetabell .kb-select { min-height: 36px; }
.kb-stemmetabell td[data-label="Rekkefølge"] .kb-input { width: 80px; }
.kb-lenkeside { display: flex; flex-direction: column; gap: var(--kb-4); padding: var(--kb-8) 0; }
@media (max-width: 599px) {
  .kb-redigerliste li { flex-wrap: wrap; }
  .kb-redigerliste .kb-select { flex: 1; }
  .kb-setliste__rad { grid-template-columns: 32px minmax(0, 1fr); }
  .kb-setliste__handlinger { grid-column: 2; }
}

.kb-besetning td:nth-child(2), .kb-besetning th:nth-child(2) { min-width: 180px; }
fieldset.kb-felt { border: 0; padding: 0; margin: 0; }
fieldset.kb-felt > legend { padding: 0 0 var(--kb-2); }
.kb-redigerliste__tekst.kb-innlinje { flex-direction: row; flex-wrap: nowrap; }
.kb-programflate h2 { margin-bottom: var(--kb-3); }

/* Notevisning: blapiler på kantene (skjules med linjene i fremføring) */
.kb-bla {
  position: absolute; top: 50%; translate: 0 -50%; z-index: 3; width: 44px; height: 72px;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  border: 1px solid var(--kb-strek-sterk); border-radius: var(--kb-r); background: rgba(255,255,255,.92); color: var(--kb-tekst);
  transition: opacity 300ms;
}
.kb-bla:hover { border-color: var(--kb-felt-kant); }
.kb-bla:disabled { opacity: .3; cursor: default; }
.kb-bla--forrige { left: 8px; }
.kb-bla--neste { right: 8px; }
.kb-visning[data-modus="rediger"] .kb-bla { display: none; }
.kb-visning.kb-rolig .kb-bla { opacity: 0; pointer-events: none; }
.kb-stykke__side { font-size: 12px; opacity: .8; margin-left: auto; }
.kb-viskering { fill: rgba(255,255,255,.35); stroke: var(--kb-tekst); stroke-width: 1.5; stroke-dasharray: 4 3; pointer-events: none; }
.kb-visning[data-verktoy="viskelaer"] .kb-notatlag { cursor: none; }
.kb-fargeprikk--ny { display: inline-flex; align-items: center; justify-content: center; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--kb-felt-kant); color: var(--kb-dempet); cursor: pointer; }
.kb-fargeprikk--ny .kb-ikon { width: 16px; height: 16px; }
[data-kb-egne-farger] { display: contents; }
.kb-visning__topp--rediger .kb-visning__midt { flex: 1; }
@media (max-width: 599px) {
  .kb-bla { width: 36px; height: 56px; }
  .kb-visning__topp--rediger [data-kb-rediger-tittel] { display: none; }
}

/* Utvidbar seksjon: pil som peker til høyre når den er lukket og ned når den er åpen */
.kb-utvid > summary { list-style: none; gap: var(--kb-3); }
.kb-utvid > summary::-webkit-details-marker { display: none; }
.kb-utvid > summary::after {
  content: ""; flex: 0 0 auto; width: 8px; height: 8px; margin-left: auto; margin-right: 6px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; rotate: -45deg; transition: rotate var(--kb-fart);
}
.kb-utvid[open] > summary::after { rotate: 45deg; }

/* Avspilling fra notearkivet: linja ligger fast nederst og lukkes med ✕ */
.kb-spillkolonne { width: 52px; padding-right: 0 !important; }
.kb-ikonknapp--spill { border-radius: 50%; }
.kb-ikonknapp--spill:hover { border-color: var(--kb-gull); background: var(--kb-gull-tint); }
.kb-spillerplass:empty { display: none; }
.kb-spillerplass { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; max-height: 60dvh; overflow-y: auto; box-shadow: var(--kb-skygge-popover); }
.kb-spillerlinje { background: var(--kb-grad-panel); border-top: 2px solid var(--kb-gull); padding: var(--kb-2) var(--kb-4) var(--kb-3); display: flex; flex-direction: column; gap: var(--kb-2); }
.kb-spillerlinje__hode { display: flex; align-items: center; justify-content: space-between; gap: var(--kb-3); }
.kb-spillerlinje .kb-avspilling { padding: 0; border: 0; background: transparent; }
.kb-spillerlinje .kb-innspillingsvalg { align-self: flex-start; }
body.kb-med-spiller .kb-arkivliste { padding-bottom: 260px; }
@media (max-width: 599px) {
  .kb-spillerplass { bottom: calc(var(--kb-bunnmeny) + env(safe-area-inset-bottom)); }
  .kb-spillkolonne { width: 44px; }
  .kb-app[data-flervalg="ja"] .kb-tabell--mobil td.kb-spillkolonne { display: none; }
}
@media (max-width: 599px) {
  .kb-arkivliste .kb-tabell--mobil tr { grid-template-columns: minmax(0, 1fr) auto 44px; align-items: center; }
  .kb-arkivliste .kb-tabell--mobil td.kb-spillkolonne { order: 3; width: 44px; }
  .kb-app[data-flervalg="ja"] .kb-arkivliste .kb-tabell--mobil tr { grid-template-columns: 32px minmax(0, 1fr) auto; }
}
.kb-spillerlinje .pp-start, .kb-spillerlinje .pp-reset, .kb-spillerlinje .kb-avspilling__ui > .kb-felt__hjelp { display: none; }
.kb-tabell tbody tr[data-kb-rad] { user-select: none; }

/* Notevisning: ett eller to ark, zoom og panorering (bare noten zoomes) */
.kb-visning__ark { overflow: auto; align-items: flex-start; justify-content: flex-start; touch-action: none; overscroll-behavior: contain; }
.kb-visning__sider { margin: auto; display: flex; gap: 12px; flex: 0 0 auto; will-change: transform; }
.kb-side[hidden] { display: none; }
.kb-visning.kb-zoomet .kb-visning__ark { cursor: grab; }
.kb-visning.kb-zoomet[data-modus="rediger"] .kb-visning__ark { cursor: auto; }
.kb-visningsmeny { position: fixed; z-index: 45; width: 280px; display: flex; flex-direction: column; gap: var(--kb-3); }
.kb-visningsmeny[hidden] { display: none; }
.kb-visningsmeny .kb-segment > * { flex: 1; justify-content: center; }
.kb-zoomvalg { display: flex; align-items: center; gap: var(--kb-2); }
.kb-zoomvalg > span:first-child { flex: 1; font-weight: 500; }
.kb-zoomvalg [data-kb-zoom-verdi] { min-width: 52px; text-align: center; }
.kb-visningsmeny .kb-knapp--stille { align-self: flex-start; padding: 0; }

/* Roter og beskjær (dialog under Rediger stemmer) */
.kb-roterknapp { padding: 0; min-height: 0; margin-top: 4px; font-size: var(--kb-fs-s); }
.kb-beskjaer { max-width: min(760px, 96vw); width: 760px; display: flex; flex-direction: column; gap: var(--kb-3); }
.kb-beskjaer:not([open]) { display: none; }
.kb-beskjaer .kb-panelhode h2 { margin: 0; font-size: 22px; }
.kb-beskjaer__flate { background: var(--kb-desk); border-radius: var(--kb-r); padding: 8px; display: flex; justify-content: center; }
.kb-beskjaer__ark { position: relative; flex: 0 0 auto; }
.kb-beskjaer__ark canvas { display: block; }
.kb-beskjaer__ramme {
  position: absolute; box-sizing: border-box; border: 2px solid var(--kb-gull); cursor: move; touch-action: none;
  box-shadow: 0 0 0 9999px rgba(23, 23, 23, .35);   /* darkens what is cut away */
}
.kb-beskjaer__flate { overflow: hidden; padding: 14px; }
.kb-beskjaer__hjorne { position: absolute; width: 18px; height: 18px; background: #FFFFFF; border: 2px solid var(--kb-gull); border-radius: 2px; }
.kb-beskjaer__hjorne[data-hjorne="nw"] { left: -10px; top: -10px; cursor: nwse-resize; }
.kb-beskjaer__hjorne[data-hjorne="ne"] { right: -10px; top: -10px; cursor: nesw-resize; }
.kb-beskjaer__hjorne[data-hjorne="sw"] { left: -10px; bottom: -10px; cursor: nesw-resize; }
.kb-beskjaer__hjorne[data-hjorne="se"] { right: -10px; bottom: -10px; cursor: nwse-resize; }
.kb-knapp[hidden], .kb-ikonknapp[hidden] { display: none; }
.kb-avslutt { min-height: 36px; padding: 0 var(--kb-3) 0 var(--kb-2); gap: 6px; }
@media (max-width: 599px) { .kb-avslutt { width: 40px; padding: 0; justify-content: center; } }
.kb-tabell th .kb-sorter { color: inherit; text-decoration: none; display: inline-flex; align-items: center; min-height: 32px; }
.kb-tabell th .kb-sorter:hover { color: var(--kb-tekst); text-decoration: underline; }
.kb-app .kb-filterark .kb-sidefelt__gruppe { display: flex; } /* the sheet is inside the app shell; the closed sidebar must not hide it */

/* Avspilling: hver kontroll er en egen gruppe – navn og verdi øverst, glidebryter under, hårstrek mellom */
.kb-avspilling__valg { align-items: stretch; }
.kb-avspilling__valg .kb-kontroll { display: flex; flex-direction: column; align-items: stretch; gap: 2px; padding: 0 var(--kb-3); border-left: 1px solid var(--kb-strek); }
.kb-avspilling__valg .kb-kontroll:first-child { padding-left: 0; border-left: 0; }
.kb-avspilling__valg .kb-kontroll + .kb-skille { display: none; }
.kb-kontroll .kb-kontroll__navn { min-width: 0; font-size: var(--kb-fs-s); font-weight: 500; color: var(--kb-dempet); white-space: nowrap; }
.kb-kontroll__navn .kb-tall { color: var(--kb-tekst); font-weight: 700; margin-left: 4px; }
.kb-kontroll__rad { display: flex; align-items: center; gap: 6px; min-height: 36px; }
.kb-kontroll__rad input[type=range] { width: 120px; accent-color: var(--kb-gull); }
.kb-kontroll--smal .kb-kontroll__rad input[type=range] { width: 96px; }
.kb-avspilling__valg .kb-ab, .kb-avspilling__valg > .kb-knapperad { align-self: flex-end; }
@media (max-width: 599px) {
  .kb-avspilling__valg .kb-kontroll { flex-basis: 100%; padding: 0; border-left: 0; }
  .kb-kontroll__rad input[type=range], .kb-kontroll--smal .kb-kontroll__rad input[type=range] { flex: 1; width: auto; }
}

/* Rediger verk: opplysninger, stemmer og lydfiler på én side */
.kb-redigerverk { display: flex; flex-direction: column; gap: var(--kb-6); max-width: 1100px; }
.kb-redigerverk__lagre { padding: var(--kb-4) 0; border-top: 1px solid var(--kb-strek); }
.kb-input--kort { max-width: 140px; }
.kb-lydliste li { display: grid; grid-template-columns: minmax(0, 1fr) 150px 70px; gap: var(--kb-3); align-items: center; padding: var(--kb-3) 0; border-bottom: 1px solid var(--kb-strek); }
.kb-lydliste__felt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--kb-2); }
.kb-lydliste__slett { color: var(--kb-fare); font-weight: 500; white-space: nowrap; }
@media (max-width: 599px) {
  .kb-lydliste li { grid-template-columns: minmax(0, 1fr) auto; }
  .kb-lydliste__felt { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr); }
}
.kb-panelhandlinger { display: flex; flex-direction: column; gap: var(--kb-2); }
.kb-lydvalg { display: flex; align-items: center; gap: var(--kb-3); flex-wrap: wrap; margin: 0; }
.kb-lydvalg__navn { font-size: var(--kb-fs-s); font-weight: 500; color: var(--kb-dempet); }
.kb-lydvalg__tid { font-weight: 400; opacity: .8; margin-left: 4px; }
.kb-visning__oving .kb-lydvalg { margin: 8px 14px 0; }
.kb-spillerlinje .kb-lydvalg { margin: 0; }

/* Tekst i redigering: liten editor ved teksten */
.kb-teksteditor { position: fixed; z-index: 46; width: min(380px, calc(100vw - 16px)); display: flex; flex-direction: column; gap: var(--kb-2); }
.kb-teksteditor[hidden] { display: none; }
.kb-teksteditor__valg { display: flex; flex-wrap: wrap; gap: var(--kb-2); align-items: center; }
.kb-teksteditor__valg .kb-select { width: auto; min-height: 36px; }
.kb-tekststiler > button { min-width: 36px; justify-content: center; font-family: var(--kb-sans); font-size: 15px; }
.kb-tekststiler > [aria-pressed="true"] { background: var(--kb-tavle); color: #FFFFFF; }
.kb-teksteditor__slett { color: var(--kb-fare); margin-left: auto; }
/* Sorteringspil: litt luft mellom tekst og pil (mellomrommet i content forsvinner i inline-flex) */
.kb-tabell th[aria-sort="ascending"] a::after, .kb-tabell th[aria-sort="descending"] a::after { margin-left: 6px; }
/* Overskriftene i arkivet står midt mellom søkefeltet og streken under */
.kb-arkivliste .kb-tabell thead th { padding-bottom: 22px; }
/* En lukket utvidbar seksjon har ingen luft under overskriften (skjema-gap gjelder bare når den er åpen) */
.kb-utvid:not([open]) { gap: 0; }
/* Utvidbare seksjoner etter hverandre deler én hårstrek (ingen dobbel strek med luft imellom) */
.kb-utvid + .kb-utvid { border-top: 0; margin-top: calc(-1 * var(--kb-6)); }
.kb-utvid + .kb-fareomrade { border-top: 0; padding-top: var(--kb-2); }