/* ═══════════════════════════════════════════════════════════════
   Between Us — Human Design · Design System
   Paleta suave: rosa quartzo, lavanda, sage, pêssego, creme
   Tipografia: Playfair Display (títulos) + Lato (corpo)
   Herdado e simplificado a partir de HumanDesignMaternidade
═══════════════════════════════════════════════════════════════ */

:root {
  /* cores */
  --rose:            #e0a598;
  --rose-light:      #f3d8d1;
  --rose-dark:       #b97566;
  --rose-pale:       #fdf1ee;
  --lavender:        #b9a5cf;
  --lavender-light:  #e4dbef;
  --lavender-pale:   #f6f2fb;
  --lavender-dark:   #7a6596;  /* letra pequena sobre claro — as etiquetas do relatório */
  --sage:            #93b299;
  --sage-light:      #c9dece;
  --sage-pale:       #eff6f1;
  --sage-text:       #4f7256;  /* a letra da .tag--sage */
  --peach:           #edc3a2;
  --peach-pale:      #fdf5ee;
  --cream:           #fdf8f2;
  --warm-white:      #fffdfa;
  --line:            #ece1dc;
  --dark:            #3b332e;
  --text:            #4d4340;
  --text-light:      #837571;

  /* os dois lados de um gráfico — sem cor nova: o escuro do texto e o rosa dos botões.
     Servem os chips das portas e o desenho do gráfico (decisão da Tânia, 18/09/2026). */
  --c-personalidade: var(--text);
  --c-desenho:       var(--rose);
  /* O céu e o que ele dá a uma pessoa — a página «O céu» (27/09/2026). */
  --c-ceu:           #8f7bb0;
  --c-ceu-forte:     #6f5a92;
  /* O que se ganha, a vermelho e numa cor só (escolha da Tânia a 01/10/2026: a cor A do
     esboço Claude outputs/ceu-hora-esboco.html). Até aí eram dois dourados. */
  --c-ganho:         #d63a2f;
  --c-ganho-claro:   #f0b9b3;
  --c-ganho-centro:  #f8d5d0;
  --c-ganho-fundo:   #fef5f4;
  --c-ganho-letra:   #a52a21;
  /* O que falta num formulário: tem de se ver logo. */
  --c-erro:          #c62828;
  --c-erro-fundo:    #fdecea;

  /* Os três circuitos (06/10/2026) — sem cor nova, a paleta de sempre: Individual é a
     lavanda, Tribal o pêssego, Coletivo o sage. A letra do Coletivo é o verde da .tag--sage. */
  --c-individual:      var(--lavender);
  --c-individual-pale: var(--lavender-pale);
  --c-individual-text: #6a5384;  /* a letra da .tag--lavender */
  --c-tribal:          var(--peach);
  --c-tribal-pale:     var(--peach-pale);
  --c-tribal-text:     #9a5f35;  /* a do esboço aceite: um pêssego escuro, que se lê sobre o claro */
  --c-coletivo:        var(--sage);
  --c-coletivo-pale:   var(--sage-pale);
  --c-coletivo-text:   #4f7256;

  /* a letra de uma nota por baixo de um título — o «Fica no…» de uma porta */
  --fs-note: .86rem;

  /* tipografia */
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-sans:  'Lato', system-ui, -apple-system, sans-serif;
  /* Os símbolos dos planetas: a Lato não os tem, e cada sistema tem a sua letra. */
  --font-symbols: 'Segoe UI Symbol', 'Apple Symbols', 'Noto Sans Symbols 2', 'Noto Sans Symbols', sans-serif;

  /* espaço */
  --s-xs: .25rem; --s-sm: .5rem;  --s-md: 1rem;
  --s-lg: 1.5rem; --s-xl: 2rem;   --s-2xl: 3rem; --s-3xl: 4.5rem;

  /* onde fica o bloco quando um clique no gráfico salta para ele: por baixo da barra do
     site */
  --jump-offset: 5rem;

  /* forma */
  --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-full: 9999px;
  --shadow-sm: 0 2px 10px rgba(59,51,46,.05);
  --shadow-md: 0 6px 26px rgba(59,51,46,.09);
  --shadow-lg: 0 14px 48px rgba(59,51,46,.13);
  --t: .25s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--warm-white);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-serif); color: var(--dark); line-height: 1.25; font-weight: 600; }

/* O <FocusOnNavigate> do Routes.razor põe o foco no <h1> quando se muda de página, para
   quem usa leitor de ecrã ouvir logo onde chegou. Para o título poder receber foco, o
   Blazor acrescenta-lhe tabindex="-1" — e aí o browser desenha à volta o retângulo preto
   do foco, que aparecia por cima da primeira frase do site.

   Tira-se o retângulo e mantém-se o foco: um título não é um botão, o anel não diz nada a
   quem vê, e o leitor de ecrã continua a anunciar a página na mesma. O seletor é o mais
   apertado possível — só apanha o tabindex que o Blazor põe, e nunca um elemento em que
   se tenha carregado. */
h1[tabindex="-1"]:focus,
h1[tabindex="-1"]:focus-visible { outline: none; }

a { color: var(--rose-dark); text-decoration: none; transition: color var(--t); }
a:hover { color: var(--rose); }
img { max-width: 100%; display: block; }

.container { max-width: 1120px; margin: 0 auto; padding: 0 var(--s-lg); }
.container--narrow { max-width: 760px; }

/* ── Navbar ─────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,253,250,.94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
/* Só o espaço de cima e de baixo: o dos lados é o do .container, igual ao resto da página.
   Com «padding: … 0», o logótipo ficava encostado à borda no telemóvel e 24 px fora do
   alinhamento no computador (corrigido a 26/09/2026). */
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-lg); padding-top: var(--s-md); padding-bottom: var(--s-md); }
.nav__brand { display: flex; align-items: baseline; gap: .55rem; font-family: var(--font-serif); font-size: 1.15rem; color: var(--dark); font-weight: 600; }
.nav__brand-mark { color: var(--rose); font-size: 1.35rem; line-height: 1; align-self: center; }
/* «Between Us» e «— Human Design» pela mesma linha de base: com letras de tamanhos diferentes,
   centrar deixava o subtítulo a flutuar (27/09/2026). A estrela continua ao centro. */
/* «Between Us» manda; «— Human Design» vai mais pequeno e mais claro, como subtítulo. */
.nav__brand-sub { font-family: var(--font-sans); font-size: .8rem; font-weight: 400; color: var(--text-light); white-space: nowrap; }
/* O nome da página em que se está, a seguir a «Human Design» (01/11/2026). */
.nav__left { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-xs) var(--s-md); min-width: 0; }
.nav__page {
  background: #fff; color: var(--rose-dark); padding: .3rem .9rem; border-radius: var(--r-full);
  font-size: .82rem; font-weight: 700; box-shadow: var(--shadow-sm); white-space: nowrap;
}
.nav__menu { display: flex; align-items: center; gap: var(--s-xs); list-style: none; }
.nav__link { padding: .4rem .8rem; border-radius: var(--r-full); font-size: .95rem; color: var(--text); }
.nav__link:hover { background: var(--rose-pale); color: var(--rose-dark); }
.nav__link--cta { background: var(--rose); color: #fff; font-weight: 700;}
.nav__link--cta:hover { background: var(--rose-dark); color: #fff; }

/* «Sair» é um botão dentro de um formulário, e não um link: sair por GET deixava um site
   qualquer terminar a sessão com uma imagem. Por fora tem de parecer igual aos links. */
.nav__form { display: contents; }
.nav__link--button { border: 0; background: transparent; font-family: inherit; line-height: inherit; cursor: pointer; }

/* O botão do menu de telemóvel. Escondido em ecrã grande, onde a lista já cabe toda. */
.nav__switch { position: absolute; opacity: 0; width: 0; height: 0; }
.nav__burger { display: none; }
.nav__burger span {
  display: block; width: 22px; height: 2px; border-radius: 2px;
  background: var(--dark); transition: all var(--t);
}

/* ── Botões ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .7rem 1.6rem; border-radius: var(--r-full);
  font-family: var(--font-sans); font-size: .95rem; font-weight: 700;
  border: 2px solid transparent; cursor: pointer; transition: all var(--t);
}
.btn--primary { background: var(--rose); border-color: var(--rose); color: #fff; }
.btn--primary:hover { background: var(--rose-dark); border-color: var(--rose-dark); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn--ghost { background: transparent; border-color: var(--rose-light); color: var(--rose-dark); }
.btn--ghost:hover { background: var(--rose-pale); border-color: var(--rose); }
.btn--lg { padding: .9rem 2.1rem; font-size: 1.02rem; }
.btn--sm { padding: .45rem 1.05rem; font-size: .88rem; }

/* ── Secções ────────────────────────────────────────────── */
.section { padding: var(--s-3xl) 0; }
.section--tint { background: var(--cream); }
.section__eyebrow {
  display: inline-block; font-size: .78rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--rose-dark); margin-bottom: var(--s-sm);
}
.section__title { font-size: clamp(1.7rem, 3.2vw, 2.35rem); margin-bottom: var(--s-md); }
.section__lead { font-size: 1.08rem; color: var(--text-light); max-width: 58ch; }
.section__head { margin-bottom: var(--s-2xl); }
.section__head--center { text-align: center; }
.section__head--center .section__lead { margin-inline: auto; }
/* Para páginas que se usam, e não só se leem: o título encosta ao que vem a seguir. */
.section__head--tight { margin-bottom: var(--s-md); }

/* ── Hero ───────────────────────────────────────────────── */
.hero {
  padding: var(--s-3xl) 0;
  background:
    radial-gradient(900px 420px at 8% -10%, var(--lavender-pale) 0%, transparent 62%),
    radial-gradient(760px 380px at 96% 4%, var(--peach-pale) 0%, transparent 58%),
    linear-gradient(170deg, var(--rose-pale) 0%, var(--warm-white) 72%);
  border-bottom: 1px solid var(--line);
}
.hero__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--s-2xl); align-items: center; }
.hero__title { font-size: clamp(2.1rem, 5vw, 3.4rem); margin-bottom: var(--s-md); }
.hero__title em { font-style: normal; color: var(--rose-dark); }
.hero__lead { font-size: 1.15rem; color: var(--text-light); max-width: fit-content; margin-bottom: var(--s-xl); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-md); }
/* A faixa baixa das páginas que se abrem do painel (01/11/2026). */
.hero--compact { padding: var(--s-sm) 0; }
.hero--compact .back-link { margin: 0; }
.hero--compact .hero__title { margin: var(--s-sm) 0 0; }
.hero--compact .hero__lead { margin-top: var(--s-xs); }

/* ── Cartões ────────────────────────────────────────────── */
.card {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s-xl);
  box-shadow: var(--shadow-sm); transition: all var(--t);
}
.card--link:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--rose-light); }
.card__icon {
  width: 46px; height: 46px; display: grid; place-items: center;
  border-radius: var(--r-md); background: var(--rose-pale);
  font-size: 1.35rem; margin-bottom: var(--s-md);
}
.card__title { font-size: 1.2rem; margin-bottom: var(--s-sm); }
.card__text { color: var(--text-light); font-size: .96rem; }
.card--compact { padding: var(--s-lg); }
/* Os botões de um cartão numa linha: o principal encostado à esquerda, o outro à direita.
   Um por baixo do outro pareciam colados, e gastavam uma altura inteira de cartão. */
.card__actions {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--s-sm); flex-wrap: wrap; margin-top: var(--s-md);
}

.grid { display: grid; gap: var(--s-lg); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
/* Listas longas de coisas curtas — as portas. `auto-fill` e não `auto-fit`: com poucas,
   os cartões ficam do tamanho deles em vez de esticarem a linha toda. */
.grid--5 { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.grid--tight { gap: var(--s-sm); }

/* ── Duas colunas ────────────────────────────────────────── */
/* Em ecrã grande, o formulário fica de um lado e o resto do outro, em vez de tudo numa
   coluna estreita ao meio com espaço vazio dos lados. Abaixo de 860px volta a ser uma
   coluna só. `minmax(0, …)` e não `1fr`: sem ele, um cartão com texto comprido empurrava
   a coluna para fora do ecrã. */
.split { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--s-xl); align-items: start; }
.split--aside-first { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }

/* ── Cartão de conceito (tipo, centro, perfil) ──────────── */
.concept {
  display: block; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s-lg);
  box-shadow: var(--shadow-sm); transition: all var(--t);
  border-top: 4px solid var(--rose-light);
}
a.concept:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-top-color: var(--rose); }
.concept--lavender { border-top-color: var(--lavender-light); }
a.concept--lavender:hover { border-top-color: var(--lavender); }
.concept--sage { border-top-color: var(--sage-light); }
a.concept--sage:hover { border-top-color: var(--sage); }
.concept--peach { border-top-color: var(--peach); }
/* A versão curta, para listas longas — os canais e as portas. Só o nome. */
.concept--compact { padding: var(--s-sm) var(--s-md); border-top-width: 3px; border-radius: var(--r-md); }
.concept--compact .concept__name { font-size: .95rem; margin-bottom: 0; }
.concept__glyph { font-size: 1.75rem; margin-bottom: var(--s-sm); }
.concept__name { font-size: 1.1rem; color: var(--dark); margin-bottom: .25rem; }
.concept__meta { font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-light); margin-bottom: var(--s-sm); }
.concept__desc { font-size: .93rem; color: var(--text-light); }

/* ── Pastilha de escolha (Todos / Só o que falta) ─────────── */
.toggle {
  display: inline-flex; padding: 4px; gap: 4px;
  background: var(--cream); border: 1px solid var(--line);
  border-radius: var(--r-full);
}
.toggle__btn {
  border: 0; background: transparent; cursor: pointer;
  font-family: var(--font-sans); font-size: .9rem; font-weight: 700;
  color: var(--text-light); padding: .45rem 1.2rem;
  border-radius: var(--r-full); transition: all var(--t);
}
.toggle__btn[aria-pressed="true"] { background: #fff; color: var(--rose-dark); box-shadow: var(--shadow-sm); }

/* ── Língua (só na área de escrita) ─────────────────────── */
/* A mesma pastilha da .toggle, mas bloco próprio de propósito: no
   editor aparecem as duas ao mesmo tempo, e um seletor que apanhasse
   as duas era um erro à espera de acontecer. */
.lang {
  display: inline-flex; padding: 4px; gap: 4px;
  margin-bottom: var(--s-lg);
  background: var(--cream); border: 1px solid var(--line);
  border-radius: var(--r-full);
}
.lang__btn {
  border: 0; background: transparent; cursor: pointer; text-decoration: none;
  font-family: var(--font-sans); font-size: .9rem; font-weight: 700;
  color: var(--text-light); padding: .45rem 1.2rem;
  border-radius: var(--r-full); transition: all var(--t);
}
.lang__btn[aria-pressed="true"] { background: #fff; color: var(--rose-dark); box-shadow: var(--shadow-sm); }

/* ── Bloco de secção de ficha ───────────────────────────── */
.entry { border-top: 1px solid var(--line); padding: var(--s-xl) 0; }
.entry:first-of-type { border-top: 0; }
.entry__label {
  font-family: var(--font-sans); /* também serve de título (h2) em cartões, e os títulos são serifados */
  font-size: .78rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--rose-dark); margin-bottom: var(--s-sm);
}
.entry__title { font-size: 1.35rem; margin-bottom: var(--s-md); }
.entry p + p { margin-top: var(--s-md); }

.callout {
  background: var(--sage-pale); border-left: 4px solid var(--sage);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: var(--s-lg); margin: var(--s-lg) 0;
}
.callout--warn { background: var(--peach-pale); border-left-color: var(--peach); }
.callout--quote {
  background: var(--lavender-pale); border-left-color: var(--lavender);
  font-family: var(--font-serif); font-size: 1.15rem; color: var(--dark); font-style: italic;
}
.callout__label { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-light); margin-bottom: var(--s-xs); font-style: normal; font-family: var(--font-sans); }

/* lista de idades */
.ages { list-style: none; display: grid; gap: var(--s-md); }
.ages li { display: grid; grid-template-columns: 116px 1fr; gap: var(--s-md); align-items: start; }
.ages__age { font-weight: 700; color: var(--rose-dark); font-size: .88rem; padding-top: .2rem; }

/* ── Formulário ─────────────────────────────────────────── */
.panel { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.panel__head { padding: var(--s-lg); background: var(--rose-pale); border-bottom: 1px solid var(--line); text-align: center; }
.panel__head--lavender { background: var(--lavender-pale); }
.panel__glyph { font-size: 1.9rem; }
.panel__title { font-size: 1.15rem; margin-top: var(--s-xs); }
.panel__sub { font-size: .88rem; color: var(--text-light); }
.panel__body { padding: var(--s-xl); }
.field { margin-bottom: var(--s-lg); }
.field__label { display: block; font-weight: 700; font-size: .87rem; color: var(--dark); margin-bottom: var(--s-xs); }
.field__input {
  width: 100%; padding: .75rem 1rem; border-radius: var(--r-md);
  border: 1px solid var(--line); font-family: var(--font-sans); font-size: .95rem;
  color: var(--text); background: var(--warm-white); transition: all var(--t);
}
.field__input:focus { outline: 0; border-color: var(--rose); box-shadow: 0 0 0 4px var(--rose-pale); }
/* O campo que falta, e a frase por baixo dele, a vermelho (pedido da Tânia a 02/11/2026). As classes
   são as que o Blazor põe: «invalid» na caixa e «validation-message» na frase. */
.field__input.invalid,
.field__input.invalid:focus { border-color: var(--c-erro); box-shadow: 0 0 0 1px var(--c-erro); background: var(--c-erro-fundo); }
.validation-message { color: var(--c-erro); font-size: .84rem; font-weight: 700; margin-top: var(--s-xs); }
/* A regra dita antes de se escrever, e não como erro depois de se carregar em guardar. */
.field__hint { font-size: .84rem; color: var(--text-light); margin: var(--s-xs) 0 0; }
/* Uma caixa para marcar, com o texto ao lado e não por baixo. A caixa não encolhe e
   alinha-se pela primeira linha, que é onde ela pertence quando o texto dá duas ou três
   voltas — como o da renúncia aos 14 dias. O rótulo inteiro é clicável. */
.field__check {
  display: flex; align-items: flex-start; gap: var(--s-sm);
  font-size: .9rem; color: var(--text); line-height: 1.45; cursor: pointer;
}
.field__check input { flex: 0 0 auto; margin-top: .2rem; accent-color: var(--rose-dark); }
/* Várias caixas lado a lado — os grupos de uma pessoa. */
.field__checks { border: 0; padding: 0; min-width: 0; }
.field__checks-row { display: flex; flex-wrap: wrap; gap: var(--s-xs) var(--s-md); }
/* Dois campos curtos lado a lado — a data e a hora. Poupam uma altura inteira de
   formulário, e cabem os dois até num telemóvel. */
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-md); }

/* ── Blog ───────────────────────────────────────────────── */
.article-list { display: grid; gap: var(--s-md); }
.article-card { display: block; color: inherit; text-decoration: none; }
.article-card__date {
  font-size: .78rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-light); margin-bottom: var(--s-xs);
}
/* O texto de um artigo: parágrafos arejados, e títulos com espaço antes. */
.article { font-size: 1.05rem; line-height: 1.75; }
.article p + p, .article ul, .article ol { margin-top: var(--s-md); }
.article h2 { font-size: 1.45rem; margin: var(--s-xl) 0 var(--s-sm); }
.article h3 { font-size: 1.15rem; margin: var(--s-lg) 0 var(--s-xs); }
.article li + li { margin-top: var(--s-xs); }
.article blockquote {
  margin: var(--s-lg) 0; padding: var(--s-sm) var(--s-lg);
  border-left: 4px solid var(--rose-light); font-family: var(--font-serif); color: var(--dark);
}

/* ── Imagens para as redes (/admin/imagens) ────────────── */
.imagens__previas { display: grid; gap: var(--s-lg); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.imagens__previa { margin: 0; display: flex; flex-direction: column; gap: var(--s-sm); align-items: flex-start; }
.imagens__canvas { width: 100%; height: auto; border-radius: var(--r-md); box-shadow: var(--shadow-sm); border: 1px solid var(--line); }

/* ── Caixa de procura do sítio de nascimento ─────────────── */
/* Só aparece se o JavaScript correr; sem ele fica a lista completa. */
.lugar { position: relative; }

.lugar__lista {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px);
  margin: 0; padding: var(--s-xs); list-style: none;
  max-height: 17rem; overflow-y: auto; overscroll-behavior: contain;
  background: var(--warm-white); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--shadow-md);
}

.lugar__opcao {
  display: block; padding: .55rem .7rem; border-radius: var(--r-sm); cursor: pointer;
}
.lugar__opcao[aria-selected="true"] { background: var(--rose-pale); }

.lugar__nome { display: block; font-weight: 700; font-size: .93rem; color: var(--dark); }
.lugar__detalhe { display: block; font-size: .8rem; color: var(--text-light); }

.lugar__escolhido {
  margin: var(--s-xs) 0 0; font-size: .82rem; color: var(--text-light);
}

/* ── Resultado / comparação ─────────────────────────────── */
.person { text-align: center; }
.person__avatar {
  width: 64px; height: 64px; margin: 0 auto var(--s-sm);
  border-radius: var(--r-full); display: grid; place-items: center;
  font-size: 1.7rem; background: var(--rose-pale);
}
.person__avatar--child { background: var(--sage-pale); }
.person__name { font-size: 1.25rem; }
.person__type { color: var(--rose-dark); font-weight: 700; font-size: .95rem; letter-spacing: .04em; }
.person__type--child { color: var(--sage); }

.stats { list-style: none; display: grid; gap: .1rem; margin-top: var(--s-md); text-align: left; }
.stats li { display: flex; justify-content: space-between; gap: var(--s-md); padding: .5rem 0; border-bottom: 1px dashed var(--line); font-size: .93rem; }
.stats li:last-child { border-bottom: 0; }
.stats dt, .stats__k { color: var(--text-light); }
.stats__v { font-weight: 700; color: var(--dark); }

.tag {
  display: inline-block; padding: .22rem .8rem; border-radius: var(--r-full);
  font-size: .78rem; font-weight: 700; letter-spacing: .03em;
}
.tag--rose { background: var(--rose-pale); color: var(--rose-dark); }
.tag--sage { background: var(--sage-pale); color: var(--sage-text); }
.tag--lavender { background: var(--lavender-pale); color: #6a5384; }

/* ── Rodapé ─────────────────────────────────────────────── */
.footer { background: var(--cream); border-top: 1px solid var(--line); padding: var(--s-2xl) 0 var(--s-xl); margin-top: var(--s-3xl); }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s-xl); margin-bottom: var(--s-xl); }
.footer h4 { font-family: var(--font-sans); font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-light); margin-bottom: var(--s-sm); }
.footer ul { list-style: none; display: grid; gap: .35rem; font-size: .94rem; }
.footer__bottom { border-top: 1px solid var(--line); padding-top: var(--s-md); font-size: .85rem; color: var(--text-light); display: flex; justify-content: space-between; gap: var(--s-md); flex-wrap: wrap; }

/* ── Responsivo ─────────────────────────────────────────── */
@media (max-width: 860px) {
  .family-split { grid-template-columns: minmax(0, 1fr); }
  .panel-cards { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); }
  .hero__grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }

  /* Aqui a lista não cabe ao lado da marca, por isso desce para baixo dela e só
     aparece quando o botão está carregado. Antes desaparecia e mais nada — quem
     entrava pelo telemóvel ficava sem menu nenhum. */
  .nav__inner { flex-wrap: wrap; gap: var(--s-sm); }
  /* A marca e o nome da página ocupam o que sobra: o botão do menu fica sempre à direita. */
  .nav__left { flex: 1 1 0; }
  .nav__burger {
    display: flex; flex-direction: column; gap: 5px;
    padding: .55rem; margin: -.55rem; cursor: pointer; border-radius: var(--r-md);
  }
  .nav__switch:focus-visible ~ .nav__burger { outline: 2px solid var(--rose); outline-offset: 2px; }
  .nav__switch:checked ~ .nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav__switch:checked ~ .nav__burger span:nth-child(2) { opacity: 0; }
  .nav__switch:checked ~ .nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .nav__menu { display: none; flex-direction: column; align-items: stretch; width: 100%; gap: 0; }
  .nav__switch:checked ~ .nav__menu { display: flex; padding-bottom: var(--s-sm); }
  /* Sem espaço à esquerda: as palavras do menu alinham com o logótipo e com a página. */
  .nav__menu .nav__link { display: block; padding: .7rem 0; border-radius: var(--r-md); }
  .nav__menu .nav__link--cta { text-align: center; margin-top: var(--s-xs); border-radius: var(--r-full); }
  .nav__menu .nav__link--button { width: 100%; text-align: left; }
  .ages li { grid-template-columns: 1fr; gap: var(--s-xs); }
  .section { padding: var(--s-2xl) 0; }
  .split, .split--aside-first { grid-template-columns: minmax(0, 1fr); }
}


/* ── Erro do Blazor ─────────────────────────────────────── */
#blazor-error-ui {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000;
  background: var(--peach-pale); border-top: 1px solid var(--peach);
  padding: var(--s-md) var(--s-lg); font-size: .92rem; color: var(--dark);
  box-shadow: var(--shadow-md);
}
#blazor-error-ui .dismiss { cursor: pointer; float: right; }

.breadcrumb { font-size: .87rem; color: var(--text-light); margin-bottom: var(--s-md); }
.breadcrumb a { color: var(--text-light); }
.back-link { font-size: .9rem; margin: 0 0 var(--s-md); }
.back-link a { color: var(--rose-dark); font-weight: 700; }

/* ── Leitura do gráfico: blocos que abrem ───────────────── */
/* O <details> do próprio HTML: abre-se quantos se quiser. Funciona sem JavaScript, é
   acessível de origem e imprime-se. */
.reading { border-top: 1px solid var(--line); }
.reading:first-of-type { border-top: 0; }
.reading__head {
  display: flex; align-items: baseline; gap: var(--s-sm);
  padding: var(--s-md) 0; cursor: pointer; list-style: none;
}
.reading__head::-webkit-details-marker { display: none; }
.reading__head::after {
  content: "+"; margin-left: auto; color: var(--rose-dark);
  font-weight: 700; line-height: 1;
}
.reading[open] > .reading__head::after { content: "–"; }
.reading__head:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; border-radius: var(--r-sm); }
.reading__name { font-family: var(--font-serif); font-size: 1.08rem; font-weight: 600; color: var(--dark); }
.reading__body { padding-bottom: var(--s-lg); }
/* Dentro de um bloco as secções já estão separadas pelo próprio bloco. */
.reading__body .entry { border-top: 0; padding: var(--s-md) 0 0; }

/* ── Uma porta que abre dentro da grelha ─────────────────── */
/* Fechada é o cartão pequeno de sempre. Aberta ocupa a linha inteira, em vez de esticar a
   linha toda para caber só ela — é o que permite pôr a ficha na grelha sem a desmanchar. */
.gate { cursor: pointer; }
.gate__head { list-style: none; display: flex; align-items: baseline; gap: var(--s-sm); }
.gate__head::-webkit-details-marker { display: none; }
.gate__head::after {
  content: "+"; margin-left: auto; color: var(--rose-dark);
  font-weight: 700; line-height: 1; font-size: .95rem;
}
.gate[open] > .gate__head::after { content: "–"; }
.gate__head:focus-visible { outline: 2px solid var(--rose); outline-offset: 4px; border-radius: var(--r-sm); }

.gate[open] {
  grid-column: 1 / -1;
  padding: var(--s-lg);
  border-top-color: var(--rose);
  box-shadow: var(--shadow-md);
}
.gate[open] .concept__name { font-size: 1.1rem; }
.gate__body .entry { border-top: 0; padding: var(--s-md) 0 0; }

/* ── O corpo: o que várias fichas dizem sobre a mesma coisa ── */
.body-note {
  display: grid; grid-template-columns: 11rem minmax(0, 1fr);
  gap: var(--s-xs) var(--s-md);
  padding: var(--s-sm) 0; border-top: 1px dashed var(--line);
}
.body-note:first-of-type { border-top: 0; }
.body-note__from { font-size: .84rem; font-weight: 700; color: var(--rose-dark); padding-top: .15rem; }
.body-note__text p { margin: 0; }
.body-note__text p + p { margin-top: var(--s-sm); }
/* O aviso do que fica de fora, a seguir à peça de graça — nunca a peça em si. */
.body-note__locked { font-size: .84rem; font-style: italic; color: var(--text-light); margin: var(--s-xs) 0 0; }

/* O botão de comprar a seguir a um cadeado: um formulário, mas com ar de link, na mesma linha. */
.report-lock { display: inline; margin: 0; }
.report-lock__buy {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-style: normal; font-weight: 700; color: var(--rose-dark);
  transition: color var(--t);
}
.report-lock__buy:hover { color: var(--rose); }

@media (max-width: 860px) {
  .body-note { grid-template-columns: minmax(0, 1fr); }
}

/* ──────────────────────────────────────────────────────────────────
   Impressão

   Serve a antevisão do relatório (/admin/relatorio): com «Imprimir», o
   browser guarda a página em PDF. Enquanto não houver ficheiro gerado no
   servidor, é isto que faz o produto existir.

   .no-print sai do papel — formulários, migalhas, botões e as notas que
   só interessam a quem está a construir.
   ────────────────────────────────────────────────────────────────── */
@media print {
    .no-print,
    .nav,
    .footer {
        display: none !important;
    }

    body {
        background: #fff;
    }

    /* Sem sombras nem fundos: gastam tinta e não dizem nada no papel. */
    .card,
    .callout {
        background: #fff;
        box-shadow: none;
        border: 1px solid var(--line);
        break-inside: avoid;
    }

    .body-note {
        break-inside: avoid;
    }

    h1, h2 {
        break-after: avoid;
    }
}

/* ── As ativações: os chips das portas e as peças da cruz ── */
/* Um chip por planeta que toca a porta. A Personalidade leva a margem escura; o Desenho, o
   rosa — as mesmas duas cores do gráfico. O rosa não serve de letra (lê-se mal sobre
   claro), por isso entra como fundo e margem, e a letra fica escura. */
.activation-chips { display: flex; flex-wrap: wrap; gap: var(--s-xs); margin-top: var(--s-xs); }
.activation-chip {
  display: inline-block; padding: .1rem .55rem; border-radius: var(--r-full);
  font-size: .74rem; font-weight: 700; letter-spacing: .02em; color: var(--dark);
  border: 1px solid var(--c-personalidade); background: var(--warm-white);
}
.activation-chip--desenho { border-color: var(--c-desenho); background: var(--rose-pale); }
/* Depende da hora exata: a margem passa a tracejado. */
.activation-chip--sensivel { border-style: dashed; }

/* ── O gráfico com as colunas dos planetas ─────────────────── */
/* O Desenho à esquerda, na cor dele; a Personalidade à direita, no escuro, com o símbolo do
   lado de fora — como nos gráficos de Human Design. Numa caixa estreita as colunas descem
   para baixo do gráfico, lado a lado. */
.hdchart { margin: 0; container-type: inline-size; }
.hdchart__layout {
  display: grid; gap: var(--s-md); align-items: start;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "desenho graph personalidade";
}
.hdchart__graph { grid-area: graph; min-width: 0; }
.hdchart__graph svg { max-width: 100%; }
/* A biblioteca põe a Raiz a acabar em 1,51 numa caixa de 1,5 de altura, e o fundo dela ficava
   cortado (29/09/2026). Deixa-se o desenho passar da caixa, com um pouco de espaço por baixo. */
.hdchart__graph > svg,
.sky-chart__graph > svg { overflow: visible; }
.hdchart__graph,
.sky-chart__graph { padding-bottom: var(--s-xs); }
.hdchart__side--desenho { grid-area: desenho; }
.hdchart__side--personalidade { grid-area: personalidade; }

.hdchart__title {
  margin: 0 0 var(--s-xs); font-size: .72rem; font-weight: 700; text-align: center;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-light);
}

.hdchart__arrows {
  list-style: none; margin: 0 0 var(--s-sm); padding: 0;
  display: flex; flex-direction: column; align-items: center; gap: var(--s-xs);
}
.hdchart__arrow { font-weight: 700; font-size: 1.05rem; color: var(--dark); white-space: nowrap; }
.hdchart__arrow sub { font-size: .65em; font-weight: 400; }
.hdchart__arrow-sign { margin-right: var(--s-xs); }
.hdchart__side--desenho .hdchart__arrow-sign { color: var(--c-desenho); }
.hdchart__side--personalidade .hdchart__arrow-sign { color: var(--c-personalidade); }

.hdchart__planets {
  list-style: none; margin: 0; padding: 0; min-width: 6rem;
  border-radius: var(--r-sm); overflow: hidden; text-align: left;
}
.hdchart__side--desenho .hdchart__planets { background: var(--c-desenho); color: var(--dark); }
.hdchart__side--personalidade .hdchart__planets { background: var(--c-personalidade); color: var(--warm-white); }

.hdchart__planet {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-sm);
  padding: .18rem .6rem; font-size: .85rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.hdchart__planets > li + li .hdchart__planet { border-top: 1px solid var(--warm-white); }
.hdchart__side--personalidade .hdchart__planet { flex-direction: row-reverse; }
.hdchart__symbol { font-family: var(--font-symbols); font-weight: 400; font-size: 1.05rem; line-height: 1; }

/* O filtro das linhas (28/09/2026): um botão por linha, por cima do desenho. Escolhida uma
   linha, o js/grafico-linhas.js marca o que é dela com is-lit e apaga o resto. */
.line-filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-xs) var(--s-sm); margin: 0 0 var(--s-xs); }
.line-filter__label {
  font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
  color: var(--rose-dark); margin-right: var(--s-xs);
}
.line-filter__chip {
  font: inherit; font-size: .88rem; color: var(--text); cursor: pointer;
  border: 1px solid var(--line); background: var(--warm-white); border-radius: var(--r-full);
  padding: .3rem .85rem; transition: background var(--t), border-color var(--t);
}
.line-filter__chip:hover { border-color: var(--rose); }
.line-filter__chip b { color: var(--rose-dark); margin-left: .3rem; }
.line-filter__chip[aria-pressed="true"] { background: var(--rose); border-color: var(--rose); color: var(--warm-white); }
.line-filter__chip[aria-pressed="true"] b { color: var(--warm-white); }
.line-filter__chip:disabled { opacity: .45; cursor: default; }
.line-filter__note { font-size: .92rem; color: var(--text); margin: 0 0 var(--s-sm); }
.line-filter__note strong { color: var(--dark); }

.hdchart [data-gate],
.hdchart__graph line,
.hdchart__graph path,
.hdchart__planets > li,
.hdchart__arrows { transition: opacity var(--t); }
.hdchart.is-filtering .hdchart__graph line,
.hdchart.is-filtering .hdchart__graph path { opacity: .12; }
.hdchart.is-filtering .hdchart__graph .is-lit { opacity: 1; }
.hdchart.is-filtering [data-gate]:not(.is-lit) { opacity: .15; }
.hdchart.is-filtering .hdchart__arrows,
.hdchart.is-filtering .hdchart__planets > li:not(.is-lit) { opacity: .18; }
.hdchart__planets > li.is-lit .hdchart__planet { box-shadow: inset 0 0 0 2px var(--dark); }

@container (max-width: 34rem) {
  .hdchart__layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "graph graph" "desenho personalidade";
  }
}

/* Muito estreito — no Comparar com cinco a oito pessoas, dois gráficos por linha no
   telemóvel: as colunas apertam-se para caberem no cartão. */
@container (max-width: 12rem) {
  .hdchart__layout { gap: var(--s-xs); }
  .hdchart__title { font-size: .6rem; letter-spacing: 0; }
  .hdchart__arrow { font-size: .85rem; }
  .hdchart__planets { min-width: 0; }
  .hdchart__planet { gap: .15rem; padding: .12rem .3rem; font-size: .72rem; }
  .hdchart__symbol { font-size: .8rem; }
}

/* Só para leitores de ecrã. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}


.activation-note { font-size: .8rem; color: var(--text-light); margin: var(--s-sm) 0 0; }

.gate__line { margin: var(--s-sm) 0 0; }
.gate__line-from { font-weight: 700; color: var(--rose-dark); }
.gate__line-name { font-style: italic; }

.activation { padding: var(--s-md) 0; border-top: 1px dashed var(--line); }
.activation:first-of-type { border-top: 0; }
.activation__title { font-family: var(--font-serif); font-size: 1.05rem; color: var(--dark); margin: 0 0 var(--s-xs); }
.activation__side { font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-light); margin: var(--s-md) 0 0; }
.activation__side--desenho { color: var(--rose-dark); }
.activation p { margin: 0; }

/* O componente do gráfico escreve a cor num atributo do SVG. Nem todos os browsers leem
   var() num atributo; estas regras apanham o valor literal e pintam-no pela variável, e
   assim a cor continua a viver só aqui. */
[stroke="var(--c-personalidade)"] { stroke: var(--c-personalidade); }
[fill="var(--c-personalidade)"] { fill: var(--c-personalidade); }
[stroke="var(--c-desenho)"] { stroke: var(--c-desenho); }
[fill="var(--c-desenho)"] { fill: var(--c-desenho); }

/* Uma porta de um canal inteiro: em vez da ficha, uma linha a remeter para o canal. */

/* O mapa de uma porta — «Fica no…» — por baixo do nome, em pequeno. Ver GateMap. */
.gate__map { font-size: var(--fs-note); color: var(--text-light); margin: 0 0 var(--s-sm); }

/* ── Os centros, dobrados ──────────────────────────────────── */
/* Começam abertos, com a contagem à vista; abrem sem JavaScript. O «+» e o «–» são os da
   porta que abre na grelha, para as duas se lerem da mesma maneira. */
.centers__head { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: var(--s-sm); flex-wrap: wrap; }
.centers__head::-webkit-details-marker { display: none; }
.centers__head .entry__label { margin: 0; }
.centers__count { font-size: .85rem; color: var(--text-light); }
.centers__head::after { content: "+"; margin-left: auto; color: var(--rose-dark); font-weight: 700; line-height: 1; }
.centers[open] > .centers__head::after { content: "–"; }
.centers__head:focus-visible { outline: 2px solid var(--rose); outline-offset: 4px; border-radius: var(--r-sm); }
.centers[open] > .card__text { margin-top: var(--s-sm); }

/* De onde vieram os cliques, por baixo do número — em /admin/estatisticas. */
.stats__detail { font-size: .85rem; color: var(--text-light); padding-top: 0; }

/* ── O clique no gráfico ───────────────────────────────────── */
/* Um clique numa porta, num centro, num canal, numa seta ou num planeta salta para o texto
   dele (js/grafico-cliques.js). A mão só aparece no que tem para onde ir. */
.hdchart .is-linked { cursor: pointer; }
.hdchart__jump { color: inherit; text-decoration: none; }
.hdchart__jump:hover { opacity: .75; }

/* Os nomes que também saltam — tipo, autoridade, perfil, e as grelhas de nomes. */
.jump { color: inherit; text-decoration: underline dotted var(--text-light); text-underline-offset: .2em; }
.jump:hover { color: var(--rose-dark); }

.reading, .concept { scroll-margin-top: var(--jump-offset); }

/* O bloco onde se aterra acende um instante, para o olho saber onde ir. */
.is-jumped { animation: jumped 1.8s ease; }
@keyframes jumped {
  from { box-shadow: 0 0 0 3px var(--rose); }
  to   { box-shadow: 0 0 0 3px transparent; }
}
@media (prefers-reduced-motion: reduce) { .is-jumped { animation: none; } }

/* ── O painel «As minhas pessoas» (/conta) ───────────────────── */
/* Arrumado a 26/09/2026 pelo esboço aceite pela Tânia: a barra com «Quem está guardado» e
   o botão «Acrescentar alguém», as pessoas uma por linha à esquerda e «Quem se parece mais»
   à direita — as duas colunas à mesma altura, e cada uma desliza —, e em baixo os três
   cartões alinhados. */
.reports-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-sm) var(--s-lg);
  padding: var(--s-sm) var(--s-md); margin-bottom: var(--s-lg);
  background: var(--warm-white); border: 1px solid var(--line); border-radius: var(--r-md);
}
.reports-strip .entry__label { margin: 0; }
.reports-strip__item { display: inline-flex; align-items: center; gap: var(--s-sm); font-size: .92rem; color: var(--dark); }
.reports-strip__date { color: var(--text-light); font-size: .85rem; }
.reports-strip__note { flex-basis: 100%; margin: 0; font-size: .85rem; color: var(--text-light); }

.family-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-md); margin-bottom: var(--s-md); }
.family-bar .entry__label { margin: 0; }
.family-bar__count { color: var(--text-light); font-weight: 400; letter-spacing: 0; text-transform: none; }

/* Acrescentar alguém: fechado, é só o botão; aberto, uma caixa por baixo dele. */
.add-person { position: relative; }
.add-person > summary { list-style: none; cursor: pointer; white-space: nowrap; }
.add-person > summary::-webkit-details-marker { display: none; }
.add-person__panel {
  position: absolute; right: 0; top: calc(100% + var(--s-xs)); z-index: 20; width: min(24rem, calc(100vw - 2 * var(--s-md)));
  background: var(--warm-white); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-md); padding: var(--s-md);
}
.add-person__panel .field { margin-bottom: var(--s-sm); }
/* Sem ninguém guardado, a caixa abre sozinha: ocupa o seu lugar, em vez de ficar por cima do rodapé. */
.family-bar--empty { align-items: flex-start; }
.add-person--first .add-person__panel { position: static; margin-top: var(--s-xs); }

/* Filtrar «Quem está guardado» — a mesma caixa do «Acrescentar alguém», mais larga, com os
   filtros a duas colunas. O botão é lavanda, para não se confundir com o de acrescentar. */
.family-bar__actions { display: flex; gap: var(--s-sm); align-items: center; }
.filter-box__btn { background: var(--warm-white); border-color: var(--lavender); color: var(--lavender-dark); }
.filter-box__btn:hover { background: var(--lavender-pale); }
.filter-box__n {
  display: inline-grid; place-items: center; min-width: 1.3rem; height: 1.3rem; border-radius: var(--r-full);
  background: var(--lavender); color: var(--warm-white); font-size: .75rem;
}
.filter-box__panel { width: min(34rem, calc(100vw - 2 * var(--s-md))); }
.filter-box__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-xs) var(--s-md); }
.filter-box__grid .field { margin: 0; }
.filter-box__foot {
  display: flex; justify-content: space-between; align-items: center; margin-top: var(--s-md);
  padding-top: var(--s-sm); border-top: 1px solid var(--line); font-size: .88rem; color: var(--text-light);
}
.filter-box__foot strong { color: var(--dark); }
.filter-box__foot a { color: var(--rose-dark); }

.active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0 0 var(--s-sm); font-size: .85rem; }
.active-filters__chip {
  background: var(--lavender-pale); color: var(--lavender-dark); border: 1px solid var(--lavender);
  border-radius: var(--r-full); padding: .15rem .6rem; text-decoration: none;
}
.active-filters__chip span { margin-left: .3rem; opacity: .7; }
.active-filters__chip:hover { background: var(--lavender-light); }
.active-filters__clear { color: var(--rose-dark); margin-left: .3rem; }
.active-filters--inside { margin: var(--s-xs) 0 0; font-size: .78rem; }
/* A lista mais estreita e os parecidos mais largos (pedido da Tânia a 26/09/2026). */
.family-split { align-items: stretch; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.people-list {
  list-style: none; margin: 0; padding: 0; max-height: 35rem; overflow-y: auto;
  background: var(--warm-white); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.people-list__row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-sm);
  padding: .55rem var(--s-md); border-bottom: 1px solid var(--line);
}
.people-list__row:last-child { border-bottom: 0; }
.people-list__name { font-weight: 700; color: var(--dark); margin-right: var(--s-xs); }
.people-list__who .tag { font-size: .7rem; padding: .1rem .5rem; vertical-align: middle; }
.people-list__meta { font-size: .8rem; color: var(--text-light); }
.people-list__matches { margin-top: .15rem; }
.people-list__actions { display: flex; gap: var(--s-xs); align-items: center; }
.people-list__actions form { margin: 0; display: flex; }
.people-list__actions .btn { padding: .3rem .8rem; font-size: .8rem; line-height: 1.2; }

.likeness-card { margin: 0; max-height: 35rem; overflow-y: auto; }
.likeness-card .likeness__row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who percent" "bar bar" "why why"; }
.likeness-card .likeness__who { grid-area: who; }
.likeness-card .likeness__bar { grid-area: bar; }
.likeness-card .likeness__percent { grid-area: percent; }
.likeness-card .likeness__why { grid-area: why; grid-column: 1 / -1; }

/* Os três cartões de baixo, lado a lado e à mesma altura, com os botões todos no fundo. */
.panel-cards { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--s-lg); margin-top: var(--s-xl); align-items: stretch; }
.panel-cards__card { display: flex; flex-direction: column; margin: 0; }
.panel-cards__form { display: flex; flex-direction: column; flex: 1; }
.panel-cards__end { margin: auto 0 0; padding-top: var(--s-md); display: flex; gap: var(--s-xs); align-items: center; flex-wrap: nowrap; }
.panel-cards__end .btn { white-space: nowrap; line-height: 1.2; }
.panel-cards .field-row { margin: 0; }

.mini-pick { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: var(--s-sm); }
.mini-pick__item {
  display: inline-flex; align-items: center; gap: .3rem; cursor: pointer; font-size: .82rem; color: var(--dark);
  border: 1px solid var(--line); border-radius: var(--r-full); padding: .15rem .65rem; text-decoration: none;
}
.mini-pick__item input { accent-color: var(--rose-dark); margin: 0; }
.mini-pick__item:has(input:checked) { border-color: var(--rose); background: var(--rose-pale); }
.mini-pick__more { color: var(--text-light); }
/* ── O céu (/conta/ceu) ───────────────────────────────────── */
/* Opção A do esboço, aceite pela Tânia a 27/09/2026: o gráfico com a coluna dos treze
   planetas, e ao lado o que se ganha (a vermelho) e o que está no ar. O js/ceu-grafico.js pinta
   o gráfico com as cores --c-ceu e --c-ganho*. */
.sky-page { padding-top: var(--s-xl); }
.sky-page__head { margin-bottom: var(--s-md); }
.sky-page__eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; font-weight: 700; color: var(--rose-dark); margin: 0; }
.sky-page__title { font-family: var(--font-serif); font-size: clamp(1.5rem, 3.5vw, 2rem); color: var(--dark); margin: .2rem 0 0; }
.sky-page__time { font-size: .85rem; color: var(--text-light); margin: .15rem 0 0; }
.sky-page__weeks { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-xs); margin: 0 0 var(--s-md); }
/* Ir para um dia escolhido, na mesma linha das setas (29/09/2026). */
.sky-page__date { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-xs); margin-left: auto; }
.sky-page__date .field__label { margin: 0; }
.sky-page__date .field__input { width: auto; }
.sky-page__pick { margin: 0 0 var(--s-lg); }
/* Dois gráficos lado a lado (o céu | a pessoa), e por baixo o que ganha e o que está no ar. */
.sky-page__charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-lg); align-items: stretch; }
.sky-page__charts--one { grid-template-columns: minmax(0, 1fr); max-width: 44rem; }
.sky-page__chart { margin: 0; }
.sky-page__caption { text-align: center; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--lavender-dark); margin: 0 0 var(--s-sm); }
.sky-page__caption--person { color: var(--dark); }
.sky-page__below { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-lg); align-items: start; margin-top: var(--s-lg); }
.sky-page__below .card { margin: 0; }

.sky-chart { margin: 0; display: flex; gap: var(--s-md); align-items: flex-start; }
.sky-chart__graph { display: flex; justify-content: center; min-width: 0; flex: 1; }
.sky-chart__side { flex: none; }
.sky-chart__title--person { color: var(--dark); }
/* As portas da pessoa, à esquerda: Desenho (rosa), planeta, Personalidade (escuro). */
.sky-chart__mine { list-style: none; margin: 0; padding: 0; font-size: .82rem; }
.sky-chart__mine li { display: grid; grid-template-columns: 2.4rem 1.3rem 2.4rem; align-items: center; gap: .15rem; padding: .22rem 0; }
.sky-chart__mine li + li { border-top: 1px solid var(--line); }
.sky-chart__design { color: var(--rose-dark); font-weight: 700; text-align: right; }
.sky-chart__personality { color: var(--dark); font-weight: 700; }
.sky-chart__mine .sky-chart__symbol { text-align: center; color: var(--text-light); }
.sky-chart__graph svg { max-width: 100%; }
.sky-chart__title { font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--lavender-dark); margin: 0 0 .3rem; text-align: center; }
.sky-chart__planets { list-style: none; margin: 0; padding: 0; min-width: 7.5rem; background: var(--c-ceu); border-radius: var(--r-sm); overflow: hidden; color: var(--warm-white); }
.sky-chart__planets li { display: flex; justify-content: space-between; gap: var(--s-sm); padding: .22rem .6rem; font-size: .82rem; }
.sky-chart__planets li + li { border-top: 1px solid rgba(255, 255, 255, .35); }
.sky-chart__planets li.is-fast { background: var(--c-ceu-forte); font-weight: 700; }
.sky-chart__planets li.is-gain { box-shadow: inset 4px 0 0 var(--c-ganho); }
.sky-chart__symbol { font-family: var(--font-symbols); }

.sky-gain { border: 2px solid var(--c-ganho); background: var(--c-ganho-fundo); }
.sky-gain__title, .sky-air__title { text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; font-family: var(--font-sans); margin: 0 0 var(--s-sm); }
.sky-gain__title { color: var(--c-ganho-letra); }
.sky-air__title { color: var(--rose-dark); }
.sky-gain__list, .sky-air__list, .sky-who__list { list-style: none; margin: 0; padding: 0; }
.sky-gain__list > li { padding: .45rem 0; border-bottom: 1px dashed var(--c-ganho-claro); }
.sky-gain__list > li:last-child { border-bottom: 0; }
.sky-gain__summary { display: block; cursor: pointer; list-style: none; }
.sky-gain__summary::-webkit-details-marker { display: none; }
.sky-gain__name { display: block; font-weight: 700; color: var(--dark); }
.sky-gain__item .sky-gain__name::before { content: ""; display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; background: var(--c-ganho); margin-right: .45rem; }
.sky-gain__more .sky-gain__name::after { content: " ▾"; color: var(--text-light); font-size: .75rem; font-weight: 400; }
.sky-gain__more[open] .sky-gain__name::after { content: " ▴"; }
.sky-gain__from { display: block; font-size: .88rem; color: var(--text); }
/* Até quando o canal fica inteiro, à direita do nome. */
.sky-gain__until { float: right; margin-left: var(--s-sm); font-size: .8rem; color: var(--text-light); white-space: nowrap; }
.sky-gain__text { margin-top: var(--s-sm); padding-left: 1.15rem; font-size: .92rem; }
.sky-gain__brief { font-weight: 700; color: var(--dark); }
.sky-gain__none { color: var(--text-light); font-style: italic; }

.sky-air__item { padding: .55rem 0; border-bottom: 1px solid var(--line); }
.sky-air__item:last-child { border-bottom: 0; }
.sky-air__item--moon { opacity: .75; }
.sky-air__more > summary { cursor: pointer; list-style: none; }
.sky-air__more > summary::-webkit-details-marker { display: none; }
.sky-air__where::after { content: " ▾"; color: var(--text-light); font-size: .75rem; }
.sky-air__more[open] .sky-air__where::after { content: " ▴"; }
.sky-air__line > .sky-air__where::after { content: none; }
.sky-air__more > summary.sky-air__line > .sky-air__where::after { content: " ▾"; }
.sky-air__body { margin: .25rem 0 var(--s-sm) 1.6rem; font-size: .9rem; }
.sky-air__body .sky-air__text { margin: 0 0 var(--s-sm); }
.sky-air__label { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-light); margin: var(--s-sm) 0 .2rem; }
.sky-air__brief { margin: 0; color: var(--text); }
.sky-air__line { display: flex; gap: var(--s-sm); align-items: baseline; font-size: .92rem; color: var(--dark); }
.sky-air__symbol { color: var(--lavender-dark); width: 1.1rem; text-align: center; font-family: var(--font-symbols); }
.sky-air__until { margin-left: auto; color: var(--text-light); font-size: .8rem; white-space: nowrap; }
.sky-air__text { margin: .25rem 0 0 1.6rem; font-size: .88rem; color: var(--text); }

.sky-who__item { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--s-sm); padding: .4rem 0; border-bottom: 1px solid var(--line); font-size: .88rem; }
.sky-who__item:last-child { border-bottom: 0; }
.sky-who__name { font-weight: 700; color: var(--dark); text-decoration: none; }
.sky-who__gain { color: var(--c-ganho-letra); }

@media (max-width: 860px) {
  .sky-page__charts, .sky-page__below { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .sky-chart { flex-wrap: wrap; justify-content: center; }
  .sky-chart__graph { order: -1; flex-basis: 100%; }
  .sky-chart__graph svg { height: 400px; }
  /* No telemóvel, as portas da pessoa e o céu ficam lado a lado, por baixo do gráfico. */
  .sky-chart__side { flex: 1 1 0; min-width: 0; }
  .sky-chart__planets { min-width: 0; }
  .sky-chart__planets li { padding: .22rem .4rem; font-size: .76rem; }
  .sky-chart__mine li { grid-template-columns: 1fr 1.1rem 1fr; font-size: .76rem; }
  .sky-who__item { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
/* ── Quem se parece mais ──────────────────────────────────── */
/* No painel (opção A do esboço): nome e grupos, barra, percentagem e, por baixo, o que
   têm em comum. No telemóvel, a barra desce para baixo do nome. */
.likeness__pick { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-xs) var(--s-sm); margin: var(--s-sm) 0 0; }
.likeness__pick .field__label { margin: 0; }
.likeness__pick .field__input { width: auto; min-width: 10rem; }
/* A mesma caixa no topo do formulário do /grafico, para mudar de pessoa: ocupa a largura
   do cartão e fica separada do formulário por uma linha. */
.chart-pick { margin: 0 0 var(--s-lg); padding-bottom: var(--s-lg); border-bottom: 1px solid var(--line); }
.chart-pick .field__input { flex: 1; }
.likeness { list-style: none; margin: var(--s-md) 0 0; padding: 0; display: grid; gap: .4rem; }
.likeness__row {
  display: grid; grid-template-columns: 9rem minmax(0, 1fr) 7rem; gap: var(--s-xs) var(--s-md); align-items: center;
  padding: .55rem .8rem; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--warm-white);
}
.likeness__who { color: var(--dark); text-decoration: none; min-width: 0; overflow-wrap: break-word; }
.likeness__who:hover strong { text-decoration: underline; }
.likeness__who small { display: block; font-size: .78rem; color: var(--text-light); }
.likeness__bar { height: .55rem; border-radius: var(--r-full); background: var(--lavender-pale); overflow: hidden; }
.likeness__bar i { display: block; height: 100%; background: var(--lavender); }
.likeness__percent { text-align: right; font-size: .9rem; color: var(--text); }

.likeness__why { grid-column: 2 / -1; }
.likeness__pill {
  display: inline-block; font-size: .78rem; padding: .1rem .55rem; margin: .1rem .15rem 0 0;
  border-radius: var(--r-full); background: var(--sage-pale); border: 1px solid var(--sage-light); color: var(--text);
}

/* ── Os circuitos ──────────────────────────────────────────── */
/* O cartão no /grafico (06/10/2026): à esquerda as três linhas — nome, barra com um segmento
   por canal, e quantos —, à direita «O que mais pesa» e o resumo; por baixo, as fichas. No
   telemóvel, tudo numa coluna. Cada circuito leva a sua cor por --circuit. */
.circuits {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--s-md) var(--s-xl);
  align-items: start; margin-bottom: var(--s-sm);
}
.circuits__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-sm); }
.circuits__row { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) 6rem; gap: var(--s-sm); align-items: center; }
.circuits__row--individual, .circuits__brief--individual, .circuit-tag--individual, .concept--individual {
  --circuit: var(--c-individual); --circuit-pale: var(--c-individual-pale); --circuit-text: var(--c-individual-text);
}
.circuits__row--tribal, .circuits__brief--tribal, .circuit-tag--tribal, .concept--tribal {
  --circuit: var(--c-tribal); --circuit-pale: var(--c-tribal-pale); --circuit-text: var(--c-tribal-text);
}
.circuits__row--coletivo, .circuits__brief--coletivo, .circuit-tag--coletivo, .concept--coletivo {
  --circuit: var(--c-coletivo); --circuit-pale: var(--c-coletivo-pale); --circuit-text: var(--c-coletivo-text);
}
.circuits__name { font-weight: 700; color: var(--dark); font-size: .93rem; }
.circuits__bar {
  display: flex; gap: 2px; align-items: center; height: .7rem; border-radius: var(--r-full); overflow: hidden;
  background: var(--cream); border: 1px solid var(--line);
}
.circuits__bar i { flex: 0 1 9%; height: 100%; background: var(--circuit); }
/* As portas, na mesma barra, depois dos canais: pontinhos mais claros e mais baixos. */
.circuits__bar .circuits__gate { flex-basis: 4%; height: 55%; border-radius: 2px; opacity: .55; }
.circuits__n { font-size: .85rem; color: var(--text-light); text-align: right; white-space: nowrap; line-height: 1.3; }
.circuits__n small { display: block; font-size: .75rem; }
.circuits__key { display: flex; gap: var(--s-md); margin: var(--s-sm) 0 0; font-size: .82rem; color: var(--text-light); }
.circuits__key span { display: inline-flex; align-items: center; gap: .35rem; }
.circuits__swatch { display: inline-block; width: .9rem; height: .55rem; border-radius: 2px; background: var(--c-individual); }
.circuits__swatch--gate { height: .3rem; opacity: .55; }
.circuits__row--none .circuits__name { font-weight: 400; color: var(--text-light); }
.circuits__row--none .circuits__n { opacity: .7; }
.circuits__lead { font-family: var(--font-serif); color: var(--dark); margin: 0; }
.circuits__brief {
  margin-top: var(--s-sm); padding: var(--s-sm) var(--s-md); font-size: .93rem;
  background: var(--circuit-pale, var(--lavender-pale)); border: 1px solid var(--circuit, var(--lavender-light));
  border-radius: var(--r-md);
}
.circuits__brief p + p { margin-top: var(--s-sm); }
.circuits__sheets { grid-column: 1 / -1; border-top: 1px solid var(--line); }

/* O nome de um circuito numa etiqueta pequena, com a cor dele: nos canais do gráfico, em «O que
   mais pesa», e no painel («Tribal · 1 de 3 canais»). */
.circuit-tag {
  display: inline-block; font-family: var(--font-sans); font-size: .72rem; font-weight: 700; line-height: 1.5;
  padding: .05rem .55rem; border-radius: var(--r-full);
  background: var(--circuit-pale); border: 1px solid var(--circuit); color: var(--circuit-text);
}
/* Sem circuito — «sem canais» —, a etiqueta fica neutra. */
.circuit-tag:not([class*="circuit-tag--"]) { background: var(--cream); border-color: var(--line); color: var(--text-light); font-weight: 400; }

/* A mistura dos três circuitos de uma pessoa, numa barrinha ao lado do nome (painel, com uma
   ordem escolhida). Cada parte cresce com o número de canais. */
.circuit-mix { display: inline-flex; gap: 2px; width: 4.5rem; height: .4rem; border-radius: var(--r-full); overflow: hidden; vertical-align: middle; }
.circuit-mix__part { flex: 1 1 0; }
.circuit-mix__part--individual { background: var(--c-individual); }
.circuit-mix__part--tribal { background: var(--c-tribal); }
.circuit-mix__part--coletivo { background: var(--c-coletivo); }

/* «Ordenar», ao lado de «Filtrar»: a mesma caixa, estreita, com uma linha por ordem. */
.order-box__panel { width: min(14rem, calc(100vw - 2 * var(--s-md))); }
.order-box__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.order-box__item {
  display: flex; align-items: center; gap: var(--s-sm); padding: .3rem var(--s-sm);
  border-radius: var(--r-sm); color: var(--text); font-size: .93rem; text-decoration: none;
}
.order-box__item:hover { background: var(--lavender-pale); color: var(--dark); }
.order-box__item--on { background: var(--lavender-pale); color: var(--dark); font-weight: 700; }
.order-box__dot { width: .6rem; height: .6rem; border-radius: var(--r-full); border: 1px solid var(--text-light); flex: none; }
.order-box__dot--individual { background: var(--c-individual); border-color: var(--c-individual); }
.order-box__dot--tribal { background: var(--c-tribal); border-color: var(--c-tribal); }
.order-box__dot--coletivo { background: var(--c-coletivo); border-color: var(--c-coletivo); }

/* Na lista ordenada: a linha «Sem canais tribais», e quem fica por baixo dela, mais clarinho. */
.people-list__divider {
  padding: .3rem var(--s-md); background: var(--cream); border-bottom: 1px solid var(--line);
  font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-light);
}
.people-list__row--faded .people-list__who { opacity: .6; }

/* O canal com a cor do circuito na borda de cima. */
.concept--individual, .concept--tribal, .concept--coletivo { border-top-color: var(--circuit); }

@media (max-width: 640px) {
  .circuits { grid-template-columns: minmax(0, 1fr); }
}

/* ── Comparar ──────────────────────────────────────────────── */
/* De duas a oito pessoas, uma coluna cada, uma linha por peça (/conta/comparar). A linha é
   um <details>: abre o texto de todos ao mesmo tempo. --people vem da página. Até quatro, a
   tabela cabe no ecrã; de cinco a oito, desliza para o lado (.compare--wide). */
.compare { --people: 2; display: grid; gap: .35rem; margin-top: var(--s-md); }
.compare__group { font-family: var(--font-serif); font-size: 1.15rem; color: var(--dark); margin: var(--s-lg) 0 var(--s-xs); }
.compare__count { font-family: var(--font-sans); font-size: .85rem; color: var(--text-light); font-weight: 400; }
.compare__rows { display: grid; gap: .35rem; }
/* O primeiro grupo logo a seguir aos nomes, sem o espaço grande dos outros. */
.compare__head + .compare__group { margin-top: var(--s-xs); }

.compare__head, .compare__summary, .compare__texts {
  display: grid; gap: var(--s-md); align-items: start;
  grid-template-columns: 8rem repeat(var(--people), minmax(0, 1fr)) 2rem;
}
.compare__head {
  padding: 0 var(--s-md); font-size: .8rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-light);
}

/* --row-bg é o fundo da linha, para o nome da peça o levar quando fica preso à esquerda. */
.compare__row { --row-bg: var(--warm-white); border-radius: var(--r-md); background: var(--row-bg); border: 1px solid var(--line); }
.compare__row--diff { --row-bg: var(--peach-pale); border-color: var(--peach); }
.compare__row--same { --row-bg: var(--sage-pale); border-color: var(--sage); }
.compare__summary { list-style: none; padding: .6rem var(--s-md); color: var(--dark); }
details > .compare__summary { cursor: pointer; }
.compare__summary::-webkit-details-marker { display: none; }
.compare__label { font-weight: 700; font-size: .92rem; }
details > .compare__summary .compare__label::after { content: " ▾"; color: var(--text-light); font-weight: 400; font-size: .8em; }
details[open] > .compare__summary .compare__label::after { content: " ▴"; }
.compare__cell { min-width: 0; overflow-wrap: break-word; hyphens: auto; }
.compare__cell .activation-chips { margin: 0; }
.compare__cell .activation-chip { border-radius: var(--r-sm); line-height: 1.35; }
.compare__detail { color: var(--rose-dark); white-space: nowrap; }
.compare__extra { display: block; font-size: .8rem; color: var(--text-light); }

/* Os iguais levam a mesma cor, uma por grupo, para se verem de relance: lilás, pêssego,
   rosa, sage (escolha da Tânia, 25/09/2026 — a opção B do esboço, e sage para o 4.º grupo,
   que só aparece com sete ou oito pessoas). A linha toda igual é a sage, acima.
   A cor sai da casa por uma sombra e não por margens negativas: nada se mexe de lugar. */
.compare__cell--g1 { --group: var(--lavender-light); }
.compare__cell--g2 { --group: var(--peach); }
.compare__cell--g3 { --group: var(--rose-light); }
.compare__cell--g4 { --group: var(--sage-light); }
[class*="compare__cell--g"] { background: var(--group); border-radius: var(--r-sm); box-shadow: 0 0 0 .3rem var(--group); }
.compare__none { color: var(--text-light); }
.compare__arrow { color: var(--rose-dark); font-weight: 700; margin-right: var(--s-xs); }
.compare__mark { text-align: center; font-weight: 700; color: var(--text-light); }
.compare__row--diff .compare__mark { color: var(--rose-dark); }

.compare__texts { padding: 0 var(--s-md) var(--s-md); }
.compare__texts::before { content: ""; }            /* a casa vazia debaixo do nome da peça */
.compare__text { font-size: .92rem; border-left: 3px solid var(--lavender-light); padding-left: var(--s-sm); min-width: 0; }
.compare__text .entry { padding: var(--s-sm) 0; }
/* O Resumo, e o texto de hoje dobrado por baixo dele (opção B do esboço). */
.compare__brief { padding: var(--s-sm) 0 0; color: var(--dark); }
.compare__brief p { margin: 0 0 var(--s-xs); }
.compare__full > summary { cursor: pointer; font-size: .85rem; color: var(--rose-dark); margin: var(--s-xs) 0; }
.compare__who { display: none; font-weight: 700; color: var(--dark); }

.compare__fold > summary { cursor: pointer; list-style: none; }
.compare__fold > summary::-webkit-details-marker { display: none; }
.compare__fold > summary .compare__group::after { content: " ▾"; font-size: .7em; color: var(--text-light); }
.compare__fold[open] > summary .compare__group::after { content: " ▴"; }

/* Tudo · Só o diferente · Só o igual — três rádios escondidos, irmãos da caixa da tabela. */
.compare-filter {
  display: inline-flex; flex-wrap: wrap; gap: .3rem; padding: .25rem;
  background: var(--cream); border: 1px solid var(--line); border-radius: var(--r-full);
}
.compare-filter__btn { padding: .35rem .9rem; border-radius: var(--r-full); font-size: .9rem; color: var(--text-light); cursor: pointer; }
#ver-tudo:checked ~ .compare-filter label[for="ver-tudo"],
#ver-diferente:checked ~ .compare-filter label[for="ver-diferente"],
#ver-igual:checked ~ .compare-filter label[for="ver-igual"] {
  background: var(--warm-white); color: var(--dark); font-weight: 700; box-shadow: var(--shadow-sm);
}
#ver-diferente:checked ~ .compare-wrap .compare__row:not(.compare__row--diff) { display: none; }
/* «Só o igual» mostra as linhas todas iguais e as que têm algum grupo de iguais. */
#ver-igual:checked ~ .compare-wrap .compare__row--diff:not(.compare__row--grouped) { display: none; }

/* De cinco a oito: a tabela desliza para o lado, com o nome da peça preso à esquerda, e os
   textos abrem um por baixo do outro, com o nome de cada pessoa — lado a lado, oito colunas
   de texto não se liam. */
.compare-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare--wide { min-width: calc(8rem + var(--people) * 7.5rem + 2rem); }
.compare--wide .compare__label { position: sticky; left: 0; z-index: 1; background: var(--row-bg); }
.compare--wide .compare__texts { grid-template-columns: minmax(0, 1fr); position: sticky; left: 0; max-width: min(46rem, 85vw); }
.compare--wide .compare__texts::before { display: none; }
.compare--wide .compare__who { display: block; }

/* Os gráficos de cima: lado a lado até quatro; de cinco a oito, mais pequenos, quatro por
   linha no computador e dois no telemóvel. */
/* «Ver gráficos»: os gráficos começam escondidos. */
.compare-charts-fold { margin-top: var(--s-md); }
.compare-charts-fold .compare__group { margin: 0; }
.compare-charts-fold .compare-charts { margin-top: var(--s-md); }
.compare-charts { display: grid; gap: var(--s-lg); grid-template-columns: repeat(var(--people), minmax(0, 1fr)); }
.compare-charts--small { gap: var(--s-md); grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* A escolha das pessoas: caixas de marcar, e o contador conta as marcadas sem JavaScript. */
.compare-pick { counter-reset: escolhidas; border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: var(--s-sm); grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); }
.compare-pick__item {
  display: flex; align-items: center; gap: var(--s-sm); cursor: pointer;
  padding: .55rem .8rem; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--warm-white); font-size: .92rem; color: var(--dark);
}
.compare-pick__item input { flex: 0 0 auto; accent-color: var(--rose-dark); }
.compare-pick__item input:checked { counter-increment: escolhidas; }
.compare-pick__item:has(input:checked) { border-color: var(--rose); background: var(--rose-pale); }
.compare-pick__count { grid-column: 1 / -1; font-size: .85rem; color: var(--text-light); margin: 0; }
.compare-pick__count::before { content: counter(escolhidas) " escolhidas · "; }

/* No telemóvel o nome da peça sobe; as pessoas ficam lado a lado por baixo, e os textos,
   quando abrem, um por baixo do outro, com o nome de cada uma. */
@media (max-width: 640px) {
  /* As caixas do filtro e do acrescentar ocupam a largura toda, por baixo dos botões. */
  .family-bar { flex-wrap: wrap; }
  /* Com três botões — Filtrar, Ordenar, Acrescentar —, o último desce em vez de sair do ecrã. */
  .family-bar__actions { position: relative; width: 100%; justify-content: flex-start; flex-wrap: wrap; }
  .family-bar__actions .add-person { position: static; }
  .family-bar__actions .add-person__panel { left: 0; right: 0; width: auto; }
  .filter-box__grid { grid-template-columns: minmax(0, 1fr); }
  .panel-cards { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); }
  .family-split { grid-template-columns: minmax(0, 1fr); }
  .people-list__row { grid-template-columns: minmax(0, 1fr); }
  .likeness__row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who percent" "bar bar" "why why"; }
  .likeness__who { grid-area: who; }
  .likeness__bar { grid-area: bar; }
  .likeness__percent { grid-area: percent; }
  .likeness__why { grid-area: why; grid-column: 1 / -1; }
  .compare__head, .compare__summary { grid-template-columns: repeat(var(--people), minmax(0, 1fr)); gap: var(--s-xs) var(--s-sm); }
  .compare__head span:first-child, .compare__head span:last-child { display: none; }
  .compare__label { grid-column: 1 / -1; }
  .compare__mark { display: none; }
  .compare__row--diff .compare__label::before { content: "≠ "; color: var(--rose-dark); }
  .compare__summary { padding: .6rem var(--s-sm); }
  .compare__cell { font-size: .82rem; }
  .compare__arrow { margin-right: .1rem; }
  .compare__extra { display: none; }
  [class*="compare__cell--g"] { box-shadow: 0 0 0 .15rem var(--group); }
  .compare--wide { min-width: calc(var(--people) * 6rem); }
  .compare--wide .compare__label { justify-self: start; padding-right: var(--s-sm); }
  .compare-charts { grid-template-columns: minmax(0, 1fr); }
  .compare-charts--small { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .compare-pick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .compare__cell .activation-chip { font-size: .72rem; padding: .1rem .35rem; }
  .compare__texts { grid-template-columns: minmax(0, 1fr); gap: var(--s-md); }
  .compare__texts::before { display: none; }
  .compare__who { display: block; }
}

/* ── Como acompanhar (28/10/2026) ────────────────────── */

/* A grelha do /admin: uma linha por situação, uma coluna por tipo. */
.situations { overflow-x: auto; }
.situations__table { border-collapse: collapse; min-width: 720px; width: 100%; font-size: .9rem; }
.situations__table th, .situations__table td { padding: .45rem .4rem; text-align: center; border-bottom: 1px solid var(--line); }
.situations__table th { font-size: .78rem; color: var(--text-light); font-weight: 700; }
.situations__table .situations__name { text-align: left; }
.situations__order { white-space: nowrap; width: 1%; }
.situations__order form { display: inline; }
.situations__row--hidden .situations__name a { color: var(--text-light); }
.situations__note { display: block; font-size: .74rem; color: var(--text-light); }
.situations__same { color: var(--text-light); font-size: .82rem; }
.situations__arrow, .situations__switch {
  background: none; border: 1px solid var(--line); border-radius: var(--r-sm);
  font: inherit; line-height: 1; padding: .3rem .45rem; cursor: pointer; color: var(--text);
}
.situations__arrow:disabled { opacity: .3; cursor: default; }
.situations__switch { font-size: 1.05rem; border-color: transparent; }
.situations__switch[aria-pressed="true"] { color: var(--sage-text); }
.situations__switch[aria-pressed="false"] { color: var(--text-light); }

/* A página de uma criança: o cabeçalho, a regra, os cartões e o que é igual para todas. */
.leading { max-width: 760px; margin: 0 auto; }
.leading__too-old { font-size: 1.1rem; color: var(--dark); margin-bottom: var(--s-md); }
.leading__result { scroll-margin-top: var(--jump-offset); }
.leading__child { display: flex; gap: var(--s-md); align-items: center; margin-bottom: var(--s-lg); }
.leading__icon {
  width: 64px; height: 64px; border-radius: 50%; background: var(--peach-pale);
  display: grid; place-items: center; font-size: 2rem; flex-shrink: 0;
}
.leading__name { font-size: 1.7rem; margin: 0; overflow-wrap: anywhere; }
.leading__type { color: var(--rose-dark); font-weight: 700; font-size: .95rem; margin: 0; }

.leading-card {
  background: var(--warm-white); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm); margin-bottom: var(--s-lg); overflow: hidden;
}
.leading-card__head { display: flex; align-items: center; gap: var(--s-sm); padding: var(--s-lg) var(--s-lg) var(--s-md); }
.leading-card__num {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 700; font-size: .9rem; color: var(--warm-white); background: var(--rose); flex-shrink: 0;
}
.leading-card__title { font-size: 1.3rem; margin: 0; }
.leading-card__label {
  display: block; color: var(--text); font-size: .72rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
}
.leading-card__how { padding: 0 var(--s-lg) var(--s-lg); }
.leading-card__how-label {
  font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--rose-dark); margin-bottom: var(--s-sm);
}
.leading-card__say { display: grid; gap: var(--s-sm); margin-bottom: var(--s-md); }
.leading-card__line { display: flex; gap: .6rem; align-items: flex-start; padding: .7rem .9rem; border-radius: var(--r-sm); }
.leading-card__line p { margin: 0; }
.leading-card__line--yes { background: var(--sage-pale); }
.leading-card__line--no { background: var(--cream); color: var(--text-light); }
.leading-card__mark {
  font-weight: 700; flex-shrink: 0; width: 6.4em; font-size: .8rem;
  text-transform: uppercase; letter-spacing: .05em; padding-top: .15rem;
}
.leading-card__line--yes .leading-card__mark { color: var(--sage-text); }
.leading-card__line--no .leading-card__mark { color: var(--rose-dark); }
.leading-card__why { font-size: .95rem; }
.leading-card__why p { margin: 0; }
.leading-card__why p + p { margin-top: var(--s-sm); }
.leading-card__warn { margin-top: var(--s-sm); font-size: .9rem; background: var(--rose-pale); border-radius: var(--r-sm); padding: .55rem .8rem; }
.leading-card__warn p { margin: 0; }


@media (max-width: 560px) {
  .leading-card__line { flex-direction: column; gap: .2rem; }
  .leading-card__mark { width: auto; }
  .leading-card__head, .leading-card__how { padding-left: var(--s-md); padding-right: var(--s-md); }
}