/* =========================================================================
   NHG Core — a SHELL AUTENTICADA (200, 210, 220, 230, 240) e a 250.
   Fase 3 do SPEC_CORE_09. Depende de `nhg-shell.css`, que TEM DE VIR PRIMEIRO
   na lista de File URLs: é ele que traz os tokens do site, as quatro camadas
   de fundo, o tema e o vidro. Este ficheiro não redefine nada disso — veste
   com esses tokens a shell que o `nhg-core.js` desenha.

   O QUE MUDOU, E PORQUÊ. Até 2026-08-20 esta shell tinha paleta própria
   (navy #10233f, azul #1769aa, superfícies opacas) e o site tinha outra. Quem
   entrava pelo registo — já convertido na Fase 1 — e caía no painel via login
   atravessava DUAS linguagens visuais dentro do mesmo produto.

   DECISÃO DO PO, 2026-08-20, que SOBREPÕE o §4 do SPEC_CORE_09: o canvas fica
   VIVO também aqui, igual às portas de entrada. O plano previa estático ou
   desligado — "constelação a mexer por trás de uma tabela de membros é ruído
   numa ferramenta de trabalho". O pedido foi explícito: mesmo aspeto. Fica
   registado que é escolha e não esquecimento, e onde se inverte se um dia
   incomodar: basta o `nhg-shell.js` não chamar a constelação nesta superfície.

   OS `--core-*` SOBREVIVEM COMO ALIASES, de propósito. O `nhg-core.js` e as
   regras abaixo referem-nos em dezenas de sítios; reescrevê-los todos era
   churn sem ganho. Passam a APONTAR para os tokens do site, portanto o tema
   escuro/claro passa a ser resolvido no `nhg-shell.css` e num sítio só — que
   é o que faltava: este ficheiro tinha um `@media (prefers-color-scheme)`
   próprio e IGNORAVA o `data-theme` que a ponte escreve. Quem escolhesse
   escuro no site com o sistema em claro via as portas escuras e o painel
   claro, dentro da mesma sessão.

   REGRA DA FRENTE, herdada e não opcional: nenhum elemento com
   `backdrop-filter` recebe `transform`. No iOS Safari fica invisível (medido
   no Kanban do HumanPlanner, 2026-06-27). A elevação faz-se com `box-shadow`.
   ========================================================================= */

/* VALORES DE RECURSO EM CADA `var()` DE TOKEN DO SITE, e nao e' zelo a mais.
   Este ficheiro assume que o `nhg-shell.css` ja' carregou -- e' de la' que vem
   `--glass-bg`, `--text-primary`, `--font-sans` e o resto. Se ele faltar, um
   `var()` sem recurso resolve-se para o valor inicial da propriedade: fundos
   transparentes, texto preto de omissao, zero raios. A pagina nao parte, fica
   SEM ASPETO NENHUM -- e em silencio, que e' a familia de defeito que ja'
   custou meio ficheiro de CSS a esta frente.

   Ha' uma janela concreta em que isto acontece: entre publicar os estaticos e
   publicar as seis paginas, elas carregam o `nhg-core.css` novo e ainda nao
   pedem o `nhg-shell.css`. Sao minutos, mas sao os minutos em que alguem pode
   abrir o painel.

   Os valores sao os do MODO CLARO do `nhg-shell.css`, copiados de la'. Nao sao
   um segundo tema: no escuro degradavam para o claro, que e' legivel. Sao a
   rede, e nao o chao.
   ========================================================================= */

:root {
  /* Aliases sobre os tokens do site. A substituição de `var()` dentro de uma
     custom property é resolvida no PONTO DE USO, logo quando o `nhg-shell.css`
     troca `--glass-bg` em `[data-theme="dark"]` estes acompanham sozinhos. */
  --core-surface: var(--glass-bg, rgba(255, 255, 255, 0.18));
  --core-surface-solid: rgba(255, 255, 255, 0.55);
  --core-surface-muted: rgba(255, 255, 255, 0.28);
  --core-text: var(--text-primary, #0f172a);
  --core-text-muted: var(--text-muted, #64748b);
  --core-border: var(--glass-border, rgba(255, 255, 255, 0.60));
  --core-blue: var(--nhg-accent-blue, #0284c7);
  --core-blue-strong: var(--nhg-accent-blue, #0284c7);
  --core-navy: var(--text-primary, #0f172a);
  --core-danger: #b42318;
  --core-success: #19733f;
  --core-focus: var(--nhg-accent-blue, #0284c7);
  --core-radius: var(--radius-lg, 20px);
  --core-shadow: var(--glass-shadow, 0 16px 36px -10px rgba(15, 23, 42, 0.08));
  --core-glass: blur(var(--glass-blur, 20px)) saturate(var(--glass-saturate, 180%));
}

/* O escuro NÃO se repete aqui. Vem todo dos tokens do `nhg-shell.css`, que
   responde às duas coisas — `[data-theme="dark"]` e `prefers-color-scheme`
   sem escolha contrária. Só o que é opacidade sobre vidro é que muda, porque
   branco a 55% sobre fundo escuro é um borrão leitoso. */
[data-theme="dark"] {
  --core-surface-solid: rgba(9, 16, 28, 0.55);
  --core-surface-muted: rgba(148, 163, 184, 0.14);
  --core-danger: #f97066;
  --core-success: #6ce9a6;
}

/* ------------------------------------------------------- a caixa da página

   ÂNCORA EXPLÍCITA, e é a lição da Fase 1. A região que embrulha o
   `#nhg-core-app` sai com `id` gerado (`R888...`), portanto não se lhe pega
   pelo `static_id`. Pega-se pela classe que a página declara em
   `p_region_css_classes => nhg-core-surface`. Sem transparência aqui, o tema
   põe uma caixa branca por cima das quatro camadas e o fundo desaparece. */
.t-Region.nhg-core-surface,
.t-Region.nhg-core-surface > .t-Region-body,
.t-Region.nhg-core-surface .t-Region-bodyWrap {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.core-skip {
  position: fixed;
  inset: 8px auto auto 8px;
  z-index: 1000;
  padding: 8px 12px;
  color: #fff;
  background: var(--nhg-accent-blue, #0284c7);
  border-radius: var(--radius-full, 999px);
  /* `translateY` num elemento SEM backdrop-filter: aqui é seguro, e é a única
     forma de o tirar do ecrã sem o tirar da ordem de tabulação. */
  transform: translateY(-150%);
}

.core-skip:focus { transform: translateY(0); }

/* Navegacao a ESQUERDA (pedido do Vitor, 2026-08-16). O .core-skip nao entra
   na grelha por ser position:fixed, logo nao ocupa celula. Em ecra estreito a
   barra volta ao topo, porque uma coluna lateral num telemovel come metade da
   largura util. */
#nhg-core-app {
  min-height: 100%;
  color: var(--core-text);
  background: transparent;
  font-family: var(--font-sans, 'Plus Jakarta Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  display: grid;
  grid-template-columns: minmax(170px, 210px) 1fr;
  grid-template-areas:
    "header header"
    "nav    status"
    "nav    main";
  align-content: start;
  /* As goteiras passam a existir porque as superfícies passaram a ser cartões
     soltos sobre o fundo. Antes eram painéis encostados com bordas. */
  gap: 4px 20px;
  padding: 8px clamp(12px, 3vw, 32px) 40px;
  width: min(1420px, 100%);
  margin: 0 auto;
}

/* --------------------------------------------------------- o cabeçalho

   Era uma barra navy de largura toda. Sai, pela mesma razão por que saiu a
   barra "NHG Core / Criar a sua conta" da 260 na 2.ª ronda de feedback: uma
   faixa opaca por cima de um fundo que se quer contínuo lê-se como aplicação
   e não como site. O que fica é o título sobre o fundo, como no site. */
.core-header {
  grid-area: header;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 4px 18px;
  color: var(--core-text);
  background: transparent;
}

.core-brand { display: grid; gap: 3px; }

.core-eyebrow {
  color: var(--nhg-accent-blue, #0284c7);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.core-title {
  margin: 0;
  font-family: var(--font-display, 'Outfit', 'Plus Jakarta Sans', system-ui, sans-serif);
  font-size: clamp(1.45rem, 4vw, 2rem);
  font-weight: 700;
  color: var(--text-primary, #0f172a);
}

.core-identity {
  color: var(--text-secondary, #334155);
  font-weight: 600;
}

/* --------------------------------------------------------------- a nav */

.core-nav {
  grid-area: nav;
  align-self: start;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding: 12px 10px;
  background: var(--core-surface);
  backdrop-filter: var(--core-glass);
  -webkit-backdrop-filter: var(--core-glass);
  border: 1px solid var(--core-border);
  border-radius: var(--core-radius);
  box-shadow: var(--core-shadow);
  position: relative;
  overflow: hidden;
}

/* O fio de luz no topo. É o mesmo detalhe que faz as caixas das portas lerem
   como vidro e não como plástico translúcido. */
.core-nav::before,
.core-card::before,
.core-table-wrap::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--glass-refraction, linear-gradient(135deg, rgba(255,255,255,0.65) 0%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0) 100%));
  pointer-events: none;
}

.core-tab,
.core-button {
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: var(--radius-full, 999px);
  padding: 8px 16px;
  font: inherit;
  font-family: var(--font-sans, 'Plus Jakarta Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--transition-smooth, 0.35s cubic-bezier(0.16, 1, 0.3, 1)),
              color var(--transition-smooth, 0.35s cubic-bezier(0.16, 1, 0.3, 1)),
              box-shadow var(--transition-smooth, 0.35s cubic-bezier(0.16, 1, 0.3, 1));
}

.core-tab {
  color: var(--text-secondary, #334155);
  background: transparent;
  text-align: left;
}

.core-tab:hover { color: var(--text-primary, #0f172a); background: var(--core-surface-muted); }

/* `aria-selected` e `aria-current` marcam a mesma coisa em vistas diferentes
   (painel trocado vs. página aberta) e por isso partilham o tratamento. */
.core-tab[aria-selected="true"],
.core-tab[aria-current="page"] {
  color: #fff;
  background: linear-gradient(135deg, var(--nhg-accent-blue, #0284c7), var(--nhg-accent-cyan, #06b6d4));
  border-color: transparent;
  box-shadow: 0 8px 18px -6px var(--nhg-accent-glow, rgba(56, 189, 248, 0.25));
}

.core-tab-home { font-weight: 700; }

/* Foco a AZUL SÓLIDO e não com o `--nhg-accent-glow`, que é rgba(...,0.25) e
   não chega a 3:1 sobre vidro claro. É desvio consciente das portas, do lado
   de ser mais visível e não menos. */
.core-tab:focus-visible,
.core-button:focus-visible,
.core-select:focus-visible,
.core-role-select:focus-visible,
.core-field select:focus-visible,
.core-field input:focus-visible {
  outline: 3px solid var(--core-focus);
  outline-offset: 2px;
}

/* --------------------------------------------------------- o conteúdo */

.core-main { grid-area: main; width: 100%; padding: 4px 0 0; }

.core-section-title {
  margin: 0 0 20px;
  font-family: var(--font-display, 'Outfit', 'Plus Jakarta Sans', system-ui, sans-serif);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-primary, #0f172a);
}

.core-card {
  padding: 20px;
  background: var(--core-surface);
  backdrop-filter: var(--core-glass);
  -webkit-backdrop-filter: var(--core-glass);
  border: 1px solid var(--core-border);
  border-radius: var(--core-radius);
  box-shadow: var(--core-shadow);
  position: relative;
  overflow: hidden;
}

.core-card-title { margin: 0; font-family: var(--font-display, 'Outfit', 'Plus Jakarta Sans', system-ui, sans-serif); font-size: 1.1rem; font-weight: 700; }
.core-meta { color: var(--core-text-muted); }
.core-details { display: grid; grid-template-columns: minmax(120px, 0.4fr) 1fr; gap: 12px 20px; margin: 0; }
.core-detail-label { color: var(--core-text-muted); }
.core-detail-value { margin: 0; overflow-wrap: anywhere; }
.core-app-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.core-app-card { display: grid; align-content: start; gap: 8px; }
.core-app-card .core-button { justify-self: start; }

/* ------------------------------------------------------------ os botões
   Mesma receita do `.t-Button--hot` das portas: pílula com gradiente, sombra
   de elevação e SEM `transform` no hover. */
.core-button-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--nhg-accent-blue, #0284c7), var(--nhg-accent-cyan, #06b6d4));
  border-color: transparent;
  box-shadow: 0 10px 25px -8px var(--nhg-accent-glow, rgba(56, 189, 248, 0.25));
}

.core-button-primary:hover { box-shadow: 0 16px 34px -8px var(--nhg-accent-glow, rgba(56, 189, 248, 0.25)); }

.core-button-secondary {
  color: var(--text-secondary, #334155);
  background: var(--core-surface-solid);
  border-color: var(--core-border);
}

.core-button-secondary:hover { color: var(--text-primary, #0f172a); border-color: var(--nhg-accent-blue, #0284c7); }

.core-button-danger { color: #fff; background: var(--core-danger); border-color: transparent; }
.core-button:disabled { cursor: wait; opacity: 0.6; }

/* ------------------------------------------------------------- o estado */

.core-status {
  grid-area: status;
  margin: 0 0 12px;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--core-surface);
  backdrop-filter: blur(calc(var(--glass-blur, 20px) / 2)) saturate(var(--glass-saturate, 180%));
  -webkit-backdrop-filter: blur(calc(var(--glass-blur, 20px) / 2)) saturate(var(--glass-saturate, 180%));
  border: 1px solid var(--core-border);
  color: var(--text-secondary, #334155);
}

.core-status[data-kind="error"] { color: var(--core-danger); border-color: currentColor; }
.core-status[data-kind="success"] { color: var(--core-success); border-color: currentColor; }

/* ------------------------------------------------- formulários e campos
   Mesma geometria dos campos das portas: 44px de altura, `box-sizing`
   explícito para o padding não somar ao do tema, raio de 10px e o anel de
   foco a azul. */
.core-admin-form { display: grid; grid-template-columns: repeat(3, minmax(160px, 1fr)) auto; gap: 12px; align-items: end; margin-bottom: 20px; }
.core-field { display: grid; gap: 6px; color: var(--core-text-muted); font-weight: 600; }

.core-field select,
.core-field input,
.core-select,
.core-role-select {
  min-height: 44px;
  padding: 0 12px;
  box-sizing: border-box;
  color: var(--core-text);
  background: var(--field-bg, rgba(255, 255, 255, 0.72));
  border: 1px solid var(--field-border, rgba(148, 163, 184, 0.55));
  border-radius: 10px;
  font: inherit;
  font-family: var(--font-sans, 'Plus Jakarta Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  font-weight: 400;
  transition: border-color var(--transition-smooth, 0.35s cubic-bezier(0.16, 1, 0.3, 1)), box-shadow var(--transition-smooth, 0.35s cubic-bezier(0.16, 1, 0.3, 1));
}

.core-field select:focus,
.core-field input:focus,
.core-select:focus,
.core-role-select:focus {
  border-color: var(--nhg-accent-blue, #0284c7);
  box-shadow: 0 0 0 3px var(--nhg-accent-glow, rgba(56, 189, 248, 0.25));
}

/* -------------------------------------------------------------- tabelas */

.core-table-wrap {
  overflow-x: auto;
  background: var(--core-surface);
  backdrop-filter: var(--core-glass);
  -webkit-backdrop-filter: var(--core-glass);
  border: 1px solid var(--core-border);
  border-radius: var(--core-radius);
  box-shadow: var(--core-shadow);
  position: relative;
}

.core-table { width: 100%; border-collapse: collapse; }
.core-table th,
.core-table td { padding: 12px; text-align: left; border-bottom: 1px solid var(--core-border); }
.core-table tr:last-child td { border-bottom: 0; }
.core-table th { color: var(--core-text-muted); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; }
.core-table td .core-button { min-height: 34px; margin: 2px; padding: 5px 14px; }
.core-map-card { gap: 10px; }
.core-map-count { margin: 0; color: var(--nhg-accent-blue, #0284c7); font-weight: 650; }
.core-public-doors { margin-top: 24px; }
.core-public-list { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.core-ws-name { display: block; font-weight: 600; }
.core-ws-note { margin-top: 12px; }
.core-ws-error { color: var(--core-danger); }

/* CORE-039 -- gestao de workspaces. */
/* A dica do formulario de criacao ocupa a linha toda: o .core-admin-form e uma
   grelha de 3 colunas + botao, e sem isto o texto ia parar a uma coluna
   estreita ao lado do botao. */
.core-admin-form .core-meta { grid-column: 1 / -1; margin: 0; }
.core-ws-detail { margin-top: 20px; border-left: 3px solid var(--nhg-accent-blue, #0284c7); }
.core-ws-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.core-ws-detail-head h3 { margin: 0; }
/* No detalhe sao dois campos e um botao, nao tres. */
.core-ws-detail .core-admin-form { grid-template-columns: minmax(200px, 1fr) auto; }
/* Qual das linhas esta aberta. Fundo, e nao so' a seta do botao: com varias
   linhas o utilizador perde de vista de quem e o cartao que esta a ler. */
.core-row-selected > td { background: var(--core-surface-muted); }
.core-select { min-height: 38px; }
.core-select:disabled { cursor: wait; opacity: 0.6; }
.core-table td .core-meta { display: block; font-size: 0.82rem; }
.core-role-select { min-height: 38px; margin: 2px; }
.core-role-select:disabled { cursor: wait; opacity: 0.6; }

/* CORE-040 -- convites por aceitar. Separador visivel entre a lista de membros
   e a de convites: sao duas listas de pessoas seguidas, e sem uma linha entre
   elas lia-se como uma so'. */
.core-ws-invites { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--core-border); }
.core-ws-invites h4 { margin: 0 0 10px; }
/* Email + papel + botao. O terceiro campo do .core-admin-form nao existe aqui. */
.core-ws-invite-form { margin-top: 12px; grid-template-columns: minmax(220px, 1fr) minmax(120px, auto) auto; }
/* A caixa do convidado. Fica na lista, e nao dentro de um cartao de espaco,
   porque um convite e' para um espaco de que ainda NAO se e' membro. Borda a
   tracejado para se ler como "algo a entrar", e nao como mais um espaco meu. */
.core-ws-invite-inbox { margin-top: 18px; border: 1px dashed var(--core-border); }
.core-ws-invite-inbox h3 { margin: 0 0 10px; }
.core-ws-invite-inbox .core-admin-form { grid-template-columns: minmax(240px, 1fr) auto; }
.core-ws-invite-preview { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--core-border); }
.core-ws-invite-preview p { margin: 0 0 8px; }
.core-ws-invite-preview .core-button { margin-right: 8px; }

.core-empty,
.core-fatal {
  padding: 24px;
  color: var(--core-text-muted);
  background: var(--core-surface);
  backdrop-filter: var(--core-glass);
  -webkit-backdrop-filter: var(--core-glass);
  border: 1px solid var(--core-border);
  border-radius: var(--core-radius);
}

/* ------------------------------- a 250: o formulário nativo dentro da coluna

   O PROBLEMA, reportado pelo PO: "não está encostada ao menu da esquerda como
   por exemplo a da conta". Medido, e a causa é herança: a região do formulário
   traz `nhg-cp-wrap`, e a regra agnóstica do `nhg-shell.css` dá a QUALQUER
   `*-wrap` `width: min(720px,100%)` e **`margin: 0 auto`**. Nas portas isso é
   exatamente o que se quer — um cartão ao meio de uma página sem nav. Dentro da
   coluna do painel é o contrário: centra o cartão no espaço que sobra e afasta-o
   da nav, enquanto o cartão da 210 (`.core-card`) começa colado a ela.

   É o preço de reutilizar a âncora das portas, e paga-se aqui em vez de se
   duplicar o tratamento de campos e vidro só para lhe mudar a margem.

   O QUE MUDA É SÓ A MARGEM. A largura de 720px fica: é a mesma das portas,
   portanto o formulário mantém as proporções em que foi aprovado. Deixá-lo
   crescer até à largura da coluna dava campos de password com mais de 1000px
   -- encostado, e pior.

   Especificidade: (0,3,0) contra os (0,2,0) da regra do shell, e ganha-lhe sem
   `!important`. Só `margin-left`/`margin-right`, e não o atalho `margin`, para
   não varrer o `margin-bottom: 4px` que a regra do vidro põe. */
.core-main [class*="nhg-"][class*="-wrap"] {
  margin-left: 0;
  margin-right: auto;
}

/* ------------------------------------------- CORE-043: participar (280)

   O formulário NÃO usa `.core-admin-form`. Aquele é uma grelha de três colunas
   com o botão ao lado, feita para filtros curtos; aqui há uma área de texto de
   seis linhas, e numa coluna estreita ficava esmagada. Empilha-se. */
.core-community-form {
  display: grid;
  gap: 14px;
  margin-bottom: 20px;
}

.core-community-lead { margin: 0 0 18px; max-width: 62ch; }

.core-community-form textarea {
  min-height: 140px;
  padding: 12px;
  box-sizing: border-box;
  resize: vertical;
  color: var(--core-text);
  background: var(--field-bg, rgba(255, 255, 255, 0.72));
  border: 1px solid var(--field-border, rgba(148, 163, 184, 0.55));
  border-radius: 10px;
  font: inherit;
  font-family: var(--font-sans, 'Plus Jakarta Sans', system-ui, sans-serif);
  transition: border-color var(--transition-smooth, 0.35s ease),
              box-shadow var(--transition-smooth, 0.35s ease);
}

.core-community-form textarea:focus {
  border-color: var(--nhg-accent-blue, #0284c7);
  box-shadow: 0 0 0 3px var(--nhg-accent-glow, rgba(56, 189, 248, 0.25));
}

.core-community-form textarea:focus-visible {
  outline: 3px solid var(--core-focus);
  outline-offset: 2px;
}

/* A caixa da videochamada. `flex` e não `grid` porque aqui a etiqueta fica ao
   LADO da caixa e não por cima — é a única do ecrã em que isso é verdade, e o
   `.core-field` empilha por omissão. */
.core-community-meeting {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-secondary, #334155);
  font-weight: 600;
}

.core-community-meeting input { width: 18px; height: 18px; margin: 0; }

.core-community-form .core-button { justify-self: start; }
.core-community-mine { margin: 24px 0 12px; }
.core-community-empty { margin-top: 20px; }

/* A mensagem que a página serve antes de o JS arrancar. Não tinha regra
   nenhuma: era texto solto sobre o fundo, e agora que o fundo é a pilha do
   site isso lê-se como página partida. */
.nhg-core-loading {
  margin: 0;
  padding: 24px;
  color: var(--core-text-muted);
  font-family: var(--font-sans, 'Plus Jakarta Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
}

/* --------------------------------------------------- ecrãs estreitos */

@media (max-width: 760px) {
  #nhg-core-app { grid-template-columns: 1fr; grid-template-areas: "header" "nav" "status" "main"; }
  .core-nav {
    flex-direction: row;
    overflow-x: auto;
    padding: 8px;
    border-radius: var(--radius-full, 999px);
  }
  .core-tab { white-space: nowrap; }
  .core-header { align-items: flex-start; flex-direction: column; gap: 10px; }
  .core-admin-form { grid-template-columns: 1fr; }
  .core-details { grid-template-columns: 1fr; gap: 4px; }
  .core-detail-value { margin-bottom: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto; transition-duration: 0.01ms; animation-duration: 0.01ms; }
}

/* Onde não há `backdrop-filter`, o vidro TEM de degradar para superfície
   opaca. Sobre a pilha de quatro camadas, um cartão a 18% sem desfoque fica
   ilegível — e uma tabela de membros ilegível não é "menos bonito", é
   inutilizável. Mesma regra que já protege as portas. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .core-nav,
  .core-card,
  .core-status,
  .core-table-wrap,
  .core-empty,
  .core-fatal {
    background: rgba(255, 255, 255, 0.94);
  }
  [data-theme="dark"] .core-nav,
  [data-theme="dark"] .core-card,
  [data-theme="dark"] .core-status,
  [data-theme="dark"] .core-table-wrap,
  [data-theme="dark"] .core-empty,
  [data-theme="dark"] .core-fatal {
    background: rgba(9, 16, 28, 0.94);
  }
}