/* ===========================================================
   VR CHURCH · WEEKEND SERVICES — hero card (left) + simple
   quick-access list of upcoming weekends (right). One layout,
   public-facing and editable. FF XIV Saturdays · VRChat Sundays.
   =========================================================== */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
:root{
  --void:#050508; --surface:#0d0d14; --lift:#14141f; --lift2:#191926; --edge:#22223a;
  --fog:#a8a8c8; --dim:#6b6b8a; --snow:#f0f0ff;
  --volt:#00cfff; --arc:#c8ff00; --gold:#ffcf4a; --blurple:#5865f2;
  --volt-glow:rgba(0,207,255,.4); --arc-glow:rgba(200,255,0,.4);
  --gold-glow:rgba(255,207,74,.4); --blurple-glow:rgba(88,101,242,.5);
}
html,body{ min-height:100%; background:var(--void); overflow-x:clip; }
body{ font-family:'JetBrains Mono',monospace; color:var(--snow); -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(70% 50% at 80% 6%, rgba(0,207,255,.09), transparent 60%),
    radial-gradient(60% 50% at 10% 96%, rgba(200,255,0,.045), transparent 62%),
    var(--void);
}
#root{ min-height:100vh; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
a{ color:inherit; text-decoration:none; }
.hud-dot{ width:6px; height:6px; border-radius:50%; background:currentColor; box-shadow:0 0 8px currentColor; animation:pulse 2s infinite; flex:0 0 auto; }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.18} }
@media(prefers-reduced-motion:reduce){ .hud-dot{ animation:none; } }
.starfield{ position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.45; }

/* ---------- SHELL ---------- */
.shell{ position:relative; z-index:2; min-height:100vh; display:flex; flex-direction:column; }
.topbar{ flex:0 0 auto; position:sticky; top:0; z-index:30; height:58px; display:flex; align-items:center; justify-content:space-between; padding:0 max(22px, calc((100% - 1080px) / 2)); background:rgba(5,5,8,.96); border-bottom:1px solid var(--edge); }
.tb-left{ display:flex; align-items:center; gap:14px; }
.tb-logo{ display:flex; align-items:center; gap:9px; }
.tb-logo img{ height:24px; }
.tb-logo .wm{ font-family:'Rajdhani',sans-serif; font-weight:700; font-size:18px; letter-spacing:.09em; text-transform:uppercase; }
.tb-logo .wm .v{ color:var(--volt); text-shadow:0 0 14px var(--volt-glow); }
.tb-back{ font-size:11px; letter-spacing:.06em; color:var(--fog); border:1px solid var(--edge); padding:7px 11px; transition:all .15s; }
.tb-back:hover{ border-color:var(--volt); color:var(--volt); }
.tb-tag{ font-size:10.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--dim); padding-left:14px; border-left:1px solid var(--edge); }
.tb-right{ display:flex; align-items:center; gap:14px; }
.tz-chip{ display:flex; align-items:center; gap:9px; font-size:10.5px; letter-spacing:.08em; color:var(--fog); border:1px solid var(--edge); background:var(--surface); padding:8px 13px; }
.tz-chip .hud-dot{ color:var(--arc); }
.tz-chip b{ color:var(--snow); font-weight:500; }
.join-btn{ display:flex; align-items:center; gap:9px; background:var(--blurple); color:#fff; font-weight:700; font-size:11.5px; letter-spacing:.06em; padding:10px 15px; box-shadow:0 0 22px var(--blurple-glow); transition:filter .2s, box-shadow .2s; }
.join-btn:hover{ filter:brightness(1.08); box-shadow:0 0 34px rgba(88,101,242,.6); }
.join-btn svg{ width:17px; height:17px; }

/* ---------- STAGE ---------- */
.stage{ flex:1; position:relative; min-height:0; display:flex; flex-direction:column; width:100%; max-width:1124px; margin:0 auto; padding:0 22px; }

/* ===== HERO CARD (left) ===== */
.pn-thumb{ display:none; }
.panel{ flex:none; position:relative; z-index:6; padding:24px 28px 0; display:flex; flex-direction:column;
  border-bottom:1px solid var(--edge); overflow-y:visible; overscroll-behavior:contain;
  background:linear-gradient(180deg, rgba(13,13,20,.6), rgba(5,5,8,.3)); }
.pn-kicker{ display:flex; align-items:center; gap:9px; font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); margin-bottom:12px; }
.pn-kicker.viewing{ color:var(--volt); }
.pn-bigdate{ font-family:'Rajdhani',sans-serif; font-weight:700; text-transform:uppercase; font-size:clamp(40px,5vw,72px); white-space:nowrap;
  line-height:.86; letter-spacing:-.005em; color:var(--volt); text-shadow:0 0 34px var(--volt-glow); margin-bottom:8px; }

.pn-block{ margin-top:12px; border:1px solid var(--edge); border-left-width:2px; background:rgba(13,13,20,.5); padding:16px 17px; display:flex; gap:15px; align-items:stretch; }
.pn-bd{ flex:1 1 auto; min-width:0; }
.pn-thumb{ flex:0 0 116px; align-self:stretch; position:relative; min-height:132px; overflow:hidden; border:1px solid var(--edge); background:var(--lift); }
.pn-thumb img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; filter:saturate(1.05) contrast(1.03) brightness(.95); }
.pn-thumb::after{ content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(5,5,8,.05), rgba(5,5,8,0) 50%, rgba(5,5,8,.5)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.04); }
.pn-thumb.arc::before{ content:''; position:absolute; top:-1px; left:-1px; width:14px; height:14px; border-top:2px solid var(--arc); border-left:2px solid var(--arc); z-index:2; }
.pn-thumb.volt::before{ content:''; position:absolute; bottom:-1px; right:-1px; width:14px; height:14px; border-bottom:2px solid var(--volt); border-right:2px solid var(--volt); z-index:2; }
.pn-block.sat{ border-left-color:var(--arc); }
.pn-block.sun.sermon{ border-left-color:var(--volt); }
.pn-block.sun.community{ border-left-color:var(--gold); }
.pn-block.sun.volunteer{ border-left-color:var(--arc); }
.pn-blabel{ display:flex; align-items:center; gap:9px; font-family:'Rajdhani',sans-serif; font-weight:700; font-size:14px; letter-spacing:.2em; text-transform:uppercase; }
.pn-block.sat .pn-blabel{ color:var(--arc); }
.pn-block.sun.sermon .pn-blabel{ color:var(--volt); }
.pn-block.sun.community .pn-blabel{ color:var(--gold); }
.pn-block.sun.volunteer .pn-blabel{ color:var(--arc); }
.pn-blabel .tick{ width:16px; height:2px; background:currentColor; box-shadow:0 0 7px currentColor; }
.plat{ margin-left:2px; font-family:'JetBrains Mono',monospace; font-size:8px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; border:1px solid currentColor; border-radius:2px; padding:3px 6px; opacity:.9; }
.pn-title-sm{ font-family:'Rajdhani',sans-serif; font-weight:700; font-size:23px; line-height:1.08; letter-spacing:.01em; color:var(--snow); margin-top:12px; }
.pn-title-sm em{ font-style:normal; color:var(--volt); }
.pn-block.community .pn-title-sm,.pn-block.volunteer .pn-title-sm{ font-size:23px; }
.pn-muted{ color:var(--dim); font-size:12.5px; margin-top:7px; }
.pn-time-line{ font-size:11.5px; letter-spacing:.01em; color:var(--fog); margin-top:8px; }
.pn-livemini{ font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--arc); margin-top:9px; }
.pn-note{ font-size:12px; line-height:1.6; color:var(--fog); margin-top:11px; padding-left:11px; border-left:2px solid var(--edge); text-wrap:pretty; }
.pn-spk{ margin-top:13px; display:flex; flex-direction:column; gap:9px; }
.pn-spk .row{ display:flex; align-items:center; gap:10px; }
.pn-spk img,.pn-spk .guest{ width:32px; height:32px; border-radius:7px; object-fit:cover; border:1px solid var(--edge); background:var(--lift); flex:0 0 auto; }
.pn-spk .guest{ display:flex; align-items:center; justify-content:center; color:var(--gold); }
.pn-spk .nm{ font-family:'Rajdhani',sans-serif; font-weight:600; font-size:16px; line-height:1.05; }
.pn-spk .ro{ font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--volt); margin-top:2px; }
.pn-spk .row.gst .ro{ color:var(--gold); }

.pn-editbar{ position:sticky; bottom:0; margin-top:16px; padding:14px 0 18px; z-index:3;
  background:linear-gradient(180deg, rgba(8,8,14,0), rgba(8,8,14,.94) 42%); }
.pn-edit{ width:100%; display:flex; align-items:center; justify-content:center; gap:10px; padding:14px;
  border:1px solid var(--volt); background:rgba(0,207,255,.07); color:var(--volt);
  font-family:'Rajdhani',sans-serif; font-weight:700; font-size:13px; letter-spacing:.14em; text-transform:uppercase; transition:all .18s; }
.pn-edit:hover{ background:rgba(0,207,255,.14); box-shadow:0 0 22px var(--volt-glow); }
.pn-edit svg{ width:14px; height:14px; }

/* ===== inline weekend editor (in the hero column) ===== */
.ef-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:2px; }
.ef-head .t{ font-family:'Rajdhani',sans-serif; font-weight:700; text-transform:uppercase; font-size:17px; letter-spacing:.03em; color:var(--volt); }
.ef-head .x{ width:28px; height:28px; border:1px solid var(--edge); display:flex; align-items:center; justify-content:center; color:var(--fog); }
.ef-head .x:hover{ border-color:var(--volt); color:var(--volt); }
.ef-sub{ font-size:11px; letter-spacing:.04em; color:var(--dim); margin:2px 0 8px; }
.ef-sectitle{ display:flex; align-items:center; gap:9px; font-family:'Rajdhani',sans-serif; font-weight:700; font-size:13px; letter-spacing:.2em; text-transform:uppercase; margin:18px 0 12px; padding-top:14px; border-top:1px solid var(--edge); }
.ef-sectitle.sat{ color:var(--arc); } .ef-sectitle.sun{ color:var(--volt); }
.ef{ margin-bottom:14px; }
.ef-l{ display:block; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--dim); margin-bottom:8px; }
.ef-l .opt{ color:var(--dim); text-transform:none; letter-spacing:0; }
.ef-row{ display:flex; gap:8px; }
.ef-inp{ width:100%; background:var(--lift); border:1px solid var(--edge); padding:11px 13px; font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--snow); outline:none; transition:border-color .18s; }
.ef-inp:focus{ border-color:var(--volt); }
.ef-inp::placeholder{ color:var(--dim); }
.ef-inp.chapter{ width:84px; flex:0 0 auto; text-align:center; }
.ef-switchrow{ display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:12px; color:var(--snow); margin-bottom:14px; }
.ef-hosts{ display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.ef-host{ display:flex; align-items:center; gap:8px; padding:8px 9px; border:1px solid var(--edge); background:var(--lift); transition:all .14s; text-align:left; }
.ef-host:hover{ border-color:var(--volt); }
.ef-host.on{ border-color:var(--volt); background:rgba(0,207,255,.08); }
.ef-host img,.ef-host .g{ width:24px; height:24px; border-radius:6px; object-fit:cover; flex:0 0 auto; }
.ef-host .g{ display:flex; align-items:center; justify-content:center; color:var(--gold); border:1px solid var(--edge); }
.ef-host .hn{ display:block; font-size:11px; color:var(--snow); line-height:1.1; }
.ef-host.on .hn{ color:var(--volt); }
.ef-host .hr{ display:block; font-size:8.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--dim); margin-top:3px; }
.ef-note{ width:100%; min-height:54px; resize:vertical; background:var(--lift); border:1px solid var(--edge); padding:11px 13px; font-family:'JetBrains Mono',monospace; font-size:12px; line-height:1.55; color:var(--snow); outline:none; }
.ef-note:focus{ border-color:var(--volt); }
.ef-actions{ display:flex; gap:9px; margin:16px 0 22px; }
.ef-save{ flex:1; background:var(--volt); color:#04141b; font-family:'Rajdhani',sans-serif; font-weight:700; font-size:13px; letter-spacing:.12em; text-transform:uppercase; padding:13px; transition:box-shadow .18s,transform .18s; }
.ef-save:hover{ box-shadow:0 0 24px var(--volt-glow); transform:translateY(-1px); }
.ef-cancel{ padding:13px 16px; border:1px solid var(--edge); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--fog); }
.ef-cancel:hover{ border-color:var(--volt); color:var(--volt); }
.dc-toggle{ display:flex; gap:11px; align-items:center; padding:13px; border:1px solid rgba(88,101,242,.4); background:rgba(88,101,242,.06); }
.dc-toggle .ic{ width:26px; height:26px; color:var(--blurple); flex:0 0 auto; }
.dc-toggle .ic svg{ width:100%; height:100%; }
.dc-toggle .dc-meta{ flex:1; }
.dc-toggle .dc-meta .t{ font-size:11.5px; font-weight:500; color:var(--snow); }
.dc-toggle .dc-meta .d{ font-size:10px; color:var(--fog); margin-top:2px; }
.dc-toggle .dc-meta .d b{ color:#aab0f5; font-weight:500; }
.switch{ width:40px; height:23px; border-radius:12px; background:var(--edge); position:relative; transition:background .2s; flex:0 0 auto; }
.switch.on{ background:var(--blurple); box-shadow:0 0 12px var(--blurple-glow); }
.switch .knob{ position:absolute; top:3px; left:3px; width:17px; height:17px; border-radius:50%; background:#fff; transition:transform .2s; }
.switch.on .knob{ transform:translateX(17px); }

/* ===== QUICK-ACCESS LIST (right) ===== */
.listpane{ padding:22px 0 30px; }
.lp-head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:16px; flex-wrap:wrap; }
.lp-title{ font-family:'Rajdhani',sans-serif; font-weight:700; text-transform:uppercase; font-size:20px; letter-spacing:.04em; }
.lp-title em{ font-style:normal; color:var(--volt); }
.lp-sub{ font-size:10.5px; letter-spacing:.06em; color:var(--dim); }
.lp-legend{ display:flex; gap:16px; margin-bottom:14px; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--fog); }
.lp-legend span{ display:flex; align-items:center; gap:7px; }
.lp-legend .dot{ width:9px; height:9px; }

.wkrow{ display:flex; align-items:center; gap:18px; padding:15px 18px; border:1px solid var(--edge); border-left-width:3px; border-left-color:transparent; background:var(--surface); margin-bottom:9px; cursor:pointer; transition:border-color .15s, background .15s, transform .15s; }
.wkrow:hover{ border-color:#34344f; background:var(--lift); transform:translateX(2px); }
.wkrow.active{ border-left-color:var(--volt); background:var(--lift); box-shadow:0 0 24px rgba(0,207,255,.08); }
.wk-date{ flex:0 0 120px; }
.wk-date b{ display:block; font-family:'Rajdhani',sans-serif; font-weight:700; font-size:19px; letter-spacing:.01em; color:var(--snow); white-space:nowrap; }
.wk-date small{ display:inline-block; margin-top:5px; font-size:8.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); border:1px solid var(--edge); padding:2px 7px; }
.wkrow.ondeck .wk-date small{ color:var(--gold); border-color:rgba(255,207,74,.5); background:rgba(255,207,74,.08); }
.wk-lines{ flex:1; display:flex; flex-direction:column; gap:8px; min-width:0; }
.wk-line{ display:flex; align-items:center; gap:9px; font-size:12.5px; min-width:0; }
.wk-line.sat{ color:var(--arc); } .wk-line.sun{ color:var(--volt); }
.wk-line .dot{ width:9px; height:9px; background:currentColor; box-shadow:0 0 7px currentColor; flex:0 0 auto; }
.wk-line .dot.off{ background:var(--dim); box-shadow:none; }
.wk-line .plat{ margin-left:0; }
.wk-line .txt{ color:var(--snow); font-family:'Rajdhani',sans-serif; font-weight:600; font-size:17px; letter-spacing:.01em; line-height:1.05; }
.wk-line .muted{ color:var(--dim); font-size:12px; }
.wk-edit{ flex:0 0 auto; width:36px; height:36px; border:1px solid var(--edge); display:flex; align-items:center; justify-content:center; color:var(--dim); transition:all .16s; }
.wk-edit:hover{ border-color:var(--volt); color:var(--volt); box-shadow:0 0 16px var(--volt-glow); }
.wk-edit svg{ width:15px; height:15px; }

/* ---------- TOAST ---------- */
.toast{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:50; display:flex; align-items:center; gap:13px; padding:13px 18px 13px 14px; background:#1e2128; border:1px solid rgba(88,101,242,.5); min-width:340px; box-shadow:0 18px 50px rgba(0,0,0,.6); animation:rise .3s cubic-bezier(.2,.7,.2,1); }
@keyframes rise{ from{opacity:0; transform:translate(-50%,14px)} to{opacity:1; transform:translate(-50%,0)} }
.toast .dc-ic{ width:34px; height:34px; border-radius:50%; background:var(--blurple); display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.toast .dc-ic svg{ width:20px; height:20px; color:#fff; }
.toast .tx{ flex:1; line-height:1.3; }
.toast .tx .ch{ font-size:11px; color:#aab0f5; }
.toast .tx .msg{ font-size:12.5px; margin-top:2px; color:var(--snow); }
.toast .tx .msg b{ color:var(--volt); font-weight:500; }
.toast .chk{ color:var(--arc); flex:0 0 auto; }

/* ---------- responsive ---------- */
@media(max-width:920px){
  html,body{ overflow:auto; }
  #root{ height:auto; }
  .shell{ height:auto; }
  .tb-tag{ display:none; }
  .stage{ flex-direction:column; }
  .panel{ flex:none; border-right:0; border-bottom:1px solid var(--edge); overflow:visible; }
  .pn-editbar{ position:static; background:none; }
  .listpane{ overflow:visible; }
}
@media(max-width:600px){
  body{ font-size:15px; } .tz-chip{ display:none; }
  .wkrow{ gap:12px; padding:13px 14px; }
  .wk-date{ flex-basis:84px; }
  .wk-line .txt{ font-size:14px; }
  .wk-edit{ display:none; }
}

/* ===== v3: sticky hero on scroll, side-by-side blocks, bigger type, breaks ===== */
.panel.hero-view{ position:sticky; top:58px; z-index:8; margin:18px 0 20px; border:1px solid var(--edge); border-top:2px solid var(--volt);
  padding:22px 26px 20px; background:rgba(9,9,15,.97); backdrop-filter:blur(10px); box-shadow:0 22px 60px rgba(0,0,0,.55); }
.panel.hero-view .pn-bigdate{ font-size:clamp(46px,5.4vw,80px); margin-bottom:14px; }
.panel.hero-view .pn-blocks{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.panel.hero-view .pn-blocks.solo{ grid-template-columns:1fr; }
.panel.hero-view .pn-block{ margin-top:0; background:rgba(13,13,20,.6); }
.panel.hero-view .pn-title-sm{ font-size:27px; }
.panel.hero-view .pn-spk .nm{ font-size:17px; }
.panel.hero-view .pn-editbar{ position:static; background:none; margin-top:14px; padding:6px 0 0; }
/* break / holiday card */
.pn-breakcard{ border:1px dashed var(--edge); background:rgba(13,13,20,.5); padding:34px 24px; text-align:center; margin-top:4px; }
.pn-breaklabel{ font-family:'Rajdhani',sans-serif; font-weight:700; text-transform:uppercase; font-size:34px; letter-spacing:.04em; color:var(--gold); text-shadow:0 0 24px var(--gold-glow); }
.pn-breaksub{ font-size:11px; letter-spacing:.16em; color:var(--dim); margin-top:10px; text-transform:uppercase; }
/* list: speaker names + break row */
.wk-spk{ color:var(--fog); font-size:12.5px; font-weight:400; margin-left:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wk-line.brk .txt{ color:var(--gold); }
@media(max-width:760px){
  .panel.hero-view{ position:static; backdrop-filter:none; }
  .panel.hero-view .pn-blocks{ grid-template-columns:1fr; }
}