/* Sessions AI — website design system
 * Tokens + base + behavior for the static marketing site, built from the Claude
 * Design handoff (project "Sessions AI website redesign"). Mirrors Theme.swift.
 *
 * Dark is the default appearance; the light palette flips automatically under
 * `@media (prefers-color-scheme: light)` — no theme script needed.
 *
 * Fonts: the app uses Apple's SF Pro / SF Mono (not web-redistributable). Real SF
 * leads each stack so Apple devices render natively; Inter + JetBrains Mono are the
 * cross-platform web fallback. Upload licensed SF webfonts for pixel-exact parity.
 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

@font-face {
  font-family: "SF Pro Text";
  src: local("SF Pro Text"), local("SFProText-Regular"), local("-apple-system");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "SF Pro Display";
  src: local("SF Pro Display"), local("SFProDisplay-Regular"), local("-apple-system");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "SF Mono";
  src: local("SF Mono"), local("SFMono-Regular");
  font-weight: 400 600;
  font-display: swap;
}

:root {
  /* ── Brand — sage mint (the "on-device" signal) ── */
  --brand:        #8BD9B9;
  --brand-deep:   #5BAE91;
  --brand-soft:   rgba(139, 217, 185, 0.14);
  --brand-glow:   radial-gradient(120% 80% at 30% 20%, rgba(139,217,185,0.35), rgba(139,217,185,0) 60%);
  --brand-grad:   linear-gradient(135deg, #8BD9B9 0%, #6FC2D4 50%, #A39BE8 100%);
  --brand-grad-soft: linear-gradient(135deg, rgba(139,217,185,0.22), rgba(163,155,232,0.18));
  --ink-on-brand: #0B1A14;

  /* ── Warm — peach (creative / image generation) ── */
  --warm:      #E8A87C;
  --warm-soft: rgba(232, 168, 124, 0.16);

  /* ── Signal colors (tool-kind tints) ── */
  --sig-positive: #7DD3A4;
  --sig-warning:  #F4B860;
  --sig-negative: #F08D8D;
  --sig-info:     #7AB8E8;
  --sig-special:  #A39BE8;

  /* ── Dark surfaces (default) ── */
  --bg:          #0A0B0D;
  --bg-elev:     #101216;
  --surf-1:      #14171C;
  --surf-2:      #1B1F26;
  --surf-3:      #232830;
  --border:      #272C35;
  --border-soft: #1F232B;
  --hairline:    rgba(255, 255, 255, 0.06);

  /* ── Dark foreground (text) ── */
  --fg:       #ECEEF0;
  --fg-2:     #C7CCD3;
  --fg-muted: #8B92A0;
  --fg-dim:   #5B6270;

  /* ── Chat bubbles & chrome ── */
  --bubble-user-bg:     linear-gradient(180deg, #1A2A3A 0%, #0F2030 100%);
  --bubble-user-border: rgba(138, 179, 220, 0.18);
  --bubble-ai-bg:       transparent;
  --tabbar-bg: rgba(20, 23, 28, 0.85);
  --mark-bg:   rgba(244, 184, 96, 0.32);

  /* ── Typography ── */
  --font:         -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  /* ── Spacing scale: 4 · 8 · 12 · 16 · 20 · 24 · 32 · 40 ── */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;

  /* ── Corner radii ── */
  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;
  --r-card: 16px; --r-sheet: 22px; --r-bubble: 18px; --r-inset: 8px;

  /* ── Elevation ── */
  --elev-card:   0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px rgba(0,0,0,0.35);
  --elev-pop:    0 24px 60px rgba(0,0,0,0.55), 0 2px 0 rgba(255,255,255,0.04) inset;
  --elev-sheet:  0 -20px 60px rgba(0,0,0,0.45);
  --elev-dialog: 0 24px 70px rgba(0,0,0,0.5);
  --elev-brand:  0 2px 10px rgba(139,217,185,0.25), inset 0 1px 0 rgba(255,255,255,0.4);

  /* ── Glass / blur & motion ── */
  --blur-glass: blur(20px) saturate(160%);
  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.15s; --dur-base: 0.2s; --dur-slow: 0.35s;
}

/* ── Light appearance (auto) ── */
@media (prefers-color-scheme: light) {
  :root {
    --bg:          #FBFAF8;
    --bg-elev:     #FFFFFF;
    --surf-1:      #FFFFFF;
    --surf-2:      #F4F2EE;
    --surf-3:      #ECE9E3;
    --border:      #E5E1DA;
    --border-soft: #EFECE6;
    --hairline:    rgba(0, 0, 0, 0.06);

    --fg:       #15171A;
    --fg-2:     #2E3238;
    --fg-muted: #6B7180;
    --fg-dim:   #9AA0AC;

    --bubble-user-bg:     linear-gradient(180deg, #E8F2FC 0%, #DCE9F7 100%);
    --bubble-user-border: rgba(60, 110, 170, 0.18);
    --tabbar-bg: rgba(255, 255, 255, 0.82);
    --mark-bg:   rgba(244, 184, 96, 0.40);
  }
}

/* ── Base reset ── */
html, body { margin: 0; padding: 0; background: var(--bg); }
html { scroll-behavior: smooth; }
* { box-sizing: border-box; }
a { text-decoration: none; }
::selection { background: var(--brand-soft); }
[id] { scroll-margin-top: 88px; }

/* ── Motion ── */
@keyframes sa-pulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.15); }
}
@keyframes sa-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes saFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* ── Hover behavior (replaces the prototype's `style-hover` attribute) ── */
.foot-link { transition: color var(--dur-fast) var(--ease-standard); }
.foot-link:hover { color: var(--fg) !important; }
.btn-brand   { transition: filter var(--dur-fast) var(--ease-standard); }
.btn-brand:hover   { filter: brightness(1.05); }
.btn-surface { transition: background var(--dur-fast) var(--ease-standard); }
.btn-surface:hover { background: var(--surf-3) !important; }
.doc-link  { transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard); }
.doc-link:hover  { background: var(--surf-2) !important; color: var(--fg) !important; }
.hover-border { transition: border-color var(--dur-fast) var(--ease-standard); }
.hover-border:hover { border-color: var(--brand) !important; }
.tier-chip { transition: border-color var(--dur-fast) var(--ease-standard); }
.tier-chip--brand:hover   { border-color: var(--brand) !important; }
.tier-chip--info:hover    { border-color: var(--sig-info) !important; }
.tier-chip--special:hover { border-color: var(--sig-special) !important; }
.tier-chip--warm:hover    { border-color: var(--warm) !important; }

/* App Store badge swap: white wordmark on dark, black on light */
.badge-light { display: none; }
@media (prefers-color-scheme: light) {
  .badge-dark  { display: none !important; }
  .badge-light { display: block !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   Responsive site header — no-JS <details> menu
   ≥1024px: original horizontal nav · <1024px: hamburger + floating panel
   ════════════════════════════════════════════════════════════════════════ */
.sa-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--tabbar-bg);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  border-bottom: 1px solid var(--hairline);
}
.sa-nav { max-width: 1120px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; gap: 24px; }
.sa-brand { display: inline-flex; align-items: center; gap: 9px; margin-right: auto; }

.sa-navlink {
  padding: 8px 12px; border-radius: 999px;
  font-size: 13.5px; font-weight: 540; color: var(--fg-muted); white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-standard);
}
.sa-navlink:hover, .sa-navlink.is-active { color: var(--fg); }

/* .sa-dl carries only layout/colour; the hover-brightness comes from the
   shared .btn-brand class on the same element (no duplicated hover rule). */
.sa-dl {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 36px; padding: 7px 16px; border-radius: 999px;
  background: var(--brand); color: var(--ink-on-brand);
  font-weight: 640; font-size: 13.5px; box-shadow: var(--elev-brand); white-space: normal;
}

/* hamburger lives in the <summary>; the menu/close icons swap via [open] */
.sa-burger {
  list-style: none; cursor: pointer;
  width: 40px; height: 40px; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--surf-2); border: 1px solid var(--border); color: var(--fg);
}
.sa-burger::-webkit-details-marker { display: none; }
.sa-burger::marker { content: ""; }
.sa-burger-close { display: none; }
.sa-menu[open] .sa-burger-open  { display: none; }
.sa-menu[open] .sa-burger-close { display: block; }

/* The link panel is a SIBLING of <details> (not a child), so it is never
   trapped inside a collapsed <details> — that hiding is not reliably
   overridable in Safari/Firefox. On mobile the panel is toggled via the
   `details[open] ~ panel` sibling selector. */

/* ≥1024px — original horizontal nav, no hamburger */
@media (min-width: 1024px) {
  .sa-menu { display: none; }                                /* hide the hamburger toggle */
  .sa-menu-panel { display: flex; align-items: center; gap: 24px; }
  .sa-links { display: flex; align-items: center; gap: 4px; }
}

/* <1024px — hamburger + floating dropdown panel */
@media (max-width: 1023.98px) {
  .sa-menu-panel {
    display: none;
    position: absolute; top: calc(100% + 8px); right: 24px; z-index: 60;
    flex-direction: column; align-items: stretch; gap: 6px;
    min-width: 220px; max-width: calc(100vw - 48px);
    padding: 10px; border-radius: 16px;
    background: var(--bg-elev); border: 1px solid var(--border); box-shadow: var(--elev-pop);
  }
  .sa-menu[open] ~ .sa-menu-panel { display: flex; }
  .sa-links { display: flex; flex-direction: column; gap: 2px; }
  .sa-navlink { padding: 10px 12px; }
  .sa-dl { width: 100%; margin-top: 4px; }
}

/* ════════════════════════════════════════════════════════════════════════
   Multi-column layouts → reflow via flex-wrap (content-based, no breakpoint)
   A percentage flex-basis fixes the desktop column count regardless of how
   wide the container is (full-width, the 920px contact column, the 760px docs
   article, narrow callouts). The min-width is the reflow trigger: once a column
   can't hold that width it wraps, collapsing N→…→1 as the viewport narrows.
   gap / align-items / max-width stay inline on the element.
   ════════════════════════════════════════════════════════════════════════ */
.sa-cols { display: flex; flex-wrap: wrap; }
/* min-width is the reflow trigger, but min(…, 100%) lets a column shrink to the
   container on very narrow phones so it never forces horizontal overflow. */
.sa-cols--split  > * { flex: 1 1 46%; min-width: min(320px, 100%); } /* two big columns: hero, tools band, support top */
.sa-cols--4      > * { flex: 1 1 22%; min-width: min(200px, 100%); } /* how-it-works 4-up */
.sa-cols--3      > * { flex: 1 1 30%; min-width: min(210px, 100%); } /* features 3-up, docs personas 3-up (210 keeps 3-up in the TOC-narrowed docs column) */
.sa-cols--2      > * { flex: 1 1 46%; min-width: min(280px, 100%); } /* 2-up card grids */
.sa-cols--checks > * { flex: 1 1 44%; min-width: min(200px, 100%); } /* compact 2-up checklists */

/* Documentation body — fixed TOC sidebar; hidden below 1024px */
.sa-doc-body { display: grid; grid-template-columns: 228px 1fr; gap: 56px; align-items: start; }
@media (max-width: 1023.98px) {
  .sa-doc-body { grid-template-columns: 1fr; }
  .sa-doc-toc { display: none; }
}

/* Let button labels wrap and grow the button instead of overflowing */
.btn-brand, .btn-surface { white-space: normal; }