/* Economy Studio · estilos da camada própria (02/11/2026): tutorial e modo aplicativo.
   Usa os mesmos tokens das telas do Claude Design (--card, --ink, --line, --accent...). */

/* tutorial (driver.js) */
.driver-popover.est-tour {
  background: var(--card, #fff);
  color: var(--ink, #3F4143);
  border: 1px solid var(--line, #E3E5E8);
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(16, 24, 40, .18);
  padding: 18px 18px 14px;
  max-width: min(340px, calc(100vw - 32px));
  font-family: 'DM Sans', system-ui, sans-serif;
}
.driver-popover.est-tour .driver-popover-title { font: 700 16px Sora, sans-serif; color: var(--ink, #3F4143); }
.driver-popover.est-tour .driver-popover-description { font-size: 14px; line-height: 1.55; color: var(--ink2, #6B6E72); margin-top: 6px; }
.driver-popover.est-tour .driver-popover-description b { color: var(--ink, #3F4143); }
.driver-popover.est-tour .driver-popover-progress-text { font-size: 12px; font-weight: 600; color: var(--ink3, #949494); }
.driver-popover.est-tour .driver-popover-footer { margin-top: 14px; }
.driver-popover.est-tour .driver-popover-footer button {
  font: 600 13px 'DM Sans', sans-serif;
  text-shadow: none;
  border-radius: 8px;
  padding: 7px 12px;
  border: 1px solid var(--field, #C9C9C9);
  background: var(--card, #fff);
  color: var(--ink, #3F4143);
}
.driver-popover.est-tour .driver-popover-footer button.driver-popover-next-btn,
.driver-popover.est-tour .driver-popover-footer button.driver-popover-next-btn:hover,
.driver-popover.est-tour .driver-popover-footer button.driver-popover-next-btn:focus { background: var(--act, #006EF0); border-color: var(--act, #006EF0); color: #fff; }
.driver-popover.est-tour .driver-popover-close-btn { color: var(--ink3, #949494); border-radius: 8px; }
.driver-popover.est-tour .driver-popover-close-btn:focus { outline: none; }
.driver-popover.est-tour .driver-popover-close-btn:focus-visible { outline: 2px solid var(--act, #006EF0); outline-offset: -4px; }
.driver-popover.est-tour button:focus-visible { outline: 2px solid var(--act, #006EF0); outline-offset: 2px; }

/* modo aplicativo: "Mais" do celular, com as páginas que não cabem na barra de baixo */
.est-app-mais {
  position: fixed; inset: 0; z-index: 2147482000;
  background: rgba(15, 17, 20, .32);
  display: flex; align-items: flex-end; justify-content: center;
}
.est-app-mais-folha {
  width: 100%; max-width: 560px; max-height: 72dvh; overflow: auto;
  background: var(--card, #fff); border-radius: 16px 16px 0 0;
  padding: 8px 12px calc(16px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 2px;
  box-shadow: 0 -12px 32px rgba(0, 0, 0, .16);
}
.est-app-mais-alca { width: 40px; height: 4px; border-radius: 2px; background: var(--line, #E3E5E8); margin: 4px auto 10px; }
.est-app-mais-folha button {
  min-height: 48px; padding: 0 14px; border: none; border-radius: 10px;
  background: none; text-align: left; cursor: pointer;
  font: 600 15px 'DM Sans', sans-serif; color: var(--ink, #3F4143);
}
.est-app-mais-folha button[aria-current="page"] { background: var(--soft, #F2F4F6); color: var(--accent, #0F766E); }
.est-app-mais-folha button:focus-visible { outline: 2px solid var(--act, #006EF0); outline-offset: -2px; }

@media (prefers-reduced-motion: reduce) {
  .driver-popover, .driver-overlay { transition: none !important; animation: none !important; }
}

/* modo aplicativo: as páginas ficam na barra de baixo (celular) ou à esquerda (computador),
   então a lista de seleção de páginas que cada módulo desenha no celular sobra */
html.est-app select[aria-label="Página do sistema"] { display: none !important; }