/* Botwarren site chrome: the one header, phone menu, footer and button system shared by every public page
   (React pages link it from index.html; server-rendered and static pages link it directly). UI overhaul 2026-10-26:
   orchestration/ux-overhaul/BRIEF.md, Claude Design overhaul/Landing.dc.html + Screens.dc.html. Markup: packages/core/src/site.ts
   (siteHeaderHtml/siteFooterHtml) and apps/web/src/ui/SiteChrome.tsx render the same classes.
   Served from /site/ (revalidated), not /assets/ (immutable), so edits reach visitors. */
:root {
  --s-bg: #050816; --s-n900: #070b1c; --s-n800: #0a1128; --s-n700: #0e1832;
  --s-line: #2aa8c8; --s-line2: rgba(62, 230, 255, .24); --s-line3: rgba(62, 230, 255, .12);
  --s-cyan: #3ee6ff; --s-text: #dff7ff; --s-text2: #a6c6d4; --s-text3: #7d9fb2;
  --s-good: #43e0a0; --s-bad: #f0476b; --s-warn: #ff9f43; --s-demo: #e04ba0;
  --s-cta: #ffc23d; --s-cta-hover: #ffd36e; --s-cta-edge: #b8861c; --s-cta-shadow: #8a6412; --s-cta-ink: #1a1204;
  --s-display: 'Rajdhani', 'Arial Narrow', system-ui, sans-serif;
  --s-body: 'IBM Plex Sans', system-ui, sans-serif;
  --s-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --s-hdr: 60px; --s-w: 1200px; --s-gut: 24px;
}
@media (max-width: 760px) { :root { --s-gut: 16px; --s-hdr: 56px; } }

.site-in { max-width: var(--s-w); margin: 0 auto; padding-inline: var(--s-gut); }

/* ---------- header ---------- */
.site-hdr { position: sticky; top: 0; z-index: 40; background: rgba(5, 8, 22, .94); border-bottom: 1px solid var(--s-line3); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-family: var(--s-body); }
.site-hdr .site-in { display: flex; align-items: center; gap: 28px; height: var(--s-hdr); }
.site-hdr.site-wide .site-in { max-width: none; }
.site-logo { display: inline-flex; align-items: center; gap: 10px; flex: none; color: var(--s-text); text-decoration: none; font: 700 21px/1 var(--s-display); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.site-logo:hover { color: var(--s-text); text-decoration: none; }
.site-logo img, .site-logo svg { width: 26px; height: 26px; flex: none; }
.site-crumb { font: 600 15px/1 var(--s-display); letter-spacing: .06em; text-transform: uppercase; color: var(--s-text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.site-crumb a { color: inherit; text-decoration: none; }
.site-nav { display: flex; gap: 2px; flex: 1; min-width: 0; }
.site-nav a { color: var(--s-text2); text-decoration: none; font: 600 15px/1 var(--s-display); letter-spacing: .06em; text-transform: uppercase; padding: 12px 11px 10px; border-bottom: 2px solid transparent; white-space: nowrap; }
.site-nav a:hover { color: var(--s-text); }
.site-nav a[aria-current='page'] { color: var(--s-text); border-bottom-color: var(--s-cyan); }
.site-act { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; }
.site-quiet { color: var(--s-text2); text-decoration: none; font: 600 15px/1 var(--s-display); letter-spacing: .06em; text-transform: uppercase; padding: 13px 12px; white-space: nowrap; }
.site-quiet:hover { color: var(--s-text); }
.site-hdr :focus-visible, .site-ftr :focus-visible, .site-btn:focus-visible { outline: 2px solid var(--s-cyan); outline-offset: 2px; }

/* ---------- buttons (one system) ---------- */
.site-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1px solid var(--s-line); background: rgba(14, 24, 50, .6); color: var(--s-text); text-decoration: none; font: 700 16px/1 var(--s-display); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; cursor: pointer; }
.site-btn:hover { border-color: var(--s-cyan); color: var(--s-text); text-decoration: none; }
.site-btn.site-pri { background: var(--s-cta); border-color: var(--s-cta-edge); color: var(--s-cta-ink); box-shadow: 0 2px 0 var(--s-cta-shadow); }
.site-btn.site-pri:hover { background: var(--s-cta-hover); color: var(--s-cta-ink); }
.site-btn.site-lg { min-height: 56px; padding: 0 28px; font-size: 19px; }
.site-btn.site-sm { min-height: 40px; padding: 0 14px; font-size: 15px; }

/* ---------- phone menu (a <details>: opens without JavaScript) ---------- */
.site-menu { display: none; position: relative; }
.site-menu > summary { list-style: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--s-line); cursor: pointer; }
.site-menu > summary::-webkit-details-marker { display: none; }
.site-burger { position: relative; width: 18px; height: 12px; border-top: 2px solid var(--s-text); border-bottom: 2px solid var(--s-text); }
.site-burger::after { content: ''; position: absolute; left: 0; right: 0; top: 3px; border-top: 2px solid var(--s-text); }
.site-menu[open] > summary { border-color: var(--s-cyan); }
.site-sheet { position: fixed; left: 0; right: 0; top: var(--s-hdr); bottom: 0; z-index: 41; overflow-y: auto; background: var(--s-bg); padding: 8px var(--s-gut) 32px; display: flex; flex-direction: column; }
.site-sheet a { display: block; padding: 16px 4px; border-bottom: 1px solid var(--s-line3); color: var(--s-text); text-decoration: none; font: 700 21px/1 var(--s-display); letter-spacing: .05em; text-transform: uppercase; }
.site-sheet a[aria-current='page'] { color: var(--s-cyan); }

@media (max-width: 900px) { .site-hdr .site-in { gap: 16px; } .site-nav a { padding-inline: 8px; font-size: 14px; } }
@media (max-width: 760px) {
  .site-nav, .site-quiet { display: none; }
  .site-menu { display: block; }
  .site-hdr .site-in { gap: 8px; }
  .site-logo { font-size: 18px; gap: 8px; }
  .site-logo img, .site-logo svg { width: 22px; height: 22px; }
  .site-act .site-btn.site-pri { min-height: 44px; padding: 0 12px; font-size: 14px; }
}
@media (max-width: 359px) { .site-logo { font-size: 0; gap: 0; } }
/* signed in, a phone header carries the avatar too: the logo keeps its mark and drops the word so nothing runs off the screen */
@media (max-width: 440px) {
  html[data-acct='in'] .site-logo { font-size: 0; gap: 0; }
  .site-act { gap: 6px; min-width: 0; }
  .site-act .site-btn, .site-act .btn { padding-inline: 10px; }
}

/* signed in: the quiet Sign in link hides (sx-cta.js / SiteHeader set data-acct on <html>) */
html[data-acct='in'] [data-signin] { display: none; }
/* sign-ups closed: the waitlist is the only action beside the logo (owner decision 2026-10-26); existing accounts sign in from its dialog */
html[data-signups='closed'] [data-signin] { display: none; }
button.site-quiet { background: none; border: 0; cursor: pointer; }

/* ---------- footer ---------- */
.site-ftr { border-top: 1px solid var(--s-line3); padding: 56px 0 36px; font-family: var(--s-body); background: var(--s-bg); }
.site-ftr-g { display: grid; grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); gap: 32px; }
.site-ftr-brand p { margin: 12px 0 0; color: var(--s-text2); font-size: 14px; }
.site-ftr h2 { margin: 0 0 12px; font: 600 12px/1 var(--s-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--s-text3); }
.site-ftr ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.site-ftr li a { display: inline-block; padding: 5px 0; color: var(--s-text2); text-decoration: none; font-size: 15px; }
.site-ftr li a:hover { color: var(--s-text); text-decoration: underline; }
.site-legal { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--s-line3); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: 13px; color: var(--s-text3); }
@media (max-width: 1000px) { .site-ftr-g { grid-template-columns: repeat(2, minmax(0, 1fr)); } .site-ftr-brand { grid-column: 1 / -1; } }
@media (pointer: coarse) { .site-ftr li a { padding: 10px 0; } }

/* ---------- page shell for content pages ---------- */
body.site-page { margin: 0; }
.site-page { min-height: 100vh; display: flex; flex-direction: column; background: var(--s-bg); color: var(--s-text); font: 400 16px/1.6 var(--s-body); }
.site-page > main { flex: 1; }

/* ---------- the branded 404 (apps/server/src/notfound.ts) ---------- */
.site-nf { width: 100%; box-sizing: border-box; padding-block: 72px 96px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.site-nf h1 { margin: 0; font: 700 48px/1 var(--s-display); text-wrap: balance; }
.site-nf p { margin: 0; color: var(--s-text2); }
.site-nf .site-nf-eyebrow { font: 600 12px/1.2 var(--s-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--s-cyan); }
.site-nf-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
@media (max-width: 760px) { .site-nf { padding-block: 40px 64px; } .site-nf h1 { font-size: 36px; } .site-nf-ctas .site-btn { flex: 1 1 100%; } }