/* PostLake shared styles. Used by every page that is not the marketing landing.
   Mirrors the inline styles in index.html so visuals stay consistent.
   When index.html changes its tokens (colors, fonts, nav), reflect here too. */

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

:root {
  --bg:      #08080c;
  --bg2:     #0e0e14;
  --bg3:     #161618;
  --border:  rgba(255,255,255,0.07);
  --border2: rgba(255,255,255,0.12);
  --accent:  #f97316;
  --accent2: #fb923c;
  --btn:        #b35402;
  --btn-hover:  #933f02;
  --text:    #f8fafc;
  --muted:   #8b97aa;
  --muted2:  #b3bccb;
  --danger:  #f87171;
  --success: #4ade80;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) {
    --bg:      #f5f1ea;
    --bg2:     #ede7db;
    --bg3:     #e2dacb;
    --border:  rgba(11,11,14,0.1);
    --border2: rgba(11,11,14,0.18);
    --accent:  #a8500a;
    --accent2: #8a4204;
    --btn:        #b35402;
    --btn-hover:  #933f02;
    --text:    #0b0b0e;
    --muted:   #5f5f66;
    --muted2:  #2a2a30;
    --danger:  #b91c1c;
    --success: #15803d;
  }
}
:root[data-theme='light'] {
  --bg:      #f5f1ea;
  --bg2:     #ede7db;
  --bg3:     #e2dacb;
  --border:  rgba(11,11,14,0.1);
  --border2: rgba(11,11,14,0.18);
  --accent:  #a8500a;
  --accent2: #8a4204;
  --btn:        #b35402;
  --btn-hover:  #933f02;
  --text:    #0b0b0e;
  --muted:   #5f5f66;
  --muted2:  #2a2a30;
  --danger:  #b91c1c;
  --success: #15803d;
}

html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
:root[data-theme='light'] body {
  background-image: linear-gradient(rgba(0,0,0,0.045) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(0,0,0,0.045) 1px, transparent 1px);
  background-size: 40px 40px;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) body {
    background-image: linear-gradient(rgba(0,0,0,0.045) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(0,0,0,0.045) 1px, transparent 1px);
    background-size: 40px 40px;
  }
}

a { text-decoration: none; color: inherit; }
.mono { font-family: 'Geist Mono', monospace; }
h1, h2, h3, h4 { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; letter-spacing: -0.01em; }
h1 em, h2 em, h3 em { font-style: italic; color: var(--accent); }

/* NAV (mirrors index.html) */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  border-bottom: 1px solid var(--border);
  background: rgba(8,8,12,0.85);
  backdrop-filter: blur(20px);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) nav { background: rgba(255,255,255,0.88); }
}
:root[data-theme='light'] nav { background: rgba(255,255,255,0.88); }
.nav-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 40px;
  height: 58px; display: flex; align-items: center; justify-content: space-between;
}
.logo { display: flex; align-items: center; gap: 9px; color: var(--text); }
.logo-icon {
  width: 26px; height: 26px; border-radius: 6px;
  background: var(--accent); display: flex; align-items: center; justify-content: center;
}
.logo-icon svg { width: 13px; height: 13px; }
.logo-name { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a { color: var(--muted2); font-size: 14px; transition: color .15s; }
.nav-links a:hover { color: var(--text); }
.nav-links a.active { color: var(--text); }
.nav-cta {
  background: var(--btn); color: #fff;
  padding: 8px 18px; border-radius: 7px;
  font-size: 13px; font-weight: 600;
  transition: background .15s, transform .1s;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}
.nav-cta:hover { background: var(--btn-hover); transform: translateY(-1px); }
/* Right cluster: utility (theme) separated from account actions by a divider. */
.nav-right { display: flex; align-items: center; gap: 16px; }
.nav-auth { display: flex; align-items: center; gap: 14px; }
.nav-div { width: 1px; height: 22px; background: var(--border); flex-shrink: 0; }
.nav-signin { color: var(--muted2); font-size: 14px; font-weight: 500; transition: color .15s; }
.nav-signin:hover { color: var(--text); }

/* THEME PILL */
.theme-pill {
  display: flex; align-items: center;
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 999px;
  padding: 2px;
  gap: 1px;
}
.tp-btn {
  width: 26px; height: 26px; border-radius: 999px;
  border: none; background: transparent;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--muted);
  transition: background .15s, color .15s;
  flex-shrink: 0;
}
.tp-btn:hover { color: var(--text); }
.tp-btn.active {
  background: rgba(249,116,60,0.15);
  color: var(--accent);
}
/* Password reveal toggle (Heroicons eye). */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { width: 100%; padding-right: 44px; box-sizing: border-box; }
.pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--muted2); cursor: pointer; padding: 0; border-radius: 6px; }
.pw-toggle:hover { color: var(--text); }
.pw-toggle svg { width: 18px; height: 18px; }

/* FOOTER */
footer { border-top: 1px solid var(--border); background: var(--bg2); padding: 60px 40px 36px; margin-top: 100px; }
.foot-inner { max-width: 1280px; margin: 0 auto; }
.foot-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 48px; }
.foot-desc { font-size: 14px; color: var(--muted); line-height: 1.6; margin-top: 14px; max-width: 260px; }
.foot-col h5 { font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 16px; letter-spacing: .02em; font-family: 'Inter Tight', sans-serif; }
.foot-col a { display: block; font-size: 14px; color: var(--muted); margin-bottom: 10px; transition: color .15s; }
.foot-col a:hover { color: var(--text); }
.soon {
  font-family: 'Geist Mono', monospace; font-size: 9px; letter-spacing: .04em;
  color: var(--muted); border: 1px solid var(--border); border-radius: 4px;
  padding: 1px 5px; margin-left: 7px; vertical-align: middle;
}
.foot-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 28px; border-top: 1px solid var(--border); font-size: 13px; color: var(--muted); }
.foot-links { display: flex; gap: 20px; }
.foot-links a { color: var(--muted); font-size: 13px; transition: color .15s; }
.foot-links a:hover { color: var(--text); }

/* PAGE LAYOUT HELPERS */
.page-wrap { max-width: 1280px; margin: 0 auto; padding: 130px 40px 80px; }
.page-narrow { max-width: 480px; margin: 0 auto; padding: 130px 40px 80px; }
.page-medium { max-width: 920px; margin: 0 auto; padding: 130px 40px 80px; }

/* AUTH CARD (login/signup) */
.auth-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 40px 36px 32px;
}
.auth-head { text-align: center; margin-bottom: 28px; }
.auth-head h1 { font-size: 38px; line-height: 1.05; margin-bottom: 8px; }
.auth-head p { font-size: 14px; color: var(--muted2); }
.oauth-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%;
  background: var(--bg3); border: 1px solid var(--border2);
  border-radius: 9px; padding: 12px 16px;
  font-size: 14px; font-weight: 600; color: var(--text);
  cursor: pointer; font-family: inherit;
  margin-bottom: 10px;
  transition: background .15s, border-color .15s;
}
.oauth-btn:hover { background: var(--bg); border-color: var(--accent); }
.oauth-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.oauth-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 22px 0; font-size: 12px;
  color: var(--muted); font-family: 'Geist Mono', monospace; letter-spacing: .04em;
}
.oauth-divider::before, .oauth-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--border);
}
.form-row { margin-bottom: 14px; }
.form-row label {
  display: block; font-size: 12px; font-weight: 600;
  color: var(--muted2); margin-bottom: 6px;
  font-family: 'Geist Mono', monospace; letter-spacing: .04em; text-transform: uppercase;
}
.form-row input[type="email"], .form-row input[type="password"], .form-row input[type="text"] {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border2);
  border-radius: 8px;
  padding: 11px 14px;
  font-size: 15px; color: var(--text);
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.form-row input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(249,115,22,0.15);
}
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 380px) { .form-row-2 { grid-template-columns: 1fr; } }
.btn-primary {
  width: 100%;
  background: var(--btn); color: #fff;
  padding: 12px 18px; border-radius: 9px;
  border: 0;
  font-size: 14px; font-weight: 600;
  cursor: pointer; font-family: inherit;
  transition: background .15s, transform .1s;
}
.btn-primary:hover { background: var(--btn-hover); transform: translateY(-1px); }
.btn-primary:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn-secondary {
  display: inline-block;
  background: var(--bg3); color: var(--text);
  padding: 10px 18px; border-radius: 9px;
  border: 1px solid var(--border2);
  font-size: 14px; font-weight: 600;
  cursor: pointer; font-family: inherit;
  transition: background .15s, border-color .15s;
}
.btn-secondary:hover { background: var(--bg); border-color: var(--accent); }
.auth-foot {
  text-align: center; margin-top: 20px;
  font-size: 13px; color: var(--muted);
}
.auth-foot a { color: var(--accent); font-weight: 600; }
.auth-foot a:hover { text-decoration: underline; }
.error-banner {
  background: rgba(248,113,113,0.08);
  border: 1px solid rgba(248,113,113,0.3);
  color: var(--danger);
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 14px;
  display: none;
}
.error-banner.show { display: block; }

/* PRICING PAGE bits that diverge from index.html section */
.pp-head { text-align: center; max-width: 720px; margin: 0 auto 36px; }
.pp-label {
  font-family: 'Geist Mono', monospace; font-size: 12px;
  color: var(--accent); letter-spacing: .08em; text-transform: uppercase;
  margin-bottom: 12px;
}
.pp-head h1 { font-size: clamp(48px, 7vw, 84px); line-height: 1.0; margin-bottom: 18px; }
.pp-head p { font-size: 16px; color: var(--muted2); }

/* Responsive */
/* Mobile nav: hamburger + drop-down panel. Base = hidden; the media query
   below turns it on. These base rules MUST precede the media query so the
   media query's display wins at mobile widths (equal specificity → source order). */
/* Mobile header actions: theme pill + burger, shown only at mobile widths. */
.nav-m-actions { display: none; align-items: center; gap: 10px; }
.nav-burger {
  display: none; align-items: center; justify-content: center;
  width: 40px; height: 36px; padding: 0;
  border: 1px solid var(--border); border-radius: 9px;
  background: transparent; color: var(--text); cursor: pointer;
}
.nav-burger:hover { opacity: .7; }
.nav-mobile { display: none; flex-direction: column; padding: 14px 20px 22px; border-top: 1px solid var(--border); }
.nav-mobile.open { display: flex; }
.nm-links { display: flex; flex-direction: column; }
.nm-links a { color: var(--text); font-size: 16px; padding: 12px 4px; }
.nm-links a.active { color: var(--accent); font-weight: 600; }
.nm-sep { height: 1px; background: var(--border); margin: 10px 0; }
.nm-foot { display: flex; align-items: center; justify-content: space-between; padding: 6px 4px; }
.nm-theme-label { font-size: 13px; color: var(--muted2); }
.nm-cta { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.nm-cta .nav-div { display: none; }
.nm-cta .nav-auth { display: flex; flex-direction: column; gap: 10px; }
.nm-cta .nav-cta, .nm-cta .nav-signin { display: block; width: 100%; box-sizing: border-box; text-align: center; padding: 12px; }
.nm-cta .nav-signin { border: 1px solid var(--border); border-radius: 7px; }

@media (max-width: 860px) {
  .nav-inner { padding: 0 20px; }
  .nav-links { display: none; }
  .nav-right { display: none; }
  .nav-m-actions { display: flex; }
  .nav-burger { display: inline-flex; }
  .page-wrap { padding: 110px 20px 60px; }
  .page-narrow { padding: 110px 20px 60px; }
  .page-medium { padding: 110px 20px 60px; }
  .foot-top { grid-template-columns: 1fr 1fr; gap: 32px; }
  .auth-card { padding: 28px 22px; }
}

/* ── Legal / policy pages ─────────────────────────────────────── */
.legal { max-width: 820px; margin: 0 auto; padding: 64px 28px 32px; }
.legal-eyebrow { font-family:'Geist Mono',monospace; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin-bottom:14px; }
.legal h1 { font-family:'Instrument Serif',Georgia,serif; font-weight:400; font-size:46px; line-height:1.05; letter-spacing:-0.01em; margin-bottom:10px; }
.legal .updated { font-family:'Geist Mono',monospace; font-size:12px; color:var(--muted); margin-bottom:18px; }
.legal .lead { font-size:17px; color:var(--muted2); line-height:1.7; }
.legal .toc { display:flex; flex-wrap:wrap; gap:8px 18px; margin:26px 0 6px; padding:16px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.legal .toc a { font-size:13px; color:var(--muted); }
.legal .toc a:hover { color:var(--accent); }
.legal h2 { font-size:22px; font-weight:700; letter-spacing:-0.01em; margin:46px 0 10px; scroll-margin-top:90px; }
.legal h3 { font-size:15px; font-weight:600; color:var(--text); margin:22px 0 6px; }
.legal p, .legal li { color:var(--muted2); font-size:15px; line-height:1.75; }
.legal p { margin-bottom:12px; }
.legal ul { margin:10px 0 16px 22px; }
.legal li { margin-bottom:8px; }
.legal strong { color:var(--text); font-weight:600; }
.legal a { color:var(--accent); }
.legal table { width:100%; border-collapse:collapse; margin:14px 0 22px; font-size:14px; }
.legal th, .legal td { text-align:left; padding:10px 12px; border:1px solid var(--border); color:var(--muted2); vertical-align:top; line-height:1.55; }
.legal th { color:var(--text); font-weight:600; background:var(--bg2); }
.legal .note { background:var(--bg2); border:1px solid var(--border); border-radius:12px; padding:15px 18px; margin:22px 0; font-size:14px; color:var(--muted2); }
.legal .note strong { color:var(--text); }