/* A página «Eu» da criança com abas (student-eu.js; spec 79, dono 17/10/2026). A página inteira, o painel e os blocos
   grandes vêm de student-menu.css; aqui o alto (quem eu sou), as abas, as escolhas da voz e o rodapé com a trava de
   adulto. Navegação (Voltar e abas) com 64 px ou mais; o conteúdo com o alvo da skin, nunca abaixo de 48 px. */
/* A página tem as cores do conteúdo, não as do cabeçalho (o de Grandes é escuro). */
.frame-top-student .account-menu-panel.student-menu {
  background: var(--app-surface, #fffdf6);
  color: var(--app-ink, #1d2b33);
}
.frame-top-student .account-menu.student-eu[open] .account-menu-panel > * {
  width: 100%;
  max-width: 960px;
  margin-inline: auto;
}
.student-eu-top .student-eu-close {
  min-height: 64px;
  min-width: 64px;
}
.student-eu-who.student-menu-who {
  gap: 20px;
  padding: 8px 4px 16px;
  border-bottom: 0;
}
.student-eu-who .student-menu-face {
  width: 96px;
  height: 96px;
  font-size: 56px;
  border: 3px solid var(--app-primary);
}
.student-eu-who b {
  font-family: var(--skin-font-title, inherit);
  font-size: calc(var(--skin-title, 24px) * 1.2);
}
.student-eu-who small {
  font-size: var(--skin-text-small, 16px);
}

/* As abas no alto: ícone e palavra; a aba atual por cor, borda grossa e traço embaixo (nunca só a cor). */
.student-eu-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.frame-top-student .account-menu.student-eu[open] .student-eu-tabs [role='tab'] {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: max(64px, var(--skin-target-big, 64px));
  padding: 6px 10px;
  border: 2px solid var(--app-border, #d6dccf);
  border-radius: var(--skin-radius, 16px);
  background: var(--app-card, #fff);
  color: var(--app-ink);
  font-size: var(--skin-button-text, 18px);
  line-height: 1.15;
}
.frame-top-student .account-menu.student-eu[open] .student-eu-tabs [aria-selected='true'] {
  border: 3px solid var(--app-primary);
  background: var(--app-primary);
  color: #fff;
  text-decoration: underline 3px;
  text-underline-offset: 5px;
}
.student-eu-tab-icon {
  font-size: calc(var(--skin-icon-text, 40px) * 0.6);
  line-height: 1;
}
.student-eu-panel {
  padding: 18px;
  border: 2px solid var(--app-border, #d6dccf);
  border-radius: var(--skin-card-radius, 18px);
  background: var(--app-card, #fff);
}

/* «Voz e legenda»: cada escolha é um grupo de botões grandes, o escolhido marcado por borda e contorno. */
.student-eu-choice {
  margin: 0 0 18px;
  padding: 0;
  border: 0;
}
.student-eu-choice legend {
  margin-bottom: 8px;
  font-weight: 700;
  font-size: var(--skin-text, 18px);
}
.student-eu-options {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.frame-top-student .account-menu.student-eu[open] .student-eu-options button,
.frame-top-student .account-menu.student-eu[open] .student-eu-sample,
.frame-top-student .account-menu.student-eu[open] .student-eu-foot button {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  min-height: max(56px, var(--skin-target, 48px));
  min-width: 120px;
  padding: 8px 18px;
  font-size: var(--skin-button-text, 18px);
}
.student-eu-options button[aria-pressed='true'] {
  border: 3px solid var(--app-primary);
  outline: 3px solid var(--app-primary);
  outline-offset: 2px;
  background: var(--app-selected, var(--app-tint));
  font-weight: 800;
}
.student-eu-hint {
  margin: -6px 0 16px;
  font-size: var(--skin-text-small, 16px);
}

/* O rodapé: «Sair» à vista; «Para adultos» com a conta na frente de Beta aberto e Dê um feedback. */
.student-eu-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--app-border, #d6dccf);
}
.frame-top-student .account-menu.student-eu[open] .student-eu-foot .student-eu-lock {
  border-style: dashed;
  background: transparent;
  font-size: var(--skin-text-small, 16px);
}
.student-eu-gate {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.student-eu-gate-q {
  flex: 1 1 100%;
  margin: 0;
}
.student-eu-gate input {
  width: 6em;
  min-height: max(56px, var(--skin-target, 48px));
  font-size: var(--skin-text, 18px);
  text-align: center;
}
.student-eu-gate-error {
  flex: 1 1 100%;
  margin: 0;
  font-weight: 700;
}
.student-eu-gate-error:empty {
  display: none;
}
.frame-top-student .account-menu.student-eu[open] .student-eu-adult {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
@media (max-width: 640px) {
  .student-eu-tabs {
    grid-template-columns: 1fr;
  }
}
.frame-top-student .account-menu.student-eu[open] .student-eu-foot [data-student-menu]:not(.student-eu-close) {
  flex-direction: row;
  min-height: 64px;
  font-size: var(--skin-button-text, 18px);
}