@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&display=swap');

:root{
  /* LivFree light theme — single theme app-wide (see docs/PROGRESS.md for why dark mode was dropped) */
  --bg:#f4f7fc; --card:#ffffff; --active:#eaf0ff; --border:#d6e0f4; --divider:#e7edfa;
  --text:#0e1b3d; --text2:#3a5590; --text3:#5f76ab;
  --orange:#ff8803; --orange-ink:#241300;
  --teal:#0f9d70; --teal-ink:#ffffff;
  --gold:#c99a1f; --gold-ink:#fff8e6;
  --shadow:0 -2px 16px rgba(20,40,90,.10);
  --scrim:rgba(20,32,64,.35);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
body{font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg);color:var(--text);font-variant-numeric:tabular-nums}
.app{max-width:402px;margin:0 auto;min-height:100vh;min-height:100dvh}
/* 78px clears the bottom nav; the extra 88px also clears the floating AI
   button (52px tall, sitting 16px above the nav) plus a margin, so the last
   card on any tab never ends up hidden or mistappable behind it. */
.app-scroll{padding-bottom:166px}

/* HEADER */
.hdr{background:#ffffff;border-bottom:1px solid var(--divider);box-shadow:0 1px 0 rgba(14,27,61,.03);padding:calc(12px + env(safe-area-inset-top)) 16px 12px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:50}
.hdr-brand{display:flex;flex-direction:column;gap:2px;min-width:0}
.hdr-brand-row{display:flex;align-items:center;gap:9px}
.hdr-title{font-size:14.5px;font-weight:800;letter-spacing:-0.01em;white-space:nowrap}
.hdr-sub{font-size:11.5px;font-weight:600;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hdr-cd{text-align:right;flex-shrink:0;padding-left:10px}
.hdr-cd-label{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text3)}
.hdr-cd-value{font-size:19px;font-weight:800}

/* CARDS / TEXT */
.tab{display:none;padding:16px 16px 14px}
.tab.on{display:block}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px;margin-bottom:12px;display:flex;flex-direction:column;gap:12px}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;min-height:24px}
.card-head .chevron{flex-shrink:0;color:var(--text3);transition:transform .15s ease}
.card-body{display:flex;flex-direction:column;gap:12px}
.card.collapsible.collapsed .card-body{display:none}
.card.collapsible.collapsed .chevron{transform:rotate(-90deg)}
.ct{font-size:11.5px;font-weight:800;color:var(--text3);letter-spacing:.06em;text-transform:uppercase}
.pbg{background:var(--divider);border-radius:99px;height:8px;overflow:hidden;margin-bottom:5px}
.pf{height:100%;border-radius:99px;background:var(--teal)}
.di{display:flex;align-items:center;gap:9px;padding:9px 0;border-bottom:1px solid var(--divider)}
.di:last-child{border-bottom:none}
.av{width:32px;height:32px;border-radius:50%;background:var(--active);display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:700;color:var(--text2);flex-shrink:0}
.lbw{width:56px;background:var(--divider);border-radius:99px;height:5px;flex-shrink:0;overflow:hidden}
.lb{height:100%;border-radius:99px;background:var(--teal)}
.you{font-size:10px;background:var(--orange);color:var(--orange-ink);border-radius:5px;padding:2px 6px;margin-left:4px;font-weight:800}
.met2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.met{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:13px;text-align:center;display:flex;flex-direction:column;gap:3px}
.met .n{font-size:21px;font-weight:800}
.met .l{font-size:11px;font-weight:600;color:var(--text2)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-size:12.5px;padding:8px 12px;border-radius:8px;border:1px solid var(--border);background:var(--bg);color:var(--text2);cursor:pointer;min-height:36px;min-width:36px}
.btn svg{flex-shrink:0}
.btn.primary{background:var(--orange);color:var(--orange-ink);border:none;font-weight:700}
.ty-btn{display:inline-flex;align-items:center;gap:5px;font-size:11px;padding:6px 10px;border-radius:7px;border:1px solid var(--border);background:var(--bg);color:var(--text2);cursor:pointer;flex-shrink:0;white-space:nowrap;min-height:32px;font-weight:700}
.ty-btn.sent{border-color:var(--teal);color:var(--teal);background:transparent}
.gli{display:flex;align-items:center;gap:9px;padding:9px 0;border-bottom:1px solid var(--divider)}
.gli:last-child{border-bottom:none}
.inz{font-size:10.5px;background:color-mix(in srgb,var(--gold) 20%,transparent);color:var(--gold);border:1px solid color-mix(in srgb,var(--gold) 45%,transparent);border-radius:4px;padding:2px 6px;font-weight:600}
.nearz{font-size:10.5px;background:color-mix(in srgb,var(--orange) 18%,transparent);color:var(--orange);border:1px solid color-mix(in srgb,var(--orange) 40%,transparent);border-radius:4px;padding:2px 6px;font-weight:600}
.irow{display:flex;gap:11px;padding:9px 0;border-bottom:1px solid var(--divider);align-items:flex-start}
.irow:last-child{border-bottom:none}
.mrow{display:flex;gap:9px;padding:8px 0;border-bottom:1px solid var(--divider);align-items:center}
.mrow:last-child{border-bottom:none}
.mbadge{font-size:10.5px;padding:2px 7px;border-radius:4px;background:var(--active);color:var(--text2);flex-shrink:0}
.ci-item{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--divider);cursor:pointer;min-height:36px}
.ci-item:last-child{border-bottom:none}
.chk{width:20px;height:20px;border-radius:5px;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:11.5px}
.chk.on{background:var(--teal);border-color:var(--teal);color:var(--teal-ink)}
.fp{background:var(--card);border:1px solid var(--border);border-radius:11px;padding:13px;margin-bottom:10px}
.fph{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.ftag{font-size:10.5px;background:var(--active);color:var(--text2);padding:2px 7px;border-radius:4px;margin-left:auto}
.fa{display:flex;gap:14px}
.fac{font-size:11.5px;color:var(--text2);cursor:pointer;padding:4px 0}
.fac.liked{color:var(--orange);font-weight:700}
.ai-msg{padding:10px 12px;border-radius:10px;font-size:13.5px;line-height:1.55;margin-bottom:8px;max-width:88%;white-space:pre-line}
.ai-msg.bot{background:var(--card);border:1px solid var(--border);color:var(--text)}
.ai-msg.usr{background:var(--orange);color:var(--orange-ink);margin-left:auto;font-weight:600}
.ai-note{font-size:11.5px;color:var(--text3);margin-bottom:10px;line-height:1.5}
.empty{padding:16px 10px;text-align:center;color:var(--text3);font-size:12.5px;line-height:1.6}
.placeholder-note{font-size:10.5px;color:var(--text3);font-weight:600;text-transform:uppercase;letter-spacing:.04em;background:var(--active);display:inline-block;padding:2px 7px;border-radius:4px;align-self:flex-start}
/* 2027 */
.ev-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:13px;margin-bottom:10px;position:relative;overflow:hidden}
.ev-card.open{border-color:color-mix(in srgb,var(--teal) 55%,var(--border))}
.ev-logo{width:42px;height:42px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700;color:#fff;flex-shrink:0}
.ev-badge{position:absolute;top:11px;right:11px;font-size:10.5px;border-radius:5px;padding:3px 8px;font-weight:700}
.badge-open{background:color-mix(in srgb,var(--teal) 20%,transparent);color:var(--teal);border:1px solid color-mix(in srgb,var(--teal) 45%,transparent)}
.badge-soon{background:var(--active);color:var(--text2)}
.reg-btn{width:100%;padding:11px;background:var(--teal);color:var(--teal-ink);border:none;border-radius:9px;font-size:13.5px;font-weight:700;cursor:pointer;margin-top:11px;min-height:40px}
.notify-btn{width:100%;padding:10px;background:transparent;color:var(--text2);border:1px solid var(--border);border-radius:9px;font-size:12.5px;cursor:pointer;margin-top:11px;min-height:38px}
.notify-btn.notified{border-color:var(--gold);color:var(--gold);background:color-mix(in srgb,var(--gold) 10%,transparent)}
.toast{display:none;position:fixed;bottom:92px;left:50%;transform:translateX(-50%);background:var(--card);border:1px solid var(--border);color:var(--text);padding:10px 18px;border-radius:9px;font-size:12.5px;z-index:999;white-space:nowrap;box-shadow:0 4px 20px rgba(20,32,64,.16)}

/* FUNDRAISING TAB */
.hero{background:linear-gradient(160deg,color-mix(in srgb,var(--teal) 10%,transparent),transparent 60%) var(--card);border:1px solid color-mix(in srgb,var(--teal) 35%,var(--border));border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:9px;margin-bottom:12px}
.hero-label{font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--teal)}
.hero-amt{font-size:28px;font-weight:800;letter-spacing:-0.01em}
.hero-amt .of{font-size:14.5px;font-weight:600;color:var(--teal)}
.hero-meta{display:flex;justify-content:space-between;font-size:12px;font-weight:600;color:var(--teal)}
.avatar-lg{width:48px;height:48px;border-radius:50%;background:var(--active);border:1.5px solid var(--border);color:var(--text2);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;flex-shrink:0}
.tier-chip{align-self:flex-start;display:flex;align-items:center;gap:6px;padding:9px 14px;border-radius:11px;background:var(--orange);color:var(--orange-ink);font-size:14.5px;font-weight:800;cursor:pointer;border:1.5px solid var(--orange)}
.tier-chip.unselected{background:var(--card);color:var(--text2);border:1.5px solid var(--border)}
.tier-row{display:flex;gap:8px;flex-wrap:wrap}
.raised-row{display:flex;justify-content:space-between;align-items:baseline}
.raised-amt{font-size:15px;font-weight:800}
.raised-amt .of{font-weight:600;color:var(--text3)}
.raised-sub{display:flex;justify-content:space-between;font-size:11.5px;font-weight:600;color:var(--text2)}

.milestones{position:relative;padding:10px 4px 2px}
.milestone-line{position:absolute;left:14px;right:14px;top:16px;height:2px;background:var(--divider)}
.milestone-row{display:flex;justify-content:space-between;position:relative}
.milestone{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1}
.milestone-node{position:relative;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--bg);border:2px solid var(--divider);color:var(--text3)}
.milestone-node.done{background:var(--teal);border-color:var(--teal);color:var(--teal-ink)}
.milestone-node.next{background:color-mix(in srgb,var(--orange) 18%,transparent);border-color:var(--orange);color:var(--orange)}
.milestone-label{font-size:9.5px;font-weight:700;color:var(--text3)}
.milestone.done .milestone-label{color:var(--text2)}
.milestone.next .milestone-label{color:var(--orange);font-weight:800}

.donor-row{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid var(--divider)}
.donor-row:last-child{border-bottom:none}
.donor-note{font-size:12px;font-style:italic;color:var(--text2)}
.donor-amt{font-size:13.5px;font-weight:800;white-space:nowrap;margin-right:2px}

.lb-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--divider)}
.lb-row:last-child{border-bottom:none}
.lb-rank{width:20px;text-align:center;font-size:12.5px;font-weight:800;color:var(--text3);flex-shrink:0}
.lb-rank.gold{color:var(--gold)}
.lb-name{flex:1;font-size:13.5px;font-weight:700;display:flex;align-items:center;gap:6px}
.lb-amt{font-size:13px;font-weight:800;min-width:44px;text-align:right}

.quote{position:relative;background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:14px 16px 14px 30px;font-size:13px;line-height:1.65;color:var(--text2)}
.quote-mark{position:absolute;left:10px;top:6px;font-size:26px;font-weight:800;color:color-mix(in srgb,var(--orange) 55%,transparent);font-family:Georgia,serif}

.link-row{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:9px 8px 9px 12px}
.link-row .url{font-size:12px;font-weight:600;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.copy-btn{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;padding:6px 10px;border-radius:8px;background:var(--active);color:var(--text2);flex-shrink:0;cursor:pointer;border:none}

.chip-row{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:9px 13px;border-radius:99px;border:1px solid var(--border);font-size:12px;font-weight:700;color:var(--text2);cursor:pointer;background:var(--card)}
.chip.more{border-style:dashed;color:var(--text3)}

/* WELCOME / LOGIN GATE */
.welcome-screen{position:fixed;inset:0;z-index:65;background:linear-gradient(160deg,color-mix(in srgb,var(--teal) 8%,var(--bg)),var(--bg) 55%);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 28px calc(32px + env(safe-area-inset-bottom));text-align:center}

/* JOY (AI ASSISTANT) — avatar + floating access */
.joy-avatar{background:var(--orange);border-radius:50%;display:flex;align-items:center;justify-content:center}
.ai-fab{position:fixed;bottom:calc(78px + 16px + env(safe-area-inset-bottom));right:16px;width:52px;height:52px;border:none;box-shadow:0 6px 18px rgba(20,32,64,.28);z-index:55;transition:transform .15s ease,opacity .15s ease}
.ai-fab:active{transform:scale(0.94)}
.ai-fab.hidden{opacity:0;pointer-events:none;transform:scale(0.85)}

/* BOTTOM NAV */
.bnav{position:fixed;bottom:0;left:0;right:0;z-index:60;background:var(--card);border-top:1px solid var(--border);box-shadow:var(--shadow);padding-bottom:env(safe-area-inset-bottom)}
.bnav-inner{max-width:402px;margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr)}
.bnav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:9px 2px 8px;cursor:pointer;color:var(--text3);font-size:10px;font-weight:700;min-height:52px;position:relative;background:none;border:none;font-family:inherit}
.bnav-item svg{flex-shrink:0}
.bnav-item.on{color:var(--orange)}
.bnav-item.on::before{content:'';position:absolute;top:0;left:20%;right:20%;height:2px;background:var(--orange);border-radius:2px}
.bnav-dot{position:absolute;top:6px;right:calc(50% - 16px);width:6px;height:6px;border-radius:50%;background:var(--orange)}

/* MORE SHEET */
.scrim{display:none;position:fixed;inset:0;background:var(--scrim);z-index:70}
.scrim.on{display:block}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:71;background:var(--card);border-top:1px solid var(--border);border-radius:16px 16px 0 0;max-width:402px;margin:0 auto;padding:10px 14px calc(18px + env(safe-area-inset-bottom));transform:translateY(100%);transition:transform .22s ease}
.sheet.on{transform:translateY(0)}
.sheet-handle{width:36px;height:4px;background:var(--divider);border-radius:99px;margin:4px auto 12px}
.sheet-title{font-size:11.5px;font-weight:700;color:var(--text2);letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px}
.sheet-item{display:flex;align-items:center;gap:12px;padding:12px 4px;border-bottom:1px solid var(--divider);cursor:pointer;font-size:14.5px;font-weight:600}
.sheet-item:last-child{border-bottom:none}
.sheet-item svg{flex-shrink:0}
.sheet-item.on{color:var(--orange)}

/* Tap feedback — tap-highlight is disabled globally above (the browser's
   default flash looks wrong against these rounded cards), so every tappable
   element needs its own pressed state or taps feel unresponsive. Paired with
   the touchstart listener in js/app.js that makes :active actually fire on
   iOS Safari. */
.card-head:active, .bnav-item:active, .sheet-item:active, .chip:active,
.tier-chip:active, .ty-btn:active, .fac:active, .btn:active,
.reg-btn:active, .notify-btn:active, .copy-btn:active, .ci-item:active,
.di[onclick]:active{
  opacity:.55;
}

@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto !important;transition:none !important}
}

/* ROTATE LOCK — this UI is portrait-only by design (also declared in
   public/manifest.json's "orientation":"portrait", which Android honors
   for the installed PWA; iOS has no equivalent lock for home-screen web
   apps, so this CSS fallback is what actually stops it there). Rather than
   let the portrait-tuned layout reflow live against a much shorter
   landscape viewport (header/nav re-measuring, cards squeezing) every time
   a player turns their phone, park the whole app and show a simple prompt
   instead — nothing to reflow if nothing's rendering.
   (pointer:coarse) scopes this to real touchscreens only, so a desktop
   browser window that happens to be short and wide is never affected. */
.rotate-lock{display:none}
@media (orientation:landscape) and (pointer:coarse){
  .app{display:none}
  .rotate-lock{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
    position:fixed;inset:0;background:var(--bg);color:var(--text);text-align:center;
    padding:32px;z-index:9999;
  }
}

/* ===== DEMO-ONLY: device-accurate phone frame (web/desktop viewing) =====
   Below 500px this is a no-op — a real phone IS the viewport, so .app just
   fills it edge to edge exactly as before. At 500px+ (desktop demo), .app
   becomes a fixed 402x874pt box — iPhone 17's logical resolution — with its
   own bezel, centered in the window, so the demo shows exactly what fits on
   that screen instead of an infinitely-tall page. `transform: translateZ(0)`
   makes .app a containing block for its position:fixed descendants
   (.bnav/.sheet/.scrim/.toast/.ai-fab all now live inside .app in
   index.html, as siblings of .app-scroll — NOT inside .app-scroll, which
   matters: a position:fixed element scrolls away with its container if it's
   part of the same overflow:auto box as the content, so the frame and the
   scroll container have to be two different elements) so they dock to the
   FRAME's edges instead of the browser window's, and .app-scroll (just the
   header+tabs) is the one thing that actually scrolls, within the frame.
   Delete this whole block before packaging as a native mobile app; nothing
   else depends on it — nothing needed to move back, since real phones
   never entered this code path.
   Gated on (hover:hover) and (pointer:fine) in addition to width — a real
   phone rotated to landscape is very often wider than 500px too (e.g. an
   iPhone is 926px wide in landscape), so width alone would wrongly treat a
   rotated phone as "desktop" and box it into this fixed 402x874 frame
   against a much shorter real viewport. Only an actual mouse-driven
   desktop browser reports hover:hover/pointer:fine, so a touchscreen phone
   never matches this block in any orientation. */
@media (min-width:500px) and (hover:hover) and (pointer:fine){
  body{
    background:#d7deea;
    display:flex;align-items:center;justify-content:center;min-height:100vh;
  }
  .app{
    width:402px;height:874px;max-height:calc(100vh - 32px);
    min-height:0;margin:0;
    position:relative;overflow:hidden;box-sizing:border-box;
    border:8px solid #14213d;border-radius:44px;
    transform:translateZ(0);
    box-shadow:0 20px 60px rgba(20,32,64,.35);
  }
  .app-scroll{height:100%;overflow-y:auto;overflow-x:hidden;scrollbar-width:none}
  .app-scroll::-webkit-scrollbar{display:none}
  .hdr{border-radius:36px 36px 0 0}
  .bnav{border-radius:0 0 36px 36px}
}