/* encryptmyai — shared brand tokens, reset, base, topbar, footer.
   Page-specific styles stay inline per page (ailetterbox pattern),
   this file carries only what every page needs identically. */

:root {
  --bg:#fafaf7; --bg-soft:#f3f1ec;
  --card:#ffffff;
  --ink:#14130f; --ink-mid:#6b6a64; --ink-faint:#5a5854;
  --line:rgba(20,19,15,.14); --line-strong:rgba(20,19,15,.24);
  --accent:#d94a17; --green:#1a8a4a; --amber:#c97b00; --red:#c4260c;
  --display:'Fraunces',Georgia,serif;
  --body:'Inter Tight',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}

* { margin:0; padding:0; box-sizing:border-box; }
html, body {
  background:var(--bg); color:var(--ink); font-family:var(--body);
  line-height:1.55; -webkit-font-smoothing:antialiased;
}
a { color:inherit; text-decoration:none; }
button { font-family:inherit; }
.wrap { max-width:1080px; margin:0 auto; padding:0 1.5rem; }
.wrap-narrow { max-width:720px; margin:0 auto; padding:0 1.5rem; }

/* ---------- Top bar ---------- */
.topbar { padding:1.5rem 0; border-bottom:1px solid var(--line); }
.topbar-inner { display:flex; align-items:center; justify-content:space-between; }
.wordmark {
  font-family:var(--display); font-weight:500; font-size:1.25rem;
  letter-spacing:-0.01em; color:var(--ink);
}
.wordmark em { font-style:normal; color:var(--accent); }
.topbar-nav {
  display:flex; align-items:center; gap:1.25rem;
  font-family:var(--mono); font-size:0.7rem;
  letter-spacing:0.14em; text-transform:uppercase;
  color:var(--ink-mid); font-weight:500;
}
.topbar-nav a { color:var(--ink-mid); }
.topbar-nav a:hover { color:var(--accent); }
.topbar-nav a.active { color:var(--accent); }
.topbar-nav .nav-pill {
  background:var(--accent); color:#fff;
  padding:0.45rem 0.95rem; border-radius:100px;
  transition:background .12s;
}
.topbar-nav .nav-pill:hover { background:var(--ink); color:#fff; }
.topbar-nav .nav-user {
  color:var(--ink-mid); max-width:16rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  padding-right:0.75rem; border-right:1px solid var(--line);
  text-transform:none; letter-spacing:0.02em;
  font-size:0.72rem;
}

/* ---------- Mobile hamburger menu ---------- */
.hamburger {
  display:none;
  background:none; border:none; padding:0.5rem;
  cursor:pointer; color:var(--ink);
  z-index:110;
  width:44px; height:44px;
  align-items:center; justify-content:center;
}
.hamburger svg { display:block; width:24px; height:24px; }
.hamburger .icon-close { display:none; }
body.mobile-nav-open .hamburger .icon-open { display:none; }
body.mobile-nav-open .hamburger .icon-close { display:block; }

@media (max-width: 720px) {
  .hamburger { display:flex; }
  .topbar-nav {
    display:none;
    position:fixed; inset:0;
    background:var(--bg);
    flex-direction:column; align-items:center; justify-content:center;
    gap:2rem; font-size:0.9rem; letter-spacing:0.16em;
    z-index:100;
    padding:5rem 2rem 3rem;
  }
  body.mobile-nav-open .topbar-nav { display:flex; }
  body.mobile-nav-open { overflow:hidden; }
  .topbar-nav .nav-pill { padding:0.7rem 1.5rem; font-size:0.9rem; }
  .topbar-nav .nav-user {
    max-width:16rem; font-size:0.8rem;
    padding-right:0; border-right:none; border-bottom:1px solid var(--line);
    padding-bottom:1rem; margin-bottom:0.5rem;
  }
}

/* ---------- Footer (mirrors ailetterbox pattern) ---------- */
.footer {
  padding:3rem 0 2rem;
  font-family:var(--mono); font-size:0.72rem;
  letter-spacing:0.08em; color:var(--ink-mid);
  border-top:1px solid var(--line);
  margin-top:4rem;
}
.footer a:hover { color:var(--ink); }
.footer-grid {
  display:flex; justify-content:space-between;
  align-items:flex-start; gap:2rem;
  padding-bottom:2.5rem;
}
.footer-brand { display:flex; flex-direction:column; gap:0.5rem; }
.footer-wordmark {
  font-family:var(--display); font-weight:500;
  font-size:1.5rem; color:var(--ink);
  letter-spacing:-0.01em; text-transform:none;
}
.footer-wordmark em { font-style:normal; color:var(--accent); }
.footer-tagline {
  font-family:var(--mono); font-size:0.7rem;
  color:var(--ink-mid); letter-spacing:0.14em;
  text-transform:uppercase; font-weight:500;
}
/* Links stacked vertically on the right (ailetterbox-style) */
.footer-links {
  display:flex; flex-direction:column; gap:0.75rem;
  align-items:flex-end; text-align:right;
  text-transform:uppercase; letter-spacing:0.14em;
  font-size:0.7rem; font-weight:500;
}
.footer-mantra {
  text-align:center; padding:1.25rem 0 0.5rem;
  color:var(--accent);
  text-transform:uppercase; letter-spacing:0.14em;
  font-size:0.78rem; font-weight:600;
}
.footer-copy {
  text-align:center;
  font-size:0.65rem; color:var(--ink-faint);
  letter-spacing:0.08em;
}

/* Mobile: everything centre-stacked */
@media (max-width: 720px) {
  .footer-grid {
    flex-direction:column; align-items:center;
    text-align:center; gap:1.5rem;
  }
  .footer-brand { align-items:center; }
  .footer-links { align-items:center; text-align:center; gap:0.85rem; }
}

/* ---------- Inline brand mark (for use in headings/body copy) ---------- */
.brand {
  text-transform:none;
  letter-spacing:-0.005em;
}
.brand em { font-style:normal; color:var(--accent); }

/* ---------- Common UI primitives ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:0.5rem;
  padding:0.85rem 1.4rem;
  background:var(--accent); color:#fff;
  font-family:var(--mono); font-size:0.85rem;
  font-weight:500; letter-spacing:0.04em;
  border:none; border-radius:10px;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
  box-shadow:0 2px 0 rgba(20,19,15,.12);
  text-decoration:none;
}
.btn:hover { transform:translateY(-1px); box-shadow:0 4px 14px rgba(217,74,23,.28); }
.btn:disabled { opacity:0.5; cursor:not-allowed; transform:none; box-shadow:0 2px 0 rgba(20,19,15,.12); }
.btn.btn-secondary {
  background:transparent; color:var(--ink);
  border:1px solid var(--line-strong);
  box-shadow:none;
}
.btn.btn-secondary:hover { background:var(--bg-soft); color:var(--ink); box-shadow:none; }
.btn.btn-ghost {
  background:transparent; color:var(--ink-mid);
  box-shadow:none; padding:0.5rem 0.75rem;
  font-size:0.78rem;
}
.btn.btn-ghost:hover { color:var(--ink); background:var(--bg-soft); box-shadow:none; }

.notice {
  padding:1rem 1.25rem; border-radius:8px;
  font-family:var(--body); font-size:0.95rem;
  background:var(--bg-soft);
  border-left:3px solid var(--line-strong);
  color:var(--ink-faint);
}
.notice.notice-warn { border-left-color:var(--amber); }
.notice.notice-error { border-left-color:var(--red); color:var(--ink); }
.notice.notice-info { border-left-color:var(--accent); }
.notice code {
  font-family:var(--mono); font-size:0.85rem;
  background:rgba(20,19,15,.06); padding:0.1rem 0.35rem; border-radius:3px;
}

.eyebrow-label {
  font-family:var(--mono); font-size:0.72rem;
  letter-spacing:0.12em; text-transform:uppercase;
  color:var(--accent);
}

input[type="email"], input[type="text"], input[type="password"], textarea {
  font-family:var(--body); font-size:1rem;
  padding:0.85rem 1rem;
  background:#fff; color:var(--ink);
  border:1px solid var(--line-strong);
  border-radius:8px;
  width:100%;
  transition:border-color .12s;
}
input[type="email"]:focus, input[type="text"]:focus, input[type="password"]:focus, textarea:focus {
  outline:none; border-color:var(--accent);
}
label {
  display:block;
  font-family:var(--mono); font-size:0.72rem;
  letter-spacing:0.1em; text-transform:uppercase;
  color:var(--ink-mid);
  margin-bottom:0.5rem;
}