/* ==========================================================================
   SFO — "Eftermiddagstavlen"
   Fanens egen visuelle identitet: statustavlen oeverst, listerne under.
   Bygget paa Tavlens palette; animationer er transform/opacity only.

   LAEGGES EFTER tavlen.css, app-look.css OG bibliotek.css.
   Modulet laaner husets faerdige former — .kort .lille .fod .tom .baand
   .prik .knap .knap.let .chips .chip .etik .bib-skifter .bib-knapraekke
   .sidehoved h1.side h2.gruppe — og til tilslutningen ogsaa .tilbage
   .felt-navn .bib-forklaring .bib-hint .bib-fejl samt bibliotek.css'
   .kort input[type=password], praecis som musik-v2 og sport-v2 goer. To
   faner med hver sin fulde stil er to steder, der glider fra hinanden.

   NAVNE
   * Alle egne selektorer er praefikset .sfo-. Ingen af dem findes i
     tavlen.css, app-look.css, bibliotek.css, onboarding.css eller
     rediger.css (efterproevet). De to navne, der ligner noget bekendt —
     .sfo-raekke mod tavlens .raekke og .sfo-prik mod .baand .prik — er
     praefikset med vilje.
   * Egne keyframes hedder alle sfo* og stoeder ikke ind i de ~55 navne,
     husets oevrige stilark erklaerer. fadeUp kommer fra tavlen.css og
     bruges MED VILJE, saa fanen toner ind som resten af appen.
   * Huset har i forvejen en fejl, hvor navnet "blip" bruges tre steder i
     app-look.css uden at vaere erklaeret nogen steder — de animationer
     staar altsaa stille. Den fejl gentages ikke her, og vi erklaerer
     heller ikke "blip" globalt: det ville taende tre animationer, ingen
     har bedt om, og det hoerer ikke til i SFO-fanens stilark.

   INGEN FREMMEDE SERVERE
   Stilarket henter ingenting: ingen import-regel, ingen adresser, intet
   baggrundsbillede og ingen skrifttype udefra. 'Spline Sans Mono' er
   husets egen, som tavlen.css allerede har indlaest fra static/fonte.

   FARVEN
   Terrakotta. Den er ikke valgt for at vaere ny, men fordi de otte faner,
   der findes i forvejen, har taget petrol, koral, blaa, rav, groen, lilla,
   pink og graa. En SFO-fane, der ligner lektiefanen, er en fane, man
   trykker forkert paa.
   ========================================================================== */

:root{--sfoler:#B3542F;--sfoler-dyb:#8C3F20;--sfoler-blod:#FBF0EA;
  --sfo-kom:#22834A;--sfo-kom-blaek:#1B6B3D;--sfo-hjem:#2F6BC6;
  --sfo-hjem-blaek:#1D4480;--sfo-vent:#9A8352;--sfo-vent-blaek:#6B5A3E}

/* Fanens lys i app-look'ens farvesystem. Uden linjen arver SFO-fanen
   idag-fanens petrol, og fanens identitet staar kun i kortene. Samme greb
   som bibliotek.css bruger til sin rav-fane og musik-v2 til sin violette. */
body[data-appfane="sfo"]{--fanefarve:#B3542F;--fanetint:#F8EAE3;--fanetil:#D98A4E}

/* indgang — samme svaev som resten af huset (fadeUp staar i tavlen.css) */
.sfo-ind{animation:fadeUp .45s cubic-bezier(.16,1,.3,1) both}

/* Den langsomme puls. Den sidder KUN paa prikken ved "Kommet", fordi den
   dér betyder noget: barnet er der lige nu. Alle andre prikker staar
   stille — en tavle, hvor alt blinker, siger ingenting. */
@keyframes sfoBlip{0%,100%{transform:scale(1);opacity:1}
  55%{transform:scale(1.35);opacity:.55}}

/* ==========================================================================
   STATUSTAVLEN — fanens hjerte.
   Den skal kunne laeses paa to sekunder fra den anden side af koekkenet.
   Derfor: store navne, store ord, og farven i pillen som det, oejet finder
   foerst. Alt andet paa siden er mindre end det her med vilje.
   ========================================================================== */
.sfo-tavle{margin-top:12px;padding:18px 18px 14px;
  border-top:3px solid var(--sfoler);
  box-shadow:0 16px 36px -20px rgba(140,63,32,.42)}

/* Overskriften over tavlen siger, HVAD man ser paa — "lige nu" eller
   "sidst vi kunne laese det". De to er ikke det samme, og forskellen skal
   staa, foer man begynder at laese navnene. */
.sfo-et{font-family:'Spline Sans Mono',ui-monospace,monospace;font-size:9.5px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--svag,#6E8487);
  margin-bottom:2px}

.sfo-raekke{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:14px 0;border-top:1px solid var(--linje-let,#EEF3F3)}
.sfo-raekke:first-of-type{border-top:0;padding-top:10px}
.sfo-navnblok{flex:1 1 150px;min-width:0}
.sfo-navn{font-size:21px;font-weight:800;letter-spacing:-.015em;line-height:1.15}
/* Statussen paa almindeligt dansk. Den staar kun, naar svaret er friskt —
   "er i SFO nu" om noget, der er laest i gaar, er ikke en oplysning. */
.sfo-klar{font-size:13.5px;color:var(--daemp,#52686B);margin-top:2px}
/* Ferie og dagens aftale. De forklarer tit selve statussen: et "Ikke
   kommet" paa en fridag er ikke noget at undre sig over. */
.sfo-under{font-size:12.5px;color:var(--svag,#6E8487);margin-top:3px}

/* ---------- selve statuspillen ---------- */
.sfo-status{flex:none;display:inline-flex;align-items:center;gap:9px;
  font-size:16px;font-weight:800;letter-spacing:-.01em;
  padding:9px 18px;border-radius:999px;border:1px solid transparent}
.sfo-prik{width:11px;height:11px;border-radius:50%;flex:none}

/* Kommet: barnet er i SFO. Groen, og prikken aander — det er den eneste
   status, der handler om et NU. */
.sfo-status.kommet{background:#E1F1E7;border-color:#C6E3D1;
  color:var(--sfo-kom-blaek)}
.sfo-status.kommet .sfo-prik{background:var(--sfo-kom);
  animation:sfoBlip 2.4s ease-in-out infinite}

/* Gaaet: barnet er gaaet hjem. Blaa og rolig — det er en oplysning, ikke
   en advarsel, og den skal kunne kendes fra groen paa to meters afstand. */
.sfo-status.gaaet{background:#E4EBFA;border-color:#CBD9F2;
  color:var(--sfo-hjem-blaek)}
.sfo-status.gaaet .sfo-prik{background:var(--sfo-hjem)}

/* Ikke kommet: sand, ikke rav. Om morgenen er det helt normalt, og en
   advarselsfarve ville lyve om, hvad kilden faktisk siger. */
.sfo-status.ikke{background:#F5F1E8;border-color:#E7DFCC;
  color:var(--sfo-vent-blaek)}
.sfo-status.ikke .sfo-prik{background:var(--sfo-vent)}

/* Et ord fra SFOweb, vi ikke kender. Det staar, som det staar, i en
   farve, der ikke paastaar en betydning. */
.sfo-status.andet{background:#EFF3F3;border-color:#E0E7E7;color:#52686B}
.sfo-status.andet .sfo-prik{background:#8CA0A3}

/* Kilden oplyser ingenting. Graat og stille — det er ikke en advarsel,
   det er en aerlig oplysning om, at vi ikke ved det. */
.sfo-status.ukendt{background:#F1F4F4;border-color:#E3E9E9;color:#6E8487;
  font-weight:700}
.sfo-status.ukendt .sfo-prik{background:#C2CFD1}

/* Svaret er gammelt. Saa mister ALLE ord deres farve: et groent "Kommet"
   fra i gaar er ikke en halv sandhed, det er en forkert. Den stiplede
   kant siger, at ordet staar for noget, vi ikke har set i dag. */
.sfo-status.gammel{background:#F4F6F6;border:1px dashed #CBD5D6;color:#6E8487;
  font-weight:700}
.sfo-status.gammel .sfo-prik{background:#C2CFD1}

/* Hele tavlen, naar svaret er gammelt. */
.sfo-tavle.sfo-uklar{border-top-color:#C2CFD1;
  box-shadow:0 10px 26px -20px rgba(23,42,45,.35)}
.sfo-tavle.sfo-uklar .sfo-et{color:var(--advarsel-staerk,#B4690E)}

/* Tavlens fod: hvornaar det her er laest. Den staar ALTID. Et statusord
   uden et laesetidspunkt er ikke en oplysning — kilden saetter ikke selv
   klokkeslaet paa, om barnet er kommet. */
.sfo-tavlefod{margin-top:12px;padding-top:10px;
  border-top:1px solid var(--linje-let,#EEF3F3);
  font-family:'Spline Sans Mono',ui-monospace,monospace;
  font-size:10.5px;line-height:1.6;color:var(--svag,#6E8487)}
.sfo-tavlefod.varsel{color:var(--advarsel-staerk,#B4690E)}

/* ---------- medaljon ---------- */
.sfo-medaljon{width:34px;height:34px;border-radius:50%;color:#fff;flex:none;
  display:grid;place-items:center;font-weight:800;font-size:15px}
.sfo-medaljon.sfo-stor{width:48px;height:48px;font-size:21px}
/* Mangler navnet, staar der ikke et gaet bogstav. */
.sfo-medaljon.sfo-anonym{font-weight:400;opacity:.75}

/* ==========================================================================
   LISTERNE — aftaler, ferie, aktiviteter, beskeder, arrangementer.
   De er sekundaere og ser sekundaere ud.
   ========================================================================== */
.sfo-sektionshoved{margin:20px 0 8px}
.sfo-liste{padding:4px 16px}

.sfo-post{display:flex;gap:13px;padding:12px 0;
  border-top:1px solid var(--linje-let,#EEF3F3)}
.sfo-post:first-of-type{border-top:0}
.sfo-postmid{flex:1;min-width:0}
.sfo-posttitel{font-size:14.5px;font-weight:650;line-height:1.3}
.sfo-postmeta{font-size:12.5px;color:var(--daemp,#52686B);margin-top:2px}
.sfo-postnaar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:5px}

/* datoklodsen — samme greb som musikfanens noter */
.sfo-datochip{flex:none;width:44px;text-align:center;background:var(--sfoler-blod);
  border:1px solid #F0E1D8;border-radius:11px;padding:5px 0;height:fit-content}
.sfo-datochip b{display:block;font-size:17px;line-height:1.1;color:var(--sfoler-dyb)}
.sfo-datochip span{font-family:'Spline Sans Mono',ui-monospace,monospace;
  font-size:9.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--sfoler)}
.sfo-datochip.idag{background:var(--sfoler);border-color:var(--sfoler)}
.sfo-datochip.idag b,.sfo-datochip.idag span{color:#fff}
/* Kunne datoen ikke laeses af kildens tekst, staar feltet tomt — ikke med
   et gaet paa, hvad der stod. */
.sfo-udato{display:block;font-size:17px;line-height:1.1;color:var(--svagest,#8CA0A3)}

.sfo-naar{font-family:'Spline Sans Mono',ui-monospace,monospace;font-size:10px;
  letter-spacing:.06em;color:var(--svag,#6E8487)}
.sfo-naar.idag{color:var(--sfoler-dyb);font-weight:700}

/* Barnets navn paa en post. Kun navnet og barnets farve — der staar aldrig
   et andet barns navn nogen steder i denne fane. */
.sfo-ejer{font-size:11.5px;font-weight:700}

/* ---------- ferie ---------- */
.sfo-ferie{display:flex;align-items:center;gap:12px;padding:12px 0;
  border-top:1px solid var(--linje-let,#EEF3F3)}
.sfo-ferie:first-of-type{border-top:0}
.sfo-feriemid{flex:1;min-width:0}
.sfo-nu{flex:none;font-size:11px;font-weight:700;padding:4px 11px;
  border-radius:999px;background:var(--sfoler-blod);color:var(--sfoler-dyb);
  border:1px solid #F0E1D8}

/* ---------- beskeder ---------- */
.sfo-besked{padding:13px 0;border-top:1px solid var(--linje-let,#EEF3F3)}
.sfo-besked:first-of-type{border-top:0}
/* Afsnit i en besked er skrevet af et menneske og skal blive staaende. */
.sfo-beskedtekst{font-size:13px;line-height:1.55;color:var(--daemp,#52686B);
  margin-top:6px;white-space:pre-wrap;overflow-wrap:anywhere}

/* Der er mere, end der staar. Det skjules ikke — der staar hvor. */
.sfo-flere{margin-top:9px;font-family:'Spline Sans Mono',ui-monospace,monospace;
  font-size:9.5px;letter-spacing:.04em;color:var(--svagest,#8CA0A3)}

/* ---------- fanens fodnote ----------
   Det, Tavlen ikke kan. Den staar hver gang, der er noget at se, saa ingen
   staar og leder efter en knap, der ikke findes. */
.sfo-fodnote{margin-top:22px;padding-top:12px;border-top:1px dashed #DFE7E7;
  font-family:'Spline Sans Mono',ui-monospace,monospace;font-size:10.5px;
  line-height:1.65;color:var(--svag,#6E8487)}

/* ---------- der hentes ---------- */
.sfo-kort{margin-top:12px}
.sfo-kort b{font-size:15px}
.sfo-kort .lille{margin-top:3px}
/* Ubestemt stribe: vi ved ikke, hvor lang tid SFO'en er om det, saa
   striben lover ikke en procent. */
.sfo-stribe{height:7px;border-radius:99px;background:rgba(179,84,47,.12);
  margin-top:14px;overflow:hidden}
.sfo-stribe span{display:block;height:100%;width:38%;border-radius:99px;
  background:linear-gradient(90deg,#D98A4E,var(--sfoler));
  animation:sfoSkub 1.3s cubic-bezier(.45,0,.55,1) infinite}
@keyframes sfoSkub{from{transform:translateX(-110%)}to{transform:translateX(300%)}}

/* ==========================================================================
   TILSLUTNING OG FRAKOBLING
   ========================================================================== */

/* De to baand i formularen. MitID-baandet staar foerst og staar roligt:
   det er ikke en advarsel om noget, familien har gjort, men en oplysning
   om, hvad Tavlen aldrig beder om. */
.sfo-mitid{margin-bottom:12px}
.sfo-forsoeg{margin-bottom:14px}
/* .baand er sat til align-items:center i tavlen.css. Med to linjer tekst
   skal prikken staa ud for den foerste, ikke midt i blokken. */
.sfo-mitid,.sfo-forsoeg{align-items:flex-start}
.sfo-mitid .prik,.sfo-forsoeg .prik{margin-top:5px}

/* tavlen.css styler kun .knap-send[disabled]. Uden linjen her saa knappen
   ud, som om der ikke skete noget, mens loginnet var undervejs — og saa
   trykker man igen. For mange forsoeg kan spaerre adgangen hos kilden. */
.sfo-venter[disabled]{opacity:.55;cursor:progress}

/* Vejen ud. Den skal kunne findes, men den skal ikke raabe: det er ikke
   en handling, nogen skal snuble ind i, mens de leder efter status. */
.sfo-fravalg{margin-top:14px}
.sfo-frakobl{font-size:12.5px;font-weight:600;color:var(--svag,#6E8487);
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:#C7D2D3;transition:color .18s ease}
.sfo-frakobl:hover{color:var(--sfoler-dyb)}

/* Bekraeftelsen. Her staar der praecis, hvad der sker, foer der sendes
   noget — samme greb som sportsfanens bekraeftelse foer et svar. */
.sfo-bekraeft{background:#FCF3E1;border:1px solid #EFDDB6;border-radius:14px;
  padding:13px 15px;animation:sfoPop .3s ease both}
.sfo-bekraeft b{font-size:14px;color:var(--advarsel-blaek,#7A4E0B)}
.sfo-bekraeft-tekst{font-size:12.5px;line-height:1.55;color:#7A4E0B;
  margin-top:4px}
@keyframes sfoPop{from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:none}}

/* ---------- smallere skaerme ----------
   Paa en telefon i portraet faar pillen sin egen linje frem for at
   klemme navnet. Statussen maa ikke blive den, der bliver lille. */
@media (max-width:430px){
  .sfo-tavle{padding:16px 14px 12px}
  .sfo-navn{font-size:19px}
  .sfo-status{font-size:15px;padding:8px 15px}
  .sfo-medaljon.sfo-stor{width:42px;height:42px;font-size:19px}
}

/* ---------- tilgaengelighed ---------- */
@media (prefers-reduced-motion:reduce){
  .sfo-ind,.sfo-bekraeft{animation:none}
  .sfo-status.kommet .sfo-prik{animation:none}
  .sfo-frakobl{transition:none}
  /* Striben bliver staaende som en fyldt bjaelke — den er beskeden om, at
     der sker noget lige nu, og den maa ikke forsvinde helt. */
  .sfo-stribe span{animation:none;width:100%;opacity:.45}
}