/* SCORM-modulafspiller
   Udtrukket fra index.html (linje 367-372 i den oprindelige <style>-blok).
   Raekkefoelgen af <link>-tags i index.html skal bevares - kaskaden afhaenger af den. */

/* ---------- modulafspiller ---------- */
.modal.player-mode .sheet{width:min(1100px,100%);max-height:94vh}
/* Hoejre polstring holder afstand til lukkeknappen.

   .sheet-close er absolut placeret i .sheet og svaever oven paa hovedet, saa
   hovedets indhold skal stoppe foer den. Vaerdien foelger knappens placering
   i modal.css: afstand til kanten + knappens bredde + lidt luft. Aendres
   placeringen der, skal den her med - ellers ligger fuldskaermsknappen og
   statusmaerket under lukkeknappen igen. */
.player-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;
  padding:1.05rem calc(.7rem + 34px + .6rem) 1.05rem 1.4rem;
  border-bottom:1px solid var(--line);background:var(--paper-soft)}
.player-stage{background:#1c1c1c;min-height:65vh;display:flex}
.player-stage .empty{margin:auto;color:#cfccc6}
.player-iframe{border:0;width:100%;height:65vh;background:#fff;display:block}

.player-title{font-size:1.15rem;margin:.35rem 0 0}
.player-head-right{display:flex;align-items:center;gap:.6rem;flex:0 0 auto}

/* ---------- fuldskaerm ----------
   #playerFrame er det element, der fuldskaermes. Se js/scorm/index.js for
   hvorfor det er forfaelderen og ikke iframen selv.

   VIGTIGT om selektorerne herunder: :fullscreen og :-webkit-full-screen staar
   i HVER SIN regel og er IKKE sat sammen med komma. En selektorliste, der
   indeholder én ukendt pseudoklasse, goer HELE reglen ugyldig - saa ville
   Safari droppe reglen for begge, og fuldskaerm ville se i stykker ud netop
   der, hvor praefikset skulle have hjulpet. */
/* IKKE position:relative.

   Frame'en var kortvarigt positioneret, fordi en svaevende exit-knap skulle
   placeres i den. Den knap findes ikke mere, og positioneringen gjorde aktiv
   skade: .sheet-close er ogsaa positioneret med z-index:auto, og to
   positionerede elementer uden z-index males i DOM-raekkefoelge. Frame'en
   staar EFTER lukkeknappen i DOM'en og laa derfor oven paa den - knappen
   kunne ses, men ikke klikkes.

   Uden position males frame'en som et almindeligt blokelement, og den
   positionerede lukkeknap kommer korrekt oeverst. */

.player-frame:fullscreen{width:100vw;height:100vh;background:#1c1c1c;display:flex;flex-direction:column}
.player-frame:-webkit-full-screen{width:100vw;height:100vh;background:#1c1c1c;display:flex;flex-direction:column}

.player-frame:fullscreen .player-stage{flex:1;min-height:0}
.player-frame:-webkit-full-screen .player-stage{flex:1;min-height:0}

.player-frame:fullscreen .player-iframe{height:100%;flex:1}
.player-frame:-webkit-full-screen .player-iframe{height:100%;flex:1}

/* I fuldskaerm bliver hovedet til en slank topbjaelke: kompakt, saa modulet
   faar pladsen, men aldrig oven paa det. Lukkeknappen er ikke med i
   fuldskaerm (den ligger uden for frame'en), saa den ekstra hoejre polstring
   skal vaek igen - ellers staar knappen med et stort tomt felt til hoejre. */
.player-frame:fullscreen .player-head{padding:.55rem 1rem;flex:0 0 auto}
.player-frame:-webkit-full-screen .player-head{padding:.55rem 1rem;flex:0 0 auto}

/* Badges og titel fylder for meget i en topbjaelke. Titlen bliver staaende -
   den fortaeller hvad man ser paa - resten er stoej i fuldskaerm. */
.player-frame:fullscreen .player-head .badges{display:none}
.player-frame:-webkit-full-screen .player-head .badges{display:none}

.player-frame:fullscreen .player-title{margin:0;font-size:1rem}
.player-frame:-webkit-full-screen .player-title{margin:0;font-size:1rem}

.player-frame:fullscreen .player-head{align-items:center}
.player-frame:-webkit-full-screen .player-head{align-items:center}