/* ==========================================================================
   O leitor do tutorial (partilhado: portal-mondra/ e admin/)
   Um <dialog> com o vídeo do tutorial-portal/ a tocar ao vivo dentro
   de um iframe 16:9, e por baixo os comandos de um leitor: tocar e pausar,
   a barra para andar para trás e para a frente, e o tempo.
   ========================================================================== */

.pm-tutorial {
  /* A largura também se mede pela altura do ecrã: num portátil baixo, o
     vídeo 16:9 mais a barra de cima e os comandos (8rem) têm de caber */
  width: min(100% - 2 * var(--e3), 72rem, (100dvh - 2 * var(--e3) - 8rem) * 16 / 9);
  max-width: none;
  max-height: calc(100dvh - 2 * var(--e3));
  padding: 0;
  border: 0;
  border-radius: var(--e3);
  overflow: hidden;
  background-color: var(--papel);
  color: var(--tinta);
  font-family: var(--f-texto);
  box-shadow: 0 30px 90px rgba(14, 35, 64, 0.45);
}
/* Os botões não herdam a letra sozinhos: sem isto, o balão das marcas
   saía na letra do sistema */
.pm-tutorial button, .pm-tutorial input { font: inherit; }
.pm-tutorial::backdrop { background-color: rgba(14, 35, 64, 0.72); }
.pm-tutorial[open] { animation: pm-tutorial-entra 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes pm-tutorial-entra { from { opacity: 0; transform: translateY(var(--e4)) scale(0.98); } }

.pm-tutorial__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  padding: var(--e2) var(--e2) var(--e2) var(--e4);
}
/* Duas classes: o h2 do site, sozinho, é um título de secção enorme */
.pm-tutorial .pm-tutorial__titulo { margin: 0; font-family: var(--f-titulo); font-size: 1.25rem; font-weight: 400; line-height: 1.3; }
.pm-tutorial__fechar {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--tinta);
  cursor: pointer;
}
.pm-tutorial__fechar:hover { background-color: var(--papel-alt); }
.pm-tutorial__fechar svg { width: 1.25rem; height: 1.25rem; }

.pm-tutorial__ecra { position: relative; aspect-ratio: 16 / 9; background-color: var(--papel-alt); }
.pm-tutorial__ecra iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.pm-tutorial__comandos {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e2) var(--e4);
}
.pm-tutorial__tocar {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 50%;
  background-color: var(--noite);
  color: var(--papel);
  cursor: pointer;
}
.pm-tutorial__tocar svg { width: 1.25rem; height: 1.25rem; }
.pm-tutorial__icone-tocar { display: none; }
.pm-tutorial__tocar.e-parado .pm-tutorial__icone-tocar { display: block; }
.pm-tutorial__tocar.e-parado .pm-tutorial__icone-pausa { display: none; }

.pm-tutorial__barra { flex: 1; min-width: 0; margin: 0; accent-color: var(--laranja-cla); cursor: pointer; }
.pm-tutorial__tempo {
  flex: none;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  color: var(--sec-claro);
}

@media (max-width: 600px) {
  .pm-tutorial__topo { padding-left: var(--e3); }
  .pm-tutorial__comandos { gap: var(--e2); padding: var(--e2) var(--e3); }
}

/* O véu dos saltos e do arranque: da cor do fundo, a desvanecer, com
   uma roda pequena no meio. Fica por cima do iframe, que recarrega por
   baixo sem se ver. */
.pm-tutorial__ecra::after,
.pm-tutorial__ecra::before {
  content: "";
  position: absolute;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.pm-tutorial__ecra::after { inset: 0; background-color: var(--papel); }
.pm-tutorial__ecra::before {
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 2.5rem;
  height: 2.5rem;
  margin: -1.25rem 0 0 -1.25rem;
  border: 3px solid var(--papel-alt);
  border-top-color: var(--laranja-cla);
  border-radius: 50%;
  animation: pm-tutorial-roda 0.8s linear infinite;
}
.pm-tutorial__ecra.e-a-saltar::after,
.pm-tutorial__ecra.e-a-saltar::before,
.pm-tutorial__ecra.e-a-carregar::before { opacity: 1; }
@keyframes pm-tutorial-roda { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .pm-tutorial__ecra::before { animation-duration: 3s; }
}

/* As marcas dos passos, por cima da barra. A pista tem a altura do
   botão de tocar, e o --polegar é metade da bolinha do range: o início
   e o fim da barra ficam a essa distância das pontas. */
.pm-tutorial__pista {
  --polegar: 0.5rem;
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
}
.pm-tutorial__pista { height: 2.75rem; }
/* O range fica por cima, invisível: arrasta-se e usa-se com o teclado */
.pm-tutorial__pista .pm-tutorial__barra { position: relative; z-index: 1; width: 100%; height: 100%; opacity: 0; }
.pm-tutorial__trilho {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 6px;
  margin-top: -3px;
  border-radius: 3px;
  background-color: #D5DCE5;
  pointer-events: none;
}
.pm-tutorial__cheio,
.pm-tutorial__bola { position: absolute; background-color: var(--laranja-cla); }
/* A bola e a parte cheia andam por transform, com uma animação do
   browser posta pelo js/portal.js: corre fora do JavaScript, sem saltos */
.pm-tutorial__cheio {
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  border-radius: inherit;
  transform-origin: left center;
  transform: scaleX(0);
  will-change: transform;
}
.pm-tutorial__bola {
  top: 50%;
  left: var(--polegar);
  width: 1rem;
  height: 1rem;
  margin: -0.5rem 0 0 -0.5rem;
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--papel);
  will-change: transform;
  /* o crescer ao passar o rato vai no scale, à parte do transform da animação */
  transition: scale 0.15s ease;
}
.pm-tutorial__pista:hover .pm-tutorial__bola { scale: 1.2; }
.pm-tutorial__pista:has(.pm-tutorial__barra:focus-visible) .pm-tutorial__trilho { outline: 2px solid var(--noite); outline-offset: 6px; }
.pm-tutorial__marcas { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.pm-tutorial__marca {
  position: absolute;
  top: 50%;
  left: calc(var(--polegar) + (100% - 2 * var(--polegar)) * var(--onde));
  width: var(--e3);
  height: var(--e4);
  margin: calc(var(--e4) / -2) 0 0 calc(var(--e3) / -2);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  pointer-events: auto;
}
/* O traço: um corte da cor do fundo, que se lê sobre a parte cheia e a vazia */
.pm-tutorial__marca::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3px;
  height: 0.75rem;
  transform: translate(-50%, -50%);
  border-radius: 2px;
  background-color: var(--noite);
}
/* O nome do passo, num balão por cima */
.pm-tutorial__marca::after {
  content: attr(data-nome);
  position: absolute;
  left: 50%;
  bottom: calc(100% + var(--e1));
  transform: translate(-50%, var(--e0));
  padding: var(--e0) var(--e2);
  border-radius: var(--e1);
  background-color: var(--noite);
  color: var(--papel);
  font-size: 0.85rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.pm-tutorial__marca:hover::after,
.pm-tutorial__marca:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Ver na horizontal (telemóvel) ----------
   O botão só aparece em ecrãs estreitos ou de toque. Na horizontal o
   leitor ocupa o ecrã todo, sem o título (o vídeo precisa da altura),
   e o vídeo fica do maior tamanho 16:9 que cabe por cima dos comandos.
   Com o telemóvel ao alto, o leitor roda 90 graus: --alto e --largo são
   as medidas do ecrã já rodado. */
.pm-tutorial__rodar {
  display: none;
  flex: none;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 50%;
  background-color: var(--papel-alt);
  color: var(--tinta);
  cursor: pointer;
}
.pm-tutorial__rodar svg { width: 1.35rem; height: 1.35rem; }
.pm-tutorial__rodar.e-ligado { background-color: var(--noite); color: var(--papel); }
@media (max-width: 700px), (hover: none) and (pointer: coarse) {
  .pm-tutorial__rodar { display: grid; }
}

.pm-tutorial.e-horizontal {
  --alto: 100dvh;
  --largo: 100vw;
  --comandos: 3.75rem;
  inset: auto;
  top: 0;
  left: 0;
  width: var(--largo);
  height: var(--alto);
  max-width: none;
  max-height: none;
  margin: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  animation: none;
}
@media (orientation: portrait) {
  .pm-tutorial.e-horizontal {
    --alto: 100vw;
    --largo: 100dvh;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
  }
}
.pm-tutorial.e-horizontal .pm-tutorial__topo { display: none; }
.pm-tutorial.e-horizontal .pm-tutorial__ecra {
  flex: none;
  aspect-ratio: auto;
  height: calc(var(--alto) - var(--comandos));
  width: min(100%, calc((var(--alto) - var(--comandos)) * 16 / 9));
  margin-inline: auto;
}
.pm-tutorial.e-horizontal .pm-tutorial__comandos {
  flex: none;
  height: var(--comandos);
  padding-block: 0;
}