/* ==========================================================================
   Base: o que vale pra pagina inteira e as tres cascas de tela.

     .telaApp      as telas de quem esta logado: cabecalho, menu lateral,
                   conteudo e a barra de status embaixo
     .telaPublica  a landing
     .telaEntrada  login, cadastro e primeiros passos

   O desenho e de manual tecnico: quinas retas, reguas finas, tipografia
   grande e indices numerados. Nada de sombra macia nem canto redondo.
   ========================================================================== */

html {
    background: var(--mo-fundo);
}

body {
    min-height: 100dvh;
    background: var(--mo-fundo);
    color: var(--mo-texto);
    font-family: var(--mo-fonte);
    -webkit-font-smoothing: antialiased;
}

/* so os links soltos: os da Mosaic (teclas, itens do menu) tem a cor deles */
a:not([class*="mo-"]) {
    color: inherit;
    text-decoration: none;
}

h1,
h2,
h3 {
    margin: 0;
    font-weight: 600;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

p {
    margin: 0;
    text-wrap: pretty;
}

::selection {
    background: var(--is-tinta);
    color: var(--is-papel);
}

:focus-visible {
    outline: 2px solid var(--is-tinta);
    outline-offset: 2px;
}

.escondido {
    display: none !important;
}


/* ---------- a marca ---------- */

is-marca {
    display: inline-block;
    width: var(--is-marca, 22px);
    height: var(--is-marca, 22px);
    flex: none;
}

is-marca svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

is-marca .bloco-arte { fill: var(--is-arte); }
is-marca .bloco-audio { fill: var(--is-audio); }
is-marca .bloco-design { fill: var(--is-design); }
is-marca .bloco-producao { fill: var(--is-producao); }
is-marca .bloco-programacao { fill: var(--is-programacao); }

/* no hover os blocos assentam um de cada vez, como peca caindo */
.logoIndie:hover is-marca rect {
    animation: blocoAssenta 420ms steps(3, end) both;
}

.logoIndie:hover is-marca rect:nth-child(2) { animation-delay: 60ms; }
.logoIndie:hover is-marca rect:nth-child(3) { animation-delay: 120ms; }
.logoIndie:hover is-marca rect:nth-child(4) { animation-delay: 180ms; }
.logoIndie:hover is-marca rect:nth-child(5) { animation-delay: 240ms; }

@keyframes blocoAssenta {
    from { transform: translateY(-6px); opacity: 0.2; }
}

.logoIndie {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: none;
}

.nomeMarca {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.05em;
    color: var(--mo-texto);
}


/* ---------- teclas: quinas retas, a principal invertida ---------- */

.mo-tecla {
    --mo-tecla-altura: 34px;
    --mo-tecla-fonte: 12.5px;
    font-weight: 600;
}

.mo-tecla--p {
    --mo-tecla-altura: 28px;
}

.mo-tecla--g {
    --mo-tecla-altura: 46px;
    --mo-tecla-pad: 22px;
    --mo-tecla-fonte: 14px;
}


/* ==========================================================================
   Casca das telas logadas
   ========================================================================== */

.telaApp .mo-app {
    --mo-lateral-largura: 236px;
    --mo-cabecalho-altura: 58px;
}

.cabecalhoApp {
    gap: 22px;
    padding: 0 16px 0 22px;
    border-bottom: 1px solid var(--is-regua);
}

/* a faixa colorida em cima de tudo */
.cabecalhoApp::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: var(--is-faixa);
}

.buscaRapida {
    flex: 0 1 400px;
    margin-left: 30px;
}

.mo-busca {
    border-radius: 0 !important;
}

.acoesCabecalho {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.chipUsuario {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 38px;
    padding: 0 12px 0 5px;
    border: 1px solid transparent;
    font-size: 13px;
    font-weight: 600;
    color: var(--mo-texto);
    transition: border-color var(--mo-dur-curta) ease;
}

.chipUsuario:hover {
    border-color: var(--is-regua-forte);
}

.chipUsuario is-sprite {
    --is-sprite: 27px;
}

/* o menu lateral: simbolo de pixel e nome, o atual invertido */
.menuApp {
    padding: 22px 0 0;
    gap: 0;
    border-right: 1px solid var(--is-regua);
}

.menuApp .mo-nav-item {
    gap: 14px;
    padding: 12px 22px;
    border-radius: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--mo-texto-2);
}

.menuApp .mo-nav-item:hover {
    background: var(--mo-lateral-2);
    color: var(--mo-texto);
}

.menuApp .mo-nav-item:is(.ativo, [aria-current="page"]),
.menuApp .mo-nav-item:is(.ativo, [aria-current="page"]):hover {
    background: transparent;
    color: var(--mo-sobre-destaque);
    font-weight: 600;
}

.menuApp .mo-nav-item > .mo-pilula {
    border-radius: 0;
}

.menuApp .mo-nav-item > mo-simbolo {
    color: var(--mo-texto-3);
    transition: color var(--mo-dur-curta) ease;
}

.menuApp .mo-nav-item:hover > mo-simbolo {
    color: var(--mo-texto);
}

.menuApp .mo-nav-item:is(.ativo, [aria-current="page"]) > mo-simbolo {
    color: inherit;
}

.menuApp .peMenu {
    margin-top: auto;
    display: grid;
    border-top: 1px solid var(--is-regua);
}

/* quem esta jogando, no pe do menu */
.cartaoJogador {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 2px 12px;
    padding: 16px 22px;
}

.cartaoJogador is-sprite {
    --is-sprite: 36px;
    grid-row: span 2;
}

.cartaoJogador strong {
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cartaoJogador span {
    font-family: var(--mo-fonte-mono);
    font-size: 10.5px;
    color: var(--mo-texto-3);
}

.botaoSair {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 44px;
    padding: 0 22px;
    border: 0;
    border-top: 1px solid var(--is-regua);
    background: transparent;
    font-family: var(--mo-fonte-mono);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mo-texto-3);
    cursor: pointer;
}

.botaoSair:hover {
    color: var(--mo-texto);
    background: var(--mo-lateral-2);
}

.botaoSair mo-simbolo {
    --mo-simbolo-tamanho: 9px;
}

/* a area de conteudo */
.paginaApp {
    width: min(100%, var(--is-largura));
    margin: 0 auto;
    padding: 46px 48px 96px;
    display: grid;
    gap: 48px;
    align-content: start;
    counter-reset: secao;
}

.paginaApp.paginaMedia {
    width: min(100%, var(--is-largura-media));
}

/* a barra de status embaixo, como a de um editor de jogo */
.rodapeStatus {
    min-height: 30px;
    border-top: 1px solid var(--is-regua);
    font-family: var(--mo-fonte-mono);
    font-size: 10.5px;
    letter-spacing: 0.04em;
    color: var(--mo-texto-3);
    gap: 18px;
}

.rodapeStatus .direita {
    margin-left: auto;
    display: flex;
    gap: 18px;
}

.rodapeStatus .statusApi {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
}

.rodapeStatus .mo-pulso {
    border-radius: 0;
    --mo-pulso-cor: var(--is-ok);
}

.rodapeStatus .statusApi.fora .mo-pulso {
    --mo-pulso-cor: var(--is-erro);
}

.rodapeStatus kbd {
    padding: 0 5px;
    border: 1px solid var(--is-regua-forte);
    font-family: inherit;
}


/* ==========================================================================
   Casca da landing
   ========================================================================== */

.telaPublica > mo-pixels.mo-fundo {
    position: fixed;
    inset: 0;
    z-index: 0;
    opacity: var(--is-pixels);
}

.barraPublica {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 24px;
    height: 64px;
    padding: 0 max(24px, calc((100vw - var(--is-largura)) / 2));
    background: var(--mo-fundo);
    border-bottom: 1px solid var(--is-regua);
}

.barraPublica::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: var(--is-faixa);
}

.barraPublica nav {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
}

.barraPublica nav > a:not(.mo-tecla) {
    padding: 8px 14px;
    font-family: var(--mo-fonte-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mo-texto-2);
}

.barraPublica nav > a:not(.mo-tecla):hover {
    color: var(--mo-texto);
}

.barraPublica .mo-tecla {
    margin-left: 6px;
}

.telaPublica main,
.telaPublica footer {
    position: relative;
    z-index: 1;
}


/* ==========================================================================
   Casca das telas de entrada: tela dividida, a marca de um lado
   ========================================================================== */

.telaEntrada {
    min-height: 100dvh;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.ladoMarca {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 40px;
    padding: 34px 48px 40px;
    border-right: 1px solid var(--is-regua);
    overflow: hidden;
}

.ladoMarca::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: var(--is-faixa);
    z-index: 2;
}

.ladoMarca > mo-pixels.mo-fundo {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: var(--is-pixels);
}

.ladoMarca > :not(mo-pixels) {
    position: relative;
    z-index: 1;
}

.ladoForm {
    display: grid;
    grid-template-rows: auto 1fr auto;
    padding: 28px 48px 34px;
}

.topoForm {
    display: flex;
    justify-content: flex-end;
}

.miolo {
    display: grid;
    place-items: center;
    padding: 20px 0 40px;
}

.peEntrada {
    font-family: var(--mo-fonte-mono);
    font-size: 10.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mo-texto-3);
}


/* ==========================================================================
   Celular
   ========================================================================== */

@media (max-width: 900px) {
    .telaEntrada {
        grid-template-columns: minmax(0, 1fr);
    }

    .ladoMarca {
        border-right: 0;
        border-bottom: 1px solid var(--is-regua);
        padding: 26px 20px 28px;
        gap: 22px;
    }

    .ladoForm {
        padding: 18px 20px 28px;
    }
}

@media (max-width: 760px) {
    .buscaRapida,
    .chipUsuario .textoChip {
        display: none;
    }

    .cabecalhoApp .mo-alternar-lateral {
        display: flex;
    }

    .paginaApp {
        padding: 28px 16px 64px;
        gap: 36px;
    }

    .rodapeStatus .direita > :not(:last-child) {
        display: none;
    }

    .barraPublica {
        gap: 10px;
        padding: 0 16px;
    }

    .barraPublica nav > a:not(.mo-tecla) {
        display: none;
    }
}


/* ---------- a Mosaic UI no idioma daqui ----------
   a biblioteca fica intocada; daqui pra fora, toda peca dela perde o canto
   redondo, e a marca e os pixels do fundo ganham as cores das classes */

[class*="mo-"],
[class*="mo-"]::before,
[class*="mo-"]::after,
[class*="mo-"] > * {
    border-radius: 0 !important;
}

.mo-marca {
    --mo-marca-1: var(--is-arte);
    --mo-marca-2: var(--is-audio);
    --mo-marca-3: var(--is-design);
    --mo-marca-4: var(--is-programacao);
}

.mo-campo,
.mo-busca {
    --mo-campo-borda: var(--is-regua-forte);
}

.mo-dialogo {
    box-shadow: 0 0 0 1px var(--is-regua-forte), 12px 12px 0 color-mix(in srgb, black 40%, transparent) !important;
}