/* Min Plads.

   RETNING: navneskiltet.
   En børnehave giver hvert barn et tegn på knagen, længe før barnet kan læse
   sit eget navn. Det tegn er systemets bærende element: hvert barn har en
   farve og en figur, der følger det gennem alle skærme, så både forældre og
   personale genkender rækken på form og farve, før de læser.

   Regler for fladen:
   - Ingen bløde skygger og ingen gradienter. Kanter er 2 px og farvede.
     Dybde laves med en hård forskudt skygge under knapper — de kan trykkes ned.
   - Ét sted at være modig: navneskiltene. Alt andet holder mund.
   - Én palet. Ingen mørk tilstand.

   Skrifterne kommer fra fonts.css, som er indlejret og ikke henter noget.
   Kopieret fra prototypen og tilpasset: ingen protobar, print-CSS til
   adresselisten, min-width:0 på grid-kolonner (vandret scroll ved 1280 px). */

:root{
  /* Grundfarver — kølig papirhvid med grønt anstrøg, ikke creme. */
  --sky:#EAF2F0;
  --paper:#FFFFFF;
  --paper-2:#F3F8F6;
  --spruce:#14352B;
  --moss:#47665A;
  --stone:#6E8479;
  --line:#CBDDD6;
  --line-soft:#DFEBE6;

  /* Handling. Mariehønerød, fordi det er en børnehave og ikke en bank. */
  --ladybird:#C93B26;
  --ladybird-dark:#8E2618;
  --ladybird-wash:#FBE2DD;

  /* Skiltefarver. Alle mindst 3:1 mod hvid, så figuren kan tegnes hvid. */
  --tag-ladybird:#C93B26;
  --tag-sun:#C77F06;
  --tag-leaf:#3F8A4C;
  --tag-water:#2A7E9E;
  --tag-plum:#7150A0;
  --tag-clay:#9A6132;

  /* Betydning. */
  --ok:#2F7A46;        --ok-wash:#DEF0E3;
  --warn:#8A5A08;      --warn-wash:#FBEBCE;
  --crit:#C93B26;      --crit-wash:#FBE2DD;
  --info:#1F6A87;      --info-wash:#DBEDF4;
  --mute-wash:#E6EEEB;

  --display:"Baloo 2","Trebuchet MS",system-ui,sans-serif;
  --text:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif;

  --sidebar:236px;
  --topbar:60px;
  --r-lg:20px;
  --r-md:14px;
  --r-sm:10px;
}

/* ------------------------------------------------------------------ basis */

*{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--sky);color:var(--spruce);
  font-family:var(--text);font-size:15.5px;line-height:1.6;
}
h1,h2,h3{margin:0 0 .35em;font-family:var(--display);font-weight:600;line-height:1.2}
h1{font-size:32px;font-weight:700;letter-spacing:-.005em}
h2{font-size:20px}
h3{font-size:16px}
p{margin:0 0 .8em}
a{color:var(--ladybird);text-underline-offset:3px;text-decoration-thickness:2px}
ul{margin:0 0 .8em;padding-left:1.15em}
li{margin-bottom:.25em}
img{max-width:100%}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.icon{width:20px;height:20px;flex:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--stone)}
.strike{text-decoration:line-through}

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

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ----------------------------------------------------------------- topbar */

.topbar{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;gap:14px;
  height:var(--topbar);padding:0 18px;
  background:var(--paper);border-bottom:2px solid var(--line-soft);
}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--spruce)}
.brand-mark{width:26px;height:26px;color:var(--ladybird)}
.wordmark{font-family:var(--display);font-size:24px;font-weight:700;letter-spacing:-.01em}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.langs{display:flex;border:2px solid var(--line);border-radius:99px;overflow:hidden}
.lang{
  border:0;background:transparent;color:var(--moss);
  font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.03em;
  padding:4px 11px;cursor:pointer;
}
.lang[aria-pressed="true"]{background:var(--spruce);color:#fff}
.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border:2px solid var(--line);border-radius:var(--r-md);
  background:var(--paper);color:var(--moss);cursor:pointer;font:inherit;
}
.icon-btn:hover{background:var(--paper-2)}
.topbar .burger{display:none}
.whoami{display:flex;flex-direction:column;line-height:1.25;text-align:right;max-width:190px}
.whoami-name{font-family:var(--display);font-size:15px;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.whoami-role{font-size:11.5px;color:var(--stone)}
.topbar-search{position:relative;display:flex;align-items:center;gap:8px;margin-left:14px;
  border:2px solid var(--line);border-radius:99px;padding:0 14px;height:40px;
  background:var(--paper-2);color:var(--stone);min-width:180px;max-width:340px;flex:1}
.topbar-search input{border:0;background:transparent;font:inherit;font-size:14.5px;
  color:var(--spruce);width:100%;outline:0;padding:0}
.search-results{
  position:absolute;top:46px;left:0;right:0;z-index:40;
  background:var(--paper);border:2px solid var(--line);border-radius:var(--r-md);
  padding:6px;max-height:60vh;overflow:auto;
}
.search-results a{display:flex;align-items:center;gap:9px;padding:7px 9px;
  border-radius:var(--r-sm);text-decoration:none;color:var(--spruce);font-size:14.5px}
.search-results a:hover{background:var(--paper-2)}
.search-results .rs-sub{display:block;font-size:12px;color:var(--stone)}
.search-results .rs-empty{padding:8px 9px;font-size:13.5px;color:var(--stone)}

/* ------------------------------------------------------------ layout-skal */

#app{display:flex;flex-direction:column;min-height:100vh}
main{padding:26px 18px 48px;width:100%;margin:0 auto}

body.mode-public main{max-width:620px}
body.mode-parent main{max-width:660px;padding-bottom:96px}
body.mode-admin main{max-width:1200px;padding:24px 26px 64px}

body.mode-admin #app{display:grid;grid-template-columns:var(--sidebar) 1fr;
  grid-template-rows:var(--topbar) 1fr;grid-template-areas:"side top" "side main"}
body.mode-admin .sidebar{grid-area:side}
body.mode-admin .topbar{grid-area:top}
body.mode-admin main{grid-area:main;min-width:0}

.sidebar{background:var(--paper);border-right:2px solid var(--line-soft);
  padding:16px 12px;overflow-y:auto}
.side-group{margin-bottom:20px}
.side-title{font-family:var(--display);font-size:12px;font-weight:600;
  text-transform:uppercase;letter-spacing:.09em;color:var(--stone);
  padding:0 12px;margin-bottom:7px}
.side-link{
  display:flex;align-items:center;gap:10px;padding:9px 12px;
  border-left:4px solid transparent;border-radius:0 var(--r-md) var(--r-md) 0;
  text-decoration:none;color:var(--moss);font-size:15px;
}
.side-link:hover{background:var(--paper-2);color:var(--spruce)}
.side-link.on{background:var(--ladybird-wash);border-left-color:var(--ladybird);
  color:var(--spruce);font-family:var(--display);font-weight:600}
.side-link .icon{width:19px;height:19px}
.side-badge{margin-left:auto;background:var(--ladybird);color:#fff;
  font-family:var(--display);font-size:12px;font-weight:700;
  border-radius:99px;padding:0 8px;font-variant-numeric:tabular-nums}
.scrim{position:fixed;inset:0;background:rgba(10,30,24,.5);z-index:25}

.bottomnav{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  display:flex;gap:4px;background:var(--paper);border-top:2px solid var(--line-soft);
  padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px));
}
.bn-link{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:6px 2px;text-decoration:none;color:var(--stone);
  font-size:11.5px;border-radius:var(--r-md);
}
.bn-link.on{background:var(--ladybird-wash);color:var(--ladybird);
  font-family:var(--display);font-weight:600}
.bn-link .icon{width:22px;height:22px}

/* ------------------------------------------------------------- navneskilt */

/* Barnets tegn. Rundet firkant med hul foroven, som et laminat på en knage. */
.tag{
  display:inline-flex;align-items:center;justify-content:center;
  flex:none;border-radius:9px;color:#fff;position:relative;
}
.tag svg{width:62%;height:62%}
/* Hullet, som skiltet hænger i. */
.tag::before{
  content:"";position:absolute;top:10%;left:50%;transform:translateX(-50%);
  width:20%;height:9%;border-radius:99px;background:rgba(0,0,0,.22);
}
.tag.s{width:30px;height:30px;border-radius:8px}
.tag.m{width:46px;height:46px;border-radius:12px}
.tag.l{width:66px;height:66px;border-radius:17px}
.tag.ladybird{background:var(--tag-ladybird)}
.tag.sun{background:var(--tag-sun)}
.tag.leaf{background:var(--tag-leaf)}
.tag.water{background:var(--tag-water)}
.tag.plum{background:var(--tag-plum)}
.tag.clay{background:var(--tag-clay)}
.tag-name{display:flex;align-items:center;gap:10px}
.tag-name .t-sub{margin-top:1px}

/* --------------------------------------------------------------- knapper */

/* Knapperne kan trykkes ned: hård skygge under, som forsvinder ved klik. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:0 20px;border:0;border-radius:var(--r-md);
  background:var(--ladybird);color:#fff;
  font-family:var(--display);font-size:16.5px;font-weight:600;
  cursor:pointer;text-decoration:none;
  box-shadow:0 3px 0 var(--ladybird-dark);
  transition:transform .08s ease,box-shadow .08s ease;
}
.btn:hover{background:#B33321}
.btn:active{transform:translateY(3px);box-shadow:0 0 0 var(--ladybird-dark)}

.btn.ghost{background:var(--paper);color:var(--spruce);
  border:2px solid var(--line);box-shadow:0 3px 0 var(--line)}
.btn.ghost:hover{background:var(--paper-2)}
.btn.ghost:active{transform:translateY(3px);box-shadow:0 0 0 var(--line)}

.btn.danger{background:var(--paper);color:var(--ladybird);
  border:2px solid var(--ladybird);box-shadow:0 3px 0 var(--ladybird)}
.btn.danger:hover{background:var(--ladybird-wash)}
.btn.danger:active{transform:translateY(3px);box-shadow:0 0 0 var(--ladybird)}

.btn.quiet{background:transparent;color:var(--moss);box-shadow:none;padding:0 10px}
.btn.quiet:hover{background:var(--paper-2);color:var(--spruce)}
.btn.quiet:active{transform:none}

.btn.small{min-height:38px;font-size:14.5px;padding:0 14px;border-radius:var(--r-sm);
  box-shadow:0 2px 0 var(--ladybird-dark)}
.btn.ghost.small{box-shadow:0 2px 0 var(--line)}
.btn.danger.small{box-shadow:0 2px 0 var(--ladybird)}
.btn.quiet.small{box-shadow:none}
.btn.small:active{transform:translateY(2px)}
.btn.block{width:100%}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px;align-items:center}
.btn-row.end{justify-content:flex-end}
.btn-row.between{justify-content:space-between}

/* ---------------------------------------------------------------- kort */

.card{
  background:var(--paper);border:2px solid var(--line-soft);border-radius:var(--r-lg);
  padding:18px 20px;margin-bottom:16px;
}
.card-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}
.card-head h2,.card-head h3{margin:0}
.card-head .spacer{margin-left:auto}
.card-link{display:block;text-decoration:none;color:inherit}
.card-link:hover{border-color:var(--line)}
.card-note{font-size:14px;color:var(--stone);margin:0}

.grid{display:grid;gap:16px}
.grid>*{min-width:0}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.grid.three{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.grid.four{grid-template-columns:repeat(auto-fit,minmax(165px,1fr))}

.role-card{display:flex;gap:16px;align-items:center}
.role-card h2{margin-bottom:2px}
.role-card p{margin:0;font-size:14.5px;color:var(--moss)}

/* ---------------------------------------------------------------- piller */

.pill{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 11px;border-radius:99px;font-size:12.5px;font-weight:700;
  background:var(--mute-wash);color:var(--moss);white-space:nowrap;
}
.pill.ok{background:var(--ok-wash);color:var(--ok)}
.pill.warn{background:var(--warn-wash);color:var(--warn)}
.pill.crit{background:var(--crit-wash);color:var(--crit)}
.pill.info{background:var(--info-wash);color:var(--info)}
.pill.outline{background:transparent;box-shadow:inset 0 0 0 2px var(--ok);color:var(--ok)}
.pill.plain{background:transparent;box-shadow:inset 0 0 0 2px var(--line);
  color:var(--stone);font-weight:400}
.pill-row{display:flex;flex-wrap:wrap;gap:6px}

/* ------------------------------------------------------------------ tal */

.stat{background:var(--paper);border:2px solid var(--line-soft);
  border-radius:var(--r-lg);padding:14px 18px}
.stat-value{font-family:var(--display);font-size:38px;font-weight:700;line-height:1;
  font-variant-numeric:tabular-nums}
.stat-label{font-size:13px;color:var(--stone);margin-top:4px}
.stat.accent{border-color:var(--ladybird)}
.stat.accent .stat-value{color:var(--ladybird)}

/* --------------------------------------------------------------- tabeller */

.table-wrap{overflow-x:auto}
.table{width:100%;border-collapse:collapse;font-size:14.5px;background:var(--paper);
  border:2px solid var(--line-soft);border-radius:var(--r-lg);overflow:hidden}
.table th{
  text-align:left;font-family:var(--display);font-size:12.5px;font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;color:var(--stone);
  padding:10px 14px;background:var(--paper-2);
  border-bottom:2px solid var(--line-soft);white-space:nowrap;
}
.table td{padding:11px 14px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
.table tr:last-child td{border-bottom:0}
.table tbody tr:hover{background:var(--paper-2)}
.table .num,.table .rank{font-variant-numeric:tabular-nums}
.table .rank{font-family:var(--display);font-size:20px;font-weight:700;color:var(--stone)}
.table a{text-decoration:none;font-weight:700;color:var(--spruce);white-space:nowrap}
.table a:hover{color:var(--ladybird)}
.t-sub{display:block;font-size:12.5px;color:var(--stone);font-weight:400;white-space:nowrap}
.t-actions{white-space:nowrap;text-align:right}

@media (max-width:760px){
  .table,.table thead,.table tbody,.table tr,.table td{display:block;width:100%}
  .table{border:0;background:transparent;overflow:visible}
  .table thead{display:none}
  .table tr{
    background:var(--paper);border:2px solid var(--line-soft);border-radius:var(--r-lg);
    margin-bottom:12px;padding:6px 4px;
  }
  .table td{
    display:flex;gap:14px;align-items:baseline;justify-content:space-between;
    border-bottom:1px solid var(--line-soft);padding:8px 14px;
  }
  .table tr td:last-child{border-bottom:0}
  .table td::before{
    content:attr(data-label);flex:none;font-family:var(--display);font-size:12px;
    font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--stone);
  }
  .table td[data-label=""]::before{content:none}
  .table .t-actions{text-align:left;justify-content:flex-start}
}

/* --------------------------------------------------------------- felter */

.field{margin-bottom:16px}
.field > label{display:block;font-size:14px;font-weight:700;color:var(--moss);margin-bottom:5px}
.field input[type=text],.field input[type=email],.field input[type=tel],
.field input[type=date],.field input[type=month],.field input[type=number],
.field input[type=password],.field input[type=search],
.field select,.field textarea{
  width:100%;min-height:48px;padding:10px 13px;
  font-family:var(--text);font-size:16px;color:var(--spruce);background:var(--paper);
  border:2px solid var(--line);border-radius:var(--r-md);
}
.field textarea{min-height:96px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:3px solid var(--ladybird);outline-offset:1px;border-color:var(--ladybird);
}
/* En select i en tabelcelle (rollen under Brugere) står uden for .field og
   ville ellers være systemets egen på 19 px. */
.table select{min-height:38px;padding:6px 10px;font-family:var(--text);font-size:15px;
  color:var(--spruce);background:var(--paper);border:2px solid var(--line);border-radius:var(--r-sm)}
.table select:focus{outline:3px solid var(--ladybird);outline-offset:1px;border-color:var(--ladybird)}
.field .hint{font-size:13px;color:var(--stone);margin:5px 0 0}
.field .err{font-size:13px;color:var(--crit);font-weight:700;margin:5px 0 0;display:none}
.field.bad input,.field.bad select,.field.bad textarea{border-color:var(--crit);background:var(--crit-wash)}
.field.bad .err{display:block}
.field-row{display:grid;gap:0 16px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.check{display:flex;gap:12px;align-items:flex-start;padding:10px 0;font-size:15px}
.check input{margin:4px 12px 0 0;width:20px;height:20px;flex:none;accent-color:var(--ladybird)}
.check .ck-sub{display:block;font-size:13px;color:var(--stone)}
fieldset{border:0;padding:0;margin:0 0 8px}
legend{font-size:14px;font-weight:700;color:var(--moss);padding:0;margin-bottom:6px}
.radio-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.radio-row label{display:flex;gap:8px;align-items:center;font-size:15px;
  border:2px solid var(--line);border-radius:99px;padding:7px 16px;cursor:pointer;
  background:var(--paper)}
.radio-row label:hover{background:var(--paper-2)}
.radio-row input{width:20px;height:20px;accent-color:var(--ladybird)}

/* --------------------------------------------------------------- sektion */

.section{border:2px solid var(--line-soft);border-radius:var(--r-lg);
  background:var(--paper);margin-bottom:16px;overflow:hidden}
.section-head{display:flex;align-items:center;gap:12px;padding:13px 18px;
  background:var(--paper-2);border-bottom:2px solid var(--line-soft)}
.section-head h2{margin:0;font-size:17px}
.section-head .spacer{margin-left:auto}
.section-body{padding:8px 18px 14px}
.section-body hr{border:0;border-top:2px dotted var(--line-soft);margin:16px 0}
.section-body h3{margin-top:16px;color:var(--stone);font-size:13px;
  text-transform:uppercase;letter-spacing:.06em}
.kv{display:flex;gap:16px;justify-content:space-between;align-items:baseline;
  padding:9px 0;border-bottom:1px solid var(--line-soft);font-size:15px}
.kv:last-child{border-bottom:0}
.kv dt{color:var(--stone);font-size:14px;flex:none;max-width:52%}
.kv dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.kv dd .tag-name{justify-content:flex-end}
dl{margin:0}
.locked{display:inline-flex;align-items:center;gap:6px;color:var(--stone);font-size:13px}
.locked .icon{width:15px;height:15px}

/* ------------------------------------------------------------- bjælker */

.bar{height:12px;border-radius:99px;background:var(--paper-2);
  box-shadow:inset 0 0 0 2px var(--line-soft);overflow:hidden}
.bar-fill{display:block;height:100%;background:var(--tag-leaf);border-radius:99px}
.bar-fill.high{background:var(--tag-sun)}
.bar-fill.full{background:var(--ladybird)}
.bar-line{display:grid;grid-template-columns:1fr 130px 70px;gap:12px;align-items:center;
  padding:8px 0;font-size:14.5px}
.bar-line .bl-num{text-align:right;font-variant-numeric:tabular-nums;color:var(--stone)}

.spark-block{margin-bottom:20px}
.spark-block:last-child{margin-bottom:0}
.spark-head{display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--display);font-size:16px;font-weight:600;margin-bottom:7px}
.spark-head .muted{font-family:var(--text);font-weight:400}
.spark{display:flex;gap:4px;align-items:flex-end;height:58px}
.sp-col{position:relative;flex:1;height:100%;background:var(--paper-2);
  border-radius:6px 6px 0 0;overflow:hidden}
.sp-fill{position:absolute;left:0;right:0;bottom:0;background:var(--tag-leaf);
  display:block;border-radius:6px 6px 0 0}
.sp-fill.high{background:var(--tag-sun)}
.sp-fill.full{background:var(--ladybird)}
.spark-labels{display:flex;justify-content:space-between;font-size:12px;
  color:var(--stone);margin-top:4px}

/* ---------------------------------------------------------- trin på vejen */

.steps{display:flex;align-items:center;gap:0;margin:0 0 26px;padding:0;list-style:none}
.steps li{display:flex;align-items:center;flex:1;min-width:0}
.steps li:last-child{flex:none}
.step-dot{
  display:flex;align-items:center;justify-content:center;flex:none;
  width:34px;height:34px;border-radius:50%;
  background:var(--paper);border:2px solid var(--line);color:var(--stone);
  font-family:var(--display);font-size:16px;font-weight:600;
}
.step-line{flex:1;height:4px;background:var(--line);border-radius:99px;margin:0 6px;min-width:8px}
.steps li.done .step-dot{background:var(--tag-leaf);border-color:var(--tag-leaf);color:#fff}
.steps li.done .step-line{background:var(--tag-leaf)}
.steps li.on .step-dot{background:var(--ladybird);border-color:var(--ladybird);color:#fff}
.step-now{font-family:var(--display);font-size:14px;font-weight:600;
  color:var(--moss);margin:-18px 0 20px}

/* ------------------------------------------------------------ meddelelser */

.notice{border:2px solid var(--line-soft);border-left-width:8px;
  background:var(--paper);border-radius:var(--r-md);padding:14px 16px;
  margin-bottom:16px;font-size:15px}
.notice h3{margin:0 0 4px;font-size:17px}
.notice p:last-child{margin-bottom:0}
.notice.warn{border-color:#EFD9A8;border-left-color:var(--tag-sun);background:var(--warn-wash)}
.notice.ok{border-color:#BFE0C8;border-left-color:var(--tag-leaf);background:var(--ok-wash)}
.notice.crit{border-color:#EFC5BC;border-left-color:var(--ladybird);background:var(--crit-wash)}
.notice.info{border-color:#BDD9E5;border-left-color:var(--tag-water);background:var(--info-wash)}

.empty{padding:30px 18px;text-align:center;color:var(--stone);font-size:15px;
  border:2px dashed var(--line);border-radius:var(--r-lg);background:var(--paper)}

.todo-list{list-style:none;margin:0;padding:0}
.todo-list li{display:flex;gap:12px;align-items:center;padding:11px 0;
  border-bottom:1px solid var(--line-soft);font-size:15px}
.todo-list li:last-child{border-bottom:0}
.todo-list .spacer{margin-left:auto}
.todo-list a{text-decoration:none;font-weight:700;color:var(--spruce)}
.todo-list a:hover{color:var(--ladybird)}

.timeline{list-style:none;margin:0;padding:0;font-size:14px}
/* minmax(0,1fr), ikke 1fr: et gitterspor er som standard mindst så bredt som
   sit indhold, og en lang værdi i ændringsloggen skubber så hele siden ud. */
.timeline li{display:grid;grid-template-columns:100px minmax(0,1fr);gap:14px;padding:8px 0;
  border-bottom:1px solid var(--line-soft)}
.timeline li:last-child{border-bottom:0}
.timeline li>span{min-width:0;overflow-wrap:anywhere}
.timeline time{color:var(--stone);font-variant-numeric:tabular-nums}
@media (max-width:480px){
  /* På telefonen får tidspunktet sin egen linje frem for 100 px af bredden. */
  .timeline li{grid-template-columns:1fr;gap:2px}
  .timeline time{font-size:13px}
}

.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.tab{padding:7px 15px;border-radius:99px;border:2px solid var(--line);
  background:var(--paper);color:var(--moss);font-size:14.5px;text-decoration:none}
.tab:hover{background:var(--paper-2)}
.tab.on{background:var(--spruce);border-color:var(--spruce);color:#fff;
  font-family:var(--display);font-weight:600}
.filters{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-end;margin-bottom:18px}
.filters .field{margin-bottom:0;min-width:170px}

/* min-height, ikke bare tekststørrelsen: tilbage-linket er navigation, og en
   tommel rammer ikke 23 px. Margin'en trækkes tilsvarende ind. */
.backlink{display:inline-flex;align-items:center;gap:6px;font-size:14.5px;min-height:34px;
  margin-bottom:6px;text-decoration:none;color:var(--moss);font-weight:700}
.backlink:hover{color:var(--ladybird)}
.backlink .icon{width:16px;height:16px}

.lede{font-size:17px;color:var(--moss);margin-bottom:20px}
.page-head{margin-bottom:22px}
.page-head .lede{margin-bottom:0}
.eyebrow{font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--stone);margin-bottom:2px}
.head-tag{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.head-tag h1{margin:0}

.code-boxes{display:flex;gap:10px;margin:8px 0 4px}
.code-boxes input{
  width:52px;height:62px;text-align:center;
  font-family:var(--display);font-size:26px;font-weight:600;
  border:2px solid var(--line);border-radius:var(--r-md);
  background:var(--paper);color:var(--spruce);padding:0;
}
.code-boxes input:focus{outline:3px solid var(--ladybird);border-color:var(--ladybird)}
.qr{display:block;margin:10px 0;border:2px solid var(--line);border-radius:var(--r-md)}
.backup-codes{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;
  margin:12px 0}
.backup-codes span{background:var(--paper-2);border:2px solid var(--line-soft);
  border-radius:var(--r-sm);padding:8px 10px;text-align:center;
  font-family:var(--display);font-size:15px;font-weight:600;letter-spacing:.05em}
.secret{display:block;font-family:var(--display);font-size:17px;font-weight:600;
  letter-spacing:.09em;background:var(--paper-2);border:2px solid var(--line-soft);
  border-radius:var(--r-sm);padding:10px 12px;margin:8px 0;word-break:break-all}

/* ---------------------------------------------------------------- modal */

.modal-backdrop{position:fixed;inset:0;z-index:50;background:rgba(10,30,24,.5);
  display:flex;align-items:center;justify-content:center;padding:16px;overflow-y:auto}
.modal{background:var(--paper);border:2px solid var(--line);border-radius:var(--r-lg);
  width:100%;max-width:490px;max-height:92vh;display:flex;flex-direction:column;overflow:hidden}
.modal-head{display:flex;align-items:center;gap:12px;padding:15px 18px;
  border-bottom:2px solid var(--line-soft);background:var(--paper-2)}
.modal-head h2{margin:0;flex:1;font-size:19px}
.modal-body{padding:18px;overflow-y:auto}

/* ---------------------------------------------------------------- toast */

.toast-wrap{position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:0 16px calc(20px + env(safe-area-inset-bottom,0px));pointer-events:none}
.toast{background:var(--spruce);color:#fff;border-radius:99px;
  padding:11px 22px;font-family:var(--display);font-size:16px;font-weight:600;
  max-width:440px;box-shadow:0 3px 0 rgba(10,30,24,.35)}
.toast.warn{background:var(--tag-sun)}
body.mode-parent .toast-wrap{padding-bottom:calc(86px + env(safe-area-inset-bottom,0px))}

/* ------------------------------------------------------------ responsivt */

@media (max-width:900px){
  body.mode-admin #app{display:flex;flex-direction:column}
  body.mode-admin main{padding:22px 16px 44px}
  body.mode-admin .sidebar{
    position:fixed;top:0;bottom:0;left:0;width:262px;z-index:28;
    transform:translateX(-100%);visibility:hidden;transition:transform .18s ease;
  }
  body.mode-admin .sidebar.open{transform:none;visibility:visible}
  body.mode-admin .topbar .burger:not([hidden]){display:inline-flex}
  .topbar-search{margin-left:0;min-width:0}
  /* Uden ordmærket er linket kun mærket, og 26 px er ikke et mål for en tommel. */
  body.mode-admin .wordmark{display:none}
  body.mode-admin .brand{min-width:44px;min-height:44px;justify-content:center}
}
@media (max-width:540px){
  .whoami{display:none}
  /* Status-pillen får sin egen linje, så navnet ikke brækkes over to. */
  .card-head{flex-wrap:wrap}
  .card-head .spacer{display:none}
  main{padding-left:16px;padding-right:16px}
  h1{font-size:27px}
  .code-boxes{gap:7px}
  .code-boxes input{width:44px;height:56px;font-size:23px}
  .steps li:not(.on):not(.done) .step-line{min-width:6px}
}

/* ---------------------------------------------------- tilføjet i Min Plads */

.topbar-inst{font-family:var(--display);font-size:15px;font-weight:600;color:var(--moss);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.langs .lang{text-decoration:none;display:inline-block}
.langs .lang[aria-current="true"]{background:var(--spruce);color:#fff}
.readonly-bar{padding:8px 18px;background:var(--warn-wash);color:#5E3D04;font-size:13.5px;
  border-bottom:2px solid #EBD4A4;text-align:center}
.side-button{width:100%;border:0;border-left:4px solid transparent;background:transparent;
  font:inherit;text-align:left;cursor:pointer}
.side-button:hover{background:var(--paper-2);color:var(--spruce)}
.sidebar form{margin:0}
.inline-form{display:inline}
.topbar-search{display:flex}
form.topbar-search{margin:0}
.notice p{margin:0}
.notice.crit,.notice.ok{margin-bottom:16px}
code,pre.code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px}
pre.code{background:var(--paper-2);border:2px solid var(--line-soft);border-radius:var(--r-sm);
  padding:12px 14px;overflow-x:auto;margin:8px 0}
.kv dd{min-width:0;overflow-wrap:anywhere}
.table td{overflow-wrap:anywhere}
.table a{white-space:normal}
.t-sub{white-space:normal}
.card{min-width:0}
.filters form{display:contents}
.check input[type=checkbox]{margin-top:4px}
.grid.two>.card:only-child{grid-column:1 / -1}
.photo{display:block;width:120px;height:120px;object-fit:cover;border-radius:var(--r-md);
  border:2px solid var(--line-soft);margin-bottom:12px}
.explain{font-size:14.5px;color:var(--moss)}
.candidates{list-style:none;margin:8px 0 0;padding:0}
.candidates li{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line-soft)}
.candidates li:first-child{border-top:0}
.candidates .spacer{margin-left:auto}
.stat-row{display:flex;gap:16px;flex-wrap:wrap}
.field-row>*{min-width:0}
.mail-body{white-space:pre-wrap;font-family:var(--text);font-size:14.5px;background:var(--paper-2);
  border:2px solid var(--line-soft);border-radius:var(--r-sm);padding:12px 14px}
.muted-list{list-style:none;margin:0;padding:0}
.muted-list li{padding:6px 0;border-bottom:1px solid var(--line-soft);font-size:14.5px}
.muted-list li:last-child{border-bottom:0}
.btn-row form{display:inline}
.section-body .btn-row{margin-top:12px}
.tag-name>span:last-child{min-width:0}
.pill.on{background:var(--ok-wash);color:var(--ok)}
.pill.off{background:var(--mute-wash);color:var(--stone)}

/* Adresseliste og andre udskrifter. */
@media print{
  body{background:#fff;font-size:11.5pt}
  .topbar,.sidebar,.bottomnav,.btn,.btn-row,.readonly-bar,.filters,.backlink,.scrim,.toast-wrap,.no-print{display:none !important}
  body.mode-admin #app{display:block}
  main{max-width:none;padding:0}
  .card,.section,.table{border-color:#bbb;break-inside:avoid}
  .table th{background:#eee;color:#000}
  .print-list .table td,.print-list .table th{padding:6px 8px}
  a{color:inherit;text-decoration:none}
  @page{size:A4;margin:14mm}
}
.narrow{max-width:460px;margin:0 auto}
body.mode-admin .narrow{margin-top:24px}
.cohort-row td{background:var(--paper-2);font-size:13px;color:var(--moss);padding:6px 14px}
@media (max-width:760px){.cohort-row td{border-radius:var(--r-md)}}

/* Plain link lists (template list under /admin/mail) */
.plain-list{list-style:none;margin:0;padding:0}
.plain-list li{border-bottom:1px solid var(--line-soft)}
.plain-list li:last-child{border-bottom:0}
.plain-list a{display:block;padding:10px 4px;text-decoration:none;font-weight:600}
.plain-list a.on{color:var(--ladybird)}
.pill.on{background:var(--spruce);color:#fff}
.mail-body{margin:0 0 12px}