/* ==========================================================================
   Sport — "Kampkortet" (Holdsport)
   Kimis stadion-blå identitet, uændret. Statusfarver som i appen
   (grøn/rød/rav), animationer er transform/opacity only.

   Gennemgang mod tavlen.css (og app-look.css / bibliotek.css, som
   tavlen.html indlæser sammen med den):

   * Alle egne selektorer er præfikset .sp2- — ingen af dem findes i
     tavlen.css, app-look.css, bibliotek.css eller onboarding.css.
   * fadeUp kommer fra tavlen.css og bruges MED VILJE, så fanen toner ind
     som resten af appen. Samme for de lånte .kort .lille .fod .tom .baand
     .prik .knap .chips .chip .etik .bib-skifter .bib-knapraekke .sidehoved
     h1.side — de er fælles hus-stil, ikke kollisioner.
   * Kimis udkast animerede .sp2-mangler-prik med `blip`. `blip` er ikke
     defineret nogen steder i de indlæste stylesheets (app-look.css bruger
     navnet tre gange, men ingen fil erklærer det). Prikken stod altså
     stille. Den har nu sin egen sp2blip. Vi erklærer BEVIDST ikke `blip`
     globalt her: det ville tænde tre animationer i app-look.css, som ingen
     har bedt om, og det hører ikke til i sportsfanens stylesheet.
   * .sp2-hvornår hed før med å. Klassenavnet er nu .sp2-hvornaar — samme
     udseende, men uden en ikke-ASCII-klasse, der skal overleve enhver
     kodning på vejen ud. (Koden bruger i forvejen "hvornaar".)
   * @keyframes her hedder alle sp2* og støder ikke ind i de ~50 navne, de
     andre stylesheets erklærer.
   * --spbla/--spdyb/--spgroen/--sproed/--sprav på :root støder ikke ind i
     app-look.css' --spin og --spor.
   ========================================================================== */

:root{--spbla:#2F6BC6;--spdyb:#1D4480;--spgroen:#2F6B52;--sproed:#A8341F;--sprav:#B4690E}

.sp2-ind{animation:fadeUp .45s cubic-bezier(.16,1,.3,1) both}

/* ---------- hero: næste aktivitet (stadion-kortet) ---------- */
.sp2-hero{position:relative;overflow:hidden;border-radius:22px;margin-top:12px;
  padding:20px 22px;color:#fff;
  background:linear-gradient(140deg,var(--spdyb),var(--spbla) 55%,#4C86DC);
  box-shadow:0 18px 38px -18px rgba(29,68,128,.55)}
/* banens striber */
.sp2-hero::before{content:"";position:absolute;inset:0;opacity:.13;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0 46px,rgba(255,255,255,.6) 46px 48px)}
.sp2-hero-et{position:relative;font-family:'Spline Sans Mono',ui-monospace,monospace;
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.sp2-hero-titel{position:relative;font-size:24px;font-weight:800;letter-spacing:-.015em;
  margin-top:6px}
.sp2-hero-meta{position:relative;font-size:13px;color:rgba(255,255,255,.85);margin-top:4px}
.sp2-hero-raekke{position:relative;display:flex;gap:9px;margin-top:13px;flex-wrap:wrap}
.sp2-hero-om{display:inline-flex;align-items:center;gap:7px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);
  color:#fff;font-size:12.5px;font-weight:700;padding:5px 12px;border-radius:999px}
.sp2-hero-om.snart{background:#F2B23E;border-color:#F2B23E;color:#4A3203}
.sp2-hero-svar{font-size:12.5px;font-weight:700;padding:5px 12px;border-radius:999px}
.sp2-hero-svar.tilmeldt{background:rgba(255,255,255,.92);color:var(--spgroen)}
.sp2-hero-svar.afmeldt{background:rgba(255,255,255,.92);color:var(--sproed)}
.sp2-hero-svar.raad{background:rgba(255,255,255,.92);color:#16565C}
.sp2-hero-svar.andet{background:rgba(255,255,255,.92);color:var(--spdyb)}
/* Kilden tilbyder ikke et svar — så ved vi ikke, hvad der står. Det skal
   se anderledes ud end "I mangler at svare", for det er noget andet. */
.sp2-hero-svar.ukendt{background:rgba(255,255,255,.22);
  border:1px solid rgba(255,255,255,.42);color:#fff;font-weight:600}
.sp2-hero-svar.mangler{background:#F2B23E;color:#4A3203;animation:sp2puls 2s ease-in-out infinite}
@keyframes sp2puls{0%,100%{box-shadow:0 0 0 0 rgba(242,178,62,.5)}55%{box-shadow:0 0 0 6px rgba(242,178,62,0)}}

/* ---------- mangler-svar-bjælken ---------- */
.sp2-mangler{display:flex;gap:12px;align-items:flex-start;margin-top:14px;
  background:#FCF3E1;border:1px solid #EFDDB6;border-radius:16px;padding:13px 16px}
.sp2-mangler-prik{width:9px;height:9px;border-radius:50%;background:#C97F16;
  flex:none;margin-top:5px;animation:sp2blip 1.7s ease-in-out infinite}
@keyframes sp2blip{0%,100%{opacity:1;transform:scale(1)}55%{opacity:.45;transform:scale(.82)}}

/* ---------- kampkortet ---------- */
.sp2-kort{margin-top:12px}
/* overstået: stadig læsbart, men det træder et skridt tilbage */
.sp2-kort.forbi{opacity:.72}
.sp2-top{display:flex;gap:12px;align-items:flex-start}
.sp2-dato{flex:none;width:46px;text-align:center;background:#EEF3FC;
  border:1px solid #DCE7F7;border-radius:12px;padding:6px 0}
.sp2-dato b{display:block;font-size:19px;line-height:1.1;color:var(--spdyb)}
.sp2-dato span{font-family:'Spline Sans Mono',ui-monospace,monospace;font-size:9.5px;
  text-transform:uppercase;letter-spacing:.08em;color:var(--spbla)}
.sp2-top-mid{flex:1;min-width:0}
.sp2-type{display:inline-block;font-family:'Spline Sans Mono',ui-monospace,monospace;
  font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  background:#EFF3F3;color:#52686B;padding:2px 8px;border-radius:99px;margin-bottom:4px}
.sp2-type.kamp{background:#E4EDFB;color:var(--spdyb)}
.sp2-titel{font-size:16.5px;font-weight:750;letter-spacing:-.01em}
.sp2-hvornaar{font-size:12.5px;color:var(--daemp,#52686B);margin-top:2px}
.sp2-om{font-family:'Spline Sans Mono',ui-monospace,monospace;font-size:9.5px;
  color:var(--svag,#6E8487);margin-left:7px}
.sp2-pille{flex:none;font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px}
.sp2-pille.tilmeldt{background:#E6F4EB;color:var(--spgroen)}
.sp2-pille.afmeldt{background:#FCE9E6;color:var(--sproed)}
.sp2-pille.raad{background:#E4EFF0;color:#16565C}
.sp2-pille.andet{background:#EEF3FC;color:var(--spdyb)}
/* "Ikke oplyst": grå og stille. Det er ikke en advarsel — det er en
   ærlig oplysning om, at kilden ikke fortæller os noget her. */
.sp2-pille.ukendt{background:#F1F4F4;color:#6E8487;font-weight:600}
.sp2-pille.mangler{background:#FCF3E1;color:var(--advarsel-tekst,#7A4E0B);
  animation:sp2puls2 2.2s ease-in-out infinite}
@keyframes sp2puls2{0%,100%{box-shadow:0 0 0 0 rgba(180,105,14,.35)}55%{box-shadow:0 0 0 5px rgba(180,105,14,0)}}

/* fakta-linjer (hvordan.html-stil) */
.sp2-fakta{margin-top:10px}
.sp2-linje{display:flex;align-items:baseline;gap:10px;padding:6px 0;
  border-bottom:1px dotted #E3E9F2}
.sp2-linje:last-child{border-bottom:0}
.sp2-linje span{font-family:'Spline Sans Mono',ui-monospace,monospace;font-size:9.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--svag,#6E8487)}
.sp2-linje b{margin-left:auto;font-size:13px;font-weight:600;text-align:right}

/* plads-måler */
.sp2-plads{margin-top:10px}
.sp2-plads-tekst{display:flex;justify-content:space-between;gap:10px;font-size:11.5px;
  color:var(--daemp,#52686B);margin-bottom:5px}
.sp2-maal{height:7px;border-radius:99px;background:rgba(47,107,198,.12);overflow:hidden}
.sp2-maal span{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,#5C8EDB,#2F6BC6);
  transition:width .9s cubic-bezier(.22,1,.36,1)}

/* avatar-rækken */
.sp2-avatarer{display:flex;align-items:center;margin-top:12px}
.sp2-av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  font-size:10.5px;font-weight:800;color:#fff;border:2px solid #fff;
  box-shadow:0 1px 4px rgba(23,42,45,.18);margin-left:-7px;
  animation:sp2pop .4s cubic-bezier(.34,1.56,.64,1) both}
.sp2-av:first-child{margin-left:0}
.sp2-av.til{background:var(--spgroen)}
.sp2-av.afm{background:#B98880}
.sp2-av.raad{background:#16565C}
.sp2-av.flere{background:#E3E9E9;color:#52686B}
@keyframes sp2pop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}

.sp2-sehvem{display:inline-block;margin-top:9px;font-size:12.5px;font-weight:600;
  color:var(--accent,#17767E)}
.sp2-folk{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.sp2-folk-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;
  font-weight:600;padding:5px 10px;border-radius:999px;background:#F4F7F7;
  border:1px solid #E5EBEB;animation:sp2pop .35s cubic-bezier(.34,1.56,.64,1) both}
.sp2-folk-chip i{width:7px;height:7px;border-radius:50%}
.sp2-folk-chip.til i{background:var(--spgroen)}
.sp2-folk-chip.afm i{background:var(--sproed)}
.sp2-folk-chip.raad i{background:#16565C}
.sp2-folk-chip em{font-style:normal;font-weight:400;color:var(--svag,#6E8487);font-size:11px}

/* lille bemærkning under listen — fx at tallene er fra før svaret */
.sp2-lille-note{margin-top:8px;font-size:11.5px;line-height:1.45;
  color:var(--svag,#6E8487)}

/* trænerens note */
.sp2-traener{margin-top:12px;background:#FCF6EA;border-left:3px solid #E2B45C;
  border-radius:0 12px 12px 0;padding:10px 13px;font-size:13px;line-height:1.5;
  color:#5A4A26}
.sp2-traener-et{display:block;font-family:'Spline Sans Mono',ui-monospace,monospace;
  font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:#9A7A2E;
  margin-bottom:3px}

/* svar-knapper og bekræftelse */
.sp2-knapper{display:flex;gap:8px;margin-top:13px;flex-wrap:wrap}
.sp2-knap{font-size:13px;font-weight:650;padding:8px 16px;border-radius:999px;
  border:1.5px solid #D5DEDE;background:#fff;color:#2E3D40;
  transition:transform .16s ease,box-shadow .16s ease,border-color .2s}
.sp2-knap:hover{transform:translateY(-1px);box-shadow:0 6px 14px -8px rgba(20,72,77,.35)}
.sp2-knap:active{transform:scale(.95)}
.sp2-knap.primer{background:var(--spbla);border-color:var(--spbla);color:#fff}
.sp2-knap.ja{background:#16565C;border-color:#16565C;color:#fff}
/* mens der sendes på et andet kort: knapperne er der, men de kan ikke bruges */
.sp2-knap[disabled]{opacity:.45;cursor:default}
.sp2-knap[disabled]:hover{transform:none;box-shadow:none}
.sp2-knap[disabled]:active{transform:none}
.sp2-bekraeft{margin-top:13px;background:#FCF3E1;border:1px solid #EFDDB6;
  border-radius:14px;padding:12px 14px;animation:sp2pop .3s ease both}
.sp2-bekraeft-tekst{font-size:12.5px;color:#7A4E0B;margin-top:4px;line-height:1.5}

/* undervejs — to trin: hente muligheder, og sende */
.sp2-sender{display:flex;align-items:center;gap:9px;margin-top:13px;
  border-radius:14px;padding:11px 14px;font-size:13px;font-weight:600;
  background:#EEF3FC;color:var(--spdyb)}
.sp2-spin{width:14px;height:14px;flex:none;border-radius:50%;
  border:2px solid rgba(47,107,198,.25);border-top-color:var(--spbla);
  animation:sp2drej .8s linear infinite}
@keyframes sp2drej{to{transform:rotate(360deg)}}
.sp2-henter{display:flex;align-items:center;gap:10px;justify-content:center;
  padding:30px;color:var(--daemp,#52686B);font-size:13.5px}

/* kvittering — grøn kun når vi har LÆST, at det står der */
.sp2-kvit{display:flex;align-items:flex-start;gap:8px;margin-top:13px;
  border-radius:14px;padding:11px 14px;font-size:13px;font-weight:600;
  line-height:1.45;animation:sp2pop .3s ease both}
.sp2-kvit.ok{background:#E6F4EB;color:var(--spgroen)}
.sp2-kvit.fejl{background:#FCE9E6;color:var(--sproed)}
/* sendt, men vi kunne ikke læse resultatet — hverken grøn eller rød */
.sp2-kvit.uvis{background:#FCF3E1;color:#7A4E0B}
.sp2-kvit-note{font-weight:400;font-size:12.5px;margin-top:3px;opacity:.9}
.sp2-flue{width:17px;height:17px;flex:none;margin-top:1px}
.sp2-flue path{stroke-dasharray:24;stroke-dashoffset:24;animation:sp2flue .5s .1s ease forwards}
@keyframes sp2flue{to{stroke-dashoffset:0}}
.sp2-hent{display:inline-block;margin-top:7px;font-size:12.5px;font-weight:600;
  color:inherit;text-decoration:underline;text-underline-offset:2px}

/* der kan ikke svares: rolig, forklarende — ikke en fejl */
.sp2-lukket{margin-top:13px;background:#F4F7F7;border:1px solid #E5EBEB;
  border-radius:14px;padding:11px 14px;font-size:12.5px;line-height:1.5;
  color:var(--daemp,#52686B)}

/* ---------- tilgængelighed ---------- */
@media (prefers-reduced-motion:reduce){
  .sp2-ind,.sp2-av,.sp2-folk-chip,.sp2-bekraeft,.sp2-kvit{animation:none}
  .sp2-maal span{transition:none}
  .sp2-hero-svar.mangler,.sp2-pille.mangler,.sp2-mangler-prik{animation:none}
  .sp2-flue path{stroke-dashoffset:0;animation:none}
  /* spinneren bliver stående som en prik — men den skal stadig kunne ses,
     for den er beskeden om, at der sker noget lige nu */
  .sp2-spin{animation-duration:2.4s}
  .sp2-knap{transition:none}
  .sp2-knap:hover,.sp2-knap:active{transform:none}
}

/* Holdet, traeneren har skrevet i aktivitetens chat. Se holdsportweb.py:
   Holdsports API har den ikke, og klubben bruger ikke appens egen
   "Udvalgt"-status — chatten er det eneste svar paa "spiller mit barn?" */
.sp2-chat{margin-top:10px;border-radius:14px;padding:12px 13px;
  background:rgba(23,118,126,.06);border:1px solid rgba(23,118,126,.16)}
.sp2-chat-hent{font-size:13px;color:var(--daemp)}
.sp2-chat-m + .sp2-chat-m{margin-top:12px;padding-top:12px;
  border-top:1px solid rgba(23,118,126,.14)}
.sp2-chat-af{font-size:12.5px;font-weight:700;color:#14484D}
.sp2-chat-af span{font-weight:400;color:var(--daemp);margin-left:5px}
/* SOM DEN BLEV SKREVET. "Holdet er:" og ét navn pr. linje skal blive ved
   med at vaere ét navn pr. linje — derfor pre-wrap. */
.sp2-chat-t{white-space:pre-wrap;overflow-wrap:anywhere;
  font-size:14px;line-height:1.5;margin-top:4px}