/* Kingdom Connections — the app.
   Built for a real phone viewport, not a device mockup: the document never
   scrolls, each view owns its own scroller, and every edge respects the iOS
   safe-area insets so nothing sits under the status bar or the home indicator. */

:root{
  --paper:#F6F0E3;
  --card:#FDFAF2;
  --ink:#26200F;
  --ink-70:#3D3520;
  --ink-45:#8A7F62;
  --ink-25:rgba(94,78,38,.4);
  --rule:rgba(94,78,38,.14);
  --rule-soft:rgba(94,78,38,.09);
  --gold:#96762A;
  --gold-l:#B4913C;
  --brass:#C7A24B;
  --dark:#262012;
  --cream:#EBD9A8;
  --sage:#6E7A4E;

  --serif:'Marcellus',Georgia,serif;
  --sans:'Karla',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;

  --ease:cubic-bezier(.22,.61,.36,1);
  --t:.22s var(--ease);

  --sat:env(safe-area-inset-top,0px);
  --sab:env(safe-area-inset-bottom,0px);
  --sal:env(safe-area-inset-left,0px);
  --sar:env(safe-area-inset-right,0px);

  /* every screen's top gutter and every screen's bottom gutter, once */
  --top:calc(var(--sat) + 16px);
  /* the tab bar is a real bar (task #2267): --tabh is its content height and
     --barh is what it actually occupies, because its background runs all the
     way into the home-indicator inset instead of floating above it. */
  --tabh:57px;
  --barh:calc(var(--tabh) + var(--sab));
  --bottom:calc(var(--sab) + 14px);
  --tab-off:#A2977E;

  --shadow-s:0 4px 14px -6px rgba(64,50,16,.3);
  --shadow-m:0 10px 30px rgba(64,50,16,.12);
  --shadow-l:0 20px 46px -18px rgba(64,50,16,.42);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}

html,body{
  margin:0;padding:0;height:100%;width:100%;
  overflow:hidden;overscroll-behavior:none;
  background:var(--paper);
  position:fixed;inset:0;
  font-family:var(--sans);color:var(--ink);
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
  touch-action:manipulation;
}
button,input,textarea{font-family:inherit;color:inherit}
button{border:0;background:none;padding:0;cursor:pointer;font-size:inherit}
a{text-decoration:none;color:inherit}
::-webkit-scrollbar{width:0;height:0}
img{display:block}

/* ---------- the app surface: the real viewport, edge to edge ---------- */
#app{
  position:fixed;inset:0;
  height:100vh;height:100dvh;
  width:100vw;width:100dvw;
  overflow:hidden;
  background:var(--paper);
  isolation:isolate;
}

/* Nothing paints until auth is resolved. The splash is the only thing allowed
   through, so the app can never flash behind the login screen. */
html:not([data-auth]) #app > :not(#v-splash){display:none !important}

/* ---------- views ---------- */
.view{
  position:absolute;inset:0;display:none;flex-direction:column;
  background:var(--paper);
}
.view.on{display:flex}
.view.anim > .scroll{animation:fadeUp .34s var(--ease) both}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}

.scroll{
  flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding:var(--top) 0 calc(var(--barh) + 16px);
}
.pad{padding-left:calc(20px + var(--sal));padding-right:calc(20px + var(--sar))}

/* ---------- type ---------- */
.serif{font-family:var(--serif)}
.h-display{font-family:var(--serif);font-size:30px;line-height:1.14;letter-spacing:.005em;margin:0}
.h-sec{font-family:var(--serif);font-size:21px;line-height:1.2;margin:0}
.eyebrow{font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-45)}
.eyebrow.gold{color:var(--gold)}
.body{font-size:14px;line-height:1.6;color:var(--ink-70);margin:0}
.small{font-size:12px;line-height:1.55;color:var(--ink-45);margin:0}
.hr{height:1px;background:var(--rule);border:0;margin:0}

.chip{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 10px;border-radius:20px;
  font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  background:rgba(180,145,60,.16);color:var(--gold);
}
.chip.dark{background:var(--dark);color:var(--cream)}
.chip.free{background:rgba(110,122,78,.16);color:#4E5836}
.chip.mute{background:rgba(94,78,38,.1);color:var(--ink-45)}

/* ---------- buttons ---------- */
.btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:15px 18px;border-radius:16px;
  background:var(--dark);color:var(--cream);
  font-size:14.5px;font-weight:700;letter-spacing:.01em;
  border:1.5px solid var(--dark);
  transition:transform .18s var(--ease),opacity var(--t);
}
.btn:active{transform:scale(.975)}
.btn.block{width:100%}
.btn.ghost{background:transparent;color:var(--gold);border-color:rgba(150,118,42,.45)}
.btn.gold{background:var(--brass);color:#241E0E;border-color:var(--brass)}

/* ---------- masthead ---------- */
.mast{padding:2px 20px 0;padding-left:calc(20px + var(--sal));padding-right:calc(20px + var(--sar))}
.mast .h-display{margin-top:7px}
.mast .sub{margin-top:9px}

.apphead{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:0 20px 16px;padding-left:calc(20px + var(--sal));padding-right:calc(20px + var(--sar));
}
.apphead .brand{display:flex;align-items:center;gap:10px;min-width:0}
.apphead .brand img{width:34px;height:34px;border-radius:9px;flex:none}
.apphead .bn{font-family:var(--serif);font-size:15px;letter-spacing:.05em;line-height:1.2}
.apphead .bs{font-size:8.5px;letter-spacing:.2em;color:var(--gold);font-weight:700;margin-top:2px}
.iconbtn{
  position:relative;width:36px;height:36px;flex:none;border-radius:50%;
  background:var(--card);border:1px solid var(--rule);
  display:flex;align-items:center;justify-content:center;color:#5C4E26;
}
.iconbtn .dot{position:absolute;top:7px;right:8px;width:7px;height:7px;border-radius:50%;background:var(--gold-l);border:1.5px solid var(--card)}

/* ---------- hero card (next up) ---------- */
.herocard{
  display:block;width:100%;text-align:left;
  background:var(--card);border:1px solid var(--rule);border-radius:20px;overflow:hidden;
  box-shadow:var(--shadow-m);
}
.herocard:active{transform:scale(.99)}
.herocard .ph{display:block;position:relative;height:190px;background:#E6DCC4;overflow:hidden}
.herocard .ph img{width:100%;height:100%;object-fit:cover}
.herocard .ph .tags{position:absolute;top:12px;left:12px;display:flex;gap:6px}
.herocard .ph .tags .chip{background:rgba(38,32,18,.85);color:var(--cream)}
.herocard .ph .tags .chip.day{background:rgba(253,250,242,.92);color:#5C4E26}
.herocard .bd{padding:17px 18px 19px}
.herocard .bd h3{font-family:var(--serif);font-size:22px;line-height:1.2;margin:0 0 8px}
.herocard .meta{display:flex;flex-wrap:wrap;gap:8px;font-size:12.5px;color:#6E6448;margin-bottom:14px}
.herocard .meta i{width:3px;height:3px;border-radius:9px;background:var(--ink-25);align-self:center;font-style:normal}

.bar{height:5px;background:rgba(94,78,38,.12);border-radius:3px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--gold-l);border-radius:3px;transition:width .8s var(--ease)}

/* ---------- month separator ---------- */
.month{
  display:flex;align-items:center;gap:12px;
  padding:26px 20px 12px;padding-left:calc(20px + var(--sal));padding-right:calc(20px + var(--sar));
}
.month .m-name{font-family:var(--serif);font-size:17px;letter-spacing:.02em}
.month .line{flex:1;height:1px;background:var(--rule)}
.month .m-count{font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-45)}

/* ---------- event row ---------- */
.erow{
  display:flex;gap:14px;align-items:stretch;width:100%;text-align:left;
  padding:14px 20px;padding-left:calc(20px + var(--sal));padding-right:calc(20px + var(--sar));
  border-bottom:1px solid var(--rule-soft);
  transition:background var(--t);
}
.erow:active{background:rgba(232,222,199,.55)}
.erow .dblock{
  width:46px;flex:none;text-align:center;padding-top:4px;
  border-right:1px solid var(--rule);padding-right:12px;
}
.erow .dow{display:block;font-size:9px;font-weight:700;letter-spacing:.16em;color:var(--ink-45)}
.erow .dnum{display:block;margin-top:5px;font-family:var(--serif);font-size:27px;line-height:1;letter-spacing:-.01em}
.erow .dmon{display:block;margin-top:5px;font-size:9px;font-weight:700;letter-spacing:.16em;color:var(--gold)}
.erow .thumb{
  width:60px;height:60px;flex:none;border-radius:13px;overflow:hidden;background:#E6DCC4;
  border:1px solid var(--rule);
}
.erow .thumb img{width:100%;height:100%;object-fit:cover}
.erow .ebody{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}
.erow .etitle{
  display:block;font-family:var(--serif);font-size:17.5px;line-height:1.2;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.erow .eline{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:6px;font-size:11.5px;color:var(--ink-45)}
.erow .efoot{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:9px}
.erow .going{font-size:11.5px;color:var(--ink-45)}
.dotm{width:3px;height:3px;border-radius:9px;background:var(--ink-25);flex:none;font-style:normal}

/* ---------- event detail ---------- */
#v-event .scroll{padding-top:0;padding-bottom:calc(122px + var(--bottom))}
.ehero{position:relative;height:270px;flex:none;background:#E6DCC4}
.ehero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ehero .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,24,10,.35) 0 20%,rgba(30,24,10,0) 46%,rgba(30,24,10,.72) 100%)}
.ehero .inner{
  position:absolute;left:0;right:0;bottom:0;
  padding:0 20px 20px;padding-left:calc(20px + var(--sal));padding-right:calc(20px + var(--sar));
}
.ehero .htitle{font-family:var(--serif);font-size:29px;line-height:1.1;color:#FFFAF0;margin:10px 0 0;text-shadow:0 2px 18px rgba(30,18,10,.45)}
.ehero .hchips{margin-top:12px;display:flex;gap:7px;flex-wrap:wrap}
.ehero .hchips .chip{background:rgba(255,250,243,.18);color:#FFF6EC;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.backb{
  position:absolute;z-index:10;left:calc(16px + var(--sal));top:calc(var(--sat) + 14px);
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(20,15,6,.42);border:1px solid rgba(255,250,243,.28);color:#FFF8F0;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.backb:active{transform:scale(.92)}

.dt{display:grid;grid-template-columns:22px 1fr;gap:14px 12px;padding-top:22px}
.dt .ic{color:var(--gold);padding-top:2px}
.dt .k{font-size:13.5px;font-weight:700;color:var(--ink)}
.dt .v{display:block;margin-top:3px;font-size:12.5px;line-height:1.5;color:var(--ink-45)}

/* map card (from Sanctuary) */
.map{
  display:block;width:100%;text-align:left;
  margin-top:16px;height:136px;border-radius:15px;overflow:hidden;position:relative;
  border:1px solid var(--rule);background:#EFE7DA;box-shadow:var(--shadow-s);
}
.map:active{transform:scale(.995)}

/* live OpenStreetMap tiles (task #2267). The iframe is decoration only: it
   takes no pointer events, so a swipe still scrolls the page and a tap lands on
   the anchor. The warm veil pulls raw OSM grey-green into the paper-and-gold
   skin. */
.map.live{height:172px;background:#E9E2D3}
.map .osm{
  /* deliberately larger than the card and centred on it: OSM's embed paints its
     own zoom buttons top-left and an attribution strip along the bottom, and
     both fall outside the crop. The attribution is re-stated under the card in
     the app's own type — cropped, not removed. */
  position:absolute;left:-60px;top:-60px;
  width:calc(100% + 120px);height:calc(100% + 120px);
  border:0;pointer-events:none;
  filter:sepia(.3) saturate(.84) contrast(.95) brightness(1.03);
}
.map .warm{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(246,240,227,.3) 0,rgba(246,240,227,0) 36%,rgba(246,240,227,.46) 100%),
    radial-gradient(120% 90% at 50% 46%,rgba(246,240,227,0) 40%,rgba(228,217,192,.5) 100%);
  box-shadow:inset 0 0 0 1px rgba(94,78,38,.1);
}
/* the honest no-map state: plainly abstract, no streets, no place claimed */
.map .grain{
  position:absolute;inset:0;
  background:
    radial-gradient(80% 120% at 22% 10%,rgba(124,131,85,.17) 0,rgba(124,131,85,0) 62%),
    radial-gradient(70% 100% at 84% 90%,rgba(150,118,42,.14) 0,rgba(150,118,42,0) 60%),
    repeating-linear-gradient(45deg,rgba(94,78,38,.045) 0 1px,rgba(94,78,38,0) 1px 9px),
    linear-gradient(160deg,#F1EADA,#E6DECD);
}
.mattr{margin:8px 0 0;font-size:9.5px;letter-spacing:.02em;color:var(--ink-25)}
.map .pin{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-100%) rotate(-45deg);
  width:22px;height:22px;border-radius:50% 50% 50% 2px;background:var(--gold);
  box-shadow:0 6px 14px -4px rgba(120,92,26,.7);
}
.map .pin::after{content:"";position:absolute;inset:6px;border-radius:50%;background:#FFF8F1}
.map .pulse{
  position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;
  border-radius:50%;border:1px solid rgba(150,118,42,.55);animation:mp 2.8s var(--ease) infinite;
}
@keyframes mp{0%{transform:scale(.5);opacity:.9}100%{transform:scale(1.6);opacity:0}}
.map .lbl{
  position:absolute;left:10px;bottom:9px;max-width:calc(100% - 20px);
  padding:6px 11px;border-radius:9px;
  background:rgba(255,252,246,.94);border:1px solid var(--rule);
  font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-70);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.map .dirs{
  position:absolute;right:10px;bottom:9px;display:flex;align-items:center;gap:6px;
  padding:6px 11px;border-radius:9px;background:var(--dark);color:var(--cream);
  font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}
.map.unknown .pin,.map.unknown .pulse{opacity:.32}

/* bring + agenda (from Sanctuary) */
.bring{list-style:none;margin:10px 0 0;padding:0}
.bring li{display:flex;gap:11px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--rule-soft);font-size:13.5px;color:var(--ink-70)}
.bring li:last-child{border-bottom:0}
.bring .bx{width:16px;height:16px;flex:none;margin-top:2px;border-radius:5px;border:1px solid var(--ink-25);background:var(--card)}
.agenda{list-style:none;margin:14px 0 0;padding:0 0 0 2px;position:relative}
.agenda li{display:flex;gap:14px;position:relative;padding-bottom:20px}
.agenda li:last-child{padding-bottom:0}
.agenda li::before{content:"";position:absolute;left:4.5px;top:14px;bottom:-2px;width:1px;background:var(--rule)}
.agenda li:last-child::before{display:none}
.agenda .node{width:10px;height:10px;flex:none;margin-top:5px;border-radius:50%;background:var(--paper);border:1.5px solid var(--gold);position:relative;z-index:1}
.agenda li:first-child .node{background:var(--gold)}
.agenda .t{width:60px;flex:none;font-size:11.5px;font-weight:700;color:var(--gold);letter-spacing:.03em;padding-top:2px}
.agenda .d{font-size:13.5px;line-height:1.45;color:var(--ink-70)}

/* who's coming */
.stack{display:flex;align-items:center}
.mono{
  width:32px;height:32px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:#FDFAF2;background:var(--gold-l);
  border:2px solid var(--card);margin-left:-8px;
}
.stack .mono:first-child{margin-left:0}
.mono.d{background:var(--dark);color:var(--cream)}
.mono.m{background:var(--ink-45)}
.card{background:var(--card);border:1px solid var(--rule);border-radius:18px}
.goingcard{display:block;width:100%;text-align:left;padding:17px;margin-top:22px}
.goingcard:active{transform:scale(.995)}
.goingcard .top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.goingcard .num{font-family:var(--serif);font-size:19px}
.goingcard .num span{color:var(--ink-25)}

.hostrow{display:flex;align-items:center;gap:13px;margin-top:18px}
.hostrow .mono{width:44px;height:44px;font-size:15px;margin-left:0}

/* sticky CTA */
.sticky{
  position:absolute;left:0;right:0;bottom:0;z-index:22;
  display:flex;align-items:center;gap:14px;
  padding:14px calc(20px + var(--sar)) var(--bottom) calc(20px + var(--sal));
  background:linear-gradient(to top,var(--paper) 62%,rgba(246,240,227,0));
}
.sticky .pr{flex:none}
.sticky .pr .p{font-family:var(--serif);font-size:19px;line-height:1.1}
.sticky .pr .n{font-size:10.5px;color:var(--ink-45);margin-top:3px}
.sticky .btn{flex:1;box-shadow:0 10px 26px -10px rgba(64,50,16,.55)}

/* ---------- tab bar ---------- */
/* A REAL bar, not a floating pill (task #2267): full-bleed edge to edge, pinned
   to bottom:0, square top edge, and its background extends down through the
   home-indicator inset so nothing shows underneath it. */
.tabbar{
  position:absolute;z-index:24;
  left:0;right:0;bottom:0;
  height:var(--barh);
  display:flex;align-items:flex-start;
  padding:0 var(--sar) var(--sab) var(--sal);
  background:rgba(250,245,235,.91);
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  box-shadow:0 -1px 0 rgba(94,78,38,.13), 0 -12px 26px -22px rgba(64,50,16,.6);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .tabbar{background:#FBF6EC}
}
.tabbar button{
  flex:1;position:relative;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  height:var(--tabh);padding-top:9px;
  color:var(--tab-off);transition:color .26s var(--ease);
}
.tabbar button.active{color:var(--gold)}

/* the indicator: a short accent line seated on the bar's top edge */
.tabbar button::before{
  content:"";position:absolute;top:0;left:50%;
  width:28px;height:2.5px;margin-left:-14px;
  border-radius:0 0 3px 3px;background:var(--gold);
  transform:scaleX(.3);opacity:0;
  transition:transform .32s var(--ease),opacity .2s var(--ease);
}
.tabbar button.active::before{transform:scaleX(1);opacity:1}

/* the soft pill glow behind the active icon */
.tabbar .ti{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:40px;height:26px;
}
.tabbar .ti::before{
  content:"";position:absolute;inset:0;border-radius:13px;
  background:rgba(150,118,42,.12);
  transform:scale(.66);opacity:0;
  transition:transform .3s var(--ease),opacity .24s var(--ease);
}
.tabbar button.active .ti::before{transform:scale(1);opacity:1}

/* outline icon crossfades to a filled one when the tab is active */
.tabbar .ti .io,.tabbar .ti .if{
  position:absolute;display:flex;
  transition:opacity .22s var(--ease),transform .3s var(--ease);
}
.tabbar .ti .if{opacity:0;transform:scale(.82)}
.tabbar button.active .ti .io{opacity:0;transform:scale(1.12)}
.tabbar button.active .ti .if{opacity:1;transform:scale(1)}

.tabbar .tl{
  font-size:9.5px;font-weight:700;letter-spacing:.03em;
  opacity:.66;transition:opacity .26s var(--ease);
}
.tabbar button.active .tl{opacity:1}

/* ---------- sheets ---------- */
.sheet-host{position:absolute;inset:0;z-index:60;display:flex;flex-direction:column;justify-content:flex-end}
.sheet-scrim{position:absolute;inset:0;background:rgba(24,19,8,.5);backdrop-filter:blur(3px);animation:fadeIn .22s ease}
.sheet-card{
  position:relative;max-height:calc(100% - var(--sat) - 24px);overflow-y:auto;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  animation:sheetUp .32s var(--ease);
}
.sheet-host.out .sheet-card{animation:sheetUp .26s var(--ease) reverse forwards}
.sheet-host.out .sheet-scrim{animation:fadeIn .26s ease reverse forwards}
.sheet{
  background:var(--paper);border-radius:24px 24px 0 0;border-top:1px solid var(--rule);
  padding:10px calc(20px + var(--sar)) calc(var(--sab) + 22px) calc(20px + var(--sal));
  box-shadow:0 -20px 50px -24px rgba(42,28,20,.5);
}
.grab{width:38px;height:4px;border-radius:99px;background:var(--ink-25);margin:0 auto 16px}

.stepper{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 16px;border:1px solid var(--rule);border-radius:14px;background:var(--card)}
.stepper .sbtn{width:38px;height:38px;border-radius:11px;border:1px solid var(--rule);display:flex;align-items:center;justify-content:center;font-size:19px;background:var(--paper)}
.stepper .sbtn:active{transform:scale(.9)}
.stepper .sval{font-family:var(--serif);font-size:22px;min-width:26px;text-align:center}
.rowtog{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;text-align:left;padding:14px 16px;border:1px solid var(--rule);border-radius:14px;background:var(--card)}
.sw{width:46px;height:27px;flex:none;border-radius:99px;background:var(--ink-25);position:relative;transition:background var(--t)}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;background:#FFFCF6;box-shadow:0 2px 5px rgba(42,28,20,.28);transition:transform .3s var(--ease)}
.rowtog.on .sw,.sw.on{background:var(--sage)}
.rowtog.on .sw::after,.sw.on::after{transform:translateX(19px)}
textarea.note,.field{
  width:100%;min-height:76px;resize:none;padding:13px 15px;
  border:1px solid var(--rule);border-radius:14px;background:var(--card);
  font-size:13.5px;line-height:1.55;color:var(--ink);
}
.field{min-height:0}
textarea.note:focus,.field:focus{outline:none;border-color:var(--gold-l);background:#FFFDF6}
textarea.note::placeholder,.field::placeholder{color:var(--ink-25)}

.plist{list-style:none;margin:0;padding:0}
.plist li{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--rule-soft)}
.plist li:last-child{border-bottom:0}
.plist .nm{flex:1;min-width:0;font-size:13.5px;font-weight:600}
.plist .rl{display:block;font-size:11.5px;color:var(--ink-45);margin-top:3px;font-weight:400}
.avgrid{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.avgrid .mono{margin-left:0;width:30px;height:30px;font-size:10px;border-width:0}

/* ---------- ticket (from Sanctuary) ---------- */
.ticket{position:relative;background:var(--card);border:1px solid var(--rule);border-radius:18px;box-shadow:var(--shadow-l);overflow:hidden}
.ticket .tt{padding:20px 20px 18px}
.ticket .perf{
  position:relative;height:22px;
  background:repeating-linear-gradient(90deg,var(--rule) 0 6px,transparent 6px 13px);
  background-size:100% 1px;background-position:0 50%;background-repeat:repeat-x;
}
.ticket .perf::before,.ticket .perf::after{content:"";position:absolute;top:50%;width:22px;height:22px;border-radius:50%;background:var(--paper);border:1px solid var(--rule);transform:translateY(-50%)}
.ticket .perf::before{left:-12px}
.ticket .perf::after{right:-12px}
.ticket .tb{padding:16px 20px 20px;display:flex;gap:16px;align-items:center}
.ticket .grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.qr{width:84px;height:84px;flex:none;padding:6px;border-radius:10px;background:#FFFDF9;border:1px solid var(--rule);display:grid;grid-template-columns:repeat(11,1fr);grid-template-rows:repeat(11,1fr);gap:1px}
.qr i{background:var(--ink);border-radius:1px}
.qr i.o{background:transparent}
.code{font-family:var(--serif);font-size:22px;letter-spacing:.05em}

/* ---------- toast ---------- */
.toast-host{position:absolute;left:0;right:0;bottom:calc(var(--barh) + 14px);z-index:70;display:flex;justify-content:center;pointer-events:none;padding:0 20px}
.toast{display:inline-flex;align-items:center;gap:9px;padding:12px 18px;border-radius:24px;background:var(--dark);color:var(--cream);font-size:12.5px;font-weight:700;box-shadow:var(--shadow-l);animation:fadeUp .3s var(--ease)}
.toast.out{animation:fadeIn .28s ease reverse forwards}

/* ---------- onboarding ---------- */
#v-onboard{background:var(--paper);z-index:80}
#v-onboard .scroll{padding-bottom:calc(var(--sab) + 28px)}
.obhead{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:24px}
.obhead img{width:76px;height:76px;border-radius:19px;box-shadow:0 10px 28px rgba(64,50,16,.2)}
.oblabel{font-size:10px;letter-spacing:.16em;font-weight:700;color:var(--ink-45);text-transform:uppercase;margin-bottom:7px}
.ordiv{display:flex;align-items:center;gap:12px;margin:4px 0}
.ordiv i{flex:1;height:1px;background:var(--rule)}
.ordiv span{font-size:10px;letter-spacing:.14em;color:var(--ink-45);font-weight:700}

/* ---------- splash ---------- */
#v-splash{
  position:absolute;inset:0;z-index:100;display:flex;
  flex-direction:column;align-items:center;justify-content:center;
  background:#201A0E;padding:40px;
  transition:opacity .5s ease;
}
#v-splash.gone{opacity:0;pointer-events:none}
#v-splash .glow{position:absolute;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(180,145,60,.22),transparent 65%);animation:glow 3.4s ease-in-out infinite}
@keyframes glow{0%,100%{opacity:.35}50%{opacity:.7}}
#v-splash .cross{position:relative;width:64px;height:92px;margin-bottom:32px}
#v-splash .cross i{position:absolute;background:var(--brass);border-radius:3px}
#v-splash .cv{left:29px;top:0;width:6px;height:92px;transform-origin:top;animation:cv .9s cubic-bezier(.2,.8,.3,1) both}
#v-splash .ch{left:6px;top:24px;width:52px;height:6px;animation:ch .7s .55s cubic-bezier(.2,.8,.3,1) both}
@keyframes cv{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes ch{from{transform:scaleX(0)}to{transform:scaleX(1)}}
#v-splash .wm{font-family:var(--serif);font-size:19px;letter-spacing:.3em;color:#F6F0E3;text-align:center;animation:fadeUp .8s .9s ease both}
#v-splash .rule{width:34px;height:1px;background:rgba(199,162,75,.5);margin:24px 0;animation:fadeIn 1s 1.3s ease both}
#v-splash .verse{font-family:var(--serif);font-style:italic;font-size:15.5px;line-height:1.6;color:rgba(235,217,168,.9);text-align:center;max-width:250px;animation:fadeUp .9s 1.5s ease both}
#v-splash .ref{font-size:10px;letter-spacing:.2em;color:rgba(235,217,168,.55);margin-top:12px;font-weight:700;animation:fadeIn 1s 1.9s ease both}
/* the tap affordance: hidden until the cross and the verse have finished, then
   it breathes. Nothing auto-advances — see boot() in app.js. */
#v-splash .tapon{
  position:absolute;left:0;right:0;bottom:calc(var(--sab) + 46px);
  display:flex;flex-direction:column;align-items:center;gap:11px;
  opacity:0;transform:translateY(6px);pointer-events:none;
  transition:opacity .9s ease,transform .9s var(--ease);
}
#v-splash.ready .tapon{opacity:1;transform:none}
#v-splash .tapon i{
  width:28px;height:28px;border-radius:50%;
  border:1px solid rgba(199,162,75,.42);
  box-shadow:0 0 0 0 rgba(199,162,75,.28);
  animation:tapring 2.6s var(--ease) infinite;
}
@keyframes tapring{0%{box-shadow:0 0 0 0 rgba(199,162,75,.3)}70%{box-shadow:0 0 0 13px rgba(199,162,75,0)}100%{box-shadow:0 0 0 0 rgba(199,162,75,0)}}
#v-splash .tapon span{
  font-size:9.5px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(235,217,168,.62);
  animation:tapbreathe 3.2s ease-in-out infinite;
}
@keyframes tapbreathe{0%,100%{opacity:.45}50%{opacity:.95}}

/* ---------- misc blocks reused from the current app ---------- */
.statgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px}
.statgrid .s{background:var(--card);border:1px solid var(--rule);border-radius:16px;padding:14px 10px;text-align:center}
.statgrid .n{font-family:var(--serif);font-size:24px;color:var(--gold)}
.statgrid .l{font-size:9.5px;letter-spacing:.08em;color:var(--ink-45);font-weight:700;margin-top:2px}
.listcard{background:var(--card);border:1px solid var(--rule);border-radius:16px;overflow:hidden}
.listcard .row{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--rule-soft);font-size:13.5px;font-weight:500}
.listcard .row:last-child{border-bottom:0}
.listcard .row span{color:var(--gold-l)}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.tiles div{border-radius:14px;overflow:hidden;background:#E6DCC4}
.tiles img{width:100%;height:100%;object-fit:cover}
.prayer{background:var(--card);border:1px solid var(--rule);border-radius:18px;padding:16px;margin-bottom:12px}
.prayer .ph{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.prayer .pt{font-size:14px;line-height:1.55;color:var(--ink-70);margin:0 0 12px}
.praybtn{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:20px;font-size:11.5px;font-weight:700;background:transparent;color:var(--gold);border:1px solid rgba(150,118,42,.4)}
.praybtn.on{background:var(--dark);color:var(--cream);border-color:var(--dark)}
.notifrow{display:flex;gap:12px;background:var(--card);border:1px solid var(--rule);border-radius:16px;padding:13px 15px;margin-bottom:10px}
.notifrow .nc{width:34px;height:34px;flex:none;border-radius:10px;background:rgba(180,145,60,.16);color:var(--gold);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700}
.tkrow{display:flex;align-items:center;gap:13px;width:100%;text-align:left;background:var(--dark);border-radius:16px;padding:13px 15px;margin-bottom:10px}
.tkrow .t{font-family:var(--serif);font-size:15.5px;color:#F6F0E3}
.tkrow .s{font-size:11px;color:rgba(235,217,168,.65);margin-top:2px}
.empty{border:1px dashed var(--ink-25);border-radius:16px;padding:18px;text-align:center;font-size:12.5px;color:var(--ink-45)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}