/* ============================================================
   Educated Mixologist — estrutura partilhada
   Uma só barra de navegação e uma só medida de página, para
   todas as páginas assentarem na mesma grelha.
   Carregado por TODAS as páginas, antes dos estilos próprios.
   ============================================================ */

:root {
  --pagina: 1080px;      /* largura máxima do conteúdo */
  --estreita: 680px;     /* formulários e texto corrido */
  --gutter: 28px;        /* margem lateral */
  --nav-h: 60px;         /* altura da barra */
  --nav-bg: rgba(247, 245, 240, .86);
  --nav-line: #E5DFD3;
  --nav-ink: #191510;
  --nav-mute: #6B6357;
  --nav-line2: #D8D1C2;
}

/* Reserva sempre o espaço da barra de scroll: sem isto, o conteúdo
   salta alguns pixéis ao passar de uma página curta para uma longa. */
html { scrollbar-gutter: stable }

/* ---- A barra ---- */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: var(--nav-bg);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--nav-line);
}
.nav-in {
  max-width: var(--pagina); margin: 0 auto; padding: 0 var(--gutter);
  height: var(--nav-h);
  display: flex; align-items: center; gap: 14px;
}
.nav .marca {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 600; letter-spacing: .12em; font-size: .82rem;
  color: var(--nav-ink); text-decoration: none; white-space: nowrap; flex: none;
  display: inline-flex; align-items: center; gap: 9px;
}
/* Altura fixa e largura automática: o jigger é mais alto do que largo e
   sem isto o SVG entrava com a largura do viewBox e empurrava o resto. */
.nav .marca img { height: 22px; width: auto; display: block; flex: none }
/* No telemóvel a barra é apertada e as ligações já rolam na horizontal.
   O símbolo fica, o texto sai — é o símbolo que identifica mais depressa. */
@media (max-width: 560px) {
  .nav .marca { font-size: 0; gap: 0 }
  .nav .marca img { height: 24px }
}
.nav .sep { flex: 1 }
.nav-links { display: flex; align-items: center; gap: 22px; flex: none; white-space: nowrap }
.nav-links a {
  font-family: "Inter", system-ui, sans-serif;
  font-size: .9rem; color: var(--nav-mute); text-decoration: none; transition: color .12s;
}
.nav-links a:hover { color: var(--nav-ink) }
.nav-links a.ativo { color: var(--nav-ink); font-weight: 500 }
.nav .quem {
  font-family: "Inter", system-ui, sans-serif;
  font-size: .85rem; color: var(--nav-mute);
  white-space: nowrap; max-width: 20ch; overflow: hidden; text-overflow: ellipsis;
}
/* Botão da direita (Entrar / A minha área / Sair) */
.nav .acao {
  font-family: "Inter", system-ui, sans-serif;
  font-size: .88rem; font-weight: 500; color: var(--nav-ink);
  background: transparent; border: 1px solid var(--nav-line2); border-radius: 8px;
  padding: 8px 16px; text-decoration: none; cursor: pointer; white-space: nowrap;
  min-height: 38px; display: inline-flex; align-items: center;
}
.nav .acao:hover { border-color: var(--nav-ink); background: transparent }
/* Botão-ícone (menu de aulas) — só aparece onde faz sentido */
.nav .icone {
  width: 44px; height: 44px; min-width: 44px; padding: 0;
  display: none; align-items: center; justify-content: center;
  background: transparent; border: 1px solid transparent; color: var(--nav-ink);
  border-radius: 10px; cursor: pointer; font-size: 1.05rem;
}
.nav .icone:hover { border-color: var(--nav-line2) }

/* ---- A medida da página ---- */
.pagina { max-width: var(--pagina); margin: 0 auto; padding: 0 var(--gutter) }

/* Páginas de formulário/leitura: uma só medida para todas
   (antes cada uma tinha a sua — 460, 640, 680, 760) */
.container.estreita { max-width: var(--estreita) }

/* ---- Links só para quem tem conta ---- */
.nav .so-conta { display: none }
body.is-in .nav .so-conta { display: inline }

@media (max-width: 760px) {
  :root { --gutter: 16px }
  .nav .quem { display: none }        /* o nome vive no Perfil */

  /* Num ecrã de 375 px a marca mais três ligações não cabem, e o que
     sobra empurra a página inteira para o lado. As ligações passam a
     deslizar dentro da própria barra: ninguém perde acesso a nada e a
     página deixa de ter scroll horizontal. */
  .nav-in { gap: 10px }
  .nav .marca { flex: none }
  .nav-links {
    gap: 14px; flex: 1 1 auto; min-width: 0;
    display: flex; flex-wrap: nowrap; white-space: nowrap;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .nav-links::-webkit-scrollbar { display: none }
  .nav-links a { flex: none }
}
@media (max-width: 430px) {
  .nav .marca { font-size: .7rem; letter-spacing: .06em }
  .nav .acao { padding: 8px 12px; font-size: .82rem }
}

/* ============================================================
   Barra inferior (telemóvel, com sessão iniciada)

   A zona confortável do polegar num telemóvel segurado com uma mão é
   o terço de baixo do ecrã. O menu estava no canto de cima, que é
   precisamente o ponto mais difícil de alcançar — e atrás de um balcão,
   com a outra mão ocupada, isso decide se a ferramenta se usa ou não.

   Acima dos 760 px desaparece: aí a barra de cima serve, e o rato
   chega a qualquer sítio sem esforço.
   ============================================================ */
.nav-baixo { display: none }

@media (max-width: 760px) {
  .nav-baixo {
    /* minmax(0,1fr) e não 1fr: com `1fr` o mínimo é o conteúdo, e a
       etiqueta mais longa alargava a sua coluna e desalinhava as
       outras. Assim as cinco ficam exactamente iguais. */
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    background: var(--nav-bg); backdrop-filter: saturate(140%) blur(10px);
    border-top: 1px solid var(--nav-line);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .nav-baixo a {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; min-height: 56px; padding: 8px 2px 7px;
    color: var(--nav-mute); text-decoration: none;
    font-size: .68rem; letter-spacing: .01em; line-height: 1;
  }
  .nav-baixo a span { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis }
  .nav-baixo svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none }
  /* As etiquetas mais longas — "Ingredientes" e "A minha área", ambas
     com 12 caracteres — deixam de caber a .68rem antes dos 400px, não
     dos 360 como esta regra assumia. Medido: aos 360 saíam as duas com
     reticências. */
  @media (max-width: 480px) { .nav-baixo a { font-size: .62rem; letter-spacing: -.012em } }
  @media (max-width: 412px) { .nav-baixo a { font-size: .58rem; padding-left: 0; padding-right: 0 } }
  .nav-baixo a[aria-current="page"] { color: var(--nav-ink); font-weight: 600 }
  .nav-baixo a[aria-current="page"] svg { stroke-width: 2 }
  .nav-baixo a:focus-visible { outline: 2px solid var(--accent, #B3781A); outline-offset: -3px }

  /* Com a barra em baixo, as ligações de cima passam a ser repetição.
     Fica só a marca, que serve de regresso ao início.

     Sem classe nenhuma de propósito. Estava preso a `body.com-nav-baixo`,
     que só chega quando o módulo da barra corre — e o módulo é adiado.
     Resultado: em cada mudança de página as ligações apareciam
     desenhadas e desapareciam logo a seguir, um salto a cada toque.
     Agora o CSS decide sozinho, antes do primeiro desenho. */
  .nav .nav-links { display: none }

  /* O conteúdo tem de acabar acima da barra, senão a última linha
     fica escondida por trás dela. Este continua preso à classe: se a
     barra não chegar a montar, não há barra nenhuma a tapar nada.

     A variável é para quem flutua por cima do conteúdo — o botão Novo
     do caderno — que não é empurrado pelo padding e tem de saber a
     altura da barra por si. Fica declarada num sítio só: se a barra
     mudar de altura, muda aqui e o resto acompanha. */
  body.com-nav-baixo { --nav-baixo-h: 56px; padding-bottom: calc(56px + env(safe-area-inset-bottom)) }
}

/* ============================================================
   Bloco-âncora

   O contrapeso que faltava às páginas. Sobre creme claro, tudo com
   filetes de 1px e o mesmo peso visual, não há por onde o olho
   comece — e o conjunto lê-se como não acabado, por muito correcta
   que a paleta esteja.

   Cada página tem um só. É o que a pessoa foi ali fazer:
     home         · o curso a meio e o botão de continuar
     calculadoras · o resultado da conta
     ingredientes · a regra prática da ficha aberta
     perfil       · o resumo do percurso

   Vive no base.css e não em cada página, porque três cópias do mesmo
   bloco divergem — já aconteceu com a barra de navegação.
   ============================================================ */
.ancora {
  background: #14110D; color: #F2EDE2;
  padding: 24px 26px 22px; border-radius: 12px; border: 0;
}
.ancora[hidden] { display: none }

.ancora .etiqueta {
  margin: 0 0 10px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: .66rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(242, 237, 226, .5);
}
.ancora .titulo, .ancora h1, .ancora h2 {
  margin: 0 0 14px; color: #F2EDE2;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 400; font-size: 1.9rem; line-height: 1.12; letter-spacing: -.02em;
}
.ancora p { color: rgba(242, 237, 226, .82); line-height: 1.6 }

/* A grelha de números: mono tabular, rótulo em versalete por cima,
   unidade em subordinado. Lê-se como instrumento, não como widget. */
.ancora .numeros {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 18px; margin: 0;
}
.ancora .numeros > div { min-width: 0 }
.ancora .numeros dt {
  font-family: "Inter", system-ui, sans-serif;
  font-size: .58rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(242, 237, 226, .5); margin-bottom: 7px;
}
.ancora .numeros dd {
  margin: 0; font-family: var(--font-mono, ui-monospace, Menlo, Consolas, monospace);
  font-variant-numeric: tabular-nums;
  font-size: 1.65rem; line-height: 1; letter-spacing: -.03em;
  overflow-wrap: anywhere;
}
.ancora .numeros dd span { font-size: .74rem; color: rgba(242, 237, 226, .55); margin-left: 2px }
.ancora .numeros .destaque dd, .ancora .numeros > div:first-child dd { color: #E3B458 }

/* Barra de progresso, quando faz sentido */
.ancora .barra { height: 3px; background: rgba(242, 237, 226, .16); overflow: hidden; margin: 0 0 20px }
.ancora .barra i { display: block; height: 100%; background: #E3B458; transition: width .5s ease }

/* Acção principal: contraste invertido, para não haver dúvida. */
.ancora .seguir {
  background: #F2EDE2; color: #14110D; border: 0; border-radius: 8px;
  padding: 13px 26px; font-size: .96rem; font-weight: 600; min-height: 48px;
  cursor: pointer; font-family: "Inter", system-ui, sans-serif; margin-top: 20px;
}
.ancora .seguir:hover { opacity: .9 }

@media (max-width: 640px) {
  .ancora { padding: 20px 18px }
  .ancora .titulo, .ancora h1, .ancora h2 { font-size: 1.5rem; margin-bottom: 12px }
  .ancora .numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px 12px }
  .ancora .numeros dd { font-size: 1.4rem }
  .ancora .seguir { width: 100% }
}

/* O canto da conta: os dois botões andam juntos e não se separam
   quando a barra fica apertada. */
.nav .conta { display: flex; align-items: center; gap: 8px; flex: none }

/* "A minha área" com o nome por baixo. O rótulo é a acção e mantém o
   peso; o nome é legenda e fica em cinzento, mais pequeno — assim
   lê-se como quem está autenticado e não como um segundo botão. */
.nav .conta-area {
  flex-direction: column; align-items: flex-start; justify-content: center;
  gap: 1px; line-height: 1.15; padding-top: 6px; padding-bottom: 6px;
}
.nav .conta-area .rotulo { font-size: .88rem; font-weight: 500 }
.nav .conta-area .nome {
  font-size: .72rem; font-weight: 400; color: var(--nav-mute);
  max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Sem nome (ainda a carregar, ou conta sem nome) o botão não deve
   encolher para uma linha e voltar a crescer: fica com uma linha vazia
   reservada em vez de saltar. */
.nav .conta-area .nome:empty::before { content: "\200B" }
/* Num ecrã estreito "A minha área" e "Sair" lado a lado com a marca não
   cabem. O encolher da marca e dos botões já está tratado acima, aos
   430px; aqui só falta apertar o espaço entre os dois. */
@media (max-width: 430px) {
  .nav .conta { gap: 6px }
  /* Num ecrã estreito o nome cede antes de a barra transbordar: fica
     cortado com reticências em vez de empurrar a página para o lado. */
  .nav .conta-area .nome { max-width: 9ch }
}
/* Aos 320px — o ecrã mais estreito ainda em uso — a marca e os dois
   botões passavam 27px da largura da janela. Medido, não estimado. */
@media (max-width: 359px) {
  .nav .marca { font-size: .6rem; letter-spacing: .02em }
  .nav .acao { padding: 8px 9px; font-size: .78rem }
  .nav-in { gap: 6px; padding: 0 12px }
}

/* Ligações só para quem NÃO tem sessão. O par de `.so-conta`: as duas
   existem porque o mesmo rótulo — "Cursos" — leva a sítios diferentes
   consoante haja conta, e mostrar os dois era pior do que não mostrar
   nenhum. Começa visível: sem JS, quem chega de fora vê o destino
   público, que é o que serve a quem ainda não entrou. */
.nav .so-anon { display: inline }
body.is-in .nav .so-anon { display: none }

/* ---------------- Caixas de diálogo ----------------
   Substituem o confirm() e o alert() do browser. Ver js/dialogo.js para
   o porquê de assentar no <dialog> nativo.

   O ::backdrop é o fundo escurecido que o elemento traz. Escurece-se
   pouco — 38% — porque o que está por baixo é o trabalho da pessoa e
   ela precisa de o ver para decidir. */
.dlg {
  border: 0; padding: 0; background: transparent;
  max-width: min(30rem, calc(100vw - 32px));
  color: var(--text, #191510);
}
.dlg::backdrop { background: rgba(25, 21, 16, .38); backdrop-filter: blur(2px) }
.dlg-in {
  background: var(--paper, #F7F5F0);
  border: 1px solid var(--line2, #D8D1C2);
  border-radius: 14px; padding: 26px 26px 20px;
  box-shadow: 0 18px 44px rgba(25, 21, 16, .18);
}
.dlg-t {
  margin: 0 0 8px;
  font: 400 1.32rem/1.2 var(--font-display, "Fraunces", Georgia, serif);
  letter-spacing: -.02em; color: var(--text, #191510);
}
.dlg-t[hidden] { display: none }
.dlg-p {
  margin: 0; color: var(--muted, #6B6357);
  font: 400 .96rem/1.6 var(--font-body, "Inter", system-ui, sans-serif);
}
.dlg-acoes { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; flex-wrap: wrap }
.dlg-b {
  font: 500 .92rem/1 var(--font-body, "Inter", system-ui, sans-serif);
  padding: 12px 20px; border-radius: 9px; cursor: pointer;
  min-height: 44px; border: 1px solid transparent;
  transition: opacity .14s, border-color .14s, background .14s;
}
.dlg-nao { background: transparent; border-color: var(--line2, #D8D1C2); color: var(--text, #191510) }
.dlg-nao:hover { border-color: var(--text, #191510) }
.dlg-nao[hidden] { display: none }
.dlg-sim { background: var(--text, #191510); color: var(--paper, #F7F5F0) }
.dlg-sim:hover { opacity: .86 }
/* Vermelho só onde se destrói. Se todos os botões de confirmação
   fossem vermelhos, o vermelho deixava de querer dizer nada. */
.dlg-sim.dlg-perigo { background: #B0453F; border-color: #B0453F; color: #fff }
.dlg-b:focus-visible { outline: 2px solid var(--accent, #B3781A); outline-offset: 2px }

@media (prefers-reduced-motion: no-preference) {
  .dlg[open] { animation: dlg-entra .16s ease-out }
  @keyframes dlg-entra { from { opacity: 0; transform: translateY(6px) scale(.98) } }
}
/* Num telemóvel os botões ficam à largura toda e o de cancelar em
   baixo: o polegar chega ao de baixo primeiro, e o de baixo deve ser o
   que não faz estragos. */
@media (max-width: 420px) {
  .dlg-acoes { flex-direction: column-reverse }
  .dlg-b { width: 100% }
}