/*
  SDD-davinci-e-linguagem-de-temas F-DV0 (ADR-11) — a camada de PRIMITIVAS.

  A primeira das tres folhas estaticas, e a unica que TODO tema carrega:

      base.css              esta aqui. Mecanica da plataforma.
      celulas/{celula}.css  grade, ritmo, responsivo.
      temas/{tema}.css      :root e identidade.

  O QUE ENTRA AQUI. So o que passa na regra de governo do §3.8: "se voce
  consegue descrever o defeito sem dizer o nome de um tema, ele nao e do tema".
  Foco de teclado invisivel, imagem transbordando, rolagem horizontal no
  celular — nenhum deles menciona um tema, e nenhum deles e identidade.

  O QUE NAO ENTRA. Cor, familia tipografica, peso, entrelinha, raio, sombra,
  espaco. `line-height:1.7` ficou nas folhas dos temas de proposito: densidade
  e uma das seis dimensoes do vocabulario artistico (§3.6), e uma regra que
  parece inocente aqui viraria a mesma entrelinha em trinta temas.

  POR QUE ISTO EXISTE. As seis regras abaixo estavam DUPLICADAS nas duas folhas
  de tema quando esta fase comecou. Com dois temas ninguem sente; com trinta,
  uma correcao de acessibilidade nunca termina. A extracao nao muda um pixel:
  cada seletor nu aparecia uma unica vez por folha, entao move-lo para uma
  camada anterior nao altera nada computado — e as fixtures de padrao-ouro
  guardam essa afirmacao.
*/

*{box-sizing:border-box}

html{scroll-behavior:smooth}

/*
  So a metade MECANICA do body. Fundo, cor e familia continuam no tema, que e
  onde elas significam alguma coisa.

  `--escala-texto` e o token da SDD-aparencia F5: com a escala em 1,
  `calc(16px * 1)` computa exatamente 16px, e o fallback `1` no `var()` nao e
  enfeite — e o que mantem esta folha correta para um tema que ainda nao
  declarou o token.
*/
body{
  margin:0;
  font-size:calc(16px * var(--escala-texto, 1));
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none}

/*
  Controle de formulario nao herda tipografia em navegador nenhum, e isso e
  reset — nao decisao de celula nem de tema. Estava na folha da celula base-1
  ate a prova destrutiva reclamar de `color:` ali, com razao.
*/
input,textarea,select,button{font:inherit;color:inherit}

img{display:block;max-width:100%}

/* Só a margem. O resto de h1/h2/h3 é escala tipográfica, e escala é identidade. */
h1,h2,h3{margin:0}

/*
  O anel de foco, com a cor como variavel.

  Os dois temas de hoje declaram o proprio `:focus-visible` na folha deles, com
  a cor de destaque de cada um, e essa folha carrega DEPOIS — entao para eles
  esta regra nao muda nada. O que ela faz e valer para o tema que ainda nao
  existe: um tema que esqueca de declarar o anel ganha um foco visivel mesmo
  assim, em vez de entregar um site que so se navega com mouse.

  `currentColor` como fallback, e nao uma cor fixa: sobre qualquer fundo ele
  herda a cor do texto, que e a unica escolha que nunca some.
*/
:focus-visible{outline:2px solid var(--mm-focus, currentColor);outline-offset:3px}

/*
  Movimento reduzido. Byte-identico ao que as duas folhas ja traziam.

  A ygg-home tinha uma linha a mais aqui (`.reveal`), e ela FICOU la: e o
  comportamento de revelacao daquele tema, nao uma primitiva. Quando a F-DV2
  levar os comportamentos para o pacote global (ADR-4), aquela linha vem junto
  com eles — nao para ca.
*/
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/*
  SDD-builder-interativos F-INT-2 — a MECANICA do acordeao e das abas.

  O que entra aqui passa na regra de governo do §3.8: "se voce consegue
  descrever o defeito sem dizer o nome de um tema, ele nao e do tema". Fita de
  aba com cara de botao do sistema operacional, painel inativo que continua
  ocupando a pagina, cursor de texto sobre algo que se clica — nenhum deles
  menciona um tema, e nenhum deles e identidade.

  O que NAO entra: cor, familia, peso, raio, espaco e tamanho. O acabamento e
  da celula (a folha do meio), e a cor e do tema.
*/

/*
  O painel inativo sai do fluxo E da ordem de foco.

  O atributo `hidden` ja diz isso ao navegador, mas ele perde para qualquer
  `display` declarado depois — e a folha da celula vai declarar `display` neste
  seletor. Sem esta linha, esconder a aba inativa dependeria da ordem em que as
  duas folhas foram escritas, que e o tipo de dependencia que quebra na
  primeira vez que alguem mexe na outra.
*/
[role="tabpanel"][hidden]{display:none}

/*
  A fita e um <button>, e sem isto ela chega com o desenho do navegador: fundo
  cinza, borda de relevo e a fonte do sistema. Zerar e mecanica; o que ela
  VIRA depois e da celula.
*/
.mmc-abas-fitas>[role="tab"]{
  appearance:none;background:none;border:0;padding:0;margin:0;
  font:inherit;color:inherit;cursor:pointer
}

/*
  O <summary> do acordeao. `cursor:pointer` porque ele se clica, e a lista de
  marcadores some porque o triangulo padrao muda de desenho em cada navegador —
  o que nao e identidade nenhuma, e e por isso que a celula desenha o proprio.
*/
.mmc-acordeao>details>summary{cursor:pointer;list-style:none}
.mmc-acordeao>details>summary::-webkit-details-marker{display:none}

/*
  Sem JS as fitas nao levam a lugar nenhum (ADR-3): o HTML nasce com todos os
  paineis visiveis e e o runtime que recolhe. Ate ele montar — ou para sempre,
  se ele nao chegar — a fita nao e um controle, e o cursor nao deve prometer
  que e.
*/
.mmc-abas:not([data-mmc-abas-ok])>.mmc-abas-fitas>[role="tab"]{cursor:default}

/*
  SDD-builder-refino-14 F-14-1 (ADR-2) — o ampliador.

  Ele e um <dialog> que o runtime cria, entao esta folha nunca desenha nada em
  pagina que nao amplia nenhuma foto. O `::backdrop` e o escuro de tras, e e
  do navegador — nao ha um <div> de veu aqui.

  `cursor:zoom-in` NAO esta nesta folha: ele sai do renderizador, porque o
  canvas do editor tambem precisa dele e nao carrega esta folha.
*/
.mmc-ampliador{
  max-width:min(92vw,1400px);max-height:92vh;padding:0;border:0;
  background:none;overflow:visible
}
.mmc-ampliador::backdrop{background:rgba(0,0,0,.82)}
.mmc-ampliador>img{
  display:block;max-width:100%;max-height:92vh;width:auto;height:auto;
  margin:0 auto;cursor:zoom-out
}
/*
  O fechar fica FORA do canto da foto, e nao por cima dela: por cima ele some
  em foto clara e cobre justamente o canto que a pessoa quer ver.
*/
.mmc-ampliador-fechar{
  position:fixed;top:12px;right:16px;appearance:none;background:none;border:0;
  padding:8px;font-size:32px;line-height:1;color:#fff;cursor:pointer
}