/* As regras das skins do aluno (spec fullstack/63): a mesma tela de hoje, com outra pele. Os tokens de cada skin vêm
   do dado (src/web/skins/<id>.json), que o build transforma em skins/tokens.css, carregado antes desta folha; aqui
   nada conhece o nome de uma skin, só lê os tokens. As regras de student-frame.css também os leem, com o valor de hoje
   como reserva. A skin está em <html data-skin> (student-skin.js), só na área da criança. As cores que a criança
   escolhe (student-palette.js) continuam valendo por cima. As fontes chegam por skins/fonts-<id>.css, só a da skin
   ativa, com Arial enquanto carregam. No teste do professor (:root.skin-preview, skin-preview.js), as fontes e os
   tokens valem só nos diálogos do player. O contraste dos tokens é conferido em tests/api/student-skin.test.mjs. */

/* As fontes: o conteúdo numa, os títulos e os botões na da interface. */
:is(:root.student-workspace[data-skin] :is(#app:not(.entry-shell), dialog), :root.skin-preview[data-skin] dialog) {
  font-family: var(--skin-font-content);
}
:is(:root.student-workspace[data-skin] :is(#app:not(.entry-shell), dialog), :root.skin-preview[data-skin] dialog)
  :is(h1, h2, h3, .brand) {
  font-family: var(--skin-font-title);
}
:is(:root.student-workspace[data-skin] :is(#app:not(.entry-shell), dialog), :root.skin-preview[data-skin] dialog)
  :is(button, summary, .badge, .eyebrow) {
  font-family: var(--skin-font-ui);
  font-weight: var(--skin-weight-ui);
}

/* O cabeçalho, com as cores da skin. */
:root.student-workspace[data-skin] .frame-top-student {
  background: var(--skin-header-bg);
  color: var(--skin-header-ink);
}
:root.student-workspace[data-skin] .frame-top-student :is(.identity, .identity b, .brand) {
  color: var(--skin-header-ink);
}
:root.student-workspace[data-skin] .frame-top-student .brand span {
  color: var(--skin-header-accent);
}

/* Os botões do cabeçalho seguem as cores dele (vazados no cabeçalho escuro, X13). */
:root.student-workspace[data-skin] .frame-top-student :is(.frame-actions > button, .account-menu-button) {
  background: var(--skin-header-button-bg);
  color: var(--skin-header-button-ink);
  border-color: var(--skin-header-button-line);
}
:root.student-workspace[data-skin] .frame-top-student .account-menu-button .avatar {
  background: var(--skin-header-avatar-bg);
  color: var(--skin-header-button-ink);
}

/* Escolher o visual (quando a turma deixa) e o aviso de nível novo. */
.student-skin-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin: 20px 0;
}
.student-skin-options button {
  display: grid;
  gap: 6px;
  justify-items: start;
  text-align: left;
  min-height: 120px;
  border-width: 3px;
}
.student-skin-options button[aria-pressed='true'] {
  border-color: var(--app-primary);
  outline: 4px solid var(--app-primary);
  outline-offset: 2px;
}
.student-skin-options button[aria-disabled='true'] {
  opacity: 0.6;
  cursor: not-allowed;
  border-style: dashed;
}
.student-skin-thumb {
  display: grid;
  grid-template: 14px 8px 28px / 1fr 1fr;
  gap: 4px;
  width: 100%;
  padding: 0 0 6px;
  overflow: hidden;
  border: 1px solid var(--app-border);
  border-radius: 10px;
}
.student-skin-thumb i {
  grid-column: 1 / -1;
}
.student-skin-thumb b {
  grid-column: 1 / -1;
  width: 40%;
  height: 6px;
  margin: 0 6px;
  border-radius: 3px;
  opacity: 0.7;
}
.student-skin-thumb em {
  margin: 0 6px;
}
.student-skin-badge {
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--app-selected, var(--app-soft));
  font-weight: 700;
}
.student-pick .dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.student-pick-error:empty {
  display: none;
}
.student-skin-level {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 50;
  max-width: min(92vw, 560px);
  margin: 0;
  padding: 14px 22px;
  transform: translateX(-50%);
  border: 2px solid var(--app-primary);
  border-radius: var(--skin-radius, 18px);
  background: var(--app-card);
  color: var(--app-ink);
  font-size: var(--skin-text, 18px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  animation: skin-level-in 0.4s ease-out both;
}
@keyframes skin-level-in {
  from {
    opacity: 0;
    transform: translate(-50%, 16px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .student-skin-level,
  :root.student-workspace[data-skin] * {
    animation: none !important;
    transition: none !important;
  }
}

/* A atividade: a ação principal («Continuar», «Conferir») num rodapé fixo do diálogo, que não cobre o conteúdo, e o
   espaço da skin que pede telas mais densas (skin-dense: 1); sem o token, a tela é a de sempre. */
:is(:root.student-workspace[data-skin], :root.skin-preview[data-skin]) #dialog {
  --dn: var(--skin-dense, 0);
  --pad: calc(28px - 12px * var(--dn));
  padding: var(--pad);
}
:is(:root.student-workspace[data-skin], :root.skin-preview[data-skin]) #dialog :is(.dialog-head, .progress) {
  margin-bottom: calc(20px - 12px * var(--dn));
}
:is(:root.student-workspace[data-skin], :root.skin-preview[data-skin]) #dialog .question {
  padding: calc(22px - 8px * var(--dn));
}
:is(:root.student-workspace[data-skin], :root.skin-preview[data-skin]) #dialog .answers {
  gap: calc(12px - 4px * var(--dn));
  margin: calc(18px - 10px * var(--dn)) 0;
}
:is(:root.student-workspace[data-skin], :root.skin-preview[data-skin]) #dialog .actions {
  margin-top: calc(20px - 12px * var(--dn));
}
:is(:root.student-workspace[data-skin], :root.skin-preview[data-skin]) #dialog .actions:has(> .primary) {
  position: sticky;
  bottom: 0;
  z-index: 3;
  margin: calc(20px - 12px * var(--dn)) calc(-1 * var(--pad)) calc(-1 * var(--pad));
  padding: calc(14px - 6px * var(--dn)) var(--pad);
  border-top: 2px solid var(--app-border);
  background: var(--app-surface);
}
:is(:root.student-workspace[data-skin], :root.skin-preview[data-skin]) #dialog .actions > .primary {
  margin-left: auto;
}
:is(:root.student-workspace[data-skin], :root.skin-preview[data-skin]) #dialog .skin-mascot {
  gap: calc(16px - 6px * var(--dn));
  margin: calc(14px - 8px * var(--dn)) 0;
  padding: calc(12px - 6px * var(--dn)) calc(18px - 6px * var(--dn));
}
:is(:root.student-workspace[data-skin], :root.skin-preview[data-skin]) #dialog .skin-mascot-face {
  width: calc(104px - 44px * var(--dn));
  height: calc(90px - 38px * var(--dn));
}
:is(:root.student-workspace[data-skin], :root.skin-preview[data-skin]) #dialog .skin-mascot-bubble {
  padding: calc(10px - 4px * var(--dn)) calc(18px - 4px * var(--dn));
}
:is(:root.student-workspace[data-skin], :root.skin-preview[data-skin]) #dialog {
  scroll-padding-bottom: calc(var(--foot, 96px) + 12px);
}
:is(:root.student-workspace[data-skin], :root.skin-preview[data-skin]) #dialog .question {
  position: var(--skin-question-pin, static);
  top: 0;
  z-index: 2;
  box-shadow: 0 calc(-1 * var(--pad)) 0 var(--app-surface);
}
:is(:root.student-workspace[data-skin], :root.skin-preview[data-skin]) #dialog .answers .mode-label {
  display: var(--skin-label-display, block);
  margin: calc(4px * (1 - var(--dn))) 0 0 calc(14px * var(--dn));
}