/* Kommunikasjon bruker husets felt, knapper, avatarer og semantiske tokens. */
.kom-flate { --kom-linje: var(--border); }
.kom-flate .kom-intro { margin: 8px 0 0; color: var(--text-muted); font-size: 14px; }
.kom-flate .kom-oyenbryn { display:block; color:var(--primary-dark-adaptiv,var(--primary)); font-size:10px; font-weight:750; letter-spacing:.11em; margin-bottom:10px; }
.kom-flate :is(.kom-oversikt,.kom-autohode) h3 { font:500 clamp(24px,2.4vw,32px)/1.1 var(--kirke-tittelskrift,inherit); letter-spacing:.01em; margin:0 0 10px; }
.kom-flate :is(.kom-oversikt,.kom-autohode) p { color:var(--text-muted); font-size:14px; margin:0; max-width:60ch; line-height:1.6; }
.kom-oversikt { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px; align-items:center; padding:28px 0 24px; border-bottom:1px solid var(--border); }
.kom-oversikt > .btn { align-self:center; }
.kom-nokkeltall { display:flex; grid-column:1/-1; gap:30px; font-size:12px; color:var(--text-muted); }
.kom-nokkeltall strong { font-size:19px; color:var(--text); margin-right:5px; font-variant-numeric:tabular-nums; }
.kom-seksjonshode { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:28px 0 12px; }
.kom-seksjonshode h3,.kom-komponist h3,.kom-autokort h3 { margin:0 0 16px; font:600 21px/1.2 var(--kirke-tittelskrift,inherit); }
.kom-seksjonshode h3 { margin:0; }
.kom-seksjonshode > span { font-size:12px; color:var(--text-muted); }
.kom-historikk { display:grid; gap:10px; }
.kom-flate .kom-meldingsrad { padding:18px 20px; background:var(--surface); border:1px solid var(--border); border-radius:14px; }
.kom-komponist { display:grid; grid-template-columns:minmax(210px,280px) minmax(0,1fr); border:1px solid var(--border); border-radius:20px; overflow:hidden; margin-top:24px; background:var(--surface); }
.kom-mottakere { padding:24px; border-right:1px solid var(--border); background:color-mix(in srgb,var(--primary) 4%,var(--surface)); }
.kom-brev { min-width:0; padding:26px; }
.kom-maalvalg { display:grid; gap:6px; margin-bottom:18px; }
.kom-flate .kom-maalvalg .btn { border-radius:10px; text-align:left; justify-content:flex-start; background:transparent; border-color:transparent; }
.kom-flate .kom-maalvalg .er-valgt { background:var(--surface); border-color:var(--primary); color:var(--primary-dark-adaptiv,var(--primary)); }
.kom-valgliste { max-height:330px; overflow:auto; margin-inline:-8px; }
.kom-valgrad { display:flex; gap:10px; align-items:center; font-size:13px; line-height:1.35; cursor:pointer; padding:10px 8px; border-radius:8px; }
.kom-valgrad[hidden],.kom-flate [hidden] { display:none!important; }
.kom-valgrad:hover { background:var(--kirke-rad-hover,var(--bg)); }
.kom-valgrad input,.kom-kanal input,.kom-regel input[type=checkbox],.kom-bryter input { accent-color:var(--primary); width:16px; height:16px; flex:none; }
.kom-gruppeikon { width:28px; height:28px; border-radius:8px; background:var(--primary-pill); color:var(--primary-dark-adaptiv,var(--primary)); display:grid; place-items:center; flex:none; }
.kom-samtykke { margin-top:24px; padding-top:18px; border-top:1px solid var(--border); font-size:12px; line-height:1.6; }
.kom-samtykke p { color:var(--text-muted); margin:5px 0; }
.kom-kanaler { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-bottom:24px; }
.kom-kanal { display:grid; grid-template-columns:16px 1fr; align-items:center; gap:5px 8px; cursor:pointer; border:1px solid var(--border); border-radius:12px; padding:12px; }
.kom-kanal:has(input:checked) { border-color:var(--primary); background:var(--primary-pill); }
.kom-kanal strong { font-size:13px; }
.kom-kanal small { grid-column:2; font-size:10px; color:var(--text-muted); }
.kom-kanal.er-av { cursor:default; opacity:.65; }
.kom-feltetikett { display:block; font-size:12px; font-weight:650; margin:16px 0 7px; }
.kom-flate textarea { resize:none!important; min-height:110px; line-height:1.7; }
.kom-flate #kom-tekst { min-height:180px; }
.kom-sendelinje { display:flex; flex-wrap:wrap; gap:8px; justify-content:space-between; margin-top:20px; }
.kom-hjelp { font-size:12px; line-height:1.6; color:var(--text-muted); }
.kom-forhandsvisning { margin-top:24px; border-top:1px solid var(--border); padding-top:24px; }
.kom-forhandsvisning #kom-send { margin-top:16px; }
.kom-brevtekst { white-space:pre-wrap; overflow-wrap:anywhere; font-size:14px; line-height:1.7; }
.kom-sok { margin-bottom:12px; }
.kom-sok label { display:block; font-size:12px; margin-bottom:6px; }
.kom-sok > div { display:flex; gap:5px; }
.kom-sok input { min-width:0; }
.kom-autohode { margin:24px 0; }
.kom-automatikker { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; align-items:start; }
.kom-autokort { background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:26px; }
.kom-autokort > p { font-size:13px; color:var(--text-muted); line-height:1.6; }
.kom-autosymbol { display:grid; place-items:center; width:48px; height:48px; background:var(--primary-pill); color:var(--primary-dark-adaptiv,var(--primary)); border-radius:14px; font-size:26px; margin-bottom:20px; }
.kom-bryter { display:flex; align-items:center; gap:10px; font-size:13px; font-weight:650; margin:24px 0 20px; }
.kom-tidvalg { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.kom-tidvalg label { font-size:12px; display:grid; gap:8px; min-width:0; }
.kom-flate .kom-tidvalg .felt { min-width:0; width:100%; }
.kom-leveringstatus { display:grid; gap:5px; padding:14px; border-radius:10px; background:var(--st-obs-bg); color:var(--st-obs-tekst); font-size:12px; line-height:1.5; margin:18px 0; }
.kom-regel { border:1px solid var(--border); border-radius:12px; padding:14px; margin:18px 0; min-width:0; }
.kom-regel legend { padding:0 6px; font-size:13px; font-weight:650; }
.kom-regel legend label { display:flex; align-items:center; gap:8px; }
.kom-flate :is(button,input,textarea,select):focus-visible { outline:2px solid var(--primary); outline-offset:3px; }
.kom-flate button { cursor:pointer; }
.kom-flate button:disabled { cursor:default; opacity:.55; }
.kom-flate .btn:hover:not(:disabled) { filter:brightness(.97); }
@media(max-width:1050px) { .kom-komponist { grid-template-columns:220px minmax(0,1fr); } .kom-mottakere,.kom-brev { padding:18px; } .kom-kanaler { grid-template-columns:1fr; } .kom-kanal { grid-template-columns:16px 1fr auto; } .kom-kanal small { grid-column:auto; } }
@media(max-width:700px) { .kom-oversikt,.kom-automatikker,.kom-komponist { grid-template-columns:1fr; } .kom-oversikt > .btn { justify-self:start; } .kom-nokkeltall { gap:16px; flex-wrap:wrap; } .kom-mottakere { border-right:0; border-bottom:1px solid var(--border); } .kom-maalvalg { grid-template-columns:repeat(3,minmax(0,1fr)); } .kom-flate .kom-maalvalg .btn { font-size:12px; padding:8px; justify-content:center; text-align:center; } .kom-valgliste { max-height:230px; } .kom-seksjonshode { align-items:start; flex-direction:column; gap:5px; } .kom-autokort { padding:20px; } .kom-sendelinje > .btn { width:100%; } }
.kom-flate > .kof-faner { flex-shrink:0; min-height:58px; overflow-x:auto; overflow-y:hidden; }
.kom-flate > .kof-hode { flex-shrink:0; }
.kom-flate > .kof-innhold { min-height:0; }