/* Garageskærm.
   Varm sten og brandbilrød, jf. udkastets side 14: rød er den eneste mættede
   farve i systemet og bruges kun til det der har vagten eller haster.

   Ingen webfont. Systemskriften er SF Pro på telefonen, og den er både hurtigere
   og mere hjemmevant end noget vi kunne hente. Hierarkiet skabes med vægt,
   størrelse og afstand — ikke med et skriftsnit.

   Fire vægte, seks størrelser. Flere end det bliver til støj. */

:root{
  --papir:#EFEBE4; --kort:#FFFFFF; --linje:rgba(25,23,20,.12); --linje2:rgba(25,23,20,.22);
  --blaek:#191714; --blaek2:#4A453D; --daempet:#837C71;
  --roed:#C8322B; --paaRoed:#FFFFFF;
  --ok:#256B4A; --okBg:rgba(37,107,74,.12);
  --advar:#96650C; --advarBg:rgba(200,140,20,.16);
  --fejl:#8E1B1B; --fejlBg:rgba(142,27,27,.10);
  --info:#2A5A8C; --infoBg:rgba(42,90,140,.12);
  --chip:rgba(25,23,20,.055); --spor:rgba(25,23,20,.10); --kul:#201D1A;

  /* Fire vægte. Ikke flere. */
  --v-nor:400; --v-mid:500; --v-halv:600; --v-fed:700;
  /* Sporing: versaler skal have luft, store overskrifter skal have mindre. */
  --sp-caps:.08em; --sp-lille:.015em; --sp-stor:-.02em;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-font-smoothing:antialiased}

body{
  background:var(--papir);color:var(--blaek);
  font:var(--v-nor) 15px/1.45 Inter,-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI",Roboto,sans-serif;
  font-feature-settings:'tnum';padding-bottom:82px
}
a{color:inherit;text-decoration:none}
h1,h2,h3,.top .h,.h2,.h3{text-wrap:balance}

.skal{max-width:520px;margin:0 auto;padding:0 16px}

/* ── overskrift */
.top{padding:18px 0 12px}
.top .h{font-size:30px;font-weight:var(--v-fed);letter-spacing:var(--sp-stor);line-height:1.1}
.top .s{font-size:13px;color:var(--daempet);font-weight:var(--v-mid);margin-top:4px;
  letter-spacing:var(--sp-lille)}
.top .r{float:right;margin-top:6px}

/* Arkhoved. Chevronen er roed og titlen centreret, saa en skaerm man er gaaet
   ind i ikke ligner en fane man er landet paa. */
.arkhoved{display:flex;align-items:center;padding:20px 0 22px;position:relative;min-height:64px}
.arkhoved>a{color:var(--roed);display:flex;position:relative;z-index:1}
.arkhoved .h{position:absolute;left:0;right:0;text-align:center;font-size:19px;
  font-weight:var(--v-fed);letter-spacing:var(--sp-lille)}

/* Afsnitsoverskrift. Står på papiret, ikke i en boks. */
.sek{font-size:11px;font-weight:var(--v-fed);letter-spacing:var(--sp-caps);text-transform:uppercase;
  color:var(--daempet);margin:26px 2px 10px}

/* ── flader
   .kort er til noget man kan trykke på: et link, en formular, en person.
   .blok grupperer uden at bygge en kasse — en hårfin streg og luft er nok.
   Grunden er enkel: en skærm af hvide kasser på papir ligner en skabelon. */
.blok{padding:2px 2px 14px;border-bottom:1px solid var(--linje)}
.blok:last-of-type{border-bottom:0}
.blok+.blok{padding-top:14px}

.kort{display:block;background:var(--kort);border:1px solid var(--linje);border-radius:16px;padding:14px}
.kort+.kort{margin-top:8px}
.kort.acc{border-color:var(--roed);border-width:1.5px}
.kort.ok{border-color:var(--ok)}
.kort.advar{border-color:var(--advar)}

.raekke{display:flex;align-items:center;gap:12px}
/* To lige kolonner. Bruges til tallene paa mig, hvor de skal staa side om
   side og ikke under hinanden. */
.to{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.to>.kort+.kort{margin-top:0}

.mellem{display:flex;align-items:center;justify-content:space-between;gap:10px}
.gro{flex:1;min-width:0}

/* ── tekst. Seks størrelser i alt. */
.h2{font-size:22px;font-weight:var(--v-halv);letter-spacing:-.015em;line-height:1.15}
.h3{font-size:17px;font-weight:var(--v-halv);letter-spacing:-.01em;line-height:1.25}
.t{font-size:15px;font-weight:var(--v-mid)}
.s{font-size:13px;color:var(--daempet);line-height:1.45}
.xs{font-size:11px;color:var(--daempet);font-weight:var(--v-halv);
  letter-spacing:var(--sp-caps);text-transform:uppercase}
.tal{font-variant-numeric:tabular-nums;letter-spacing:0}
.midt{text-align:center}

.mt6{margin-top:6px}.mt8{margin-top:8px}.mt10{margin-top:10px}.mt12{margin-top:12px}
.mt14{margin-top:14px}.mt16{margin-top:16px}.mt20{margin-top:20px}.mb8{margin-bottom:8px}
.skil{height:1px;background:var(--linje);margin:12px 0}

/* ── kalderækkefølgen. Appens signatur: en sammenhængende bane hvor den der
   kaldes først er den eneste røde. Den er bevidst ikke seks løse knapper. */
.stribe{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--linje);
  border-radius:11px;overflow:hidden;background:var(--kort)}
.stribe .p{flex:1 0 auto;padding:8px 11px;font-size:12px;font-weight:var(--v-halv);
  color:var(--blaek2);border-right:1px solid var(--linje);letter-spacing:var(--sp-lille);
  white-space:nowrap}
.stribe .p:last-child{border-right:0}
.stribe .p b{color:var(--daempet);font-weight:var(--v-fed);margin-right:5px}
.stribe .p.r{background:var(--roed);color:#fff}
.stribe .p.r b{color:rgba(255,255,255,.65)}

.chip{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:99px;
  font-size:11px;font-weight:var(--v-halv);background:var(--chip);color:var(--blaek2);
  letter-spacing:var(--sp-lille)}
.chip.ok{background:var(--okBg);color:var(--ok)}
.chip.advar{background:var(--advarBg);color:var(--advar)}
.chip.fejl{background:var(--fejlBg);color:var(--fejl)}
.chip.info{background:var(--infoBg);color:var(--info)}
.chip.roed{background:var(--roed);color:#fff}
.prik{width:8px;height:8px;border-radius:99px;background:currentColor}

.knap{display:flex;align-items:center;justify-content:center;gap:8px;height:50px;
  border-radius:14px;background:var(--roed);color:var(--paaRoed);font-size:15px;
  font-weight:var(--v-halv);border:0;width:100%;cursor:pointer;font-family:inherit;
  letter-spacing:var(--sp-lille)}
.knap.sek{background:transparent;border:1px solid var(--linje2);color:var(--blaek2)}
.knap.lille{height:38px;font-size:14px;border-radius:11px;width:auto;padding:0 15px}

/* En person er altid noget man kan trykke på, så her er kortet berettiget. */
.pers{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:14px;
  background:var(--kort);border:1px solid var(--linje);margin-top:8px}
.avatar{width:34px;height:34px;border-radius:11px;flex:0 0 34px;display:flex;
  align-items:center;justify-content:center;font-size:12px;font-weight:var(--v-halv);
  background:#E7E1D6;color:#3A352E;letter-spacing:var(--sp-lille)}
.navn{font-size:15px;font-weight:var(--v-halv);letter-spacing:-.005em}
.meta{font-size:12px;color:var(--daempet);margin-top:2px;letter-spacing:var(--sp-lille)}
/* Kvadratisk knap til én handling, f.eks. ring til mentoren. */
.firkant{width:52px;height:52px;flex:0 0 52px;border-radius:15px;display:flex;
  align-items:center;justify-content:center;background:var(--chip);color:var(--blaek2)}

.ikoner{display:flex;gap:5px;margin-top:6px;opacity:.65}
.ikoner svg{display:block}

/* Det store ja eller nej. Ikonet staar i en flade, ikke frit, saa svaret
   laeses som et svar og ikke som endnu et ikon i en raekke. */
.svarfelt{width:58px;height:58px;flex:0 0 58px;border-radius:17px;display:flex;
  align-items:center;justify-content:center}
.svarfelt.ok{background:var(--okBg);color:var(--ok)}
.svarfelt.advar{background:var(--advarBg);color:var(--advar)}

.bar{height:6px;border-radius:99px;background:var(--spor);overflow:hidden}
.bar>i{display:block;height:100%;background:var(--roed)}
.bar.ok>i{background:var(--ok)}.bar.advar>i{background:var(--advar)}

input,select,textarea{font-family:inherit;font-size:16px;width:100%;padding:12px 14px;
  border:1px solid var(--linje2);border-radius:12px;background:var(--kort);color:var(--blaek)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--roed);outline-offset:1px;
  border-color:transparent}
label{display:block;font-size:11px;font-weight:var(--v-halv);letter-spacing:var(--sp-caps);
  text-transform:uppercase;color:var(--daempet);margin:16px 0 6px}
.fejlboks{background:var(--fejlBg);color:var(--fejl);padding:12px 14px;border-radius:12px;
  font-size:14px;font-weight:var(--v-mid)}
.okboks{background:var(--okBg);color:var(--ok);padding:12px 14px;border-radius:12px;
  font-size:14px;font-weight:var(--v-mid)}

/* ── faner */
.faner{position:fixed;left:0;right:0;bottom:0;background:var(--kort);
  border-top:1px solid var(--linje);display:flex;padding:8px 4px 10px;z-index:20}
.faner .f{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  color:var(--daempet);font-size:10px;font-weight:var(--v-halv);letter-spacing:var(--sp-lille)}
.faner .f.paa{color:var(--roed)}
.faner .f svg{display:block}

/* Tabellen fylder kortet helt ud. Padding paa kortet ville give en hvid kant
   som raekkestregerne ikke naar ud til, og saa ligner den en tabel i en kasse
   frem for et ark. */
.kort.tabel{padding:0;overflow:hidden}
.kort.tabel table{font-size:16px}
.kort.tabel th,.kort.tabel td{padding:14px 10px}
.kort.tabel thead th{font-size:11px}
.kort.tabel tbody tr:last-child td{border-bottom:0}
.kort.tabel tfoot th{background:rgba(25,23,20,.04);border-bottom:0;font-size:11px}
.kort.tabel tfoot th.tal{font-size:16px;font-weight:var(--v-fed)}

table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:9px 6px;border-bottom:1px solid var(--linje)}
th{font-size:11px;text-transform:uppercase;letter-spacing:var(--sp-caps);color:var(--daempet);
  font-weight:var(--v-halv)}
.rang{width:28px;height:28px;border-radius:9px;display:flex;align-items:center;
  justify-content:center;font-size:12px;font-weight:var(--v-fed);background:var(--chip);
  color:var(--daempet);font-variant-numeric:tabular-nums}
.rang.g1{background:var(--roed);color:#fff}
.rang.g2{background:var(--blaek2);color:#fff}
.rang.g3{background:var(--advar);color:#fff}

/* ── udkald i gang. Fire tilstande: to kvitterede, to udledte.
   Stribens farve betyder status — det er den eneste grund til at have den. */
.pers.u{border-left:4px solid var(--linje2);transition:background .25s,border-color .25s}
.pers.u .navn{font-weight:var(--v-halv)}
.u.groen{border-left-color:var(--ok);background:#F2F8F4}
.u.roed{border-left-color:var(--roed);background:#FCF3F2}
.u.gul{border-left-color:var(--advar);background:#FBF6EA}
.u.graa{border-left-color:var(--linje2);opacity:.5}

.ustat{text-align:right;flex:0 0 auto}
.ustat .mrk{display:block;font-size:10px;font-weight:var(--v-fed);letter-spacing:var(--sp-caps)}
.ustat .ur{display:block;font-size:11px;color:var(--daempet);font-variant-numeric:tabular-nums;
  margin-top:2px}
.u.groen .mrk{color:var(--ok)}
.u.roed .mrk{color:var(--roed)}
.u.gul .mrk{color:var(--advar)}
.u.graa .mrk{color:var(--daempet)}

/* Hold-beregneren bliver hængende i bunden, så den kan læses uden at rulle. */
.beregner{position:sticky;bottom:8px;margin-top:14px;padding:12px 14px;
  background:var(--kort);border:1px solid var(--linje);border-radius:16px;display:grid;gap:8px}
.beregner.blink{animation:puls 1.4s ease-in-out infinite}
@keyframes puls{
  0%,100%{border-color:var(--linje)}
  50%{border-color:var(--roed)}
}
@media (prefers-reduced-motion:reduce){.beregner.blink{animation:none;border-color:var(--roed)}}

/* Et hul skal lukkes i god tid — advarselsfarve, ikke alarmrød. */
.kort.hul{border-left:4px solid var(--advar)}

@supports (padding:env(safe-area-inset-bottom)){
  body{padding-bottom:calc(82px + env(safe-area-inset-bottom))}
  .faner{padding-bottom:calc(10px + env(safe-area-inset-bottom))}
}

/* ── Garagen, efter mockup side 5.
   Ét tal øverst der svarer på spørgsmålet "kan vi stille?", derefter grupperne
   som nøgterne lister. Ingen kasse om noget der ikke kan trykkes på. */
.opsum{padding:16px}
.stort{font-size:44px;font-weight:var(--v-fed);line-height:.9;letter-spacing:-.03em;
  flex:0 0 auto;min-width:52px}
/* Aarets tal. Eet tal der fylder kortet, fordi det er hele beskeden. */
.kaempe{font-size:76px;font-weight:var(--v-fed);line-height:1;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums}

.gruppe{margin-top:22px}
.gruppe .sek{margin:0 2px 8px}
.tomrum{padding:14px;text-align:center;font-size:13px;color:var(--daempet);
  border:1px dashed var(--linje2);border-radius:14px;margin-top:8px}

/* Badge i gruppeoverskriften. Rød kun for den der har vagten. */
.badge{font-size:10px;font-weight:var(--v-fed);letter-spacing:var(--sp-caps);
  text-transform:uppercase;color:var(--daempet);background:var(--chip);
  padding:4px 8px;border-radius:99px}
.badge.paa{background:var(--okBg);color:var(--ok)}

/* Pillen i headeren: svaret på om stationen kan afgå lige nu. */
.pille{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:99px;
  font-size:10px;font-weight:var(--v-fed);letter-spacing:var(--sp-caps)}
.pille.ok{background:var(--okBg);color:var(--ok)}
.pille.advar{background:var(--advarBg);color:var(--advar)}
.pille .prik{width:6px;height:6px}

/* ── hjælpeklasser
   Disse stod før som style-attributter direkte i markup. Det virkede ikke:
   sikkerhedspolitikken er style-src 'self' uden 'unsafe-inline', og den dropper
   hver eneste style-attribut uden at fejle. Layoutet faldt fra hinanden i stilhed.
   Står de her, er de både virksomme og til at genbruge. */
.rad6{display:flex;gap:6px}
.ikonrad{display:flex;gap:6px;flex-wrap:wrap}
.g8{gap:8px}
.ombryd6{flex-wrap:wrap;gap:6px}
.hoejre{text-align:right}
.pad8{padding:8px 0}
.pad6{padding:6px 0}
.bryd{word-break:break-all}
.rul{max-height:280px;overflow:auto}
.rul-x{overflow-x:auto}
.kant-roed{border-color:var(--roed)}
.svag{opacity:.6}
.svagere{opacity:.45}

/* ── bemanding gennem ugen. Fjorten felter: syv dage gange to bånd, 06 til 18
   og 18 til 06. Samme opdeling som chipsene på meld fri, så det man vælger og
   det man ser er det samme raster. */
.ugebar{display:flex;gap:4px}
.ugebar i{flex:1;height:58px;border-radius:6px;display:block;background:var(--spor)}
.ugebar i.god{background:var(--ok)}
.ugebar i.knap{background:var(--advar)}
.ugebar i.hul{background:var(--fejl)}
.ugedage{display:flex;margin-top:8px}
.ugedage span{flex:1;text-align:center;font-size:13px;color:var(--daempet);
  font-weight:var(--v-mid)}

/* Dag- og båndvælgeren på meld fri. Chips der er links, ikke afkrydsning,
   fordi advarslen regnes på serveren ved hvert klik. */
.dagvalg{display:flex;gap:8px}
.dagvalg a{flex:1;text-align:center;padding:9px 0;border-radius:12px;
  background:var(--chip);color:var(--blaek2)}
.dagvalg a .d{display:block;font-size:12px;color:var(--daempet)}
.dagvalg a .n{display:block;font-size:17px;font-weight:var(--v-halv);margin-top:2px}
.dagvalg a.paa{background:var(--roed);color:#fff}
.dagvalg a.paa .d{color:rgba(255,255,255,.75)}
.baandvalg{display:flex;gap:8px;margin-top:10px}
.baandvalg a{padding:9px 15px;border-radius:99px;background:var(--chip);
  color:var(--blaek2);font-size:14px;font-weight:var(--v-halv)}
.baandvalg a.paa{background:var(--roed);color:#fff}

.f-roed{color:var(--roed)}
.f-fejl{color:var(--fejl)}
.f-advar{color:var(--advar)}
.f-ok{color:var(--ok)}
.f-daempet{color:var(--daempet)}

/* Stor udgave af initialfeltet, brugt på personsiden. */
.avatar.stor{width:52px;height:52px;flex:0 0 52px;border-radius:17px;font-size:17px}

/* Søjlebredder. En beregnet bredde kan ikke stå i en klasse, og den kan heller
   ikke stå i markup uden at CSP smider den væk. Derfor rundes der til nærmeste
   to procent og vælges en klasse. To procent af en søjle på 300 px er seks
   punkter, altså under det forskelsmålingen registrerer. */
.b0>i{width:0}.b2>i{width:2%}.b4>i{width:4%}.b6>i{width:6%}.b8>i{width:8%}
.b10>i{width:10%}.b12>i{width:12%}.b14>i{width:14%}.b16>i{width:16%}.b18>i{width:18%}
.b20>i{width:20%}.b22>i{width:22%}.b24>i{width:24%}.b26>i{width:26%}.b28>i{width:28%}
.b30>i{width:30%}.b32>i{width:32%}.b34>i{width:34%}.b36>i{width:36%}.b38>i{width:38%}
.b40>i{width:40%}.b42>i{width:42%}.b44>i{width:44%}.b46>i{width:46%}.b48>i{width:48%}
.b50>i{width:50%}.b52>i{width:52%}.b54>i{width:54%}.b56>i{width:56%}.b58>i{width:58%}
.b60>i{width:60%}.b62>i{width:62%}.b64>i{width:64%}.b66>i{width:66%}.b68>i{width:68%}
.b70>i{width:70%}.b72>i{width:72%}.b74>i{width:74%}.b76>i{width:76%}.b78>i{width:78%}
.b80>i{width:80%}.b82>i{width:82%}.b84>i{width:84%}.b86>i{width:86%}.b88>i{width:88%}
.b90>i{width:90%}.b92>i{width:92%}.b94>i{width:94%}.b96>i{width:96%}.b98>i{width:98%}
.b100>i{width:100%}

/* ── ture pr. maaned. Samme grund som soejlebredderne: en beregnet hoejde kan
   ikke staa i markup, saa der rundes til naermeste to procent og vaelges en
   klasse. Tolv maaneder, og de tomme staar som ingenting frem for som nul. */
.maaneder{display:flex;align-items:flex-end;gap:6px;height:150px}
.maaneder .m{flex:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%}
.maaneder .m i{display:block;background:var(--roed);border-radius:4px 4px 0 0;width:100%}
.maanednavne{display:flex;gap:6px;margin-top:8px}
.maanednavne span{flex:1;text-align:center;font-size:13px;color:var(--daempet);
  font-weight:var(--v-mid)}
.hj0>i{height:0%}.hj2>i{height:2%}.hj4>i{height:4%}.hj6>i{height:6%}.hj8>i{height:8%}
.hj10>i{height:10%}.hj12>i{height:12%}.hj14>i{height:14%}.hj16>i{height:16%}.hj18>i{height:18%}
.hj20>i{height:20%}.hj22>i{height:22%}.hj24>i{height:24%}.hj26>i{height:26%}.hj28>i{height:28%}
.hj30>i{height:30%}.hj32>i{height:32%}.hj34>i{height:34%}.hj36>i{height:36%}.hj38>i{height:38%}
.hj40>i{height:40%}.hj42>i{height:42%}.hj44>i{height:44%}.hj46>i{height:46%}.hj48>i{height:48%}
.hj50>i{height:50%}.hj52>i{height:52%}.hj54>i{height:54%}.hj56>i{height:56%}.hj58>i{height:58%}
.hj60>i{height:60%}.hj62>i{height:62%}.hj64>i{height:64%}.hj66>i{height:66%}.hj68>i{height:68%}
.hj70>i{height:70%}.hj72>i{height:72%}.hj74>i{height:74%}.hj76>i{height:76%}.hj78>i{height:78%}
.hj80>i{height:80%}.hj82>i{height:82%}.hj84>i{height:84%}.hj86>i{height:86%}.hj88>i{height:88%}
.hj90>i{height:90%}.hj92>i{height:92%}.hj94>i{height:94%}.hj96>i{height:96%}.hj98>i{height:98%}
.hj100>i{height:100%}

/* ── arket der glider op nedefra.
   En person er ikke en side, det er et opslag man laver midt i noget andet.
   Derfor ligger garagen stadig bagved, daempet, og man er ikke navigeret vaek.
   Bevaegelsen slaas fra ved reduceret bevaegelse, og skud.mjs koerer i den
   tilstand, saa skaermbilledet altid er det samme. */
.skygge{position:fixed;inset:0;background:rgba(25,23,20,.45);z-index:30}
.ark{position:fixed;left:0;right:0;bottom:0;z-index:31;background:var(--kort);
  border-radius:22px 22px 0 0;max-width:520px;margin:0 auto;
  padding:10px 16px calc(20px + env(safe-area-inset-bottom));
  animation:op .28s cubic-bezier(.32,.72,0,1)}
.ark .greb{width:44px;height:5px;border-radius:99px;background:var(--linje2);
  margin:0 auto 16px}
.ark .knapper{display:flex;gap:10px;margin-top:10px}
.ark .knapper a{flex:1;background:var(--chip);border:0;color:var(--blaek)}
@keyframes op{from{transform:translateY(100%)}to{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.ark{animation:none}}