@layer theme, legacy, base, components, utilities;
@layer legacy {
/* The signed-out pages are drawn in components/pages/entry-kit.tsx; what is left here is the notebook face an invitation names and the page's own body. */
body.entry-page { min-height: 100vh; min-height: 100dvh; }
/* The notebook an invitation names: its face (covers.css). */
.invite-cover { width: min(280px, 64vw); }
@media (max-width: 750px) { .invite-cover { width: 150px; } }
/* public/404.html is plain HTML (no script, no Tailwind): the wordmark, the art, a title, a line and one way back, in the entry kit's look. */
.entry-top { display: flex; align-items: center; min-height: 72px; padding: 20px max(3vw, 16px) 8px; }
.entry-top .wordmark { min-height: 0; gap: 7px; }
.entry-top .wordmark-badge { width: 28px; height: 28px; }
.entry-top .wordmark-name { height: 20px; width: auto; }
.entry { display: grid; justify-items: center; padding: 48px 16px 80px; text-align: center; }
.recovery { display: grid; justify-items: center; gap: 8px; max-width: 420px; }
.recovery-art { width: 160px; height: 160px; }
.recovery h1 { margin: 0; font: 500 34px/1.1 var(--nf-font-display); }
.recovery p { margin: 0 0 8px; color: var(--nf-pencil-muted); font-size: 16px; line-height: 1.45; }
.entry-button { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 44px; padding: 0 20px; border: 1px solid var(--nf-line); border-radius: 9px; background: var(--nf-sheet); color: var(--nf-pencil); font-weight: 500; text-decoration: none; }
@media (max-width: 750px) { .entry-top { min-height: 58px; padding: 18px 14px 6px; } .entry { padding-top: 30px; } .recovery h1 { font-size: 30px; } }
/* The Connect page (docs/connect-ai.html) is drawn in the global pages' kit (components/ui/global-page.tsx). The page's React root sits between the body and its header and main: it takes no box of its own. */
body.connect-page > #root { display: contents; }

}