/* ===========================================
   BLOQUEIO DESKTOP (html.is-desktop)
   O app é exclusivo mobile: em desktop esta camada cobre tudo
   e o JS aborta a inicialização (window.IS_MOBILE = false)
   ======================================== */
.desktop-block {
  display: none;
}

html.is-desktop .desktop-block {
  position: fixed;
  inset: 0;
  z-index: var(--z-block);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  padding: var(--space-xl);
  text-align: center;
  background: var(--block-bg);
  color: var(--t-light);
}

html.is-desktop .desktop-block__icon {
  font-size: 6rem;
  color: var(--a-gold);
}

.desktop-block__title {
  font-size: var(--fs-13);
  font-weight: var(--fw-heavy);
  line-height: 1.1;
}

.desktop-block__text {
  max-width: 480px;
  font-size: var(--fs-9);
  line-height: 1.6;
  color: var(--on-green-solid);
}

/* Em desktop, nada do app deve aparecer ou disputar a tela com o bloqueio */
html.is-desktop #loader-global,
html.is-desktop .screen,
html.is-desktop .overlay-dialog {
  display: none !important;
}


/* ===========================================
   CAMADA GLOBAL — Bloqueio de orientação paisagem (mobile)
   No navegador não dá para travar a rotação (screen.orientation.lock exige
   fullscreen); instalado como PWA o manifest "orientation": "portrait" trava
   de verdade e esta tela nunca aparece.
   Acionado pela classe `html.is-landscape`, definida em JS (app.js) a partir da
   orientação REAL do dispositivo. Antes era um `@media (orientation: landscape)
   and (max-height: 500px)` puro em CSS, mas ao abrir o teclado virtual a altura
   da viewport encolhia abaixo da largura e o CSS reportava "landscape" MESMO em
   retrato — a tela de bloqueio cobria o cadastro ao digitar o nome. A detecção
   por JS (Screen Orientation API) não é enganada pelo teclado.
   ======================================== */
.rotate-block {
  display: none;
}

html.is-landscape:not(.is-desktop) .rotate-block {
  position: fixed;
  inset: 0;
  z-index: var(--z-block);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-lg);
  text-align: center;
  background: var(--block-bg);
  color: var(--t-light);
}

/* Em paisagem, nada do app deve aparecer ou disputar a tela com o bloqueio */
html.is-landscape:not(.is-desktop) #loader-global,
html.is-landscape:not(.is-desktop) .screen,
html.is-landscape:not(.is-desktop) .overlay-dialog {
  display: none !important;
}

.rotate-block__icon {
  font-size: 3.5rem;
  color: var(--a-gold);
}

.rotate-block__title {
  font-size: var(--fs-12);
  font-weight: var(--fw-heavy);
  line-height: 1.1;
}

.rotate-block__text {
  max-width: 480px;
  font-size: var(--fs-7);
  line-height: 1.5;
  color: var(--on-green-solid);
}

/* ===========================================
   SOMBRAS DE FRONTEIRA DE SCROLL (.js-scroll-shadows)
   Par de "shades" sticky injetado por app.js (watchScrollShadows) em todo
   container de scroll marcado com a classe: um véu-gradiente acende na borda
   (topo/base) enquanto houver conteúdo continuando sob ela — a MESMA
   linguagem da elevação da action bar do feed. O véu no quase-preto do app
   funciona tanto sobre superfícies claras (gavetas) quanto escuras (cadastro).
   ======================================== */
.scroll-shade {
  position: sticky;
  height: 0;
  flex-shrink: 0;
  z-index: 5;
  pointer-events: none;
}

.scroll-shade--top { top: 0; }
.scroll-shade--bottom { bottom: 0; }

.scroll-shade::after {
  content: '';
  position: absolute;
  /* Sangria lateral: a shade (filho em fluxo) fica presa à caixa de conteúdo,
     recuada pelo padding do container — o véu sangra exatamente o padding
     (--shade-bleed, definido por container) para alcançar as bordas reais,
     sem criar overflow horizontal. */
  left: calc(-1 * var(--shade-bleed, 0px));
  right: calc(-1 * var(--shade-bleed, 0px));
  height: 16px;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.scroll-shade--top::after {
  top: 0;
  background: linear-gradient(to bottom, rgba(var(--p-green-dark-rgb), 0.45), transparent);
}

.scroll-shade--bottom::after {
  bottom: 0;
  background: linear-gradient(to top, rgba(var(--p-green-dark-rgb), 0.45), transparent);
}

.has-scroll-above > .scroll-shade--top::after { opacity: 1; }
.has-scroll-below > .scroll-shade--bottom::after { opacity: 1; }