/**
 * Estilos da Área do Membro — OHAD Gestão
 *
 * Abordagem mobile-first. Ambiente por grau: data-degree injetado
 * server-side no <html> (anti-FOUC) — ver docs/adr-injecao-data-degree.md.
 * Nove ambientes calibrados por cálculo em docs/design/tokens-ambientes-por-grau.md.
 * Fontes auto-hospedadas em public/fonts/ — sem chamadas a CDN externo (LGPD).
 * Sem dependência de Elementor, Bootstrap ou qualquer framework externo.
 *
 * ESTE ARQUIVO NÃO CONTÉM NOME, SLUG OU NOTAÇÃO DE GRAU NENHUM (correção do
 * achado 1 do parecer do Codex, 28/10/2026, "tela-estudos-previa",
 * BLOQUEANTE). Até esta correção, os onze blocos `[data-degree="…"]` —
 * nove graus mais vestíbulo/átrio — viviam aqui, estáticos, e o arquivo era
 * enviado INTEIRO a qualquer membro: os bytes dos graus não alcançados
 * chegavam ao navegador mesmo que o seletor nunca casasse com o
 * `data-degree` real da página — violação do véu (D58), que exige
 * invisibilidade, não apenas inacessibilidade por seletor. Os onze blocos
 * foram MOVIDOS para `Ohad_Graus::TOKENS_CSS_POR_SLUG` (class-ohad-graus.php)
 * e passaram a ser injetados pelo SERVIDOR, por requisição, só com o bloco
 * do ambiente da página atual — ver
 * `Ohad_Router::registrar_filtro_data_degree()`/`_fixo()` e
 * `Ohad_Router::injetar_tokens_do_ambiente()`. As regras abaixo são
 * NEUTRAS: leem `var(--…)`, nunca declaram o valor nem nomeiam o ambiente.
 *
 * @package OhadGestao
 * @since   0.5.0
 * @since   0.35.0 Tokens por ambiente movidos para injeção server-side (ver acima).
 */

/* ──────────────────────────────────────────────────────
   Fontes auto-hospedadas — Cormorant Garamond + EB Garamond
   Subconjunto latin. Fonte servida localmente para conformidade
   com LGPD (sem transferência de IP do visitante ao Google).
   ────────────────────────────────────────────────────── */
@font-face {
	font-family: "Cormorant Garamond";
	font-style:  normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/CormorantGaramond-Medium.woff2') format('woff2');
}

@font-face {
	font-family: "Cormorant Garamond";
	font-style:  italic;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/CormorantGaramond-MediumItalic.woff2') format('woff2');
}

@font-face {
	font-family: "Cormorant Garamond";
	font-style:  normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/CormorantGaramond-SemiBold.woff2') format('woff2');
}

@font-face {
	font-family: "Cormorant Garamond";
	font-style:  italic;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/CormorantGaramond-SemiBoldItalic.woff2') format('woff2');
}

@font-face {
	font-family: "EB Garamond";
	font-style:  normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/EBGaramond-Regular.woff2') format('woff2');
}

@font-face {
	font-family: "EB Garamond";
	font-style:  italic;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/EBGaramond-Italic.woff2') format('woff2');
}

/* ──────────────────────────────────────────────────────
   Tokens globais (imutáveis por grau)
   ────────────────────────────────────────────────────── */
:root {
	/* Tipografia */
	--font-display: "Cormorant Garamond", Georgia, serif;
	--font-body:    "EB Garamond", Georgia, serif;
	--font-size-base: 1.0625rem;
	--line-height:  1.7;

	/* Forma — D1: cantos secos, sem cartão flutuante */
	--radius:       2px;
	--radius-sm:    2px;
	--radius-pill:  999px; /* badges/pills, não cards — D1 fala de card */
	--space:        1rem;

	/* Layout */
	--max-width:    960px;

	/* Cor semântica global — D7: nunca muda por grau. Erro/sucesso de formulário/ação. */
	--color-error:      #E53935;
	--color-error-text: #FF8A80;
	--color-success:      #43A047;
	--color-success-text: #81C784;

	/*
	 * Estados do domínio Membro (D7, globais) — status de membro e avisos genéricos.
	 * Domínio que o design-system não cobre (ele só tem pending/evaluating/approved,
	 * de solicitação/trabalho). Valor padrão = par escuro (vale nos ambientes
	 * escuros); sobrescrito pelo único ambiente claro (par claro), via o
	 * bloco de tokens injetado por requisição — ver nota no topo deste arquivo.
	 * Ver docs/design/tokens-ambientes-por-grau.md — seção "Tokens de estado".
	 */
	--state-ok:            #5FA97C; --state-ok-bg:      #0F2A1E;
	--state-info:          #6FA3D6; --state-info-bg:    #122236;
	--state-warn:          #D6A54A; --state-warn-bg:    #2B2109;
	--state-danger:        #D27766; --state-danger-bg:  #2E120C;
}

/* color-scheme padrão — neutro, não nomeia nenhum ambiente. O par claro de UM
   dos ambientes (`color-scheme: light`) vem embutido no próprio bloco
   injetado por `Ohad_Router::injetar_tokens_do_ambiente()` para aquele
   ambiente — ver `Ohad_Graus::TOKENS_CSS_POR_SLUG`, nota no topo deste
   arquivo (nome/slug do ambiente deliberadamente omitido deste comentário —
   achado A1 do parecer do Codex, r2, 28/10/2026). */
[data-degree] { color-scheme: dark; }

/* ──────────────────────────────────────────────────────
   Os blocos de tokens por ambiente (nove graus + vestíbulo/átrio) NÃO VIVEM
   MAIS AQUI — ver a nota no topo deste arquivo e
   `Ohad_Graus::TOKENS_CSS_POR_SLUG` (class-ohad-graus.php). Cada requisição
   recebe, via `<style>` inline injetado em `wp_head`, só o bloco do ambiente
   da página atual.
   ────────────────────────────────────────────────────── */

/* Motion — ganho barato adotado do design-system. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}

/* .screen-reader-text (ajuste de polimento, 28/10/2026, 13ª rodada) — classe
   padrão do WordPress core para "visível só a leitor de tela". O HTML da
   sidebar (`estudos-curso-sidebar-item.php`) já a usava para o texto
   "(lida)"/"(não lida)" desde a 2ª rodada de correção visual, mas este
   arquivo nunca definiu a regra — e o tema `ohad-pronaos` também não a
   declara (confirmado por grep antes desta correção). Resultado: o texto
   ficava visível ao lado de cada item, duplicando a informação que o
   marcador `●/○` já mostra visualmente. Regra copiada do padrão oficial do
   WP core (`wp-includes/css/dist/block-library/common.css` e temas padrão),
   não inventada. */
.screen-reader-text {
	border:          0;
	clip:            rect(1px, 1px, 1px, 1px);
	clip-path:       inset(50%);
	height:          1px;
	margin:          -1px;
	overflow:        hidden;
	padding:         0;
	position:        absolute !important;
	width:           1px;
	word-wrap:       normal !important;
}

/* ──────────────────────────────────────────────────────
   Container principal
   ────────────────────────────────────────────────────── */
.ohad-area-membro {
	position:    relative;
	max-width:   var(--max-width);
	margin:      2rem auto;
	padding:     0 1rem;
	color:       var(--text-main);
	font-family: var(--font-body);
	font-size:   var(--font-size-base);
	line-height: var(--line-height);
	background:  var(--bg-main);
}

/* Tela de curso (painel do grau / aula) ESCAPA do max-width de 960px do
   wrapper geral da Área do Membro — essa largura é para o conteúdo comum
   (fichas, formulários, listas), e trava a grade do curso
   (`.ohad-curso-shell`/`.ohad-curso-main`, que já tem sua própria largura de
   1180px, ver mais abaixo) antes dela ter chance de valer.

   Classe EXCLUSIVA da tela de curso — `.ohad-estudos-curso`, aplicada SÓ nos
   wrappers de `estudos-grau.php` e `estudos-aula.php`. Até a correção do
   achado 2 do parecer do Codex (28/10/2026) este seletor era
   `.ohad-area-membro.ohad-estudos`, e `.ohad-estudos` também é usada pela
   Biblioteca (`estudos-biblioteca.php`) e pelo Mapa (`estudos-ver1.php`/
   `estudos-ver2.php`, via `estudos-mapa.php`) só para fins de namespace de
   seção — essas duas telas perdiam o limite de 960px, a centralização e o
   padding horizontal por engano, numa regressão real detectada pela revisão
   adversarial (BLOQUEANTE, achado 2). Biblioteca e Mapa voltam a usar só
   `.ohad-area-membro` (regra comum acima). */
.ohad-area-membro.ohad-estudos-curso {
	max-width: none;
	margin:    0;
	padding:   0;
}

/* O wrapper geral abria 2rem de respiro entre a viewport e o primeiro
   elemento (`margin: 2rem auto`) — perdido ao zerar a margem acima.
   Devolvido só no PRIMEIRO filho da tela de curso (a faixa fina de
   identidade), para não duplicar espaço entre os elementos internos, que
   já têm seu próprio `margin-bottom`. */
.ohad-area-membro.ohad-estudos-curso > :first-child {
	margin-top: 2rem;
}

@media (max-width: 600px) {
	.ohad-area-membro.ohad-estudos-curso > :first-child {
		margin-top: 1rem;
	}
}

/* Compensação do padding removido acima — só nos elementos que ficam FORA
   de `.ohad-curso-shell` (faixa fina, menu, seletor de graus, tarja de
   orientação, faixa de editor, resumo pessoal): eles contavam com o
   `padding: 0 1rem` do wrapper geral e agora ficariam colados na borda da
   tela. `.ohad-curso-shell`/`.ohad-curso-topbar` NÃO entram aqui — já têm
   seu próprio padding horizontal (`.ohad-curso-main`, `.ohad-curso-topbar`,
   `.ohad-curso-sidebar`), e dobrar o espaçamento deles desalinharia a
   grade de 1180px que é o ponto inteiro deste porte. */
.ohad-area-membro.ohad-estudos-curso > .ohad-estudos-topo,
.ohad-area-membro.ohad-estudos-curso > .ohad-nav,
.ohad-area-membro.ohad-estudos-curso > .ohad-estudos-seletor-graus,
.ohad-area-membro.ohad-estudos-curso > .ohad-estudos-visitando,
.ohad-area-membro.ohad-estudos-curso > .ohad-estudos-faixa-editor,
.ohad-area-membro.ohad-estudos-curso > .ohad-resumo-membro-compacto {
	margin-left:  1rem;
	margin-right: 1rem;
}

@media (max-width: 600px) {
	.ohad-area-membro.ohad-estudos-curso > .ohad-estudos-topo,
	.ohad-area-membro.ohad-estudos-curso > .ohad-nav,
	.ohad-area-membro.ohad-estudos-curso > .ohad-estudos-seletor-graus,
	.ohad-area-membro.ohad-estudos-curso > .ohad-estudos-visitando,
	.ohad-area-membro.ohad-estudos-curso > .ohad-estudos-faixa-editor,
	.ohad-area-membro.ohad-estudos-curso > .ohad-resumo-membro-compacto {
		margin-left:  0.5rem;
		margin-right: 0.5rem;
	}
}

/* ──────────────────────────────────────────────────────
   Links — R5.3

   Achado do Alexandre olhando as telas: os links do Vestíbulo ("Prefiro
   entrar com senha", "Esqueci a senha") e do Átrio saíam no azul padrão do
   navegador, e depois de clicados no roxo de :visited — as duas únicas cores
   da tela que não pertencem à paleta da Ordem.

   A cor é `--accent-text`, o bronze, e não `--accent-primary`: o token de
   texto é o que carrega contraste garantido sobre `--bg-main` nos 11
   ambientes (verify-g3.py mede AA sobre ele). Nos ambientes de grau em que
   os dois divergem — Rubi (`#B54D64` vs `#C57285`) e Amatista — usar
   `--accent-primary` num link rebaixaria o contraste do TEXTO abaixo do
   limite, que é justamente o defeito que `--accent-text` existe para evitar.

   `:visited` é declarado explicitamente porque, sem ele, o UA sobrescreve a
   cor do link já visitado com o roxo padrão mesmo quando `a` está estilizado
   — o navegador trata `:visited` como mais específico por origem.
   `:focus-visible` não substitui `:focus` aqui: o anel de foco global
   (`--focus-ring`, mais abaixo) só desenha o contorno; a cor do texto do
   link precisa mudar junto, e há navegação por teclado em `:focus` sem
   `:focus-visible` (formulário submetido, foco restaurado por script).

   Escopo: `.ohad-area-membro`, `.ohad-vestibulo` e `.ohad-atrio` — as três
   raízes servidas pelo plugin. Fora delas o tema/Elementor manda, e este
   arquivo não deve pintar link de página institucional.

   O `:not()` não é decoração. Um seletor como `.ohad-atrio a` tem
   especificidade (0,2,1), maior que a de `.ohad-btn-secundario` (0,1,0) e a
   de `.ohad-nav-link` (0,1,0) — que vêm DEPOIS neste arquivo. Sem a
   exclusão, o bronze venceria a cascata e repintaria o texto dos botões
   `<a>` ("Sair" do Átrio usa `.ohad-btn-secundario`) e dos itens de
   navegação, que têm cor própria por decisão de design. Excluir na origem
   é preferível a subir a especificidade das outras regras ou a espalhar
   `!important`.

   TRÊS EXCLUSÕES A MAIS (28/10/2026, ciclo de refinamento do layout de
   curso): `.ohad-curso-licao-link` (itens da barra lateral), `.ohad-curso-
   crumb` (trilha do breadcrumb) e `.ohad-curso-aula-link` (lista do painel
   do grau) têm cor própria, portada de `base.css` (`--text-muted` na barra
   e no breadcrumb, `--text-main` no painel) — nenhuma delas é `--accent-
   text`. Sem a exclusão, esta regra (0,3,1) vencia a delas (0,1,0/0,1,1) e
   toda a barra lateral saía inteira na cor de acento, divergindo da prévia
   aprovada. Achado do ciclo de comparação pixel a pixel contra `/trilha/`. */
.ohad-area-membro a:not(.ohad-btn):not(.ohad-nav-link):not(.ohad-curso-licao-link):not(.ohad-curso-crumb):not(.ohad-curso-aula-link),
.ohad-vestibulo a:not(.ohad-btn):not(.ohad-nav-link):not(.ohad-curso-licao-link):not(.ohad-curso-crumb):not(.ohad-curso-aula-link),
.ohad-atrio a:not(.ohad-btn):not(.ohad-nav-link):not(.ohad-curso-licao-link):not(.ohad-curso-crumb):not(.ohad-curso-aula-link) {
	color:           var(--accent-text);
	text-decoration: underline;
	text-underline-offset: 0.18em;
	transition:      color 0.2s;
}

.ohad-area-membro a:not(.ohad-btn):not(.ohad-nav-link):not(.ohad-curso-licao-link):not(.ohad-curso-crumb):not(.ohad-curso-aula-link):visited,
.ohad-vestibulo a:not(.ohad-btn):not(.ohad-nav-link):not(.ohad-curso-licao-link):not(.ohad-curso-crumb):not(.ohad-curso-aula-link):visited,
.ohad-atrio a:not(.ohad-btn):not(.ohad-nav-link):not(.ohad-curso-licao-link):not(.ohad-curso-crumb):not(.ohad-curso-aula-link):visited {
	color: var(--accent-text);
}

.ohad-area-membro a:not(.ohad-btn):not(.ohad-nav-link):not(.ohad-curso-licao-link):not(.ohad-curso-crumb):not(.ohad-curso-aula-link):hover,
.ohad-area-membro a:not(.ohad-btn):not(.ohad-nav-link):not(.ohad-curso-licao-link):not(.ohad-curso-crumb):not(.ohad-curso-aula-link):focus,
.ohad-vestibulo a:not(.ohad-btn):not(.ohad-nav-link):not(.ohad-curso-licao-link):not(.ohad-curso-crumb):not(.ohad-curso-aula-link):hover,
.ohad-vestibulo a:not(.ohad-btn):not(.ohad-nav-link):not(.ohad-curso-licao-link):not(.ohad-curso-crumb):not(.ohad-curso-aula-link):focus,
.ohad-atrio a:not(.ohad-btn):not(.ohad-nav-link):not(.ohad-curso-licao-link):not(.ohad-curso-crumb):not(.ohad-curso-aula-link):hover,
.ohad-atrio a:not(.ohad-btn):not(.ohad-nav-link):not(.ohad-curso-licao-link):not(.ohad-curso-crumb):not(.ohad-curso-aula-link):focus {
	color:           var(--accent-text);
	text-decoration: none;
}

/* ──────────────────────────────────────────────────────
   Cabeçalho
   ────────────────────────────────────────────────────── */
.ohad-cabecalho {
	display:       flex;
	align-items:   center;
	gap:           1.25rem;
	margin-bottom: var(--space);
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--border-color);
}

.ohad-logo {
	width:         80px;
	height:        auto;
	border-radius: 50%;
	border:        2px solid var(--accent-primary);
}

.ohad-cabecalho-titulo {
	font-size:   1.75rem;
	color:       var(--text-main);
	font-family: var(--font-display);
	margin:      0;
	letter-spacing: 0.02em;
}

/* ──────────────────────────────────────────────────────
   Navegação
   ────────────────────────────────────────────────────── */
.ohad-nav {
	margin-bottom: var(--space);
}

.ohad-nav-lista {
	display:       flex;
	flex-wrap:     wrap;
	gap:           0.25rem;
	list-style:    none;
	margin:        0;
	padding:       0;
	border-bottom: 2px solid var(--border-color);
}

.ohad-nav-link {
	display:       block;
	padding:       0.5rem 1rem;
	color:         var(--text-muted);
	text-decoration: none;
	font-size:     0.9rem;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
	transition:    color 0.2s, border-color 0.2s;
}

.ohad-nav-link:hover,
.ohad-nav-link:focus {
	color:   var(--accent-text);
	outline: none;
}

.ohad-nav-link-ativo {
	color:             var(--text-main);
	border-bottom-color: var(--accent-primary);
	font-weight:       600;
}

/* ──────────────────────────────────────────────────────
   "Minha Conta" — submenu suspenso (CSS puro, sem JS)
   T2 do despacho 2026-09-07-construir-os-paineis-de-grau.md: as seis opções
   pessoais (Meus Dados, Minha Trilha, Meu Templo, Solicitações, Mensagens,
   Trocar Senha) ficam atrás de um único item de menu de primeiro nível.
   `<details>` mantém o submenu recolhido por padrão e oferece abertura
   nativa por toque, teclado ou ponteiro, sem JavaScript novo.
   ────────────────────────────────────────────────────── */
.ohad-nav-conta {
	position: relative;
}

.ohad-nav-conta details {
	position: relative;
}

.ohad-nav-conta summary {
	list-style: none;
	cursor: pointer;
}

.ohad-nav-conta summary::-webkit-details-marker {
	display: none;
}

.ohad-nav-link-conta {
	display:        flex;
	align-items:    center;
	gap:            0.3rem;
}

.ohad-nav-conta-seta {
	font-size: 0.7em;
}

.ohad-nav-conta-submenu {
	position:      absolute;
	top:           100%;
	left:          0;
	z-index:       20;
	min-width:     200px;
	margin:        0;
	padding:       0.35rem 0;
	list-style:    none;
	background:    var(--surface-card);
	border:        1px solid var(--border-color);
	border-top:    2px solid var(--accent-primary);
	border-radius: var(--radius);
	box-shadow:    0 4px 12px rgba(0, 0, 0, 0.15);
	opacity:       0;
	visibility:    hidden;
	transform:     translateY(-4px);
	transition:    opacity 0.15s, transform 0.15s, visibility 0.15s;
}

.ohad-nav-conta details[open] .ohad-nav-conta-submenu {
	opacity:    1;
	visibility: visible;
	transform:  translateY(0);
}

.ohad-nav-conta-link {
	display:          block;
	padding:          0.5rem 1rem;
	color:            var(--text-muted);
	text-decoration:  none;
	font-size:        0.85rem;
	white-space:      nowrap;
}

.ohad-nav-conta-link:hover,
.ohad-nav-conta-link:focus {
	color:      var(--accent-text);
	background: var(--surface-hover, rgba(191, 160, 106, 0.08));
	outline:    none;
}

/* ──────────────────────────────────────────────────────
   "Fale com a Secretaria" — item próprio do menu de primeiro nível
   (28/10/2026). Mesma regra visual de .ohad-nav-link; sem estilo
   extra além do item ativo, para não competir com Início/Estudos/
   Biblioteca por destaque.
   ────────────────────────────────────────────────────── */
.ohad-nav-link-secretaria {
	white-space: nowrap;
}

/* ──────────────────────────────────────────────────────
   Cards (blocos de seção) — D1: sem box-shadow, cantos secos
   ────────────────────────────────────────────────────── */
.ohad-card {
	background:    var(--surface-card);
	border:        1px solid var(--border-color);
	border-top:    2px solid var(--accent-primary);
	border-radius: var(--radius);
	padding:       var(--space);
	margin-bottom: var(--space);
	box-shadow:    none;
}

.ohad-card h2 {
	margin-top:  0;
	font-size:   1.2rem;
	color:       var(--text-main);
	font-family: var(--font-display);
}

.ohad-card h3 {
	font-size:   1rem;
	color:       var(--text-main);
	font-family: var(--font-display);
	margin-top:  var(--space);
}

/* ──────────────────────────────────────────────────────
   Telas de bloqueio / status
   ────────────────────────────────────────────────────── */
.ohad-bloqueio {
	max-width:     600px;
	margin:        3rem auto;
	padding:       2rem;
	text-align:    center;
	background:    var(--surface-card);
	border:        1px solid var(--border-color);
	border-top:    2px solid var(--accent-primary);
	border-radius: var(--radius);
	box-shadow:    none;
}

.ohad-bloqueio-icone {
	font-size:     2rem;
	color:         var(--accent-primary);
	margin-bottom: 1rem;
	display:       block;
}

.ohad-bloqueio-titulo {
	font-size:   1.3rem;
	color:       var(--text-main);
	font-family: var(--font-display);
	margin-top:  0;
}

.ohad-bloqueio-texto {
	color:         var(--text-muted);
	font-size:     0.95rem;
	margin-bottom: 1.5rem;
}

.ohad-bloqueio-acoes {
	display:         flex;
	flex-wrap:       wrap;
	gap:             0.75rem;
	justify-content: center;
	margin-top:      1.25rem;
}

/* ──────────────────────────────────────────────────────
   Botões
   ────────────────────────────────────────────────────── */
.ohad-btn {
	display:        inline-block;
	padding:        0.75rem 1.25rem;
	border-radius:  var(--radius-sm);
	text-decoration: none;
	font-size:      0.9rem;
	cursor:         pointer;
	border:         none;
	transition:     background 0.2s, color 0.2s, filter 0.2s;
	line-height:    1.4;
}

.ohad-btn-primario {
	background: var(--accent-primary);
	color:      var(--accent-on-primary);
}

.ohad-btn-primario:hover,
.ohad-btn-primario:focus {
	filter:  brightness(1.15);
	color:   var(--accent-on-primary);
	outline: 2px solid var(--focus-ring);
}

.ohad-btn-secundario {
	background: transparent;
	color:      var(--text-main);
	border:     1px solid var(--accent-primary);
}

.ohad-btn-secundario:hover,
.ohad-btn-secundario:focus {
	background: var(--surface-card);
	outline:    2px solid var(--focus-ring);
}

.ohad-btn-pequeno {
	padding:   0.4rem 0.9rem;
	font-size: 0.82rem;
}

/* ──────────────────────────────────────────────────────
   Avisos
   ────────────────────────────────────────────────────── */
.ohad-aviso {
	padding:       0.75rem 1rem;
	border-radius: var(--radius-sm);
	margin-bottom: 1rem;
	font-size:     0.9rem;
}

.ohad-aviso-sucesso {
	background:  var(--state-ok-bg);
	border-left: 3px solid var(--state-ok);
	color:       var(--state-ok);
}

.ohad-aviso-erro {
	background:  var(--state-danger-bg);
	border-left: 3px solid var(--state-danger);
	color:       var(--state-danger);
}

.ohad-aviso-info {
	background:  var(--state-info-bg);
	border-left: 3px solid var(--state-info);
	color:       var(--state-info);
}

.ohad-aviso-afastado {
	background:    var(--state-warn-bg);
	border-left:   3px solid var(--accent-primary);
	color:         var(--state-warn);
	padding:       1rem;
	margin-bottom: var(--space);
}

.ohad-aviso-afastado p {
	margin: 0 0 0.75rem;
}

/* ──────────────────────────────────────────────────────
   Faixa de aviso de fase inicial (28/10/2026) — discreta, dispensável.
   Vive no layout (layout-area-membro.php), visível em toda tela de
   /membro/* até o membro dispensá-la. Cor neutra/info — não é erro,
   nem sucesso, nem alerta de atraso.
   ────────────────────────────────────────────────────── */
.ohad-faixa-fase-inicial {
	display:         flex;
	flex-wrap:       wrap;
	align-items:     center;
	justify-content: center;
	gap:             0.6rem;
	padding:         0.6rem 1rem;
	margin-bottom:   var(--space);
	background:      var(--state-info-bg);
	border-bottom:   1px solid var(--state-info);
	color:           var(--state-info);
	font-size:       0.85rem;
	text-align:      center;
}

.ohad-faixa-fase-inicial a {
	color:           inherit;
	text-decoration: underline;
	font-weight:     600;
}

.ohad-faixa-fase-inicial-dispensar {
	background:      none;
	border:          1px solid currentColor;
	border-radius:   var(--radius-sm);
	color:           inherit;
	font-size:       0.78rem;
	padding:         0.15rem 0.55rem;
	cursor:          pointer;
	line-height:     1.3;
}

.ohad-faixa-fase-inicial-dispensar:hover,
.ohad-faixa-fase-inicial-dispensar:focus {
	filter:  brightness(1.1);
	outline: 2px solid var(--focus-ring);
}

/* ──────────────────────────────────────────────────────
   "Fale com a Secretaria" — formulário e histórico (28/10/2026;
   acabamento visual r2, 28/10/2026 — item 1 do pedido do Alexandre:
   coluna de ~130px vinha do bug de grid corrigido acima em
   `.ohad-area-membro-conta > .ohad-card`; o formulário em si, mesmo já
   com largura correta de card, ainda esticava para a largura total do
   card (960px) sem limite próprio — por isso a faixa 560–640px abaixo.
   ────────────────────────────────────────────────────── */
.ohad-form-mensagem-secretaria {
	display:        flex;
	flex-direction: column;
	gap:            0.9rem;
	max-width:      600px; /* faixa 560–640px pedida — 600px fica no meio,
	                           confortável para o textarea de 8 linhas sem
	                           ficar nem apertado nem largo demais num card
	                           de 960px. */
	margin-top:     1rem;
}

.ohad-form-mensagem-secretaria .ohad-campo select,
.ohad-form-mensagem-secretaria .ohad-campo textarea {
	width:     100%;
	max-width: none; /* vence o max-width:320px herdado de .ohad-input-palavra
	                     — o campo de assunto/mensagem aqui deve preencher o
	                     formulário, não ficar com a largura do campo da
	                     Palavra Equinocial. */
	box-sizing: border-box;
}

/* Polimento visual pós-parecer Codex r1 (28/10/2026), item (b) do pedido do
   Alexandre: o <select> de Assunto usava a aparência nativa do navegador
   (altura/padding diferentes do textarea já estilizado pela regra geral de
   `.ohad-area-membro select` acima, que só define cor/borda/raio, não
   dimensão). Aqui os dois ganham o MESMO padding, remove-se a seta nativa do
   select (ela variava de tamanho entre navegadores, destoando do bloco) e
   uma seta própria é desenhada via background, no mesmo tom do restante do
   formulário escuro. */
.ohad-form-mensagem-secretaria .ohad-campo select,
.ohad-form-mensagem-secretaria .ohad-campo textarea {
	padding:     0.65rem 0.9rem;
	font-size:   1rem;
	font-family: inherit;
	line-height: 1.4;
}

.ohad-form-mensagem-secretaria .ohad-campo select {
	appearance:         none;
	-webkit-appearance: none;
	-moz-appearance:    none;
	min-height:         2.7rem; /* mesma altura de controle de uma linha do textarea */
	padding-right:      2.2rem; /* espaço para a seta própria, abaixo */
	background-image:
		linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
		linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
	background-position:
		calc(100% - 1.15rem) calc(50% - 0.2rem),
		calc(100% - 0.85rem) calc(50% - 0.2rem);
	background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
	background-repeat: no-repeat;
}

#ohad_mensagem {
	resize: vertical;
}

.ohad-mensagem-contador {
	align-self:  flex-end;
	margin-top:  -0.2rem;
	color:       var(--text-muted);
	font-size:   0.8rem;
	font-variant-numeric: tabular-nums;
}

.ohad-mensagem-contador.ohad-mensagem-contador-limite {
	color: var(--state-danger, var(--color-error));
}

.ohad-mensagens-historico {
	margin-top: 1.5rem;
}

.ohad-mensagens-lista {
	list-style: none;
	margin:     0;
	padding:    0;
	display:    flex;
	flex-direction: column;
	gap:        0.75rem;
}

.ohad-mensagens-item {
	border:        1px solid var(--border-color);
	border-radius: var(--radius-sm);
	padding:       0.85rem 1rem;
	background:    color-mix(in srgb, var(--surface-card) 92%, var(--bg-main));
	box-shadow:    0 1px 2px color-mix(in srgb, black 12%, transparent);
}

.ohad-mensagens-item-cabecalho {
	display:       flex;
	flex-wrap:     wrap;
	align-items:   baseline;
	gap:           0.6rem;
	margin-bottom: 0.3rem;
	font-size:     0.85rem;
	color:         var(--text-muted);
}

.ohad-mensagens-item-status {
	color: var(--accent-text);
}

.ohad-mensagens-item-protocolo {
	margin:     0 0 0.35rem;
	font-size:  0.78rem;
	color:      var(--text-muted);
	font-family: monospace;
}

.ohad-mensagens-item-corpo {
	margin:      0;
	color:       var(--text-main);
	white-space: pre-wrap;
}

@media (max-width: 600px) {
	.ohad-form-mensagem-secretaria {
		max-width: none;
	}
}

.ohad-aviso-acoes {
	margin-top: 0.5rem;
}

/* ──────────────────────────────────────────────────────
   Badges de status (status de MEMBRO — domínio próprio, sem
   equivalente no design-system, que só cobre status de solicitação).
   Critério: contraste texto/fundo ≥4,5; delimitados por borda de
   1px na cor do estado (D6 de separação por luminância não se
   aplica — badge não é card, ver docs/design/tokens-ambientes-por-grau.md).
   ────────────────────────────────────────────────────── */
.ohad-badge {
	display:        inline-block;
	padding:        .2rem .65rem;
	border-radius:  var(--radius-pill);
	font-size:      .78rem;
	font-weight:    600;
	text-transform: uppercase;
	letter-spacing: .05em;
	border:         1px solid transparent;
}

.ohad-badge-ativo      { background: var(--state-ok-bg);     color: var(--state-ok);     border-color: var(--state-ok); }
.ohad-badge-inativo    { background: var(--surface-card);    color: var(--text-muted);   border-color: var(--border-color); }
.ohad-badge-suspenso   { background: var(--state-warn-bg);   color: var(--state-warn);   border-color: var(--state-warn); }
.ohad-badge-afastado   { background: var(--state-info-bg);   color: var(--state-info);   border-color: var(--state-info); }
.ohad-badge-adormecido { background: var(--state-info-bg);   color: var(--state-info);   border-color: var(--state-info); }
.ohad-badge-desligado  { background: var(--state-danger-bg); color: var(--state-danger); border-color: var(--state-danger); }

/* ──────────────────────────────────────────────────────
   In Memoriam — tokenizado in-place (domínio próprio, sem
   equivalente no design-system).
   ────────────────────────────────────────────────────── */
.ohad-inmemoriam {
	background:    var(--surface-card);
	color:         var(--text-muted);
	border:        1px solid var(--accent-primary);
	border-radius: var(--radius);
	padding:       var(--space);
	margin-bottom: var(--space);
}

.ohad-inmemoriam-titulo {
	color:          var(--accent-text);
	font-size:      1.1rem;
	font-family:    var(--font-display);
	margin:         0 0 1rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.ohad-inmemoriam-lista {
	list-style: none;
	margin:     0;
	padding:    0;
}

.ohad-inmemoriam-item {
	display:               grid;
	grid-template-columns: 1fr auto;
	gap:                   0.25rem 1rem;
	padding:               0.75rem 0;
	border-bottom:         1px solid var(--border-color);
	font-style:            italic;
}

.ohad-inmemoriam-item:last-child {
	border-bottom: none;
}

.ohad-inmemoriam-nome {
	font-weight: 700;
	color:       var(--text-main);
}

.ohad-inmemoriam-motto {
	color:     var(--text-muted);
	font-size: 0.88rem;
}

.ohad-inmemoriam-grau {
	font-size:   0.85rem;
	color:       var(--text-muted);
	grid-column: 1;
}

.ohad-inmemoriam-data {
	font-size:   0.82rem;
	color:       var(--text-muted);
	grid-row:    1;
	grid-column: 2;
	align-self:  start;
}

.ohad-inmemoriam-legenda {
	display: none; /* Rótulo "Em memória de X" visível apenas em tela cheia */
}

/* ──────────────────────────────────────────────────────
   Timeline da Trilha — tokenizado in-place (domínio próprio;
   diferente de .path-step do design-system, que é currículo por
   grau, feature futura não trazida nesta migração).
   ────────────────────────────────────────────────────── */
.ohad-trail-lista {
	list-style: none;
	margin:     0;
	padding:    0;
}

.ohad-trail-item {
	display:       flex;
	gap:           1rem;
	padding:       0.75rem 0;
	border-bottom: 1px solid var(--border-color);
}

.ohad-trail-item:last-child {
	border-bottom: none;
}

.ohad-trail-data {
	flex-shrink: 0;
	min-width:   80px;
	font-size:   0.82rem;
	color:       var(--text-muted);
	padding-top: 0.15rem;
}

.ohad-trail-tipo {
	display:       block;
	font-weight:   600;
	font-size:     0.88rem;
	color:         var(--text-main);
	margin-bottom: 0.25rem;
}

.ohad-trail-descricao {
	margin:    0;
	font-size: 0.9rem;
	color:     var(--text-muted);
}

/* ──────────────────────────────────────────────────────
   Resumo do membro em rodapé compacto (T2 2026-09-07)
   Usado no fim do painel do grau (estudos-grau.php) e como fallback em
   secao-inicio.php — confirmação de identidade, não conteúdo primário.
   ────────────────────────────────────────────────────── */
.ohad-resumo-membro-compacto {
	margin-top: calc(var(--space) * 1.5);
	font-size:  0.9rem;
}

.ohad-resumo-membro-compacto h2 {
	font-size: 1rem;
}

/* ──────────────────────────────────────────────────────
   Listas de dados (dl/dt/dd)
   ────────────────────────────────────────────────────── */
.ohad-resumo-lista,
.ohad-dados-lista {
	display:               grid;
	grid-template-columns: auto 1fr;
	gap:                   0.4rem 1rem;
	margin:                0;
}

.ohad-resumo-lista dt,
.ohad-dados-lista dt {
	font-weight:    600;
	font-size:      0.88rem;
	color:          var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.ohad-resumo-lista dd,
.ohad-dados-lista dd {
	margin: 0;
	color:  var(--text-main);
}

/* ──────────────────────────────────────────────────────
   Oficiais do templo
   ────────────────────────────────────────────────────── */
.ohad-oficiais-lista {
	list-style: none;
	margin:     0;
	padding:    0;
}

.ohad-oficial-item {
	display:       flex;
	flex-wrap:     wrap;
	gap:           0.25rem 0.75rem;
	padding:       0.5rem 0;
	border-bottom: 1px solid var(--border-color);
	font-size:     0.9rem;
}

.ohad-oficial-item:last-child {
	border-bottom: none;
}

.ohad-oficial-nome {
	font-weight: 600;
}

.ohad-oficial-motto {
	color:      var(--text-muted);
	font-style: italic;
}

.ohad-oficial-cargo {
	color: var(--text-main);
}

.ohad-oficial-grau {
	color:     var(--text-muted);
	font-size: 0.82rem;
}

/* ──────────────────────────────────────────────────────
   Formulários
   ────────────────────────────────────────────────────── */
.ohad-form-palavra,
.ohad-politica-aceite {
	display:        flex;
	flex-direction: column;
	gap:            1rem;
	margin-top:     1.25rem;
}

.ohad-campo {
	display:        flex;
	flex-direction: column;
	gap:            0.35rem;
}

.ohad-campo label {
	color:          var(--text-muted);
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size:      .875rem;
	font-weight:    600;
}

.ohad-input-palavra {
	box-sizing:     border-box;
	padding:        0.65rem 0.9rem;
	border:         1px solid var(--border-color);
	border-radius:  var(--radius-sm);
	font-size:      1.1rem;
	width:          100%;
	max-width:      320px;
	background:     var(--surface-card);
	color:          var(--text-main);
	text-align:     center;
	letter-spacing: .1em;
}

.ohad-input-palavra:focus {
	border-color: var(--accent-primary);
	outline:      2px solid var(--focus-ring);
}

.ohad-texto-pequeno {
	font-size: 0.82rem;
	color:     var(--text-muted);
}

/* ──────────────────────────────────────────────────────
   Campo de senha com botão de revelar (T3, itens 2 e 3,
   06/08/2026) — máscara nativa (type=password) + ícone de
   olho para alternar para texto visível.
   ────────────────────────────────────────────────────── */
.ohad-campo-senha-grupo {
	position: relative;
	display:  flex;
}

.ohad-campo-senha-grupo input {
	flex:        1 1 auto;
	padding-right: 2.75rem !important; /* espaço para o botão de revelar não sobrepor o texto digitado */
}

.ohad-btn-revelar-senha {
	position:      absolute;
	top:           0;
	right:         0;
	height:        100%;
	width:         2.5rem;
	display:       flex;
	align-items:   center;
	justify-content: center;
	background:    transparent;
	border:        none;
	cursor:        pointer;
	color:         var(--text-muted);
	font-size:     1.1rem;
	line-height:   1;
}

.ohad-btn-revelar-senha:hover,
.ohad-btn-revelar-senha:focus-visible {
	color: var(--accent-text);
}

/* Mensagem de erro de campo (ex.: "senhas não coincidem") — altura mínima
   SEMPRE reservada, vazia ou cheia, para o texto não empurrar o restante do
   formulário quando aparece (T3, item 2: a mensagem "pulava como balão" a
   cada tecla; agora só valida no blur/submit e o espaço já existe antes). */
.ohad-campo-erro {
	min-height:  1.2em;
	margin:      0;
	color:       var(--state-danger, var(--color-error));
}

.ohad-desafio-palavra {
	max-width:  460px;
	margin:     0 auto;
	text-align: center;
}

/* ──────────────────────────────────────────────────────
   Vestíbulo — página própria de login (/entrar/), tela focada, sem
   aside de navegação e sem NENHUM data-degree de grau (D13/sigilo:
   ninguém está autenticado nesta tela). Classes copiadas de
   .vestibulo/.form-login/.btn/.btn-sec do mockup rev. 3, prefixadas
   .ohad- para caber no vocabulário de classes já existente no plugin.
   ────────────────────────────────────────────────────── */
.ohad-vestibulo {
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	justify-content: center;
	min-height:      100vh;
	padding:         3.5rem 1.5rem;
	text-align:      center;
	background:      var(--bg-main);
	color:           var(--text-main);
}

.ohad-vestibulo-emblema {
	height:  112px;
	width:   auto;
	margin:  0 auto 1.5rem;
	display: block;
	color:   var(--accent-primary);
}

.ohad-vestibulo-titulo {
	font-family:    var(--font-display);
	font-weight:    600;
	font-size:      1.45rem;
	letter-spacing: .04em;
	margin:         0 0 0.25rem;
	color:          var(--text-main);
}

.ohad-vestibulo-sub {
	color:          var(--text-muted);
	font-size:      0.9rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	margin:         0 0 2.25rem;
}

/* No Vestíbulo não há superfície (D12): os campos são recortes no vazio,
   identificados só pela borda (--field-border, ≥3:1 por WCAG 1.4.11). */
.ohad-form-login {
	width:      100%;
	max-width:  320px;
	margin:     0 auto;
	text-align: left;
}

.ohad-form-login label {
	display:        block;
	font-size:      0.78rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color:          var(--text-muted);
	margin:         0.9rem 0 0.35rem;
}

.ohad-form-login input {
	box-sizing:    border-box;
	width:         100%;
	font:          inherit;
	padding:       0.65rem 0.75rem;
	background:    transparent;
	color:         var(--text-main);
	border:        1px solid var(--field-border, var(--border-color));
	border-radius: var(--radius-sm);
}

.ohad-form-login .ohad-nota {
	margin:    0.75rem 0 0;
	font-size: 0.82rem;
	color:     var(--text-muted);
	text-align: center;
}

.ohad-vestibulo-links {
	margin-top:     1.4rem;
	font-size:      0.88rem;
	display:        flex;
	flex-direction: column;
	gap:            0.4rem;
}

.ohad-vestibulo-rodape {
	margin-top: 3rem;
	color:      var(--text-muted);
	font-size:  0.78rem;
}

/* ──────────────────────────────────────────────────────
   Átrio — tela focada pós-login, sem aside de navegação.
   Variante A (D9/sigilo de grau): o Átrio inteiro é ambiente NEUTRO (slug do
   próprio Átrio, não de grau nenhum — citado por extenso em
   Ohad_Graus::TOKENS_CSS_POR_SLUG, nunca aqui) — a única marca do grau do
   membro é a linha de identificação (.ohad-atrio-id), que permanece em
   branco para não confundir o tratamento do membro com a cor do ambiente de
   estudos.
   ────────────────────────────────────────────────────── */
.ohad-atrio {
	max-width: 640px;
	margin:    2rem auto;
	padding:   0 1rem;
}

.ohad-atrio-porta .ohad-form-palavra {
	margin: 1rem 0;
}

.ohad-atrio-mural-lista {
	margin:     0;
	padding-left: 1.2rem;
	color:      var(--text-muted);
	font-size:  0.92rem;
}

.ohad-atrio-mural-lista li {
	margin-bottom: 0.5rem;
}

.ohad-atrio .atrio-topo {
	justify-content: space-between;
	flex-wrap:       wrap;
	gap:             0.5rem 1rem;
}

/* Linha de identificação: tratamento + motto + notação, sempre neutra. */
.ohad-atrio-id {
	display:     flex;
	align-items: center;
	gap:         0.5rem;
	font-size:   0.92rem;
	color:       #E8E6DF !important;
}

.ohad-atrio-id-sigilo {
	width:  20px;
	height: 20px;
	flex:   none;
}

.ohad-atrio-id-sigilo * {
	fill: #E8E6DF !important;
}

.ohad-badge-regular {
	color:        #7FD9A6;
	border-color: #2E5C43;
}

.ohad-badge-irregular {
	color:        #E8A87C;
	border-color: #6B4A2E;
}

/* ──────────────────────────────────────────────────────
   Seção Quitação — dados reais do módulo Mensalidades (T2 da fatia 4,
   28/09/2026). Reaproveita .ohad-card, .ohad-badge, .ohad-aviso,
   .ohad-resumo-lista e .ohad-trail-* já existentes — só o necessário é
   declarado aqui. Mobile-first, como o resto do arquivo.
   ────────────────────────────────────────────────────── */
.ohad-quitacao-status {
	display:     flex;
	flex-wrap:   wrap;
	gap:         0.5rem;
	align-items: center;
	margin-bottom: 1rem;
}

.ohad-quitacao-resumo .ohad-resumo-lista {
	margin-bottom: 1rem;
}

.ohad-quitacao-instrucao {
	margin-top:    1.25rem;
	padding-top:   1rem;
	border-top:    1px solid var(--border-color);
}

.ohad-quitacao-instrucao h3 {
	margin-bottom: 0.5rem;
}

.ohad-quitacao-instrucao p {
	color:      var(--text-muted);
	white-space: pre-line;
}

.ohad-quitacao-historico {
	margin-top:  1.5rem;
	padding-top: 1rem;
	border-top:  1px solid var(--border-color);
}

.ohad-quitacao-historico h3 {
	margin-bottom: 0.5rem;
}

@media (max-width: 600px) {
	.ohad-quitacao-status {
		flex-direction: column;
		align-items:    flex-start;
	}
}

/* ──────────────────────────────────────────────────────
   Política de privacidade — tokenizado in-place (domínio próprio).
   ────────────────────────────────────────────────────── */
.ohad-politica-titulo {
	font-size:   1.4rem;
	color:       var(--text-main);
	font-family: var(--font-display);
	margin-top:  0;
}

.ohad-politica-subtitulo {
	color:         var(--text-muted);
	font-size:     0.9rem;
	margin-bottom: 1.5rem;
}

.ohad-politica-corpo h2 {
	font-size:     1rem;
	color:         var(--text-main);
	margin-top:    1.5rem;
	margin-bottom: 0.35rem;
}

.ohad-politica-corpo p {
	margin-top: 0;
	font-size:  0.92rem;
	color:      var(--text-muted);
}

.ohad-politica-rodape {
	font-size:    0.82rem;
	color:        var(--text-muted);
	margin-top:   2rem;
	padding-top:  1rem;
	border-top:   1px solid var(--border-color);
}

/*
 * Achado do lote de polimento de 02/10/2026 (item 4,
 * `_coordenacao/lote-visual-fatia4.md`): o Alexandre relatou o texto do
 * aceite "ilegível — pequeno e de baixo contraste". A COR já era
 * `var(--text-main)` por herança de `.ohad-area-membro` (não `--text-muted`),
 * e `--text-main` tem contraste >12:1 contra `--surface-card` em todos os
 * temas (ver `docs/design/tokens-ambientes-por-grau.md`) — o defeito real
 * era o TAMANHO (0.9rem, abaixo do corpo de texto padrão) para uma frase de
 * consentimento LGPD, que precisa ser inequivocamente legível. `color`
 * declarado explicitamente aqui (não só herdado) para deixar a intenção
 * clara e blindar contra qualquer CSS externo que mude `.ohad-area-membro`.
 */
.ohad-politica-checkbox {
	display:     flex;
	align-items: flex-start;
	gap:         0.5rem;
	font-size:   1rem;
	color:       var(--text-main);
	cursor:      pointer;
}

.ohad-politica-checkbox input {
	margin-top: 0.25rem;
	flex-shrink: 0;
}

/* ──────────────────────────────────────────────────────
   Inputs — regras universais por token de ambiente. O escopo sob
   .ohad-area-membro + !important vence os estilos de input do tema
   Astra (background:white/color:black com alta especificidade).
   ────────────────────────────────────────────────────── */
.ohad-area-membro input[type="text"],
.ohad-area-membro input[type="password"],
.ohad-area-membro input[type="email"],
.ohad-area-membro input[type="search"],
.ohad-area-membro textarea,
.ohad-area-membro select,
.ohad-area-membro .ohad-campo input,
.ohad-area-membro .ohad-campo textarea,
.ohad-area-membro .ohad-campo select,
.ohad-area-membro .ohad-input-palavra {
	background:    var(--surface-card) !important;
	color:         var(--text-main) !important;
	border:        1px solid var(--field-border, var(--border-color)) !important;
	border-radius: var(--radius-sm) !important;
}

.ohad-area-membro input[type="text"]:focus,
.ohad-area-membro input[type="password"]:focus,
.ohad-area-membro input[type="email"]:focus,
.ohad-area-membro textarea:focus,
.ohad-area-membro .ohad-input-palavra:focus {
	border-color:   var(--accent-primary) !important;
	outline:        2px solid var(--focus-ring) !important;
	outline-offset: 0 !important;
	background:     var(--surface-card) !important;
	color:          var(--text-main) !important;
}

/* Anel de foco unificado — ganho barato adotado do design-system: halo duplo
   (outline + box-shadow na cor da superfície) separa o anel do elemento em
   todos os nove ambientes, inclusive quando o elemento já é preenchido na
   cor do próprio acento (ex. .ohad-btn-primario). */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--surface-card);
}

/* ──────────────────────────────────────────────────────
   Paginação
   ────────────────────────────────────────────────────── */
.ohad-pagination {
	margin-top: 1.25rem;
	display:    flex;
	gap:        0.25rem;
	flex-wrap:  wrap;
}

.ohad-pagination .page-numbers {
	display:        inline-block;
	padding:        0.35rem 0.65rem;
	border:         1px solid var(--border-color);
	border-radius:  var(--radius-sm);
	text-decoration: none;
	font-size:      0.85rem;
	color:          var(--text-main);
	transition:     background 0.15s;
}

.ohad-pagination .page-numbers.current {
	background:   var(--accent-primary);
	color:        var(--accent-on-primary);
	border-color: var(--accent-primary);
}

.ohad-pagination .page-numbers:hover {
	background: var(--surface-card);
}

/* ──────────────────────────────────────────────────────
   Módulo de Estudos (M5-mínimo) — T3.
   Desenho DESKTOP-FIRST (D-E4): coluna de leitura medida, sumário lateral
   fixo, corpo de fonte grande — adaptado depois por media query real (ver
   bloco responsivo abaixo), não "zoom de lupa".

   A cor pertence ao CONTEÚDO (§5): .ohad-estudos-grau-card usa a variável
   inline --card-accent (resolvida por grau, uma vez por card, no mapa) —
   nunca o data-degree do documento inteiro, que no mapa/biblioteca é sempre
   o do Átrio (ambiente neutro, não um grau — slug por extenso só em
   Ohad_Graus::TOKENS_CSS_POR_SLUG). No painel/aula, o ambiente inteiro já é
   o do grau da página via [data-degree], então os elementos usam
   --accent-text normalmente, herdado do ambiente.
   ────────────────────────────────────────────────────── */
.ohad-estudos-topo {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             0.75rem 1.25rem;
	flex-wrap:       wrap;
}

.ohad-estudos-marca {
	font-family:    var(--font-display);
	font-size:      1.05rem;
	letter-spacing: 0.04em;
	color:          var(--text-main);
}

.ohad-estudos-marca span {
	color: var(--accent-text);
}

.ohad-estudos-nav {
	margin-bottom: 1.5rem;
}

.ohad-estudos-visitando {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             1rem;
	padding:         0.6rem 1rem;
	margin-bottom:   1.25rem;
	background:      color-mix(in srgb, var(--accent-text) 8%, transparent);
	border:          1px solid var(--border-color);
	border-radius:   var(--radius-sm);
	font-size:       0.85rem;
	color:           var(--text-muted);
}

.ohad-estudos-visitando b {
	color: var(--text-main);
}

.ohad-estudos-visitando a {
	color:           var(--accent-text);
	white-space:     nowrap;
	text-decoration: none;
}

.ohad-estudos-titulo {
	font-family: var(--font-display);
	font-size:   2rem;
	color:       var(--text-main);
	margin:      0 0 0.3rem;
}

.ohad-estudos-lead {
	color:      var(--text-muted);
	max-width:  62ch;
	margin:     0 0 1.6rem;
	font-size:  0.95rem;
}

/* Mapa: grade de cards de grau, cada um na cor do próprio ambiente. */
.ohad-estudos-graus {
	display:               grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap:                   1.1rem;
}

.ohad-aviso-revisao-graus { margin: 1.25rem 0; background: var(--surface-card); border: 1px solid var(--accent-text); border-left: 5px solid var(--accent-text); color: var(--text-main); }
.ohad-aviso-revisao-graus h2 { margin: 0 0 .35rem; color: var(--accent-text); font-size: 1.05rem; }
.ohad-aviso-revisao-graus p { margin: 0; }
.ohad-aviso-revisao-graus a { color: var(--accent-text); font-weight: 700; }
.ohad-revisao-graus { margin-top: 1.5rem; border-top: 1px solid var(--border-color); padding-top: 1.25rem; }
.ohad-revisao-graus h3 { margin: 0 0 .45rem; color: var(--accent-text); font-family: var(--font-display); font-size: 1.25rem; }
.ohad-form-revisao-graus { margin-top: 1rem; }
.ohad-tabela-revisao-wrap { overflow-x: auto; }
.ohad-tabela-revisao-graus { width: 100%; border-collapse: collapse; min-width: 720px; }
.ohad-tabela-revisao-graus th, .ohad-tabela-revisao-graus td { padding: .7rem .55rem; border-bottom: 1px solid var(--border-color); text-align: left; vertical-align: middle; }
.ohad-tabela-revisao-graus thead th { color: var(--accent-text); font-size: .86rem; letter-spacing: .03em; }
.ohad-tabela-revisao-graus tbody th { color: var(--text-main); font-weight: 600; white-space: nowrap; }
.ohad-tabela-revisao-graus input, .ohad-tabela-revisao-graus select { width: 100%; min-height: 2.55rem; font: inherit; color: var(--text-main); background: var(--surface-elevated); border: 1px solid var(--border-color); padding: .45rem .55rem; }
.ohad-form-revisao-graus .ohad-btn { margin-top: 1rem; }

/* A célula vazia conclui a fileira dos cinco graus da Ordem Externa antes
   do próximo ambiente da grade. Não é conteúdo nem recebe foco; é só
   estrutura na grade ampla. Em uma coluna, a ordem linear já comunica essa
   transição. */
.ohad-estudos-grau-quebra-externa {
	min-height: 1px;
}

.ohad-estudos-grau-card {
	position:      relative;
	border:        1px solid var(--border-color);
	background:    var(--surface-card);
	color:         var(--text-main);
	padding:       1.35rem 1.5rem;
	border-radius: var(--radius-sm);
}

.ohad-estudos-grau-barra {
	position: absolute;
	top: 0; left: 0; bottom: 0;
	width:      3px;
	background: var(--card-accent, var(--accent-text));
}

.ohad-estudos-grau-notacao {
	font-family:    var(--font-display);
	letter-spacing: 0.1em;
	color:          var(--card-accent, var(--accent-text));
	font-size:      1rem;
}

.ohad-estudos-grau-nome {
	font-family: var(--font-display);
	font-size:   1.4rem;
	margin:      0.15rem 0 0.5rem;
}

.ohad-estudos-grau-meta {
	font-size:     0.82rem;
	color:         var(--text-muted);
	border-top:    1px solid var(--border-color);
	padding-top:   0.7rem;
	margin-bottom: 0.9rem;
}

.ohad-estudos-em-preparo {
	margin-top:    1.5rem;
	border:        1px dashed var(--border-color);
	padding:       1rem 1.25rem;
	color:         var(--text-muted);
	font-size:     0.88rem;
	border-radius: var(--radius-sm);
}

.ohad-estudos-em-preparo strong {
	display:     block;
	color:       var(--text-main);
	font-family: var(--font-display);
	font-size:   1rem;
	margin-bottom: 0.25rem;
}

/* Painel do grau e aula: hero + colunas (sumário lateral fixo + conteúdo). */
.ohad-estudos-hero {
	padding:       1.6rem 0 1.3rem;
	border-bottom: 1px solid var(--border-color);
	border-left:   3px solid var(--accent-text);
	padding-left:  1.4rem;
	margin-bottom: 1.6rem;
}

.ohad-estudos-hero-notacao {
	font-family:    var(--font-display);
	letter-spacing: 0.12em;
	color:          var(--accent-text);
	font-size:      0.95rem;
}

.ohad-estudos-hero-titulo {
	font-family: var(--font-display);
	font-size:   2.1rem;
	margin:      0.1rem 0 0;
	color:       var(--text-main);
}

.ohad-estudos-colunas {
	display:               grid;
	grid-template-columns: 250px 1fr;
	gap:                   2rem;
	align-items:           start;
}

.ohad-estudos-sumario {
	position: sticky;
	top:      1rem;
	border-right: 1px solid var(--border-color);
	padding-right: 1.25rem;
}

.ohad-estudos-sumario h4 {
	font-family:    var(--font-ui, inherit);
	font-size:      0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color:          var(--text-muted);
	margin:         0 0 0.9rem;
}

.ohad-estudos-sumario-lista {
	list-style: none;
	margin:     0;
	padding:    0;
	font-size:  0.9rem;
}

.ohad-estudos-sumario-lista li {
	padding:       0.45rem 0;
	border-bottom: 1px solid var(--border-color);
	color:         var(--text-muted);
}

.ohad-area-membro .ohad-estudos-sumario-lista li a:not(.ohad-btn):not(.ohad-nav-link) {
	/* O índice é navegação de leitura: o branco suave carrega o texto;
	   o acento do grau fica reservado ao item ativo e aos estados de foco. */
	color: var(--text-main);
}

.ohad-estudos-sumario-lista li.ohad-estudos-sumario-ativo,
.ohad-area-membro .ohad-estudos-sumario-lista li.ohad-estudos-sumario-ativo a {
	color: var(--accent-text);
}

.ohad-estudos-sumario-lista li span {
	font-family: ui-monospace, monospace;
	font-size:   0.72rem;
	opacity:     0.6;
	margin-right: 0.5rem;
}

.ohad-estudos-principal {
	min-width: 0;
}

/* O painel de grau mostra uma lista de lições uma única vez. O sumário fica
   reservado à leitura de uma lição aberta, onde ele é navegação real. */
.ohad-estudos-colunas--sem-sumario {
	grid-template-columns: minmax(0, 1fr);
}

.ohad-estudos-colunas--sem-sumario .ohad-estudos-principal {
	max-width: 70ch;
}

.ohad-estudos-aula-linha {
	display:       flex;
	gap:           1.1rem;
	align-items:   flex-start;
	padding:       1rem 0;
	border-bottom: 1px solid var(--border-color);
}

.ohad-estudos-aula-rascunho {
	opacity: 0.55;
}

.ohad-estudos-aula-num {
	font-family: var(--font-display);
	font-size:   1.4rem;
	color:       var(--accent-text);
	min-width:   32px;
}

.ohad-estudos-aula-linha h4 {
	font-family: var(--font-display);
	font-size:   1.2rem;
	margin:      0;
}

.ohad-estudos-aula-linha h4 a {
	color: var(--text-main);
}

.ohad-estudos-tag {
	font-size:      0.62rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border:         1px solid var(--border-color);
	color:          var(--text-muted);
	padding:        0.1rem 0.4rem;
	margin-left:    0.5rem;
	vertical-align: 2px;
}

/* Estado de construção do painel de grau sem lição publicada — substitui
   .ohad-estudos-em-branco (despacho 2026-09-12-painel-do-grau-5-6.md §T2).
   Herda o accent do ambiente do grau da página via var(--accent-primary),
   então o bloco é o mesmo markup em qualquer grau e se pinta sozinho. */
.ohad-estudos-em-construcao {
	border-left:   2px solid var(--accent-primary);
	padding:       1.25rem 0 1.25rem 1.25rem;
	margin-bottom: 0.5rem;
}

.ohad-estudos-em-construcao-titulo {
	color:         var(--text-main);
	font-weight:   600;
	margin:        0 0 0.75rem;
}

.ohad-estudos-em-construcao-corpo {
	color:         var(--text-muted);
	margin:        0 0 0.75rem;
	max-width:     52ch;
}

.ohad-estudos-literatura {
	margin-top:  2rem;
	border-top:  1px solid var(--border-color);
	padding-top: 1.5rem;
}

.ohad-estudos-literatura h3 {
	font-family: var(--font-display);
	font-size:   1.3rem;
	margin:      0 0 0.3rem;
}

.ohad-estudos-obra {
	display:         flex;
	justify-content: space-between;
	gap:             1.25rem;
	padding:         0.75rem 0;
	border-bottom:   1px solid var(--border-color);
	font-size:       0.92rem;
}

.ohad-estudos-obra-autor {
	color:     var(--text-muted);
	font-size: 0.8rem;
}

.ohad-estudos-obra a {
	color:           var(--accent-text);
	font-size:       0.8rem;
	white-space:     nowrap;
	text-decoration: none;
}

/* Aula: coluna de leitura medida (~66ch), desktop-first (§10 critério 15).
   Tamanhos de fonte e entrelinha IGUAIS aos da prévia (`base.css` do
   curso-template), item 4 da 5ª rodada de polimento — antes desta correção
   o corpo da lição saía maior que a prévia em todo o intervalo responsivo
   (clamp crescente), nunca o mesmo valor. A prévia NÃO escala o corpo por
   viewport (ver `base.css` — `article`/`article h2..h4` são valores fixos,
   iguais em 390px e 1440px); por isso aqui também são fixos, não `clamp()`. */
.ohad-estudos-prosa {
	max-width:   66ch;
	font-size:   var(--font-size-base);
	line-height: var(--line-height);
	color:       var(--text-main);
}

.ohad-estudos-prosa h2 {
	font-family: var(--font-display);
	font-weight: 600;
	font-size:   1.6rem;
	margin:      2.25rem 0 0.75rem;
	line-height: 1.25;
}

.ohad-estudos-prosa p {
	margin: 0 0 1.05rem;
}

.ohad-estudos-prosa h3,
.ohad-estudos-prosa h4,
.ohad-estudos-prosa h5,
.ohad-estudos-prosa h6 {
	font-family: var(--font-display);
	font-weight: 600;
	color:       var(--text-main);
}

.ohad-estudos-prosa h3 { font-size: 1.25rem; margin: 1.75rem 0 0.6rem; }
.ohad-estudos-prosa h4 { font-size: 1.05rem; margin: 1.4rem 0 0.5rem; }
.ohad-estudos-prosa h5,
.ohad-estudos-prosa h6 { font-size: 1.05rem; margin: 1.4rem 0 0.5rem; }

.ohad-estudos-prosa ul,
.ohad-estudos-prosa ol {
	margin:  0 0 1rem;
	padding-left: 1.4rem;
}

.ohad-estudos-prosa li {
	margin-bottom: 0.35rem;
}

.ohad-estudos-prosa hr {
	border:     0;
	border-top: 1px solid var(--border-color);
	margin:     1.75rem 0;
}

.ohad-estudos-prosa blockquote {
	margin:       0 0 1.25rem;
	padding:      0.75rem 1.1rem;
	border-left:  3px solid var(--accent-primary);
	background:   var(--surface-card);
	border-radius: var(--radius-sm);
	color:        var(--text-muted);
	font-style:   italic;
}

.ohad-estudos-prosa blockquote p:last-child {
	margin-bottom: 0;
}

/* Tabelas do canônico (Markdown com pipe) — sem estas regras a tabela sai
   sem borda e sem cabeçalho destacado (a classe `ohad-estudos-tabela` é
   gerada por Ohad_Estudos_Renderizador::montar_tabela(), mas nunca teve
   estilo próprio). Envelope com overflow-x evita que uma tabela larga
   quebre a coluna de leitura de 66ch em telas estreitas. */
.ohad-estudos-tabela-envelope {
	overflow-x: auto;
	margin:     0 0 1.5rem;
	border:     1px solid var(--border-color);
	border-radius: var(--radius-sm);
}

.ohad-estudos-tabela {
	width:           100%;
	min-width:       42rem;
	border-collapse: collapse;
	font-size:       1.08rem;
	line-height:     1.62;
}

.ohad-estudos-tabela th,
.ohad-estudos-tabela td {
	padding:      0.75rem 0.95rem;
	text-align:   left;
	border-bottom: 1px solid var(--border-color);
	vertical-align: top;
}

.ohad-estudos-tabela th {
	font-family:    var(--font-display);
	font-weight:    600;
	color:          var(--text-main);
	background:     var(--surface-card);
	border-bottom:  2px solid var(--accent-primary);
	white-space:    nowrap;
}

.ohad-estudos-tabela td {
	color: var(--text-main);
}

.ohad-estudos-tabela tbody tr:nth-child(even) {
	background: color-mix(in srgb, var(--surface-card) 55%, transparent);
}

.ohad-estudos-tabela tbody tr:last-child td {
	border-bottom: 0;
}

/* Figuras do corpo (Ohad_Estudos_Renderizador::montar_imagem()). */
.ohad-estudos-figura {
	margin:  0 0 1.5rem;
	text-align: center;
}

.ohad-estudos-figura img {
	max-width:     100%;
	height:        auto;
	border:        1px solid var(--border-color);
	border-radius: var(--radius-sm);
	background:    var(--surface-card);
	box-shadow:    0 0 0 0.35rem color-mix(in srgb, var(--surface-card) 88%, transparent);
}

.ohad-estudos-figura figcaption {
	margin-top: 0.5rem;
	font-size:  1rem;
	color:      var(--text-main);
	font-style: italic;
}

.ohad-estudos-pager {
	display:         flex;
	justify-content: space-between;
	gap:             1rem;
	border-top:      1px solid var(--border-color);
	margin-top:      1.75rem;
	padding-top:     1.1rem;
	font-size:       0.95rem;
}

.ohad-estudos-pager a {
	color:           var(--accent-text);
	text-decoration: none;
}

/* Biblioteca */
.ohad-estudos-busca {
	display:       flex;
	gap:           0;
	max-width:     520px;
	margin:        0 0 1.6rem;
}

.ohad-estudos-busca input {
	flex:  1;
	font-size: 0.95rem;
}

.ohad-estudos-busca button {
	white-space: nowrap;
}

/* ──────────────────────────────────────────────────────
   Responsivo — abaixo de 600px
   ────────────────────────────────────────────────────── */
@media (max-width: 600px) {
	.ohad-area-membro {
		padding: 0 0.5rem;
		margin:  1rem auto;
	}

	.ohad-card {
		padding: 1rem;
	}

	.ohad-nav-lista {
		flex-direction: column;
		border-bottom:  none;
		gap:            0;
	}

	.ohad-nav-link {
		padding:       0.6rem 0.5rem;
		border-bottom: 1px solid var(--border-color);
		border-left:   3px solid transparent;
		margin-bottom: 0;
	}

	.ohad-nav-link-ativo {
		border-left-color:   var(--accent-primary);
		border-bottom-color: var(--border-color);
	}

	/* "Minha Conta" no mobile começa recolhido e abre somente por toque no
	   summary; assim não duplica as opções nem alonga toda a tela. */
	.ohad-nav-conta-submenu {
		position:   static;
		opacity:    0;
		visibility: hidden;
		transform:  none;
		box-shadow: none;
		border:     none;
		border-radius: 0;
		padding:    0;
		margin:     0;
	}

	.ohad-nav-conta details[open] .ohad-nav-conta-submenu {
		opacity:    1;
		visibility: visible;
	}

	.ohad-nav-conta-link {
		padding:       0.5rem 0.5rem 0.5rem 1.5rem;
		border-bottom: 1px solid var(--border-color);
		font-size:     0.85rem;
	}

	.ohad-bloqueio {
		margin:  1.5rem auto;
		padding: 1.25rem;
	}

	.ohad-bloqueio-acoes {
		flex-direction: column;
		align-items:    stretch;
	}

	.ohad-btn {
		text-align: center;
	}

	.ohad-resumo-lista,
	.ohad-dados-lista {
		grid-template-columns: 1fr;
		gap:                   0.1rem;
	}

	.ohad-resumo-lista dd,
	.ohad-dados-lista dd {
		margin-bottom: 0.6rem;
	}

	.ohad-cabecalho {
		flex-direction: column;
		text-align:     center;
	}

	.ohad-inmemoriam-item {
		grid-template-columns: 1fr;
	}

	.ohad-inmemoriam-data {
		grid-row:    auto;
		grid-column: auto;
	}

	.ohad-vestibulo {
		padding: 2rem 1.25rem;
	}

	.ohad-vestibulo-emblema {
		height: 88px;
	}

	/* Módulo de Estudos: sumário lateral vira lista no topo, coluna de
	   texto ocupa a largura toda, corpo de fonte NÃO encolhe (D-E4: o
	   desenho é para reorganizar, não para diminuir como zoom de lupa). */
	.ohad-estudos-colunas {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}

	.ohad-estudos-sumario {
		position:      static;
		border-right:  0;
		border-bottom: 1px solid var(--border-color);
		padding-right: 0;
		padding-bottom: 1rem;
	}

	.ohad-estudos-graus {
		grid-template-columns: 1fr;
	}

	.ohad-estudos-grau-quebra-externa {
		display: none;
	}

	/* Só a medida de leitura muda no estreito — a prévia não escala o
	   tamanho de fonte/entrelinha do corpo por viewport (ver nota na regra
	   base de `.ohad-estudos-prosa` acima); herdar aqui, não redeclarar. */
	.ohad-estudos-prosa {
		max-width: 100%;
	}

	.ohad-estudos-topo {
		padding: 0.85rem 1rem;
	}

	.ohad-estudos-busca {
		max-width: 100%;
		flex-direction: column;
	}
}

/* Tablet: 601–900px — coluna de leitura ainda medida, sumário lateral
   estreitado em vez de empilhado (D-E4: adapta com media query real). */
@media (min-width: 601px) and (max-width: 900px) {
	.ohad-estudos-colunas {
		grid-template-columns: 200px 1fr;
		gap: 1.4rem;
	}

	.ohad-estudos-graus {
		grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	}
}

/* Área do Membro geral, árvore dos Estudos e Minha Conta — 0.11.0. */
.ohad-areamembro-boas-vindas{border-left:1px solid var(--accent-primary);padding:1.4rem 1.5rem;margin:1.5rem 0;background:linear-gradient(110deg,color-mix(in srgb,var(--surface-card) 90%,var(--accent-primary)),var(--surface-card))}.ohad-areamembro-boas-vindas h1{margin:0;font-family:var(--font-display);font-size:clamp(2rem,5vw,3.2rem)}.ohad-areamembro-boas-vindas p:last-child{max-width:42rem;margin-bottom:0;color:var(--text-muted)}
.ohad-areamembro-grade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.ohad-areamembro-bloco{min-height:12rem}.ohad-areamembro-bloco-cabecalho{display:flex;align-items:center;gap:.65rem;border-bottom:1px solid var(--border-color);padding-bottom:.65rem}.ohad-areamembro-bloco-cabecalho h2{margin:0}.ohad-areamembro-icone{width:1.25rem;height:1.25rem;fill:none;stroke:var(--accent-text);stroke-width:1.4}.ohad-estado-vazio{color:var(--text-muted);font-style:italic}.ohad-areamembro-lista{list-style:none;padding:0;margin:0}.ohad-areamembro-lista li{padding:.8rem 0;border-bottom:1px solid var(--border-color)}.ohad-areamembro-lista li:last-child{border-bottom:0}.ohad-areamembro-lista time{display:block;color:var(--accent-text);font-size:.82rem}.ohad-areamembro-lista strong{display:block;font-family:var(--font-display);font-size:1.2rem}.ohad-areamembro-lista p{margin:.15rem 0 0;color:var(--text-muted)}.ohad-areamembro-lista-eventos li{display:flex;gap:.9rem;align-items:center}.ohad-areamembro-lista-eventos time{flex:0 0 3.1rem;border:1px solid var(--accent-text);text-align:center;padding:.35rem .2rem;line-height:1.1}.ohad-areamembro-lista-eventos time span{display:block;font-size:1.5rem;color:var(--text-main)}.ohad-areamembro-atalhos{margin-top:1rem}.ohad-areamembro-atalhos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}.ohad-areamembro-atalhos-grid a{display:flex;flex-direction:column;gap:.2rem;border:1px solid var(--border-color);padding:1rem;text-decoration:none}.ohad-areamembro-atalhos-grid a:hover,.ohad-areamembro-atalhos-grid a:focus{border-color:var(--accent-text);transform:translateY(-1px)}.ohad-areamembro-atalhos-grid span{color:var(--text-main);font-family:var(--font-display);font-size:1.3rem}.ohad-areamembro-atalhos-grid small{color:var(--text-muted)}
.ohad-arvore-vida {
	position: relative;
	width: min(100%, 860px);
	aspect-ratio: 800 / 1060;
	min-height: 710px;
	margin: 2.6rem auto 1rem;
	isolation: isolate;
	background:
		radial-gradient(circle at 50% 7%, color-mix(in srgb, var(--accent-primary) 19%, transparent), transparent 18%),
		linear-gradient(90deg, transparent 0 12%, color-mix(in srgb, var(--surface-card) 45%, transparent) 12% 12.15%, transparent 12.15% 87.85%, color-mix(in srgb, var(--surface-card) 45%, transparent) 87.85% 88%, transparent 88%);
	border-block: 1px solid color-mix(in srgb, var(--accent-primary) 20%, transparent);
}

.ohad-arvore-campo-superior {
	position: absolute;
	inset: 0 12% auto;
	height: 19%;
	background: radial-gradient(ellipse at 50% 15%, color-mix(in srgb, var(--accent-primary) 28%, transparent), transparent 58%);
	clip-path: polygon(50% 0, 82% 100%, 18% 100%);
	z-index: 0;
}

.ohad-arvore-luz {
	position: absolute;
	left: calc(50% - 1px);
	top: 1%;
	width: 2px;
	height: 90%;
	background: linear-gradient(var(--accent-primary), color-mix(in srgb, var(--accent-primary) 20%, transparent), transparent);
	box-shadow: 0 0 22px 5px color-mix(in srgb, var(--accent-primary) 24%, transparent);
}

.ohad-arvore-luz-ponto,
.ohad-arvore-abismo-ponto {
	position: absolute;
	width: .72rem;
	height: .72rem;
	border: 1px solid var(--accent-primary);
	background: var(--bg-main);
	transform: rotate(45deg);
}

.ohad-arvore-luz-ponto {
	left: calc(50% - .36rem);
	top: 13%;
	box-shadow: 0 0 0 .32rem color-mix(in srgb, var(--accent-primary) 12%, transparent), 0 0 18px 3px color-mix(in srgb, var(--accent-primary) 40%, transparent);
}

.ohad-arvore-abismo {
	position: absolute;
	z-index: 3;
	top: 9%;
	left: 50%;
	width: 9.8rem;
	min-height: 5.4rem;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .08rem;
	border: 1px solid color-mix(in srgb, var(--accent-primary) 65%, var(--border-color));
	border-radius: 50%;
	background: color-mix(in srgb, var(--bg-main) 82%, var(--accent-primary));
	box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent-primary) 5%, transparent), 0 0 28px color-mix(in srgb, var(--accent-primary) 18%, transparent);
	text-align: center;
}

.ohad-arvore-abismo strong {
	font-family: var(--font-display);
	font-size: 1.15rem;
	color: var(--text-main);
}

.ohad-arvore-abismo small {
	color: var(--accent-text);
	font-size: .7rem;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.ohad-arvore-abismo-ponto {
	position: absolute;
	top: -.43rem;
	left: calc(50% - .36rem);
}

.ohad-arvore-rotulo {
	position: absolute;
	z-index: 2;
	left: 1.5%;
	color: var(--text-muted);
	font-size: .68rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
}

.ohad-arvore-rotulo--interna { top: 25%; }
.ohad-arvore-rotulo--externa { top: 55%; }

.ohad-arvore-veu {
	position: absolute;
	z-index: 2;
	top: 18.5%;
	left: 13%;
	right: 13%;
	height: 1px;
	background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent-primary) 70%, transparent) 12%, var(--accent-primary) 50%, color-mix(in srgb, var(--accent-primary) 70%, transparent) 88%, transparent);
	box-shadow: 0 0 12px color-mix(in srgb, var(--accent-primary) 30%, transparent);
}

.ohad-arvore-veu span {
	position: absolute;
	left: calc(50% - .32rem);
	top: -.32rem;
	width: .64rem;
	height: .64rem;
	border: 1px solid var(--accent-primary);
	background: var(--bg-main);
	transform: rotate(45deg);
}

.ohad-arvore-linhas {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.ohad-arvore-linhas path {
	fill: none;
	stroke: color-mix(in srgb, var(--accent-primary) 40%, var(--border-color));
	stroke-width: 1.2;
	vector-effect: non-scaling-stroke;
}

.ohad-arvore-linhas .ohad-arvore-linha-central {
	stroke: color-mix(in srgb, var(--accent-primary) 55%, transparent);
	stroke-dasharray: 4 8;
}

.ohad-arvore-no {
	position: absolute;
	z-index: 3;
	width: clamp(118px, 23%, 190px);
	aspect-ratio: 1;
	min-height: 118px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .12rem;
	padding: 1rem;
	border: 1px solid var(--node-accent);
	border-radius: 50%;
	background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--node-accent) 18%, var(--surface-card)), var(--surface-card) 72%);
	box-shadow: inset 0 0 0 5px color-mix(in srgb, var(--node-accent) 5%, transparent), 0 8px 18px rgba(0, 0, 0, .16);
	color: var(--text-main) !important;
	text-align: center;
	text-decoration: none !important;
	transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.ohad-arvore-no:hover,
.ohad-arvore-no:focus-visible {
	color: var(--text-main) !important;
	border-color: color-mix(in srgb, var(--node-accent) 70%, white);
	box-shadow: inset 0 0 0 5px color-mix(in srgb, var(--node-accent) 10%, transparent), 0 0 0 3px color-mix(in srgb, var(--node-accent) 20%, transparent), 0 10px 22px rgba(0, 0, 0, .2);
	transform: translate(-50%, -2px) scale(1.025);
}

.ohad-arvore-no strong {
	max-width: 9rem;
	font-family: var(--font-display);
	font-size: clamp(.95rem, 2vw, 1.28rem);
	line-height: 1.02;
}

.ohad-arvore-no-sefirah {
	color: var(--node-accent);
	font-size: .62rem;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.ohad-arvore-no-notacao {
	color: var(--node-accent);
	font-family: var(--font-display);
	font-size: .76rem;
}

.ohad-arvore-no-meta {
	color: var(--text-muted);
	font-size: .7rem;
}

.ohad-arvore-no--n7 { top: 23%; left: 31%; transform: translateX(-50%); }
.ohad-arvore-no--n8 { top: 23%; left: 69%; transform: translateX(-50%); }
.ohad-arvore-no--n6 { top: 33.5%; left: 50%; transform: translateX(-50%); }
.ohad-arvore-no--n4 { top: 58.5%; left: 69%; transform: translateX(-50%); }
.ohad-arvore-no--n3 { top: 58.5%; left: 31%; transform: translateX(-50%); }
.ohad-arvore-no--n2 { top: 69%; left: 50%; transform: translateX(-50%); }
.ohad-arvore-no--n1 { top: 82%; left: 50%; transform: translateX(-50%); }
.ohad-arvore-no--n0 { top: 94%; left: 50%; transform: translate(-50%, -10%); }

.ohad-arvore-faixa-n9 {
	position: absolute;
	z-index: 4;
	top: 51.5%;
	left: 13%;
	right: 13%;
	min-height: 2.6rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid color-mix(in srgb, var(--accent-primary) 70%, var(--border-color));
	background: color-mix(in srgb, var(--bg-main) 84%, var(--accent-primary));
	color: var(--accent-text) !important;
	font-family: var(--font-display);
	font-size: .96rem;
	letter-spacing: .06em;
	text-decoration: none !important;
	transition: background .18s ease, border-color .18s ease;
}

.ohad-arvore-faixa-n9:hover,
.ohad-arvore-faixa-n9:focus-visible {
	border-color: var(--text-main);
	background: color-mix(in srgb, var(--accent-primary) 12%, var(--bg-main));
}

.ohad-arvore-no--n0-legenda {
	position: absolute;
	z-index: 3;
	left: 50%;
	bottom: -.2rem;
	transform: translateX(-50%);
	color: var(--text-muted);
	font-size: .68rem;
	letter-spacing: .09em;
	text-transform: uppercase;
	white-space: nowrap;
}

.ohad-arvore-legenda {
	max-width: 46rem;
	margin: 0 auto 1rem;
	color: var(--text-muted);
	font-size: .9rem;
	text-align: center;
}
.ohad-area-membro-conta {
	display: grid;
	grid-template-columns: minmax(11rem, 12rem) minmax(0, 1fr);
	column-gap: 1.25rem;
	align-items: start;
}

.ohad-area-membro-conta > .ohad-nav {
	grid-column: 1 / -1;
}

.ohad-area-membro-conta > .ohad-conta-lateral {
	float: none;
	width: auto;
	margin: 1rem 0;
	padding: 1rem 1rem 1rem 0;
	border-right: 1px solid var(--border-color);
}

.ohad-area-membro-conta > .ohad-card {
	min-width: 0;
	margin-top: 1rem;
	/* Sem `.ohad-conta-lateral` nenhum partial atual renderiza esse elemento
	   mais (o submenu "Minha Conta" substituiu a coluna lateral — ver
	   menu-area-membro.php) — sem esta regra, o `.ohad-card` cai sozinho na
	   1ª coluna estreita do grid (minmax(11rem, 12rem) ≈ 130px), definida
	   para quando a lateral existia. `grid-column: 1 / -1` faz o card ocupar
	   as duas colunas (achado visual "Fale com a Secretaria" r2, 28/10/2026
	   — mas corrige TODAS as telas desta família: Meus Dados, Minha Trilha,
	   Meu Templo, Solicitações, Trocar Senha, Mensagens). */
	grid-column: 1 / -1;
}

.ohad-conta-lateral-titulo{margin:0 0 .65rem;color:var(--accent-text);font-family:var(--font-display);font-size:1.2rem}.ohad-conta-lateral ul{list-style:none;margin:0;padding:0}.ohad-conta-lateral li+li{margin-top:.45rem}.ohad-conta-lateral a{color:var(--text-muted);text-decoration:none}.ohad-conta-lateral a:hover,.ohad-conta-lateral a:focus{color:var(--accent-text)}.ohad-form-dados{clear:both;border-top:1px solid var(--border-color);padding-top:1.2rem}.ohad-form-dados fieldset{border:1px solid var(--border-color);padding:1rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem 1rem}.ohad-form-dados legend{padding:0 .35rem;color:var(--accent-text);font-family:var(--font-display);font-size:1.2rem}.ohad-form-dados p{margin:0;display:flex;flex-direction:column;gap:.25rem}.ohad-form-dados-largo{grid-column:1/-1}.ohad-form-dados input,.ohad-form-dados select{min-height:2.65rem;font-size:1rem}.ohad-form-dados-nota{margin:1rem 0;color:var(--text-main);font-size:.95rem}

.ohad-templo-reuniao {
	margin: 1rem 0;
	padding: .85rem 1rem;
	border-block: 1px solid var(--border-color);
	background: color-mix(in srgb, var(--surface-card) 78%, var(--bg-main));
}

.ohad-templo-reuniao h3,
.ohad-templo-reuniao p { margin-bottom: 0; }
@media (max-width: 700px) {
	.ohad-areamembro-grade,
	.ohad-areamembro-atalhos-grid { grid-template-columns: 1fr; }
	.ohad-arvore-vida { min-height: 650px; }
	.ohad-arvore-no { width: 28%; min-height: 100px; padding: .65rem .45rem; }
	.ohad-arvore-no strong { font-size: .88rem; }
	.ohad-arvore-no-sefirah { font-size: .53rem; }
	.ohad-arvore-no-meta { font-size: .61rem; }
	.ohad-arvore-no--n7,
	.ohad-arvore-no--n8 { top: 23%; }
	.ohad-arvore-no--n4,
	.ohad-arvore-no--n3 { top: 59%; }
	.ohad-arvore-no--n2 { top: 70%; }
	.ohad-arvore-no--n1 { top: 83%; }
	.ohad-arvore-no--n0 { top: 95%; }
	.ohad-arvore-faixa-n9 { top: 52%; }
	.ohad-arvore-abismo { width: 8.7rem; min-height: 4.8rem; }
	.ohad-arvore-rotulo { display: none; }
	.ohad-arvore-faixa-n9 { left: 7%; right: 7%; font-size: .8rem; }
	.ohad-arvore-veu { left: 7%; right: 7%; }
	.ohad-arvore-no--n0-legenda { font-size: .56rem; }
	.ohad-conta-lateral { float: none; width: auto; margin: 1rem 0; border-right: 0; border-bottom: 1px solid var(--border-color); }
	.ohad-area-membro-conta { display: block; }
	.ohad-area-membro-conta > .ohad-conta-lateral { margin: 1rem 0; padding: 1rem 0; border-right: 0; border-bottom: 1px solid var(--border-color); }
	.ohad-area-membro-conta > .ohad-card { margin-top: 1rem; }
	.ohad-form-dados fieldset { grid-template-columns: 1fr; }
}

/* Demonstrações comparativas da Árvore da Vida — ver1/ver2. */
.ohad-estudos-demo .ohad-demo-cabecalho {
	max-width: 54rem;
	margin: 1.5rem auto .6rem;
}

.ohad-demo-etiqueta {
	display: inline-block;
	margin-bottom: .35rem;
	color: var(--accent-text);
	font-size: .68rem;
	letter-spacing: .16em;
	text-transform: uppercase;
}

/*
 * aspect-ratio ajustado de 720/690 para 720/855 (correção de 29/10/2026) —
 * abre espaço para os três nós supernos (Terceira Ordem) acima do Abismo,
 * integrados ao desenho como nós reais (pedido da coordenação: "não numa
 * caixa separada fora do desenho"). Todas as posições percentuais abaixo
 * foram recalculadas pelo mesmo fator (690/855 ≈ 0.807) para preservar a
 * disposição relativa exata que já estava aprovada — nenhuma mudou de
 * ordem ou proporção entre si, só comprimiram para abrir o espaço novo no
 * topo.
 */
.ohad-demo-arvore {
	position: relative;
	width: min(100%, 860px);
	aspect-ratio: 720 / 1050;
	margin: 1.8rem auto .5rem;
	isolation: isolate;
	background:
		radial-gradient(circle at 50% 4%, color-mix(in srgb, var(--accent-primary) 13%, transparent), transparent 15%),
		linear-gradient(90deg, transparent 0 12%, color-mix(in srgb, var(--border-color) 45%, transparent) 12% 12.1%, transparent 12.1% 87.9%, color-mix(in srgb, var(--border-color) 45%, transparent) 87.9% 88%, transparent 88%);
	border-block: 1px solid color-mix(in srgb, var(--accent-primary) 23%, transparent);
}

.ohad-demo-luz {
	position: absolute;
	z-index: 0;
	inset: 0 24% auto;
	height: 18%;
	background: radial-gradient(ellipse at 50% 5%, color-mix(in srgb, var(--accent-primary) 31%, transparent), transparent 62%);
	clip-path: polygon(50% 0, 87% 100%, 13% 100%);
}

.ohad-demo-luz::before {
	content: '';
	position: absolute;
	left: calc(50% - 1px);
	top: 0;
	width: 2px;
	height: 100%;
	background: linear-gradient(var(--accent-primary), transparent);
	box-shadow: 0 0 18px 3px color-mix(in srgb, var(--accent-primary) 25%, transparent);
}

.ohad-demo-luz span {
	position: absolute;
	left: calc(50% - .32rem);
	top: 17%;
	width: .64rem;
	height: .64rem;
	border: 1px solid var(--accent-primary);
	background: var(--bg-main);
	transform: rotate(45deg);
	box-shadow: 0 0 0 .32rem color-mix(in srgb, var(--accent-primary) 12%, transparent);
}

.ohad-estudos-demo--ver1 .ohad-demo-daath {
	position: absolute;
	z-index: 4;
	top: 25.5%;
	left: 11%;
	right: 11%;
	min-height: 1.65rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--accent-primary);
	background: color-mix(in srgb, var(--bg-main) 90%, var(--accent-primary));
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-primary) 10%, transparent), 0 0 16px color-mix(in srgb, var(--accent-primary) 16%, transparent);
	color: var(--accent-text);
	font-family: var(--font-display);
	font-size: .68rem;
	letter-spacing: .09em;
	text-transform: uppercase;
}

.ohad-demo-caminhos {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.ohad-demo-caminhos path {
	fill: none;
	stroke: color-mix(in srgb, var(--accent-primary) 53%, var(--border-color));
	stroke-width: 1.5;
	vector-effect: non-scaling-stroke;
}

.ohad-demo-caminhos .ohad-demo-caminho-central {
	stroke: color-mix(in srgb, var(--accent-primary) 72%, transparent);
	stroke-dasharray: 4 7;
}

.ohad-estudos-demo--ver1 .ohad-demo-caminhos path { stroke-width: 2.25; }

.ohad-demo-faixa-n9 {
	position: absolute;
	z-index: 4;
	top: 47.5%;
	left: 11%;
	right: 11%;
	min-height: 1.65rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid color-mix(in srgb, var(--accent-primary) 72%, var(--border-color));
	background: color-mix(in srgb, var(--bg-main) 88%, var(--accent-primary));
	box-shadow: 0 0 16px color-mix(in srgb, var(--accent-primary) 9%, transparent);
	color: var(--accent-text);
	font-family: var(--font-display);
	font-size: .72rem;
	letter-spacing: .08em;
	text-align: center;
	text-decoration: none;
}

/* A faixa de separação da árvore vira nó clicável quando o observador
   possui o grau correspondente (correção de 29/10/2026, achado 1 do
   parecer Codex r1) — mesmo realce de hover/foco dos demais nós da
   árvore, sem mudar a geometria. (Nome de grau deliberadamente omitido
   deste comentário — achado 7 do mesmo parecer: CSS entregue ao
   navegador não pode conter nome de grau nenhum, nem em comentário.) */
.ohad-demo-faixa-n9--clicavel {
	cursor: pointer;
	transition: border-color .16s ease, box-shadow .16s ease;
}

.ohad-demo-faixa-n9--clicavel:hover,
.ohad-demo-faixa-n9--clicavel:focus-visible {
	border-color: color-mix(in srgb, var(--accent-primary) 90%, white);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 20%, transparent), 0 0 16px color-mix(in srgb, var(--accent-primary) 16%, transparent);
}

.ohad-demo-no {
	position: absolute;
	z-index: 3;
	width: clamp(3.1rem, 12%, 4.8rem);
	aspect-ratio: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .16rem;
	padding: .35rem;
	border: 1.3px solid var(--demo-no-cor, var(--accent-primary));
	border-radius: 50%;
	background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--demo-no-cor, var(--accent-primary)) 18%, var(--surface-card)), var(--surface-card) 74%);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--demo-no-cor, var(--accent-primary)) 5%, transparent), 0 6px 12px rgba(0, 0, 0, .18);
	color: var(--text-main) !important;
	font-family: var(--font-display);
	text-align: center;
	text-decoration: none !important;
	transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.ohad-estudos-demo--ver1 .ohad-demo-no { border-width: 1.82px; }

.ohad-demo-no strong {
	font-size: clamp(.66rem, 1.5vw, .95rem);
	font-weight: 600;
	line-height: 1;
}

.ohad-demo-no > span {
	max-width: 5.2rem;
	color: var(--text-main);
	font-family: var(--font-display);
	font-size: clamp(.54rem, 1.1vw, .78rem);
	line-height: 1.02;
}

.ohad-demo-no:hover,
.ohad-demo-no:focus-visible,
.ohad-demo-no[aria-pressed="true"] {
	border-color: color-mix(in srgb, var(--demo-no-cor, var(--accent-primary)) 60%, white);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--demo-no-cor, var(--accent-primary)) 20%, transparent), 0 7px 14px rgba(0, 0, 0, .22);
	transform: translateX(-50%) scale(1.08);
}

/*
 * Grau não alcançado (opção B, DECISAO-ESTUDOS-DADOS-E-BOTOES-2026-10-28.md
 * §6, 29/10/2026) — nome+notação aparecem (véu protege CONTEÚDO, não a
 * existência do grau), mas sem link, sem destaque de clique: opacidade
 * reduzida, sem a transição de hover/scale do nó clicável (o elemento é
 * `<p>`, não `<a>`, então hover nunca dispara — a regra existe para blindar
 * mesmo se o seletor genérico `.ohad-demo-no` for reaproveitado algum dia).
 * Mesmo tratamento visual dos três nós supernos da Terceira Ordem (nunca
 * clicáveis para ninguém): ambos comunicam "existe, não entra" do mesmo
 * jeito.
 */
.ohad-demo-no--nao-possuido {
	cursor: default;
	opacity: .55;
}

.ohad-demo-no--nao-possuido:hover,
.ohad-demo-no--nao-possuido:focus-visible {
	transform: translateX(-50%);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-primary) 5%, transparent), 0 6px 12px rgba(0, 0, 0, .18);
}

.ohad-demo-no--n10,
.ohad-demo-no--n9,
.ohad-demo-no--n8b {
	opacity: .55;
}

/*
 * Três nós supernos da Terceira Ordem (correção de 29/10/2026) — mesma
 * disposição de Chesed/Geburah (--n7/--n8, "ombros"): Binah à esquerda,
 * Chokmah à direita, Kether no topo-centro, acima do Abismo. Sem
 * `--demo-no-cor` (sem paleta de ambiente, por desenho — ver docblock em
 * estudos-ver1.php) e sem SVG de caminho ligando-os ao resto: a Terceira
 * Ordem não tem elo desenhado com a árvore principal na notação pública.
 */
/* Posição dos três nós supernos: n10 no ombro esquerdo, n9 no ombro
   direito, n8b no topo-centro (sozinho) — mapeamento completo (qual nó é
   qual grau) só em estudos-ver1.php, nunca aqui (achado 7 do parecer
   Codex r1: CSS entregue ao navegador não pode conter nome de grau
   nenhum, nem em comentário). */
.ohad-demo-no--n10 { top: 13%; left: 30.5%; transform: translateX(-50%); }
.ohad-demo-no--n9  { top: 13%; left: 69.5%; transform: translateX(-50%); }
.ohad-demo-no--n8b { top: 4%; left: 50%; transform: translateX(-50%); }

.ohad-demo-no--n7 { top: 29%; left: 30.5%; transform: translateX(-50%); }
.ohad-demo-no--n8 { top: 29%; left: 69.5%; transform: translateX(-50%); }
.ohad-demo-no--n6 { top: 38%; left: 50%; transform: translateX(-50%); }
.ohad-demo-no--n3 { top: 55%; left: 30.5%; transform: translateX(-50%); }
.ohad-demo-no--n4 { top: 55%; left: 69.5%; transform: translateX(-50%); }
.ohad-demo-no--n2 { top: 66%; left: 50%; transform: translateX(-50%); }
.ohad-demo-no--n1 { top: 79%; left: 50%; transform: translateX(-50%); }
.ohad-demo-no--n0 { top: auto; bottom: 1%; left: 50%; transform: translateX(-50%); }

.ohad-demo-no--n0-porta {
	position: absolute;
	z-index: 4;
	bottom: .8%;
	left: 50%;
	width: auto;
	height: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .08rem;
	padding: .25rem .5rem;
	transform: translateX(-50%);
	border: 0;
	background: transparent;
	box-shadow: none;
	color: var(--text-main) !important;
	font-family: var(--font-display);
	text-align: center;
	text-decoration: none !important;
	cursor: pointer;
	transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.ohad-demo-no--n0-porta strong {
	font-size: clamp(.68rem, 1.45vw, .9rem);
	font-weight: 600;
	line-height: 1;
}

.ohad-demo-no--n0-porta span {
	color: var(--text-muted);
	font-size: clamp(.54rem, 1vw, .7rem);
	letter-spacing: .03em;
}

.ohad-demo-no--n0-porta:hover,
.ohad-demo-no--n0-porta:focus-visible,
.ohad-demo-no--n0-porta[aria-pressed="true"] {
	color: var(--accent-text) !important;
	text-decoration: underline !important;
	text-underline-offset: .18rem;
	transform: translateX(-50%) translateY(-2px);
}

.ohad-demo-no--n0-fora {
	position: absolute;
	z-index: 3;
	left: 50%;
	bottom: -1.2rem;
	transform: translateX(-50%);
	color: var(--text-muted);
	font-size: .53rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	white-space: nowrap;
}

.ohad-demo-nota {
	max-width: 48rem;
	margin: .7rem auto 1.2rem;
	color: var(--text-muted);
	font-size: .86rem;
	text-align: center;
}

.ohad-demo-ver2-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.45fr) minmax(210px, .55fr);
	align-items: start;
	gap: 1.2rem;
	max-width: 1120px;
	margin: 0 auto;
}

.ohad-demo-ver2-layout .ohad-demo-arvore {
	width: 100%;
	margin-top: 1.8rem;
}

.ohad-demo-painel {
	position: sticky;
	top: 1rem;
	margin-top: 1.8rem;
	padding: 1.25rem;
	border: 1px solid var(--border-color);
	border-top: 2px solid var(--accent-primary);
	background: color-mix(in srgb, var(--surface-card) 82%, transparent);
}

.ohad-demo-painel-etiqueta {
	color: var(--accent-text);
	font-size: .67rem;
	letter-spacing: .13em;
	text-transform: uppercase;
}

.ohad-demo-painel h2 {
	margin: .55rem 0 .25rem;
	font-family: var(--font-display);
	font-size: 1.6rem;
	line-height: 1.05;
}

.ohad-demo-painel-sefirah,
.ohad-demo-painel-notacao {
	margin: 0;
	color: var(--accent-text);
	font-family: var(--font-display);
}

.ohad-demo-painel-sefirah { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; }
.ohad-demo-painel-notacao { font-size: 1.15rem; }
.ohad-demo-painel-meta { color: var(--text-muted); font-size: .84rem; }
.ohad-demo-painel .ohad-btn { display: inline-block; margin-top: .45rem; }

@media (max-width: 760px) {
	.ohad-demo-arvore { width: 100%; }
	.ohad-demo-ver2-layout { grid-template-columns: 1fr; gap: .3rem; }
	.ohad-demo-painel { position: static; margin-top: .8rem; }
	.ohad-demo-ver2-layout .ohad-demo-arvore { margin-top: 1.2rem; }
	/*
	 * Correção de 29/10/2026 — o Abismo (Daath) deixou de ser escondido em
	 * mobile: até aqui não tinha texto visível (só aria-label), então
	 * esconder em telas pequenas era um ajuste razoável; agora mostra
	 * "Abismo" e esconder voltaria a abrir o mesmo defeito que a correção
	 * resolveu em desktop (reclamação do Alexandre, caixa vazia/sem sentido
	 * na tela).
	 */
	.ohad-demo-faixa-n9 { left: 6%; right: 6%; min-height: 1.4rem; font-size: .65rem; }
	.ohad-demo-no { width: clamp(3rem, 15%, 4.35rem); }
	.ohad-demo-no strong { font-size: .62rem; }
	.ohad-demo-no > span { max-width: 4.2rem; font-size: .52rem; }
}

/* ──────────────────────────────────────────────────────────────────
   Seletor "Graus" — navegação entre os painéis que o membro alcança.
   `estudos-seletor-graus.php`. Só graus alcançáveis chegam ao HTML
   (regra do véu, §3.2): aqui não há — e não pode haver — estado
   "travado", cadeado ou item apagado para pintar.
   ────────────────────────────────────────────────────────────────── */

.ohad-estudos-seletor-graus {
	display:       flex;
	flex-wrap:     wrap;
	align-items:   center;
	gap:           0.5rem 1rem;
	padding:       0.6rem 0;
	margin:        0 0 1.2rem;
	border-bottom: 1px solid var(--border-color);
	font-family:   var(--font-ui);
	font-size:     0.84rem;
}

.ohad-estudos-seletor-rotulo {
	font-size:      0.68rem;
	font-weight:    600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color:          var(--text-muted, var(--text-main));
	opacity:        0.75;
}

.ohad-estudos-seletor-lista {
	display:    flex;
	flex-wrap:  wrap;
	gap:        0.3rem 0.4rem;
	list-style: none;
	margin:     0;
	padding:    0;
	flex:       1 1 auto;
	min-width:  0;
}

.ohad-estudos-seletor-item { margin: 0; }

.ohad-estudos-seletor-link,
.ohad-estudos-seletor-atual {
	display:         inline-block;
	padding:         0.22rem 0.55rem;
	border-radius:   var(--radius-sm, 4px);
	border:          1px solid transparent;
	text-decoration: none;
	white-space:     nowrap;
	/* A cor de cada grau vem do token do próprio ambiente dele
	   (--ohad-sg-cor, posto pelo partial), com o acento da página como
	   reserva quando o grau não tem ambiente mapeado. */
	color:           var(--ohad-sg-cor, var(--accent-text));
}

.ohad-estudos-seletor-link:hover,
.ohad-estudos-seletor-link:focus {
	border-color: var(--ohad-sg-cor, var(--accent-text));
}

.ohad-estudos-seletor-link:focus-visible,
.ohad-estudos-seletor-mapa:focus-visible {
	outline:        2px solid var(--focus-ring, var(--accent-text));
	outline-offset: 2px;
}

/* O grau atual não se distingue só pela cor: `aria-current="page"` leva a
   informação a quem usa leitor de tela, e o ponto a quem não separa as
   cores. */
.ohad-estudos-seletor-atual {
	font-weight:  700;
	color:        var(--text-main);
	border-color: var(--border-color);
}

.ohad-estudos-seletor-atual::before { content: "• "; }

.ohad-estudos-seletor-mapa {
	margin-left:     auto;
	white-space:     nowrap;
	text-decoration: underline;
	color:           var(--text-muted, var(--text-main));
}

.ohad-estudos-seletor-mapa:hover { color: var(--accent-text); }

/* No celular a faixa de graus rola nela mesma, em vez de empilhar e
   empurrar o conteúdo do grau para baixo da dobra. */
@media (max-width: 640px) {
	.ohad-estudos-seletor-graus { gap: 0.35rem 0.6rem; }

	.ohad-estudos-seletor-lista {
		flex-wrap:                  nowrap;
		overflow-x:                 auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width:            thin;
		padding-bottom:             0.15rem;
	}

	.ohad-estudos-seletor-mapa { margin-left: 0; }
}

@media print {
	.ohad-estudos-seletor-graus { display: none; }
}

/* ══════════════════════════════════════════════════════════════════
   LAYOUT DE CURSO DE GRAU — portado de conteudo/_curso-template/base.css
   26/10/2026 · docs/plano-layout-graus-pronaos.md
   ══════════════════════════════════════════════════════════════════

   O ambiente de teste /trilha/ já consumia os MESMOS tokens que o plugin usa
   por [data-degree] (hoje injetados por requisição — ver nota no topo deste
   arquivo e Ohad_Graus::TOKENS_CSS_POR_SLUG) — os tokens.json de cada grau
   são cópia literal desses valores, e dizem isso no próprio cabeçalho. O que
   faltava no plugin era o LAYOUT que os consome, não a paleta. Por isso
   nada de cor é redefinido abaixo.

   Todo seletor é prefixado `ohad-curso-`. O prefixo não é cosmético:
   `.sidebar`, `.module`, `.breadcrumb` e `.count` são nomes genéricos que
   o tema institucional, o Astra e qualquer plugin de terceiros podem já
   ocupar — e o perdedor da cascata seria o curso.

   Fora deste porte, por decisão registrada no plano §6: barra superior do
   motor, alternador de tema, questionário, leitor de PDF, folhas de
   impressão identificada e progresso de leitura. Cada um depende de
   mecanismo que o plugin ainda não tem (user_meta, tabela de emissões) e
   está declarado como pendência.
   ────────────────────────────────────────────────────────────────── */

/* ── Cabeçalho largo (emblema + nome do grau + organização) ────────
   Portado de `.topbar`/`.brand`/`.brandmark` de base.css — terceira
   rodada de refinamento (28/10/2026). Fica ABAIXO da faixa fina
   (.ohad-estudos-topo) e do menu (.ohad-nav-unificado): não os substitui,
   é um elemento adicional de identidade visual do grau da página. */
.ohad-curso-topbar {
	display:       flex;
	align-items:   center;
	gap:           0.75rem;
	flex-wrap:     wrap;
	padding:       0.85rem clamp(1rem, 3vw, 2.5rem);
	border-bottom: 1px solid var(--border-color);
}

.ohad-curso-marca {
	display:     flex;
	align-items: center;
	gap:         1rem;
	min-width:   0;
}

/* currentColor herda --accent-text do ambiente do grau da página — nunca
   o ouro institucional fixo. Mesma faixa de tamanho da prévia: 112px no
   desktop, 84px no celular. */
.ohad-curso-brandmark {
	display: block;
	flex:    0 0 auto;
	color:   var(--accent-text);
}

.ohad-curso-brandmark svg {
	display: block;
	width:   112px;
	height:  auto;
}

.ohad-curso-marca-titulo {
	display:        block;
	font-family:    var(--font-display);
	font-weight:    600;
	font-size:      1.5rem;
	letter-spacing: 0.02em;
	color:          var(--text-main);
}

.ohad-curso-marca-notacao {
	font-size:   1rem;
	font-weight: 400;
	color:       var(--text-muted);
}

.ohad-curso-marca-organizacao {
	display:    block;
	max-width:  34ch;
	font-size:  0.8rem;
	line-height: 1.35;
	color:      var(--text-muted);
}

@media (max-width: 760px) {
	.ohad-curso-topbar { padding: 0.75rem 1rem; }
	.ohad-curso-brandmark svg { width: 84px; }
	.ohad-curso-marca-titulo { font-size: 1.25rem; }
	.ohad-curso-marca-organizacao { max-width: 24ch; font-size: 0.75rem; }
}

@media print {
	.ohad-curso-topbar { display: none; }
}

/* Medida de leitura. Token de LAYOUT, não de cor: fica escopado para não
   vazar para o resto da Área do Membro, que usa a sua própria em
   .ohad-estudos-prosa. */
.ohad-curso-shell {
	--ohad-curso-medida: 72ch;

	display:               grid;
	grid-template-columns: 310px minmax(0, 1fr);
	align-items:           start;
}

/* `position: sticky` aqui é COLUNA DO GRID, não sobreposição: a barra
   ocupa o próprio espaço e nunca cobre o texto da lição. */
.ohad-curso-sidebar {
	padding:      1.9rem 1.25rem;
	background:   var(--surface-card);
	border-right: 1px solid var(--border-color);
	position:     sticky;
	top:          0;
	max-height:   100vh;
	overflow:     auto;
	/*
	 * Texto secundário PRÓPRIO da barra (correção de 29/10/2026 — pedido
	 * do Alexandre, medido no DOM: --text-muted contra --surface-card
	 * media ~5.1:1, abaixo da meta de 7:1 pedida para o menu). Escopado
	 * aqui, não no token global `--text-muted` (68 usos em toda a área do
	 * membro) — mudar o token global afetaria texto secundário fora do
	 * menu, que não fazia parte do pedido.
	 *
	 * `color-mix()` com `--text-main` (não branco/preto fixo): `--text-main`
	 * já é a cor de MAIOR contraste calibrada para CADA um dos nove
	 * ambientes de grau — clara nos ambientes de fundo escuro, escura no
	 * único ambiente de fundo claro (exemplo de ambiente deliberadamente
	 * omitido deste comentário — achado A1 do parecer do Codex, r2,
	 * 28/10/2026). Misturar em direção a ela sobe o contraste nos dois
	 * sentidos sem precisar de um caso especial por ambiente.
	 */
	--ohad-curso-sidebar-muted: color-mix(in srgb, var(--text-muted) 38%, var(--text-main));
}

/* Gatilho da gaveta — oculto no desktop, onde a barra já é coluna fixa.
   Volta a aparecer abaixo de 1024px. */
.ohad-curso-menu-toggle { display: none; }

.ohad-curso-sidebar-intro {
	padding:       0 0.75rem 1.3rem;
	border-bottom: 1px solid var(--border-color);
}

/* EB Garamond 700, não Cormorant 600: um título de grau majoritariamente
   minúsculo com numeral rende cerca de metade da densidade de tinta de um
   com maiúsculas em bloco, no mesmo peso declarado, e sai fraco ao lado dos
   demais. Aumentar o corpo não resolve — falta peso de traço, não tamanho.
   (Exemplo de nome/notação de grau deliberadamente omitido deste comentário
   — achado A1 do parecer do Codex, r2, 28/10/2026: nenhum byte entregue ao
   navegador, comentário inclusive, pode citar nome/slug/notação de grau.) */
.ohad-curso-sidebar-titulo {
	margin:      0.35rem 0 0.2rem;
	font-family: var(--font-body);
	font-weight: 700;
	font-size:   1.25rem;
	line-height: 1.25;
	color:       var(--text-main);
}

.ohad-curso-sidebar-sub {
	margin:      0;
	font-size:   0.82rem;
	line-height: 1.45;
	color:       var(--ohad-curso-sidebar-muted);
}

/* Subtítulo do GRAU (D34, migração v34) — ex. "Primeiro grau da Ordem
   Externa — o limiar". Mesma família visual de .ohad-curso-sidebar-sub
   (texto secundário discreto sob o título), com margin-top próprio porque
   as duas podem coexistir (notação do grau + descrição). */
.ohad-curso-sidebar-descricao {
	margin:      0.35rem 0 0;
	font-size:   0.82rem;
	line-height: 1.45;
	color:       var(--ohad-curso-sidebar-muted);
}

.ohad-curso-eyebrow {
	display:        block;
	font-size:      0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color:          var(--accent-text);
}

/* Realce dos rótulos DA BARRA — e só dela. O rótulo usa a cor do TEXTO,
   não a do acento, e é isso que resolve a legibilidade: medido em ΔE76
   contra o fundo da barra, o acento de UM dos ambientes de grau separa 51 e
   a cor do texto separa 77 (exemplo de ambiente deliberadamente omitido
   deste comentário — achado A1 do parecer do Codex, r2, 28/10/2026). O
   contraste WCAG dava os dois como equivalentes porque só mede LUMINÂNCIA —
   cinza sobre cinza passa na conta e some na tela. O acento continua onde é
   identidade e aparece isolado: número do módulo, links, anel de foco.

   Peso 700 e não 600: a EB Garamond auto-hospedada tem só 400 e 700 em
   disco, e pedir 600 faria o navegador sintetizar um peso inexistente. */
.ohad-curso-sidebar .ohad-curso-eyebrow {
	color:          var(--text-main);
	font-weight:    700;
	letter-spacing: 0.19em;
}

.ohad-curso-count {
	margin-top:     1rem;
	font-size:      0.75rem;
	font-weight:    700;
	letter-spacing: 0.06em;
	color:          var(--text-main);
}

/* Contador "N de M lidas" (ajuste de polimento, 28/10/2026, 13ª rodada) —
   mesma tipografia de ".ohad-curso-count" ("N módulos · M lições"): a marcação
   anterior não tinha regra própria e herdava o tamanho padrão de <p>, grande
   demais. O HTML já posiciona este <p> logo após ".ohad-curso-count" — aqui
   só falta o tamanho/cor baterem, e uma margem pequena para não colar. */
.ohad-curso-lidas-contador {
	margin-top:     0.2rem;
	font-size:      0.75rem;
	font-weight:    700;
	letter-spacing: 0.06em;
	color:          var(--text-main);
}

/* ── Índice: módulos e lições ───────────────────────────────────── */
.ohad-curso-nav { margin-top: 0.5rem; }

.ohad-curso-modulo { border-bottom: 1px solid var(--border-color); }
.ohad-curso-modulo:last-child { border-bottom: 0; }

/* min-height 44px é o alvo de toque mínimo (WCAG 2.5.8), não folga
   visual: o módulo é o item que mais se toca no celular. */
.ohad-curso-modulo-titulo {
	display:     flex;
	align-items: center;
	gap:         0.6rem;
	width:       100%;
	min-height:  44px;
	padding:     0.55rem 0.25rem;
	text-align:  left;
	background:  transparent;
	border:      0;
	cursor:      pointer;
	color:       var(--text-main);
	font-family: var(--font-body);
	font-size:   0.88rem;
	line-height: 1.35;
}

.ohad-curso-modulo-titulo:hover { color: var(--accent-text); }

.ohad-curso-modulo-num {
	flex:          0 0 1.4rem;
	width:         1.4rem;
	height:        1.4rem;
	line-height:   1.4rem;
	text-align:    center;
	font-size:     0.72rem;
	color:         var(--accent-text);
	border:        1px solid var(--accent-primary);
	border-radius: var(--radius-pill);
}

/* O chevron é desenhado com duas bordas giradas, não com glifo nem
   ícone: herda a cor do token, não baixa arquivo e gira sem repintar. A
   direção é ditada por [aria-expanded], que o JS alterna — o estado
   visual e o anunciado ao leitor de tela saem da MESMA fonte, e não há
   como um ficar aberto e o outro fechado. */
.ohad-curso-modulo-titulo::after {
	content:       "";
	width:         0.4rem;
	height:        0.4rem;
	flex:          0 0 0.4rem;
	margin-left:   auto;
	border-right:  2px solid var(--text-muted);
	border-bottom: 2px solid var(--text-muted);
	transform:     rotate(45deg);
	transition:    transform 0.16s ease;
}

.ohad-curso-modulo-titulo[aria-expanded="true"]::after {
	transform: rotate(225deg);
}

@media (prefers-reduced-motion: reduce) {
	.ohad-curso-modulo-titulo::after { transition: none; }
}

.ohad-curso-licoes {
	display:    grid;
	gap:        0.1rem;
	padding:    0 0 0.5rem 1.6rem;
	margin:     0;
	list-style: none;
}

/*
 * Rodada 6 (28/10/2026) — causa raiz medida no DOM renderizado: o atributo
 * HTML `hidden` do módulo fechado normalmente vira `display: none` via UA
 * stylesheet, mas a regra de autor acima (mesmo seletor, propriedade
 * `display`) sobrescreve isso na mesma camada — autor sempre vence UA,
 * independente de especificidade. Sem este bloco, `.ohad-curso-licoes[hidden]`
 * media `display: grid` / altura real no navegador, mesmo com `hidden`
 * presente no HTML. Medido antes da correção: módulo 2 com `hidden` dava
 * `getComputedStyle().display === "grid"` e `offsetHeight: 566px`.
 */
.ohad-curso-licoes[hidden] {
	display: none;
}

.ohad-curso-licoes--sem-modulo { padding-left: 0.75rem; }

.ohad-curso-licao-item { margin: 0; }

/*
 * Correção de 29/10/2026 (pedido do Alexandre, medido no DOM) — font-size
 * subiu de 0.84rem (13.44px) para 1.0625rem (~17px, letra do corpo de
 * leitura); padding vertical de 0.45rem (7.2px) para 0.55rem (8.8px);
 * `min-height` removido — a altura do item passa a vir só do padding +
 * line-height do texto maior, sem piso artificial.
 */
.ohad-curso-licao-link {
	display:         flex;
	align-items:     center;
	gap:             0.55rem;
	padding:         0.55rem 0.6rem;
	border-left:     2px solid transparent;
	color:           var(--ohad-curso-sidebar-muted);
	font-size:       1.0625rem;
	line-height:     1.35;
	text-decoration: none;
}

.ohad-curso-licao-link:hover { color: var(--text-main); }

/* Marcador ●/○ + código da lição (correção visual de 28/10/2026, 2ª rodada)
   — mesma composição da prévia (`"● C01 Primeira Lição…"`). O marcador usa
   `flex-shrink: 0` e largura fixa para que os códigos (sempre 3 caracteres,
   ex. "C01") alinhem em coluna visualmente, sem precisar de tabela. */
.ohad-curso-licao-marcador {
	flex-shrink: 0;
	width:       0.9em;
	font-size:   0.885rem;
	text-align:  center;
}

/* Sem `font-family: var(--font-display)` de propósito (ajuste de polimento,
   28/10/2026, 13ª rodada): a Cormorant Garamond é uma serifada display, e em
   0.72rem com letter-spacing ela distorcia dígitos — "C01"/"C02" liam-se como
   "Coi"/"Coz" nas capturas. A prévia (`/trilha/`, `.lesson-link`) nunca aplica
   fonte própria ao código: ele herda a fonte de corpo do tema, igual ao
   título ao lado. Corrigido herdando também aqui. */
.ohad-curso-licao-codigo {
	flex-shrink:    0;
	font-size:      0.911rem;
	font-weight:    700;
	letter-spacing: 0.04em;
	opacity:        0.75;
}

/* `min-width: 0` já permitia o item encolher dentro do flex; `overflow-wrap`
   garante que o TÍTULO quebre linha (nunca corta nem reticências) quando um
   título longo não cabe na largura da coluna da barra lateral — achado do
   Impeccable, 29/10/2026 (P1): texto deve sempre quebrar linha dentro da
   coluna, nunca usar `text-overflow: ellipsis` nem `white-space: nowrap`,
   que escondem conteúdo em vez de reorganizar o layout. */
.ohad-curso-licao-titulo {
	min-width:     0;
	overflow-wrap: break-word;
	word-break:    break-word;
}

/* A lição aberta se distingue por TRÊS sinais, não um: o filete de 2px
   no acento, o fundo recuado e o próprio aria-current, que é o que o
   leitor de tela anuncia. Cor sozinha não serve (WCAG 1.4.1). */
.ohad-curso-licao-link--atual,
.ohad-curso-licao-link[aria-current="page"] {
	color:             var(--text-main);
	border-left-color: var(--accent-primary);
	background:        var(--bg-main);
}

.ohad-curso-tag {
	margin-left:    0.4rem;
	padding:        0.05rem 0.34rem;
	font-size:      0.62rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space:    nowrap;
	color:          var(--ohad-curso-sidebar-muted);
	border:         1px solid var(--border-color);
	border-radius:  var(--radius);
}

/* ── As outras três seções da barra (retráteis, 29/10/2026) ───────
   Reusam `.ohad-curso-modulo`/`.ohad-curso-modulo-titulo` (mesmo acordeão
   dos módulos de lições — numeral em círculo, chevron, aria-expanded) via
   as classes extras `.ohad-curso-secao`/`.ohad-curso-secao-titulo`; só o
   que é específico delas mora aqui. */
.ohad-curso-secao-titulo .ohad-curso-eyebrow { margin-bottom: 0; }

.ohad-curso-secao--em-breve .ohad-curso-eyebrow { opacity: 0.82; }

.ohad-curso-secao > [id^="ohad-curso-secao-"] {
	padding-bottom: 0.4rem;
}

.ohad-curso-secao > [id^="ohad-curso-secao-"][hidden] { display: none; }

.ohad-curso-secao > [id^="ohad-curso-secao-"] > .ohad-curso-vazio {
	padding-left: 1.6rem;
}

/* Seção declarada e ainda sem conteúdo. Sóbrio de propósito: o selo usa
   a cor secundária do ambiente, não o acento, para avisar sem disputar
   atenção com o que já existe para ler. */
.ohad-curso-selo {
	margin-left:    0.5rem;
	padding:        0.05rem 0.34rem;
	font-size:      0.62rem;
	font-weight:    600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space:    nowrap;
	color:          var(--ohad-curso-sidebar-muted);
	border:         1px solid var(--border-color);
	border-radius:  var(--radius);
}

/* Estado vazio: discreto, sem inventar conteúdo que não existe e sem
   prometer prazo. */
.ohad-curso-vazio {
	margin:     0;
	padding:    0 0.25rem;
	color:      var(--ohad-curso-sidebar-muted);
	font-size:  0.8rem;
	font-style: italic;
}

.ohad-curso-side-note {
	margin:    1.25rem 0 0;
	padding:   0 0.75rem;
	font-size: 0.8rem;
}

.ohad-curso-side-note a { color: var(--accent-text); }

/* ── Coluna de conteúdo ─────────────────────────────────────────── */
.ohad-curso-main {
	padding:   1.75rem clamp(1rem, 4vw, 3.5rem) 4rem;
	max-width: 1180px;
	margin:    0 auto;
	min-width: 0;
}

/* O caminho rola NELE MESMO (overflow-x) em vez de quebrar linha: num
   celular de 390px uma trilha de três níveis empilharia e empurraria o
   título da lição para baixo da dobra. */
.ohad-curso-breadcrumb {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             1rem;
	margin-bottom:   1.5rem;
	font-size:       0.82rem;
	color:           var(--text-muted);
}

.ohad-curso-crumbs {
	display:         flex;
	align-items:     center;
	gap:             0.55rem;
	min-width:       0;
	overflow-x:      auto;
	white-space:     nowrap;
	scrollbar-width: thin;
}

.ohad-curso-crumb-sep   { color: var(--accent-text); }
.ohad-curso-crumb-atual { color: var(--text-main); }

a.ohad-curso-crumb {
	color:                 var(--text-muted);
	text-decoration:       underline;
	text-underline-offset: 0.2em;
}

a.ohad-curso-crumb:hover { color: var(--accent-text); }

.ohad-curso-crumb-acoes {
	display: flex;
	gap:     0.4rem;
	flex:    0 0 auto;
}

/* 40×40 fixo: alvo de toque, não tamanho de ícone. */
.ohad-curso-crumb-acao {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	width:           40px;
	height:          40px;
	color:           var(--text-main);
	border:          1px solid var(--border-color);
	border-radius:   var(--radius);
	font-size:       1rem;
	text-decoration: none;
}

.ohad-curso-crumb-acao:hover {
	background:   var(--surface-card);
	border-color: var(--accent-primary);
}

/* Estado desabilitado — primeira/última lição do grau. Visível, não some
   (padrão da prévia, app.js `crumbAction()` + base.css `button:disabled`):
   mantém os dois lados do breadcrumb ocupados em vez de deslocar o par
   restante. `<button>`, nunca `<a href="#">`. */
.ohad-curso-crumb-acao:disabled {
	opacity:    .45;
	cursor:     not-allowed;
	background: none;
	font:       inherit;
}

.ohad-curso-crumb-acao:disabled:hover {
	background:   none;
	border-color: var(--border-color);
}

/* ── Cabeçalho da tela ──────────────────────────────────────────── */
.ohad-curso-cabecalho {
	margin-bottom: 0.5rem;
}

/* Linha do topo do cabeçalho: título à esquerda, modebar à direita —
   mesma disposição da prévia (`/trilha/`, `base.css`/`app.js`). Largura
   cheia de `.ohad-curso-main` (sem a medida de leitura), porque a modebar
   precisa de espaço à direita que o texto não usa; o título em si continua
   medido por `.ohad-curso-cabecalho-texto` abaixo. */
.ohad-curso-cabecalho-topo {
	display:         flex;
	align-items:     flex-start;
	justify-content: space-between;
	gap:             1rem;
}

.ohad-curso-cabecalho-texto {
	max-width: var(--ohad-curso-medida);
	min-width: 0;
}

.ohad-curso-titulo {
	margin:         0.5rem 0 0.6rem;
	font-family:    var(--font-display);
	font-weight:    600;
	font-size:      clamp(1.75rem, 4vw, 2.4rem);
	line-height:    1.18;
	letter-spacing: 0.01em;
	color:          var(--text-main);
}

/* Subtítulo da LIÇÃO (D34) — hoje sempre vazio (ver docblock de
   Ohad_Estudos::META_SUBTITULO); a regra existe para quando o dado nascer.
   `max-width` próprio (28/10/2026): antes herdava a medida de leitura do pai
   `.ohad-curso-cabecalho`, que perdeu o `max-width` quando a modebar passou a
   precisar de largura cheia no topo do cabeçalho (`.ohad-curso-cabecalho-topo`). */
.ohad-curso-subtitulo {
	max-width:   var(--ohad-curso-medida);
	margin:      0 0 0.75rem;
	font-size:   1.05rem;
	line-height: 1.45;
	color:       var(--text-muted);
}

/* Linha "Aprovado em DD/MM/AAAA · versão N" (D34) — metadado de proveniência,
   discreto por desenho: menor e mais apagado que o subtítulo, no mesmo
   registro do rodapé da sidebar (.ohad-curso-side-note). `max-width` próprio
   pelo mesmo motivo de `.ohad-curso-subtitulo` acima. */
.ohad-curso-aprovacao {
	max-width:      var(--ohad-curso-medida);
	margin:         0 0 1rem;
	font-size:      0.78rem;
	letter-spacing: 0.02em;
	color:          var(--text-muted);
}

/* Modebar da aula (28/10/2026; reposicionada na 2ª correção do mesmo dia) —
   hoje só "Marcar como lida"/"Lida". Formulário real (progressive
   enhancement, funciona sem JS) — o botão nunca é só visual. Vive DENTRO de
   `.ohad-curso-main`, em `.ohad-curso-cabecalho-topo`, ao lado direito do
   título — mesma posição da modebar da prévia (`/trilha/`, `base.css`).
   `flex-shrink: 0` porque o vizinho (`.ohad-curso-cabecalho-texto`) é quem
   deve encolher antes, nunca o botão. */
.ohad-curso-modebar {
	display:     flex;
	align-items: center;
	flex-shrink: 0;
}

.ohad-curso-modebar-form { margin: 0; }

/* Retangular com borda fina (ajuste de polimento, 28/10/2026, 13ª rodada) —
   a versão anterior usava `border-radius: 999px` (pílula) e fundo sólido
   preenchido, divergindo do botão `#mark-read` da prévia (`/trilha/`,
   `base.css`/`app.js`): lá o raio é `var(--radius)` (2px, quase reto), a
   borda é fina em `--border-color`, e o fundo continua TRANSPARENTE nos dois
   estados — `#mark-read` nunca recebe `aria-pressed` (confirmado em
   `app.js:556`, que só troca o TEXTO do botão entre "● Lida" e
   "○ Marcar como lida", nunca a cor de fundo). `--lida` aqui troca só a cor
   do texto/borda para o acento, nunca preenche — reproduzindo exatamente
   esse comportamento, não o de `.modebar button[aria-pressed="true"]`
   (que é de OUTRO par de botões da prévia, o alternador texto/PDF). */
.ohad-curso-modebar-btn {
	display:       inline-flex;
	align-items:   center;
	gap:           0.4rem;
	padding:       0.45rem 0.9rem;
	font-size:     0.85rem;
	font-weight:   600;
	white-space:   nowrap;
	color:         var(--text-main);
	background:    transparent;
	border:        1px solid var(--border-color);
	border-radius: var(--radius);
	cursor:        pointer;
}

.ohad-curso-modebar-btn:hover {
	background:   var(--surface-card);
	border-color: var(--accent-primary);
}

.ohad-curso-modebar-btn--lida {
	color:        var(--accent-text);
	border-color: var(--accent-primary);
}

/* ── Painel do grau: módulos em blocos de leitura ───────────────── */
.ohad-curso-modulo-bloco { margin-top: 2.25rem; }

.ohad-curso-modulo-bloco-titulo {
	display:     flex;
	align-items: center;
	gap:         0.7rem;
	margin:      0 0 0.4rem;
	font-family: var(--font-display);
	font-weight: 600;
	font-size:   1.35rem;
	line-height: 1.25;
	color:       var(--text-main);
}

.ohad-curso-modulo-bloco-desc {
	max-width: var(--ohad-curso-medida);
	margin:    0 0 1rem;
	color:     var(--text-muted);
}

.ohad-curso-aulas {
	margin:     0;
	padding:    0;
	list-style: none;
	border-top: 1px solid var(--border-color);
}

.ohad-curso-aula {
	display:       flex;
	align-items:   baseline;
	gap:           0.5rem;
	padding:       0.7rem 0.25rem;
	border-bottom: 1px solid var(--border-color);
}

.ohad-curso-aula-link {
	color:                 var(--text-main);
	text-decoration:       underline;
	text-underline-offset: 0.2em;
}

.ohad-curso-aula-link:hover { color: var(--accent-text); }

/* `.ohad-curso-aula--rascunho` foi REMOVIDO em 26/10/2026 (achado A6 do
   parecer r1 do Codex): a shell do curso só recebe material publicado, logo
   nenhum item dela pode ser rascunho. Rascunho aparece na faixa de editor,
   fora da shell — ver `.ohad-estudos-faixa-editor` abaixo. */

/* ── Faixa de editor (FORA da shell) ───────────────────────────────
   Rascunhos do grau, visíveis só a quem tem `ohad_editar_estudos`
   alcançando o grau. Mora na mesma região do seletor de graus e da tarja
   de orientação: o que varia com o leitor fica fora de
   `.ohad-curso-shell`, para o corpo do grau sair idêntico para todos
   (§10 critério 8). Visual deliberadamente de "andaime": tracejado e
   neutro, para não se confundir com conteúdo da Ordem. */
.ohad-estudos-faixa-editor {
	margin:        1.25rem 0;
	padding:       1rem 1.25rem;
	border:        1px dashed var(--border-strong, rgba(255, 255, 255, 0.28));
	border-radius: 0.5rem;
	background:    rgba(127, 127, 127, 0.06);
}

.ohad-estudos-faixa-editor-titulo {
	margin:      0 0 0.35rem;
	font-weight: 600;
}

.ohad-estudos-faixa-editor-corpo {
	margin:    0 0 0.6rem;
	font-size: 0.875rem;
	opacity:   0.8;
}

.ohad-estudos-faixa-editor-lista {
	margin:  0;
	padding: 0 0 0 1.1rem;
}

.ohad-estudos-faixa-editor-lista li { margin: 0.2rem 0; }

/* ── Corpo da lição ─────────────────────────────────────────────── */
.ohad-curso-texto {
	max-width:     var(--ohad-curso-medida);
	margin-top:    1.25rem;
	padding:       clamp(1.25rem, 4vw, 3rem);
	background:    var(--surface-card);
	border:        1px solid var(--border-color);
	border-top:    2px solid var(--accent-primary);
	border-radius: var(--radius);
	/* Rolagem própria para tabela larga, movida do seletor da <table> (ver
	   nota abaixo) para este container: sem ela uma tabela estoura a
	   medida de leitura e leva rolagem horizontal para a PÁGINA inteira.
	   Não afeta o texto normal — `max-width` acima já garante que
	   parágrafos nunca ultrapassam 72ch; só entra em jogo quando um filho
	   (a tabela) é intrinsecamente mais largo que o container. */
	overflow-x: auto;
}

/* CORREÇÃO (8ª rodada, 28/10/2026) — causa raiz medida no DOM renderizado,
   não só lida no CSS: `display: block` na <table> abandona o algoritmo de
   layout de tabela do navegador. Medição ANTES desta correção (viewport
   1440px, lição C01, tabela "Condição × Elemento"): caixa externa da
   tabela = 587.51px (100% do container, como o CSS antigo pedia), mas a
   soma das larguras das 2 colunas da primeira linha = apenas 190.99px
   (~32,5% da caixa) — cada <tr>/<td> calculava largura intrínseca própria
   dentro do bloco, em vez de participar do algoritmo de coluna da tabela
   inteira. Rodadas anteriores (5ª/6ª) só haviam comparado
   `getComputedStyle(table).width` contra a largura do container — prova
   de que a CAIXA é 100%, não de que as COLUNAS se espalham dentro dela.
   Correção: manter `display: table` (padrão do navegador, removido o
   `display: block`) + `width: 100%`; a rolagem horizontal que a tabela
   precisava (para telas estreitas) passa a vir do container
   `.ohad-curso-texto` acima, não mais da própria tabela — alternativa mais
   segura que envolver cada lição já publicada num wrapper novo via PHP. */
.ohad-curso-texto table {
	display:         table;
	width:           100%;
	table-layout:    auto;
	border-collapse: collapse;
	font-size:       0.88rem;
}

.ohad-curso-texto th,
.ohad-curso-texto td {
	border:         1px solid var(--border-color);
	padding:        0.6rem 0.7rem;
	text-align:     left;
	vertical-align: top;
}

.ohad-curso-texto th {
	background:  var(--bg-main);
	font-family: var(--font-display);
	font-weight: 600;
	color:       var(--text-main);
}

/* Estilo alinhado à prévia (base.css do curso-template): o `>` do markdown
   canônico (nota de procedência bibliográfica, §5.2/§5.3 do contrato de
   liberação) sai como texto normal, sem caixa nem itálico forçado — o
   negrito do primeiro trecho já vem do `<strong>` do próprio conteúdo
   (Ohad_Estudos_Renderizador), não é CSS. Antes desta correção o elemento
   saía com fundo, borda e itálico (regra idêntica à de `.ohad-estudos-prosa
   blockquote`, pensada para OUTRO contexto), que não é o que o conteúdo
   canônico pede aqui — só o estilo muda, o texto/conteúdo da lição é
   intocado. */
/* Seletor composto (.ohad-curso-texto.ohad-estudos-prosa), não só
   `.ohad-curso-texto blockquote`: o elemento real carrega as DUAS classes
   (`estudos-aula.php`: `<article class="ohad-curso-texto ohad-estudos-prosa">`),
   e a regra de `.ohad-estudos-prosa blockquote` (linha ~1727) tem a MESMA
   especificidade (0,2,0) — um empate que depende só da ORDEM no arquivo-fonte
   para decidir, frágil a qualquer reordenação futura. Especificidade maior
   (0,3,0) remove a ambiguidade: esta regra vence sempre, não só hoje.
   CORREÇÃO (achado da verificação independente, mesma rodada): elevar a
   especificidade só resolve a disputa nas propriedades que as DUAS regras
   declaram (`margin`, `color`) — CSS resolve cascata PROPRIEDADE POR
   PROPRIEDADE, não "regra inteira vence". `background`, `border-left` e
   `font-style` nunca foram declaradas aqui, então a regra antiga continuava
   sendo a ÚNICA candidata para elas e se aplicava sem disputa nenhuma. As
   três entram agora, explícitas, para que esta regra sobrescreva ativamente
   todas as seis propriedades que `.ohad-estudos-prosa blockquote` define —
   não apenas empate nas duas que já tinham disputa. */
.ohad-curso-texto.ohad-estudos-prosa blockquote {
	margin:       1.25rem 0;
	color:        var(--text-main);
	background:   transparent;
	border-left:  0;
	border-radius: 0;
	font-style:   normal;
}

.ohad-curso-texto.ohad-estudos-prosa blockquote p:last-child { margin-bottom: 0; }

.ohad-curso-texto img {
	display:   block;
	max-width: 100%;
	height:    auto;
}

/* ── Rodapé de navegação ────────────────────────────────────────── */
.ohad-curso-pager {
	display:         flex;
	justify-content: space-between;
	align-items:     center;
	gap:             0.75rem;
	flex-wrap:       wrap;
	margin-top:      2rem;
	padding-top:     1rem;
	border-top:      1px solid var(--border-color);
	font-size:       0.85rem;
	color:           var(--text-muted);
}

.ohad-curso-pager-lado { flex: 1 1 12rem; min-width: 0; }
.ohad-curso-pager-lado--fim { text-align: right; }
.ohad-curso-pager-pos { flex: 0 0 auto; }

.ohad-curso-pager a { color: var(--accent-text); }

/* Botão desabilitado do pager — mesmo lugar do <a>, sem destino real
   (primeira lição do grau). Reseta a aparência nativa de <button> para se
   igualar ao <a> ao lado, e fica opaco em vez de desaparecer. */
.ohad-curso-pager-acao {
	display:    inline;
	padding:    0;
	border:     none;
	background: none;
	color:      var(--accent-text);
	font:       inherit;
	opacity:    .45;
	cursor:     not-allowed;
}

/* Anel de foco. Nunca remover: é o que torna a barra navegável por
   teclado. */
.ohad-curso-shell :focus-visible {
	outline:        2px solid var(--focus-ring);
	outline-offset: 2px;
	border-radius:  var(--radius);
}

/* ══════════════════════════════════════════════════════════════════
   Responsivo — alvo 390px, sem rolagem horizontal
   ══════════════════════════════════════════════════════════════════ */

/* Abaixo de 1024px a barra lateral vira GAVETA: numa tela de 390px,
   310px de menu empurrariam a lição inteira para baixo da dobra.

   O `hidden` é posto pelo JS. O CSS só o respeita — não esconde a barra
   por conta própria, para que ela continue acessível se o script não
   carregar. */
@media (max-width: 1023px) {
	.ohad-curso-shell { display: block; }

	.ohad-curso-menu-toggle {
		display:       inline-flex;
		align-items:   center;
		gap:           0.55rem;
		margin:        0.6rem 0;
		padding:       0.5rem 0.9rem;
		background:    transparent;
		color:         var(--text-main);
		border:        1px solid var(--accent-primary);
		border-radius: var(--radius);
		font-family:   var(--font-body);
		font-size:     0.9rem;
		cursor:        pointer;
	}

	.ohad-curso-menu-toggle:hover { background: var(--surface-card); }
	.ohad-curso-menu-icone { color: var(--accent-text); }

	.ohad-curso-sidebar {
		position:      static;
		max-height:    none;
		overflow:      visible;
		border-right:  0;
		border-bottom: 1px solid var(--border-color);
		padding:       1rem 0 1.25rem;
	}

	.ohad-curso-sidebar[hidden] { display: none; }

	.ohad-curso-main { padding-left: 0; padding-right: 0; }
}

@media (max-width: 480px) {
	.ohad-curso-main  { padding: 1.25rem 0 3rem; }
	.ohad-curso-texto { padding: 1.25rem 1rem; }

	.ohad-curso-breadcrumb {
		flex-direction: column;
		align-items:    stretch;
		gap:            0.6rem;
	}

	.ohad-curso-crumb-acoes { justify-content: flex-end; }

	.ohad-curso-pager-lado--fim { text-align: left; }
}