/*
    TERMINAL público (/terminal) — a terceira leitura do conteúdo, ao lado de Concept e Quiet Luxury.

    PALETA: a mesma do PDF da identidade visual que o Quiet Luxury já usa
      #11182A escuro   #F9FAFD superfície   #0A84C7 acento   #E3E9F1 borda   #4F46E5 índigo

    Namespace próprio --term-*, e NÃO --ql-*: o Quiet Luxury é dono das dele e esta folha precisa
    ficar de pé sozinha. Nada de Bootstrap, nada de jQuery — a página tem só este arquivo e um .js.

    Não é um terminal retrô: sem scanline, sem fósforo verde, sem traffic lights de macOS. O alvo é
    o mesmo do resto da marca — limpo, denso e caro.
*/

/* ===================================================================== Tokens */

:root {
    --term-fonte: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* Claro */
    --term-fundo: #F9FAFD;
    --term-painel: #FFFFFF;
    --term-linha: #E3E9F1;
    --term-texto: #11182A;
    --term-suave: #55617A;
    --term-fraco: #8A94A8;
    --term-acento: #0A84C7;
    /* O acento da marca dá ~4.0:1 sobre a superfície clara — abaixo dos 4.5:1 de texto corrido.
       Traço e ícone usam --term-acento; texto usa este tom mais fechado. */
    --term-acento-txt: #0870A8;
    --term-indigo: #4F46E5;
    --term-ok: #16A34A;
    --term-alerta: #B45309;
    --term-erro: #B4232C;
    --term-eco: rgba(17, 24, 42, .045);
    --term-brilho: transparent;
}

:root[data-term-tema="escuro"] {
    --term-fundo: #0B1120;
    --term-painel: #151D31;
    --term-linha: #23304C;
    --term-texto: #F1F5F9;
    --term-suave: #A6B0C3;
    --term-fraco: #74809A;
    --term-acento: #0A84C7;
    --term-acento-txt: #4FB3E8;
    /* #4F46E5 não passa de contraste sobre #0B1120; no escuro o índigo abre. */
    --term-indigo: #818CF8;
    --term-ok: #4ADE80;
    --term-alerta: #FBBF24;
    --term-erro: #FCA5A5;
    --term-eco: rgba(255, 255, 255, .04);
    --term-brilho: radial-gradient(60rem 22rem at 50% -8rem, rgba(10, 132, 199, .10), transparent 70%);
}

/* ======================================================================= Base */

*, *::before, *::after { box-sizing: border-box; }

html, body.term-corpo {
    margin: 0;
    height: 100%;
    background: var(--term-fundo);
}

body.term-corpo {
    font-family: var(--term-fonte);
    font-size: 14px;
    line-height: 1.65;
    color: var(--term-texto);
    -webkit-font-smoothing: antialiased;
}

.term__oculto {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ====================================================================== Chassi */

.term {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    background-image: var(--term-brilho);
}

.term__barra,
.term__saida,
.term__linha {
    width: 100%;
    max-width: 1080px;
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2rem);
}

.term__barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    height: 52px;
    flex: 0 0 auto;
    border-bottom: 1px solid var(--term-linha);
}

/* ------------------------------------------------------------------- Wordmark */
/* Mesmo racional do _Marca.cshtml: >_ é o monograma; felipe leve (proximidade),
   moura denso (robustez). Repetido aqui e não incluído de lá porque aquele partial
   carrega estilo inline pensado para o admin e o /Login. */

.term__marca {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
    color: var(--term-texto);
    letter-spacing: -.02em;
}

.term__marca-cursor { color: var(--term-acento); font-weight: 700; }
.term__marca-leve   { font-weight: 300; opacity: .72; }
.term__marca-forte  { font-weight: 700; }
/* Pisca como o cursor do prompt (mesma @keyframes, lá embaixo): o "_" da assinatura é o mesmo
   cursor de linha de comando do monograma, e ficava parado só aqui. */
.term__marca-traco  { font-weight: 400; animation: term-pisca 1.4s steps(2, start) infinite; }

.term__acoes { display: flex; align-items: center; gap: .75rem; }

.term__chip {
    font-size: 12px;
    font-weight: 500;
    color: var(--term-suave);
    border: 1px solid var(--term-linha);
    border-radius: 999px;
    padding: .1rem .55rem;
    cursor: pointer;
    list-style: none;                 /* o <summary> não desenha triângulo */
    transition: color .2s ease, border-color .2s ease;
}

.term__chip::-webkit-details-marker { display: none; }   /* Safari ainda pede o pseudo próprio */
.term__chip:hover { color: var(--term-acento); border-color: var(--term-acento); }

/* Seletor de idioma. Vive num <details>, então abre e fecha sem uma linha de JS. */
.term__idioma { position: relative; }

.term__idioma-menu {
    position: absolute;
    right: 0;
    top: calc(100% + .4rem);
    min-width: 84px;
    z-index: 20;
    display: flex;
    flex-direction: column;
    padding: .25rem;
    background: var(--term-painel);
    border: 1px solid var(--term-linha);
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .35);
}

.term__idioma-item {
    padding: .3rem .6rem;
    border-radius: 5px;
    font-size: 12px;
    color: var(--term-suave);
    text-decoration: none;
}

.term__idioma-item:hover { color: var(--term-acento); background: var(--term-linha); }

.term__icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    padding: 0;
    background: none;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--term-suave);
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease;
}

.term__icone svg { width: 18px; height: 18px; }
.term__icone:hover { color: var(--term-acento); border-color: var(--term-linha); }

.term__voltar {
    font-size: 12px;
    color: var(--term-suave);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color .2s ease, border-color .2s ease;
}

.term__voltar:hover { color: var(--term-acento-txt); border-bottom-color: currentColor; }

/* ====================================================================== Saída */

.term__saida {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding-block: 1.25rem .5rem;
    scrollbar-width: thin;
    scrollbar-color: var(--term-linha) transparent;
}

.term__saida::-webkit-scrollbar { width: 10px; }
.term__saida::-webkit-scrollbar-thumb {
    background: var(--term-linha);
    border-radius: 999px;
    border: 3px solid transparent;
    background-clip: content-box;
}

/* Qualquer bloco: nunca deixar URL/slug longo empurrar a página na horizontal. */
.term__saida > * { overflow-wrap: anywhere; }
.term__saida > * + * { margin-top: .35rem; }

/* ================================================================ Linha de eco */

.term-eco {
    display: flex;
    gap: .55rem;
    margin-top: 1.15rem !important;
    padding: .15rem .5rem .15rem 0;
    background: var(--term-eco);
    border-radius: 6px;
}

.term-eco__prompt { flex: 0 0 auto; padding-left: .5rem; }
.term-eco__prompt .term-prompt__seta { margin-inline: .15em; }
.term-eco__linha { color: var(--term-texto); }
.term-eco__linha em { font-style: normal; color: var(--term-indigo); }   /* flags */

/* ==================================================================== Blocos */

.term-texto { color: var(--term-texto); margin: 0; }
.term-texto[data-tom="suave"] { color: var(--term-suave); }
.term-texto[data-tom="fraco"] { color: var(--term-fraco); font-size: 13px; }
.term-texto[data-tom="ok"]    { color: var(--term-ok); }

/* Resposta da IA em curso: preserva a quebra que o modelo mandou enquanto o texto chega.
   Ao terminar, o JS troca este nó pelos blocos já formatados e o pre-wrap sai de cena. */
.term-chat { white-space: pre-wrap; }

.term-titulo {
    margin: 1.4rem 0 .55rem;
    padding-left: .7rem;
    border-left: 3px solid var(--term-acento);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--term-acento-txt);
}

.term__saida > .term-titulo:first-child { margin-top: 0; }

.term-regra {
    height: 1px;
    margin: .9rem 0;
    background: var(--term-linha);
    border: 0;
}

.term-link {
    color: var(--term-acento-txt);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
}

.term-link:hover { text-decoration-color: currentColor; }

.term-dica { color: var(--term-fraco); font-size: 13px; }
.term-dica code, .term-texto code, .term-lista code {
    color: var(--term-acento-txt);
    background: var(--term-eco);
    border-radius: 4px;
    padding: .05em .35em;
}

.term-erro, .term-aviso {
    display: flex;
    gap: .6rem;
    padding: .35rem .6rem;
    border-radius: 6px;
    border-left: 3px solid var(--term-erro);
    background: color-mix(in srgb, var(--term-erro) 9%, transparent);
    color: var(--term-texto);
}

.term-aviso { border-left-color: var(--term-alerta); background: color-mix(in srgb, var(--term-alerta) 10%, transparent); }
.term-erro::before  { content: "!"; color: var(--term-erro); font-weight: 700; flex: 0 0 auto; }
.term-aviso::before { content: "!"; color: var(--term-alerta); font-weight: 700; flex: 0 0 auto; }

/* -------------------------------------------------------------------- Listas */

.term-lista { margin: .2rem 0; padding: 0; list-style: none; }

.term-lista li {
    display: grid;
    grid-template-columns: 3.2ch 1fr;   /* numeral alinhado, texto com recuo pendurado */
    gap: .4rem;
}

.term-lista li::before {
    content: attr(data-indice);
    color: var(--term-fraco);
    text-align: right;
}

.term-lista--simples li { grid-template-columns: 1.6ch 1fr; }
.term-lista--simples li::before { content: "·"; color: var(--term-acento); }

/* ------------------------------------------------------------------- Medidor */
/* Competencia.Percentual como dez glifos — legível sem depender de largura de pixel. */

.term-medidor { display: grid; grid-template-columns: minmax(9ch, max-content) max-content 4ch; gap: .75rem; align-items: baseline; }
.term-medidor__rotulo { color: var(--term-suave); }
.term-medidor__barra { letter-spacing: .1em; color: var(--term-acento); }
.term-medidor__barra span { color: var(--term-linha); }
.term-medidor__valor { color: var(--term-fraco); font-size: 13px; text-align: right; }

/* -------------------------------------------------------------------- Tabelas */
/*
    Coluna alinhada por CSS Grid, não por padding de espaços no servidor.
    Espaço monoespaçado só alinha se toda célula tiver a mesma largura de glifo — o que
    quebra em acento, em CJK e em qualquer tela estreita. Com `max-content` o navegador
    mede e alinha sozinho, em qualquer idioma, e ainda dá para empilhar no celular.
*/

.term-tabela {
    display: grid;
    grid-template-columns: repeat(var(--cols, 3), max-content);
    column-gap: 2.2ch;
    row-gap: .1rem;
    max-width: 100%;
    overflow-x: auto;
    padding-bottom: .2rem;
}

.term-tabela__cab {
    color: var(--term-fraco);
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding-bottom: .3rem;
    border-bottom: 1px solid var(--term-linha);
    margin-bottom: .25rem;
}

.term-tabela__cel { color: var(--term-texto); }
.term-tabela__cel[data-col="0"] { color: var(--term-fraco); }   /* a coluna do # */

/* -------------------------------------------------------------- Chave/valor */

.term-cv { display: grid; grid-template-columns: minmax(10ch, max-content) 1fr; column-gap: 1.6ch; row-gap: .15rem; }
.term-cv__k { color: var(--term-suave); }
.term-cv__v { color: var(--term-texto); }

/* -------------------------------------------------------------------- ASCII */

.term-ascii {
    margin: 0 0 .35rem;
    color: var(--term-acento);
    font-size: clamp(7px, 1.55vw, 12px);
    line-height: 1.05;
    white-space: pre;
    overflow: hidden;
}

/* ================================================================ Linha de entrada */

.term__linha {
    display: flex;
    align-items: center;
    gap: .1rem;
    flex: 0 0 auto;
    padding-block: .8rem 1.1rem;
    border-top: 1px solid var(--term-linha);
}

.term-prompt { flex: 0 0 auto; display: inline-flex; align-items: baseline; letter-spacing: -.02em; }
.term-prompt__leve  { font-weight: 300; opacity: .72; }
.term-prompt__forte { font-weight: 700; }
.term-prompt__seta  { color: var(--term-acento); font-weight: 700; margin-inline: .15em; }

.term__entrada {
    flex: 1 1 auto;
    min-width: 0;
    background: none;
    border: 0;
    outline: none;
    padding: 0;
    font: inherit;
    color: var(--term-texto);
    caret-color: var(--term-acento);
}

.term__entrada::placeholder { color: var(--term-fraco); }

/* O cursor de bloco desenhado só existe quando o campo NÃO está focado — com foco quem
   pisca é o caret real do navegador, e dois cursores na mesma linha é ruído. */
.term-prompt__barra {
    flex: 0 0 auto;
    width: .55em;
    height: 1.05em;
    margin-left: -.3em;
    background: var(--term-acento);
    animation: term-pisca 1.06s steps(2, jump-none) infinite;
}

.term__entrada:focus ~ .term-prompt__barra { animation: none; opacity: 0; }

@keyframes term-pisca { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* ==================================================================== noscript */

.term__noscript {
    max-width: 1080px;
    margin: 2rem auto;
    padding: 1rem clamp(1rem, 4vw, 2rem);
    border-left: 3px solid var(--term-acento);
    color: var(--term-suave);
}

.term__noscript a { color: var(--term-acento-txt); }

/* =================================================================== Responsivo */

@media (max-width: 640px) {
    body.term-corpo { font-size: 13px; }

    .term__voltar { display: none; }   /* a marca já leva para a home */

    /* A MESMA tabela vira uma pilha de registros rotulados — sem markup alternativo,
       só mudando o grid e revelando o rótulo que já veio em data-rotulo. */
    .term-tabela { grid-template-columns: 1fr; row-gap: 0; }
    .term-tabela__cab { display: none; }

    .term-tabela__cel::before {
        content: attr(data-rotulo) " ";
        display: inline-block;
        min-width: 9ch;
        color: var(--term-fraco);
    }

    .term-tabela__cel[data-col="0"] { margin-top: .55rem; font-weight: 700; }
    .term-tabela__cel[data-col="0"]::before { content: "#"; min-width: 0; margin-right: .4ch; }

    .term-cv { grid-template-columns: 1fr; row-gap: 0; }
    .term-cv__k { color: var(--term-fraco); font-size: 12px; margin-top: .4rem; }

    .term-medidor { grid-template-columns: 1fr max-content; }
    .term-medidor__rotulo { grid-column: 1 / -1; }
}

/* ============================================================ Movimento reduzido */

@media (prefers-reduced-motion: reduce) {
    .term-prompt__barra,
    .term__marca-traco { animation: none; }
    *, *::before, *::after { transition-duration: .01ms !important; }
}