/*
 * O que precisa de CSS de verdade.
 *
 * O resto do estilo mora em src/ui/estilos.ts, inline: é o que a tela usa e o
 * que se lê junto com o componente. Aqui ficam só as coisas que atributo de
 * estilo não alcança — foco, placeholder, hover.
 */

@import url('/fontes.css');

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family:
    'IBM Plex Sans',
    system-ui,
    -apple-system,
    sans-serif;
  background: #f4f7f7;
  color: #0d1f22;
  -webkit-font-smoothing: antialiased;
}

input,
textarea,
select,
button {
  font-family: inherit;
}

input:focus,
textarea:focus,
select:focus {
  outline: 2px solid #1b6e68;
  outline-offset: 1px;
  border-color: #1b6e68;
}

input::placeholder,
textarea::placeholder {
  color: #93a6a7;
}

/* Foco visível para quem navega por teclado (RNF-05). */
button:focus-visible,
a:focus-visible {
  outline: 2px solid #1b6e68;
  outline-offset: 2px;
}

/*
 * Homepage: a única regra dela que atributo de estilo não alcança.
 *
 * Na abertura, o telefone fica sobreposto à tela do painel. Quando não há
 * largura para os dois, ele sai — sobrepor num celular é pior que não mostrar.
 * O resto da página é responsivo sem media query: clamp() no tipo, auto-fit
 * nas grades, flex-wrap nas seções lado a lado.
 */
@media (max-width: 900px) {
  .home-telefone-da-abertura {
    display: none;
  }
}

/*
 * A página da criança: barra de seções e conteúdo.
 *
 * São dez seções (RF-I76). No celular elas viram uma faixa que rola na
 * horizontal, acima do conteúdo; numa tela larga viram uma coluna à esquerda,
 * onde as dez cabem de uma vez e a pessoa vê o mapa inteiro sem rolar.
 *
 * Isto está aqui, e não inline, porque é a única parte da tela que depende da
 * largura — e atributo de estilo não tem media query.
 */
.crianca-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: start;
}

.crianca-secoes {
  display: flex;
  gap: 0.375rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  /* A faixa sangra até a borda da tela: cortar um item ao meio é o que diz
     que ela rola. Com margem, ela pareceria uma lista completa e curta. */
  margin: 0 -1.5rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  scrollbar-width: thin;
}

.crianca-secoes > button {
  white-space: nowrap;
  flex: 0 0 auto;
}

@media (min-width: 60rem) {
  .crianca-layout {
    grid-template-columns: 13.5rem 1fr;
    gap: 2rem;
  }

  .crianca-secoes {
    flex-direction: column;
    overflow-x: visible;
    margin: 0;
    padding: 0;
    position: sticky;
    top: 1.5rem;
  }

  .crianca-secoes > button {
    width: 100%;
    text-align: left;
  }
}