/*
 * Menighedens planer – stylesheet
 *
 * Systemskrifttyper bruges bevidst: ingen kald til eksterne servere (fx Google Fonts),
 * så ingen tredjepart ser, hvem der bruger siden.
 *
 * Farver:
 *   --ink       mørk skifer til tekst og topbjælke
 *   --accent    fjordblå til links og knapper
 *   --protect   dæmpet blå markering af krypterede felter
 *   --sensitive okker markering af følsomme felter
 */

:root {
    --bg: #edf0ef;
    --surface: #ffffff;
    --ink: #16242e;
    --muted: #56636c;
    --line: #d3dad8;
    --accent: #1f5f74;
    --accent-hover: #174a5b;
    --accent-soft: #e2edf0;
    --protect: #3b6f86;
    --protect-soft: #eef4f6;
    --sensitive: #94650f;
    --sensitive-soft: #faf3e3;
    --danger: #a4282b;
    --danger-soft: #fbeaea;
    --success: #2b6844;
    --success-soft: #e5f1e9;
    --focus: #e0a526;
    --radius: 5px;
    --measure: 68ch;
    font-size: 106.25%; /* 17 px – lettere at læse for alle aldre */
}

*,
*::before,
*::after { box-sizing: border-box; }
[hidden] { display: none !important; } /* "hidden" skal altid vinde over fx display: grid */

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.55;
    font-variant-numeric: tabular-nums;
    -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { line-height: 1.2; margin: 0 0 .6rem; letter-spacing: -.01em; }
h1 { font-size: 1.85rem; font-weight: 700; }
h2 { font-size: 1.2rem; font-weight: 650; }
h3 { font-size: 1rem; font-weight: 650; margin-top: 1.5rem; }
p { margin: 0 0 1rem; max-width: var(--measure); }

a { color: var(--accent); text-underline-offset: .15em; }
a:hover { color: var(--accent-hover); }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.muted { color: var(--muted); }
.small { font-size: .88rem; }
.nowrap { white-space: nowrap; }
.prewrap { white-space: pre-line; }
.num { text-align: right; }
.visually-hidden {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link { position: absolute; left: -999px; top: 0; background: var(--surface); padding: .5rem 1rem; z-index: 10; }
.skip-link:focus { left: 1rem; }

.icon { width: .95em; height: .95em; fill: currentColor; vertical-align: -.1em; margin-right: .3em; }

/* ---------- Topbjælke ---------- */

.topbar { background: var(--ink); color: #fff; }
.topbar__inner {
    max-width: 72rem; margin: 0 auto; padding: .7rem 1.25rem;
    display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
}
.brand { color: #fff; font-weight: 700; text-decoration: none; font-size: 1.05rem; }
.brand:hover { color: #fff; }
.mainnav { display: flex; flex-wrap: wrap; gap: .25rem; flex: 1; align-items: center; }

/* Rullemenuer i topbjælken */
.navgroup { position: relative; }
.navgroup > summary {
    list-style: none; cursor: pointer; color: #d7e1e5; padding: .35rem .65rem; border-radius: var(--radius); white-space: nowrap;
}
.navgroup > summary::-webkit-details-marker { display: none; }
.navgroup > summary::after {
    content: ""; display: inline-block; margin-left: .4rem; vertical-align: middle;
    border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor;
}
.navgroup > summary:hover, .navgroup[open] > summary { color: #fff; background: rgba(255, 255, 255, .08); }
.navgroup.is-active > summary { color: #fff; box-shadow: inset 0 -2px 0 #9cc6d4; }
.navgroup__menu {
    position: absolute; top: calc(100% + .4rem); left: 0; z-index: 30; min-width: 13rem; display: grid; gap: .1rem;
    background: var(--ink); border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--radius); padding: .35rem;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .28);
}
.navgroup__menu a { display: block; }
.navgroup__menu a[aria-current="page"] { box-shadow: none; background: rgba(255, 255, 255, .12); }
.menutoggle {
    display: none; background: none; border: 1px solid rgba(255, 255, 255, .35); color: #fff;
    font: inherit; padding: .3rem .8rem; border-radius: var(--radius); cursor: pointer;
}
.mainnav a, .usermenu a {
    color: #d7e1e5; text-decoration: none; padding: .35rem .65rem; border-radius: var(--radius); white-space: nowrap;
}
.mainnav a:hover, .usermenu a:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.mainnav a[aria-current="page"], .usermenu a[aria-current="page"] { color: #fff; box-shadow: inset 0 -2px 0 #9cc6d4; }
.usermenu { display: flex; align-items: center; gap: .5rem; }
.usermenu form { margin: 0; }
.linkbutton {
    background: none; border: 0; color: #d7e1e5; font: inherit; cursor: pointer; padding: .35rem .65rem; border-radius: var(--radius);
}
.linkbutton:hover { color: #fff; background: rgba(255, 255, 255, .08); }

/* ---------- Sideopbygning ---------- */

.page { max-width: 72rem; margin: 0 auto; padding: 2rem 1.25rem 4rem; }
.page--auth { max-width: 28rem; padding-top: 12vh; }
/* Smal, centreret side: indholdet fylder hele bredden, så alt flugter */
.page--narrow { max-width: 51rem; }
.page--narrow .program, .page--narrow .panel--narrow, .page--narrow .report,
.page--narrow .daytabs, .page--narrow .fslist, .page--narrow .pwlocation, .page--narrow .territory { max-width: none; }

.pagehead {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem;
}
.pagehead p { margin-bottom: 0; }
.breadcrumb { margin-bottom: .25rem; font-size: .9rem; }

.intro { margin-bottom: 2rem; }
.lead { font-size: 1.12rem; color: var(--muted); }

.columns { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); align-items: start; margin-bottom: 1.25rem; }

.panel {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1.4rem 1.5rem; margin-bottom: 1.25rem;
}
.columns > .panel { margin-bottom: 0; }
.panel > :last-child { margin-bottom: 0; }
.panel--narrow { max-width: 36rem; }
.panel--highlight { border: 2px solid var(--accent); }
.panel--protected { border-left: 4px solid var(--protect); }
.panel--protected h2 { color: var(--protect); }
.panel--sensitive { border-left: 4px solid var(--sensitive); background: var(--sensitive-soft); }
.panel--sensitive h2 { color: var(--sensitive); }
.panel--danger { border-color: #e2c3c3; }

.auth h1 { font-size: 1.6rem; }

.empty {
    border: 1px dashed var(--line); border-radius: var(--radius); padding: 2rem 1.5rem; background: var(--surface);
}
.empty > :last-child { margin-bottom: 0; }

/* ---------- Beskeder ---------- */

.alert { padding: .8rem 1rem; border-radius: var(--radius); border-left: 4px solid; max-width: none; }
.alert--success { background: var(--success-soft); border-color: var(--success); }
.alert--error { background: var(--danger-soft); border-color: var(--danger); }
.alert--info { background: var(--accent-soft); border-color: var(--accent); }

/* ---------- Knapper ---------- */

.button {
    display: inline-block; font: inherit; font-weight: 600; line-height: 1.2;
    padding: .65rem 1.15rem; border-radius: var(--radius); border: 1px solid var(--accent);
    background: var(--accent); color: #fff; cursor: pointer; text-decoration: none;
}
.button:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
.button--secondary { background: var(--surface); color: var(--accent); }
.button--secondary:hover { background: var(--accent-soft); color: var(--accent-hover); }
.button--danger { background: var(--danger); border-color: var(--danger); }
.button--danger:hover { background: #861f22; border-color: #861f22; }

/* ---------- Formularer ---------- */

.stack { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
.stack--narrow { max-width: 20rem; }

.fields { display: grid; gap: 1rem 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }

.field { display: grid; gap: .3rem; align-content: start; min-width: 0; }
fieldset { min-width: 0; } /* ellers bliver et fieldset mindst lige så bredt som sit indhold */
.field label, .field legend { font-weight: 600; font-size: .95rem; }

input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
input[type="date"], input[type="number"], input[type="search"], select, textarea {
    width: 100%; font: inherit; color: var(--ink); background: #fff;
    border: 1px solid #aeb9b7; border-radius: var(--radius); padding: .55rem .7rem;
}
textarea { resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 0; border-color: var(--ink); }

.input--code { font-size: 1.4rem; letter-spacing: .2em; max-width: 12rem; }

.hint { font-size: .86rem; color: var(--muted); margin: 0; }
.field-error { font-size: .88rem; color: var(--danger); font-weight: 600; margin: 0; }
.field--invalid input, .field--invalid select, .field--invalid textarea { border-color: var(--danger); border-width: 2px; }

.field--checkbox { grid-template-columns: auto 1fr; align-items: center; column-gap: .55rem; align-self: end; }
.field--checkbox .hint { grid-column: 2; }
input[type="checkbox"], input[type="radio"] { width: 1.15rem; height: 1.15rem; accent-color: var(--accent); margin: 0; }

.field--radios { border: 0; padding: 0; margin: 0; }
.field--radios legend { padding: 0; margin-bottom: .3rem; }
.radios { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; padding: .45rem 0; }
.radios label { display: flex; align-items: center; gap: .4rem; font-weight: 400; white-space: nowrap; }

.personform { display: grid; gap: 1.25rem; }
.section {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    margin: 0; padding: 1.25rem 1.5rem 1.5rem;
}
.section legend { font-weight: 700; font-size: 1.05rem; padding: 0 .4rem; margin-left: -.4rem; }
.section__note { font-size: .86rem; color: var(--muted); margin: -.2rem 0 1rem; }
.section--protected { border-left: 4px solid var(--protect); }
.section--protected legend { color: var(--protect); }
.section--sensitive { border-left: 4px solid var(--sensitive); background: var(--sensitive-soft); }
.section--sensitive legend { color: var(--sensitive); }

.formactions { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; margin-top: 1.25rem; margin-bottom: 1.25rem; }
.formactions--end { justify-content: flex-end; border-top: 1px solid var(--line); padding-top: 1.25rem; }

.inline-form { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.inline-form label { width: 100%; font-weight: 600; font-size: .95rem; }
.inline-form input { max-width: 12rem; }

.actionlist { display: grid; gap: .75rem; justify-items: start; }
.actionlist form { margin: 0; }

/* Roller ved brugeroprettelse */
.roles { border: 0; padding: 0; margin: 1.5rem 0 0; }
.roles legend { font-weight: 700; font-size: 1.05rem; padding: 0; margin-bottom: .2rem; }
.roles .hint { margin-bottom: .8rem; }
.role {
    display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start;
    padding: .7rem 0; border-top: 1px solid var(--line);
}
.role input { margin-top: .2rem; }
.role label { display: grid; cursor: pointer; }
.role__name { font-weight: 600; }
.role__desc { font-size: .88rem; color: var(--muted); }

/* ---------- Søgning ---------- */

.searchbar { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-bottom: 1.25rem; max-width: 56rem; }
.searchbar input { flex: 1; min-width: 12rem; }

/* ---------- Tabeller ---------- */

.table-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow-x: auto; margin-bottom: 1.25rem; }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: left; padding: .7rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { font-size: .85rem; font-weight: 600; color: var(--muted); background: #f6f8f7; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: #f8faf9; }
.table .is-selected { background: var(--accent-soft); }
.table .is-muted td { color: var(--muted); }
.table--log td { font-size: .92rem; }

.tag { display: inline-block; font-size: .78rem; font-weight: 600; padding: .05rem .45rem; border-radius: 3px; background: #e6eae9; color: var(--muted); margin-left: .3rem; }
.tag--success { background: var(--success-soft); color: var(--success); }
.tag--warning { background: var(--sensitive-soft); color: var(--sensitive); margin-left: 0; }

/* ---------- Visning af oplysninger ---------- */

.details { display: grid; grid-template-columns: minmax(8rem, auto) 1fr; gap: .45rem 1.25rem; margin: 0; }
.details dt { color: var(--muted); }
.details dd { margin: 0; }

.linklist, .plainlist { list-style: none; margin: 0 0 1rem; padding: 0; }
.linklist li { padding: .45rem 0; border-top: 1px solid var(--line); }
.linklist li:first-child { border-top: 0; padding-top: 0; }
.plainlist li { margin-bottom: .6rem; }

/* ---------- To-trins-login ---------- */

.steps { counter-reset: step; list-style: none; padding: 0; margin: 1.5rem 0 0; }
.steps > li { counter-increment: step; position: relative; padding: 0 0 1.5rem 2.75rem; }
.steps > li::before {
    content: counter(step); position: absolute; left: 0; top: -.1rem;
    width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--accent); color: #fff;
    display: grid; place-items: center; font-weight: 700; font-size: .95rem;
}
.steps > li:not(:last-child)::after {
    content: ""; position: absolute; left: .93rem; top: 2rem; bottom: .3rem; width: 2px; background: var(--line);
}
.steps h2 { font-size: 1.05rem; }

.qr { width: 216px; min-height: 216px; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 1rem; }
.qr img, .qr canvas { display: block; }

.secret {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 1.15rem; letter-spacing: .05em;
    background: var(--accent-soft); padding: .6rem .8rem; border-radius: var(--radius); display: inline-block; word-break: break-all;
}

.codes {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 1.05rem;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: .4rem 1.5rem; padding-left: 1.5rem;
}

.pagination { display: flex; gap: 1.25rem; align-items: center; }

/* ---------- Rapporter ---------- */

.monthnav {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; margin-bottom: 1.25rem;
}
.monthnav h1, .monthnav h2 { margin: 0; text-align: center; }
.monthnav > a:first-child { justify-self: start; }
.monthnav > :last-child { justify-self: end; }
.monthnav a { text-decoration: none; padding: .35rem .6rem; border-radius: var(--radius); }
.monthnav a:hover { background: var(--accent-soft); }
.monthnav--small { margin-top: 1.5rem; }
.monthnav--small h2 { font-size: 1.15rem; }

.monthpicker { display: flex; align-items: center; gap: .5rem; }
.monthpicker label { font-weight: 600; font-size: .95rem; }
.monthpicker select { width: auto; }

.report { max-width: 40rem; }
.report__title { font-size: 1.35rem; }
.report .radios { gap: .75rem; }
.report .radios label {
    border: 1px solid #aeb9b7; border-radius: var(--radius); padding: .6rem 1.4rem; cursor: pointer; font-weight: 600;
}
.report .radios label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.input--short { max-width: 8rem; }

.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.toolbar .progress { margin: 0; font-size: 1.05rem; }
.filters { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.filters select { width: auto; }
.checkline { display: flex; align-items: center; gap: .4rem; }

.status { font-size: .85rem; font-weight: 600; white-space: nowrap; }
.status::before { content: ""; display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; margin-right: .4rem; vertical-align: .05em; }
.status--regular::before { background: var(--success); }
.status--irregular::before { background: var(--sensitive); }
.status--inactive::before { background: var(--danger); }
.status--inactive { color: var(--danger); }
.status--new { color: var(--muted); font-weight: 400; }
.status--new::before { background: transparent; border: 1px solid var(--muted); }

.tag--pioneer { background: var(--accent-soft); color: var(--accent); }

.table--totals th[scope="row"] { font-weight: 600; font-size: 1rem; color: var(--ink); background: none; }
.table tfoot th, .table tfoot td { border-top: 2px solid var(--line); border-bottom: 0; font-weight: 600; }
.table tbody th[scope="row"] { font-weight: 600; font-size: 1rem; color: var(--ink); background: none; }
.table-wrap--flat { border: 0; }

.bignumber { font-size: 1.05rem; }
.bignumber strong { font-size: 1.6rem; margin-right: .25rem; }

.details--columns { grid-template-columns: repeat(auto-fill, minmax(7rem, auto) minmax(8rem, 1fr)); }

.removelist { list-style: none; margin: 0; padding: 0; }
.removelist li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .4rem 0; border-top: 1px solid var(--line); }
.removelist li:first-child { border-top: 0; }
.removelist form { margin: 0; }
.linkbutton--danger { color: var(--danger); padding: .2rem .4rem; }
.linkbutton--danger:hover { color: var(--danger); background: var(--danger-soft); }

/* ---------- Møder ---------- */

:root {
    /* Afsnitsfarver som i arbejdshæftet */
    --tgw: #2f6f7a;
    --ayf: #a26f06;
    --lac: #9c3324;
    /* Weekendmødet */
    --we-talk: #2c4f86;
    --we-wt: #55648f;
}

.actions-inline { display: flex; gap: .6rem; flex-wrap: wrap; }

.program {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    max-width: 48rem; margin-bottom: 1.25rem; overflow: hidden;
}
.program__head { padding: 1.25rem 1.5rem .75rem; }
.program__head p { margin: 0 0 .25rem; }
.program__date { font-size: 1.2rem; font-weight: 650; }
.program__section {
    margin: 1rem 0 0; padding: .5rem 1.5rem; color: #fff; font-size: 1rem; font-weight: 650;
    display: flex; justify-content: space-between; gap: 1rem;
}
.program__section span { font-weight: 400; opacity: .9; }
.program__section--tgw { background: var(--tgw); margin-top:0; }
.program__section--ayf { background: var(--ayf); margin-top:0; }
.program__section--lac { background: var(--lac); margin-top:0; }
.program__section--talk { background: var(--we-talk); margin-top: 0;}
.program__section--wt { background: var(--we-wt); margin-top:0;	}
.section--talk { border-left: 4px solid var(--we-talk); }
.section--talk legend { color: var(--we-talk); }
.program__end { /*border-top: 2px solid var(--line); margin-top: .75rem;*/ }

.prow {
    display: grid; grid-template-columns: 7.5rem 1fr minmax(10rem, 35%); gap: .25rem 1rem;
    padding: .55rem 1.5rem; border-bottom: 1px solid #edf0ef; align-items: baseline;
}
.prow:last-child { border-bottom: 0; }
.prow__time { color: var(--muted); font-size: .9rem; white-space: nowrap; }
.prow__title { font-weight: 600; }
.prow__ref { display: block; font-weight: 400; font-size: .86rem; color: var(--muted); }
.prow__who { text-align: right; }
mark { background: #d9f2c4; color: inherit; padding: 0 .2rem; border-radius: 2px; }

.zoom dd { display: flex; align-items: center; gap: .6rem; }
.linkbutton--plain { color: var(--accent); padding: .1rem .3rem; text-decoration: underline; }
.linkbutton--plain:hover { color: var(--accent-hover); background: var(--accent-soft); }

/* Tildeling af opgaver */
.assignform { max-width: 48rem; }
.assigngroup {
    background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--line);
    border-radius: var(--radius); margin: 0 0 1rem; padding: .75rem 1.5rem 1rem;
}
.assigngroup legend { font-weight: 700; padding: 0 .4rem; margin-left: -.4rem; }
.assigngroup--tgw { border-left-color: var(--tgw); }
.assigngroup--tgw legend { color: var(--tgw); }
.assigngroup--ayf { border-left-color: var(--ayf); }
.assigngroup--ayf legend { color: var(--ayf); }
.assigngroup--lac { border-left-color: var(--lac); }
.assigngroup--lac legend { color: var(--lac); }
.assignrow {
    display: grid; grid-template-columns: minmax(12rem, 1fr) minmax(14rem, 1fr); gap: .3rem 1rem;
    align-items: center; padding: .5rem 0; border-top: 1px solid #edf0ef;
}
.assignrow:first-of-type { border-top: 0; }
.assignrow label { font-weight: 600; }
.assignrow--sub { border-top: 0; padding-top: 0; }
.assignrow--sub label { font-weight: 400; padding-left: 1rem; color: var(--muted); }
.assignrow .field-error, .assignrow .hint { grid-column: 2; }
.alert--warning { background: var(--sensitive-soft); border-color: var(--sensitive); }

/* Redigering af program */
.fields--songs { margin-top: 1rem; grid-template-columns: repeat(auto-fit, minmax(9rem, 12rem)); }
.table--edit td { vertical-align: top; padding: .4rem .5rem; }
.table--edit input[type="text"], .table--edit select { padding: .4rem .5rem; }
.table--edit .is-invalid { background: var(--danger-soft); }
.table--edit .is-new td { background: #f6f8f7; }
.input--tiny { max-width: 4rem; }

/* Import af arbejdshæftet */
.weeklist { display: grid; gap: .6rem; margin-bottom: 1rem; }
.weekitem { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .75rem 1rem; }
.weekitem--exists { background: #f6f8f7; }
.weekitem__head { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.weekitem__head label { display: flex; gap: .75rem; flex-wrap: wrap; cursor: pointer; }
.weekitem details { margin-top: .4rem; padding-left: 1.9rem; }
.weekitem summary { cursor: pointer; color: var(--muted); font-size: .9rem; }
.partlist { margin: .5rem 0 0; padding-left: 1.2rem; font-size: .92rem; }

/* Hvem kan få hvilke opgaver */
.tabs {
    display: flex; gap: .25rem; margin-bottom: 1rem; box-shadow: inset 0 -2px 0 var(--line);
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs a { padding: .5rem 1rem; text-decoration: none; border-bottom: 3px solid transparent; font-weight: 600; white-space: nowrap; flex-shrink: 0; }
.tabs a[aria-current="page"] { border-bottom-color: var(--accent); color: var(--ink); }
.matrix-wrap { max-height: 75vh; overflow: auto; }
.matrix { border-collapse: separate; border-spacing: 0; width: 100%; }
.matrix th, .matrix td { padding: .45rem .6rem; border-bottom: 1px solid #edf0ef; background: var(--surface); }
.matrix thead th {
    position: sticky; top: 0; z-index: 2; font-size: .8rem; font-weight: 600; color: var(--muted);
    background: #f6f8f7; vertical-align: bottom; text-align: center; white-space: nowrap;
}
.matrix thead th:first-child { text-align: left; left: 0; z-index: 3; }
.matrix tbody th { position: sticky; left: 0; z-index: 1; text-align: left; font-weight: 600; white-space: nowrap; }
.matrix tbody th .muted { display: block; font-weight: 400; }
.matrix td { text-align: center; }
.matrix tbody tr:hover th, .matrix tbody tr:hover td { background: var(--accent-soft); }
.legend-list { margin-top: 1rem; }
.legend-list summary { cursor: pointer; color: var(--accent); }

/* Pligter */
.matrix--duties thead th { white-space: normal; min-width: 9rem; max-width: 12rem; text-align: left; }
.matrix--duties thead th span {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.matrix--duties td { text-align: left; vertical-align: top; }
.matrix--duties select { min-width: 9rem; padding: .35rem .4rem; font-size: .9rem; }
.matrix--duties select + select { margin-top: .35rem; }
.matrix--duties select.is-invalid { border: 2px solid var(--danger); }
.matrix--duties tbody th a { text-decoration: none; }
.matrix__note { color: var(--muted); font-style: italic; }
.table__group th { background: #f6f8f7; color: var(--ink); font-size: .95rem; }
.duties { max-width: 48rem; }
.duties h2 + .details { margin-bottom: 1.25rem; }
.details--duties { grid-template-columns: minmax(10rem, 45%) 1fr; }
.details--duties dt { color: var(--ink); font-weight: 600; }

/* Distrikter */
.territory { display: grid; gap: 1.25rem; max-width: 48rem; grid-template-columns: minmax(0, 1fr); }
.territory > * { min-width: 0; }
.territory select, .territory input, .territory textarea { max-width: 100%; }
.territory > .panel { margin-bottom: 0; }
.button--wide { display: block; width: 100%; text-align: center; }
.panel--flush { padding: 0; overflow: hidden; }
.panel__title { padding: 1.1rem 1.5rem .6rem; margin: 0; }
.map { height: 22rem; background: #e7ebea; }
.map--full { height: calc(100vh - 8rem); min-height: 20rem; border-radius: var(--radius); }
.map__missing { padding: 2rem 1.5rem; color: var(--muted); }
.mapbar { margin-bottom: .75rem; }
.leaflet-popup-content a { color: var(--accent); }
.stats p { margin: 0 0 .5rem; }
progress.progress { width: 100%; height: 1.4rem; accent-color: var(--accent); }
progress.progress--mini { width: 5rem; height: .7rem; vertical-align: middle; }
.details--stacked { grid-template-columns: 1fr; gap: .15rem; }
.details--stacked dt { font-weight: 600; color: var(--ink); margin-top: .6rem; }
.details--stacked dt:first-child { margin-top: 0; }
.dnclist, .addresslist, .picklist { list-style: none; margin: 0; padding: 0; }
.dnclist li { display: grid; padding: .45rem 0; border-top: 1px solid rgba(0, 0, 0, .08); }
.dnclist li:first-child { border-top: 0; }
.addresslist { margin-top: .75rem; }
.addresslist li { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem 0; border-top: 1px solid var(--line); }
.addresslist li.is-dnc { color: var(--danger); }
.picklist li { padding: .35rem 0; border-top: 1px solid #edf0ef; }
.picklist li:first-child { border-top: 0; }
.picklist label { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; cursor: pointer; }
.picklist li.is-flagged { background: var(--sensitive-soft); margin: 0 -.5rem; padding-left: .5rem; padding-right: .5rem; }
.tag--danger { background: var(--danger-soft); color: var(--danger); }
.checkgrid { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: .75rem 0 1rem; }
.checkgrid label { display: flex; align-items: center; gap: .4rem; }
.field--end { align-self: end; }
select[multiple] { padding: .3rem; }

pre.code { background: var(--ink); color: #e8eef0; padding: .8rem 1rem; border-radius: var(--radius); overflow-x: auto; font-size: .82rem; white-space: pre; }

.tstatus { display: inline-block; font-size: .8rem; font-weight: 600; padding: .05rem .5rem; border-radius: 3px; vertical-align: middle; }
.tstatus--available { background: var(--success-soft); color: var(--success); }
.tstatus--assigned { background: var(--accent-soft); color: var(--accent); }
.tstatus--resting { background: var(--sensitive-soft); color: var(--sensitive); }
.tstatus--unreleased { background: #e6eae9; color: var(--muted); }
.addresslist--check li { align-items: center; }
.addresslist--check label { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; flex: 1; cursor: pointer; padding: .2rem 0; }
.addresslist--check input[type="checkbox"] { width: 1.4rem; height: 1.4rem; }
.progressform { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .75rem; }
.progressform label { font-weight: 600; font-size: .95rem; }
.progressform select { width: auto; }
.commentlist { list-style: none; margin: 1rem 0 0; padding: 0; }
.commentlist li { padding: .6rem 0; border-top: 1px solid var(--line); }
.commentlist p { margin: 0 0 .2rem; }
.commentlist li { position: relative; }
.commentlist__delete { display: inline; margin-left: .75rem; }
.handin { display: grid; gap: .75rem; border-top: 1px solid var(--line); padding-top: 1rem; margin-top: .5rem; }
.handin h3 { margin: 0; }

/* Opslagstavle */
.badge { display: inline-block; min-width: 1.4rem; padding: 0 .4rem; border-radius: 999px; background: var(--danger); color: #fff; font-size: .75rem; font-weight: 700; text-align: center; vertical-align: middle; line-height: 1.4rem; }
.columns--board { margin-bottom: 1.25rem; }
.boardbox h2 a { color: var(--ink); text-decoration: none; }
.boardbox h2 a:hover { color: var(--accent); }
.boardbox li { display: grid; margin-bottom: .5rem; }
.is-unread > a { font-weight: 700; }
.postlist, .eventlist, .filelist { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.postlist li, .eventlist li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .75rem; padding: .8rem 1rem; border-top: 1px solid var(--line); }
.postlist li:first-child, .eventlist li:first-child { border-top: 0; }
.postlist__title { font-weight: 600; }
.eventlist__date { min-width: 14rem; color: var(--muted); font-size: .92rem; }
.eventlist__title { font-weight: 600; }
.eventlist__item--cancelled .eventlist__title, .eventlist__item--cancelled .eventlist__title a { color: var(--danger); }
.eventlist__item--moved .eventlist__title, .eventlist__item--moved .eventlist__title a { color: var(--sensitive); }
.post { max-width: 48rem; }
.filelist { border: 0; }
.filelist li { padding: .6rem 0; border-top: 1px solid var(--line); }
.filelist li:first-child { border-top: 0; }
.filelist__main { display: flex; flex-wrap: wrap; gap: .3rem .75rem; align-items: baseline; }
.filelist__main a { font-weight: 600; }
.filelist__more { margin-top: .4rem; }
.filelist__more summary { cursor: pointer; color: var(--accent); font-size: .9rem; }
.filelist__more form { margin-top: .5rem; }

/* Samlinger */
.daytabs { display: grid; grid-template-columns: repeat(7, 1fr); gap: .5rem; margin-bottom: 1.25rem; max-width: 40rem; }
.daytab {
    display: grid; justify-items: center; gap: .1rem; padding: .55rem .2rem; border-radius: 999px;
    border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; font-size: .9rem;
}
.daytab.has-meetings { background: #e3e7e6; }
.daytab[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.daytab:hover { border-color: var(--accent); }
.daytab__date { font-weight: 700; font-size: 1.05rem; }
.dayheading { font-size: 1.2rem; margin-bottom: 1rem; }
.fslist { display: grid; gap: .75rem; max-width: 40rem; }
.fslist .panel { margin: 0; }
.fsitem__groups { margin: 0 0 .3rem; font-size: 1.1rem; }
.fsitem__time { font-size: 1.25rem; font-weight: 700; margin: 0; }
.fsitem__address { margin: 0 0 .5rem; }
.fsitem--mine { border-left: 4px solid var(--accent); }
.table--fs input[type="text"] { min-width: 12rem; }
.table--fs input[type="date"] { min-width: 9.5rem; }
.table--fs input[type="time"] { min-width: 6rem; }
.groupchecks { display: flex; flex-wrap: wrap; gap: .2rem .6rem; }
.groupchecks label { display: flex; align-items: center; gap: .2rem; font-size: .9rem; white-space: nowrap; }
.fsitem--cancelled .fsitem__time, .fsitem--cancelled .fsitem__address { text-decoration: line-through; color: var(--muted); }

/* Distrikter: snart udløbet (gul) og udløbet (rød) */
.table tr.is-warn td { background: #fff7d9; }
.table tr.is-expired td { background: #fde6e4; }
/* Adresser pr. vej, der kan foldes ud */
.streetgroup { border-top: 1px solid var(--line); }
.streetgroup:first-of-type { border-top: 0; }
.streetgroup > summary { cursor: pointer; padding: .6rem 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; }
.streetgroup > summary:hover strong { color: var(--accent); }
.streetgroup[open] > summary { padding-bottom: .3rem; }
.streetsides { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); gap: 0 2rem; margin: 0 0 .6rem 1.1rem; }
.streetside h3 { margin: .5rem 0 0; font-size: .9rem; color: var(--muted); }
.streetside .addresslist { margin-top: .3rem; }

/* Sortering i tabeller */
.sortlink { color: inherit; text-decoration: none; white-space: nowrap; }
.sortlink:hover { text-decoration: underline; }
.searchbar select { width: auto; }

/* Litteratur: udleveringsliste */
.printonly { display: none; }
.table--handout tfoot th, .table--handout tfoot td { border-top: 2px solid var(--line); }

/* Adgangsnøgler på login-siden */
.passkeybox { display: grid; gap: .4rem; margin-bottom: 1rem; }
.passkeybox p { margin: 0; }
.passkeybox__or { display: flex; align-items: center; gap: .75rem; color: var(--muted); font-size: .9rem; margin-top: .5rem !important; }
.passkeybox__or::before, .passkeybox__or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }

/* Pligter: ét kort pr. møde */
.dutycards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(22rem, 100%), 1fr)); gap: 1rem; margin-bottom: 1rem; }
.dutycard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; }
.dutycard.is-past { opacity: .65; }
.dutycard__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem .75rem; margin-bottom: .6rem; padding-bottom: .5rem; border-bottom: 1px solid var(--line); }
.dutycard__head h3 { margin: 0; font-size: 1.05rem; }
.dutycard__head a { text-decoration: none; }
.dutyrows { display: grid; gap: .4rem; }
.dutyrow { display: grid; grid-template-columns: minmax(0, 10rem) minmax(0, 1fr); align-items: center; gap: .75rem; font-weight: 400; }
.dutyrow__label { font-size: .92rem; line-height: 1.3; }
.dutyrow select { width: 100%; min-width: 0; }

/* Min tjeneste: kalender */
.servicecal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .35rem; }
.servicecal__head { text-align: center; font-size: .8rem; color: var(--muted); font-weight: 600; }
.servicecal__day { display: grid; gap: .15rem; padding: .3rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.servicecal__day.has-time { background: var(--accent-soft); border-color: transparent; }
.servicecal__day.is-today { box-shadow: inset 0 0 0 2px var(--accent); }
.servicecal__num { font-size: .75rem; color: var(--muted); }
.servicecal__day input { width: 100%; min-width: 0; padding: .25rem .2rem; text-align: center; font-size: .95rem; }
.servicetotal { margin-bottom: 1rem; }
.servicetotal p { margin: 0 0 .4rem; }

/* Litteratur: vælg sprog/publikationer med flueben */
.languagepicker summary { cursor: pointer; padding: .4rem 0; }
.checkgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .3rem 1rem; padding: .5rem 0; }
.checkgrid label { display: flex; align-items: baseline; gap: .4rem; font-weight: 400; }

/* Ansøgninger */
.monthchoices { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.monthchoices li { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .75rem; }
.monthchoices select { width: auto; }
.monthchoices__hours { display: flex; align-items: center; gap: .5rem; flex-basis: 100%; margin-left: 1.9rem; }
.checkline { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .75rem; }
#enkeltmaaneder > p { margin: 0 0 .4rem; }
.application { padding: .75rem 0; border-top: 1px solid var(--line); }
.application:first-of-type { border-top: 0; }
.application p { margin: 0 0 .35rem; }

/* Notifikationer */
.pushstatus { font-weight: 600; }

/* Offentlig forkyndelse */
.pwlocation { max-width: 40rem; }
.pwlocation h3 { margin-top: 0; }
.pwshift { padding: .6rem 0; border-top: 1px solid var(--line); }
.pwshift:first-of-type { border-top: 0; }
.pwshift__time { font-weight: 700; font-size: 1.1rem; margin: 0 0 .4rem; }
.pwshift__places { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .5rem; }
.pwplace { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap;
    min-height: 2.8rem; padding: .4rem .7rem; border: 1px solid var(--line); border-radius: var(--radius); }
.pwplace--taken { background: var(--accent-soft); border-color: transparent; }
.pwplace--mine { box-shadow: inset 4px 0 0 var(--accent); font-weight: 600; }
.pwplace--free { border-style: dashed; }
.pwplace--free select { width: auto; flex: 1; min-width: 8rem; }
.pwplace--empty { border-style: dashed; }

/* Dine opgaver */
.tasklist { list-style: none; margin: 0; padding: 0; }
.tasklist li { display: grid; padding: .5rem 0; border-top: 1px solid var(--line); }
.tasklist li:first-child { border-top: 0; padding-top: 0; }
.tasklist__date { font-size: .9rem; }
.tasklist__what { font-weight: 600; }

/* ---------- Mobil: tabeller bliver til lister ---------- */

@media (max-width: 720px) {
    h1 { font-size: 1.5rem; }
    .page { padding-top: 1.25rem; }
    .topbar__inner { gap: .5rem 1rem; }
    .menutoggle { display: block; margin-left: auto; }
    .mainnav, .usermenu { display: none; flex-basis: 100%; }
    .mainnav { flex-direction: column; align-items: stretch; }
    .tabs a { padding: .5rem .7rem; }
    .navgroup__menu { position: static; box-shadow: none; border: 0; padding: 0 0 0 1rem; background: none; min-width: 0; }
    .topbar.is-open .mainnav, .topbar.is-open .usermenu { display: flex; }
    .panel, .section { padding: 1.1rem 1rem; }

    .monthnav { grid-template-columns: 1fr 1fr; }
    .daytabs { gap: .25rem; }
    .daytab { font-size: .78rem; padding: .45rem 0; }
    .prow { grid-template-columns: 1fr; padding: .6rem 1rem; }
    .prow__who { text-align: left; }
    .program__section { padding: .5rem 1rem; }
    .program__head { padding: 1rem; }
    .assignrow { grid-template-columns: 1fr; }
    .assignrow .field-error, .assignrow .hint { grid-column: 1; }
    .assigngroup { padding: .75rem 1rem 1rem; }
    .monthnav h1, .monthnav h2 { grid-column: 1 / -1; grid-row: 1; text-align: left; }

    .table thead { display: none; }
    .table, .table tbody, .table tfoot, .table tr, .table td, .table th { display: block; width: 100%; }
    .table td:empty { display: none; }
    .table tr { padding: .8rem 1rem; border-bottom: 1px solid var(--line); }
    .table tbody tr:last-child { border-bottom: 0; }
    .table td { border: 0; padding: .15rem 0; display: grid; grid-template-columns: 7.5rem 1fr; gap: .75rem; }
    .table td::before { content: attr(data-label); color: var(--muted); font-size: .85rem; grid-column: 1; }
    /* Flere ting i samme celle (fx distrikt + område + antal) stables i højre kolonne */
    .table td > * { grid-column: 2; }
    .table td .badge, .table td .tag, .table td .tstatus { justify-self: start; align-self: start; }
    .table td:not([data-label])::before { content: ""; }
    .table .num { text-align: left; }
}

@media print {
    .topbar, .formactions, .button, form, .breadcrumb, .monthnav a, .noprint, .skip-link, .tabs { display: none !important; }
    .printonly { display: block !important; }
    body { background: #fff; font-size: 11pt; }
    .page { padding: 0; max-width: none; }
    .panel, .table-wrap { border: 0; padding: 0; }
    .table th, .table td { border: 1px solid #999; padding: .3rem .5rem; }
    .monthnav { display: block; }
    .program { border: 0; max-width: none; }
    .program__section { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .prow { padding: .25rem .5rem; }
    .zoom { display: none; }
}


/* ---------- Distriktskort i fuld størrelse: kort øverst, adresseliste nederst ---------- */

.page--map { padding: 1rem 1rem 0; }
.mapview {
    --map-share: 55%;
    display: flex; flex-direction: column;
    height: calc(100vh - 7rem); min-height: 20rem;
    border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: #fff;
}
.mapview__map { flex: 0 0 var(--map-share); height: auto; min-height: 0; transition: flex-basis .25s ease; }
.mapview.is-dragging .mapview__map { transition: none; }
.mapview__sheet { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.mapview__handle {
    display: flex; flex-direction: column; align-items: center; gap: .3rem; width: 100%;
    padding: .45rem 1rem .55rem; border: 0; background: #f4f6f5; cursor: grab; touch-action: none;
    font: inherit; color: var(--ink); user-select: none; -webkit-user-select: none;
}
.mapview__handle:active { cursor: grabbing; }
.mapview__grip { width: 2.75rem; height: .3rem; border-radius: 1rem; background: #aeb9b7; }
.mapview__title { font-weight: 600; font-size: .9rem; }
.mapview__list { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 1rem 1rem; overscroll-behavior: contain; }

.maplist__road { font-size: .95rem; margin: .9rem 0 .2rem; }
.maplist { list-style: none; margin: 0; padding: 0; }
.maplist li + li { border-top: 1px solid var(--line); }
.maplist__item {
    display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left;
    padding: .65rem .5rem; border: 0; background: none; font: inherit; color: var(--ink); cursor: pointer;
}
.maplist__item:hover { background: #f4f6f5; }
.maplist__item.is-active { background: #e3eef1; box-shadow: inset 3px 0 0 var(--accent); }
.maplist__item.is-dnc { color: var(--danger); }
.maplist__item .tag { margin-left: auto; }

.maplocate__button { font-size: 1.25rem; line-height: 30px; text-align: center; text-decoration: none; color: var(--ink); }
.maplocate__button.is-on { color: #2b7de9; }
.maplocate__button.is-waiting { opacity: .5; }

/* ---------- Kommentarer: én boks, tre slags ---------- */

.commentbox { display: flex; gap: .6rem; align-items: flex-end; }
.commentbox .field { flex: 1; margin: 0; }
.commentkinds .radios { padding-top: 0; }
.commentkinds__help { display: grid; grid-template-columns: max-content 1fr; gap: .1rem .75rem; margin: 0; }
.commentkinds__help dt { font-weight: 600; }
.commentkinds__help dd { margin: 0; }
.commentlist li.is-work { background: linear-gradient(90deg, var(--sensitive-soft), transparent 60%); padding-left: .5rem; }

@media (max-width: 720px) {
    .page--map { padding: .5rem .5rem 0; }
    .mapview { border-radius: 0; border-left: 0; border-right: 0; }
    .commentbox { flex-direction: column; align-items: stretch; }
    .commentkinds__help { grid-template-columns: 1fr; }
    .commentkinds__help dd { margin-bottom: .3rem; }
}

/* Kort-boks: knap og tal over forhåndsvisningen */
.panel__body { padding: 1.4rem 1.5rem .2rem; }
.panel__body > :last-child { margin-bottom: 0; }
.tag--sensitive { background: var(--sensitive-soft); color: var(--sensitive); }
.tag--sensitive svg { width: .85em; height: .85em; vertical-align: -.1em; }
.commentlist li.is-confidential { background: linear-gradient(90deg, var(--sensitive-soft), transparent 60%); padding-left: .5rem; }
.commentlist li.is-work { background: none; padding-left: 0; }
.commentform { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }

/* ---------- Forsiden: træk og slip ---------- */

.dashboard { position: relative; }
.dashitem { position: relative; min-width: 0; }
.dashitem > .panel { margin-bottom: 0; }
/* Murstens-layout: hver boks fylder kun det antal smalle rækker, den har brug for (sættes af app.js),
   så en høj boks ikke efterlader et stort hul ved siden af sig. Uden JavaScript bruges det normale gitter. */
.dashboard.is-masonry { grid-auto-rows: 4px; row-gap: 0; }
.dashitem__handle {
    position: absolute; top: .45rem; right: .45rem; z-index: 2;
    width: 2.25rem; height: 2.25rem; border: 0; border-radius: var(--radius); background: none;
    color: #9aa6a4; font-size: 1.15rem; line-height: 1; cursor: grab; touch-action: none;
    user-select: none; -webkit-user-select: none;
}
.dashitem__handle:hover, .dashitem__handle:focus-visible { background: #eef2f1; color: var(--ink); }
.dashitem.is-dragging {
    position: fixed; z-index: 1000; pointer-events: none; margin: 0;
    box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .18); transform: rotate(1deg); opacity: .96;
}
.dashitem.is-dragging .dashitem__handle { cursor: grabbing; }
.dashitem--placeholder { border: 2px dashed #b9c4c2; border-radius: var(--radius); background: #f4f6f5; }
body.is-dashdragging { user-select: none; -webkit-user-select: none; cursor: grabbing; }
.dashboard__reset { margin: 0 0 1.5rem; text-align: center; }
.dashitem h2 { padding-right: 2.25rem; }

/* Forsiden: boksene strækkes ikke, så murstens-layoutet kan måle deres rigtige højde */
.dashboard.is-masonry .dashitem { align-self: start; }
.dashitem > .panel + .panel { margin-top: 1.25rem; }

/* "Føj til kalender" */
.calbutton {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 2rem; height: 2rem; margin-left: auto; border-radius: var(--radius);
    color: var(--accent); text-decoration: none;
}
.calbutton:hover, .calbutton:focus-visible { background: #eef2f1; }
.calbutton svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tasklist li, .plainlist li, .eventlist__item { position: relative; }
.tasklist li > .calbutton, .plainlist li > .calbutton, .eventlist__item > .calbutton { position: absolute; top: .35rem; right: 0; }
.tasklist li, .plainlist li:has(> .calbutton), .eventlist__item:has(> .calbutton) { padding-right: 2.5rem; }

.navlinks a { white-space: nowrap; }

/* Navnet i toppen: "MinistryHub – Springfield Menighed" */
.brand { display: inline-flex; align-items: baseline; flex-wrap: wrap; column-gap: .1rem; }
.brand__sep, .brand__congregation { font-weight: 400; opacity: .85; }
@media (max-width: 420px) {
    .brand { flex-direction: column; row-gap: 0; line-height: 1.15; }
    .brand__sep { display: none; }
    .brand__congregation { font-size: .8rem; }
}
.auth__congregation { margin-top: -.6rem; font-size: 1.1rem; color: var(--muted, #5b6b69); }