@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500&family=JetBrains+Mono:wght@400;700&display=swap');

:root {
  /* ── Square One Square design tokens (single source of truth) ──────────────────
     A single warm-paper (cream) theme — matches the hand-drawn chapter illustrations. */
  --bg:          #f3e7d7;   /* warm paper — EXACT colour sampled from the illustrations */
  --surface:     #ecdfcc;   /* header / raised chrome (slightly deeper than bg) */
  --card:        #faf1e4;   /* cards, panels (slightly lighter than bg, for lift) */
  --brand:       #3a2c1c;   /* warm dark ink — brand text (logo, headings, cards) */
  --brand-hi:    #1f1810;   /* darker ink for hover */
  --brand-dim:   #7a5a2c;   /* muted brown for secondary brand text */
  --ink:         #2b3a42;   /* calm slate-teal for tool text */
  --ink-soft:    #4a5a62;   /* softer slate for hints/body */
  --accent:      #2d7d9a;   /* interactive accent (links, focus, hover borders) */
  --highlight:   #d9822b;
  --success:     #2f9e44;
  --danger:      #e03131;
  --text:        #2a2018;   /* primary body text */
  --muted:       #7a6c58;   /* secondary text */
  --border:      rgba(60,44,28,0.14);
  /* radius scale — use these, not one-off values */
  --radius-sm:   8px;
  --radius:      12px;
  --radius-lg:   16px;
  --radius-pill: 999px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

html, body {
  max-width: 100%;
  overflow-x: hidden;   /* never allow horizontal scroll */
}
body {
  /* Square One Square — warm paper cream, matching the hand-drawn illustrations. */
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  line-height: 1.6;
  min-height: 100vh;
  position: relative;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { font-family: 'Space Grotesk', sans-serif; line-height: 1.25; }

/* ── Header ─────────────────────────────────────────────────────────────────── */
.site-header {
  background: rgba(243, 231, 215, 0.9);   /* warm paper, matching the backdrop */
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 0 24px;
}
.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 60px;
}
.logo {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--brand);
  white-space: nowrap;
}
.logo:hover { text-decoration: none; color: var(--brand-hi); }

/* ── Back button (top-left) ──────────────────────────────────────────────────── */
.nav-back {
  order: -1;                 /* sit at the far LEFT of the header, before the logo */
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px 7px 11px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
  color: var(--brand);
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.back-btn:hover {
  text-decoration: none;
  background: rgba(56,189,248,0.14);
  border-color: rgba(56,189,248,0.5);
  transform: translateX(-2px);
}
.back-btn .back-arrow {
  font-size: 16px;
  line-height: 1;
  transition: transform .15s ease;
}
.back-btn:hover .back-arrow { transform: translateX(-3px); }

/* ── Mobile ──────────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .site-header { padding: 0 14px; }
  .header-inner { gap: 10px; }
  .logo { font-size: 15px; }
  .back-btn { padding: 6px 12px 6px 10px; font-size: 12px; }
}

/* ── Footer ──────────────────────────────────────────────────────────────────── */
.site-footer {
  text-align: center;
  padding: 32px 24px;
  color: var(--muted);
  font-size: 13px;
  border-top: 1px solid var(--border);
  margin-top: auto;
}

/* ── Loading / Empty ─────────────────────────────────────────────────────────── */
.loading-placeholder, .empty-state {
  color: var(--muted);
  text-align: center;
  padding: 48px 24px;
  font-size: 15px;
}

/* The header auth controls (back button, login pill) on the cream page. */
.back-btn, .sqos-authbtn {
  background: rgba(60,44,28,0.06); border-color: var(--border);
}
.back-btn:hover, .sqos-authbtn:hover {
  background: rgba(122,90,44,0.14); border-color: rgba(122,90,44,0.5);
}
.sqos-avatar { color: var(--bg); background: var(--brand); border-color: rgba(60,44,28,0.4); }

/* ═══════════════════════════════════════════════════════════════════════════════
   DESKTOP REDESIGN ZONE  (≥ 769px only)
   New desktop design lives here. Rules inside this media query NEVER apply on mobile,
   so the mobile experience stays frozen at the v1 layout. Put all desktop redesign
   overrides in this block. Mobile = everything OUTSIDE this block (unchanged).
   ═══════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
  /* --- new desktop styles go here --- */
}