@layer theme, legacy, base, components, utilities;
@layer legacy {
/* NF-098: the MCP sign-in and consent page (served by worker/mcp/mcp-auth.js) and Connected apps. */
.connect { max-width: 560px; margin: 32px auto; padding: 0 16px; }
.connect h1 { font-size: 22px; margin: 0 0 8px; overflow-wrap: anywhere; }
.connect h2 { font-size: 16px; margin: 16px 0 4px; }
.connect label { display: block; margin-top: 12px; font-size: 14px; }
.connect .link-row input { flex: 1; min-width: 0; }
.connect .warning { border-left: 3px solid var(--nf-pencil); padding-left: 10px; }
.connect-message { font-weight: 600; }
.connect-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.connect .cf-turnstile { margin-top: 12px; }
.connect .admin-card { margin-bottom: 16px; }
.connect .admin-card > h2:first-child { margin-top: 0; }
/* The admin page's section cards. */
.admin-card { border: 1px solid var(--nf-line); border-radius: var(--nf-radius-lg); background: var(--nf-sheet); padding: 16px; margin-top: 20px; font-size: 14px; }
.admin-card a { color: var(--nf-accent); }
.admin-card p { line-height: 1.6; }
/* #177: the delete-account dialog on the Account page. */
dialog.delete-account { width: min(460px, calc(100vw - 32px)); box-sizing: border-box; border: 1px solid var(--nf-line); border-radius: var(--nf-radius-lg); background: var(--nf-sheet); padding: 16px; margin: auto; max-width: min(460px, calc(100vw - 32px)); color: var(--nf-pencil); }
dialog.delete-account::backdrop { background: var(--nf-scrim); }
dialog.delete-account h2 { margin: 0 0 8px; font-size: 18px; }
dialog.delete-account ul { margin: 0 0 8px; padding-left: 20px; font-size: 14px; }
dialog.delete-account input { width: 100%; min-width: 0; box-sizing: border-box; margin-top: 6px; }
dialog.delete-account #delete-status:empty { display: none; }
/* #223: Connect your AI. Provider cards are details; address and prompt are copyable read-only fields. */
.connect-guide { max-width: 640px; }
.connect-guide details.provider { border-top: 1px solid var(--nf-line); padding: 8px 0; }
.connect-guide details.provider summary { font-weight: 600; cursor: pointer; min-height: 32px; display: flex; align-items: center; }
.connect-guide ol { margin: 8px 0; padding-left: 22px; line-height: 1.6; }
.connect-guide li { margin-bottom: 4px; overflow-wrap: anywhere; }
.connect-guide code { overflow-wrap: anywhere; }
.connect-guide textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 14px; line-height: 1.5; padding: 8px; border: 1px solid var(--nf-border); border-radius: var(--nf-radius); background: var(--nf-sheet); color: var(--nf-pencil); resize: vertical; min-height: 0; height: 13em; }
.connect-guide .link-row input { font-size: 14px; text-overflow: ellipsis; }
.connect-guide [role=status]:empty { display: none; }
/* #508/#509: the invitation page, the Account page's alpha access and the alpha admin page: plain lines that wrap, never sideways. */
.connect .admin-lines, .connect .access-limits { margin: 8px 0; padding-left: 18px; font-size: 14px; }
.connect .admin-lines li, .connect .access-limits li { margin: 4px 0; overflow-wrap: anywhere; }
.connect .link-row select { flex: 1; min-width: 0; }
.connect label:has(> input[type="checkbox"]) { display: flex; align-items: center; gap: 8px; }
.connect #invite-account { overflow-wrap: anywhere; }
.connect .connect-actions { align-items: center; }
.alpha-admin summary { cursor: pointer; }
.alpha-admin summary h2 { display: inline; margin: 0; }

}