/* Shell: body, header 112px fixo, tabs, container 1085 e colunas 770/42/273 (docs/02-layout.md) */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 14px/20px var(--font); color: var(--ink); background: var(--surface); }
a { color: inherit; text-decoration: none; }
a.link { color: var(--blue); } a.link:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
h1, h2, h3, p { margin: 0; }
::selection { background: var(--yellow-highlight); color: var(--ink); }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.header { position: fixed; top: 0; left: 0; right: 0; height: var(--header-h); background: var(--card); border-bottom: 1px solid var(--border); z-index: 1100; }
.header-inner { max-width: var(--container); margin: 0 auto; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding-top: 8px; }
.header-row { height: 48px; display: flex; align-items: center; gap: 8px; }
.brand { display: flex; align-items: center; height: 48px; margin-right: 0; }
.brand-icon { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; background: var(--ink); color: #fff; display: grid; place-items: center; font: 700 15px/1 var(--font); flex: none; }
img.brand-icon { background: none; }  /* ícone PNG transparente: o fundo escuro é só das iniciais */
.brand-name { font: 500 18px/27px var(--font); color: var(--ink); margin-left: 8px; white-space: nowrap; }
.header-search { flex: 1; max-width: 637px; margin-left: 53px; height: 48px; background: var(--border); border-radius: var(--r-md); display: flex; align-items: center; padding: 0 16px; gap: 16px; color: var(--gray); }  /* 53 + gap 8 = 61px do nome até a busca, medida do Skool */
.header-search input { flex: 1; height: 32px; padding: 0; border: 0; background: transparent; font: 400 16px/24px var(--font); color: var(--ink); outline: 0; min-width: 0; }
.header-search input::placeholder { color: var(--gray); }
/* × da busca: só com texto no campo (templates/_header.html) */
.header-search input::-webkit-search-cancel-button { display: none; }  /* o × nativo do Chrome duplicava o nosso */
.header-search input:placeholder-shown + .header-search-clear { display: none; }
.header-search-clear { display: grid; border: 0; background: none; cursor: pointer; padding: 0; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; color: var(--gray); }
.header-search-clear:hover { background: var(--border); color: var(--ink); }
.header-spacer { flex: 1; }
.header-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.tabs { display: flex; height: 40px; align-items: stretch; }
.tabs a { display: flex; align-items: center; padding: 0 16px; font: 500 16px/24px var(--font); color: var(--gray); border-bottom: 4px solid transparent; white-space: nowrap; }
.tabs a:first-child { padding-left: 0; }
.tabs a:hover { color: var(--ink); }
.tabs a.active { color: var(--ink); border-bottom-color: var(--ink); }
.tabs a.soon { opacity: .45; cursor: default; }
.tabs a.tab-locked { gap: 4px; }  /* só de membros: cadeado, abre o login ou leva ao Sobre */
.tabs a.tab-locked svg { flex: none; }
.header .hide-desktop { display: none; }  /* a seta de voltar é só do celular */
.header--compact { height: var(--header-compact-h); }
.header--compact .header-inner { justify-content: center; padding-top: 0; }

.page { padding-top: calc(var(--header-h) + var(--content-top)); padding-bottom: 48px; }
.page--compact { padding-top: calc(var(--header-compact-h) + var(--content-top)); }
.page--auth { padding-top: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.container { max-width: var(--container); margin: 0 auto; }
.layout { display: flex; gap: var(--col-gap); align-items: flex-start; }
.main { width: var(--main); max-width: 100%; flex: 1 1 auto; min-width: 0; }
.main--full { width: 100%; }
.sidebar { width: var(--side); flex: none; }

/* Menu do usuário logado (não capturado no original) */
.user-menu { position: relative; }
.popover { position: absolute; right: 0; top: 56px; width: 304px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-ui); padding: 16px; z-index: 1200; }
.popover a, .popover button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px; border-radius: 8px; font: 500 16px/24px var(--font); color: var(--ink); background: none; border: 0; cursor: pointer; text-align: left; }
.popover a:hover, .popover button:hover { background: var(--surface); }
.popover .ico { width: 32px; height: 32px; border-radius: 50%; background: var(--border); display: grid; place-items: center; color: var(--gray); flex: none; }

/* Menu de comunidades ancorado no nome, no lugar de navegar para a lista */
.brand-icon.sm { width: 32px; height: 32px; border-radius: 6px; font-size: 12px; }
/* Contador na aba Painel (pedidos de entrada aguardando), como o do sino */
.tabs .tab-count { margin-left: 6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--red-today); color: #fff; font: 700 11px/18px var(--font); text-align: center; }