/* Shell — body, topbar, split layout, mode switcher.
 *
 * Responsive convention (used consistently across every stylesheet):
 *
 *   mobile   ≤ 640px   single column, bottom tab nav, no Split mode.
 *   tablet   ≤ 920px   topbar controls collapse into a dropdown.
 *   wide     ≤ 1280px  hide decorative topbar sub-tagline.
 *
 * CSS variables can't appear inside @media queries, so the literal
 * pixel values below match the comments above — change one, change
 * both. The --touch-min / --space-* / --mobile-tabs-h tokens ARE
 * usable inside rules and should be preferred over ad-hoc values
 * for new mobile-aware UI.
 */

/* page.theme writes these on :root at runtime. Fallbacks here match
   the original Rebase look so the app renders identically until the
   theme surface is touched. */
:root {
  --rb-accent:       #a9e5c2;
  --rb-accent-2:     #c7b5ff;
  --rb-bg:           #0f0c14;
  --rb-card-bg:      #15111e;
  --rb-text:         #f3eee6;
  --rb-text-muted:   #9c93a6;
  --rb-border:       #2a2336;
  --rb-heading-font: "Fraunces", Georgia, serif;
  --rb-body-font:    "Inter", system-ui, -apple-system, sans-serif;
  --rb-radius:       14px;
  --rb-pad-section:  64px;

  /* Mobile-aware design tokens. Shared across every stylesheet. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --touch-min: 44px;
  --mobile-tabs-h: 56px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--rb-body-font);
  background: #0b0910;
  color: #1a1b22;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; }
::selection { background: #c7b5ff; color: #14101c; }

/* `dvh` accounts for iOS Safari's collapsing address bar; `vh`
 * stays as the fallback for older engines. */
#appRoot { height: 100vh; height: 100dvh; display: flex; flex-direction: column; }

/* topbar */
#topbar {
  flex: 0 0 46px;
  position: relative;
  display: flex; align-items: center; gap: 14px;
  padding: 0 14px;
  background: #14111b;
  border-bottom: 1px solid #2a2336;
  color: #e9e3d8;
  font-size: 12.5px;
  z-index: 30;
}
.tb-title {
  font-weight: 600; letter-spacing: .01em; white-space: nowrap;
  /* Title shrinks BEFORE controls when space is tight — controls
   * are functional, the title is decorative. */
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
  flex: 0 1 auto;
}
.tb-title em { font-style: normal; color: #a9e5c2; }
.tb-sub {
  color: #79708a; font-size: 11.5px; white-space: nowrap;
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
  flex: 0 1 auto;
}
.tb-spacer { flex: 1; min-width: 0; }
.tb-controls { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.tb-menu {
  display: none;
  border: 1px solid #2a2336; background: #0d0a13; color: #c7b5ff;
  width: 38px; height: 36px; border-radius: 8px;
  font-size: 16px; line-height: 1; cursor: pointer;
}
.tb-menu:hover { background: #1c1726; }
.tb-modes {
  display: flex; gap: 2px; padding: 3px;
  background: #0d0a13; border: 1px solid #2a2336; border-radius: 999px;
}
.tb-modes button {
  border: 0; background: transparent; color: #9c93a6;
  font-size: 11.5px; font-weight: 600; padding: 4px 12px; border-radius: 999px;
}
.tb-modes button.on { background: #2a2336; color: #f3eee6; }
.tb-persona {
  display: flex; align-items: center; gap: 6px;
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px;
  color: #79708a;
  background: #0d0a13; border: 1px solid #2a2336;
  padding: 4px 4px 4px 10px; border-radius: 999px; white-space: nowrap;
}
/* ────────────────────────────────────────────────────────────────────
 * Persona picker — custom dropdown (replaces the native <select>).
 *
 * Mounted inside .tb-persona by src/posthog/persona-picker.js. The
 * trigger styles match the pill the select had; the menu is its own
 * floating panel sized to fit the persona descriptions, which the
 * native select couldn't render alongside the labels.
 * ──────────────────────────────────────────────────────────────────── */
.pp-root { position: relative; display: flex; }

.pp-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  border: 0; background: #2a2336; color: #e9e3d8;
  font-family: inherit; font-size: 11.5px; font-weight: 600;
  padding: 3px 12px 3px 10px; border-radius: 999px;
  cursor: pointer; white-space: nowrap;
}
.pp-trigger:hover,
.pp-trigger[aria-expanded="true"] { background: #38304a; }
.pp-trigger-caret { color: #c7b5ff; font-size: 9px; line-height: 1; }

.pp-menu {
  position: absolute;
  top: calc(100% + 6px); right: 0;
  z-index: 40;
  list-style: none; margin: 0; padding: 4px;
  min-width: 240px; max-width: 320px;
  background: #14111b;
  border: 1px solid #2a2336;
  border-radius: 10px;
  box-shadow: 0 12px 28px -10px rgba(0, 0, 0, .6);
}
.pp-menu[hidden] { display: none; }

.pp-item {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 10px;
  border-radius: 7px;
  cursor: pointer;
  font-family: "Inter", system-ui, sans-serif;
  white-space: normal;
}
.pp-item:hover { background: #1c1726; }
.pp-item.on { background: #2a2336; }
.pp-item-label {
  font-size: 12.5px; font-weight: 600; color: #f3eee6;
}
.pp-item.on .pp-item-label { color: #a9e5c2; }
.pp-item-desc {
  font-size: 11px; line-height: 1.4; color: #9c93a6;
}

.tb-visitor {
  display: flex; align-items: center; gap: 8px;
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px;
  color: #c7b5ff; background: #0d0a13; border: 1px solid #2a2336;
  padding: 5px 6px 5px 10px; border-radius: 999px; white-space: nowrap;
}
.tb-visitor b { font-weight: 500; color: #e9e3d8; }
.tb-visitor button {
  border: 0; border-radius: 999px; padding: 2px 9px;
  background: #2a2336; color: #c7b5ff; font-size: 10.5px; font-weight: 600;
}
.tb-visitor button:hover { background: #38304a; }

/* Intermediate viewports — controls inline, title content gives way.
 * The sub-tagline drops first, then the dramatic em phrase, then
 * .tb-title ellipsises whatever remains. Controls stay inline because
 * they're functional. */
@media (max-width: 1280px) { .tb-sub { display: none; } }
@media (max-width: 1080px) { .tb-title em { display: none; } }

/* Narrow viewports — only now do the controls collapse into a
 * dropdown panel. The dropdown reuses the exact same nodes via CSS
 * positioning so handlers and state survive open/close. */
@media (max-width: 920px) {
  .tb-menu { display: inline-flex; align-items: center; justify-content: center; }
  .tb-controls {
    display: none;
    position: absolute;
    top: 100%; right: 8px;
    flex-direction: column; align-items: stretch;
    gap: 10px; padding: 12px;
    background: #14111b;
    border: 1px solid #2a2336; border-top: 0;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 12px 24px -8px rgba(0,0,0,.5);
    min-width: 240px;
    z-index: 40;
  }
  body[data-tb-menu="open"] .tb-controls { display: flex; }
  body[data-tb-menu="open"] .tb-menu {
    background: #1c1726;
    border-color: #38304a;
  }
  .tb-controls .tb-modes,
  .tb-controls .tb-persona,
  .tb-controls .tb-visitor { width: 100%; }
  .tb-controls .tb-modes { justify-content: center; }
  .tb-controls .tb-persona { justify-content: space-between; }
  .tb-controls .tb-visitor { justify-content: space-between; }
  .tb-controls .tb-persona .pp-root,
  .tb-controls .tb-persona .pp-trigger { flex: 1; min-width: 0; }
}
@media (max-width: 520px) {
  #topbar { padding: 0 10px; gap: 8px; }
}

/* ────────────────────────────────────────────────────────────────────
 * Mobile bottom-tab nav (≤ 640px).
 *
 * Replaces the cramped 3-tap journey (hamburger → mode → choice) with
 * one persistent tap. Hidden at tablet+ — the topbar dropdown still
 * carries the mode tabs there.
 *
 * The bar uses a cream surface so it stands out clearly against the
 * dark product canvas (#0f0c14). Active state is a dark pill with
 * the mint accent for text — the same pattern as the hero's "Book a
 * session" CTA, so the affordance reads as a primary action. In
 * panel mode the cream bar sits flush with the cream panel content
 * separated by a subtle border.
 * ──────────────────────────────────────────────────────────────────── */
.mb-tabs {
  display: none;
  flex: 0 0 var(--mobile-tabs-h);
  background: #f3eee6;
  border-top: 1px solid #2a2336;
  /* Soft elevation lifts the bar above the dark product canvas. */
  box-shadow: 0 -6px 16px -10px rgba(0, 0, 0, .55);
  padding: 6px 8px;
  gap: 6px;
  z-index: 30;
  /* Honor home-bar / gesture safe area on iPhone. The tab bar grows
   * to the safe-area inset while the buttons themselves stay anchored
   * inside the tappable region above it. */
  padding-bottom: max(6px, env(safe-area-inset-bottom));
}
.mb-tab {
  flex: 1; display: flex; align-items: center; justify-content: center;
  background: transparent; border: 0;
  color: #6a6477;
  font-family: inherit; font-size: 14px; font-weight: 600;
  letter-spacing: .01em;
  min-height: var(--touch-min);
  border-radius: 999px;
  transition: background .12s ease, color .12s ease;
}
.mb-tab.on { background: #14101c; color: #a9e5c2; }
.mb-tab:active { background: rgba(20, 16, 28, .08); }
.mb-tab.on:active { background: #2c2737; }

@media (max-width: 640px) {
  .mb-tabs { display: flex; }

  /* Bottom tabs carry the mode switcher now; drop it from the topbar
   * and drop the Split option entirely — there's no room to show
   * product and panel side-by-side on a phone. */
  .tb-controls .tb-modes { display: none; }
  .tb-modes button[data-mode="split"] { display: none; }

  /* Coerce a persisted "split" mode to "product" on phones. The JS
   * does the same so the bottom-tab "on" state stays in sync — this
   * is the safety net for first paint. */
  body[data-mode="split"] #panelPane { display: none; }

  /* Reclaim the title's pixels for the primary controls — the
   * PostHog Connect button and the persona ("view as") select ride
   * inline in the topbar. The secondary visitor chip stays in a
   * dropdown that the hamburger still toggles. Title text is
   * decorative and gets the chop. The hamburger gets pushed back to
   * the right edge via flex `order` — its DOM position is before
   * .tb-controls (so the focus order makes sense), but visually it
   * sits where it used to sit when the title was present. */
  .tb-title, .tb-sub, .tb-spacer { display: none; }
  .tb-controls { order: 1; }
  .tb-menu { order: 2; }

  /* Override the ≤920 rule that turned the whole .tb-controls block
   * into an absolute dropdown. At ≤640 the container itself sits
   * inline; only the visitor chip pops out (rule below). */
  .tb-controls {
    display: flex;
    position: static;
    flex-direction: row;
    align-items: center;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    width: auto;
    min-width: 0;
    gap: 8px;
    flex: 1 1 auto;
  }
  .tb-controls .tb-persona,
  .tb-controls .tb-connect { width: auto; }
  /* Persona shrinks to share the strip with Connect; the trigger
   * gets min-width:0 to truncate the persona label gracefully on
   * the narrowest phones. The menu itself is min-width:240px and
   * sits below — it has its own breathing room. */
  .tb-persona { flex: 1 1 auto; min-width: 0; }
  .tb-persona .pp-root { flex: 1 1 auto; min-width: 0; }
  .tb-persona .pp-trigger { min-width: 0; }
  .tb-persona .pp-trigger-label {
    overflow: hidden; text-overflow: ellipsis;
  }

  /* Visitor chip hides by default; the hamburger pops it out as a
   * small absolute panel anchored to the topbar. Re-uses the same
   * `body[data-tb-menu="open"]` attribute the existing JS already
   * toggles for the tablet dropdown. */
  .tb-controls .tb-visitor { display: none; }
  body[data-tb-menu="open"] .tb-controls .tb-visitor {
    display: flex;
    position: absolute;
    top: 100%;
    right: 8px;
    z-index: 40;
    padding: 10px 12px;
    background: #14111b;
    border: 1px solid #2a2336;
    border-top: 0;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 12px 24px -8px rgba(0, 0, 0, .5);
    width: auto;
  }
}

/* split layout */
#split { flex: 1; display: flex; min-height: 0; }

body[data-mode="product"] #panelPane { display: none; }
body[data-mode="panel"]   #productPane,
body[data-mode="panel"]   #sandboxPane { display: none; }
body[data-mode="panel"]   #panelPane { width: 100%; max-width: none; }

/* Left-pane view toggle. Surfaces / Components tabs → product.
 * Constraints tab → sandbox. The panel sets body[data-view]; the
 * pane visibility follows. */
body[data-view="product"] #sandboxPane { display: none; }
body[data-view="sandbox"] #productPane { display: none; }

#productPane,
#sandboxPane {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column;
  background: #0f0c14;
}
#sandboxRoot { flex: 1; overflow: auto; }
#panelPane {
  flex: 0 0 480px;
  display: flex; flex-direction: column;
  background: #f3eee6;
  border-left: 1px solid #241e30;
  min-width: 0;
}

/* On mobile the panel always uses the full viewport when visible —
 * the fixed 480px basis would either squeeze the product (split
 * mode) or overhang the bottom-tab bar (panel mode). Same rule
 * applies whether the user lands in product, panel, or the coerced
 * split mode. */
@media (max-width: 640px) {
  #panelPane { flex: 1 1 auto; border-left: 0; }
}

/* chrome bar on the product side */
.chrome {
  flex: 0 0 36px; display: flex; align-items: center; gap: 10px;
  padding: 0 12px; background: #14111b; border-bottom: 1px solid #241e30;
}
.chrome-dots { display: flex; gap: 6px; }
.chrome-dots span { width: 10px; height: 10px; border-radius: 50%; background: #2e2740; }
.chrome-dots span:first-child  { background: #ff5f57; opacity: .75; }
.chrome-dots span:nth-child(2) { background: #febc2e; opacity: .75; }
.chrome-dots span:nth-child(3) { background: #28c840; opacity: .75; }
.chrome-url {
  flex: 1; max-width: 420px; margin: 0 auto;
  font-family: "JetBrains Mono", monospace; font-size: 10.5px; color: #79708a;
  background: #0d0a13; border: 1px solid #241e30; border-radius: 7px;
  padding: 4px 12px; text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

#productScroll {
  flex: 1; overflow-y: auto; scroll-behavior: smooth;
  background:
    radial-gradient(900px 480px at 12% -6%, rgba(199,181,255,.10), transparent 60%),
    radial-gradient(800px 460px at 95% 12%, rgba(169,229,194,.07), transparent 60%),
    #0f0c14;
  color: #f3eee6;
}