/*
 * The marketing site's top bar and footer, shared by the static landing and
 * /product (injected by scripts/sync-marketing-nav.ts) and the Next.js marketing
 * routes (MarketingShell). Markup comes from src/lib/marketing/navHtml.ts.
 * Values match the live landing bar and the /product page; see
 * docs/superpowers/specs/2026-11-09-marketing-site-navigation-design.md.
 * Light only: marketing pages do not follow the app's dark theme.
 */

/* ── Links and menus (both kinds of page) ── */
.mn { display: flex; align-items: center; gap: 2px; min-width: 0; }
.mn-link {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 11px; border-radius: 6px;
  font: 400 14px/20px system-ui, -apple-system, sans-serif; color: #3f3f46;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  list-style: none; user-select: none;
  transition: color 120ms ease;
}
.mn-link::-webkit-details-marker, .mn-burger::-webkit-details-marker { display: none; }
/* Every top-bar and footer link hovers the same way as Log in: the text darkens, nothing else. */
.mn-link:hover, .mn-drop[open] > .mn-link { color: #18181b; }
.mn-link:focus-visible, .mn-item:focus-visible, .mn-login:focus-visible, .mn-burger:focus-visible,
.mn-sheet a:focus-visible, .mk-join:focus-visible, .mk-brand:focus-visible {
  outline: 2px solid #5b4fcf; outline-offset: 2px;
}
.mn-caret { opacity: 0.7; transition: transform 120ms ease; }
.mn-drop[open] .mn-caret { transform: rotate(180deg); }
.mn-drop { position: relative; }
.mn-menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 101;
  min-width: 232px; padding: 6px; box-sizing: border-box;
  background: #ffffff; border: 1px solid #e4e4e7; border-radius: 10px;
  box-shadow: 0 8px 30px rgba(24, 24, 27, 0.08);
}
/* a hover bridge across the 8px gap, so the pointer can reach the menu */
.mn-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.mn-item, .mn-sheet-item {
  display: flex; align-items: center; gap: 11px;
  font: 400 14px/20px system-ui, -apple-system, sans-serif; color: #27272a;
  text-decoration: none; white-space: nowrap;
}
.mn-item { padding: 9px 10px; border-radius: 6px; color: #3f3f46; transition: color 120ms ease; }
.mn-item:hover, .mn-item:hover svg { color: #18181b; }
.mn-item svg, .mn-sheet-item svg { flex: none; color: #71717a; }
.mn-login {
  margin-left: auto; padding: 7px 4px;
  font: 400 14px/20px system-ui, -apple-system, sans-serif; color: #3f3f46;
  text-decoration: none; white-space: nowrap;
  transition: color 120ms ease;
}
.mn-login:hover { color: #18181b; }

/* ── The phone menu ── */
.mn-mobile { display: none; position: static; }
.mn-burger {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; box-sizing: border-box;
  border: 1px solid #e4e4e7; border-radius: 6px; background: #ffffff; color: #27272a;
  cursor: pointer; list-style: none;
}
.mn-sheet {
  position: fixed; left: 0; right: 0; top: 57px; z-index: 101;
  max-height: calc(100vh - 57px); overflow-y: auto; box-sizing: border-box;
  padding: 8px 20px 20px; background: #ffffff;
  border-top: 1px solid #e4e4e7; border-bottom: 1px solid #e4e4e7;
  box-shadow: 0 16px 30px rgba(24, 24, 27, 0.06);
}
.mn-sheet-link, .mn-sheet-item {
  display: flex; padding: 13px 2px; border-bottom: 1px solid #f4f4f5;
  font: 400 16px/22px system-ui, -apple-system, sans-serif; color: #18181b; text-decoration: none;
}
.mn-sheet-label {
  padding: 18px 2px 4px;
  font: 400 13px/18px system-ui, -apple-system, sans-serif; letter-spacing: 0.04em; color: #a1a1aa;
}

@media (max-width: 899px) {
  .mn, .mn-login { display: none; }
  .mn-mobile { display: block; order: 1; }
  /* The landing's phone body used to push Join right with an empty .nav-links
     (flex: 1); its own margin-left:auto only starts at 760px, so tablets
     (761 to 899px) need it here. */
  .pg-m .nav .btn-primary { margin-left: auto; }
}

/* ── On the static landing and /product (their own .nav-inner is the row) ── */
.pg-d .nav .mn-login ~ .btn-primary { margin-left: 0; }

/* ── The bar on the Next.js marketing routes ── */
.mk-bar {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid #e4e4e7;
}
.mk-bar-inner {
  display: flex; align-items: center; gap: 28px;
  max-width: 1080px; height: 56px; margin: 0 auto; padding: 0 15px 0 11px; box-sizing: border-box;
  font: 400 14px system-ui, -apple-system, sans-serif;
}
.mk-brand { display: flex; align-items: center; gap: 8px; color: #0f0e11; text-decoration: none; flex: none; }
.mk-brand span { font: 500 20px/1 Georgia, 'Times New Roman', serif; letter-spacing: -0.4px; }
.mk-join {
  display: inline-flex; align-items: center; flex: none;
  padding: 7px 14px; border-radius: 6px; box-sizing: border-box;
  background: #f4f4f5; border: 1px solid #e4e4e7; color: #27272a;
  font: 500 13px/20px system-ui, -apple-system, sans-serif; text-decoration: none; white-space: nowrap;
}
.mk-join:hover { background: #ececef; }
@media (max-width: 899px) {
  /* the landing's phone bar: 14px sides, 10px between items */
  .mk-bar-inner { padding: 0 14px; gap: 10px; }
  .mk-join { margin-left: auto; }
}

/* ── Page frame and footer on the Next.js marketing routes ── */
.mk-page {
  min-height: 100vh; display: flex; flex-direction: column;
  background: #ffffff; color: #27272a;
  /* the app's --font-sans stack, so marketing pages set type like About and Privacy */
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.mk-page > main { flex: 1 0 auto; }
.mk-foot { background: #ffffff; border-top: 1px solid rgba(15, 14, 17, 0.06); padding: 0 48px; margin-top: 96px; }
.mk-foot-strip {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 32px;
  padding: 22px 0; font-family: system-ui, -apple-system, sans-serif;
}
.mk-foot-brand { display: flex; align-items: center; gap: 8px; color: #0f0e11; text-decoration: none; }
.mk-foot-brand span { font: 500 16px/24px Georgia, serif; letter-spacing: -0.16px; }
.mk-foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; }
.mk-foot-links a { padding: 6px 2px; font-size: 13px; color: #3f3f46; text-decoration: none; transition: color 120ms ease; }
.mk-foot-links a:hover { color: #18181b; }
.mk-foot-copy { font-size: 12.5px; color: #7a7590; }
@media (max-width: 899px) {
  .mk-foot { padding: 0 24px; }
  .mk-foot-strip { grid-template-columns: 1fr; justify-items: center; gap: 16px; }
}

/* ── Light only ──
   The app's theme script sets html.dark on every route, and html.dark re-points
   every colour token. Marketing pages stay light like the landing, so this scope
   restores each token's light value (from globals.css @theme and :root).
   tests/marketing-light-tokens.test.ts fails if a dark token lacks its twin here. */
.mk-light {
  color-scheme: light;
  --color-ink: #27272a;
  --color-ink2: #3f3f46;
  --color-ink3: #71717a;
  --color-ink4: #a1a1aa;
  --color-ink-icon: #52525b;
  --color-paper: #ffffff;
  --color-paper2: #fafafa;
  --color-paper3: #f4f4f5;
  --color-sidebar: #fafafa;
  --color-surface: #ffffff;
  --color-surface-current: #ebebee;
  --color-scrim: rgba(24,24,27,.24);
  --color-violet: #5b4fcf;
  --color-violet-light: #ede9ff;
  --color-violet-tint: #c7c2ee;
  --color-violet-mid: #8b80e8;
  --color-teal: #1a9e75;
  --color-teal-light: #e0f5ee;
  --color-amber: #b97318;
  --color-amber-light: #fdf3e3;
  --color-red: #c94040;
  --color-red-light: #fdecea;
  --color-green: #1a7e4a;
  --color-green-light: #e3f5ea;
  --color-danger: #b91c1c;
  --color-danger-fill: #b91c1c;
  --color-bar-todo: #eff6ff;
  --color-bar-todo-border: #bfdbfe;
  --color-bar-progress: #dbeafe;
  --color-bar-progress-border: #93c5fd;
  --color-bar-text: #1e3a8a;
  --color-link: #2563eb;
  --color-border: #e4e4e7;
  --color-border2: #f0f0f2;
  --color-border-strong: #d4d4d8;
  --color-row-divider: #ececef;
  --shadow-card: none;
  --shadow-floating: none;
  --shadow-menu: 0 4px 14px rgba(24,24,27,.06);
  --shadow-dialog: 0 12px 32px rgba(24,24,27,.12);
  --ink: #27272a;
  --ink2: #3f3f46;
  --ink3: #71717a;
  --ink4: #a1a1aa;
  --ink-icon: #52525b;
  --paper: #ffffff;
  --paper2: #fafafa;
  --paper3: #f4f4f5;
  --sidebar: #fafafa;
  --surface: #ffffff;
  --surface-current: #ebebee;
  --scrim: rgba(24,24,27,.24);
  --violet: #5b4fcf;
  --violet-light: #ede9ff;
  --violet-tint: #c7c2ee;
  --violet-mid: #8b80e8;
  --teal: #1a9e75;
  --teal-light: #e0f5ee;
  --amber: #b97318;
  --amber-light: #fdf3e3;
  --red: #c94040;
  --red-light: #fdecea;
  --green: #1a7e4a;
  --green-light: #e3f5ea;
  --danger: #b91c1c;
  --danger-fill: #b91c1c;
  --bar-todo: #eff6ff;
  --bar-todo-border: #bfdbfe;
  --bar-progress: #dbeafe;
  --bar-progress-border: #93c5fd;
  --bar-text: #1e3a8a;
  --link: #2563eb;
  --border: #e4e4e7;
  --border2: #f0f0f2;
  --border-strong: #d4d4d8;
  --row-divider: #ececef;
  --shadow: none;
  --shadow-lg: none;
  --section-project-label: var(--ink);
}
html.dark body:has(.mk-light) { background: #ffffff; }