/* A moldura da plataforma, carregada por último: os tokens que completam as paletas e um bloco por papel (entrada,
   professor, criança). O organizador do cabeçalho e da navegação lateral está em frame.js. */

/* Tokens. --app-line (bordas de controles) e --app-focus (anel de foco) têm contraste de pelo menos 3:1 contra o
   fundo, a superfície e o cartão de cada paleta; --app-accent (marca, 24 px em negrito) também. */
:root {
  --app-soft: #e4ecd8;
  --app-line: #6b8479;
  --app-accent: #4f7d34;
  --app-focus: #8a4a00;
  --app-badge: #fff1c8;
  --app-badge-ink: #5a4310;
  --frame-top: 64px;
  --frame-side: 232px;
  --frame-content: 1200px;
}
:root[data-palette='sky'] {
  --app-soft: #dde8f6;
  --app-line: #687c94;
  --app-accent: #2f6aa8;
  --app-focus: #7a3d8f;
}
:root[data-palette='sunset'] {
  --app-soft: #f6e1d4;
  --app-line: #98766a;
  --app-accent: #b3502c;
  --app-focus: #1f5687;
}
body {
  background: var(--app-background);
}
summary:focus-visible,
textarea:focus-visible,
a:focus-visible {
  outline: 4px solid var(--app-focus);
  outline-offset: 3px;
}
.frame-hidden,
.frame-space > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Base comum: páginas com a rolagem do navegador; só o jogo usa uma superfície própria. */
#app {
  width: calc(100% - 32px);
  max-width: 1180px;
  height: auto;
  min-height: calc(100dvh - 32px);
  margin: 16px auto;
  overflow: visible;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 16px;
  box-shadow: none;
}
.top {
  background: var(--app-card);
}

/* Entrada: página inicial e acesso. */
#app.entry-shell {
  background: var(--app-card);
  border-radius: 24px;
}

/* Cabeçalho de uma linha (os dois papéis). */
.top.frame-top {
  flex-wrap: nowrap;
  gap: 16px;
  padding: 8px 24px;
  border-radius: 15px 15px 0 0;
}
.frame-top .identity {
  flex: 1;
  min-width: 0;
}
.frame-top .identity > span:last-child {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.frame-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.frame-top .frame-space {
  display: flex;
  flex-shrink: 1;
  min-width: 0;
  max-width: 260px;
}
.frame-top .frame-space select {
  min-height: 44px;
  max-width: 100%;
  font-size: 15px;
}

/* Menu de conta (professor) e do avatar (criança). */
.account-menu {
  position: relative;
}
.account-menu > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 8px 16px;
  border: 1px solid var(--app-line);
  border-radius: 14px;
  background: var(--app-card);
  font-weight: 700;
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.account-menu > summary::-webkit-details-marker {
  display: none;
}
.account-menu > summary::after {
  content: '▾';
  font-size: 14px;
}
.account-menu[open] > summary {
  background: var(--app-tint);
}
.account-menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 40;
  display: grid;
  gap: 2px;
  min-width: 264px;
  max-height: calc(100dvh - 96px);
  overflow-y: auto;
  padding: 8px;
  background: var(--app-card);
  border: 1px solid var(--app-line);
  border-radius: 16px;
  box-shadow: 0 16px 40px #1b2a2433;
}
.account-menu-panel > button,
.account-menu-panel > .beta-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--app-ink);
  font-size: 15px;
  text-align: left;
  white-space: nowrap;
}
.account-menu-panel > button:hover:not(:disabled) {
  background: var(--app-tint);
  filter: none;
}
.account-menu-panel > .student-class-switcher {
  max-width: none;
  padding: 8px 14px;
  font-size: 14px;
}
.account-menu-avatar > summary {
  padding: 4px 10px 4px 4px;
}
.account-menu-avatar .account-menu-panel {
  right: auto;
  left: 0;
}

/* Professor: cabeçalho de 64 px, barra lateral e conteúdo centralizado sobre o fundo da paleta. */
#app.teacher-workspace {
  width: 100%;
  max-width: none;
  min-height: 100dvh;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: var(--app-background);
}
.frame-top-teacher.top {
  border-radius: 0;
}
.frame-top-teacher {
  min-height: var(--frame-top);
  border-bottom: 1px solid var(--app-border);
}
.frame-top-teacher .identity small {
  font-size: 14px;
}
/* A lateral ocupa a página inteira (o fundo vai até o fim, mesmo numa página longa); o que está dentro dela fica preso
   no alto da tela ao rolar. */
.frame-body {
  display: grid;
  grid-template-columns: var(--frame-side) minmax(0, 1fr);
  align-items: stretch;
}
.frame-main {
  align-self: start;
}
.frame-side > * {
  position: sticky;
  top: 16px;
}
.frame-side {
  display: grid;
  align-content: start;
  gap: 16px;
  min-height: calc(100dvh - var(--frame-top));
  padding: 18px 14px;
  background: var(--app-card);
  border-right: 1px solid var(--app-border);
}
.frame-side .teacher-nav,
.frame-side .frame-extra {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 2px;
  padding: 0;
  border: 0;
  background: none;
}
.frame-side .frame-extra {
  padding-top: 16px;
  border-top: 1px solid var(--app-border);
}
.frame-side button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border-color: transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--app-ink);
  font-size: 15px;
  font-weight: 700;
  text-align: left;
}
.frame-side button:hover:not(:disabled):not([aria-current='page']) {
  background: var(--app-tint);
  filter: none;
}
/* O item atual (canvas H02): fundo verde-claro do kit e o texto na cor de sempre; o ícone fica na cor primária. */
.frame-side [aria-current='page'] {
  background: var(--app-soft);
  color: var(--app-ink);
}
.frame-side .teacher-nav-icon {
  flex: none;
  color: var(--app-primary);
}
.frame-main {
  min-width: 0;
  padding: 24px clamp(16px, 2.5vw, 32px) 48px;
}
/* O conteúdo fica direto no fundo da página (canvas H02 e P02): sem cartão em volta; os cartões são os da tela. */
.frame-main > .content,
#app.teacher-workspace > .content {
  max-width: var(--frame-content);
  margin-inline: auto;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}
/* O título começa no alto da página, a 24 px do cabeçalho, como no canvas. */
.frame-main > .content > :first-child {
  margin-top: 0;
}
#app.teacher-workspace .badge,
#app.teacher-workspace .eyebrow,
#app.teacher-workspace .beta-badge {
  font-size: 14px;
}
/* Tablet e telefone: a lateral recolhida (teacher-nav.css) e menos respiro em volta do conteúdo. */
@media (max-width: 1023px) {
  .frame-main {
    padding: 16px;
  }
}

/* Criança: cabeçalho de 72 px com o avatar (menu), o nome, ouvir e Aa. */
.frame-top-student {
  min-height: 72px;
}
.frame-top-student .identity .avatar {
  display: none;
}
.frame-top-student .identity b {
  font-size: 17px;
}
@media (max-width: 599px) {
  .top.frame-top {
    flex-wrap: wrap;
    padding: 8px 16px;
  }
  .frame-top .frame-space {
    order: 5;
    max-width: none;
  }
}