/* Minhas conquistas da criança (student-achievements.js): selos das atividades e conquistas, nas três skins. No fim, a
   escala da tela da criança pelo aparelho (D86), que tem de vir depois de todas as outras folhas da criança. */
.student-achievements-link {
  min-height: var(--skin-target, 56px);
  margin-block: 16px;
  padding: 12px 24px;
  border: 3px solid #f2c94c;
  border-radius: var(--skin-radius, 20px);
  background: #fff6d1;
  color: #4a3a06;
  font-size: var(--skin-button-text, 19px);
  font-weight: var(--skin-weight-ui, 700);
}
.student-achievements-page h1 {
  margin: 12px 0 4px;
  font-size: var(--skin-title, 28px);
}
.student-achievements-page h2 {
  margin: 24px 0 4px;
}
.student-achievements-page button {
  min-height: var(--skin-target, 48px);
  font-size: var(--skin-button-text, 18px);
}
.student-achievements-page .sa-points {
  display: inline-block;
  margin: 0 0 8px;
  padding: 6px 16px;
  border-radius: 999px;
  background: #fff6d1;
  font-weight: 800;
}
.student-achievements-page .sa-note,
.student-achievements-page .sa-legend,
.student-achievements-page .sa-summary {
  margin: 0 0 8px;
  color: var(--app-muted);
}
.sa-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.sa-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 14px 16px;
  border: var(--skin-border, 2px) solid var(--app-border);
  border-radius: var(--skin-card-radius, 14px);
  background: var(--app-card);
}
.sa-card .sa-icon {
  font-size: var(--skin-icon-text, 40px);
  line-height: 1;
}
.sa-card i {
  position: absolute;
  top: 10px;
  right: 14px;
  font-style: normal;
  font-size: 22px;
}
.sa-card.sa-primeira {
  border-color: #d4a017;
  background: #fff6d1;
}
.sa-card.sa-refazendo {
  border-color: var(--kid-success, #2e8b57);
  background: var(--kid-success-bg, #e6f6ec);
}
.sa-card.sa-pending {
  border-style: dashed;
}

/* A escala da tela da criança pelo aparelho (D86): no notebook ou no computador (mouse e tela de 1024 px ou mais) tudo
   o que é feito para o dedo no tablet fica a 85%: texto, alvos, barra de baixo, cabeçalho, cartões e mascote. Com toque
   nada muda (os mínimos de 64 px na navegação e 48 px no conteúdo, spec 79 e anexo). Os tokens das skins (skins/tokens.css)
   multiplicam por var(--student-scale, 1); aqui ficam os tamanhos que não são token. Vem depois das outras folhas da
   criança e não troca nenhuma regra delas: só multiplica. */
@media (pointer: fine) and (min-width: 1024px) {
  :root.student-workspace {
    --student-scale: 0.85;
    --student-dock-space: calc(112px * var(--student-scale) + env(safe-area-inset-bottom));
  }

  /* A barra de baixo e o alto (Ouvir, Aa, Eu) */
  .student-workspace #app:not(.entry-shell) .student-dock {
    inset: auto calc(16px * var(--student-scale)) calc(16px * var(--student-scale) + env(safe-area-inset-bottom));
    gap: calc(8px * var(--student-scale));
    padding: calc(8px * var(--student-scale));
    border-radius: calc(22px * var(--student-scale));
  }
  .student-workspace #app:not(.entry-shell) .student-dock button {
    min-height: max(calc(64px * var(--student-scale)), var(--skin-target-big, 72px));
    font-size: calc(17px * var(--student-scale));
    border-radius: calc(16px * var(--student-scale));
  }
  .student-workspace .student-dock .student-dock-icon {
    font-size: calc(26px * var(--student-scale));
  }
  .student-quick button {
    min-width: calc(64px * var(--student-scale));
    min-height: calc(64px * var(--student-scale));
    padding: 6px calc(14px * var(--student-scale));
    font-size: calc(18px * var(--student-scale));
  }
  .frame-top-student .account-menu > summary {
    min-height: calc(64px * var(--student-scale));
  }
  .student-menu-name {
    font-size: calc(18px * var(--student-scale));
  }

  /* A barra da turma */
  .student-class-bar {
    height: calc(68px * var(--student-scale));
    padding: 0 calc(24px * var(--student-scale));
  }
  .student-class-bar-image {
    width: calc(52px * var(--student-scale));
    height: calc(52px * var(--student-scale));
  }
  .student-class-bar-name b {
    font-size: calc(18px * var(--student-scale));
  }
  .student-class-bar-name span,
  .student-class-bar-progress > div {
    font-size: calc(16px * var(--student-scale));
  }
  .student-class-bar-progress {
    width: calc(280px * var(--student-scale));
  }
  #student-class-switch {
    min-height: calc(48px * var(--student-scale));
  }

  /* O mascote e o personagem da atividade */
  .skin-mascot-face {
    width: calc(104px * var(--student-scale));
    height: calc(90px * var(--student-scale));
  }
  .skin-mascot {
    gap: calc(16px * var(--student-scale));
    margin: calc(14px * var(--student-scale)) 0;
    padding: calc(12px * var(--student-scale)) calc(18px * var(--student-scale));
  }
  .skin-mascot-plain {
    padding: calc(8px * var(--student-scale)) calc(14px * var(--student-scale));
  }
  .skin-mascot-bubble {
    padding: calc(10px * var(--student-scale)) calc(18px * var(--student-scale));
  }
  .skin-mascot-plain .skin-mascot-bubble {
    padding: 0;
  }
  :is(#app, dialog) .character-guide .character-guide-face {
    width: calc(104px * var(--student-scale));
    height: calc(104px * var(--student-scale));
    font-size: calc(72px * var(--student-scale));
  }
  .character-guide-bubble {
    padding: calc(16px * var(--student-scale)) calc(20px * var(--student-scale));
  }
  .character-guide-bubble strong,
  .character-guide-bubble p,
  .character-guide-bubble .feedback {
    font-size: calc(18px * var(--student-scale));
  }

  /* Cartões, botões e escolhas do conteúdo e dos desafios */
  .student-workspace .learning-card {
    padding: calc(24px * var(--student-scale)) calc(26px * var(--student-scale));
    gap: calc(22px * var(--student-scale));
  }
  .student-workspace .learning-card progress {
    height: calc(16px * var(--student-scale));
  }
  .student-workspace .student-library-nav button {
    padding: calc(12px * var(--student-scale)) calc(22px * var(--student-scale));
    font-size: calc(19px * var(--student-scale));
  }
  .student-workspace .learning-card > button,
  .student-workspace .game-card button,
  .student-workspace .discovery-invite button {
    padding: calc(6px * var(--student-scale)) calc(26px * var(--student-scale));
  }
  .student-workspace .catalog-scene {
    font-size: calc(56px * var(--student-scale));
  }
  .student-workspace .student-achievements summary {
    min-height: calc(64px * var(--student-scale));
    padding: calc(14px * var(--student-scale)) calc(22px * var(--student-scale));
    font-size: calc(19px * var(--student-scale));
  }
  :is(.student-workspace, .skin-preview[data-skin]) dialog .answers button,
  :is(.student-workspace, .skin-preview[data-skin]) dialog .answers .activity-choice {
    font-size: calc(20px * var(--student-scale));
  }
  .student-workspace dialog .word-grid button {
    min-height: calc(56px * var(--student-scale));
    font-size: clamp(calc(22px * var(--student-scale)), 3vw, calc(30px * var(--student-scale)));
  }

  /* A página «Eu» */
  .frame-top-student .account-menu.student-eu[open] [data-student-menu] {
    min-height: calc(88px * var(--student-scale));
    font-size: calc(19px * var(--student-scale));
  }
  .student-eu-close,
  .student-eu-top .student-eu-close {
    min-height: calc(64px * var(--student-scale));
    min-width: calc(64px * var(--student-scale));
    font-size: calc(19px * var(--student-scale));
  }
  .student-eu-who .student-menu-face {
    width: calc(96px * var(--student-scale));
    height: calc(96px * var(--student-scale));
    font-size: calc(56px * var(--student-scale));
  }
  .frame-top-student .account-menu.student-eu[open] .student-eu-tabs [role='tab'] {
    min-height: max(calc(64px * var(--student-scale)), var(--skin-target-big, 64px));
  }
  .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,
  .student-eu-gate input {
    min-height: max(calc(48px * var(--student-scale)), var(--skin-target, 48px));
  }
  .frame-top-student .account-menu.student-eu[open] .student-eu-foot [data-student-menu]:not(.student-eu-close) {
    min-height: calc(64px * var(--student-scale));
  }
}