/* * Shell autenticado (Q63/Q65) — sidebar fixa no desktop, bottom tab bar no mobile. * Só tokens (tokens.css), denso, claro/escuro automático. Estética Linear: * hierarquia por tipografia/peso/espaço, chrome quieto, UM acento. */ /* Desktop: grid sidebar + conteúdo. ALTURA FIXA na viewport (100dvh, não min-): a página não rola inteira — a sidebar fica fixa e SÓ o conteúdo (.shell-main) rola. Sem isso, uma lista longa (tracker) estica o .app inteiro e a sidebar vai junto, jogando o rodapé (Preferências/Sair) lá pro fim da página. A row 1fr leva toda a altura mesmo com filhos extras do (wrapper do command palette). */ .app { display: grid; grid-template-columns: 15rem 1fr; grid-template-rows: 1fr; height: 100dvh; overflow: hidden; /* o scroll mora em .shell-main, não no grid */ /* A ASSINATURA: uma barra de acento ÚNICA no topo do app inteiro — fora da sidebar e do tracker, sem emenda entre os dois. */ border-top: 3px solid var(--color-accent); } /* --- Sidebar (desktop) ------------------------------------------------------ */ .shell-sidebar { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4) var(--space-3); /* Moldura com vida: no CLARO a sidebar leva uma lavagem do acento (neutro tingido pro hue do teal — o cinza puro ficava morto); no ESCURO o Crust já dá a profundidade certa. */ background-color: light-dark( color-mix(in srgb, var(--color-accent) 7%, #eff1f5), var(--color-surface-deep) ); border-right: 1px solid light-dark( color-mix(in srgb, var(--color-accent) 14%, #ccd0da), var(--color-border) ); } /* Header mobile (marca acima do timer): invisível no desktop — lá a marca é da sidebar. */ .shell-mobile-header { display: none; } .shell-sidebar__brand { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); font-size: var(--text-lg); font-weight: var(--weight-semibold); letter-spacing: -0.01em; } .shell-nav { display: flex; flex-direction: column; gap: 2px; margin-top: var(--space-3); } /* Rodapé da sidebar empurrado pro fim (Preferências/Admin/Sair). */ .shell-sidebar__footer { display: flex; flex-direction: column; gap: 2px; margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--color-border); } .shell-nav__item { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text); text-decoration: none; border-radius: var(--radius-sm); } /* Com ícone + label alinhados à esquerda, o badge "em breve" vai pra direita. */ .shell-nav__item .shell-badge { margin-left: auto; } a.shell-nav__item:hover { color: var(--color-text); /* Hover com ACENTO (7%) — "um tom acima" do item atual (12%), nunca cinza. */ background-color: color-mix(in srgb, var(--color-accent) 7%, transparent); } /* Item atual: acento contido (o UM acento). */ .shell-nav__item--current { color: var(--color-accent); background-color: color-mix(in srgb, var(--color-accent) 12%, transparent); } /* Desabilitado "em breve": apagado, sem interação, sem link morto. */ .shell-nav__item--disabled { color: var(--color-text-subtle); cursor: default; } /* * Sair é um button_to (form +