/* =====================================================================
   Live Out Loud — app styles (standalone PWA)
   Mobile-first, app-style chrome: fixed top bar + bottom tab bar,
   content scrolls between them.
   ===================================================================== */
:root {
  --orange:#FF7A24; --yellow:#FFD700; --teal:#1B8A8A; --green:#6BBE6B;
  --dark:#1a1a1a; --light:#f8f9fa; --gray:#666; --line:#e9e9e9;
  --bar-h:52px; --tab-h:60px;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
}
* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; }
body {
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height:1.6; color:var(--dark);
  background:#fff;
  background-image:linear-gradient(135deg, rgba(255,122,36,0.06), rgba(255,215,0,0.06), rgba(107,190,107,0.06), rgba(27,138,138,0.08));
  background-attachment:fixed;
  overscroll-behavior-y:none;
  -webkit-tap-highlight-color:transparent;
  -webkit-text-size-adjust:100%;
}

/* ---------- top app bar ---------- */
.app-bar {
  position:fixed; top:0; left:0; right:0; z-index:900;
  height:calc(var(--bar-h) + var(--safe-top));
  padding-top:var(--safe-top);
  display:flex; align-items:center; justify-content:center;
  background:#fff; border-bottom:1px solid var(--line);
  box-shadow:0 1px 8px rgba(0,0,0,0.05);
}
.app-bar-logo { display:flex; align-items:center; }
.app-bar-logo img { height:34px; width:auto; display:block; }

/* ---------- main scroll area ---------- */
.app-main {
  padding-top:calc(var(--bar-h) + var(--safe-top));
  padding-bottom:calc(var(--tab-h) + var(--safe-bottom) + 8px);
  min-height:100vh;
  outline:none;
}
.screen { max-width:760px; margin:0 auto; padding:1.1rem 1rem 1.5rem; }
@media (prefers-reduced-motion: no-preference) {
  .screen { animation:screen-in .22s ease-out both; }
}
@keyframes screen-in { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

/* ---------- bottom tab bar ---------- */
.tabbar {
  position:fixed; left:0; right:0; bottom:0; z-index:950;
  display:flex; flex-direction:row; align-items:stretch; justify-content:space-between;
  background:#fff; border-top:1px solid var(--line);
  box-shadow:0 -2px 12px rgba(0,0,0,0.08);
  padding-bottom:var(--safe-bottom);
}
.tabbar a {
  position:relative; flex:1 1 0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  min-height:var(--tab-h); padding:7px 4px 6px;
  text-decoration:none; color:#6b6b6b; font-size:0.72rem; font-weight:600;
}
.tabbar a svg { width:24px; height:24px; display:block; }
.tabbar a:active { background:rgba(27,138,138,0.08); }
.tabbar a:focus-visible { outline:3px solid var(--yellow); outline-offset:-3px; border-radius:10px; }
.tabbar a.active { color:var(--teal); }
.tabbar a.active::before {
  content:''; position:absolute; top:0; width:26px; height:3px;
  border-radius:0 0 3px 3px; background:var(--teal);
}

/* ---------- splash ---------- */
.splash {
  position:fixed; inset:0; z-index:2000;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem;
  background:#fff;
  transition:opacity .35s ease;
}
.splash img { border-radius:22px; box-shadow:0 10px 30px rgba(0,0,0,0.12); }
.splash-word { color:var(--teal); font-weight:700; font-size:1.15rem; letter-spacing:.2px; }
.splash.hide { opacity:0; pointer-events:none; }

/* ---------- hero ---------- */
.hero {
  position:relative; overflow:hidden;
  background:linear-gradient(135deg, var(--teal), var(--green));
  color:#fff; padding:1.6rem 1.4rem 1.8rem; border-radius:18px;
  box-shadow:0 14px 34px rgba(27,138,138,0.22); margin-bottom:1.25rem;
}
.hero::after { content:''; position:absolute; left:0; right:0; bottom:0; height:5px;
  background:linear-gradient(90deg, var(--orange), var(--yellow), var(--green), var(--teal)); }
.hero h1 { color:#fff; font-size:1.55rem; margin-bottom:0.25rem; line-height:1.2; }
.hero p { color:rgba(255,255,255,0.95); margin:0; }
.hero .pill { display:inline-block; margin-top:0.8rem; background:rgba(255,255,255,0.18);
  border:1px solid rgba(255,255,255,0.4); padding:0.25rem 0.7rem; border-radius:20px; font-size:0.82rem; font-weight:600; }

/* ---------- cards ---------- */
.card { background:#fff; border-radius:14px; box-shadow:0 3px 14px rgba(0,0,0,0.07); padding:1.25rem; margin-bottom:1rem; }
.card h2 { color:var(--teal); font-size:1.2rem; margin-bottom:0.5rem; }
.card h3 { font-size:1.05rem; margin-bottom:0.3rem; }
.muted { color:var(--gray); }
.center { text-align:center; }

/* quick-link grid on home */
.ql { display:grid; grid-template-columns:1fr 1fr; gap:0.8rem; margin-bottom:1.1rem; }
.ql a { display:flex; flex-direction:column; gap:0.35rem; text-decoration:none; color:var(--dark);
  background:#fff; border-radius:14px; box-shadow:0 3px 14px rgba(0,0,0,0.07); padding:1rem; font-weight:600; }
.ql a svg { width:26px; height:26px; color:var(--teal); }
.ql a .ql-sub { font-weight:400; font-size:0.85rem; color:var(--gray); }

/* ---------- buttons ---------- */
.btn { display:inline-block; width:100%; text-align:center; border:none; cursor:pointer;
  background:var(--orange); color:#fff; text-decoration:none; padding:0.85rem 1.1rem;
  border-radius:10px; font-size:1.02rem; font-weight:600; font-family:inherit; }
.btn:hover { opacity:0.93; }
.btn:focus-visible { outline:3px solid var(--yellow); outline-offset:2px; }
.btn.secondary { background:var(--teal); }
.btn.ghost { background:transparent; color:var(--teal); border:1.5px solid var(--teal); }
.btn.small { width:auto; padding:0.55rem 0.9rem; font-size:0.92rem; }
.btn[disabled] { opacity:0.6; cursor:default; }
.linkbtn { background:none; border:none; color:var(--gray); text-decoration:underline; cursor:pointer;
  font:inherit; font-size:0.88rem; padding:0; display:inline-block; margin-top:0.4rem; }
.row-actions { display:flex; flex-direction:column; gap:0.5rem; }

/* ---------- forms ---------- */
.field { margin-bottom:1rem; }
.field label { display:block; font-weight:600; margin-bottom:0.35rem; font-size:0.95rem; }
.field input { width:100%; padding:0.8rem 0.9rem; border:1.5px solid #ddd; border-radius:10px; font-size:1rem; font-family:inherit; }
.field input:focus { outline:none; border-color:var(--teal); }
.field .hint { font-size:0.82rem; color:var(--gray); margin-top:0.3rem; }
.two { display:grid; grid-template-columns:1fr 1fr; gap:0.8rem; }
@media (max-width:480px){ .two { grid-template-columns:1fr; } }
.check { display:flex; align-items:flex-start; gap:0.6rem; margin-bottom:1rem; font-size:0.92rem; }
.check input { width:auto; margin-top:0.35rem; }
.seg { display:flex; gap:0.6rem; flex-wrap:wrap; }
.seg label { flex:1; min-width:140px; display:flex; align-items:center; gap:0.55rem; margin:0; padding:0.7rem 0.85rem; border:1.5px solid #ddd; border-radius:10px; font-weight:600; font-size:0.95rem; cursor:pointer; }
.seg label:has(input:checked) { border-color:var(--teal); background:rgba(0,0,0,0.02); }
.seg input { width:auto; margin:0; accent-color:var(--teal); }

/* ---------- messages ---------- */
.msg { display:block; margin-bottom:1rem; padding:0.8rem 1rem; border-radius:10px; font-size:0.93rem; }
.msg.error { background:#fdecea; color:#b3261e; }
.msg.ok { background:#e8f5f5; color:#0f5f5f; border:1px solid var(--teal); }
.msg.info { background:rgba(27,138,138,0.08); color:#0d5b5b; border-left:4px solid var(--teal); }
.msg.warn { background:rgba(255,215,0,0.18); color:#8a6d00; }

/* ---------- session (agenda) cards ---------- */
.s-card { background:#fff; border-radius:14px; box-shadow:0 3px 14px rgba(0,0,0,0.07); padding:1rem 1.1rem; margin-bottom:0.9rem; display:flex; gap:1rem; align-items:flex-start; }
.s-date { flex-shrink:0; width:60px; text-align:center; background:var(--light); border-radius:12px; padding:0.5rem 0; }
.s-date .d { font-size:1.4rem; font-weight:700; color:var(--orange); line-height:1; }
.s-date .m { font-size:0.72rem; text-transform:uppercase; color:var(--gray); }
.s-body { flex:1; min-width:0; }
.s-body h3 { font-size:1.08rem; margin-bottom:0.15rem; }
.s-meta { font-size:0.9rem; color:var(--gray); }
.s-cat { display:inline-block; font-size:0.68rem; font-weight:700; padding:0.12rem 0.5rem; border-radius:20px; margin-left:0.35rem; vertical-align:middle; }
.s-cat.create{background:rgba(255,122,36,0.14);color:var(--orange);} .s-cat.social{background:rgba(255,215,0,0.22);color:#8a6d00;}
.s-cat.grow{background:rgba(107,190,107,0.18);color:#2f7d32;} .s-cat.connect{background:rgba(27,138,138,0.14);color:var(--teal);}
.s-tags { display:flex; gap:0.4rem; flex-wrap:wrap; margin-top:0.5rem; }
.tag { font-size:0.78rem; font-weight:700; padding:0.2rem 0.6rem; border-radius:20px; }
.tag.price{background:rgba(255,122,36,0.14);color:var(--orange);} .tag.free{background:rgba(107,190,107,0.18);color:#2f7d32;}
.tag.deposit{background:rgba(255,215,0,0.22);color:#8a6d00;} .tag.spaces{background:#eee;color:var(--gray);}
.tag.full{background:#fdecea;color:#b3261e;} .tag.auth{background:rgba(255,122,36,0.14);color:var(--orange);}
.s-act { margin-top:0.7rem; display:flex; flex-direction:column; gap:0.4rem; }
.state { text-align:center; font-weight:700; font-size:0.92rem; padding:0.5rem; border-radius:8px; }
.state.booked{background:rgba(107,190,107,0.18);color:#2f7d32;} .state.onlist{background:rgba(255,215,0,0.22);color:#8a6d00;}
.note { font-size:0.84rem; color:var(--gray); }

/* ---------- status pill ---------- */
.status-pill { display:inline-block; padding:0.25rem 0.8rem; border-radius:20px; font-size:0.82rem; font-weight:700; }
.status-pill.verified { background:rgba(107,190,107,0.22); color:#2f7d32; }
.status-pill.pending { background:rgba(255,215,0,0.25); color:#8a6d00; }

/* ---------- checklist (pending) ---------- */
.checklist { list-style:none; margin:0.6rem 0; }
.checklist li { display:flex; gap:0.7rem; align-items:flex-start; padding:0.5rem 0; border-top:1px solid var(--line); }
.checklist li:first-child { border-top:none; }
.step-num { flex-shrink:0; width:26px; height:26px; border-radius:50%; background:var(--teal); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:0.85rem; }
.step-title { font-weight:600; }

/* ---------- values / services grid ---------- */
.vgrid { display:grid; grid-template-columns:1fr 1fr; gap:0.8rem; margin:0.6rem 0 0.4rem; }
.vgrid .v { background:#fff; border-radius:12px; box-shadow:0 3px 12px rgba(0,0,0,0.06); padding:0.9rem; text-align:center; }
.vgrid .v img { width:46px; height:46px; object-fit:contain; margin-bottom:0.3rem; }
.vgrid .v h4 { font-size:0.98rem; margin-bottom:0.15rem; color:var(--teal); }
.vgrid .v p { font-size:0.82rem; color:var(--gray); }
.slist .s { padding:0.7rem 0; border-top:1px solid var(--line); }
.slist .s:first-child { border-top:none; }
.slist .s h4 { font-size:1rem; margin-bottom:0.1rem; }
.slist .s p { font-size:0.9rem; color:var(--gray); }

/* ---------- gallery ---------- */
.gallery { display:grid; grid-template-columns:1fr 1fr; gap:0.6rem; }
.gallery img { width:100%; height:120px; object-fit:cover; border-radius:12px; display:block; }

/* ---------- badges ---------- */
.badge-grid { display:grid; grid-template-columns:1fr 1fr; gap:0.8rem; }
.badge-card { background:#fff; border-radius:14px; box-shadow:0 3px 12px rgba(0,0,0,0.06); padding:0.9rem; text-align:center; }
.badge-card.locked { opacity:0.72; }
.badge-logo { width:46px; height:46px; object-fit:contain; margin-bottom:0.3rem; }
.badge-cat { font-weight:700; font-size:0.95rem; }
.badge-tier { display:inline-block; margin:0.3rem 0; padding:0.15rem 0.6rem; border-radius:20px; font-size:0.78rem; font-weight:700; }
.tier-none{background:#eee;color:var(--gray);} .tier-bronze{background:#f0d9c0;color:#8a5a2b;}
.tier-silver{background:#e3e6ea;color:#5a6472;} .tier-gold{background:#fbe9b0;color:#8a6d00;} .tier-platinum{background:#d9f0ee;color:#0f5f5f;}
.badge-count { font-size:0.8rem; color:var(--gray); }
.badge-prog { height:6px; background:#eee; border-radius:4px; margin-top:0.4rem; overflow:hidden; }
.badge-prog span { display:block; height:100%; background:var(--teal); }

/* ---------- misc ---------- */
.section-title { font-size:1.15rem; color:var(--teal); margin:0.4rem 0 0.7rem; }
.empty { color:var(--gray); text-align:center; padding:1.2rem; }
a.empty-link { display:block; text-decoration:none; background:#fff; border-radius:14px; box-shadow:0 3px 14px rgba(0,0,0,0.07); border:1.5px dashed var(--teal); }
a.empty-link strong { color:var(--orange); }
a.empty-link:active { background:rgba(27,138,138,0.06); }
a.empty-link:focus-visible { outline:3px solid var(--yellow); outline-offset:2px; }
.spinner { width:30px; height:30px; border:3px solid #e0e0e0; border-top-color:var(--teal); border-radius:50%; margin:2rem auto; animation:spin 0.8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.contact-line { display:flex; align-items:center; gap:0.5rem; padding:0.35rem 0; }
.contact-line a { color:var(--teal); text-decoration:none; font-weight:600; }

/* ---------- news ---------- */
.n-card h3 { margin-bottom:0.2rem; }
.n-head { display:flex; align-items:center; gap:0.5rem; margin-bottom:0.5rem; }
.n-date { font-size:0.82rem; color:var(--gray); font-weight:600; }
.n-photos { display:grid; grid-template-columns:1fr 1fr; gap:0.5rem; margin:0.6rem 0; }
.n-photos img { width:100%; height:130px; object-fit:cover; border-radius:10px; display:block; background:#eee; }
.n-photos img:only-child { grid-column:1 / -1; height:200px; }

/* lift the accessibility floating button clear of the tab bar */
.a11y-fab, .to-top { bottom:calc(1rem + var(--tab-h) + var(--safe-bottom)) !important; }
.a11y-panel { bottom:calc(4.9rem + var(--tab-h) + var(--safe-bottom)) !important; }