/* ======================================================================
   Solomon · o REGISTRO
   A folha única do painel. Ela veste o Tabler inteiro com a língua visual
   do portal (reason.ia.br) e do Radar: mármore, tinta, ouro fosco, entalhe,
   filete, EB Garamond. A norma é C:\Projetos\Portal\DESIGN.md; a tradução
   para cá, com o porquê de cada divergência, é DESIGN-SOLOMON.md.

   A IMAGEM QUE ESTA FOLHA PERSEGUE. O portal é uma ESTELA: seis linhas e
   muito silêncio. O painel é o oposto disso em densidade — doze campos,
   listas marcáveis, formulários, contagens. Vestir a estela ao pé da letra
   aqui dá uma tela pretensiosa e ilegível; abandoná-la dá o Tabler de
   sempre. A saída não é uma terceira estética: é o OUTRO objeto da mesma
   família. Esta página é um REGISTRO — o livro-razão do dia, pautado na
   pedra: rubrica em capital, filete, linhas regradas, marcas na margem.
   Registro é denso por natureza, e é isso que autoriza a densidade sem
   trair a pedra.

   REGRA DE MEDIÇÃO (herdada do portal): contraste se mede contra o PIXEL
   COMPOSTO — a pedra depois do grão —, nunca contra o token da paleta.

   ORDEM DE CARGA: esta folha entra DEPOIS do tabler.min.css. Onde ela tem
   a mesma especificidade que o Tabler, ela ganha por ser a última; só usa
   !important onde o Tabler crava a regra em seletor mais forte (raio,
   sombra e foco), e cada um desses está comentado.
   ====================================================================== */


/* ══ 1. ACENTO — O PAINEL DE TROCA DA IRIS ════════════════════════════════
   ⚠️ ARMADILHA REGISTRADA NO PROJETO. Todo o acento da folha (o ouro) nasce
   das QUATRO linhas abaixo e de mais nenhuma: nenhum outro ponto deste
   arquivo escreve um hexadecimal de acento. Conferido de novo em 17/08/2026,
   depois da revisão: continua verdade.

   COMO A IRIS SE VESTE — E ISTO MUDOU EM 17/08/2026. Antes o lavanda era uma
   CÓPIA editada à mão desta folha, morando só no servidor dela: invisível no
   repositório, apagada por qualquer deploy do CSS, e com o mapa de linhas
   invalidado assim que a folha foi reescrita. Agora existe
   `static/tema-iris.css`, versionado, com SÓ os dois blocos abaixo em
   lavanda, carregado depois desta folha e só na Iris (condicional no
   `base.html` e no `login.html`). Esta folha volta a ser byte-idêntica nas
   três instâncias.

   Se um dia algo de acento parar de trocar junto, é porque alguém escreveu
   cor à mão fora daqui — o conserto é trazer de volta para cá, nunca
   acrescentar exceção no `tema-iris.css`. */
:root {
  --sol-acento:   #927639;   /* ouro fosco: 3,60:1 no composto claro */
  --sol-acento-2: #c0a163;   /* a luz na borda do sulco de ouro */
}
[data-bs-theme="dark"] {
  --sol-acento:   #c9a961;   /* no escuro o ouro brilha mais: 7,90:1 */
  --sol-acento-2: #e0c68d;
}


/* ══ 2. FAMÍLIAS — painel de troca de face ════════════════════════════════
   Nenhum outro ponto do arquivo cita nome de fonte.

   DUAS FAMÍLIAS, COM PAPÉIS FIXOS, como no Radar (pedra.css §0) — e a
   escolha foi MEDIDA aqui, no espécime, não copiada:

     face          altura de x    algarismos              mancha a 15px
     EB Garamond      0,40        3 5 7 9 DESCEM 2-3      350 (mais lavada)
     Cardo            0,44        todos LINEARES          398 (+14%)
     (os dois são tabulares por padrão: 10 dígitos iguais e 10 diferentes
      dão a MESMA largura nas duas faces)

   Consequência, e é ela que fixa os papéis: numa coluna de horas e datas
   (07:30 sobre 14/08) a EB Garamond balança, porque 3, 5, 7 e 9 caem
   abaixo da linha de base; a Cardo não. E a 14-15px, que é o corpo real
   deste painel, a EB Garamond deita 14% menos tinta — elegância na estela,
   texto lavado numa ferramenta usada todo dia, no celular.

     EB Garamond  a INSCRIÇÃO: marca, rubrica de campo, rótulo em
                  caixa-alta, selo, botão, e o NÚMERO GRANDE isolado do
                  contador (ali a figura antiga é bonita e não alinha com
                  ninguém).
     Cardo        o REGISTRO: título de tarefa, item de lista, observação,
                  campo de formulário, e TODA coluna de número que precisa
                  alinhar (hora, data, página, porcentagem, dinheiro).

   Se um dia virar uma família só, será a Cardo subindo para as rubricas,
   nunca a EB Garamond descendo para o corpo. */
:root {
  --f-inscricao: "EB Garamond", Georgia, "Times New Roman", serif;
  --f-texto:     "Cardo", Georgia, "Times New Roman", serif;

  /* espacejamento das capitais: capital sem espaço é capital malfeita */
  --esp-marca:  .2em;
  --esp-rotulo: .15em;
  --esp-nome:   .12em;
}


/* ══ 3. TOKENS — a pedra de dia ═══════════════════════════════════════════
   Mármore pentélico, tinta, ouro fosco e um azul egeu. Valores herdados do
   portal (DESIGN.md §3) com a correção do grão: o token --pedra entra
   CLARO o bastante para que o pixel COMPOSTO caia no valor da carta.

   CONTRATO DE COR (a parte que decide se o painel é legível). Cada tinta
   tem UM significado e o repete em todos os campos, senão o olho não
   aprende a usá-la:

     --ouro         AGORA. O que vence hoje, o que atrasou, o foco ativo,
                    a aba ligada, o anel de foco do teclado. É a única
                    tinta que o olho procura quando a pergunta é "o que eu
                    faço agora?". Não decora mais nada.
     --egeu         LIGAÇÃO. O que leva para fora daqui (Google Agenda,
                    RCC, Teologia) e os links do texto.
     --tinta-fraca  TEMPO E QUANTIDADE. Data, contagem, rótulo, unidade.
                    Tudo que orienta e nada que decide.
     as seis cores  ESPÉCIE DA TAREFA (§13), e só como fio de 3px na
                    margem, nunca como fundo. */
:root {
  --pedra:       #f6f3ea;   /* entra aqui; compõe ~#eeebe2 com o grão */
  --pedra-lisa:  #eeebe2;   /* o composto medido: superfície opaca (barra) */
  --pedra-2:     #e3dfd3;   /* faixa de hover / bloco escavado */
  --pedra-3:     #d6d0c0;   /* sulco: fundo de campo de formulário */
  --linha:       #cdc6b4;   /* filete gravado */
  --linha-forte: #bcb49e;   /* filete de baixo dos campos e das rubricas */

  --tinta:       #22201b;   /* 13,6:1 sobre o composto */
  --tinta-fraca: #635d51;   /* 5,5:1 — passa AA em corpo miúdo */

  --ouro:        var(--sol-acento);
  --ouro-claro:  var(--sol-acento-2);
  --egeu:        #2f4a63;   /* 7,7:1 */
  --sinal:       #867d6b;   /* sinal gráfico: 3,4:1 (piso 3:1) */

  /* luz e sombra do entalhe. Propositalmente baixos: se der para ver
     conscientemente, está forte demais (carta §5). */
  --luz:         rgba(255, 255, 255, .60);
  --sulco:       rgba(28, 24, 16, .10);
  --luz-letra:   rgba(255, 255, 255, .45);
  --sulco-letra: rgba(28, 24, 16, .055);
  --luz-filete:  rgba(255, 255, 255, .55);

  --vinheta:     rgba(255, 255, 255, .38);
  --grao-mistura: multiply;
  --grao-op:     .25;

  /* --- as seis espécies de tarefa, recortadas na pedra (§13) --- */
  --esp-vermelho: #9b3f34;
  --esp-laranja:  #a86a2e;
  --esp-oliva:    #6f6b2b;
  --esp-verde:    #4a6741;
  --esp-azul:     #2f4a63;
  --esp-roxo:     #6a5560;

  color-scheme: light;
}


/* ══ 4. A PEDRA À NOITE — o SEGUNDO estado, não o padrão ══════════════════
   Não é um "tema escuro": é a mesma laje sob luz baixa. O fundo continua
   QUENTE (marrom de pedra, nunca azul de painel), o ouro brilha mais e o
   egeu dessatura em vez de estourar.

   O PADRÃO É A PEDRA CLARA (decisão do dono, 17/08/2026): é o mármore do
   reason.ia.br, e é nele que este painel foi calibrado — contraste, peso de
   filete, força do grão e o ouro de realce foram julgados PRIMEIRO no claro
   e só depois conferidos no escuro. Houve uma decisão anterior pelo escuro,
   revertida por ele ao ver na tela.

   Quem aplica o atributo antes da pintura é o script embutido no <head>
   (base.html), e o padrão dele é "light" — o mesmo resultado de quando não
   há JS nenhum, já que o Tabler inteiro é keyed em [data-bs-theme]. */
[data-bs-theme="dark"] {
  --pedra:       #141310;   /* entra aqui; compõe #191814 */
  --pedra-lisa:  #191814;
  --pedra-2:     #24211b;
  --pedra-3:     #2c2820;
  --linha:       #39342a;
  --linha-forte: #4a4335;

  --tinta:       #e6e0d0;   /* 13,5:1 */
  --tinta-fraca: #a29a87;   /* 6,4:1 */

  --egeu:        #8ba3b8;   /* 7,0:1 */
  --sinal:       #726b60;

  --luz:         rgba(255, 250, 235, .055);
  --sulco:       rgba(0, 0, 0, .50);
  --luz-letra:   rgba(255, 250, 235, .045);
  --sulco-letra: rgba(0, 0, 0, .45);
  --luz-filete:  rgba(255, 250, 235, .035);

  --vinheta:     rgba(255, 244, 222, .05);
  /* multiply sobre pedra quase preta só empasta; soft-light devolve as
     duas faces do grão (divergência da carta §5, herdada do portal). */
  --grao-mistura: soft-light;
  --grao-op:     .5;

  /* as seis espécies, claras o bastante para 3:1 como fio */
  --esp-vermelho: #c2705f;
  --esp-laranja:  #c99a55;
  --esp-oliva:    #b3ac6a;
  --esp-verde:    #86a077;
  --esp-azul:     #8ba3b8;
  --esp-roxo:     #a893a5;

  color-scheme: dark;
}


/* ══ 5. A PONTE COM O TABLER ══════════════════════════════════════════════
   O melhor negócio da folha: o Tabler deriva quase tudo de meia dúzia de
   variáveis. Redefinindo-as aqui, centenas de regras dele passam a falar
   pedra sem eu tocar em uma linha delas. O que não sai por variável (raio,
   sombra, foco) vem depois, na marra e comentado. */
:root,
[data-bs-theme="dark"] {
  --tblr-body-bg:        var(--pedra);
  --tblr-body-color:     var(--tinta);
  --tblr-border-color:   var(--linha);
  --tblr-border-color-translucent: var(--linha);
  --tblr-secondary:      var(--tinta-fraca);
  --tblr-muted:          var(--tinta-fraca);
  --tblr-primary:        var(--ouro);
  --tblr-link-color:     var(--egeu);
  --tblr-link-hover-color: var(--ouro);
  --tblr-heading-color:  var(--tinta);
  --tblr-emphasis-color: var(--tinta);
  --tblr-border-radius:  0;
  --tblr-border-radius-sm: 0;
  --tblr-border-radius-lg: 0;
  --tblr-border-radius-xl: 0;
  --tblr-body-font-family: var(--f-texto);

  /* CORPO A 16px, e não os 14px do Tabler. A conta é de altura de x, que é
     o que o olho mede: o Inter do Tabler tem x/corpo ≈ 0,52 e a 14px dá
     7,3px de x. A Cardo tem 0,44 — para chegar ao mesmo x precisaria de
     16,6px. A 16px ela dá 7,04px (96% do Inter a 14px): perde 4%, que é
     invisível, e ganha o piso de 16px que impede o Safari do iPhone de dar
     zoom ao focar um campo. Os `small` do painel (78 deles) caem em 14px
     de Cardo = 6,2px de x, contra 6,4 do Inter a 12,25px. Empatado. */
  --tblr-body-font-size: 1rem;
  --tblr-body-line-height: 1.5;

  /* as seis espécies também entram pelos tokens de cor do Tabler, o que
     conserta de graça .text-red, .bg-red-lt e os .sol-tarefa-cor-* */
  --tblr-red:    var(--esp-vermelho);
  --tblr-orange: var(--esp-laranja);
  --tblr-yellow: var(--esp-oliva);
  --tblr-green:  var(--esp-verde);
  --tblr-blue:   var(--esp-azul);
  --tblr-purple: var(--esp-roxo);
  --tblr-azure:  var(--egeu);
  --tblr-danger: var(--esp-vermelho);
  --tblr-success: var(--esp-verde);
  --tblr-warning: var(--esp-laranja);
}

/* SEM CANTO ARREDONDADO. A carta §2 é dura ("pedra não tem canto") e o
   Tabler declara border-radius em 191 lugares, muitos em seletor mais forte
   que o meu. Uma varredura é mais honesta (e mais curta) do que 191
   remendos. Vale inclusive para .rounded-circle: o Radar já decidiu isso
   ("quadrado, não bolinha") e o quadradinho de cor da tarefa fica melhor. */
*, *::before, *::after { border-radius: 0 !important; }

/* SEM SOMBRA DE ELEVAÇÃO. Nada de cartão flutuante: profundidade nesta
   folha é só entalhe. As sombras que ficam (o filete e o sulco interno)
   são declaradas uma a uma mais abaixo. */
.card, .btn, .btn-group, .form-control, .form-select, .input-group-text,
.dropdown-menu, .navbar, .alert, .modal-content, .progress, .accordion,
.accordion-button, .list-group, .badge, .empty, .table {
  box-shadow: none;
}


/* ══ 6. BASE — a laje, o grão e a vinheta ═════════════════════════════════ */
html {
  /* o fundo mora no <html>: no <body> ele seria propagado para o canvas e a
     camada de grão não teria o que misturar */
  background: var(--pedra);
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: transparent;
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: 1rem;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
}

/* grão e vinheta: duas camadas FIXAS na tela, atrás de tudo. Fixas porque o
   painel rola muito — no documento, a vinheta viraria um degradê de metros
   e o grão andaria junto com o texto (o efeito "papel de parede" que
   denuncia o truque). Consequência a lembrar: tudo que a página pinta
   (cartão escavado, campo, faixa) sai LISO sobre a pedra texturada, e por
   isso o contraste se mede contra o composto. */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
body::before {
  opacity: var(--grao-op);
  mix-blend-mode: var(--grao-mistura);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='p' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23p)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
body::after {
  background-image: radial-gradient(120% 55% at 50% -6%, var(--vinheta), transparent 62%);
}
/* o conteúdo mora acima das duas camadas */
.page, .navbar, .page-wrapper, .footer { position: relative; z-index: 1; }

::selection { background: var(--egeu); color: var(--pedra); }
[data-bs-theme="dark"] ::selection { color: #12110e; }

a { color: inherit; text-decoration: none; }
/* `.sol-ir-fora` fica de fora do filete de link: ele é um SINAL sozinho no canto
   da rubrica, e a linha embaixo de um ícone de 17px lê como caixa mal fechada,
   não como link sublinhado. */
.page-body a:not(.btn):not(.nav-link):not(.card-link):not(.list-group-item):not(.sol-ir-fora) {
  color: var(--egeu);                       /* LIGAÇÃO (§3) */
  border-bottom: 1px solid var(--linha-forte);
}
.page-body a:not(.btn):not(.nav-link):not(.card-link):not(.list-group-item):hover {
  border-bottom-color: var(--ouro);
}


/* ══ 7. ENTALHE E FILETE ══════════════════════════════════════════════════
   A letra não é escura sobre clara: é cavada. Duas sombras de 1px — uma
   clara embaixo (a luz que entra no sulco) e uma escura em cima.

   SÓ NAS LETRAS GRANDES. A carta §5 é explícita: em corpo miúdo o entalhe
   vira sujeira. O piso aqui é 22px, o que deixa de fora — de propósito —
   item de lista, rótulo, selo, data e todo o miúdo do registro.

   Direção VERTICAL, e não a diagonal da carta: o deslocamento horizontal
   de 1px cai em cima da haste da letra e sai como fio duplo; na vertical
   cai na serifa e some. Quem quiser a diagonal troca --entalhe-x. */
:root { --entalhe-x: 0px; }

.gravado,
.sol-marca,
.saudacao-titulo,
.page-title,
.sol-contadores .h1 {
  text-shadow: var(--entalhe-x) 1px 0 var(--luz-letra),
               calc(-1 * var(--entalhe-x)) -1px 0 var(--sulco-letra);
}

/* O FILETE é o único "relevo" da folha: uma linha de --linha com 1px de
   --luz-filete logo abaixo. Não é sombra de elevação; é a segunda parede
   do sulco. Não virou classe utilitária porque quem o desenha é sempre a
   borda de um elemento que já existe. O par a repetir é:
       border-bottom: 1px solid var(--linha);
       box-shadow:    0 1px 0 var(--luz-filete);
   e, quando a linha é interna, o mesmo com `inset`. */
.sol-filete {
  height: 1px;
  background: var(--linha);
  box-shadow: 0 1px 0 var(--luz-filete);
  border: 0;
  opacity: 1;
}


/* ══ 8. A BARRA — a rubrica do alto da laje ═══════════════════════════════
   Faixa gravada no alto: filete embaixo e nada mais. Opaca de propósito —
   com o grão por baixo, translucidez deixaria o texto da página aparecer
   sujo através dela (e a carta §2 proíbe backdrop-filter). */
.navbar {
  background: var(--pedra-lisa) !important;   /* .navbar-* do Tabler crava a cor */
  border: 0;
  border-bottom: 1px solid var(--linha);
  box-shadow: 0 1px 0 var(--luz-filete);
  padding-top: 0;
  padding-bottom: 0;
  min-height: 3.25rem;
}

/* A MARCA é o NOME, e só. Sem retrato, sem emblema: o nome desta instância
   já está gravado na estela do portal (SOLOMON, IRIS), e repeti-lo aqui na
   mesma capital espacejada é o que amarra o painel ao mundo em que ele
   passou a viver. Vale para as três instâncias sem uma linha condicional —
   um sinal desenhado teria de ser três.
   Tinta CHEIA, e não a "quase pedra" da inscrição grande: a 15px aquela
   tinta fraca reprovaria em contraste (é a mesma regra do Radar). */
.navbar-brand,
.navbar-brand-text,
.sol-marca {
  font-family: var(--f-inscricao);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--esp-marca);
  padding-right: var(--esp-marca);   /* compensa o vão da última letra */
  color: var(--tinta);
}
.navbar-brand:hover .navbar-brand-text {
  color: var(--tinta);
  box-shadow: 0 1px 0 var(--ouro);   /* filete, não troca de tinta: ver §3 */
}

/* No monitor a navegação corre para a DIREITA, como na barra do Radar: o
   nome fica sozinho no canto esquerdo (é a marca, não o primeiro item de um
   menu) e as guias juntam-se às ferramentas do outro lado. Sem isto o nome
   e a primeira guia leem-se como uma frase só — "SOLOMON HOJE". */
@media (min-width: 768px) {
  /* o seletor precisa ser tão forte quanto o do Tabler
     (.navbar-expand-md .navbar-collapse), senão a regra não pega */
  .navbar-expand-md .navbar-collapse {
    margin-left: auto;
    flex-grow: 0;
    flex-basis: auto;
  }
  .navbar .navbar-nav > .nav-item { margin-left: .1rem; }
  /* um vão firme entre as guias e as ferramentas do canto */
  .navbar .navbar-nav.flex-row.order-md-last { margin-left: 1.5rem !important; }
}

/* A BARRA APERTADA (tablet, 768–991px). MEDIDO: com a guia TERAPIA — a sexta —
   a barra estourava 28px a 768px, e a página inteira passava a rolar na
   horizontal (o `navbar-expand-md` abre as guias exatamente a partir daí).
   Em vez de empurrar tudo para o hambúrguer até 992px — o que tiraria a
   navegação de quem usa iPad —, fecha-se o espacejamento e o vão: é o mesmo
   gesto do §23 na tela estreita, e as capitais continuam espacejadas. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .navbar .nav-link { font-size: .72rem; padding-left: .3rem; padding-right: .3rem; letter-spacing: .08em; }
  .navbar .navbar-nav.flex-row.order-md-last { margin-left: .6rem !important; }
  .navbar .navbar-nav > .nav-item { margin-left: 0; }
  .navbar .btn-ghost-secondary.btn-sm { padding-left: .35rem; padding-right: .35rem; }
  /* aqui a palavra da volta ao portal sai e fica só o guilhemete (o alvo continua
     de 44px): os ~48px que ela devolve pagam o VÃO entre a marca e a primeira
     guia. Sem esse vão, "SOLOMON" e "HOJE" encostavam e liam-se como uma frase
     só — o defeito que a §8 já tinha nomeado quando a navegação foi para a
     direita. O vão vale mais do que a palavra: a palavra tem o `title`. */
  .sol-voltar-nome { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .sol-voltar { margin-right: .5rem; padding-left: .25rem; padding-right: .25rem; }
  .sol-voltar-sinal { font-size: 1.4em; }
  .navbar-expand-md .navbar-collapse { padding-left: 1.1rem; }
}

/* navegação: guias gravadas, separadas por filete. O estado atual é o sulco
   de ouro embaixo — sem pílula, sem fundo, sem negrito. */
.navbar .nav-link {
  font-family: var(--f-inscricao);
  font-size: .78rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--esp-rotulo);
  color: var(--tinta-fraca);
  padding: .55rem .5rem calc(.55rem - 1px);
  border-bottom: 1px solid transparent;
  transition: color 120ms ease, border-color 120ms ease;
}
.navbar .nav-link:hover { color: var(--tinta); border-bottom-color: var(--linha-forte); }
.navbar .nav-item.active .nav-link,
.navbar .nav-link.active { color: var(--tinta); border-bottom-color: var(--ouro); }
/* o Tabler marca a aba ativa com uma barra própria; ela sai */
.navbar .nav-item.active .nav-link::after,
.navbar .nav-link.active::after { display: none; }
/* o ícone da navegação sai: o nome basta, e ícone de biblioteca é
   justamente o que a carta §2 proíbe (ver §17 para o critério completo) */
.navbar .nav-link-icon { display: none; }

.navbar-toggler {
  border: 0;
  color: var(--tinta-fraca);
  min-width: 44px;
  min-height: 44px;
  padding: 0;
}
.navbar-toggler:hover { color: var(--tinta); }
/* o hambúrguer do Tabler é uma imagem de fundo com a cor cravada, E um
   fundo próprio por baixo dela — zerar só a imagem deixa um quadrado
   chapado no lugar (foi o que apareceu na primeira captura a 390px). Aqui
   ele vira três filetes desenhados, que é o mesmo gesto da página. */
.navbar-toggler-icon {
  background: none !important;
  display: block;
  width: 20px;
  height: 13px;
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  position: relative;
}
.navbar-toggler-icon::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  border-top: 1px solid currentColor;
}

/* A VOLTA AO PORTAL. O painel mora dentro de reason.ia.br, e daqui se volta à
   estela. É um gesto, não um destino do menu: capital miúda em tinta fraca, à
   esquerda da marca, com o guilhemete separado por um vão fixo. Na tela
   estreita fica só o sinal — o alvo continua de 44px. */
.sol-voltar {
  display: inline-flex;
  align-items: baseline;
  gap: .35em;
  margin-right: .9rem;
  padding: .55rem .1rem;
  font-family: var(--f-inscricao);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: var(--esp-rotulo);
  color: var(--tinta-fraca);
  border-bottom: 1px solid transparent;
  transition: color 120ms ease, border-color 120ms ease;
}
.sol-voltar:hover { color: var(--tinta); border-bottom-color: var(--ouro); }
.sol-voltar-sinal { font-size: 1.15em; line-height: 1; }
@media (max-width: 23rem) {
  /* iPhone MUITO estreito (SE, 320px): a barra carrega hambúrguer + volta +
     marca + duas ferramentas. A palavra sai, o sinal fica (e cresce para
     continuar tocável).
     O corte estava a 27rem, o que apagava a palavra também no iPhone comum
     (390px = 24,4rem) — e ali sobrava largura: medido, a barra fecha em ~300px
     com a palavra inteira. Sem ela ficava um "‹ SOLOMON" que se lia como parte
     da marca, e não como a porta de saída. */
  .sol-voltar-nome { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .sol-voltar { margin-right: .5rem; padding-left: .25rem; padding-right: .25rem; }
  .sol-voltar-sinal { font-size: 1.5em; }
}

/* O RODAPÉ fecha o registro: um filete, o selo e mais nada.
   A FRASE SAIU. Ele dizia "SOLOMON · SEU ASSISTENTE PESSOAL", e a carta-mãe
   (§2) proíbe texto explicativo — "o nome basta; silêncio é o conteúdo" —,
   ainda por cima repetindo o nome que já está gravado na barra. */
/* O COLOFÃO SEGUE O DOCUMENTO, NÃO A JANELA. Estava com `margin-top: auto`, e
   numa página curta (Capacidades, Memória, Teologia) isso empurrava o filete e o
   selo para o rodapé da JANELA: sobravam 600px de pedra vazia entre a última
   linha do registro e um camafeu de 104px boiando sozinho no fim da tela —
   exatamente o "elemento que flutua sem assentar" que a carta persegue. Um
   documento acaba onde o texto acaba, e o lacre vem logo depois; o papel em
   branco que sobra fica DEPOIS do lacre, que é a ordem certa. */
/* e o corpo da página para de ESTICAR para preencher a janela: o Tabler lhe dá
   `flex: 1` dentro do `.page-wrapper`, o que empurrava o rodapé para baixo mesmo
   sem o `mt-auto`. Sem o estica, o registro tem a altura do que está escrito. */
.page-body { flex: 0 1 auto; }

.footer {
  margin-top: 3.25rem;
  border-top: 1px solid var(--linha);
  box-shadow: inset 0 1px 0 var(--luz-filete);
  background: transparent;
}
.footer .text-center {
  font-family: var(--f-inscricao);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: var(--esp-rotulo);
  color: var(--tinta-fraca);
}

/* O COLOFÃO: o selo ao pé da página, centrado, com ar dos dois lados. É o
   único lugar do painel onde uma IMAGEM entra, e ele foi escolhido porque é o
   único que não disputa com dado nenhum e não se move com o volume do dia —
   um selo parado no meio de uma coluna seria o "cartão flutuante" que a carta
   §2 expulsa. Ver DESIGN-SOLOMON.md §8. */
.sol-colofao { display: flex; justify-content: center; padding: 1.4rem 0 1.7rem; }

/* O CAMAFEU. A única imagem da casa, e ela entra porque é da MESMA matéria da
   laje: mármore sobre mármore. (O retrato dourado anterior trazia iluminação e
   textura próprias e lia como corpo estranho — é a objeção da carta-mãe §10.)
   NÃO leva box-shadow: o relevo já está talhado no arquivo, e sombra de
   elevação é proibida. Nome distinto de `.sol-selo` de propósito — aquele é o
   selo de TEXTO em versalete (§14); este é a peça de pedra.
   Piso de tamanho: abaixo de ~96px o camafeu some contra o mármore claro
   (medido), então ele nunca é ícone miúdo — nem na barra, nem numa linha. */
.sol-camafeu {
  display: block;
  height: auto;
  max-width: 100%;
  user-select: none;
  -webkit-user-drag: none;
}
.sol-colofao .sol-camafeu,
.sol-camafeu-abertura { width: 104px; opacity: .92; }
/* à noite o marfim é a coisa mais clara da tela; um véu o traz de volta ao
   tom de lacre, para ele não brilhar mais alto que o registro */
[data-bs-theme="dark"] .sol-colofao .sol-camafeu,
[data-bs-theme="dark"] .sol-camafeu-abertura { opacity: .78; }
/* na porta ele é peça de vitrine: cresce com a tela, com teto e piso.
   O termo de ALTURA entrou quando a porta do Solomon passou a ter dois campos
   (usuário e senha): numa tela baixa — celular deitado, janela curta — o selo,
   o nome, as duas fendas e a palavra não cabem juntos, e é o selo que deve
   ceder. O piso continua sendo o do §8 (abaixo de ~96px ele some no mármore),
   por isso 104px e não menos. */
.sol-frontao .sol-camafeu {
  width: clamp(104px, min(38vw, 24vh), 164px);
  margin: 0 auto clamp(.9rem, 3.5vh, 1.5rem);
}


/* ══ 9. O CABEÇALHO DA PÁGINA — a data como rubrica ═══════════════════════ */
.page-header { margin-bottom: 1.2rem; }

/* A ABERTURA: o selo na margem e, ao lado, a data e a saudação (home.html).
   Decisão do dono, 17/08/2026 — a efígie subiu da página para o alto dela.
   POR QUE AO LADO, E À ESQUERDA. As duas objeções que a mantinham no pé
   continuam de pé e são atendidas aqui, não ignoradas: acima do nome ela vira o
   lockup de três andares que a carta-mãe §10 recusou (selo, nome, filete), e
   dentro de uma coluna do registro ela vira cartão flutuando sobre dados que
   mudam de altura. Na margem esquerda do cabeçalho ela não faz nem uma coisa nem
   outra: é a MARCA DE MARGEM do §1 — o selo carimbado ao lado da linha de
   abertura —, alinhada à mesma aresta que todos os campos abaixo dela.
   NO MEIO (entre a saudação e as somas) ela NÃO vai, e o argumento já está
   escrito nesta carta: foi o mesmo defeito do filete "solto no meio da página"
   (§15) — um objeto sem nada por baixo, sem aresta com que se alinhar.
   O bloco fecha em 104px, que é o piso do §8 (abaixo disso o camafeu some no
   mármore claro), e é a MESMA medida no celular: encolher seria trocar um selo
   por uma mancha. O que cede na tela estreita é o vão, não a peça. */
.sol-abertura { display: flex; align-items: center; gap: 1.1rem; }
.sol-abertura-texto { min-width: 0; }
.sol-camafeu-abertura { flex: none; }
@media (max-width: 34rem) { .sol-abertura { gap: .8rem; } }
.page-pretitle {
  font-family: var(--f-inscricao);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: var(--esp-rotulo);
  color: var(--tinta-fraca);
}
.page-title,
.saudacao-titulo {
  font-family: var(--f-inscricao);
  font-weight: 400;
  font-size: 1.9rem;
  line-height: 1.15;
  letter-spacing: .01em;
  color: var(--tinta);
}

/* os contadores do alto: a única exibição de dado da casa, no molde do
   Radar — número grande em EB Garamond (isolado, não alinha com ninguém) e
   rótulo em capital miúda, sobre um filete. */
.sol-contadores {
  border-top: 1px solid var(--linha);
  box-shadow: inset 0 1px 0 var(--luz-filete);
  padding-top: .9rem;
  margin-top: .2rem;
}
/* NO MONITOR O FILETE CORRE A PÁGINA INTEIRA. Achado na revisão: com a saudação
   à esquerda e os contadores à direita, o filete DELES começava no meio da
   página, no ar, sem nada por baixo da ponta esquerda — uma linha solta, que é
   justamente o que um registro não tem. O mesmo filete, levado para o pé do
   cabeçalho inteiro, deixa de ser enfeite de um bloco e vira a PAUTA da página:
   data e saudação em cima dele, campos embaixo. Na tela estreita nada muda —
   ali os contadores ficam ABAIXO da saudação, e o filete entre os dois é o que
   os separa. */
@media (min-width: 768px) {
  .page-header > .container-xl {
    border-bottom: 1px solid var(--linha);
    box-shadow: 0 1px 0 var(--luz-filete);
    padding-bottom: .85rem;
  }
  .sol-contadores { border-top: 0; box-shadow: none; padding-top: 0; margin-top: 0; }
}
.sol-contadores .h1 {
  font-family: var(--f-inscricao);
  font-weight: 400;
  font-size: 1.75rem;
  line-height: 1.1;
  color: var(--tinta);
}
.sol-contadores .small {
  font-family: var(--f-inscricao);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: var(--esp-rotulo);
  color: var(--tinta-fraca);
}

/* "Dia vencido": a linha de arremate sob a saudação, no estado do AGORA.
   A LETRA NÃO É DE OURO, e isto foi medido: #927639 sobre a pedra clara dá
   3,88:1, que reprova em corpo miúdo (AA pede 4,5). Quem carrega a cor é o
   FIO — exatamente a regra do contrato de cor (§3) e a mesma solução dos
   selos (§14). No escuro o ouro daria 7,9:1 e passaria, mas as duas peles
   seguem a mesma regra, senão o desenho vira dois desenhos. */
.sol-dia-vencido {
  font-family: var(--f-inscricao);
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: var(--esp-rotulo);
  color: var(--tinta);
  border-left: 2px solid var(--ouro);
  padding-left: .5em;
  display: inline-block;
}


/* ══ 10. O CARTÃO VIRA CAMPO DO REGISTRO ══════════════════════════════════
   Sem sombra e sem canto, a separação vem de filete + fundo. Cada campo
   fecha a própria moldura de 1px (a alternativa — grelha contínua com gap
   de filete — foi descartada no Radar porque a célula vazia da última
   fileira aparece como bloco chapado).

   O fundo é --pedra-lisa e não transparente: são doze campos numa grade de
   duas colunas, e sem uma superfície própria o olho não sabe onde um acaba
   e o outro começa. Ele é LISO (o grão fica por baixo), o que já dá a
   diferença de textura contra a laje em volta — é o mesmo recurso da faixa
   de hover do portal, e custa zero contraste. */
.card {
  background: var(--pedra-lisa);
  border: 1px solid var(--linha);
  color: var(--tinta);
}
.card-sm { background: transparent; }

/* A RUBRICA DO CAMPO. Capital miúda espacejada sobre um filete FORTE — o
   marco mais firme da vertical, sem competir por tamanho de letra com o
   conteúdo (a lição do Radar: rubrica grande grita mais alto que a
   notícia). Sem negrito: a hierarquia sai de caixa e espacejamento. */
.card-header {
  min-height: 0;
  padding: .5rem .75rem .45rem;
  background: transparent;
  border-bottom: 1px solid var(--linha-forte);
  box-shadow: 0 1px 0 var(--luz-filete);
  /* o cabeçalho carrega rubrica + dica + selo na mesma linha; sem um vão
     firme a dica encosta no selo e os dois leem-se como uma palavra só */
  gap: .6rem;
  align-items: baseline;
}
/* a dica do cabeçalho é instrução de uso: some antes de tudo quando aperta */
.card-header .small { color: var(--tinta-fraca); font-size: .75rem; }
.card-title {
  font-family: var(--f-inscricao);
  font-weight: 400;
  font-size: .82rem;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: var(--esp-rotulo);
  padding-right: var(--esp-rotulo);
  color: var(--tinta);
  margin: 0;
}
.card-body { padding: .75rem; }
.card-footer { background: transparent; border-top: 1px solid var(--linha); }

/* o cartão que é link (as Capacidades) escava no hover, não levanta */
.card-link, a.card {
  transition: background-color 120ms ease, border-color 120ms ease;
}
.card-link:hover, a.card:hover {
  background: var(--pedra-2);
  border-color: var(--linha-forte);
}

/* estado vazio: uma linha de tinta fraca, sem caixa e sem ilustração.
   A MEDIDA é limitada pela mesma razão da Memória: esses textos trazem exemplos
   ("ex.: quero ler todo dia…") e, num campo de 1.100px, viravam parágrafos de
   150 caracteres por linha — prosa larga demais para uma frase de recado. */
.card-body.fst-italic, .sol-col-vazia, .empty-subtitle {
  color: var(--tinta-fraca);
}
.card-body.fst-italic { max-width: 44rem; }
/* o bloco de estado vazio do Tabler vem CENTRADO; num registro tudo assenta na
   margem esquerda, e um bloco centrado no meio de uma coluna de listas lê como
   caixa de diálogo. Só o alinhamento muda — a ilustração já saía. */
.empty { padding: 1.25rem .75rem; text-align: left; }
.empty-action { justify-content: flex-start; }
.empty-title { font-family: var(--f-inscricao); font-weight: 400; font-size: 1rem; }
.empty-icon { display: none; }   /* ilustração de estado vazio: fora (§17) */


/* ══ 11. AS LINHAS DO REGISTRO ════════════════════════════════════════════
   A lista é o coração do painel. Uma linha por item, separadas por filete,
   e o hover APROFUNDA o sulco em vez de levantar o item. Nada se desloca no
   hover — deslocamento em hover é amadorismo. */
.list-group,
.list-group-flush { background: transparent; }

.list-group-item {
  background: transparent;
  color: var(--tinta);
  border: 0;
  border-bottom: 1px solid var(--linha);
  box-shadow: 0 1px 0 var(--luz-filete);
  padding: .42rem .75rem;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.list-group-item:last-child { border-bottom: 0; box-shadow: none; }
.list-group-item:hover { background: var(--pedra-2); }

/* o item marcável (tarefa, hábito, oração) — ver §12 para a marca */
.sol-tarefa-card {
  border-bottom: 1px solid var(--linha);
  box-shadow: 0 1px 0 var(--luz-filete);
  border-left: 3px solid transparent;   /* a margem da espécie (§13) */
  padding: .4rem .5rem;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.sol-tarefa-card:hover { background: var(--pedra-2); }

/* DESTAQUE (a tarefa fixada) = o AGORA, então é ouro — mas como fio à
   esquerda e tinta cheia, não como fundo dourado. Fundo de cor chapado é
   o que a carta chama de pílula.
   O fio de ouro entra AQUI, antes das seis espécies (§13), de propósito: se a
   tarefa tem espécie, a espécie manda na margem (ela é a informação mais
   rara), e o destaque continua dito pelo bloco escavado + o selo FIXA. */
.sol-tarefa-destaque {
  background: var(--pedra-2);
  border-left-color: var(--ouro);
  box-shadow: inset 0 1px 0 var(--sulco), inset 0 -1px 0 var(--luz);
}

/* LINHA COM FIO DE ESPÉCIE (cobrança, pagamentos): a mesma margem marcada da
   tarefa, para uma linha que não é cartão de tarefa. Reaproveita as classes
   .sol-tarefa-cor-* — uma cor só tem um lugar nesta folha. */
/* ⚠️ MEDIDO: o Tabler traz `.list-group-flush > .list-group-item{border-width:0 0 1px}`,
   que é 0,2,0 e zerava a margem daqui (o fio saía com 3px de cor e 0 de largura —
   invisível, e a captura não denunciava). Por isso a LARGURA vem num seletor
   igualmente forte, e a COR fica sozinha em 0,1,0, para as .sol-tarefa-cor-*
   (§13, mais abaixo no arquivo) continuarem vencendo por ordem. */
.list-group-item.sol-linha-fio,
.sol-linha-fio { border-left-style: solid; border-left-width: 3px; }
.sol-linha-fio { border-left-color: transparent; }

/* AS DUAS COLUNAS de tarefas/orações, separadas por um filete vertical — a
   pauta do livro-razão. O par grid/col é LAYOUT, não enfeite: sem ele os
   dois grupos empilham e o arrasto entre colunas perde o alvo. */
.sol-tarefas-grid { display: flex; align-items: stretch; }
.sol-tarefas-col {
  flex: 1 1 0;
  min-width: 0;
  min-height: 3rem;        /* continua sendo alvo de solta mesmo vazia */
}
.sol-tarefas-col + .sol-tarefas-col { border-left: 1px solid var(--linha); }
/* cadeia de truncagem do título dentro do cartão */
.sol-tarefa-card > .d-flex, .sol-tarefa-sum { min-width: 0; }
.sol-col-vazia {
  font-style: normal;
  opacity: 1;
  font-size: .78rem;
  text-align: center;
  padding: 1rem .25rem;
  color: var(--tinta-fraca);
}

/* AS COLUNAS EMPILHAM NA TELA ESTREITA, e o ponto de virada tem número.
   Medido no espécime: um título real de tarefa ("Ligar para o contador sobre
   o IR") pede ~210px para caber numa linha. Num iPhone de 390px cada coluna
   fica com ~150px úteis, e o resultado medido foi título em CINCO linhas com
   o selo cortado ao meio — pior do que qualquer perda de arranjo. Duas
   colunas precisam de ~480px de folha para funcionar; abaixo disso, pilha.

   O que se perde: as duas faixas são livres (o modelo só as chama de
   `esquerda` e `direita`, sem rótulo — quem lhes dá sentido é o Bruno
   arrastando), então empilhadas elas viram um bloco só separado por filete,
   e a distinção esquerda/direita fica mais fraca. A ordem se mantém: o que
   estava à esquerda fica em cima. Está anotado nas Pendências da carta para
   o dono vetar se quiser.

   A ORAÇÃO empilha mais cedo (576px), como já era: tópico de oração é frase
   longa, não título curto. O app.js decide pelo eixo Y quando percebe as
   colunas empilhadas, então o arrasto continua valendo nos dois casos. */
@media (max-width: 29.99rem) {
  .sol-tarefas-grid { flex-direction: column; align-items: stretch; }
  .sol-tarefas-grid > .sol-tarefas-col { flex: 0 0 auto; width: 100%; min-height: 2rem; }
  .sol-tarefas-grid > .sol-tarefas-col + .sol-tarefas-col {
    border-left: 0;
    border-top: 1px solid var(--linha-forte);
  }
}
/* NA FAIXA ESTREITA A ORAÇÃO EMPILHA SEMPRE, e não é gosto: o ponto de virada
   acima é medido em VIEWPORT, e a coluna estreita tem ~430px de conteúdo mesmo
   num monitor de 1440. Sem esta regra os dois grupos ficavam com ~200px cada e a
   frase saía cortada em duas palavras ("Pela saú…"), que é justamente o defeito
   que o corte de 576px existe para evitar. Empilhada, ela é uma lista de frases
   numa coluna — a forma que a faixa estreita pede (§7-A). O arrasto continua
   valendo: o app.js decide pelo eixo Y quando percebe as colunas empilhadas. */
.sol-faixa-estreita .sol-oracoes-grid { flex-direction: column; align-items: stretch; }
.sol-faixa-estreita .sol-oracoes-grid > .sol-tarefas-col { flex: 0 0 auto; width: 100%; }
.sol-faixa-estreita .sol-oracoes-grid > .sol-tarefas-col + .sol-tarefas-col {
  border-left: 0;
  border-top: 1px solid var(--linha);
}
@media (max-width: 575.98px) {
  .sol-oracoes-grid { flex-direction: column; align-items: stretch; }
  /* em coluna, o `flex: 1 1 0` herdado viraria ALTURA base 0 e os grupos se
     sobreporiam: aqui cada um ocupa a largura toda e a própria altura */
  .sol-oracoes-grid > .sol-tarefas-col { flex: 0 0 auto; width: 100%; }
  .sol-oracoes-grid > .sol-tarefas-col + .sol-tarefas-col {
    border-left: 0;
    border-top: 1px solid var(--linha);
  }
}

/* o selo nunca é espremido até cortar: ele é dado, não enfeite */
.sol-tarefa-card .badge, .list-group-item .badge { flex: none; }

/* título do item: Cardo, porque é conteúdo e se lê */
.sol-tarefa-sum, .sol-oracao-texto, .sol-edit-titulo {
  font-family: var(--f-texto);
}

/* O TÍTULO DA TAREFA QUEBRA, NÃO CORTA. Ele vinha com `text-truncate`, e a
   revisão mediu o estrago: a 1440px, num campo de 740px, "Comprar o presente da
   Mariana" saía "Comprar o presente da …" (181px de 214 disponíveis); a 390px
   sobrava "Comprar o prese…". Reticências num registro são pior do que uma
   segunda linha: a linha ocupa 21px a mais UMA vez, a reticência esconde a
   informação SEMPRE, e ainda por cima esconde o fim, que é onde mora o nome
   próprio ("…sobre o IR", "…da Mariana"). Duas linhas, e o que passar disso
   ainda corta — mas aí já é texto que não cabe em cartão nenhum.
   Mesmo molde do `.sol-oracao-texto`, que já resolvia isto para a oração. */
/* A FILEIRA DO ITEM NÃO QUEBRA — e isto foi testado nos dois sentidos. Com
   `flex-wrap: wrap` a tarefa de quatro selos ficava perfeita (os selos desciam
   para a segunda linha e o título ficava inteiro), MAS a linha comum passava a
   quebrar também: bastavam dois selos para o chevron descer sozinho, pendurado
   embaixo do título, em quase toda tarefa. Otimizar o caso raro estragando o
   caso de todo dia é troca ruim. Fica sem quebra: o título encolhe e o corte
   dele são as DUAS LINHAS do `.sol-titulo-2l`, que é bem menos violento do que
   as reticências de uma linha só que havia antes.
   Limite conhecido, medido: com QUATRO selos na mesma linha (subtarefas + nota +
   data + aviso) o título fica com ~90px. Ver DESIGN-SOLOMON.md §15. */

.sol-titulo-2l {
  min-width: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
  line-height: 1.3;
  /* o título é também o ALVO de edição no lugar (clique para renomear). Com a
     entrelinha fechada em 1,3 ele caía a 21px de altura — abaixo do piso de 24
     que a auditoria cobra —, e dois pixels de respiro devolvem o alvo sem mexer
     no desenho da linha. Vale o mesmo para o nome do item (§11). */
  padding-block: 2px;
}

/* NOME DO ITEM dentro de um sub-cartão (hábito, meta, livro). Vinha em
   `fw-bold`/`fw-semibold`, e a §3 é dura: "hierarquia por escala, caixa e
   espacejamento — nunca por peso pesado". Havia um agravante MEDIDO: a Cardo
   local só tem 400 e 700, então o `fw-semibold` (600) caía no 700 — negrito
   cheio de serifa a 16px, que num registro lê como grito. A distinção volta a
   sair de onde deve: meio ponto de corpo a mais e a tinta cheia contra a linha
   de baixo, que é miúda e fraca. */
.sol-item-nome {
  font-family: var(--f-texto);
  font-weight: 400;
  font-size: 1.06rem;
  line-height: 1.25;
  color: var(--tinta);
  padding-block: 2px;   /* alvo de edição no lugar: ver .sol-titulo-2l */
}
.sol-edit-titulo:hover { text-decoration: underline dotted; text-underline-offset: 2px; }

/* item concluído: o registro não apaga, ele risca */
.text-decoration-line-through, .sol-some .fw-bold, .sol-some > span {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  color: var(--tinta-fraca);
}


/* ══ 12. A MARCA DE FEITO — o quadrado gravado ════════════════════════════
   O controle mais tocado do painel. Ele chega como ícone redondo de
   biblioteca (ti-circle / ti-circle-check) e é a coisa que mais grita
   "Tabler" na tela.

   NÃO DÁ PARA TIRAR O ÍCONE: o app.js troca as duas classes para marcar e
   desmarcar, e ainda exige um <i class="ti"> dentro do botão para pendurar
   o girador. Então o caminho é outro — a CLASSE FICA, o desenho muda: o
   glifo da fonte é anulado (content:"") e no lugar dele fica uma CAIXA
   quadrada escavada, com o visto em ouro quando marcada.

   Quadrado, e não bolinha, pela mesma razão do Radar: a pedra não tem canto
   redondo. */
.ti-circle::before,
.ti-circle-check::before { content: ""; }

.ti-circle,
.ti-circle-check {
  display: inline-block;
  position: relative;
  width: 15px;
  height: 15px;
  vertical-align: -2px;
  background: var(--pedra-3);
  border: 1px solid var(--linha-forte);
  box-shadow: inset 0 1px 0 var(--sulco), inset 0 -1px 0 var(--luz);
  transition: border-color 120ms ease;
}
.btn:hover .ti-circle, .btn:hover .ti-circle-check { border-color: var(--ouro); }

/* o visto: duas paredes de 1,5px giradas 45°, em ouro */
.ti-circle-check::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: 1.5px solid var(--ouro);
  border-top: 0;
  border-left: 0;
  transform: rotate(42deg);
}
/* o app.js pinta a marca de verde ao concluir; aqui quem fala é o ouro (o
   contrato de cor §3 não tem verde de sucesso), então a cor de texto que
   ele troca não vale para a caixa */
.ti-circle.text-green, .ti-circle-check.text-green,
.ti-circle.text-secondary, .ti-circle-check.text-secondary { color: inherit; }


/* ══ 13. AS SEIS ESPÉCIES DE TAREFA ═══════════════════════════════════════
   Divergência declarada da carta §3 (três matizes mais neutros): o dono
   atribuiu significado a seis cores — vermelho urgente, laranja
   importante, amarelo esperando alguém, verde rápida, azul trabalho, roxo
   pessoal (ADR 2026-07-22). Cor com significado atribuído pelo dono manda
   mais do que economia de paleta; o que dá para fazer é RECORTÁ-LAS NA
   PEDRA e conter o uso:

     · matizes terrosos, dessaturados, todos no mesmo valor — nada de
       primária de framework;
     · aparecem SÓ como fio de 3px na margem esquerda da linha, nunca como
       fundo chapado (é o mesmo tratamento que o Radar dá à área temática);
     · o amarelo virou OLIVA de propósito: amarelo ao lado do ouro
       confundiria a espécie "esperando alguém" com o sinal de AGORA, que é
       o único que o olho deve procurar;
     · o roxo é a segunda divergência (a carta §2 proíbe roxo/violeta). Ele
       fica porque carrega significado do dono, mas entra ameixa
       acinzentado, longe do violeta de neon que a proibição mira. */
.sol-tarefa-cor-vermelho { border-left-color: var(--esp-vermelho); }
.sol-tarefa-cor-laranja  { border-left-color: var(--esp-laranja); }
.sol-tarefa-cor-amarelo  { border-left-color: var(--esp-oliva); }
.sol-tarefa-cor-verde    { border-left-color: var(--esp-verde); }
.sol-tarefa-cor-azul     { border-left-color: var(--esp-azul); }
.sol-tarefa-cor-roxo     { border-left-color: var(--esp-roxo); }

/* o seletor de cor: quadradinhos gravados, não bolinhas.
   MEDIDO: a 14px eles eram alvo de 14x14 — metade do mínimo, e são tocados no
   celular. Vão a 18px e a margem própria abre espaço para a área ampliada de
   24x24 do pseudo-elemento caber SEM invadir o quadrado vizinho. */
.sol-cor-btn, .sol-cor-selo {
  width: 18px;
  height: 18px;
  margin: 2px;
  border: 1px solid var(--linha-forte);
  padding: 0;
  position: relative;
}
.sol-cor-btn::after { content: ""; position: absolute; inset: -3px; }
.sol-cor-nenhuma { background: var(--pedra-3); color: var(--tinta-fraca); font-size: .7rem; }
.sol-cor-ativa { outline: 2px solid var(--ouro); outline-offset: 1px; }


/* ══ 14. SELOS — o badge vira selo gravado ════════════════════════════════
   O Tabler entrega pílulas de fundo pastel (bg-*-lt). Aqui o selo é capital
   miúda com um FIO à esquerda: a letra é sempre --tinta-fraca (que passa AA
   em corpo miúdo) e quem carrega a cor é o fio de 2px, onde 3:1 basta.
   É o padrão do Radar, e ele resolve de uma vez os 21 badges do painel sem
   tocar em nenhum template. */
.badge {
  font-family: var(--f-inscricao);
  font-weight: 400;
  font-size: .68rem;
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: var(--esp-nome);
  padding: 0 0 0 .5em;
  color: var(--tinta-fraca) !important;   /* .bg-*-lt do Tabler crava a cor */
  background: transparent !important;
  border-left: 2px solid var(--linha);
  white-space: nowrap;
}
.badge.bg-primary-lt, .badge.bg-primary  { border-left-color: var(--ouro); color: var(--tinta) !important; }
.badge.bg-green-lt,   .badge.bg-green    { border-left-color: var(--esp-verde); }
.badge.bg-orange-lt,  .badge.bg-orange   { border-left-color: var(--esp-laranja); }
.badge.bg-red-lt,     .badge.bg-red      { border-left-color: var(--esp-vermelho); }
.badge.bg-yellow-lt,  .badge.bg-yellow   { border-left-color: var(--esp-oliva); }
.badge.bg-azure-lt,   .badge.bg-azure    { border-left-color: var(--egeu); }
.badge.bg-blue-lt,    .badge.bg-blue     { border-left-color: var(--esp-azul); }
.badge.bg-purple-lt,  .badge.bg-purple   { border-left-color: var(--esp-roxo); }
.badge.bg-secondary-lt { border-left-color: var(--linha); }

/* SELO PRÓPRIO, para quem escrever marcação nova (o molde do Radar) */
.sol-selo {
  display: inline-block;
  font-family: var(--f-inscricao);
  font-size: .68rem;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: var(--esp-nome);
  white-space: nowrap;
  padding: 0 0 0 .5em;
  border-left: 2px solid var(--linha);
  color: var(--tinta-fraca);
}
.sol-selo.forte { border-left-color: var(--ouro); color: var(--tinta); }
.sol-selo.enf   { border-left-color: var(--linha-forte); }


/* ══ 15. BARRA DE PROGRESSO — a régua ═════════════════════════════════════
   Um sulco cavado com a parte cumprida em ouro. Sem cor de framework, sem
   listra, sem animação. Fina: ela informa, não celebra. */
.progress {
  height: 4px;
  background: var(--pedra-3);
  border: 0;
  box-shadow: inset 0 1px 0 var(--sulco);
}
.progress-sm { height: 3px; }
.progress-bar {
  background: var(--ouro) !important;   /* .bg-green/.bg-primary do Tabler */
  box-shadow: none;
}


/* ══ 16. FORMULÁRIOS E BOTÕES ═════════════════════════════════════════════
   Campo = SULCO cavado: fundo --pedra-3, sem borda em volta, um filete
   embaixo, e o entalhe interno (parede escura em cima, luz embaixo). */
.form-control, .form-select, .input-group-text {
  font-family: var(--f-texto);
  font-size: 1rem;         /* piso de 16px: abaixo disso o Safari do iPhone
                              dá zoom ao focar, e o painel é usado no celular */
  line-height: 1.35;
  color: var(--tinta);
  background-color: var(--pedra-3);
  border: 0;
  border-bottom: 1px solid var(--linha-forte);
  box-shadow: inset 0 1px 0 var(--sulco), inset 0 -1px 0 var(--luz);
  padding: .4rem .55rem;
  appearance: none;
}
.form-control-sm, .form-select-sm { font-size: 1rem; padding: .3rem .5rem; }
.form-control:hover, .form-select:hover { border-bottom-color: var(--ouro); }
.form-control::placeholder { color: var(--tinta-fraca); opacity: 1; }
/* o Tabler crava um anel de foco de 4px em seletor forte; aqui o foco é o
   anel de ouro da §19, igual em toda a folha */
.form-control:focus, .form-select:focus {
  color: var(--tinta);
  background-color: var(--pedra-3);
  border-bottom-color: var(--ouro);
  box-shadow: inset 0 1px 0 var(--sulco), inset 0 -1px 0 var(--luz) !important;
}
/* a seta do <select> do Tabler é uma imagem com a cor cravada: redesenhada
   em traço fino, na tinta fraca */
.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23635d51' stroke-width='1.1'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .5rem center;
  background-size: 10px 7px;
  padding-right: 1.6rem;
}
[data-bs-theme="dark"] .form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23a29a87' stroke-width='1.1'/%3E%3C/svg%3E");
}
/* CAMPO DESLIGADO. O Tabler o pinta de BRANCO (--tblr-bg-forms), e numa laje um
   retângulo branco é a coisa mais clara da tela — o campo "vezes", que está
   desligado justamente por não valer agora, virava o ponto para onde o olho ia.
   Aqui ele é um sulco RASO: quase sem cavado, sem filete de baixo, letra fraca. */
.form-control:disabled, .form-select:disabled,
.form-control[readonly] {
  background-color: var(--pedra-2);
  color: var(--tinta-fraca);
  border-bottom-color: var(--linha);
  box-shadow: none;
  opacity: 1;               /* o Tabler apaga o campo inteiro; aqui quem fala é a cor */
}
.form-control:disabled::placeholder { color: var(--tinta-fraca); }

/* o preenchimento automático do navegador não pode quebrar a pedra */
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--tinta);
  -webkit-box-shadow: inset 0 0 0 100px var(--pedra-3), inset 0 1px 0 var(--sulco);
  caret-color: var(--tinta);
}
/* O CAMPO DE DATA é o único controle que o navegador desenha por dentro, e ele
   desenhava CONTRA a folha: um calendário PRETO chapado (a coisa mais escura da
   tela num campo que nem foi preenchido) e o texto-fantasma "dd/mm/aaaa --:--"
   em tinta cheia, gritando mais alto que o dado escrito ao lado. São quatro
   deles na home, e eram o resto de "cara de navegador" mais visível da página.
   Aqui: (a) o glifo nativo é substituído pelo MESMO calendário em traço fino
   dos outros sinais desenhados (§18); (b) o texto interno vai para a tinta
   fraca, que é o que o contrato de cor manda para DATA (§3), e só volta à
   tinta cheia com o campo em foco, que é quando ele está sendo escrito. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  width: 13px;
  height: 13px;
  padding: 0;
  margin-left: .35rem;
  cursor: pointer;
  opacity: .85;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cg fill='none' stroke='%23635d51' stroke-width='1.1'%3E%3Crect x='1.6' y='2.9' width='10.8' height='9.5'/%3E%3Cpath d='M1.6 6h10.8M4.6 1.4v2.6M9.4 1.4v2.6'/%3E%3C/g%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
[data-bs-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-bs-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cg fill='none' stroke='%23a29a87' stroke-width='1.1'%3E%3Crect x='1.6' y='2.9' width='10.8' height='9.5'/%3E%3Cpath d='M1.6 6h10.8M4.6 1.4v2.6M9.4 1.4v2.6'/%3E%3C/g%3E%3C/svg%3E");
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

input[type="date"]::-webkit-datetime-edit,
input[type="datetime-local"]::-webkit-datetime-edit { color: var(--tinta-fraca); }
input[type="date"]:focus::-webkit-datetime-edit,
input[type="datetime-local"]:focus::-webkit-datetime-edit { color: var(--tinta); }

input[type="date"], input[type="datetime-local"], input[type="number"] {
  font-variant-numeric: tabular-nums;
}

/* O BOTÃO é uma palavra gravada, não uma pastilha de cor. */
.btn {
  font-family: var(--f-inscricao);
  font-weight: 400;
  font-size: .75rem;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: var(--esp-nome);
  color: var(--tinta);
  background: var(--pedra-2);
  border: 1px solid var(--linha);
  padding: .38rem .7rem;
  touch-action: manipulation;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.btn:hover { background: var(--pedra-3); border-color: var(--ouro); color: var(--tinta); }
.btn:active { box-shadow: inset 0 1px 0 var(--sulco), inset 0 -1px 0 var(--luz); }
.btn-sm { font-size: .72rem; padding: .3rem .55rem; }

/* o botão principal não muda de cor: ganha o fio de ouro. Numa pedra, o
   que destaca é o sulco, não a pastilha azul. */
.btn-primary, .btn-outline-primary {
  color: var(--tinta);
  background: var(--pedra-2);
  border-color: var(--ouro);
}
.btn-primary:hover, .btn-outline-primary:hover {
  background: var(--pedra-3);
  border-color: var(--ouro);
}
.btn-outline-secondary { background: transparent; border-color: var(--linha); color: var(--tinta-fraca); }
.btn-outline-secondary:hover { color: var(--tinta); }

/* botão-fantasma (o mais comum do painel: os pequenos de ação na linha).
   Sem caixa nenhuma — é só o sinal, e o alvo de toque continua inteiro. */
.btn-ghost-secondary, .btn-ghost-danger, .btn.bg-transparent, .btn.border-0 {
  background: transparent;
  border-color: transparent;
  color: var(--tinta-fraca);
}
/* no hover a PALAVRA vai para a tinta cheia (ouro em corpo miúdo reprova,
   3,88:1 no claro) e o ouro fica no SINAL, que é gráfico e tem piso de 3:1 */
.btn-ghost-secondary:hover, .btn.bg-transparent:hover, .btn.border-0:hover {
  background: transparent;
  border-color: transparent;
  color: var(--tinta);
}
.btn-ghost-secondary:hover .ti, .btn.bg-transparent:hover .ti,
.btn.border-0:hover .ti { color: var(--ouro); }
.btn-ghost-danger:hover { background: transparent; border-color: transparent; color: var(--esp-vermelho); }
.btn-icon { padding: .3rem; min-width: 1.9rem; }
.btn-sm { min-height: 1.75rem; }

/* ALVO DE TOQUE dos botões-sinal da linha. Medido: os botões de marcar vêm
   dos modelos com `p-0` (utilitário do Bootstrap, e utilitário é
   !important), então saem com 30x15px — metade do mínimo confortável, e o
   painel é usado no celular. Não dá para crescer a caixa sem engordar todas
   as linhas do registro, então quem cresce é a ÁREA, por um pseudo-elemento
   transparente: o alvo passa a ~30x29 e o layout não muda um pixel. */
.btn-icon.p-0, .btn.p-0 { position: relative; }
.btn-icon.p-0::after, .btn.p-0::after {
  content: "";
  position: absolute;
  inset: -7px -4px;
}

/* o seletor de dias da semana (btn-check + label.btn) */
.btn-check:checked + .btn {
  background: var(--pedra-3);
  border-color: var(--ouro);
  color: var(--tinta);
  box-shadow: inset 0 1px 0 var(--sulco), inset 0 -1px 0 var(--luz);
}

/* aviso: sem cor nova na paleta. O que marca é o sulco de ouro à esquerda. */
.alert {
  background: var(--pedra-2);
  border: 0;
  border-left: 2px solid var(--ouro);
  box-shadow: inset 0 1px 0 var(--sulco), inset 0 -1px 0 var(--luz);
  color: var(--tinta);
  padding: .6rem .8rem;
}
.alert-danger { border-left-color: var(--esp-vermelho); }
.alert-success { border-left-color: var(--esp-verde); }


/* ══ 17. TABELA E ACORDEÃO ════════════════════════════════════════════════ */
.table {
  --tblr-table-bg: transparent;
  --tblr-table-color: var(--tinta);
  color: var(--tinta);
  font-size: .9rem;
}
.table > :not(caption) > * > * {
  background: transparent;
  border-bottom-color: var(--linha);
  padding: .45rem .6rem;
}
/* o Tabler pinta o cabeçalho da tabela com uma faixa AZUL própria
   (--tblr-table-header-bg, em seletor forte). Numa laje ela aparece como uma
   tarja de outra cor; aqui o cabeçalho é só capital miúda sobre um filete. */
.table thead th, .card-table thead th, .table > thead {
  background: transparent !important;
  --tblr-table-header-bg: transparent;
}
.table thead th {
  font-family: var(--f-inscricao);
  font-weight: 400;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: var(--esp-nome);
  color: var(--tinta-fraca);
  border-bottom-color: var(--linha-forte);
}
.table td { font-variant-numeric: tabular-nums; }

.accordion, .accordion-item { background: transparent; border-color: var(--linha); }
.accordion-button {
  font-family: var(--f-inscricao);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: var(--esp-rotulo);
  color: var(--tinta);
  background: transparent;
  padding: .55rem .6rem;
}
.accordion-button:not(.collapsed) { color: var(--tinta); background: var(--pedra-2); }
.accordion-button::after { display: none; }   /* o chevron de imagem do Tabler */
.accordion-body { padding: .6rem; }

/* O bloco de máquina. O FUNDO é só do bloco de verdade (pre/code): quando ele
   valia também para `.font-monospace`, cada data solta da tabela e do acordeão
   ganhava uma tarja de pedra atrás — remendo visível em texto corrido. */
pre, code, .font-monospace {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: .8rem;
  color: var(--tinta);
}
pre, code {
  background: var(--pedra-3);
  box-shadow: inset 0 1px 0 var(--sulco), inset 0 -1px 0 var(--luz);
}
.font-monospace { color: inherit; }


/* ══ 18. OS SINAIS — o que fica de ícone e o que sai ══════════════════════
   A carta §2 proíbe biblioteca de ícones e emoji. Aqui a proibição não pode
   ser aplicada inteira, e o motivo é de contrato, não de gosto:

     · o app.js pendura o girador de ação num <i class="ti"> DENTRO do
       botão. Sem o elemento, o painel perde o retorno imediato do toque;
     · a marca de feito É um par de classes ti (§12).

   Então o critério é FUNÇÃO, não pureza:

     FICA   o sinal que É o controle (marcar, somar, remover, arrastar,
            abrir) — e mesmo esse entra apagado, em tinta fraca, no tamanho
            do texto, virando ouro só no hover. Ele é ferramenta, não
            enfeite.
     SAI    o sinal que só ILUSTRA — o ícone ao lado da rubrica do campo,
            o da navegação, o da ilustração de estado vazio. A rubrica em
            capital espacejada já diz o que o campo é; o ícone ao lado dela
            é a assinatura visual do template de painel.

   O ícone da rubrica sai por CSS (display:none) e não apagando o <i> dos
   modelos, porque os modelos são de outro agente nesta onda. O pedido para
   removê-los de vez está em DESIGN-SOLOMON.md, "Pendências". */
.card-title > i.ti,
.card-title > .ti:first-child,
.empty-icon > .ti { display: none; }

.ti {
  font-size: 1.05em;
  color: inherit;
  vertical-align: -.1em;
}
.btn .ti { font-size: 1.15em; }
/* o ouro é do AGORA (§3): ícone não nasce dourado, ele fica dourado quando
   o dedo chega. Isto desfaz de uma vez os `text-primary` espalhados. */
.list-group-item .ti.text-primary,
.card-body .ti.text-primary { color: var(--tinta-fraca); }

/* os dois sinais do botão de tema, desenhados no _topo.html: quem escolhe
   qual aparece é o CSS, pelo atributo do <html>. Assim o botão já nasce
   certo, antes de o JS rodar, e não pisca na troca de página. */
.sol-so-escuro, .sol-so-claro { display: none; }
[data-bs-theme="dark"] .sol-so-escuro { display: block; }
[data-bs-theme="light"] .sol-so-claro,
html:not([data-bs-theme="dark"]) .sol-so-claro { display: block; }

/* SINAIS DESENHADOS À MÃO, para a marcação nova (traço de 1,1px, geométrico,
   no molde do símbolo do portal). Usam `mask`, então herdam a cor do texto
   e trocam de tema sozinhos. Escrever: <i class="sol-sinal sol-sinal-fogo">
   O conjunto é curto de propósito — cada sinal a mais é uma voz a mais. */
.sol-sinal {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -.12em;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
/* constância (o que o 🔥 dizia): uma coluna de marcas empilhadas */
.sol-sinal-serie {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.1'%3E%3Cpath d='M3 12.5h10M3 9h10M3 5.5h6'/%3E%3C/g%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.1'%3E%3Cpath d='M3 12.5h10M3 9h10M3 5.5h6'/%3E%3C/g%3E%3C/svg%3E");
}
/* cumprido (o que o ✅ dizia): o visto do §12, solto */
.sol-sinal-feito {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.5 3.5L13 4.5' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.5 3.5L13 4.5' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E");
}
/* atenção (o que o ⚠️ dizia): um prumo, não um triângulo amarelo */
.sol-sinal-alerta {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M8 3v6.5'/%3E%3Cpath d='M8 12.2v.6'/%3E%3C/g%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M8 3v6.5'/%3E%3Cpath d='M8 12.2v.6'/%3E%3C/g%3E%3C/svg%3E");
}
/* fora daqui (o que a seta do portal diz) */
.sol-sinal-fora {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.1'%3E%3Cpath d='M5.5 10.5L11 5'/%3E%3Cpath d='M6.4 5H11v4.6'/%3E%3C/g%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.1'%3E%3Cpath d='M5.5 10.5L11 5'/%3E%3Cpath d='M6.4 5H11v4.6'/%3E%3C/g%3E%3C/svg%3E");
}


/* ══ 19. ACESSIBILIDADE ═══════════════════════════════════════════════════ */
:focus-visible {
  outline: 2px solid var(--ouro);
  outline-offset: 3px;
}
.list-group-item:focus-visible, .sol-tarefa-card:focus-visible, .card-link:focus-visible {
  outline-offset: -2px;
}
/* o Tabler troca o anel por uma sombra de 4px em vários controles */
.btn:focus, .btn:focus-visible, .form-control:focus, .form-select:focus,
.btn-check:focus + .btn { box-shadow: none; }
.btn:focus-visible, .btn-check:focus-visible + .btn {
  outline: 2px solid var(--ouro);
  outline-offset: 2px;
}

.sr, .visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}


/* ══ 20. AS PEÇAS PRÓPRIAS DO PAINEL ══════════════════════════════════════ */

/* Foco do dia em realce: o fio de ouro do AGORA */
.sol-foco-realce { border-left: 3px solid var(--ouro); }

/* arrasto: a alça, o original esmaecido e o clone que segue o dedo */
.sol-drag-handle { cursor: grab; touch-action: none; color: var(--sinal); padding: .3rem .25rem; min-width: 26px; justify-content: center; display: inline-flex; align-items: center; }
.sol-drag-handle:hover { color: var(--tinta-fraca); }
.sol-drag-handle:active { cursor: grabbing; }
.sol-tarefa-card.sol-arrastando { opacity: .45; background: var(--pedra-2); }
.sol-ghost {
  position: fixed;
  z-index: 2000;
  margin: 0;
  pointer-events: none;
  background: var(--pedra-lisa);
  border: 1px solid var(--ouro);
  opacity: .97;
}
body.sol-drag-ativo { cursor: grabbing; user-select: none; -webkit-user-select: none; touch-action: none; }

/* O CORPO DO CAMPO. Convenção do painel: todo cartão traz `data-card="slug"` na
   raiz e tudo o que fica abaixo da rubrica dentro de um único .sol-card-corpo —
   é nele que o app.js se apoia para recolher o campo. Ele não pinta nada; existe
   como junta. (O cartão que nasce recolhido declara `data-card-recolhido`.) */
.sol-card-corpo { display: block; }

/* o summary clicável perde o triângulo nativo */
.sol-tarefa-sum { cursor: pointer; list-style: none; }
.sol-tarefa-sum::-webkit-details-marker { display: none; }
.sol-tarefa-sum::marker { content: ""; }

/* O TRIÂNGULO NATIVO DOS OUTROS `details` — havia 38 deles na home ("editar",
   "contexto", "2/3 marcos", "editar dados do livro", "no carrinho"…), todos
   com o ▶ do navegador: um triângulo CHEIO, em tinta plena, no corpo do texto.
   É o elemento mais "de fábrica" que sobrava na página, e repetido 38 vezes ele
   é uma voz gráfica inteira. No lugar dele entra o guilhemete da barra — o
   mesmo sinal do `‹ PORTAL` —, em tinta de sinal, que gira 90° ao abrir.
   Só o `.sol-tarefa-sum` fica de fora: ele já tem o seu chevron no fim da linha. */
details > summary:not(.sol-tarefa-sum) {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: .4em;
}
details > summary:not(.sol-tarefa-sum)::-webkit-details-marker { display: none; }
details > summary:not(.sol-tarefa-sum)::before {
  content: "›";
  flex: none;
  display: inline-block;
  font-family: var(--f-inscricao);
  font-size: 1.15em;
  line-height: 1;
  color: var(--sinal);
  transition: transform 120ms ease;
}
details[open] > summary:not(.sol-tarefa-sum)::before { transform: rotate(90deg); }
details > summary:not(.sol-tarefa-sum):hover::before { color: var(--ouro); }
.sol-chevron { transition: transform .15s ease; color: var(--sinal); }
details[open] > .sol-tarefa-sum .sol-chevron { transform: rotate(180deg); }
.sol-oracao-feita { opacity: .6; }
.sol-oracao-texto {
  min-width: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
  line-height: 1.3;
  padding-block: 2px;   /* alvo de edição no lugar: ver .sol-titulo-2l (§11) */
}

/* edição no lugar. O selo de data e o sinal de "pôr data" são CONTROLES de 17px
   de altura: ganham a mesma área ampliada dos botões-sinal (§16), invisível e
   sem mexer no layout. */
.sol-edit-titulo, .sol-inline { cursor: text; }
.sol-edit-venc, .sol-venc-add { cursor: pointer; position: relative; }
.sol-edit-venc::after, .sol-venc-add::after { content: ""; position: absolute; inset: -6px -3px; }
.sol-venc-add { color: var(--sinal); }
.sol-venc-add:hover { color: var(--ouro); }
.sol-editando { background: transparent !important; padding: 0 !important; flex: 1 1 auto; min-width: 0; }
.sol-edit-input { height: auto; padding: .1rem .35rem; font-size: 1rem; line-height: 1.25; }
.sol-editando .sol-edit-input[type="text"] { width: 100%; }
.sol-edit-input[type="date"] { max-width: 10rem; }

/* o item que vai sumir */
.sol-some { opacity: .3; transition: opacity .35s ease; }

/* o girador da ação (o app.js o pendura no <i> do botão) */
@keyframes sol-spin { to { transform: rotate(360deg); } }
.sol-spin { display: inline-block; animation: sol-spin .8s linear infinite; }

/* o aviso de falha: uma lápide miúda no pé da tela, na língua da casa */
.sol-toast {
  position: fixed;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  max-width: 90vw;
  z-index: 1080;
  padding: .5rem .9rem;
  font-family: var(--f-inscricao);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: var(--esp-nome);
  color: var(--tinta);
  background: var(--pedra-lisa);
  border: 1px solid var(--linha-forte);
  border-left: 2px solid var(--esp-vermelho);
}

/* o diálogo de confirmação */
.sol-modal-fundo {
  position: fixed;
  inset: 0;
  background: rgba(10, 9, 7, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1075;
  padding: 1rem;
}
.sol-modal { width: 100%; max-width: 22rem; background: var(--pedra-lisa); border: 1px solid var(--linha-forte); }
.sol-modal-titulo {
  font-family: var(--f-inscricao);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--esp-rotulo);
}

/* A CAPA DO LIVRO: uma chapa embutida, com filete. As medidas e a mini-capa
   vinham de um <style> embutido em _leituras.html, com canto arredondado, sombra
   de elevação e seis fundos coloridos de "estante" — três coisas que a carta §2
   proíbe. Aqui a chapa é de pedra e quem a separa é o filete. */
.capa-livro, .capa-placeholder {
  width: 60px;
  height: 88px;
  flex-shrink: 0;
  border: 1px solid var(--linha-forte);
  object-fit: cover;
}
.capa-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px 6px;
  background: var(--pedra-2);
  /* a placa tem DUAS bordas, como a lombada de uma encadernação: a moldura e,
     4px para dentro, um filete. É o que a faz ler como peça talhada e não como
     "imagem que não carregou" */
  box-shadow: inset 0 0 0 4px var(--pedra-2), inset 0 0 0 5px var(--linha),
              inset 0 1px 0 var(--sulco);
}
/* SEM CAPA ACHADA, O TÍTULO VIRA A CAPA — em inscrição, como a lombada de um
   livro antigo. MEDIDO NA REVISÃO: a .56rem (9px) e cinco linhas, um título
   longo ("Devotions on the Greek New Testament") virava uma mancha cinza de
   cinco linhas ilegíveis — o olho lia "imagem quebrada", não "livro". A 10,2px
   e TRÊS linhas a placa perde o fim do título (que está escrito ao lado, em
   corpo de leitura) e ganha o que ela tem de fazer: parecer uma lombada. */
.capa-placeholder span {
  font-family: var(--f-inscricao);
  font-size: .64rem;
  line-height: 1.22;
  letter-spacing: .01em;
  color: var(--tinta-fraca);
  width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
/* O LIVRO RECOLHIDO — o mesmo gesto do campo recolhível, um andar abaixo.
   Pedido do dono (17/08/2026): "minimizar livros específicos… pra ficar só o
   nome e a página". Recolhido, o livro vira UMA LINHA PAUTADA: título à
   esquerda, página à direita, o sinal no fim. Aberto, essa mesma linha é o
   cabeçalho da coluna do livro — por isso a página não se repete lá embaixo.

   A CAPA NÃO FICA na linha recolhida, e isto é decisão de olho: a chapa tem
   60x88 e sozinha impõe 88px de altura a uma linha que precisa ter ~28 — cinco
   livros recolhidos viram de novo a "estante" que a carta §2 expulsou, e a
   miniatura menor cairia abaixo do tamanho em que a mini-capa tipográfica já foi
   medida como ilegível (§15). Recolhido é texto; a capa é do estado aberto.

   O corpo NÃO usa `d-flex` do Tabler: utilitário do Bootstrap é
   `display:flex !important`, e a regra de esconder perderia para ele sem virar
   uma segunda `!important` — que é como uma folha começa a brigar consigo mesma.
   A flexão mora aqui. */
.sol-livro-cabeca { display: flex; align-items: baseline; gap: .5rem; }
.sol-livro-titulo { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
/* a página é COLUNA de número: face de dados, tabular, e a tinta do TEMPO E
   QUANTIDADE do contrato de cor (§3) — o nome ao lado é quem leva a tinta cheia */
.sol-livro-pagina {
  flex: none;
  font-family: var(--f-texto);
  font-variant-numeric: tabular-nums;
  font-size: .875em;
  color: var(--tinta-fraca);
}
.sol-livro-corpo { display: flex; gap: 1rem; margin-top: .35rem; }
/* três unidades de especificidade, como em painel-cards.css: vence nas DUAS
   direções sem `!important`, venha o estado do servidor ou do app.js */
[data-livro][data-livro-recolhido="1"] > .sol-livro-corpo { display: none; }
[data-livro][data-livro-recolhido="0"] > .sol-livro-corpo { display: flex; }

/* O LIVRO RECOLHIDO OCUPA A LARGURA TODA, e isto foi visto renderizado antes de
   ser escrito: numa grade de dois em dois, recolher UM livro deixava uma cela
   vazia de 224px ao lado do outro — o buraco que o §7-A passou a onda inteira
   desfazendo. Em largura cheia ele vira o que deve ser: uma LINHA PAUTADA do
   registro, com o título na margem e a página na coluna da direita. Aberto, o
   livro continua metade da grade. (Especificidade 0,3,0 contra os 0,1,0 do
   `.col-md-6` do Tabler: vence sem `!important` e sem depender da ordem.) */
[data-livro][data-livro-recolhido="1"] { flex: 0 0 100%; width: 100%; max-width: 100%; }
/* dois recolhidos em seguida pedem o filete que a grade lado a lado dispensava */
[data-livro][data-livro-recolhido="1"] + [data-livro][data-livro-recolhido="1"] {
  border-top: 1px solid var(--linha);
  box-shadow: inset 0 1px 0 var(--luz-filete);
  padding-top: .55rem;
  margin-top: -.15rem;
}

/* O SINAL DE RECOLHER DO LIVRO (o app.js o injeta na linha; ver
   PEDIDO-LEITURAS-RECOLHIDAS.md). É o mesmo botão-fantasma do campo, um ponto
   menor — é um andar abaixo na hierarquia, e o desenho tem de dizer isso.
   Classe PRÓPRIA, nunca `.sol-card-toggle`: aquele é capturado pelo clique que
   recolhe o CAMPO INTEIRO, e um toque no livro fecharia as Leituras. */
.sol-livro-toggle {
  -webkit-appearance: none;
          appearance: none;
  background: none;
  border: 0;
  padding: 0;
  flex: none;
  align-self: center;
  width: 1rem;
  height: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: var(--sinal);
  cursor: pointer;
  transition: color 120ms ease;
}
.sol-livro-toggle:hover, .sol-livro-toggle:focus-visible { color: var(--ouro); }
/* alvo de toque de ~36x32 sem mexer um pixel no layout (§9) */
.sol-livro-toggle::after { content: ""; position: absolute; inset: -8px -10px; }
.sol-livro-toggle svg { width: 100%; height: 100%; display: block; transition: transform 120ms ease; }
[data-livro][data-livro-recolhido="1"] .sol-livro-toggle svg { transform: rotate(-90deg); }

/* AS SOMAS AO PÉ DE UM CAMPO (pagamentos): o mesmo molde dos contadores
   do alto — figura em inscrição, rótulo em capital miúda —, mas em corpo menor,
   porque ali é o pé de um campo e não a rubrica da página. */
.sol-somas .h1, .sol-somas .h3 { font-weight: 400; line-height: 1.1; color: var(--tinta); }
/* CONTAGEM é figura isolada: cabe a inscrição. DINHEIRO se compara de coluna a
   coluna: cabe a face de dados, com algarismo tabular (§2). */
.sol-somas .h1 { font-family: var(--f-inscricao); font-size: 1.6rem; }
.sol-somas .h3 { font-family: var(--f-texto); font-size: 1.05rem; font-variant-numeric: tabular-nums; }
/* o rótulo é medido: são QUATRO colunas dentro de um campo de ~340px, e
   "COMPENSANDO" espacejado a .12em quebrava em duas linhas ("COMPENSAND / O").
   Corpo e espacejamento fecham só aqui — é o preço de caber. */
.sol-somas .small {
  font-family: var(--f-inscricao);
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tinta-fraca);
}
/* a única soma que pode ser de ouro: a que responde "o que eu faço agora?".
   Vale porque é figura grande (≥24px) — em corpo miúdo o ouro reprovaria (§4). */
.sol-somas .h1.sol-agora { color: var(--ouro); }

/* NA TELA ESTREITA, QUATRO SOMAS VIRAM DUAS E DUAS. Medido a 390px: a coluna
   fica com ~78px e "COMPENSANDO" quebra em "COMPENSAND / O". O `:has` conta as
   colunas para pegar só a fileira de quatro (a de três, dos pagamentos, fica
   como está); onde ele não existir, o comportamento é o de hoje.
   A fileira de quatro que motivou a regra era a da COBRANÇA, que saiu do painel
   em 17/08/2026. A regra fica: ela é uma trava de largura para qualquer fileira
   de quatro somas, e não custa nada enquanto não houver uma. */
@media (max-width: 34rem) {
  .sol-somas .small { letter-spacing: .04em; }
  .sol-somas:has(> .col:nth-child(4)) > .col { flex: 0 0 50%; max-width: 50%; }
}

/* LEITURAS: dois livros por linha na faixa larga. Empilhados na tela estreita,
   eles precisam do filete que a grade lado a lado dispensa — sem ele, um livro
   escorre no outro e o card perde a pauta. */
@media (max-width: 767.98px) {
  .sol-leituras-grade > [class*="col-"] + [class*="col-"] {
    border-top: 1px solid var(--linha);
    box-shadow: inset 0 1px 0 var(--luz-filete);
    padding-top: .9rem;
  }
}

/* PAGAMENTOS: a conta paga recua (não some — o registro guarda o que foi feito),
   e toda coluna de dinheiro e de dia alinha por algarismo tabular. */
.sol-pag-linha.sol-pag-quitado { opacity: .68; }
/* o rodapé da linha (observação e "editar") alinha com o selo "dia N", que é a
   primeira coluna de texto da linha. Sem isto ele voltava para a margem do campo,
   por baixo da marca de pago, e lia como uma linha nova do registro. */
.sol-pag-sub { padding-left: 2.45rem; }
.sol-pag-dia, .sol-pag-valor, .sol-valor {
  font-family: var(--f-texto);
  font-variant-numeric: tabular-nums;
}

/* o sinal de "sai daqui" no canto da rubrica (Google Agenda): tinta fraca,
   ouro quando o dedo chega. Alvo de 44px sem engordar a rubrica. */
.sol-ir-fora {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.9rem;
  min-height: 1.9rem;
  color: var(--sinal);
  transition: color 120ms ease;
}
.sol-ir-fora:hover { color: var(--ouro); }

/* a ficha da pregação: o texto bíblico é o NOME dela, em inscrição — não uma
   rubrica de campo (era .card-title, que aqui saía como capital de 13px) */
.sol-pregacao-texto {
  font-family: var(--f-inscricao);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.2;
  color: var(--tinta);
  margin: 0;
}

/* A MEDIDA DA LINHA DA MEMÓRIA. O cartão da Memória é a página inteira, e a
   linha de texto ia de ponta a ponta: medido a 1440px, 1.250px de linha — cerca
   de 150 caracteres, o dobro do limite em que o olho ainda acha o começo da
   linha seguinte. 44rem ≈ 95 caracteres na Cardo a 16px: um pouco largo para
   prosa corrida, certo para um fato de uma frase. O peso é `min-width: 0` de
   antes mais o teto — o selo da categoria continua na margem, como marca. */
.sol-memoria-valor { min-width: 0; max-width: 44rem; }

/* o nome da capacidade: inscrição miúda, no lugar do emoji que saiu */
.sol-capacidade-nome {
  font-family: var(--f-inscricao);
  font-size: .95rem;
  letter-spacing: .01em;
  color: var(--tinta);
}

/* a agenda: a hora é o dado que o olho procura na coluna, então é ela que
   ganha a tinta cheia e o alinhamento tabular (a face de dados, §2) */
.ev-hora, .ev-dia {
  font-family: var(--f-texto);
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  color: var(--tinta);
}
.ev-hora { min-width: 3rem; display: inline-block; }
.ev-dia  { min-width: 2.8rem; display: inline-block; color: var(--tinta-fraca); }
/* A COLUNA DO QUANDO, nos lembretes. Ali o mesmo campo carrega "18:00",
   "seg 09:30" e "01/09 08:00", e sem largura fixa o texto de cada linha começa
   num x diferente — três entradas, três margens, e o bloco perde a pauta. Num
   livro-razão a data é COLUNA.
   ALINHADA À DIREITA, e isto foi medido: com a coluna à esquerda, "18:00" (38px)
   ficava a 64px do próprio texto — um rio branco no meio da linha. À direita, o
   que fecha é a aresta que importa, a do vão; a ponta esquerda fica dentada, que
   é como uma coluna de datas se comporta em qualquer livro-razão. 5,8rem cabe a
   mais larga das três (medida: 85px). */
.ev-quando { min-width: 5.8rem; display: inline-block; text-align: right; }
.ag-rotulo {
  font-family: var(--f-inscricao);
  text-transform: uppercase;
  letter-spacing: var(--esp-rotulo);
  font-size: .7rem;
  color: var(--tinta-fraca);
}

/* A MEDIDA DA PÁGINA SIMPLES (Hermes, `home_simples.html`). Um cartão só numa
   folha de 1440px vira um cartão flutuando no vazio; a carta-mãe §6 já tinha a
   resposta ("coluna única centrada, muito ar"). 52rem é a medida do registro
   curto: o cabeçalho e o campo dividem o mesmo eixo, e o filete do cabeçalho
   fecha exatamente na largura do cartão. Só o perfil simples pede a classe. */
.container-xl.sol-simples { max-width: 52rem; }

/* o retrato redondo do topo saiu (ver DESIGN-SOLOMON.md §2). A regra fica
   para o caso de algum modelo ainda trazer a marcação: chapa quadrada com
   filete, nunca medalhão flutuante. */
.avatar-solomon { border: 1px solid var(--linha-forte); object-fit: cover; }

/* números em coluna: sempre tabulares */
.sol-contadores .h1, .table td, .ev-hora, .ev-dia,
.progress + .small, .text-nowrap { font-variant-numeric: tabular-nums; }


/* ══ 21. A PORTA (login.html) ═════════════════════════════════════════════
   A tela de entrar é a porta da MESMA laje, não uma tela à parte.

   O molde não é o do portal (dois campos e uma lajota da largura toda), e
   sim o da câmara (portal.css §8.1), pela razão que está escrita lá: duas
   caixas cinzas empilhadas com um botão da mesma largura são o formulário
   padrão de qualquer site com outra paleta. Aqui há UM campo só, então a
   tela tem uma vertical só — nome, filete, fenda, palavra — em vez de dois
   retângulos empilhados.

   A INSCRIÇÃO tem cor própria, e ela é fraca de propósito: numa inscrição
   real a letra vale quase o mesmo que a pedra, e quem lê é a sombra do
   sulco. Não "conserte" isto escurecendo. O piso é 3:1 contra o fundo
   composto (texto grande, WCAG 1.4.3), e é por isso que o escuro não repete
   o hexadecimal do claro: o que se copia é a razão de contraste, não a cor. */
:root {
  --marca-cor:   #857c68;
  --marca-luz:   rgba(255, 255, 255, .78);
  --marca-sulco: rgba(28, 24, 16, .16);
}
[data-bs-theme="dark"] {
  --marca-cor:   #8a8170;
  --marca-luz:   rgba(255, 250, 235, .16);
  --marca-sulco: rgba(0, 0, 0, .55);
}

.sol-porta-corpo {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
.sol-laje {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 26rem;
  margin: 0 auto;
  /* o pé é maior que a cabeça de propósito: o bloco assenta um fio acima do
     centro geométrico, que é onde o olho espera uma inscrição */
  padding: clamp(2.4rem, 8vh, 4rem) clamp(1.1rem, 5vw, 2rem) clamp(2rem, 11vh, 6rem);
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1.6rem, 5vh, 2.6rem);
}
.sol-frontao { text-align: center; }

/* o nome gravado. O corpo tem DOIS termos e um teto: o termo de largura
   segura nomes longos em tela estreita (SOLOMON tem sete capitais e, no
   corpo cheio, encostava nas duas bordas de um iPhone SE), e o de altura
   impede que a palavra empurre o formulário para fora numa tela baixa. */
.sol-inscricao {
  display: block;
  margin-bottom: clamp(1rem, 3vh, 1.6rem);
  font-family: var(--f-inscricao);
  font-weight: 400;
  font-size: clamp(1.9rem, min(1.1rem + 6.4vw, .5rem + 5.6vh), 3.2rem);
  line-height: 1.08;
  text-transform: uppercase;
  letter-spacing: var(--esp-marca);
  padding-left: var(--esp-marca);   /* compensa o vão da última letra: sem
                                       isto o bloco centrado assenta meio
                                       espaço à esquerda do eixo */
  color: var(--marca-cor);
  text-shadow: var(--entalhe-x) 1px 0 var(--marca-luz),
               calc(-1 * var(--entalhe-x)) -1px 0 var(--marca-sulco);
}

.sol-porta {
  width: 100%;
  /* estreita de propósito: uma FENDA cavada no eixo da laje, não uma caixa
     de formulário da largura do bloco (portal.css §8.1) */
  max-width: 14rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  /* O RITMO DE DUAS FENDAS. Com um campo só, o vão único de 1,3rem bastava.
     Com dois (usuário e senha, desde que o painel do Bruno saiu de trás do
     portal), o mesmo vão em toda parte faria três blocos soltos e iguais: as
     duas fendas são UM par — quem entra digita as duas —, e a palavra é o
     gesto seguinte. Então o par fecha (1rem) e a palavra ganha ar (1,5rem).
     Com um campo só o resultado é idêntico ao de antes, a menos de 0,2rem. */
  gap: 1rem;
}
.sol-porta .sol-confirma { margin-top: .5rem; }
.sol-campo { display: flex; flex-direction: column; gap: .5rem; align-items: center; }
.sol-campo label {
  font-family: var(--f-inscricao);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: var(--esp-rotulo);
  padding-left: var(--esp-rotulo);
  color: var(--tinta-fraca);
}
/* a fenda: o mesmo sulco escavado dos campos do painel (§16). Inventar um
   segundo idioma de campo para uma tela só seria dialeto, não desenho. */
.sol-campo input {
  width: 100%;
  padding: .6rem .7rem;
  text-align: center;
  font-family: var(--f-texto);
  /* 16px é piso: abaixo disso o Safari do iPhone dá zoom ao focar */
  font-size: 1.05rem;
  line-height: 1.4;
  letter-spacing: .18em;
  color: var(--tinta);
  background: var(--pedra-3);
  border: 0;
  border-bottom: 1px solid var(--linha-forte);
  box-shadow: inset 0 1px 0 var(--sulco), inset 0 -1px 0 var(--luz);
  transition: border-color 120ms ease;
  appearance: none;
}
/* O FOCO DA FENDA É O FILETE, NÃO O ANEL — e isto foi medido, não suposto.
   O campo tem `autofocus`, e pela especificação um campo de TEXTO casa com
   :focus-visible sempre que está focado (espera-se que se digite nele).
   Ou seja: trocar :focus por :focus-visible não adianta nada aqui — a porta
   abria com uma moldura dourada em volta da fenda, e a tela voltava a ser
   "um retângulo com um botão embaixo", que é o que este desenho evita.

   A saída não é apagar o indicador (isso reprovaria em acessibilidade): é
   mudá-lo de forma. O filete de baixo passa de 1px apagado a 2px de OURO —
   mudança de cor e de espessura, bem visível (7,9:1 no escuro), no lugar
   onde o olho já está. O padding compensa o pixel a mais para nada pular. */
.sol-campo input:hover { border-bottom-color: var(--ouro); }
.sol-campo input:focus,
.sol-campo input:focus-visible {
  outline: none;
  border-bottom: 2px solid var(--ouro);
  padding-bottom: calc(.6rem - 1px);
}
.sol-campo input:-webkit-autofill,
.sol-campo input:-webkit-autofill:hover,
.sol-campo input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--tinta);
  -webkit-box-shadow: inset 0 0 0 100px var(--pedra-3), inset 0 1px 0 var(--sulco);
  caret-color: var(--tinta);
}

/* o botão como PALAVRA gravada, com o filete embaixo. A altura mínima é de
   toque (44px): no celular ele é a única saída de quem digitou. */
.sol-confirma {
  align-self: center;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 1.1rem;
  padding-left: calc(1.1rem + var(--esp-nome));   /* centra as capitais no eixo */
  font-family: var(--f-inscricao);
  font-weight: 400;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: var(--esp-nome);
  color: var(--tinta);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--linha);
  box-shadow: 0 1px 0 var(--luz-filete);
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
.sol-confirma:hover { border-bottom-color: var(--ouro); box-shadow: 0 1px 0 var(--ouro-claro); }

/* o erro: mensagem sóbria, sem cor nova. O que marca é o sulco à esquerda. */
.sol-erro {
  /* TETO igual ao da fenda (era 19rem, mais largo que ela). MEDIDO: o bloco
     encolhe até o texto (200px para "Usuário ou senha incorretos."), então o
     teto só decide quando ele QUEBRA — e o certo é quebrar na largura da
     fenda, nunca passar dela e ficar mais largo do que o formulário que
     comenta. */
  max-width: 14rem;
  margin: 0 auto;
  padding: .55rem .8rem;
  font-size: .9rem;
  color: var(--tinta);
  background: var(--pedra-2);
  border-left: 2px solid var(--esp-vermelho);
  box-shadow: inset 0 1px 0 var(--sulco), inset 0 -1px 0 var(--luz);
}


/* ══ 22. A FAIXA DE DIAS DA AGENDA (instâncias com AGENDA_SEMANA) ═════════
   Vinha de um <style> embutido em home.html, escrito na língua do Tabler:
   fundo --tblr-primary no dia de hoje com a letra em #fff, bolinha redonda
   de evento e moldura de 2px no dia escolhido. Numa laje isso é uma pastilha
   azul com pontos — três proibições de uma vez.

   Aqui a faixa é a PAUTA DE UM MÊS gravada: cada dia é uma coluna, o dia de
   hoje é o único com o sulco de ouro embaixo (§3: ouro = AGORA), o dia
   escolhido escava (fundo --pedra-2, como o hover das linhas) e os eventos
   viram pequenas marcas QUADRADAS na margem inferior — o mesmo talhe do
   resto do registro. Nada se desloca ao tocar. */
.sol-ag-track {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: .35rem;
}
.sol-ag-track::-webkit-scrollbar { display: none; }
.sol-ag-grupo { flex: 0 0 100%; scroll-snap-align: start; }
.sol-ag-grupo > .d-flex { gap: 1px; }   /* o vão entre os dias é um fio, não um gap */

.sol-semana-dia {
  min-width: 0;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: .3rem .1rem .25rem;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.sol-semana-dia:hover { background: var(--pedra-2); }
.sol-semana-dia.sol-sel { background: var(--pedra-2); box-shadow: inset 0 1px 0 var(--sulco), inset 0 -1px 0 var(--luz); }
.sol-semana-dia.sol-hoje { border-bottom-color: var(--ouro); }   /* AGORA */

.sol-semana-abbr {
  font-family: var(--f-inscricao);
  font-size: .6rem;
  letter-spacing: .08em;
  color: var(--tinta-fraca);
}
.sol-semana-num {
  font-family: var(--f-texto);          /* coluna de números: face de dados */
  font-variant-numeric: tabular-nums;
  font-size: 1.05rem;
  line-height: 1.15;
  color: var(--tinta);
}
.sol-semana-dia.sol-fds:not(.sol-hoje) .sol-semana-num { color: var(--tinta-fraca); }

/* as marcas de evento: quadradinhos de 3px, o mesmo grão do resto */
.sol-semana-dots { height: .5rem; margin-top: .15rem; line-height: 0; }
.sol-semana-dots .sol-dot {
  display: inline-block;
  width: 3px;
  height: 3px;
  margin: 0 1px;
  background: var(--sinal);
  vertical-align: middle;
}
.sol-semana-dia.sol-hoje .sol-dot { background: var(--ouro); }


/* ══ 24. O CAMPO ROTINA — a pauta do dia ══════════════════════════════════
   A rotina é a única parte do registro em que a HORA manda: o dia dela é uma
   coluna de horas com o que acontece ao lado, como a pauta de um livro de
   ponto. Então a hora ganha largura fixa e face de dados, e é ela que alinha
   o campo inteiro; o título vem depois, e tudo o mais (sino, "movido de",
   janela livre) é nota de margem em tinta fraca.

   Nada de tinta nova: o ouro segue sendo AGORA — aqui, o dia de hoje na
   faixa e o horário que VAGOU, que é o único lugar do campo onde há algo a
   fazer neste instante. As seis cores continuam sendo fio de 3px na margem
   (§13), reaproveitadas de .sol-tarefa-cor-*. */

/* ── o par hoje | semana, na rubrica ─────────────────────────────────────
   Dois botões de texto, não um interruptor: o estado se lê pela palavra
   marcada, e a marca é o sulco de ouro embaixo — o mesmo sinal que diz
   "esta é a aba ligada" na barra. */
.sol-rot-visao { display: flex; gap: .5rem; }
.sol-rot-vbtn {
  border: 0;
  background: transparent;
  padding: .1rem 0 .15rem;
  font-family: var(--f-inscricao);
  font-size: .68rem;
  letter-spacing: var(--esp-rotulo, .13em);
  text-transform: uppercase;
  color: var(--tinta-fraca);
  border-bottom: 2px solid transparent;
  cursor: pointer;
}
.sol-rot-vbtn:hover { color: var(--tinta); }
.sol-rot-vbtn.sol-sel { color: var(--tinta); border-bottom-color: var(--ouro); cursor: default; }

/* ── a faixa dos sete dias ───────────────────────────────────────────────
   Herda o talhe da faixa da agenda (§22) por .sol-semana-*; só o vão entre
   as colunas é declarado aqui, porque lá ele vem do grupo de scroll-snap
   que este campo não tem (são sete dias, cabem todos). */
.sol-rot-faixa .d-flex { gap: 1px; }
.sol-rot-dia { min-width: 0; }

/* ── o rótulo do dia ─────────────────────────────────────────────────────*/
.sol-rot-rotulo {
  font-family: var(--f-inscricao);
  font-size: .68rem;
  letter-spacing: var(--esp-rotulo, .13em);
  text-transform: uppercase;
}
.sol-rot-conta {
  font-family: var(--f-texto);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  text-transform: none;
  margin-left: .4rem;
}

/* ── a linha da ocorrência ───────────────────────────────────────────────*/
.sol-rot-linha { padding-top: .35rem; padding-bottom: .35rem; }
.sol-rot-check { line-height: 1; padding-top: .12rem; }

/* A LINHA INTEIRA abre a gaveta — no celular, um alvo de toque de 8px ("⋯") é o
   que faz a pessoa achar que o painel não responde.

   O sinal de abrir é o "›" que a §17 já dá a todo <details> da folha: uma só
   convenção no painel inteiro, e o mesmo giro de um quarto de volta. Havia aqui um
   segundo chevron desenhado à direita — dois sinais dizendo a mesma coisa na mesma
   linha, que é exatamente o ruído que a carta §2 recusa.

   O conteúdo da linha vai num <span> DENTRO do summary, e não solto: o summary é
   flex pela §17 (com o `gap` dela), e ali dentro é que a HORA pode ter a largura
   fixa que alinha a coluna inteira — a espinha deste campo. Solto, cada linha
   distribuiria o espaço por conta própria e a coluna balançaria. */
.sol-rot-cabeca-in {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  flex: 1 1 auto;
  min-width: 0;
}
.sol-rot-mais > summary:hover .sol-rot-titulo { color: var(--tinta); }

/* A HORA é a espinha do campo: largura fixa para que todas as linhas se
   alinhem, face de dados e algarismo tabular — sem isso a coluna balança e
   o dia deixa de se ler de cima a baixo. */
.sol-rot-hora {
  flex: 0 0 auto;
  min-width: 3.05rem;
  font-family: var(--f-texto);
  font-variant-numeric: tabular-nums;
  font-size: .95rem;
  color: var(--tinta);
  white-space: nowrap;
}
.sol-rot-ate { color: var(--tinta-fraca); font-size: .82rem; }
.sol-rot-titulo {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--tinta);
}

/* cumprido: a linha não some (ela é a rotina, e amanhã volta) — só recua
   de tinta e recebe o traço fino, o mesmo gesto da tarefa concluída */
.sol-rot-feito .sol-rot-titulo,
.sol-rot-feito .sol-rot-hora { color: var(--tinta-fraca); }
.sol-rot-feito .sol-rot-titulo { text-decoration: line-through; text-decoration-thickness: 1px; }

/* o sino: quantidade e unidade são tinta fraca (contrato §3) */
.sol-rot-sinal {
  flex: 0 0 auto;
  font-family: var(--f-texto);
  font-variant-numeric: tabular-nums;
  font-size: .72rem;
  color: var(--tinta-fraca);
  white-space: nowrap;
}
.sol-rot-sinal .ti { font-size: .8rem; vertical-align: -1px; margin-right: .1rem; }

.sol-rot-cauda {
  margin: .1rem 0 0 calc(15px + .5rem + 3.05rem + .5rem);
  font-size: .72rem;
  color: var(--tinta-fraca);
}

/* ── a gaveta: o bloco escavado onde se muda o bloco ─────────────────────
   Mesmo recesso do campo de formulário (§16): fundo --pedra-2 com o fio de
   luz em cima e o sulco embaixo. Ela nasce da linha, então herda a margem
   do título e não vira um segundo cartão flutuando. */
.sol-rot-gaveta {
  margin-top: .45rem;
  padding: .1rem .55rem .55rem;
  background: var(--pedra-2);
  box-shadow: inset 0 1px 0 var(--sulco), inset 0 -1px 0 var(--luz);
}
.sol-rot-form { padding: .55rem 0 .1rem; }
.sol-rot-form.border-top { border-top: 1px solid var(--linha) !important; margin-top: .35rem; }

/* A LEGENDA é a peça que carrega a distinção inteira do módulo: "Só nesta
   data" × "Para sempre". Ela é capital pequena e fica acima do grupo — o
   dono lê o que vai acontecer ANTES de mexer no campo, e não depois. */
.sol-rot-legenda {
  font-family: var(--f-inscricao);
  font-size: .66rem;
  letter-spacing: var(--esp-rotulo, .13em);
  text-transform: uppercase;
  color: var(--tinta);
  margin-bottom: .3rem;
}
.sol-rot-rot {
  font-family: var(--f-inscricao);
  font-size: .6rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  margin-bottom: .1rem;
}
.sol-rot-ajuda, .sol-rot-ajuda-inline, .sol-rot-nota {
  font-size: .7rem;
  color: var(--tinta-fraca);
  margin: .25rem 0 0;
}
.sol-rot-ajuda-inline { text-transform: none; letter-spacing: 0; }

/* ── os sete dias como fichas ────────────────────────────────────────────
   A caixa de seleção nativa é redonda-ish, azul e do tamanho errado; some
   (sem sair do foco do teclado) e quem mostra o estado é a ficha: marcada,
   ela ganha a tinta cheia e o sulco de ouro embaixo. */
.sol-rot-dias { display: flex; flex-wrap: wrap; gap: 2px; }
.sol-rot-chip { position: relative; margin: 0; }
.sol-rot-chip input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  margin: 0;
  cursor: pointer;
}
.sol-rot-chip span {
  display: block;
  min-width: 2.05rem;
  padding: .22rem .1rem .2rem;
  text-align: center;
  font-family: var(--f-inscricao);
  font-size: .64rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  background: var(--pedra-3);
  border: 1px solid var(--linha);
  border-bottom-width: 2px;
  border-bottom-color: transparent;
}
.sol-rot-chip input:checked + span {
  color: var(--tinta);
  background: var(--pedra);
  border-bottom-color: var(--ouro);
}
.sol-rot-chip input:focus-visible + span { outline: 2px solid var(--ouro); outline-offset: 1px; }

/* ── o que VAGOU e o que está livre ──────────────────────────────────────
   A vaga é a única coisa deste campo que pede ação agora ("abriu terça
   15h, encaixa alguma coisa"), então a HORA dela é a única em ouro. O
   resto é nota. */
.sol-rot-vagas { display: flex; flex-direction: column; gap: .15rem; }
.sol-rot-vaga { font-size: .78rem; color: var(--tinta-fraca); }
.sol-rot-vaga .sol-rot-hora { color: var(--ouro); font-size: .85rem; min-width: 3.05rem; display: inline-block; }
.sol-rot-desfazer {
  border: 0;
  background: transparent;
  padding: 0;
  font-size: .72rem;
  color: var(--egeu);            /* LIGAÇÃO/ação secundária, nunca ouro */
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.sol-rot-livre { font-size: .78rem; color: var(--tinta-fraca); }
.sol-rot-janela {
  font-family: var(--f-texto);
  font-variant-numeric: tabular-nums;
  margin-left: .4rem;
  white-space: nowrap;
}

/* ── o formulário de bloco novo ──────────────────────────────────────────*/
.sol-rot-novo > summary {
  display: block;                /* ver a nota do summary da linha, logo acima */
  list-style: none;
  cursor: pointer;
  padding: .5rem .75rem;
  font-family: var(--f-inscricao);
  font-size: .68rem;
  letter-spacing: var(--esp-rotulo, .13em);
  text-transform: uppercase;
  color: var(--tinta-fraca);
}
.sol-rot-novo > summary::-webkit-details-marker { display: none; }
.sol-rot-novo > summary::marker { content: ""; }
.sol-rot-novo > summary:hover { color: var(--tinta); }
.sol-rot-novo[open] > summary { color: var(--tinta); }


/* ══ 23. TELA ESTREITA ════════════════════════════════════════════════════
   No celular o espacejamento das capitais fecha e o ar sai; o corpo do
   texto NÃO encolhe, que é justamente onde ele precisa estar inteiro. */
@media (max-width: 34rem) {
  :root { --esp-rotulo: .11em; --esp-nome: .09em; --esp-marca: .16em; }
  .card-body { padding: .6rem; }
  .card-header { padding: .45rem .6rem .4rem; }
  .list-group-item { padding-left: .6rem; padding-right: .6rem; }
  .page-title, .saudacao-titulo { font-size: 1.5rem; }
  .sol-contadores .h1 { font-size: 1.35rem; }
  .sol-contadores .small { font-size: .62rem; }
  /* ROTINA: a coluna de horas encolhe (não some — é ela que alinha o dia) e as
     sete fichas de dia passam a caber em 390px sem rolar de lado. */
  .sol-rot-hora { min-width: 2.7rem; font-size: .88rem; }
  .sol-rot-vaga .sol-rot-hora { min-width: 2.7rem; }
  .sol-rot-cauda { margin-left: calc(15px + .5rem + 2.7rem + .5rem); }
  .sol-rot-chip span { min-width: 1.85rem; padding-left: 0; padding-right: 0; }
  .sol-rot-gaveta { padding-left: .4rem; padding-right: .4rem; }
}

@media (max-width: 767.98px) {
  /* os seis contadores em 3x2: a .col do Bootstrap não encolhe abaixo do
     conteúdo e eles estouravam a largura */
  .sol-contadores { --tblr-gutter-x: .5rem; --tblr-gutter-y: .75rem; }
  .sol-contadores .col { flex: 0 0 33.333%; max-width: 33.333%; }
  /* alvo de toque maior nos links do menu aberto */
  .navbar-collapse .nav-link { padding-top: .6rem; padding-bottom: .6rem; }
}