/* ==========================================================================
   Musik v2 — "Nodearket"
   Fanens egen visuelle identitet: nodepapir, koncertbillet, saeson-stribe.
   Bygget paa Tavlens palette; animationer er transform/opacity only.

   LAEGGES EFTER tavlen.css, app-look.css OG bibliotek.css.
   Modulet laaner bibliotekets faerdige former — .bib-dage, .bib-skifter,
   .bib-knapraekke, .bib-fejl, .bib-forklaring, .bib-hint, .etik og
   .kort input[type=password] — praecis som musik.js goer i dag. To faner
   med hver sin fulde stil er to steder, der glider fra hinanden.

   Alle egne klasser hedder .mv-*. Ingen af dem findes i tavlen.css,
   app-look.css, bibliotek.css eller musik.css (efterproevet). De faa
   navne, der ligner noget bekendt — .mv-dato mod tavlens .dato, .mv-linje2
   mod --linje, .mv-nu2 og .mv-spor2 mod app-look'ens .spor-kort .nu-linje —
   er suffikset med vilje.
   ========================================================================== */

:root{--mviolett:#7A56C2;--mviolett-dyb:#5B3FA3;--mviolett-blod:#F4F0FB}

/* Fanens lys i app-look'ens farvesystem. Uden linjen arver musikfanen
   idag-fanens petrol, og fanens violette identitet staar kun i kortene.
   Samme greb som bibliotek.css bruger til sin rav-fane. */
body[data-appfane="musik"]{--fanefarve:#7A56C2;--fanetint:#F0EBFA;--fanetil:#9A7BD4}

/* indgang — samme svæv som bibliotekets bib-ind (fadeUp staar i tavlen.css) */
.mv-ind{animation:fadeUp .45s cubic-bezier(.16,1,.3,1) both}

/* Den langsomme puls. Den hed foer "blip" — det navn er kun defineret i
   sandkassens egne demo-sider, ikke i appens stilark, saa prikkerne stod
   stille i drift. Her hedder den sit eget navn og foelger med filen. */
@keyframes mvBlip{0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.3);opacity:.6}}

/* ---------- nodebanneret ---------- */
.mv-banner{width:100%;height:70px;display:block;margin:0 0 2px}
.mv-linje{stroke:#DDD5EE;stroke-width:1.6;stroke-linecap:round;
  stroke-dasharray:340;stroke-dashoffset:340;animation:mvLinje .8s ease forwards}
@keyframes mvLinje{to{stroke-dashoffset:0}}
.mv-node{transform-box:fill-box;transform-origin:center;
  animation:mvNode .55s cubic-bezier(.34,1.56,.64,1) both}
@keyframes mvNode{from{transform:translateY(-18px) scale(.4);opacity:0}
  to{transform:none;opacity:1}}

/* ---------- sektionshoveder ---------- */
.mv-sektionshoved{margin:20px 0 8px}

/* ---------- koncertbilletten ---------- */
.mv-billet{position:relative;display:flex;border-radius:18px;margin-top:14px;
  background:linear-gradient(120deg,#fff 55%,#FCFAFF);
  border:1px solid #E9E3F4;overflow:hidden;
  box-shadow:0 14px 32px -18px rgba(91,63,163,.38)}
.mv-stub{flex:none;width:88px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:3px;padding:16px 8px;position:relative;
  background:linear-gradient(160deg,color-mix(in srgb,var(--mvf,#7A56C2) 15%,#fff),
    color-mix(in srgb,var(--mvf,#7A56C2) 28%,#fff));
  border-right:2px dashed color-mix(in srgb,var(--mvf,#7A56C2) 38%,#fff)}
/* Perforeringens huller skal have SIDENS farve, ikke en fast graa. Den
   staar i --bg (tavlen.css). app-look'ens levende baggrund toner en anelse
   hen over den, saa hullerne er en tilnaermelse — men en, der foelger temaet
   i stedet for at ligge fast. */
.mv-stub::before,.mv-stub::after{content:"";position:absolute;right:-8px;width:14px;
  height:14px;border-radius:50%;background:var(--bg,#F2F6F6)}
.mv-stub::before{top:-7px}
.mv-stub::after{bottom:-7px}
.mv-stub-dag{font-weight:800;font-size:15px;letter-spacing:.07em;
  color:color-mix(in srgb,var(--mvf,#7A56C2) 78%,#20282A)}
.mv-stub-kl{font-family:'Spline Sans Mono',ui-monospace,monospace;font-size:11px;
  color:color-mix(in srgb,var(--mvf,#7A56C2) 62%,#20282A)}
/* Er der ingen tid endnu, staar der et nodetegn — ikke et opdigtet
   saesonnummer. */
.mv-stub-node{font-size:26px;line-height:1;
  color:color-mix(in srgb,var(--mvf,#7A56C2) 70%,#20282A);opacity:.75}
.mv-hoveddel{flex:1;min-width:0;padding:15px 18px 14px}
.mv-eyebrow{font-family:'Spline Sans Mono',ui-monospace,monospace;font-size:9.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--svag,#6E8487)}
.mv-fag{font-size:21px;font-weight:800;letter-spacing:-.01em;margin-top:4px}
.mv-bmeta{font-size:12.5px;color:var(--daemp,#52686B);margin-top:3px}
/* Skolens egen tid, skrevet som skolen skrev den. Der stod foer en udregnet
   nedtaelling her ("om 3 dage"); den er taget ud, fordi ingenting i
   /api/musik siger, hvornaar saesonen koerer. Se musik-v2-klar.js. */
.mv-om{display:inline-flex;align-items:center;gap:7px;margin-top:10px;
  background:color-mix(in srgb,var(--mvf,#7A56C2) 10%,#fff);
  border:1px solid color-mix(in srgb,var(--mvf,#7A56C2) 24%,#fff);
  color:color-mix(in srgb,var(--mvf,#7A56C2) 72%,#20282A);
  font-size:12px;font-weight:700;padding:4px 11px;border-radius:999px}
.mv-om-prik{width:7px;height:7px;border-radius:50%;background:var(--mvf,#7A56C2);
  animation:mvBlip 2s ease-in-out infinite}
.mv-om-dato{font-family:'Spline Sans Mono',ui-monospace,monospace;font-size:9.5px;
  font-weight:400;opacity:.75;margin-left:2px}
.mv-uaftalt{margin-top:10px;font-size:12.5px;font-style:italic;color:var(--daemp,#52686B)}

/* color-mix er nyt nok til at aeldre browsere ikke kender det. Uden
   reservefarver ville billettens stub staa uden baggrund og tiden uden
   ramme — laesbart, men fladt. Samme greb som .bib-ejer i bibliotek.css. */
@supports not (background: color-mix(in srgb, red 10%, white)){
  .mv-stub{background:var(--mviolett-blod);border-right-color:#D9CEEF}
  .mv-stub-dag{color:var(--mviolett-dyb)}
  .mv-stub-kl,.mv-stub-node{color:var(--mviolett)}
  .mv-om{background:var(--mviolett-blod);border-color:#E0D7F2;color:var(--mviolett-dyb)}
}

/* ---------- medaljon ---------- */
.mv-medaljon{width:34px;height:34px;border-radius:50%;color:#fff;flex:none;
  display:grid;place-items:center;font-weight:800;font-size:15px}
/* Elevnavnet kan mangle. Da faar medaljonen et nodetegn i stedet for et
   bogstav — aldrig et gaet paa, hvem det er. */
.mv-medaljon.mv-anonym{font-size:18px;font-weight:400;opacity:.85}

/* ---------- betaling (saesonens rater) ---------- */
.mv-rate{margin-top:8px}
.mv-rate-top{display:flex;align-items:center;gap:12px}
.mv-rate-mid{flex:1;min-width:0}
.mv-rate-beloeb{font-size:20px;font-weight:800;letter-spacing:-.01em}
.mv-fremgang{height:7px;border-radius:99px;background:rgba(122,86,194,.13);
  margin-top:12px;overflow:hidden}
.mv-fremgang span{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,#9A7BD4,#7A56C2);
  transition:width .9s cubic-bezier(.22,1,.36,1)}
.mv-rate-fod{margin-top:9px;font-family:'Spline Sans Mono',ui-monospace,monospace;
  font-size:9.5px;color:var(--svag,#6E8487)}

/* ---------- der hentes ---------- */
.mv-henter{margin-top:14px}
.mv-henter b{font-size:15px}
.mv-henter .lille{margin-top:3px}
/* Ubestemt stribe: vi ved ikke, hvor lang tid musikskolen er om det, saa
   striben lover ikke en procent. */
.mv-venter-stribe span{width:38%;transition:none;animation:mvSkub 1.3s
  cubic-bezier(.45,0,.55,1) infinite}
@keyframes mvSkub{from{transform:translateX(-110%)}to{transform:translateX(300%)}}

/* ---------- fag-kort ---------- */
.mv-fagkort{border-top:3px solid var(--mvf,#7A56C2);margin-top:10px}
.mv-faghoved{display:flex;align-items:center;gap:11px;margin-bottom:4px}
.mv-faghoved h2{margin:0;font-size:16px;font-weight:800}
/* Et barn kan gaa til flere fag. Uden en skillelinje loeb de sammen. */
.mv-fagblok+.mv-fagblok{margin-top:12px;padding-top:11px;
  border-top:1px solid #EFEAF8}
.mv-fagnavn{font-size:15px;font-weight:700;margin-bottom:2px}
.mv-fakta{margin-top:2px}
.mv-linje2{display:flex;align-items:baseline;gap:10px;padding:7px 0;
  border-bottom:1px dotted #E5DFF0}
.mv-linje2:last-child{border-bottom:0}
.mv-linje2 span{font-family:'Spline Sans Mono',ui-monospace,monospace;font-size:9.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--svag,#6E8487)}
.mv-linje2 b{margin-left:auto;font-size:13px;font-weight:600;text-align:right}
/* "aftales med underviseren" er en NORMAL tilstand ved saesonstart, ikke en
   mangel. Derfor daempet og uden advarselsfarve. */
.mv-linje2 b.mv-rolig{font-weight:500;font-style:italic;color:var(--daemp,#52686B)}

/* ---------- lærer-visitkort ---------- */
.mv-laererkort{display:flex;align-items:center;gap:12px;margin-top:8px}
.mv-laerer-mid{flex:1;min-width:0}
.mv-laerer-navn{font-size:14.5px;font-weight:700}
.mv-ring{display:inline-flex;align-items:center;gap:6px;flex:none;
  background:#16565C;color:#fff;font-size:12.5px;font-weight:700;
  padding:8px 15px;border-radius:999px;text-decoration:none;
  transition:transform .18s ease,box-shadow .18s ease}
.mv-ring:hover{transform:translateY(-1px);
  box-shadow:0 8px 18px -8px rgba(22,86,92,.55);text-decoration:none;color:#fff}
.mv-ring:active{transform:scale(.96)}

/* ---------- noter (beskeder/nyheder) ---------- */
.mv-noter{margin-top:8px}
.mv-note{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid #F0EBF8}
.mv-note:last-child{border-bottom:0}
.mv-dato{flex:none;width:42px;text-align:center;background:var(--mviolett-blod);
  border:1px solid #E9E2F5;border-radius:10px;padding:5px 0;height:fit-content}
.mv-dato b{display:block;font-size:16px;line-height:1.1}
.mv-dato span{font-family:'Spline Sans Mono',ui-monospace,monospace;font-size:9.5px;
  text-transform:uppercase;letter-spacing:.08em;color:var(--mviolett)}
/* Kunne datoen ikke laeses af skolens tekst, staar feltet tomt — ikke med
   et gaet. */
.mv-udato{display:block;font-size:16px;line-height:1.1;color:var(--svagest,#8CA0A3)}
.mv-note-mid{flex:1;min-width:0}
.mv-note-emne{font-weight:650;font-size:14px}
.mv-nyhed{font-family:'Spline Sans Mono',ui-monospace,monospace;font-size:9.5px;
  text-transform:uppercase;letter-spacing:.1em;background:#EFE9F9;color:#6B4FAF;
  padding:2px 7px;border-radius:99px;margin-left:8px;vertical-align:2px}
.mv-note-tekst{font-size:12.5px;color:var(--daemp,#52686B);margin-top:2px}
.mv-note-ejer{font-size:11px;font-weight:700;margin-top:4px}
/* Den udfoldede besked. white-space:pre-wrap holder skolens egne
   afsnit — uden den blev en hel mail til én lang klump. */
.mv-kan{cursor:pointer}
.mv-note-hel{font-size:13.5px;line-height:1.5;margin-top:6px;
  white-space:pre-wrap;word-break:break-word}
.mv-note-fra{font-size:11.5px;color:var(--daemp,#52686B);margin-top:6px}
.mv-note-filer{font-size:12px;margin-top:6px}
/* Aflyste og flyttede timer. Roed for aflyst, gul for flyttet — de to
   kraever hver sin handling: bliv hjemme, eller kom paa et andet
   tidspunkt. Samme farve til begge ville vaere at slaa dem sammen. */
.mv-aflyst{border-left:3px solid #C0392B}
.mv-maerke{font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;margin-left:8px;padding:2px 7px;border-radius:99px;
  vertical-align:middle}
.mv-maerke.aflyst{background:#FCEAE7;color:#A8341F}
.mv-maerke.flyttet{background:#FDF3E3;color:#8A5A10}
.mv-note-mere{font-size:12px;font-weight:650;color:#7A56C2;margin-top:6px}

/* ---------- sæson-striben ---------- */
.mv-stribe{margin:6px 0 10px}
.mv-spor2{position:relative;height:20px;border-radius:99px;
  background:rgba(122,86,194,.09)}
.mv-ferieblok{position:absolute;top:3px;bottom:3px;border-radius:99px;
  background:linear-gradient(180deg,#9A7BD4,#7A56C2)}
.mv-nu2{position:absolute;top:-3px;bottom:-3px;width:2px;border-radius:2px;
  background:#B4690E;z-index:2}
.mv-nu2 i{position:absolute;top:-4px;left:-3px;width:8px;height:8px;
  border-radius:50%;background:#B4690E;animation:mvBlip 1.8s ease-in-out infinite}
.mv-mdr{position:relative;height:14px;margin-top:5px}
.mv-mdr span{position:absolute;transform:translateX(-50%);
  font-family:'Spline Sans Mono',ui-monospace,monospace;font-size:9.5px;
  color:var(--svagest,#8CA0A3)}
.mv-mdr span:first-child{transform:none}
.mv-ferie{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid #F0EBF8;
  align-items:baseline}
.mv-ferie:last-child{border-bottom:0}
.mv-ferie>span:first-child{flex:1;min-width:0;font-weight:600;font-size:13.5px}
.mv-ferie .lille{flex:none;white-space:nowrap}

/* ---------- tilslut-forloebet ----------
   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 skolen. */
.mv-venter[disabled]{opacity:.55;cursor:progress}

/* ---------- tilgængelighed og iPad-trappen ---------- */
@media (prefers-reduced-motion:reduce){
  .mv-linje,.mv-node,.mv-ind{animation:none}
  .mv-fremgang span{transition:none}
  .mv-om-prik,.mv-nu2 i,.mv-venter-stribe span{animation:none}
  .mv-venter-stribe span{width:100%;opacity:.45}
  .mv-ring{transition:none}
}