/* Botão de aparência (Claro · Escuro · Automático): 5ª entrega, handoff-design/05-modo-escuro.md §4.
   Fica logo depois da lupa, com o mesmo tamanho (44 px) e o mesmo peso: só o ícone do eclipse. */

.alem-aparencia {
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 999px; flex: none;
  display: inline-grid; place-items: center; background: transparent; color: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .2s var(--alem-curva, cubic-bezier(.2,0,0,1)), box-shadow .24s var(--alem-curva, cubic-bezier(.2,0,0,1));
}
.alem-aparencia svg { width: 22px; height: 22px; display: block; transition: transform .6s var(--alem-curva, cubic-bezier(.2,0,0,1)); }
html[data-tema="escuro"] .alem-aparencia svg { transform: rotate(180deg); }
.alem-aparencia:is(:hover, :focus-visible) { background: color-mix(in srgb, currentColor 9%, transparent); }
.alem-aparencia[aria-expanded="true"] { background: var(--alem-areia, #e9e4db); color: var(--alem-tinta, #111213); box-shadow: var(--alem-brilho-hover, 0 0 0 1px #36aeb0, 0 0 22px rgba(54,174,176,.45)); }
@media (max-width: 780px) { .alem-aparencia svg { width: 20px; height: 20px; } }

/* Menu de três opções */
.alem-aparencia-menu {
  position: fixed; z-index: 100003; width: 330px; max-width: calc(100vw - 24px); box-sizing: border-box;
  padding: 18px 14px 12px; background: var(--alem-campo, #fffdfa); color: var(--alem-tinta, #111213);
  border: 1.5px solid var(--alem-tinta, #111213); border-radius: 28px 6px 6px 6px;
  box-shadow: 0 18px 44px color-mix(in srgb, var(--alem-preto, #000) 28%, transparent);
  transform-origin: top right; animation: alem-aparencia-entra .26s var(--alem-curva-entrada, cubic-bezier(.05,.7,.1,1));
}
.alem-aparencia-menu[hidden] { display: none; }
@keyframes alem-aparencia-entra { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: none; } }
.alem-aparencia-rotulo { padding: 0 12px 8px; font: 500 11px/1.2 var(--alem-f-mono, "IBM Plex Mono", monospace); letter-spacing: .16em; text-transform: uppercase; color: var(--alem-texto2, #5b5751); }
.alem-aparencia-opt {
  display: grid; grid-template-columns: 30px 1fr 22px; gap: 10px; align-items: center; width: 100%; box-sizing: border-box;
  margin: 0; padding: 10px 12px; text-align: left; border: 0; border-radius: 12px; background: transparent; color: inherit;
  font-family: var(--alem-f-interface, "Source Sans 3", sans-serif); cursor: pointer;
}
.alem-aparencia-opt:is(:hover, :focus-visible) { background: var(--alem-areia, #e9e4db); }
.alem-aparencia-opt .oi { display: grid; place-items: center; }
.alem-aparencia-opt .ot b { display: block; font-size: 15px; font-weight: 700; line-height: 1.25; }
.alem-aparencia-opt .ot i { display: block; margin-top: 1px; font-style: normal; font-size: 13px; line-height: 1.3; color: var(--alem-texto2, #5b5751); }
.alem-aparencia-opt .ok { width: 18px; height: 18px; box-sizing: border-box; border-radius: 50%; border: 1.5px solid var(--alem-linha-forte, #c9c0b4); display: grid; place-items: center; }
.alem-aparencia-opt[aria-checked="true"] .ok { border-color: var(--alem-ciano, #36aeb0); box-shadow: 0 0 10px color-mix(in srgb, var(--alem-ciano, #36aeb0) 50%, transparent); }
.alem-aparencia-opt[aria-checked="true"] .ok::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--alem-ciano, #36aeb0); }
.alem-aparencia-rodape { margin: 8px 12px 0; padding-top: 10px; border-top: 1px solid var(--alem-linha, #d8d0c3); font: 500 10px/1.3 var(--alem-f-mono, "IBM Plex Mono", monospace); letter-spacing: .12em; text-transform: uppercase; color: var(--alem-texto2, #5b5751); }

/* Repetido no Índice do além: controle segmentado sobre a tela */
.alem-gaveta-aparencia { padding-top: 6px; }
.alem-gaveta-aparencia .alem-gaveta-rotulo { margin-bottom: 10px; color: var(--alem-texto2-tela, #a9a49c); }
.alem-aparencia-seg { display: flex; gap: 4px; padding: 4px; width: max-content; max-width: 100%; box-sizing: border-box; border: 1.5px solid var(--alem-contorno-tela, #3a3b3c); border-radius: 999px; background: var(--alem-tela-funda, #050606); }
.alem-aparencia-seg button {
  height: 40px; padding: 0 18px; display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; background: transparent;
  color: var(--alem-texto3-tela, #c9c4bb); font: 700 11.5px/1 var(--alem-f-interface, "Source Sans 3", sans-serif); letter-spacing: .14em; text-transform: uppercase; cursor: pointer;
  transition: color .2s, background-color .2s, box-shadow .24s var(--alem-curva, cubic-bezier(.2,0,0,1));
}
.alem-aparencia-seg button:hover { color: var(--alem-texto-tela, #f6f3ee); }
.alem-aparencia-seg button[aria-pressed="true"] { background: var(--alem-tela-elevada, #1a1b1c); color: var(--alem-texto-tela, #f6f3ee); box-shadow: 0 0 0 1px color-mix(in srgb, var(--alem-ciano, #36aeb0) 60%, transparent), 0 0 14px color-mix(in srgb, var(--alem-ciano, #36aeb0) 28%, transparent); }
.alem-aparencia-dica { margin: 12px 0 0; font-size: 13px; line-height: 1.4; color: var(--alem-texto2-tela, #a9a49c); }
@media (max-width: 420px) { .alem-aparencia-seg button { padding: 0 12px; letter-spacing: .1em; } }

/* Animação da troca. Mínimo: transição de cor por 400 ms. Com View Transitions: revelação circular a partir do botão. */
html.alem-trocando, html.alem-trocando * {
  transition: background-color .38s cubic-bezier(.2,0,0,1), color .38s cubic-bezier(.2,0,0,1), border-color .38s cubic-bezier(.2,0,0,1) !important;
}
html[data-alem-vt="tema"]::view-transition-old(root), html[data-alem-vt="tema"]::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
html[data-alem-vt="tema"]::view-transition-old(root) { z-index: 1; }
html[data-alem-vt="tema"]::view-transition-new(root) { z-index: 2; }
@media (prefers-reduced-motion: reduce) {
  html.alem-trocando, html.alem-trocando * { transition: none !important; }
  .alem-aparencia svg { transition: none; }
  .alem-aparencia-menu { animation: none; }
}

/* Celular estreito: o cabeçalho não comporta lupa + aparência + "Apoie o além" + Entrar. Seguindo a prancheta
   (☰ logo … lupa aparência Entrar), o "Apoie o além" sai do cabeçalho abaixo de 460 px; continua na capa, na gaveta e no rodapé. */
@media (max-width: 460px) {
  html body .alem-site-header .alem-topline-actions .alem-header-apoie { display: none !important; }
}