/* =====================================================================
   LIQUID GLASS — base comum das páginas móveis da Hotel Solutions
   (hub, People › A Minha Área, picagem, Manu, praia, perfil) e das
   páginas públicas com o mesmo visual (login, registo, convite,
   palavra-passe, termos, privacidade).

   Uma só fonte para cores, materiais, forma, tipo e componentes: cada
   página só acrescenta o que é dela. Carrega-se depois de base/layout/
   components (e das folhas de módulo — manu-operacional, people, beach)
   e antes da folha da própria página.

   Regras da casa:
   - Texto sempre em tinta (--g-ink…), nunca no azul-marinho antigo; o
     azul de ação (--g-accent) é só para o que se toca ou está ativo.
   - Etiquetas e texto de apoio com contraste ≥ 4.5:1 sobre o vidro.
   - Controlos em pílula, cartões com 20 px de raio, barras e folhas
     com 22–24 px; uma única sombra por tipo de superfície.
   - Alvos de toque com pelo menos 44 px.
   ===================================================================== */

:root {
  /* Texto */
  --g-ink: #1d1d1f;
  --g-ink-soft: #3a3a3c;
  --g-secondary: #5f5f65;
  --g-tertiary: #6c6c72;
  --g-faint: #a1a1a8;

  /* Ação e estados (texto sobre o vidro ≥ 4.5:1) */
  --g-accent: #0a72e8;
  --g-accent-deep: #0058c7;
  --g-accent-soft: rgba(10, 114, 232, 0.12);
  --g-accent-gradient: linear-gradient(155deg, #0a72e8, #0058c7);
  --g-success: #1e7d37;
  --g-success-soft: rgba(52, 199, 89, 0.16);
  --g-warning: #a65800;
  --g-warning-soft: rgba(255, 149, 0, 0.16);
  --g-danger: #cf2a20;
  --g-danger-soft: rgba(255, 59, 48, 0.12);
  --g-neutral: #55555b;
  --g-neutral-soft: rgba(120, 120, 128, 0.14);

  /* Materiais */
  --g-canvas: #eef0f4;
  --g-surface: rgba(255, 255, 255, 0.74);
  --g-surface-strong: rgba(255, 255, 255, 0.88);
  --g-surface-sheet: rgba(255, 255, 255, 0.96);
  --g-edge: rgba(255, 255, 255, 0.85);
  --g-hairline: rgba(60, 60, 67, 0.12);
  --g-fill: rgba(120, 120, 128, 0.1);
  --g-fill-strong: rgba(120, 120, 128, 0.17);
  --g-blur: blur(28px) saturate(180%);
  --g-backdrop:
    radial-gradient(38% 32% at 12% 8%, rgba(10, 132, 255, 0.22), transparent 70%),
    radial-gradient(34% 30% at 88% 14%, rgba(255, 149, 0, 0.14), transparent 70%),
    radial-gradient(46% 40% at 30% 92%, rgba(48, 209, 88, 0.14), transparent 70%),
    radial-gradient(40% 36% at 92% 88%, rgba(191, 90, 242, 0.14), transparent 70%),
    linear-gradient(180deg, #f7f8fb 0%, #eef0f4 60%, #e7e9ef 100%);

  /* Forma */
  --g-r-card: 20px;
  --g-r-bar: 22px;
  --g-r-sheet: 24px;
  --g-r-field: 14px;

  /* Profundidade: uma sombra por tipo de superfície */
  --g-shadow-card: 0 1px 1px rgba(20, 30, 60, 0.04), 0 14px 32px -24px rgba(20, 30, 60, 0.28);
  --g-shadow-bar: 0 1px 1px rgba(20, 30, 60, 0.04), 0 14px 30px -20px rgba(20, 30, 60, 0.3);
  --g-shadow-float: 0 24px 50px -24px rgba(20, 30, 60, 0.38);
  --g-shadow-primary: 0 10px 22px -12px rgba(0, 88, 199, 0.6);

  /* Espaço */
  --g-gutter: 12px;
  --g-gap: 16px;
  --g-control: 44px;

  /* Tipo */
  --g-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --g-text-caption: 0.6875rem;
  --g-text-footnote: 0.8125rem;
  --g-text-callout: 0.875rem;
  --g-text-body: 0.9375rem;
  --g-text-headline: 1.0625rem;
  --g-text-title: 1.25rem;
  --g-text-display: 1.75rem;

  --g-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (min-width: 641px) {
  :root { --g-gutter: 16px; }
}

/* ---------------------------------------------------------------------
   Tela e superfícies do browser
   --------------------------------------------------------------------- */

html { -webkit-tap-highlight-color: transparent; }

body {
  position: relative;
  background: var(--g-canvas);
  color: var(--g-ink);
  font-family: var(--g-font);
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: -10%;
  z-index: 0;
  background: var(--g-backdrop);
  filter: blur(60px);
  pointer-events: none;
}

::selection { background: rgba(10, 114, 232, 0.2); }

input,
textarea,
select { caret-color: var(--g-accent); }

a { text-underline-offset: 3px; }

:focus-visible {
  outline: 2px solid var(--g-accent);
  outline-offset: 2px;
}

.topbar__title,
.panel__title,
.field__label,
.btn,
.badge { font-family: var(--g-font); }

/* ---------------------------------------------------------------------
   Estrutura das páginas da app (.op): margens iguais em todas, espaço da
   barra de estado e do indicador de início dado pelo próprio contentor.
   --------------------------------------------------------------------- */

.op {
  position: relative;
  z-index: 1;
  background: transparent;
  padding: calc(var(--g-gutter) + env(safe-area-inset-top, 0px)) var(--g-gutter) env(safe-area-inset-bottom, 0px);
}

.op__content {
  padding-left: 0;
  padding-right: 0;
}

.op__scroll { gap: var(--g-gap); }

/* Barra do topo: cartão de vidro flutuante, igual em todas as páginas. */
.op .topbar,
.td-mobile-topbar {
  top: env(safe-area-inset-top, 0px);
  height: auto;
  min-height: 60px;
  gap: var(--sp-3);
  padding: 10px 10px 10px 12px;
  border: 1px solid var(--g-edge);
  border-radius: var(--g-r-bar);
  background: var(--g-surface-strong);
  backdrop-filter: var(--g-blur);
  -webkit-backdrop-filter: var(--g-blur);
  box-shadow: var(--g-shadow-bar);
}

/* Até 640 px o .op é o próprio contentor (overflow: hidden, ver
   manu-operacional.css) e o seu padding já tem o espaço da barra de estado.
   Um cabeçalho sticky conta o top a partir desse padding, por isso o env()
   somava-o outra vez: na app o cabeçalho descia 62 px e tapava o que vem a
   seguir (o seletor de secções do People, o "Nova Tarefa" do Manu). Nas
   páginas em que é o documento que faz scroll (a praia) o top volta a
   contar — ver beach-mobile.css. */
@media (max-width: 640px) {
  .op .topbar { top: 0; }
}

.op__brand-mini {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(20, 30, 60, 0.08), 0 4px 10px -6px rgba(20, 30, 60, 0.3);
}

.op .topbar__title,
.td-mobile-topbar .topbar__title {
  font-size: var(--g-text-title);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.15;
  text-transform: none;
  color: var(--g-ink);
}

.op .topbar__subtitle,
.td-mobile-topbar .topbar__subtitle { color: var(--g-secondary); }

/* Botão de voltar/fechar da barra: círculo de 40 px, o mesmo em todo o lado. */
.op .topbar__toggle,
.td-mobile-topbar .topbar__toggle {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--g-fill);
  color: var(--g-ink-soft);
}

.op .topbar__toggle:hover,
.td-mobile-topbar .topbar__toggle:hover {
  background: var(--g-fill-strong);
  color: var(--g-ink);
}

/* ---------------------------------------------------------------------
   Cartões
   --------------------------------------------------------------------- */

.panel,
.op-panel--framed {
  background: var(--g-surface);
  border: 1px solid var(--g-edge);
  border-radius: var(--g-r-card);
  box-shadow: var(--g-shadow-card);
  backdrop-filter: var(--g-blur);
  -webkit-backdrop-filter: var(--g-blur);
}

.panel__header,
.op-panel--framed .panel__header {
  min-height: 52px;
  gap: 10px;
  padding: 12px 16px;
  background: transparent;
  border-bottom: 1px solid var(--g-hairline);
}

.panel__header .icon,
.op-panel--framed .panel__header > .icon {
  width: 18px;
  height: 18px;
  color: var(--g-accent);
}

.panel__title,
.op-panel--framed .panel__title {
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: -0.012em;
  color: var(--g-ink);
}

.panel__meta { color: var(--g-secondary); }

.panel__body { padding: 16px; }
.panel__body--flush { padding: 0; }

.panel__footer {
  background: transparent;
  border-top: 1px solid var(--g-hairline);
  color: var(--g-secondary);
}

/* ---------------------------------------------------------------------
   Seletor de secções (controlo segmentado), igual em todas as páginas.
   Com muitas secções (People › A Minha Área) desliza na horizontal: a
   página põe .has-more-left/.has-more-right e a ponta desse lado
   esbate-se, a mostrar que há mais.
   --------------------------------------------------------------------- */

.beach-tabs {
  display: flex;
  flex-shrink: 0;
  flex-wrap: nowrap;
  width: auto;
  max-width: 100%;
  gap: 2px;
  margin: 0;
  padding: 3px;
  overflow-x: auto;
  border-radius: 999px;
  background: var(--g-fill);
  scrollbar-width: none;
}

.beach-tabs::-webkit-scrollbar { display: none; }

.beach-tabs__item {
  flex: 1 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--g-secondary);
  font-size: var(--g-text-footnote);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}

.beach-tabs__item:hover { color: var(--g-ink); }

.beach-tabs__item.is-active {
  background: var(--g-surface-sheet);
  color: var(--g-ink);
  box-shadow: 0 1px 2px rgba(20, 30, 60, 0.08), 0 4px 12px -6px rgba(20, 30, 60, 0.3);
}

.beach-tabs__item span { white-space: nowrap; }

.beach-tabs.has-more-right {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
}

.beach-tabs.has-more-left {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px);
  mask-image: linear-gradient(90deg, transparent, #000 36px);
}

.beach-tabs.has-more-left.has-more-right {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent);
}

/* ---------------------------------------------------------------------
   Botões
   --------------------------------------------------------------------- */

.btn {
  height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: var(--g-text-callout);
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast), filter var(--t-fast);
}

.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn--sm {
  height: 32px;
  padding: 0 14px;
  font-size: var(--g-text-footnote);
}

.btn--primary {
  border-color: transparent;
  background: var(--g-accent-gradient);
  color: #fff;
  box-shadow: var(--g-shadow-primary);
}

.btn--primary:hover {
  background: var(--g-accent-gradient);
  filter: brightness(1.07);
}

.btn--accent,
.btn--outline {
  border-color: var(--g-hairline);
  background: var(--g-surface-strong);
  color: var(--g-ink-soft);
  box-shadow: none;
}

.btn--accent:hover,
.btn--outline:hover {
  border-color: rgba(60, 60, 67, 0.2);
  background: #fff;
  color: var(--g-ink);
}

.btn--ghost {
  background: transparent;
  color: var(--g-accent);
}

.btn--ghost:hover {
  background: var(--g-accent-soft);
  color: var(--g-accent-deep);
}

.btn--danger {
  background: var(--g-danger-soft);
  color: var(--g-danger);
}

.btn--danger:hover { background: rgba(255, 59, 48, 0.18); }

.btn--danger-solid {
  background: var(--g-danger);
  color: #fff;
}

.btn--warning {
  background: var(--g-warning-soft);
  color: var(--g-warning);
}

.btn-icon {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: var(--g-fill);
  color: var(--g-ink-soft);
}

.btn-icon:hover {
  border-color: transparent;
  background: var(--g-fill-strong);
  color: var(--g-ink);
}

.btn-icon--bare {
  width: 32px;
  height: 32px;
  background: transparent;
}

.btn-icon--primary {
  background: var(--g-accent-gradient);
  color: #fff;
  box-shadow: var(--g-shadow-primary);
}

.btn-icon--primary:hover {
  background: var(--g-accent-gradient);
  color: #fff;
  filter: brightness(1.07);
}

@media (pointer: coarse) {
  .btn { min-height: var(--g-control); }
  .btn--sm { min-height: 36px; }
  .btn-icon:not(.btn-icon--bare) { width: var(--g-control); height: var(--g-control); }
}

/* ---------------------------------------------------------------------
   Campos (16 px: abaixo disso o iPhone faz zoom ao tocar)
   --------------------------------------------------------------------- */

.field { gap: 6px; }

.field__label {
  font-size: var(--g-text-caption);
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--g-tertiary);
}

.field__hint {
  color: var(--g-secondary);
  font-size: var(--g-text-footnote);
}

.input,
.select,
.date-field__trigger {
  height: var(--g-control);
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 999px;
  background-color: var(--g-fill);
  font-size: 1rem;
  color: var(--g-ink);
}

.select { padding-right: 40px; background-position: right 14px center; }

.textarea {
  padding: 12px 16px;
  border: 1px solid transparent;
  border-radius: var(--g-r-field);
  background-color: var(--g-fill);
  font-size: 1rem;
  color: var(--g-ink);
}

.input::placeholder,
.textarea::placeholder {
  color: var(--g-tertiary);
  opacity: 1;
}

.input:hover,
.select:hover,
.textarea:hover,
.date-field__trigger:hover { border-color: var(--g-hairline); }

.input:focus,
.select:focus,
.textarea:focus,
.date-field__trigger.is-open,
.date-field__trigger:focus-visible {
  outline: none;
  border-color: var(--g-accent);
  background-color: #fff;
  box-shadow: 0 0 0 4px var(--g-accent-soft);
}

.input:disabled,
.select:disabled {
  background-color: var(--g-fill);
  color: var(--g-secondary);
  opacity: 1;
}

.date-field__value[data-empty="true"] { color: var(--g-tertiary); }
.date-field__icon { color: var(--g-secondary); }

.date-field__panel {
  border: 1px solid var(--g-edge);
  border-radius: var(--g-r-card);
  background: var(--g-surface-sheet);
  backdrop-filter: var(--g-blur);
  -webkit-backdrop-filter: var(--g-blur);
  box-shadow: var(--g-shadow-float);
}

input[type="checkbox"] {
  border-color: rgba(60, 60, 67, 0.3);
  border-radius: 6px;
  background: #fff;
}

input[type="checkbox"]:hover { border-color: var(--g-accent); }

input[type="checkbox"]:checked {
  background: var(--g-accent);
  border-color: var(--g-accent);
}

/* ---------------------------------------------------------------------
   Etiquetas de estado e prioridade: uma só forma (pílula de 24 px)
   --------------------------------------------------------------------- */

.badge,
.prio,
.op-task__tags .prio,
.op-task__tags .op-task__flag,
.op-task__tags .op-task__state,
.op-task__state {
  flex: 0 0 auto;
  min-width: 0;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
}

.badge::before {
  width: 6px;
  height: 6px;
}

.badge--neutral,
.op-task__state--pending { background: var(--g-neutral-soft); color: var(--g-neutral); }
.badge--info,
.op-task__flag--ext { background: var(--g-accent-soft); color: var(--g-accent-deep); }
.badge--success,
.prio--low,
.op-task__state--running { background: var(--g-success-soft); color: var(--g-success); }
.badge--warning,
.prio--mid,
.op-task__state--paused { background: var(--g-warning-soft); color: var(--g-warning); }
.badge--danger,
.prio--high,
.op-task__flag--late { background: var(--g-danger-soft); color: var(--g-danger); }

/* ---------------------------------------------------------------------
   Listas de tarefas (Manu): linhas dentro do cartão, não cartões dentro
   de cartões.
   --------------------------------------------------------------------- */

.op-panel--framed .panel__body { padding: 0 16px; }

.op-panel--framed .op__task-list { gap: 0; }

.op-panel--framed .op-task,
.op-panel--framed .op-task--rich {
  gap: var(--sp-3);
  padding: 14px 0;
  border: 0;
  border-bottom: 1px solid var(--g-hairline);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.op-panel--framed .op-task:last-child { border-bottom: 0; }

.op-panel--framed a.op-task:hover,
.op-panel--framed button.op-task:hover {
  transform: none;
  box-shadow: none;
}

.op-panel--framed a.op-task:active,
.op-panel--framed button.op-task:active { opacity: 0.6; }

.op-task__main { gap: 4px; }

/* A etiqueta fica do tamanho do texto, mesmo com um título comprido ao lado. */
.op-task__main > .prio,
.op-task__main > .badge { align-self: flex-start; }
.op-task--rich .op-task__main { gap: 6px; }

.op-task__tags {
  flex-wrap: wrap;
  gap: 6px;
}

.op-task__title {
  font-size: var(--g-text-body);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--g-ink);
}

.op-task__meta {
  font-size: var(--g-text-footnote);
  color: var(--g-tertiary);
}

.op-task__person {
  font-size: var(--g-text-footnote);
  font-weight: 500;
  color: var(--g-secondary);
}

.op-task__person .icon,
.op-task__chev,
a.op-task .icon { color: var(--g-faint); }

.op__loading,
.task-detail__empty {
  color: var(--g-secondary);
  font-size: var(--g-text-callout);
}

/* Indicadores (KPI) */
.op__stats { gap: 8px; }

.op-stat {
  gap: 2px;
  padding: 12px 8px;
  border: 1px solid var(--g-edge);
  border-radius: 18px;
  background: var(--g-surface);
  box-shadow: var(--g-shadow-card);
  backdrop-filter: var(--g-blur);
  -webkit-backdrop-filter: var(--g-blur);
}

.op-stat__value {
  font-size: 1.375rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--g-ink);
}

.op-stat__label {
  font-size: 0.65625rem;
  font-weight: 650;
  letter-spacing: 0.05em;
  color: var(--g-tertiary);
}

/* ---------------------------------------------------------------------
   Estados vazios
   --------------------------------------------------------------------- */

.empty { color: var(--g-secondary); }

.empty__icon {
  background: var(--g-fill);
  color: var(--g-tertiary);
}

.empty__title { color: var(--g-ink-soft); }

/* ---------------------------------------------------------------------
   Popups
   --------------------------------------------------------------------- */

.modal {
  background: rgba(10, 18, 34, 0.34);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.modal__dialog {
  border: 1px solid var(--g-edge);
  border-radius: var(--g-r-sheet);
  background: var(--g-surface-sheet);
  box-shadow: var(--g-shadow-float);
  backdrop-filter: var(--g-blur);
  -webkit-backdrop-filter: var(--g-blur);
}

.modal__header,
.modal__header--brand,
.modal__header--danger,
.modal__header--success {
  background: transparent;
  border-bottom: 1px solid var(--g-hairline);
}

.modal__header .modal__title,
.modal__header--brand .modal__title,
.modal__header--danger .modal__title,
.modal__header--success .modal__title {
  font-size: var(--g-text-headline);
  font-weight: 650;
  letter-spacing: -0.015em;
  color: var(--g-ink);
}

.modal__header--brand .icon { color: var(--g-accent); }
.modal__header--danger .icon { color: var(--g-danger); }
.modal__header--success .icon { color: var(--g-success); }

.modal__header .modal__close,
.modal__header--brand .modal__close,
.modal__header--danger .modal__close,
.modal__header--success .modal__close {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--g-fill);
  color: var(--g-ink-soft);
}

.modal__footer {
  background: transparent;
  border-top: 1px solid var(--g-hairline);
}

.modal__error {
  border-radius: 12px;
  background: var(--g-danger-soft);
  color: var(--g-danger);
}

/* Telemóvel: popups centrados, todos com a mesma largura (o ecrã menos
   as margens da página) e sem invadir a barra de estado nem o
   indicador de início. */
@media (max-width: 640px) {
  .modal {
    padding: calc(var(--sp-4) + env(safe-area-inset-top, 0px)) var(--g-gutter) calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
  }

  .modal__dialog,
  .modal__dialog--sm,
  .modal__dialog--lg {
    width: 100%;
    max-width: 100%;
    max-height: calc(100vh - 2 * var(--sp-4) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    max-height: calc(100dvh - 2 * var(--sp-4) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  }
}

/* ---------------------------------------------------------------------
   Chat de equipa: no telemóvel é um botão redondo no canto inferior
   direito (a meio da margem tapava valores e botões das páginas).
   --------------------------------------------------------------------- */

@media (max-width: 768px) {
  .team-chat__tab {
    top: auto;
    right: var(--g-gutter);
    bottom: calc(var(--g-gutter) + env(safe-area-inset-bottom, 0px));
    width: 52px;
    height: 52px;
    transform: none;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    background: var(--g-accent-gradient);
    box-shadow: var(--g-shadow-primary), 0 10px 26px -12px rgba(20, 30, 60, 0.45);
  }

  /* Por baixo dos popups (.modal, z-index 60), que o tapavam em vez de o
     contrário; por cima das barras e do conteúdo. */
  .team-chat__tab { z-index: 55; }

  .team-chat__tab .icon {
    width: 21px;
    height: 21px;
  }

  .team-chat__tab-icon--drawer { display: none; }
  .team-chat__tab-icon--bubble { display: inline-flex; }

  .team-chat__badge { top: -4px; left: auto; right: -4px; transform: none; }

  /* Espaço para o botão não tapar o fim das listas. */
  body:has(.team-chat__tab) .op__scroll,
  body:has(.team-chat__tab) .app__content,
  body:has(.team-chat__tab) .hub__main { padding-bottom: 84px; }
}

/* Sem barras de scroll visíveis nas páginas da app (o conteúdo continua a deslizar). */
.op,
.op * { scrollbar-width: none; }

.op::-webkit-scrollbar,
.op *::-webkit-scrollbar { display: none; }

@media (prefers-reduced-motion: reduce) {
  .modal__dialog,
  .btn,
  .beach-tabs__item { transition: none; }
}