/* Estilos só desta função. Carrega depois de estilo.css e caderno.css. */
/* O "1" da IM Fell parece um I versalete: aqui os algarismos vêm da Old Standard, e o resto segue igual. */
@font-face { font-family: 'SM Algarismos'; src: url(/fontes/old-standard-tt-italic-400.woff2) format('woff2'); font-style: italic; font-weight: 400; font-display: swap; unicode-range: U+30-39; }
.sm {
  --sm-papel: #E8E5DA; --sm-tinta: #141312;
  --legenda: 'SM Algarismos', 'IM Fell English', 'Reserva Legenda', 'Reserva Legenda Android', 'Times New Roman', serif;
  --display: 'SM Algarismos', 'IM Fell Double Pica', 'Reserva Display', 'Reserva Display Android', 'Times New Roman', serif;
}
main.interna:has(.sm) { padding-top: .5rem; }
/* no celular o menu fica numa linha rolável: a primeira tela é da semaninha */
@media (max-width: 699px) {
  .topo { gap: 0; padding-top: .75rem; }
  .topo-nome { font-size: 1.05rem; max-width: none; }
  .topo-nav { flex-wrap: nowrap; gap: 0 1rem; width: 100%; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
  .topo-nav::-webkit-scrollbar { display: none; }
  /* o último item visível some aos poucos: é sinal de que a linha continua */
  .topo-nav { padding-right: 2.5rem; mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent); }
}

/* entrada: título do site, uma frase, o exemplo e o campo ao alcance do polegar */
.sm-titulo { margin-bottom: .35rem; padding-inline: 1rem; font-size: clamp(3.1rem, 15vw, 8.5rem); }
.sm-entrada { padding: 0 1rem 1rem; }
.sm-frase { font: 400 1.22rem/1.3 var(--corpo); max-width: 30em; }
.sm-vitrine { margin: .6rem 0 .3rem; }
/* o exemplo ocupa o lugar desde o começo e só aparece pintado; sem isso o campo pula quando as fotos chegam */
.sm-vitrine:not([data-pronta]) canvas, .sm-vitrine:not([data-pronta]) figcaption { visibility: hidden; }
@media (scripting: none) { .sm-vitrine { display: none; } }
.sm-vitrine canvas { display: block; width: min(100%, calc((100svh - 26.5rem) * .8)); min-width: 12rem; height: auto; }
.sm-vitrine figcaption { flex: none; padding-top: .3rem; font: italic 400 1rem/1.25 var(--legenda); color: var(--chumbo); }
.sm-campo { flex: none; }
.sm-campo label, .sm-sua label { display: block; font: italic 400 1.25rem/1.3 var(--legenda); }
.sm-campo input, .sm-sua input {
  display: block; width: 100%; min-width: 0; min-height: 56px; padding: 0 .1rem;
  font: 400 2.9rem/1.1 var(--caneta); color: var(--papel);
  background: transparent; border: 0; border-bottom: 2px solid var(--papel); border-radius: 0;
}
.sm-campo input:focus-visible, .sm-sua input:focus-visible { outline: 0; border-bottom: 4px solid var(--radio); }
.sm-ir { display: block; width: 100%; min-height: 56px; margin-top: .6rem; padding: 0 1rem; background: var(--papel); color: var(--sm-tinta); font: italic 400 1.55rem/1 var(--legenda); }
.sm-ir:focus-visible { outline-offset: 2px; }
.sm-erro { font: italic 400 1.15rem/1.3 var(--legenda); color: #F2B5A7; }
.sm-erro:not(:empty) { margin-top: .5rem; }
.sm-outro { display: block; min-height: 44px; margin-top: .25rem; font: italic 400 1.18rem/1.2 var(--legenda); text-decoration: underline; text-underline-offset: .18em; }
.sm-sobre { margin-top: .25rem; font: 400 1.05rem/1.35 var(--corpo); }
.sm-sobre summary { display: flex; align-items: center; min-height: 44px; font: italic 400 1.15rem/1.2 var(--legenda); text-decoration: underline; text-underline-offset: .18em; cursor: pointer; }
.sm-sobre a { display: inline-block; padding-block: .85rem; margin-block: -.85rem; }
.sm-sobre p + p { margin-top: .4rem; font: italic 400 1rem/1.3 var(--legenda); }
.sm-sobre p:last-child { margin-bottom: .4rem; }

/* resultado: a imagem na tela inteira, as ações embaixo */
.sm-palco { display: flex; flex-direction: column; min-height: calc(100svh - .5rem); padding: 0 .75rem .75rem; outline: 0; }
.sm-palco[hidden] { display: none; }
.sm-topo { flex: none; display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.sm-modos { display: flex; gap: 1rem; }
.sm-modo { min-height: 44px; font: italic 400 1.42rem/1 var(--legenda); color: var(--chumbo); border-bottom: 2px solid transparent; }
.sm-modo[aria-pressed="true"] { color: var(--papel); border-bottom-color: var(--radio); }
.sm-trocar { min-height: 44px; font: italic 400 1.02rem/1 var(--legenda); color: var(--chumbo); text-decoration: underline; text-underline-offset: .18em; white-space: nowrap; }
.sm-demo { font: italic 400 1rem/1.25 var(--legenda); color: var(--radio); }
.sm-recebida { font: 400 1.3rem/1.25 var(--corpo); padding-block: .1rem .3rem; }
.sm-memoria { font: italic 400 1.1rem/1.25 var(--legenda); padding-bottom: .25rem; }

.sm-figura { position: relative; flex: 1 1 0; min-height: 22rem; margin: .25rem 0 0; display: flex; justify-content: center; align-items: flex-start; overflow: hidden; }
.sm-figura[hidden] { display: none; }
.sm-figura canvas { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; cursor: pointer; }
.sm-figura canvas.sm-sem-toque { cursor: default; }
.sm-figura.carregando canvas { opacity: .55; }
.sm-figura.carregando::after, .sm-mes.carregando::after {
  content: ''; position: absolute; inset-inline: 0; top: 0; height: 18%; pointer-events: none;
  background: linear-gradient(transparent, rgba(191, 235, 221, .4), transparent);
  animation: sm-luz 1.1s linear infinite alternate;
}
@keyframes sm-luz { to { top: 82%; } }
@media (prefers-reduced-motion: reduce) { .sm-figura.carregando::after, .sm-mes.carregando::after { animation: none; top: 0; height: 100%; opacity: .3; } }

/* o seu mês: os cartões deslizam, um de cada vez */
.sm-mes { position: relative; flex: 1 1 0; min-height: 22rem; display: flex; flex-direction: column; margin-top: .25rem; }
.sm-mes[hidden] { display: none; }
.sm-cartoes {
  flex: 1 1 0; min-height: 0; display: flex; gap: .6rem; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: -.75rem; padding-inline: 1.5rem;
  outline-offset: -2px;
}
.sm-cartoes::-webkit-scrollbar { display: none; }
.sm-cartao { flex: none; height: 100%; width: auto; max-width: calc(100% - 1.5rem); object-fit: contain; object-position: center top; scroll-snap-align: center; }
.sm-passos { flex: none; display: flex; align-items: center; justify-content: space-between; }
.sm-passos[hidden] { display: none; }
.sm-passo { min-height: 40px; padding-inline: .25rem; font: italic 400 1.08rem/1 var(--legenda); text-decoration: underline; text-underline-offset: .18em; }
.sm-passo:disabled { opacity: .35; cursor: default; text-decoration: none; }
.sm-conta { font: italic 400 1.08rem/1 var(--legenda); color: var(--chumbo); }
.sm-sem-dados { font: 400 1.25rem/1.35 var(--corpo); padding-block: 1rem; }

.sm-controles { flex: none; padding-top: .3rem; }
.sm-datas { font: italic 400 1.02rem/1.3 var(--legenda); color: var(--chumbo); }
.sm-datas:empty { display: none; }
.sm-periodos { display: flex; gap: .15rem; margin-inline: -.3rem; overflow-x: auto; scrollbar-width: none; }
.sm-periodos[hidden] { display: none; }
.sm-periodos::-webkit-scrollbar { display: none; }
.sm-periodo { flex: 1 0 auto; min-height: 44px; padding-inline: .4rem; font: italic 400 1.18rem/1 var(--legenda); color: var(--chumbo); white-space: nowrap; }
.sm-periodo[aria-pressed="true"] { color: var(--papel); text-decoration: underline; text-decoration-color: var(--radio); text-decoration-thickness: 2px; text-underline-offset: .28em; }
.sm-ajustar { display: block; min-height: 40px; font: italic 400 1.08rem/1 var(--legenda); text-decoration: underline; text-underline-offset: .18em; }
.sm-ajustar[hidden] { display: none; }
.sm-ajustes { padding-bottom: .4rem; }
.sm-ajustes[hidden] { display: none; }
.sm-grupo { display: flex; flex-wrap: wrap; gap: .35rem; padding-top: .35rem; }
.sm-grupo[hidden] { display: none; }
.sm-opcao { flex: 1 0 auto; min-height: 44px; padding: 0 .75rem; border: 1px solid var(--chumbo); font: italic 400 1.1rem/1 var(--legenda); white-space: nowrap; }
.sm-opcao[aria-pressed="true"] { background: var(--radio); border-color: var(--radio); color: var(--prussia); }
.sm-opcao:disabled { opacity: .4; cursor: not-allowed; text-decoration: line-through; }
#sm-g-receita { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -.75rem; padding-inline: .75rem; }
.sm-receita { flex: 1 0 64px; max-width: 96px; padding: 0 0 .15rem; border-bottom: 2px solid transparent; font: italic 400 1rem/1.2 var(--legenda); text-align: center; }
.sm-receita canvas { display: block; width: 100%; aspect-ratio: 1; }
.sm-receita span { display: block; padding-top: .15rem; }
.sm-receita[aria-pressed="true"] { border-bottom-color: var(--radio); color: var(--radio); }
.sm-aviso { font: italic 400 1.1rem/1.25 var(--legenda); }
.sm-aviso:not(:empty) { padding-top: .25rem; }
.sm-convite { padding-top: .15rem; font: italic 400 1.25rem/1.25 var(--legenda); }
.sm-convite a { display: inline-flex; align-items: center; min-height: 44px; color: var(--radio); }
.sm-mandar, .sm-acoes { display: flex; gap: .5rem; padding-top: .35rem; }
.sm-mandar[hidden], .sm-acoes[hidden] { display: none; }
.sm-acoes { position: sticky; bottom: 0; padding-bottom: env(safe-area-inset-bottom); }
.sm-botao {
  flex: 1; display: flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 .6rem; background: var(--prussia);
  border: 1px solid var(--papel); font: italic 400 1.14rem/1 var(--legenda); text-decoration: none; white-space: nowrap;
}
.sm-botao[hidden] { display: none; }
.sm-principal { flex: 1.5; background: var(--papel); color: var(--sm-tinta); font: italic 400 1.55rem/1 var(--legenda); }
.sm-principal:focus-visible { outline-offset: 2px; }
.sm-botao:active, .sm-opcao:active, .sm-periodo:active, .sm-ir:active { transform: translateY(1px); }
.sm-sua { padding-top: .35rem; }
.sm-sua[hidden] { display: none; }
.sm-sua input { min-height: 46px; font-size: 2.3rem; }
.sm-sua .sm-ir { min-height: 48px; margin-top: .4rem; font-size: 1.3rem; }

.sm-lista, .sm-banda, .sm-conta-explicada { padding: 2rem clamp(1rem, 4vw, 4rem) 0; max-width: 56rem; }
.sm-lista h2, .sm-banda h2, .sm-conta-explicada h2 { font: italic 400 clamp(2.2rem, 9vw, 3.6rem)/.95 var(--display); margin-bottom: .75rem; }
.sm-lista ol { margin: 0; padding: 0; list-style: none; counter-reset: sm; }
.sm-lista li { counter-increment: sm; display: grid; grid-template-columns: 2.4rem 1fr auto; gap: .1rem .4rem; align-items: baseline; padding: .4rem 0; border-top: 1px solid rgba(232, 229, 218, .28); font: 400 1.12rem/1.25 var(--corpo); }
.sm-lista li::before { content: counter(sm); font: 400 1.05rem/1.25 var(--corpo); }
.sm-lista li b { font-weight: 700; }
.sm-lista li span { grid-column: 2; font-style: italic; }
.sm-lista li i { grid-column: 3; grid-row: 1; font: italic 400 1.05rem/1.25 var(--legenda); white-space: nowrap; }
.sm-perfil { margin-top: .75rem; font: italic 400 1.1rem/1.3 var(--legenda); }
.sm-conta-explicada p { font: 400 1.12rem/1.4 var(--corpo); margin-bottom: .6rem; max-width: 38em; }
.sm-banda canvas { display: block; width: min(100%, 34rem); height: auto; }
.sm-creditos { margin: 2rem clamp(1rem, 4vw, 4rem) 0; max-width: 56rem; }

@media (min-width: 960px) {
  .sm-titulo { padding-inline: clamp(1.25rem, 4vw, 4rem); font-size: min(6.2rem, 6.6vw); }
  .sm-entrada { display: grid; grid-template-columns: minmax(0, 30rem) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 4rem; padding-inline: clamp(1.25rem, 4vw, 4rem); }
  .sm-frase { grid-column: 1; font-size: 1.5rem; }
  .sm-campo { grid-column: 1; grid-row: 2; padding-top: 1.5rem; }
  .sm-vitrine { grid-column: 2; grid-row: 1 / -1; margin: -7rem 0 0; }
  .sm-vitrine canvas { width: auto; min-width: 0; height: calc(100svh - 12rem); max-height: 56rem; }
  .sm-palco {
    display: grid; grid-template-columns: minmax(0, 1fr) 25rem; grid-template-rows: auto auto auto auto 1fr;
    column-gap: 2.5rem; padding: .5rem clamp(1.25rem, 4vw, 4rem);
  }
  .sm-figura, .sm-mes { grid-column: 1; grid-row: 1 / -1; height: calc(100svh - 1.5rem); min-height: 0; margin: 0; }
  .sm-topo, .sm-demo, .sm-recebida, .sm-memoria { grid-column: 2; }
  .sm-controles { grid-column: 2; grid-row: 5; overflow-y: auto; min-height: 0; padding-top: .75rem; }
  .sm-acoes { position: static; }
  .sm-cartoes { margin-inline: 0; padding-inline: 0; }
  .sm-botao:hover, .sm-opcao:hover:not(:disabled) { border-color: var(--radio); }
  .sm-principal:hover { background: var(--radio); }
}