/* Everlit Candle — shared site styles (mobile-first).
   Tokens come from css/tokens.css (copy of everlit-docs/design/tokens.css).
   Design rule (BRIEF.md): the flame is the ONLY thing alive on the page —
   no scroll animations, no parallax, no hover motion, no transitions. */

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

html{ background:var(--bg) }
body{
  background:var(--bg);
  color:var(--text-hi);
  font:400 var(--size-body)/var(--lh-body) var(--font-body);
  -webkit-font-smoothing:antialiased;
}

/* ---------- layout: one message per screen ---------- */
.screen{
  min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:48px var(--pad-page);
  width:100%; max-width:var(--content-max); margin:0 auto;
}
.screen--flex-top{ justify-content:flex-start }
/* Mobile: give each section a little breathing room at the top. The
   scroll-margin keeps in-page anchor jumps (e.g. "Get Started" → easy-steps)
   from landing flush under the sticky nav — it leaves the same 40px gap.
   (nav height ~57px + 40px gap.) */
@media (max-width:767px){ .screen{ margin-top:40px; scroll-margin-top:97px } }

/* ---------- type ---------- */
.display{
  font-family:var(--font-display); font-weight:500;
  font-size:var(--h2); line-height:1.2;              /* section scale 32→49.6px */
  color:var(--ink); text-align:center; text-wrap:pretty;
}
h1.display{ font-size:var(--h1); line-height:1.08; letter-spacing:-.01em } /* hero 43→73.6px */
.display em{ font-style:italic }
.prayer{ font-family:var(--font-display); font-style:italic; font-weight:400; color:var(--text-hi) }
.body-text{ color:var(--text-mid); text-align:center; text-wrap:pretty; max-width:520px } /* --text-mid = #A7B3A6 */
.meta{
  font-family:var(--font-body); font-weight:500; font-size:var(--size-meta);
  letter-spacing:var(--track-meta); text-transform:uppercase; color:var(--text-low);
  text-align:center;
}
/* Section eyebrow — a small pill label above a section title. Uses the hero
   trust/meta text style (Figtree italic, uppercase, tracked, text-low) with a
   pill outline (radius = half the height). */
.section-eyebrow{
  display:inline-block; margin-bottom:32px;
  font-family:var(--font-body); font-weight:500; font-style:italic;
  font-size:12px; letter-spacing:var(--track-meta); text-transform:uppercase;
  color:var(--text-low); text-align:center;
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius-pill); padding:7px 16px;
}

/* ---------- actions ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  width:fit-content; min-height:54px; padding:0 30px;
  border-radius:var(--radius-pill);
  font-family:var(--font-body); font-weight:500; font-size:1.2rem;
  cursor:pointer; text-decoration:none;
}
/* Primary = the amber "Light My Candle" action. Everything else is ghost. */
.btn-primary{ background:var(--accent); color:var(--accent-ink); border:none }
.btn-secondary, .btn-ghost{ background:transparent; color:var(--text-hi); border:1px solid var(--line) }
/* opt-in full width (e.g. hero stacked buttons on mobile) */
.btn-full{ width:100%; max-width:420px }
.quiet-link{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--tap-min); padding:0 12px;
  color:var(--text-mid); font-size:1.125rem; text-decoration:none;
  /* also used on <button> (auth sheet): strip the native button chrome */
  background:none; border:0; cursor:pointer; font-family:var(--font-body);
}

/* ---------- candle card — ONE small fixed card, used everywhere ----------
   160 x 259 px on the main-page Wall section, the Wall page, and My Candles.
   Subtle depth so it lifts off the page; a gentle hover raise (reduced-motion
   safe). The prayer is the focus (larger); the meta is quiet (smaller). */
.candle-card{
  position:relative; width:160px; height:259px;
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  overflow:hidden; display:block; text-decoration:none;
  box-shadow:0 2px 6px rgba(0,0,0,.34), 0 12px 26px rgba(0,0,0,.30);
  transition:transform .18s ease, box-shadow .18s ease;
}
@media (hover:hover){
  .candle-card:hover{
    transform:translateY(-4px);
    box-shadow:0 8px 16px rgba(0,0,0,.46), 0 22px 44px rgba(0,0,0,.38);
  }
}
@media (prefers-reduced-motion:reduce){
  .candle-card{ transition:none }
  .candle-card:hover{ transform:none }
}
/* The flame canvas has FIXED width/height attributes (336x260 logical px) and
   is mounted with autoSize:false, so every card's flame renders identically.
   CSS scales the display to the fixed card width. */
.candle-card canvas{ display:block; width:100%; height:auto }
.candle-card .card-body{ padding:10px 11px 12px }
.candle-card .card-prayer{
  font-family:var(--font-display); font-style:italic; font-size:1.15rem; line-height:1.34;
  color:var(--text-hi);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.candle-card .card-meta{
  margin-top:7px; font-weight:500; font-size:.7rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--text-low);
}
/* "E" = minted on-chain (Everlit); "Minting…" = payment in, mint running.
   Shared by the Wall and My Candles cards. Quiet, secondary-button styling —
   a subtle bordered chip, not an accent fill. */
.everlit-badge{
  position:absolute; top:8px; left:8px; z-index:2;
  display:inline-flex; align-items:center; justify-content:center;
  min-width:20px; height:20px; padding:0 5px;
  font:600 .72rem/1 var(--font-body); letter-spacing:.02em;
  color:var(--text-mid); background:rgba(12,19,16,.55);
  border:1px solid var(--line); border-radius:var(--radius-pill);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
.everlit-badge.minting{ color:var(--text-hi); border-color:rgba(232,165,75,.4) }
/* Cards keep their exact size everywhere; they flow 2-up on phones and wrap
   into more columns on wider screens. auto-fit (not auto-fill) collapses empty
   trailing tracks so justify-content:center can actually centre an under-filled
   row — e.g. 3 cards sit centred rather than shoved to the left. */
.wall-grid{
  display:grid; grid-template-columns:repeat(auto-fit, 160px);
  justify-content:center; gap:16px 14px; width:100%;
}

/* ---------- share panel (candle.html / success.html / share.html) ---------- */
.share-fallback{ width:100%; max-width:400px; margin-top:18px;
  display:flex; flex-direction:column; gap:12px; align-items:center }
.share-url{ width:100%; min-height:46px; padding:0 14px; background:var(--card);
  border:1px solid var(--line); border-radius:12px; color:var(--text-mid);
  font:400 1rem var(--font-body) }
.share-fallback-row{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center }
.share-fallback .btn{ min-height:44px; padding:0 20px }
.share-preparing{ color:var(--text-mid); font-size:1rem; line-height:44px }

/* ---------- sign-in (bottom sheet + shared auth UI) ---------- */
.sheet-overlay{
  position:fixed; inset:0; z-index:50; background:rgba(0,0,0,.55);
  display:flex; align-items:flex-end; justify-content:center;
}
.sheet{
  width:100%; max-width:520px; background:var(--card);
  border-top:1px solid var(--line); border-radius:24px 24px 0 0;
  padding:14px 20px 34px;
}
.sheet-handle{ width:40px; height:4px; border-radius:var(--radius-pill);
  background:rgba(233,231,218,.14); margin:0 auto 22px }
/* Desktop: a centered dialog rather than a bottom sheet. */
@media (min-width:768px){
  .sheet-overlay{ align-items:center }
  .sheet{ max-width:440px; border:1px solid var(--line); border-radius:24px; padding:28px 28px 32px }
  .sheet .sheet-handle{ display:none }
}
.auth-ui{ display:flex; flex-direction:column; align-items:center; text-align:center }
.auth-heading{
  font-family:var(--font-display); font-weight:500; font-size:1.92rem; line-height:1.3;
  color:var(--text-hi); max-width:22ch; text-wrap:pretty;
}
.auth-view{ width:100%; margin-top:22px; display:flex; flex-direction:column; align-items:center; gap:12px }
.auth-view[hidden]{ display:none }
.auth-google{ width:fit-content; max-width:100% }
.auth-input{
  width:100%; max-width:360px; min-height:52px; padding:0 16px;
  background:var(--bg); border:1px solid var(--line); border-radius:12px;
  color:var(--text-hi); font:400 1.2rem var(--font-body);
}
.auth-input:focus{ outline:none; border-color:rgba(232,165,75,.5) }
.auth-send{ width:fit-content; max-width:100% }
.auth-note{ color:var(--text-mid); font-size:1.2rem; line-height:1.6; max-width:34ch }
.auth-note b{ color:var(--text-hi); font-weight:500 }
.auth-note-soft{ font-size:1.08rem; color:var(--text-low) }
/* Desktop: give the heading room so short prompts (e.g. "Sign in to see your
   candles.") stay on one line instead of wrapping. */
@media (min-width:768px){
  .auth-heading{ max-width:32ch }
}

/* ---------- trait chips ---------- */
.traits{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center }
.trait{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid rgba(228,151,41,.28); border-radius:var(--radius-pill);
  padding:7px 13px; color:var(--text-mid);
  font-size:1rem; letter-spacing:.04em; white-space:nowrap;
}
.trait b{ color:var(--accent); font-weight:600 }

/* ---------- icon buttons (48px tap, tooltip on tap) ---------- */
.icon-row{ display:flex; gap:8px; justify-content:center }
.icon-btn{
  position:relative; width:var(--tap-min); height:var(--tap-min);
  display:flex; align-items:center; justify-content:center;
  background:none; border:none; color:var(--text-low); cursor:pointer;
}
.icon-btn svg{ stroke:currentColor }
.icon-btn .tip{
  position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%);
  background:var(--card); border:1px solid var(--line); border-radius:8px;
  padding:7px 11px; font-size:1rem; color:var(--text-mid); white-space:nowrap;
  visibility:hidden;
}
.icon-btn.tip-open .tip{ visibility:visible }

/* ---------- site navigation (shared, injected by js/nav.js) ----------
   Mobile-first: brand + hamburger; the menu drops down below the bar.
   Instant open/close (no animation) — only the flame is ever in motion. */
.site-nav{
  position:sticky; top:0; z-index:20;
  background:var(--bg); border-bottom:1px solid var(--line);
  display:grid; grid-template-columns:1fr auto; align-items:center;
  column-gap:8px; padding:0 var(--pad-page);
}
.nav-brand{
  height:56px; display:flex; align-items:center;
  font-family:var(--font-display); font-weight:500; font-size:2.1rem; /* ~34px */
  color:var(--text-hi); letter-spacing:.01em; text-decoration:none;
}
.nav-toggle{
  width:44px; height:44px; margin-right:-10px;
  display:flex; align-items:center; justify-content:center;
  background:none; border:none; color:var(--text-mid); cursor:pointer;
}
.nav-toggle svg{ width:26px; height:26px; stroke:currentColor }
.nav-menu{
  grid-column:1 / -1;
  display:flex; flex-direction:column;
  padding:4px 0 16px; border-top:1px solid var(--line);
}
.nav-menu[hidden]{ display:none }
.nav-menu a{
  color:var(--text-mid); text-decoration:none; font-size:1.2rem;
  min-height:var(--tap-min); display:flex; align-items:center;
}
.nav-menu a[aria-current="page"]{ color:var(--text-hi) }
.nav-cta{ margin-top:12px; width:100% }

/* Legal dropdown — mobile: an accordion inside the open menu panel */
.nav-group{ display:flex; flex-direction:column }
.nav-sub-toggle{
  color:var(--text-mid); background:none; border:0; cursor:pointer;
  font-family:inherit; font-size:1.2rem; text-align:left;
  min-height:var(--tap-min); display:flex; align-items:center; gap:8px; padding:0;
}
.nav-sub-toggle.is-current{ color:var(--text-hi) }
.nav-caret{ flex:none }
.nav-sub-toggle[aria-expanded="true"] .nav-caret{ transform:rotate(180deg) }
.nav-sub{ display:flex; flex-direction:column }
.nav-sub[hidden]{ display:none }
.nav-sub a{
  color:var(--text-low); text-decoration:none; font-size:1.05rem;
  min-height:44px; display:flex; align-items:center; padding-left:16px;
}
.nav-sub a[aria-current="page"]{ color:var(--text-hi) }

@media (min-width:768px){
  .site-nav{
    grid-template-columns:auto 1fr; max-width:var(--wall-max); margin:0 auto;
    padding:0 40px;
  }
  .nav-toggle{ display:none }
  .nav-menu, .nav-menu[hidden]{
    display:flex; flex-direction:row; align-items:center; justify-content:flex-end;
    grid-column:auto; gap:24px; padding:0; border-top:none;
  }
  .nav-menu a{ min-height:auto }
  .nav-cta{ width:auto; min-height:44px; padding:0 22px; margin-top:0 }

  /* Legal dropdown — desktop: a floating panel below the "Legal" item */
  .nav-group{ position:relative }
  .nav-sub-toggle{ min-height:auto }
  .nav-sub{
    position:absolute; top:calc(100% + 10px); right:0; min-width:236px;
    background:var(--bg); border:1px solid var(--line); border-radius:12px;
    padding:6px; z-index:30; box-shadow:0 14px 34px rgba(0,0,0,.45);
  }
  .nav-sub a{
    padding:8px 12px; min-height:auto; border-radius:8px;
    font-size:1.02rem; line-height:1.3;
  }
  .nav-sub a:hover{ background:var(--card); color:var(--text-hi) }
}

/* ---------- account-deletion modal (triggered from the nav "Account" menu) ----------
   Shared so it works on every page. Centered, type-DELETE-to-confirm. */
.acct-del-danger{ color:#e8735b !important }
.acct-del-danger:hover{ background:rgba(232,115,91,.1) !important }
.acct-panel{ position:fixed; inset:0; z-index:70; overflow-y:auto;
  background:rgba(0,0,0,.72); padding:24px 16px; display:flex; align-items:center; justify-content:center }
.acct-panel[hidden]{ display:none }
.acct-card{ width:100%; max-width:460px; margin:auto; border-radius:14px; padding:26px 22px;
  background:var(--bg); border:1px solid var(--line) }
.acct-card h2{ margin:0 0 14px; font-family:var(--font-display); font-size:1.5rem; color:var(--text-hi) }
.acct-card p, .acct-card li{ color:var(--text-low); font-size:.92rem; line-height:1.55 }
.acct-card ul{ margin:14px 0; padding-left:20px; display:flex; flex-direction:column; gap:10px }
.acct-card strong{ color:var(--text-hi) }
.acct-card label{ display:block; margin-top:18px; margin-bottom:8px; color:var(--text-hi); font-size:.9rem }
.acct-card input{ width:100%; min-height:44px; padding:0 12px; border-radius:8px;
  border:1px solid var(--line); background:transparent; color:var(--text-hi); font:400 1rem var(--font-body) }
.acct-error{ color:#e8735b }
.acct-error[hidden]{ display:none }
.acct-actions{ margin-top:20px; display:flex; flex-wrap:wrap; gap:12px }
.acct-actions .btn{ flex:1 1 160px; min-height:44px }
.acct-actions .btn[disabled]{ opacity:.45; pointer-events:none }