/* ============ The site's looks (templates), the header button, the Get in touch page and the radio bar ============
   Loaded after style.css on every page. Colours are the brand tokens from style.css plus the few added below
   (see docs/DESIGN-COLORS.md). Each look is chosen in Admin > Site builder > Look and sets html[data-theme]:
   ministry (the standard look, style.css alone), editorial, immersive, immersive-light, warm, media. */
:root{
  /* added with the new logo (October 2026) */
  --night:#03053A;      /* the logo's plinth: the Immersive look's page colour */
  --night-2:#0A1150;    /* a raised surface on --night */
  --globe:#0B9DB5;      /* the logo's globe teal: decoration only, never text */
  --paper:#FAF6EE;      /* Warm welcome: page colour */
  --sand:#E8DDC9;       /* Warm welcome: borders */
  --clay:#A0522D;       /* Warm welcome: eyebrows and small accents (5.6:1 on --paper) */
  --clay-soft:#F3E4D4;  /* Warm welcome: tinted bands */
}

/* ---------- header: the full name as the wordmark, Get in touch as the one strong button, Give as a quieter link ---------- */
.brand-name{display:flex;flex-direction:column;font-size:1.04rem;line-height:1.12;letter-spacing:.2px}
.brand-name span:last-child{color:var(--teal-600)}
.nav-end a.cta,.cta{display:inline-flex;align-items:center;justify-content:center;background:var(--navy);color:var(--white);text-decoration:none;font:600 .93rem/1.2 var(--font-body);padding:10px 18px;border-radius:99px;min-height:42px;white-space:nowrap;box-shadow:0 6px 16px rgba(5,11,90,.18);transition:background-color .2s,transform .18s,box-shadow .2s;margin-left:6px}
.nav-end a.cta:hover,.cta:hover{background:var(--indigo);color:var(--white);transform:translateY(-1px);box-shadow:0 10px 22px rgba(5,11,90,.24)}
.cta-top{display:none}
.nav-end a.give-link{display:inline-flex;align-items:center;gap:6px}
.give-link svg{color:var(--gold);flex:none}
@media(max-width:1240px){
  .cta-top{display:inline-flex;padding:8px 15px;min-height:42px;font-size:.88rem;margin:0 2px 0 0}
  .nav-end a.cta-nav{display:none}
  .nav-end a.give-link{justify-content:flex-start}
}
/* a wide screen but not quite wide enough for everything at full size */
.top .wrap{max-width:1360px}
@media(max-width:1400px){
  .menu>li>a{padding:9px 7px;font-size:.9rem}
  .menu>li>a::after{left:7px;right:7px}
  .brand-name{font-size:.96rem}
  .nav-end a.cta{padding:10px 16px}
}
@media(max-width:520px){
  .brand-name{font-size:.86rem}
  .burger{font-size:0;gap:0;padding:12px 11px}
  .cta-top{padding:8px 12px;font-size:.82rem;min-height:40px}
}
@media(max-width:400px){
  .top .wrap{gap:8px}
  .brand{gap:8px}
  .brand img{width:32px;height:32px}
  .brand-name{font-size:.8rem}
  .cta-top{padding:8px 10px;font-size:.8rem}
}
@media(max-width:330px){.brand-name{display:none}}

/* ---------- footer: one tidy block: the name and motto, the page links in a row, contact details, copyright ---------- */
footer{margin-top:40px;padding:28px 0 max(18px,env(safe-area-inset-bottom));font-size:.9rem}
.footer-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px}
.footer-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--white)}
.footer-brand:hover{color:var(--white)}
.footer-brand img{width:44px;height:44px;flex:none;border-radius:10px;background:var(--white);padding:3px;object-fit:contain}
.footer-brand span{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.footer-brand strong{font-size:.98rem}
.footer-brand em{color:var(--teal-300);font:italic .85rem var(--font-head)}
.footer-nav{display:flex;flex-wrap:wrap;gap:6px 18px}
.footer-nav a{color:var(--mist);text-decoration:none}
.footer-nav a:hover{color:var(--white);text-decoration:underline}
.footer-contact{margin:14px 0 0;color:var(--footer-text);display:flex;flex-wrap:wrap;gap:2px 0}
.footer-contact>*+*::before{content:'\00b7';margin:0 9px;opacity:.6}
.footer-contact a{color:var(--mist);text-decoration:none}
.footer-contact a:hover{color:var(--white);text-decoration:underline}
.footer-copy{margin-top:14px;padding-top:14px;font-size:.82rem}
@media(max-width:600px){
  footer{margin-top:28px;padding-top:22px}
  .footer-top{flex-direction:column;align-items:flex-start;gap:12px}
  .footer-nav{gap:0 16px}
  .footer-nav a{padding:7px 0}
  .footer-contact{margin-top:8px;font-size:.86rem}
  .footer-copy{margin-top:10px;padding-top:12px}
}

/* ---------- the welcome banner: the photo behind it is only used by the Immersive look ---------- */
.hero-bg{display:none}
.hero-logo.is-photo img{width:100%;height:100%;object-fit:cover}

/* ---------- Get in touch ---------- */
:root{
  --ico-visit:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E7C93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E");
  --ico-write:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E7C93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");
  --ico-pray:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E7C93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3c1.6 2 2.2 3.4 0 5.4C9.8 6.4 10.4 5 12 3z'/%3E%3Crect x='8.5' y='10' width='7' height='11' rx='1.5'/%3E%3C/svg%3E");
}
.touch-ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0 0 22px}
.touch{display:flex;flex-direction:column;gap:2px;padding:18px;border:1px solid var(--border);border-radius:16px;background:var(--white);text-decoration:none;color:var(--ink);box-shadow:var(--shadow-1);transition:transform .25s ease,border-color .25s,box-shadow .25s}
.touch:hover{color:var(--ink);border-color:var(--teal);transform:translateY(-2px);box-shadow:var(--shadow-2)}
.touch strong{color:var(--navy);font-size:1.05rem}
.touch-ico{width:42px;height:42px;border-radius:12px;background:var(--mist) center/22px no-repeat;margin-bottom:8px}
.ico-visit{background-image:var(--ico-visit)}.ico-write{background-image:var(--ico-write)}.ico-pray{background-image:var(--ico-pray)}
.visit-times p{margin:.15em 0}
.contact-details .visit-times{margin:0 0 1em}
@media(max-width:700px){
  .touch-ways{grid-template-columns:minmax(0,1fr);gap:10px}
  .touch{display:grid;grid-template-columns:42px minmax(0,1fr);column-gap:12px;align-items:center;padding:12px 14px}
  .touch-ico{grid-row:span 2;margin:0}
}

/* ---------- home: the ministry's three expressions, and the Bishop ---------- */
.pillars-head{margin:0 0 4px}
.pillars-intro{margin:0 0 16px;max-width:60ch}
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:16px}
.pillar{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;background:var(--white);border:1px solid var(--border);border-radius:16px;padding:22px 20px 18px;overflow:hidden;box-shadow:var(--shadow-1);transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
.pillar:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)}
.pillar::before{content:'';position:absolute;left:0;right:0;top:0;height:4px;background:var(--teal-600)}
.pillar-2::before{background:var(--navy)}.pillar-3::before{background:var(--indigo)}
.pillar h3{margin:4px 0 0;font-size:1.2rem}
.pillar h3 a{color:var(--navy);text-decoration:none;padding:0}
.pillar h3 a:hover{color:var(--teal-700)}
.pillar p{margin:0;color:var(--slate);font-size:.95rem;flex:1}
.pillar-link{font-weight:600;margin-top:6px;text-decoration:none}
.pillar-link:hover{text-decoration:underline}
.founder-card{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:28px;align-items:center}
.founder-card.no-photo{grid-template-columns:minmax(0,1fr)}
.founder-photo{aspect-ratio:4/5;border-radius:14px;overflow:hidden;background:var(--mist)}
.founder-photo img{width:100%;height:100%;object-fit:cover;object-position:center 18%;display:block}
.founder-copy h2{font-size:var(--fs-xl);margin:4px 0 10px}
.founder-copy .prose{margin-bottom:14px}
@media(max-width:700px){
  .founder-card{grid-template-columns:110px minmax(0,1fr);gap:16px;align-items:start}
  .founder-copy h2{font-size:var(--fs-lg)}
}
[data-theme=warm] .pillar{border-color:var(--sand);box-shadow:none}
[data-theme=warm] .pillar-1::before{background:var(--clay)}
[data-theme=warm] .founder-photo{border:5px solid var(--white);box-shadow:-14px 14px 0 var(--clay-soft)}
[data-theme=editorial] .pillar{box-shadow:none;border-color:#E6EBF0}
[data-theme=immersive] .pillar{border-color:transparent;box-shadow:0 14px 44px rgba(0,0,0,.35);--tx:var(--ink);--hd:var(--navy);--sub:var(--indigo);--mu:var(--slate);--ln:var(--teal-600);--lnh:var(--teal-700);color:var(--tx)}

/* ---------- the radio bar ---------- */
.radio-bar{position:fixed;z-index:80;left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));max-width:980px;margin:0 auto;background:rgba(5,11,90,.95);color:var(--white);border-radius:18px;border:1px solid rgba(255,255,255,.1);box-shadow:0 18px 50px rgba(3,5,58,.35);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px)}
.rb-inner{display:flex;align-items:center;gap:12px;padding:8px 10px 8px 8px}
.rb-play{flex:none;position:relative;width:48px;height:48px;border-radius:50%;background:var(--white);color:var(--navy);display:grid;place-items:center;text-decoration:none;transition:transform .18s,box-shadow .3s}
.rb-play:hover{color:var(--navy);background:var(--mist);transform:scale(1.04)}
.rb-play svg{grid-area:1/1}
.radio-bar .rb-play::before{content:none!important;display:none!important}  /* not the headphone mark style.css gives links to .mp3 files */
.rb-i-pause{display:none}
.radio-bar:is([data-state=playing],[data-state=loading]) .rb-i-play{display:none}
.radio-bar:is([data-state=playing],[data-state=loading]) .rb-i-pause{display:block}
.radio-bar[data-state=playing] .rb-play{box-shadow:0 0 0 4px rgba(92,208,230,.4)}
.rb-spin{position:absolute;inset:-5px;border-radius:50%;border:3px solid transparent;border-top-color:var(--teal-300);opacity:0}
.radio-bar[data-state=loading] .rb-spin{opacity:1;animation:rb-spin 1s linear infinite}
@keyframes rb-spin{to{transform:rotate(360deg)}}
.rb-info{flex:1;min-width:0}
.rb-line{display:flex;align-items:center;gap:8px;min-width:0}
.rb-chip{display:inline-flex;align-items:center;gap:5px;flex:none;padding:2px 9px 2px 6px;border-radius:99px;background:rgba(255,255,255,.12);color:var(--teal-300);font:700 .68rem/1.5 var(--font-body);letter-spacing:1px;text-transform:uppercase}
.rb-chip svg{width:14px;height:14px}
.radio-bar.is-live .rb-chip{background:var(--error);color:var(--white)}
.radio-bar.is-off .rb-chip{color:var(--footer-text)}
.rb-name{font:700 .98rem/1.3 var(--font-body);color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rb-now{font-size:.85rem;line-height:1.4;color:var(--mist);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.rb-tools{display:flex;align-items:center;gap:10px;flex:none}
.rb-lite{display:inline-flex;align-items:center;gap:6px;margin:0;font:600 .8rem var(--font-body);color:var(--mist);cursor:pointer;min-height:44px;user-select:none}
.rb-lite input{width:16px;height:16px;min-height:0;margin:0;accent-color:var(--teal-300)}
.rb-vol{width:90px;accent-color:var(--teal-300)}
.rb-more{color:var(--white);font:600 .85rem var(--font-body);padding:10px 6px;text-decoration:none}
.rb-more:hover{color:var(--teal-300);text-decoration:underline}
.rb-min{display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:50%;background:rgba(255,255,255,.1);color:var(--white);cursor:pointer;transition:background-color .2s}
.rb-min:hover{background:rgba(255,255,255,.2)}
.rb-min svg{transition:transform .25s}
.radio-bar.is-min{right:auto;max-width:calc(100% - 24px)}
.radio-bar.is-min .rb-now,.radio-bar.is-min .rb-tools>:not(.rb-min){display:none}
.radio-bar.is-min .rb-min svg{transform:rotate(180deg)}
.radio-bar.is-min .rb-name{max-width:42vw}
.radio-bar a:focus-visible,.radio-bar button:focus-visible,.radio-bar input:focus-visible{outline:3px solid var(--teal-300);outline-offset:2px}
html:not(.js) .rb-tools{display:none}
/* the footer clears the bar, so its last line is never hidden underneath */
body.has-radio footer{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
@media(pointer:coarse){.rb-vol{display:none}}
@media(max-width:620px){
  .radio-bar{left:8px;right:8px;bottom:max(8px,env(safe-area-inset-bottom));border-radius:16px}
  .rb-inner{gap:10px;padding:6px 8px 6px 6px}
  .rb-play{width:44px;height:44px}
  .rb-vol,.rb-more{display:none}
  .rb-lite{font-size:.72rem;gap:5px}
  .rb-name{font-size:.92rem}
  .rb-now{font-size:.8rem}
}
@media(max-width:370px){.rb-lite span{max-width:3.4em;line-height:1.1;white-space:normal}}
@media print{.radio-bar{display:none!important}}

/* ---------- the Site builder: choosing a look ---------- */
.look-list{border:0;padding:0;margin:0;display:grid;gap:10px}
.look-opt{position:relative;display:grid;grid-template-columns:104px minmax(0,1fr);gap:12px;align-items:start;margin:0;padding:10px;border:1px solid var(--border);border-radius:12px;background:var(--white);cursor:pointer;font-weight:400;transition:border-color .2s,box-shadow .2s}
.look-opt:hover{border-color:var(--teal)}
.look-opt.on{border-color:var(--teal-600);box-shadow:inset 0 0 0 1px var(--teal-600)}
.look-opt input{position:absolute;opacity:0;pointer-events:none}
.look-opt:focus-within{outline:3px solid var(--royal);outline-offset:2px}
.look-text strong{display:flex;align-items:center;gap:8px;color:var(--navy);font-size:.98rem}
.look-text>span{display:block;font-size:.86rem;color:var(--slate);line-height:1.45;margin-top:2px}
.look-text em{display:block;font-size:.8rem;color:var(--teal-700);font-style:normal;margin-top:4px}
.look-thumb{position:relative;display:block;width:104px;height:74px;border-radius:8px;overflow:hidden;border:1px solid var(--border);background:var(--page)}
.look-thumb i,.look-thumb b,.look-thumb em{position:absolute;display:block}
.look-thumb i{left:0;right:0;top:0;height:10px;background:var(--white);border-bottom:1px solid var(--border)}
.look-thumb b{left:6px;right:6px;top:14px;height:30px;border-radius:4px}
.look-thumb em{left:6px;bottom:6px;width:46px;height:18px;border-radius:3px;background:var(--white);border:1px solid var(--border)}
.look-sw{position:absolute;right:5px;bottom:6px;display:flex;gap:2px}
.look-sw s{display:block;width:9px;height:9px;border-radius:50%;border:1px solid rgba(11,16,51,.2)}
.look-ministry b{background:var(--gradient-brand)}
.look-editorial{background:var(--white)}
.look-editorial b{background:linear-gradient(var(--ink),var(--ink)) 50% 6px/62% 5px no-repeat,linear-gradient(var(--slate),var(--slate)) 50% 14px/40% 2px no-repeat,linear-gradient(#C9D3DE,#C9D3DE) 50% 100%/100% 9px no-repeat}
.look-immersive{background:var(--night);border-color:var(--night)}
.look-immersive i{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.1)}
.look-immersive b{left:0;right:0;top:10px;height:36px;border-radius:0;background:linear-gradient(to top,var(--night),rgba(3,5,58,.2)),linear-gradient(120deg,#2B4C9B,#137A9E)}
.look-warm{background:var(--paper);border-color:var(--sand)}
.look-warm i{background:var(--paper);border-color:var(--sand)}
.look-warm b{background:linear-gradient(var(--navy),var(--navy)) 0 8px/48% 5px no-repeat,linear-gradient(var(--clay),var(--clay)) 0 17px/30% 3px no-repeat,linear-gradient(#C9A98C,#C9A98C) 100% 0/32% 100% no-repeat;border-radius:0}
.look-media b{background:var(--ink);height:22px}
.look-media em{left:0;right:0;bottom:0;width:auto;height:12px;border-radius:0;background:var(--navy);border:0}
.look-media .look-sw{bottom:16px}

/* =====================================================================================================================
   EDITORIAL: a white page, a large centred headline, a wide photo under it, sans-serif headings, pill buttons
   ===================================================================================================================== */
html[data-theme=editorial]{--font-head:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
[data-theme=editorial] body:not(.is-admin){background:var(--white)}
[data-theme=editorial] :is(h1,h2){font-weight:800;letter-spacing:-.02em}
[data-theme=editorial] .brand-name{font-weight:800;letter-spacing:-.01em}
[data-theme=editorial] .btn,[data-theme=editorial] .nav-end a.cta{border-radius:99px}
[data-theme=editorial] .card,[data-theme=editorial] .event-card,[data-theme=editorial] .book,[data-theme=editorial] .tile{border-radius:18px;box-shadow:none;border-color:#E6EBF0}
[data-theme=editorial] .hero{background:transparent;color:var(--ink);padding:76px 0 34px;text-align:center}
[data-theme=editorial] .hero::before{display:none}
[data-theme=editorial] .hero-grid{grid-template-columns:minmax(0,1fr);justify-items:center;gap:40px}
[data-theme=editorial] .hero-copy{max-width:900px}
[data-theme=editorial] .hero .motto{color:var(--teal-600);letter-spacing:4px}
[data-theme=editorial] .hero h1{color:var(--navy);font-size:clamp(2.3rem,6.2vw,4.5rem);line-height:1.04;letter-spacing:-.03em;margin-bottom:.25em}
[data-theme=editorial] .hero p{color:var(--slate);font-size:1.18rem;margin-inline:auto}
[data-theme=editorial] .hero-actions{justify-content:center}
[data-theme=editorial] .hero .btn.light{background:var(--navy);color:var(--white)}
[data-theme=editorial] .hero .btn.light:hover{background:var(--indigo)}
[data-theme=editorial] .hero .btn.outline-light{background:var(--mist);color:var(--navy);border-color:var(--mist)}
[data-theme=editorial] .hero .btn.outline-light:hover{background:#CBEAF2}
[data-theme=editorial] .hero.has-photo .hero-art{display:block;width:100%;max-width:1200px;height:auto;aspect-ratio:21/9;border-radius:26px;background:var(--ink);box-shadow:0 30px 70px rgba(11,16,51,.22);overflow:hidden;animation:rise .9s .15s cubic-bezier(.2,.7,.2,1) both}
[data-theme=editorial] .hero.has-photo .hero-art img{width:100%;height:100%;object-fit:cover;object-position:center 22%}
[data-theme=editorial] .hero.no-photo .hero-logo{order:-1;width:84px;height:84px;background:none;box-shadow:none;margin-bottom:-20px;animation:rise .8s both}
[data-theme=editorial] .hero.no-photo .hero-logo img{width:100%}
[data-theme=editorial] .verse-band{background:transparent;border-block:1px solid var(--border)}
[data-theme=editorial] .page-hero{background:var(--white);color:var(--ink);border-bottom:1px solid var(--border)}
[data-theme=editorial] .page-hero h1{color:var(--navy)}
[data-theme=editorial] .page-hero .eyebrow{color:var(--teal-600)}
[data-theme=editorial] .page-hero .verse{color:var(--indigo)}
[data-theme=editorial] .page-hero::before,[data-theme=editorial] .page-hero::after{display:none}
@media(max-width:820px){
  [data-theme=editorial] .hero{padding:44px 0 24px}
  [data-theme=editorial] .hero.has-photo .hero-art{order:1;aspect-ratio:16/10;border-radius:18px;width:100%;justify-self:stretch}
  [data-theme=editorial] .hero.has-photo .hero-portrait{width:100%}
}

/* =====================================================================================================================
   IMMERSIVE: a dark night-blue stage, a full-screen photo behind the welcome. Reading surfaces (cards, forms, tables) stay
   light, so long texts are as easy to read as on the other looks. Text that sits on the stage itself uses the --tx/--hd
   family below; light surfaces reset it.
   ===================================================================================================================== */
html[data-theme=immersive]{--font-head:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
[data-theme=immersive] body:not(.is-admin){--tx:#E6ECF8;--hd:var(--white);--sub:#D5D8FA;--mu:#A9B6D6;--ln:var(--teal-300);--lnh:#9BE3F0;
  color:var(--tx);background:radial-gradient(1000px 600px at 85% -10%,rgba(26,63,224,.26),transparent 60%),radial-gradient(800px 520px at 0% 35%,rgba(31,162,186,.13),transparent 60%),var(--night);background-color:var(--night);background-repeat:no-repeat}
[data-theme=immersive] :is(.card,.event-card,.book,.tile,details,table,.bcast-next,.opt,.side,.touch,form.contact-form){--tx:var(--ink);--hd:var(--navy);--sub:var(--indigo);--mu:var(--slate);--ln:var(--teal-600);--lnh:var(--teal-700);color:var(--tx)}
[data-theme=immersive] :is(.give-panel,.card.plain){--tx:var(--mist);--hd:var(--white);--sub:#D5D8FA;--mu:#A9B6D6;--ln:var(--teal-300);--lnh:#9BE3F0;color:var(--tx)}
[data-theme=immersive] .card.plain{--tx:#E6ECF8}
/* everything that is not the header, footer, bar or a coloured band */
[data-theme=immersive] body:not(.is-admin)>:not(.top,footer,.radio-bar,.announce,.hero,.page-hero,.fbs-hero,.verse-band,.cta-band) :where(h1,h2,h4){color:var(--hd)}
[data-theme=immersive] body:not(.is-admin)>:not(.top,footer,.radio-bar,.announce,.hero,.page-hero,.fbs-hero,.verse-band,.cta-band) :where(h3),
[data-theme=immersive] body:not(.is-admin)>:not(.top,footer,.radio-bar,.announce,.hero,.page-hero,.fbs-hero,.verse-band,.cta-band) .card h2{color:var(--sub)}
[data-theme=immersive] body:not(.is-admin)>:not(.top,footer,.radio-bar,.announce,.hero,.page-hero,.fbs-hero,.verse-band,.cta-band) :where(.muted,.hint,.event-place){color:var(--mu)}
[data-theme=immersive] body:not(.is-admin)>:not(.top,footer,.radio-bar,.announce,.hero,.page-hero,.fbs-hero,.verse-band,.cta-band) :where(.eyebrow){color:var(--ln)}
[data-theme=immersive] body:not(.is-admin)>:not(.top,footer,.radio-bar,.announce,.hero,.page-hero,.fbs-hero,.verse-band,.cta-band) a:where(:not(.btn,.tile,.touch,.media-audio,.stream-tabs a,.cta,.card-photo,.wl-opt,.vcard,.tm-day,.tm-arrow)){color:var(--ln)}
[data-theme=immersive] body:not(.is-admin)>:not(.top,footer,.radio-bar,.announce,.hero,.page-hero,.fbs-hero,.verse-band,.cta-band) a:where(:not(.btn,.tile,.touch,.media-audio,.stream-tabs a,.cta,.card-photo,.wl-opt,.vcard,.tm-day,.tm-arrow)):hover{color:var(--lnh)}
[data-theme=immersive] body:not(.is-admin)>:not(.top,footer,.radio-bar,.announce,.hero,.page-hero,.fbs-hero,.verse-band,.cta-band) .btn.ghost{color:var(--ln);border-color:var(--ln)}
[data-theme=immersive] body:not(.is-admin)>:not(.top,footer,.radio-bar,.announce,.hero,.page-hero,.fbs-hero,.verse-band,.cta-band) .btn.ghost:hover{background:var(--ln);color:var(--night)}
[data-theme=immersive] .prose blockquote{background:rgba(92,208,230,.1);color:inherit}
[data-theme=immersive] .verse{color:var(--sub)}
[data-theme=immersive] .card{border-color:transparent;box-shadow:0 14px 44px rgba(0,0,0,.35)}
[data-theme=immersive] .card.plain{box-shadow:none}
[data-theme=immersive] :is(.event-card,.book,.tile){border-color:transparent}
[data-theme=immersive] .btn,[data-theme=immersive] .nav-end a.cta{border-radius:99px}
[data-theme=immersive] hr.soft,[data-theme=immersive] .list li{border-color:rgba(127,140,190,.25)}
/* header: dark glass */
[data-theme=immersive] .top{background:rgba(3,5,58,.74);border-bottom-color:rgba(255,255,255,.08)}
[data-theme=immersive] .top.scrolled{box-shadow:0 10px 30px rgba(0,0,0,.4)}
[data-theme=immersive] .brand,[data-theme=immersive] .brand:hover{color:var(--white)}
[data-theme=immersive] .brand-name span:last-child{color:var(--teal-300)}
[data-theme=immersive] :is(.menu>li>a,.nav-end a,.nav-end button.linkish,.acct-btn){color:#E6ECF8}
[data-theme=immersive] :is(.menu>li>a:hover,.menu>li.on>a){color:var(--white)}
[data-theme=immersive] :is(.nav-end a:hover,.nav-end button.linkish:hover,.acct-btn:hover,.sub-toggle:hover){background:rgba(255,255,255,.1);color:var(--white)}
[data-theme=immersive] .sub-toggle{color:#A9B6D6}
[data-theme=immersive] .nav-end a.cta,[data-theme=immersive] .cta{background:var(--white);color:var(--navy);box-shadow:0 6px 18px rgba(0,0,0,.3)}
[data-theme=immersive] .nav-end a.cta:hover,[data-theme=immersive] .cta:hover{background:var(--mist);color:var(--navy)}
[data-theme=immersive] .burger{background:transparent;color:var(--white);border-color:rgba(255,255,255,.3)}
@media(max-width:1240px){
  [data-theme=immersive] .menu>li.on>a{background:rgba(255,255,255,.1)}
  [data-theme=immersive] .sub{background:transparent;border-left-color:rgba(255,255,255,.15)}
  [data-theme=immersive] .sub a{color:#E6ECF8}
  [data-theme=immersive] .sub a:hover,[data-theme=immersive] .sub a.on{background:rgba(255,255,255,.1);color:var(--white)}
  [data-theme=immersive] .nav-end{border-top-color:rgba(255,255,255,.1)}
}
/* the welcome: a full-screen photo (or the brand gradient), centred words */
[data-theme=immersive] .hero{min-height:min(86vh,780px);display:grid;align-items:center;padding:90px 0 80px;text-align:center}
[data-theme=immersive] .hero.has-photo{background:var(--night)}
[data-theme=immersive] .hero.has-photo::before{display:none}
[data-theme=immersive] .hero-bg{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 22%;z-index:-2;animation:hero-zoom 18s ease-out both}
@keyframes hero-zoom{from{transform:scale(1.08)}to{transform:scale(1)}}
[data-theme=immersive] .hero.has-photo::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,var(--night) 3%,rgba(3,5,58,.74) 42%,rgba(3,5,58,.38))}
[data-theme=immersive] .hero-grid{grid-template-columns:minmax(0,1fr);justify-items:center;gap:22px}
[data-theme=immersive] .hero-copy{max-width:920px}
[data-theme=immersive] .hero .motto{display:inline-flex;padding:6px 15px;border-radius:99px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);letter-spacing:3px}
[data-theme=immersive] .hero h1{font-size:clamp(2.4rem,7vw,5.3rem);font-weight:900;letter-spacing:-.035em;line-height:1;margin-bottom:.3em}
[data-theme=immersive] .hero p{margin-inline:auto;font-size:1.15rem;font-weight:300}
[data-theme=immersive] .hero-actions{justify-content:center}
[data-theme=immersive] .hero.has-photo .hero-art{display:none}
[data-theme=immersive] .hero.no-photo .hero-logo{order:-1;width:130px;height:130px;background:none;box-shadow:none;filter:drop-shadow(0 18px 40px rgba(0,0,0,.45))}
[data-theme=immersive] .hero.no-photo .hero-logo img{width:100%}
[data-theme=immersive] .verse-band{background:rgba(255,255,255,.04);border-block:1px solid rgba(255,255,255,.07)}
[data-theme=immersive] .verse-big{color:#D5D8FA}
[data-theme=immersive] .verse-ref{color:#A9B6D6}
[data-theme=immersive] footer{background:#02032C;border-top:1px solid rgba(255,255,255,.07)}
[data-theme=immersive] .radio-bar{background:rgba(10,17,80,.92);border-color:rgba(92,208,230,.22)}
@media(max-width:820px){
  [data-theme=immersive] .hero{min-height:0;padding:64px 0 56px}
  [data-theme=immersive] .hero.has-photo{min-height:72vh}
}

/* =====================================================================================================================
   IMMERSIVE LIGHT: the Immersive layout in daylight, with more colour than white. The same full-width photo behind the welcome
   and centred words, under a soft blue tint with white words; the pages are a pale blue-grey with white cards. Without a photo
   the welcome is a bright blue-to-teal gradient with the logo. (Between Ministry blue and the night-blue Immersive look.)
   ===================================================================================================================== */
html[data-theme=immersive-light]{--font-head:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--lt-page:#E6F0F7;--lt-blue:rgba(14,52,140,.58)}
[data-theme=immersive-light] body:not(.is-admin){background:radial-gradient(900px 520px at 90% -8%,rgba(31,162,186,.2),transparent 62%),radial-gradient(760px 480px at -5% 30%,rgba(26,63,224,.1),transparent 62%),var(--lt-page);background-color:var(--lt-page);background-repeat:no-repeat}
[data-theme=immersive-light] :is(h1,h2){letter-spacing:-.02em}
[data-theme=immersive-light] .btn,[data-theme=immersive-light] .nav-end a.cta{border-radius:99px}
[data-theme=immersive-light] .card{border-color:transparent;border-radius:20px;box-shadow:0 12px 36px rgba(5,11,90,.12)}
[data-theme=immersive-light] :is(.event-card,.book,.tile,.touch){border-radius:18px;border-color:transparent;box-shadow:0 10px 28px rgba(5,11,90,.1)}
[data-theme=immersive-light] .card.plain{box-shadow:none}
[data-theme=immersive-light] .top{background:rgba(255,255,255,.92);border-bottom-color:rgba(5,11,90,.06)}
[data-theme=immersive-light] .top.scrolled{box-shadow:0 8px 26px rgba(5,11,90,.12)}

/* the welcome: the photo fills the whole banner under a blue tint, white words, and the bottom melts into the page */
[data-theme=immersive-light] .hero{min-height:min(80vh,720px);display:grid;align-items:center;padding:84px 0 76px;text-align:center;background:linear-gradient(135deg,#1B4F9C 0%,#1FA2BA 100%)}
[data-theme=immersive-light] .hero.has-photo{background:#1B4F9C}
[data-theme=immersive-light] .hero.has-photo::before{display:none}
[data-theme=immersive-light] .hero-bg{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 22%;z-index:-2;animation:hero-zoom 18s ease-out both}
[data-theme=immersive-light] .hero.has-photo::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(to bottom,var(--lt-blue) 0%,rgba(14,52,140,.5) 62%,var(--lt-page) 100%)}
[data-theme=immersive-light] .hero.no-photo::before{opacity:.45}
[data-theme=immersive-light] .hero-grid{grid-template-columns:minmax(0,1fr);justify-items:center;gap:22px}
[data-theme=immersive-light] .hero-copy{max-width:920px}
[data-theme=immersive-light] .hero .motto{display:inline-flex;padding:6px 15px;border-radius:99px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.38);color:var(--white);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);letter-spacing:3px}
[data-theme=immersive-light] .hero h1{color:var(--white);font-size:clamp(2.4rem,7vw,5.3rem);font-weight:900;letter-spacing:-.035em;line-height:1;margin-bottom:.3em;text-shadow:0 2px 24px rgba(5,11,90,.35)}
[data-theme=immersive-light] .hero p{margin-inline:auto;color:#F1F8FC;font-size:1.15rem;font-weight:400;text-shadow:0 1px 14px rgba(5,11,90,.35)}
[data-theme=immersive-light] .hero-actions{justify-content:center}
[data-theme=immersive-light] .hero.has-photo .hero-art{display:none}
[data-theme=immersive-light] .hero.no-photo .hero-logo{order:-1;width:130px;height:130px;background:none;box-shadow:none;filter:drop-shadow(0 14px 30px rgba(5,11,90,.3))}
[data-theme=immersive-light] .hero.no-photo .hero-logo img{width:100%}
[data-theme=immersive-light] .verse-band{background:rgba(255,255,255,.55)}
[data-theme=immersive-light] .page-hero{background:linear-gradient(135deg,#1B4F9C 0%,#1FA2BA 100%)}
@media(max-width:820px){
  [data-theme=immersive-light] .hero{min-height:0;padding:60px 0 52px}
  [data-theme=immersive-light] .hero.has-photo{min-height:68vh}
}

/* =====================================================================================================================
   MINISTRY BLUE and EDITORIAL: with a photo in the welcome banner, the photo goes BEHIND the welcome (as in the Immersive looks)
   instead of beside or below it. Without a photo nothing changes.
   ===================================================================================================================== */
[data-theme=ministry] .hero.has-photo{background:var(--navy);min-height:min(66vh,600px);display:grid;align-items:center;padding:84px 0}
[data-theme=ministry] .hero.has-photo::before{display:none}
[data-theme=ministry] .hero.has-photo .hero-bg,[data-theme=editorial] .hero.has-photo .hero-bg{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 22%;z-index:-2}
[data-theme=ministry] .hero.has-photo::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(5,11,90,.9) 0%,rgba(5,11,90,.66) 52%,rgba(10,26,143,.28) 100%)}
[data-theme=ministry] .hero.has-photo .hero-grid{grid-template-columns:minmax(0,1fr);width:100%} /* the hero is a grid, which would otherwise shrink the centred wrapper to the text */
[data-theme=ministry] .hero.has-photo .hero-copy{max-width:680px;justify-self:start;text-align:left}
[data-theme=ministry] .hero.has-photo .hero-art{display:none}

[data-theme=editorial] .hero.has-photo{background:var(--ink);color:var(--white);min-height:min(72vh,660px);display:grid;align-items:center;padding:96px 0 84px}
[data-theme=editorial] .hero.has-photo::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(11,16,51,.84) 0%,rgba(11,16,51,.5) 55%,rgba(11,16,51,.38) 100%)}
[data-theme=editorial] .hero.has-photo .hero-art{display:none}
[data-theme=editorial] .hero.has-photo h1{color:var(--white)}
[data-theme=editorial] .hero.has-photo p{color:#E6ECF8}
[data-theme=editorial] .hero.has-photo .motto{color:var(--teal-300)}
[data-theme=editorial] .hero.has-photo .btn.light{background:var(--white);color:var(--navy)}
[data-theme=editorial] .hero.has-photo .btn.light:hover{background:var(--mist)}
[data-theme=editorial] .hero.has-photo .btn.outline-light{background:transparent;color:var(--white);border:1.5px solid rgba(255,255,255,.7)}
[data-theme=editorial] .hero.has-photo .btn.outline-light:hover{background:rgba(255,255,255,.14)}
@media(max-width:820px){
  [data-theme=ministry] .hero.has-photo{min-height:0;padding:56px 0 52px}
  [data-theme=ministry] .hero.has-photo::after{background:linear-gradient(to bottom,rgba(5,11,90,.7),rgba(5,11,90,.82))}
  [data-theme=editorial] .hero.has-photo{min-height:0;padding:60px 0 52px}
}

/* =====================================================================================================================
   WARM WELCOME: cream paper, serif headings, a framed portrait, a warm clay accent
   ===================================================================================================================== */
[data-theme=warm] body:not(.is-admin){background:var(--paper)}
[data-theme=warm] .top{background:rgba(250,246,238,.95);border-bottom-color:var(--sand)}
[data-theme=warm] .card,[data-theme=warm] .event-card,[data-theme=warm] .book,[data-theme=warm] .tile,[data-theme=warm] .touch{border-color:var(--sand);border-radius:20px;box-shadow:none}
[data-theme=warm] :is(.eyebrow,.card .eyebrow){color:var(--clay)}
[data-theme=warm] .btn{border-radius:12px}
[data-theme=warm] .nav-end a.cta,[data-theme=warm] .cta{background:var(--indigo);border-radius:12px}
[data-theme=warm] .nav-end a.cta:hover,[data-theme=warm] .cta:hover{background:var(--navy)}
[data-theme=warm] .hero{background:transparent;color:var(--ink);padding:64px 0 70px}
[data-theme=warm] .hero::before{display:none}
[data-theme=warm] .hero-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px}
[data-theme=warm] .hero .motto{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:99px;background:var(--clay-soft);color:var(--clay);letter-spacing:2px}
[data-theme=warm] .hero .motto::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--clay)}
[data-theme=warm] .hero h1{color:var(--navy);font-size:clamp(2.3rem,5.2vw,4rem);line-height:1.08;font-weight:700}
[data-theme=warm] .hero p{color:var(--slate);font-size:1.12rem}
[data-theme=warm] .hero .btn.light{background:var(--indigo);color:var(--white)}
[data-theme=warm] .hero .btn.light:hover{background:var(--navy)}
[data-theme=warm] .hero .btn.outline-light{background:var(--white);color:var(--navy);border:1px solid var(--sand)}
[data-theme=warm] .hero .btn.outline-light:hover{background:var(--clay-soft)}
[data-theme=warm] .hero.has-photo .hero-art{position:relative;width:100%;max-width:420px;height:auto;aspect-ratio:4/5;border-radius:32px;border:6px solid var(--white);background:var(--white);box-shadow:0 30px 60px rgba(46,42,126,.18);overflow:visible}
[data-theme=warm] .hero.has-photo .hero-art img{width:100%;height:100%;object-fit:cover;object-position:center 20%;border-radius:26px}
[data-theme=warm] .hero.has-photo .hero-art::after{content:'';position:absolute;left:-24px;bottom:-24px;width:100%;height:100%;border:2px solid rgba(160,82,45,.35);border-radius:34px;z-index:-1}
[data-theme=warm] .hero.no-photo .hero-logo{background:var(--white);box-shadow:0 0 0 12px var(--clay-soft),0 24px 50px rgba(46,42,126,.15)}
[data-theme=warm] .verse-band{background:var(--clay-soft)}
[data-theme=warm] .cta-band{background:var(--indigo)}
[data-theme=warm] .page-hero{background:var(--paper);color:var(--ink);border-bottom:1px solid var(--sand)}
[data-theme=warm] .page-hero h1{color:var(--navy)}
[data-theme=warm] .page-hero .eyebrow{color:var(--clay)}
[data-theme=warm] .page-hero .verse{color:var(--indigo)}
[data-theme=warm] .page-hero::before,[data-theme=warm] .page-hero::after{display:none}
[data-theme=warm] .touch-ico,[data-theme=warm] .bcast-next{background-color:var(--clay-soft)}
@media(max-width:820px){
  [data-theme=warm] .hero{padding:40px 0 48px}
  [data-theme=warm] .hero-grid{grid-template-columns:minmax(0,1fr);gap:36px}
  [data-theme=warm] .hero.has-photo .hero-art{display:block;width:74%;max-width:340px;justify-self:center;order:0}
}

/* =====================================================================================================================
   MEDIA HUB: for listeners and viewers: a compact dark banner, flat cards, and the radio docked full width
   ===================================================================================================================== */
html[data-theme=media]{--font-head:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
[data-theme=media] body:not(.is-admin){background:var(--page)}
[data-theme=media] :is(h1,h2){font-weight:800;letter-spacing:-.015em}
[data-theme=media] .hero{background:var(--ink);padding:40px 0}
[data-theme=media] .hero::before{opacity:.5}
[data-theme=media] .hero-grid{grid-template-columns:minmax(0,1fr) auto;gap:32px}
[data-theme=media] .hero h1{font-size:clamp(1.8rem,3.8vw,2.7rem)}
[data-theme=media] .hero-art{width:120px;height:120px}
[data-theme=media] .hero.has-photo .hero-art{width:min(380px,36vw);height:auto;aspect-ratio:16/10;border-radius:16px;background:var(--navy);box-shadow:0 18px 40px rgba(0,0,0,.4)}
[data-theme=media] .hero.has-photo .hero-art img{width:100%;height:100%;object-fit:cover;object-position:center 22%}
[data-theme=media] .card{border-radius:14px}
[data-theme=media] .verse-band{background:var(--white);border-block:1px solid var(--border);padding:28px 0}
[data-theme=media] .radio-bar{left:0;right:0;bottom:0;max-width:none;border-radius:0;border-width:1px 0 0;background:var(--ink)}
[data-theme=media] .rb-inner{max-width:1040px;margin:0 auto;padding:10px max(16px,env(safe-area-inset-left)) max(10px,env(safe-area-inset-bottom))}
[data-theme=media] .rb-play{width:52px;height:52px}
[data-theme=media] .radio-bar.is-min{right:auto;bottom:12px;left:12px;border-radius:18px;border-width:1px}
[data-theme=media] .radio-bar.is-min .rb-inner{padding:8px 10px 8px 8px}
@media(max-width:820px){
  [data-theme=media] .hero{padding:28px 0}
  [data-theme=media] .hero.has-photo .hero-art{display:none}
}

/* ---------- a picture at the top of a page (Admin > Menu & pages > Page pictures) ----------
   The picture is the background of the page's header band (pageHead in views/layout.tsx), under the brand tint, like the
   home page's welcome. The Father's Business Summit's own banner takes it the same way. */
body.has-pic .page-hero,body.has-pic .fbs-hero{background:linear-gradient(135deg,rgba(5,11,90,.84),rgba(19,122,158,.6)),var(--page-pic) center 30%/cover no-repeat;color:var(--white);border-bottom:0}
body.has-pic .page-hero{padding:72px 0 64px}
body.has-pic .page-hero h1{color:var(--white)}
body.has-pic .page-hero .eyebrow,body.has-pic .fbs-hero .eyebrow{color:var(--teal-300)}
body.has-pic .page-hero .verse,body.has-pic .page-hero .page-intro{color:var(--mist)}
body.has-pic .page-hero::before,body.has-pic .page-hero::after{display:none}
.page-intro{max-width:40em;margin:.4em 0 0;font-size:1.05rem}
body.has-pic .page-hero .page-back{display:inline-block;margin-bottom:12px;font-size:.92rem;font-weight:600;text-decoration:none;color:var(--mist)}
body.has-pic .page-hero .page-back:hover{color:var(--white);text-decoration:underline}
/* one event, one book: a slimmer band with the way back; the page's own title follows */
body.has-pic .page-hero.slim{padding:96px 0 18px}
body.has-pic .page-hero.slim .page-back{margin:0}
@media(max-width:600px){body.has-pic .page-hero{padding:48px 0 44px}body.has-pic .page-hero.slim{padding:64px 0 14px}}

/* the page pictures screen */
.pp-row{display:grid;grid-template-columns:180px minmax(0,1fr);gap:18px;align-items:start;margin-bottom:12px}
.pp-thumb{aspect-ratio:16/9;border-radius:10px;background:var(--mist);overflow:hidden;display:flex;align-items:center;justify-content:center}
.pp-thumb img{width:100%;height:100%;object-fit:cover}
.pp-body select,.pp-body input[type=file]{width:100%;max-width:420px}
@media(max-width:600px){.pp-row{grid-template-columns:minmax(0,1fr)}}

.bld-pagepick{max-width:210px;margin-left:12px;min-height:34px;padding:4px 8px;font-size:.85rem;vertical-align:middle}

/* ---------- the radio bar's words open the live room on the Listen page ---------- */
a.rb-info{color:inherit;text-decoration:none;display:block;border-radius:10px}
a.rb-info:hover .rb-name{text-decoration:underline}
.radio-bar.is-live .rb-now::after{content:' \00b7  like, react & chat \203A';opacity:.85}

/* ---------- the live room (Listen page): listen, like, react, chat ---------- */
.live-room{margin-bottom:26px}
.live-room-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;flex-wrap:wrap}
.live-room-head h2{margin:.1em 0}
.live-room-count{text-align:right;display:flex;flex-direction:column;gap:2px;font-weight:700}
.room-actions{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 12px}
.room-actions .btn.on{background:var(--teal-700);color:var(--white)}
.room-like.on{background:var(--mist);border-color:var(--teal-600);color:var(--teal-700)}
.room-reacts{position:relative;display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.room-react{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:6px 14px;border-radius:99px;border:1px solid var(--border);background:var(--white);font-size:1.35rem;cursor:pointer;transition:transform .12s}
.room-react:hover:not(:disabled){transform:scale(1.08)}
.room-react:active:not(:disabled){transform:scale(.94)}
.room-react:disabled,.room-like:disabled{opacity:.5;cursor:not-allowed}
.room-react small{font:700 .75rem var(--font-body);color:var(--slate);min-width:1ch}
.react-floats{position:absolute;left:0;right:0;bottom:100%;height:140px;pointer-events:none;overflow:visible}
.react-float{position:absolute;bottom:0;font-size:1.8rem;animation:react-rise 2.4s ease-out forwards;will-change:transform,opacity}
@keyframes react-rise{0%{transform:translate(0,0) scale(.6);opacity:0}15%{opacity:1}100%{transform:translate(var(--drift,0),-130px) scale(1.15);opacity:0}}
@media(prefers-reduced-motion:reduce){.react-float{animation:none;display:none}}
.chat-log{list-style:none;margin:0 0 10px;padding:10px 12px;height:260px;overflow-y:auto;background:var(--page);border:1px solid var(--border);border-radius:12px}
.chat-msg{padding:4px 0;word-break:break-word;font-size:.95rem}
.chat-msg strong{color:var(--indigo)}
.chat-msg.host{background:var(--mist);border-radius:8px;padding:6px 8px;margin:4px -4px}
.chat-msg.host strong{color:var(--teal-700)}
.chat-form{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr) auto;gap:8px}
.chat-note{margin:8px 0 0;min-height:1.2em}
.chat-note.bad{color:var(--error)}
@media(max-width:600px){.chat-form{grid-template-columns:minmax(0,1fr) auto}.chat-form [data-chat-name]{grid-column:1/-1}.chat-log{height:220px}}

/* ---------- the broadcaster: connection monitor and chat moderation ---------- */
.bc-net-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.bc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px;margin:0}
.bc-grid dt{font-size:.75rem;color:var(--slate);margin:0}
.bc-grid dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums}
.bc-q{display:inline-block;padding:3px 10px;border-radius:99px;font:700 .8rem var(--font-body);background:var(--mist);color:var(--teal-700)}
.bc-q.good{background:#DFF3E4;color:#17662B}
.bc-q.fair{background:#FFF1CC;color:#7A5200}
.bc-q.poor{background:#FBDADA;color:#9A1B1B}
.bc-chatlog,.bc-pending{list-style:none;margin:8px 0;padding:0}
.bc-chatlog{max-height:230px;overflow-y:auto;border:1px solid var(--border);border-radius:10px;padding:6px 10px;background:var(--page)}
.bc-chatlog li,.bc-pending li{display:flex;gap:8px;align-items:flex-start;justify-content:space-between;padding:5px 0;border-bottom:1px solid rgba(5,11,90,.06);font-size:.92rem;word-break:break-word}
.bc-chatlog li>span,.bc-pending li>span{flex:1;min-width:0}
.bc-pending{border:1px solid #E8C86A;background:#FFF8E1;border-radius:10px;padding:6px 10px}
.bc-pending li:last-child,.bc-chatlog li:last-child{border-bottom:0}
.bc-chatlog .btns,.bc-pending .btns{display:flex;gap:4px;flex:none}
.bc-chatlog .btn.small,.bc-pending .btn.small{padding:3px 8px;min-height:30px;font-size:.78rem}
.bc-chatlog .host strong{color:var(--teal-700)}
@media(max-width:420px){.bc-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- bands: a page in clear sections (Watch & Listen). The tint comes from the text colour, so it also works on the dark looks ---------- */
.band{padding:36px 0}
.band.alt{background:color-mix(in srgb,currentColor 4%,transparent);border-block:1px solid color-mix(in srgb,currentColor 9%,transparent)}
.band h2{margin-top:0}
.page-hero:has(+ .band){margin-bottom:0}
.band-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.band .media-latest{margin:0 0 12px}
.vcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:14px}
.vcard{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:inherit}
.vcard-pic{position:relative;display:block;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:var(--mist)}
.vcard-pic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.vcard:hover .vcard-pic img{transform:scale(1.04)}
.vcard-play{position:absolute;left:10px;bottom:10px;width:40px;height:40px;border-radius:50%;background:rgba(5,11,90,.82)}
.vcard-play::after{content:'';position:absolute;left:15px;top:12px;border-style:solid;border-width:8px 0 8px 13px;border-color:transparent transparent transparent #fff}
.vcard strong{font-size:1rem;line-height:1.35}
.vcard:hover strong{text-decoration:underline}
.years{margin-top:28px}
.years h3{margin:0 0 10px}
.years .row{margin:0}
@media(max-width:760px){.vcards{grid-template-columns:1fr;gap:14px}.vcard{display:grid;grid-template-columns:132px minmax(0,1fr);align-items:start;column-gap:12px}.vcard-pic{grid-row:span 2}.vcard-play{width:30px;height:30px;left:6px;bottom:6px}.vcard-play::after{left:11px;top:8px;border-width:7px 0 7px 11px}.band{padding:28px 0}}

/* ---------- Watch & Listen: the two halves side by side ---------- */
.wl-switch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:0 0 18px}
.wl-opt{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:18px;background:var(--white);border:1px solid var(--border);color:var(--navy);text-decoration:none;box-shadow:0 1px 3px rgba(11,16,51,.06);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.wl-opt:hover{transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(5,11,90,.35);border-color:var(--teal-300)}
.wl-opt strong{display:block;font:700 1.2rem var(--font-head);line-height:1.2}
.wl-sub{display:block;font-size:.88rem;color:var(--slate)}
.wl-opt.on{background:linear-gradient(120deg,#0A0F3C,#2A1E7A 60%,#0E7C93);border-color:transparent;color:#fff;box-shadow:0 18px 36px -16px rgba(42,30,122,.7)}
.wl-opt.on .wl-sub{color:#C9CFF5}
.wl-ico{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--mist);color:var(--teal-700)}
.wl-opt.on .wl-ico{background:rgba(255,255,255,.12);color:#fff}
/* the Watch icon: a screen with a play mark and a blinking live dot */
.ico-screen{position:relative;display:block;width:30px;height:21px;border:2.5px solid currentColor;border-radius:5px}
.ico-screen-play{position:absolute;left:10px;top:4px;border-style:solid;border-width:5.5px 0 5.5px 8px;border-color:transparent transparent transparent currentColor}
.ico-screen-dot{position:absolute;right:-6px;top:-6px;width:9px;height:9px;border-radius:50%;background:#FF5E8A;box-shadow:0 0 0 2px var(--white);animation:wl-blink 1.6s ease-in-out infinite}
.wl-opt.on .ico-screen-dot{box-shadow:0 0 0 2px #1C1356}
/* the Listen icon: equaliser bars */
.ico-eq{display:flex;align-items:flex-end;gap:3px;height:24px}
.ico-eq i{display:block;width:4px;border-radius:2px;background:currentColor;height:40%;animation:wl-eq 1.1s ease-in-out infinite}
.ico-eq i:nth-child(2){animation-delay:-.3s}
.ico-eq i:nth-child(3){animation-delay:-.6s}
.ico-eq i:nth-child(4){animation-delay:-.15s}
.wl-opt:not(.on):not(:hover) .ico-eq i{animation-play-state:paused}
@keyframes wl-eq{0%,100%{height:30%}50%{height:100%}}
@keyframes wl-blink{50%{opacity:.25}}
@media(max-width:600px){.wl-switch{gap:10px}.wl-opt{flex-direction:column;align-items:flex-start;gap:10px;padding:14px}.wl-ico{width:44px;height:44px;border-radius:13px}.wl-sub{font-size:.8rem}}

/* ---------- the live room: a studio with its own night-and-neon colours on every look ---------- */
.studio{--st-ink:#F4F6FF;--st-mute:#BCC3F0;--st-cyan:#33D1E0;--st-violet:#7B6CFF;--st-rose:#FF5E8A;--st-amber:#FFB547;
  position:relative;overflow:hidden;isolation:isolate;border-radius:26px;padding:26px 26px 22px;margin:0;color:var(--st-ink);
  background:radial-gradient(130% 140% at 0% 0%,#2A1E7A 0%,#0A0F3C 52%,#060A2A 100%);
  box-shadow:0 34px 60px -26px rgba(10,15,60,.65),inset 0 1px 0 rgba(255,255,255,.08)}
.studio-glow{position:absolute;z-index:-1;border-radius:50%;filter:blur(64px);pointer-events:none;animation:st-glow 16s ease-in-out infinite alternate}
.studio-glow.g1{width:360px;height:360px;top:-150px;right:-90px;background:var(--st-violet);opacity:.55}
.studio-glow.g2{width:320px;height:320px;bottom:-170px;left:-70px;background:var(--st-cyan);opacity:.3;animation-delay:-8s}
.studio.on-air .studio-glow.g2{background:var(--st-rose);opacity:.5}
@keyframes st-glow{to{transform:translate(-50px,36px) scale(1.18)}}
.studio-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.studio .onair{display:inline-flex;align-items:center;gap:8px;padding:6px 13px;border-radius:99px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);font:700 .72rem var(--font-body);letter-spacing:2px;text-transform:uppercase;color:var(--st-mute)}
.studio.on-air .onair{background:linear-gradient(90deg,var(--st-rose),#FF3D6E);border-color:transparent;color:#fff;animation:st-onair 2s ease-out infinite}
.studio .onair .live-dot{background:#fff;margin:0;width:8px;height:8px}
@keyframes st-onair{0%{box-shadow:0 0 0 0 rgba(255,94,138,.6)}70%,100%{box-shadow:0 0 0 14px rgba(255,94,138,0)}}
.studio-count{display:inline-flex;align-items:center;gap:8px;color:var(--st-mute);font-size:.9rem;font-weight:600}
.studio-count .phones{display:inline-flex;color:var(--st-cyan)}
.studio.is-playing .studio-count .phones{animation:st-bob 1.3s ease-in-out infinite}
@keyframes st-bob{50%{transform:translateY(-3px) rotate(-8deg)}}
.studio [data-room-listeners]:not(:empty) + [data-room-online]:not(:empty)::before{content:'·';margin-right:8px}
.studio-main{display:flex;align-items:center;gap:24px;margin:24px 0 4px}
.studio-play{position:relative;flex:none;width:100px;height:100px;border-radius:50%;border:0;padding:0;cursor:pointer;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,var(--st-cyan),var(--st-violet) 55%,var(--st-rose));box-shadow:0 16px 36px -10px rgba(123,108,255,.8);transition:transform .2s ease}
.studio-play:hover{transform:scale(1.05)}
.studio-play:active{transform:scale(.96)}
.studio-play:focus-visible{outline:3px solid var(--st-amber);outline-offset:4px}
.studio-play svg{position:relative;z-index:1;filter:drop-shadow(0 2px 6px rgba(0,0,0,.3))}
.studio-play .sp-i-play{margin-left:5px}
.studio-play .sp-i-pause,.studio-play.on .sp-i-play{display:none}
.studio-play.on .sp-i-pause{display:block}
.sp-ring{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(123,108,255,.6);opacity:0;pointer-events:none}
.studio.is-playing .sp-ring{animation:st-ring 2.4s ease-out infinite}
.studio.is-playing .sp-ring.r2{animation-delay:1.2s}
@keyframes st-ring{0%{transform:scale(1);opacity:.85}100%{transform:scale(1.75);opacity:0}}
.studio:not(.is-playing):not(.is-loading) .studio-play{animation:st-breathe 3.2s ease-in-out infinite}
@keyframes st-breathe{50%{box-shadow:0 16px 48px -4px rgba(51,209,224,.8)}}
.studio.is-loading .studio-play::after{content:'';position:absolute;inset:-7px;border-radius:50%;border:3px solid transparent;border-top-color:var(--st-amber);animation:rb-spin .9s linear infinite}
.studio-info{min-width:0}
.studio.studio .studio-info h2{color:#fff;margin:0 0 6px;font-size:clamp(1.5rem,3.2vw,2.2rem);line-height:1.15}
.studio .studio-info p{color:var(--st-mute);margin:0}
.studio-hint{display:inline-block;margin-top:10px;font-size:.85rem;font-weight:700;letter-spacing:.3px;color:var(--st-cyan)}
.studio-wave{display:block;width:100%;height:120px;margin:2px 0 8px}
.studio:not(.is-live) .studio-live{display:none}
.studio-live{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.studio .room-actions{position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin:0}
.studio .room-like{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:10px 18px;border-radius:99px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.07);color:#fff;font:700 1rem var(--font-body);cursor:pointer;transition:background .2s,border-color .2s}
.studio .room-like .heart{color:var(--st-rose)}
.studio .room-like b{color:var(--st-mute);font-variant-numeric:tabular-nums}
.studio .room-like.on{background:rgba(255,94,138,.2);border-color:var(--st-rose);color:#fff}
.studio .room-like.pop .heart{animation:st-heart .6s cubic-bezier(.2,1.6,.4,1)}
@keyframes st-heart{0%{transform:scale(.5)}50%{transform:scale(1.5)}100%{transform:scale(1)}}
.studio .room-reacts{display:flex;gap:8px;flex-wrap:wrap;margin:0}
.studio .room-react{position:relative;display:grid;place-items:center;width:52px;height:52px;min-height:0;padding:0;border-radius:16px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.07);font-size:1.5rem;cursor:pointer;transition:transform .15s ease,background .15s}
.studio .room-react:hover:not(:disabled){transform:translateY(-4px) scale(1.08);background:rgba(255,255,255,.14)}
.studio .room-react:active:not(:disabled) span{animation:st-wiggle .45s}
@keyframes st-wiggle{25%{transform:rotate(-16deg) scale(1.25)}75%{transform:rotate(12deg)}}
.studio .room-react small{position:absolute;right:-7px;top:-7px;min-width:20px;padding:1px 6px;border-radius:99px;background:var(--st-rose);color:#fff;font:700 .68rem var(--font-body)}
.studio .room-react small:empty{display:none}
.studio .react-floats{left:0;right:0;bottom:60px;height:200px}
.studio .room-chat{border-radius:18px;background:rgba(4,8,36,.55);border:1px solid rgba(255,255,255,.1);padding:12px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.studio .chat-log{background:transparent;border:0;padding:4px 6px;height:240px;margin:0 0 10px;scrollbar-color:rgba(255,255,255,.25) transparent}
.studio .chat-msg{color:var(--st-ink);padding:6px 10px;margin:0 0 6px;border-radius:12px;background:rgba(255,255,255,.06);animation:st-msg .3s ease-out}
.studio .chat-msg strong{color:var(--st-cyan)}
.studio .chat-msg.host{background:linear-gradient(90deg,rgba(255,181,71,.22),rgba(255,94,138,.14));margin:0 0 6px}
.studio .chat-msg.host strong{color:var(--st-amber)}
@keyframes st-msg{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.studio .chat-form input{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#fff}
.studio .chat-form input::placeholder{color:var(--st-mute)}
.studio .chat-form .btn{background:linear-gradient(135deg,var(--st-cyan),var(--st-violet));border:0;color:#fff}
.studio .chat-note{color:var(--st-mute);margin:12px 0 0}
.studio .chat-note.bad{color:#FFB4C4}
.studio button:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:760px){
  .studio{padding:20px 16px 18px;border-radius:22px}
  .studio-main{gap:16px;margin-top:18px}
  .studio-play{width:80px;height:80px}
  .studio-play svg{width:28px;height:28px}
  .studio-wave{height:90px}
  .studio-live{grid-template-columns:minmax(0,1fr)}
}
@media(prefers-reduced-motion:reduce){.studio,.studio *,.wl-switch *{animation:none!important}}

/* ---------- Today's Message: the strip of days ---------- */
.tm-days-band{padding:22px 0 18px}
.tm-days-head{display:flex;justify-content:space-between;align-items:center;gap:10px 16px;flex-wrap:wrap;margin:0 0 12px}
.tm-days-month{font:700 1.15rem var(--font-head);color:var(--navy)}
.tm-pick{display:flex;align-items:center;gap:8px;margin:0}
.tm-pick label{margin:0;font-size:.88rem;font-weight:600;color:var(--slate)}
.tm-pick input{width:auto;margin:0;min-height:40px;padding:6px 10px}
.tm-pick .btn{min-height:40px}
.tm-strip-wrap{display:flex;align-items:center;gap:8px}
.tm-strip{list-style:none;margin:0;padding:6px 2px 12px;flex:1;min-width:0;display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.tm-strip li{flex:0 0 calc((100% - 48px) / 7);min-width:60px}
.tm-day{position:relative;display:flex;flex-direction:column;align-items:center;gap:1px;padding:10px 4px 16px;border-radius:16px;border:1px solid var(--border);background:var(--white);color:var(--navy);text-decoration:none;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.tm-day .wd{font:700 .7rem var(--font-body);letter-spacing:1px;text-transform:uppercase;color:var(--slate)}
.tm-day .dn{font:700 1.5rem var(--font-head);line-height:1.15}
.tm-day .mo{font-size:.72rem;color:var(--slate)}
.tm-day .dot{position:absolute;bottom:6px;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--teal-600)}
a.tm-day:hover{transform:translateY(-3px);border-color:var(--teal-300);box-shadow:0 12px 22px -14px rgba(5,11,90,.45)}
.tm-day.off{background:transparent;opacity:.45}
.tm-day.is-today:not(.on){border-color:var(--teal-600);box-shadow:inset 0 0 0 1px var(--teal-600)}
.tm-day.is-today .wd{color:var(--teal-700)}
.tm-day.on{background:linear-gradient(150deg,var(--navy),#2A1E7A 60%,var(--teal-600));border-color:transparent;color:#fff;opacity:1;box-shadow:0 14px 26px -12px rgba(5,11,90,.65)}
.tm-day.on .wd,.tm-day.on .mo{color:#C9CFF5}
.tm-day.on .dot{background:#fff}
.tm-arrow{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:1px solid var(--border);background:var(--white);color:var(--navy);text-decoration:none;font-size:1.6rem;line-height:1;transition:background .15s}
a.tm-arrow:hover{background:var(--mist)}
.tm-arrow.off{opacity:.35}
@media(max-width:600px){.tm-arrow{display:none}.tm-strip li{flex-basis:62px}.tm-pick label{display:none}}

/* Text justified in Word leaves wide gaps between words in a phone's narrow column: align it normally there */
@media(max-width:600px){.prose :is([style*="text-align: justify"],[style*="text-align:justify"]){text-align:left!important}}

/* ---------- Today's Message: the reading card ---------- */
.tm-card{position:relative;overflow:hidden;border-radius:22px;padding:clamp(22px,4.5vw,42px);box-shadow:0 26px 54px -32px rgba(5,11,90,.4)}
.tm-card::before{content:'';position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,var(--navy),var(--teal-600),#33D1E0)}
.tm-card-head{margin:0 0 20px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.tm-card .tm-topic{font:700 clamp(1.45rem,3.4vw,2.05rem)/1.2 var(--font-head);color:var(--navy);margin:0 0 10px}
.tm-card .tm-author{display:flex;align-items:center;gap:10px;margin:0;color:var(--slate);font-weight:600;font-size:1rem}
.tm-card .tm-author img{width:36px;height:36px;border-radius:50%;object-fit:cover;object-position:50% 16%;box-shadow:0 0 0 2px var(--white),0 0 0 3.5px var(--teal-300)}
.tm-label{display:block;margin:0 0 6px;font:700 .7rem var(--font-body);letter-spacing:1.6px;text-transform:uppercase;color:var(--teal-700)}
.tm-verse{margin:0 0 24px;padding:16px 20px 18px 22px;border-radius:16px;border:0;border-left:5px solid var(--teal-600);background:linear-gradient(135deg,var(--mist),rgba(221,242,247,.3))}
.tm-verse p{margin:0;font:700 1.14rem/1.6 var(--font-head);color:var(--indigo)}
.tm-card .prose{font-size:1.08rem;line-height:1.8}
.tm-reading{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin:28px 0 0;padding:14px 18px;border-radius:14px;border:1px dashed var(--teal-300);background:var(--page)}
.tm-reading .tm-label{flex-basis:100%;margin:0}
.tm-reading strong{font-size:1.08rem;color:var(--navy)}
.tm-reading a{font-weight:700;font-size:.92rem}
.tm-exercises{margin:16px 0 0;padding:18px 20px 8px;border-radius:16px;background:linear-gradient(135deg,#FFF6E4,#FFFCF5);border:1px solid #F1DDB3}
.tm-card .tm-exercises h3{margin:0 0 14px;font:700 1.2rem var(--font-head);color:var(--navy)}
.tm-exercises ol{list-style:none;counter-reset:ex;margin:0;padding:0}
.tm-exercises li{counter-increment:ex;position:relative;margin:0 0 14px;padding-left:42px;font-weight:600;line-height:1.55;color:var(--ink)}
.tm-exercises li::before{content:counter(ex);position:absolute;left:0;top:-2px;width:29px;height:29px;border-radius:50%;background:var(--navy);color:#fff;font:700 .85rem/29px var(--font-body);text-align:center}
.tm-card .short{margin-top:20px}
.tm-card .tm-code{margin:22px 0 0;padding-top:14px;border-top:1px solid var(--border);color:var(--slate);font-size:.9rem;text-align:right}
.tm-share{margin-top:18px;padding:18px 22px}
.tm-share h3{margin:0 0 10px;font-size:1.05rem}
.tm-share .share{margin:0}
.tm-days-band ~ .wrap .comments{margin-top:18px;padding:22px;border-radius:var(--r);background:var(--white);border:1px solid var(--border);box-shadow:0 1px 3px rgba(11,16,51,.06)}
.tm-days-band ~ .wrap .comments h2{margin-top:0}
.tm-days-band ~ .wrap .comments .comment-form{box-shadow:none;background:var(--page)}
@media(max-width:600px){.tm-card{border-radius:18px}.tm-verse{padding:14px 16px 16px 18px}.tm-exercises{padding:16px 16px 6px}.tm-exercises li{padding-left:38px}.tm-card .tm-code{text-align:left}}

/* ---------- "keep listening while you browse" ---------- */
.rb-tip{position:absolute;left:12px;right:12px;bottom:calc(100% + 10px);display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:16px;background:#0A0F3C;color:#F4F6FF;font-size:.9rem;line-height:1.45;border:1px solid rgba(51,209,224,.55);box-shadow:0 0 0 4px rgba(51,209,224,.12),0 18px 40px -12px rgba(5,11,60,.6);animation:rb-tip-in .35s cubic-bezier(.2,.9,.3,1.2) both}
.rb-tip strong{color:#fff}
.rb-tip-ico{font-size:1.3rem;line-height:1;animation:st-bob 1.3s ease-in-out infinite}
.rb-tip button{flex:none;margin-left:auto;width:30px;height:30px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:1.1rem;line-height:1;cursor:pointer}
.rb-tip::after{content:'';position:absolute;left:34px;top:100%;border:8px solid transparent;border-top-color:#0A0F3C}
.rb-tip.out{opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s}
@keyframes rb-tip-in{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.studio-roam{display:flex;align-items:center;gap:8px;margin:0 0 14px;padding:10px 14px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:var(--st-mute);font-size:.9rem}
.listen-note{display:flex;align-items:flex-start;gap:12px;margin:0 0 18px;padding:14px 16px;border-radius:14px;background:linear-gradient(120deg,#0A0F3C,#2A1E7A 70%,#0E7C93);color:#E6EAFF;font-size:.95rem;line-height:1.5}
.listen-note strong{color:#fff}
.listen-note > span:first-child{font-size:1.4rem;line-height:1.1}
@media(prefers-reduced-motion:reduce){.rb-tip,.rb-tip-ico{animation:none}}

/* ---------- the video mini-player (src/browser/video.ts) ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.dock-slot{background:#060A2A}
.dock-busy-note{display:none}
.dock-slot.dock-busy .dock-busy-note{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:10px;padding:16px;text-align:center;color:#E6EAFF;background:radial-gradient(circle at 50% 40%,#2A1E7A,#060A2A 75%)}
.dock-busy-note p{margin:0}
.yt-dock{position:absolute;z-index:40;border-radius:10px;overflow:hidden;background:#000;display:flex;flex-direction:column}
.yt-dock[hidden]{display:none}
.yt-dock-frame{position:relative;flex:1;min-height:0}
.yt-dock-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt-dock-bar{display:none}
.yt-dock.is-mini{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:calc(24px + env(safe-area-inset-bottom));width:min(360px,46vw);height:auto;border-radius:14px;box-shadow:0 22px 50px -12px rgba(5,11,60,.65),0 0 0 1px rgba(255,255,255,.08);animation:dock-in .3s cubic-bezier(.2,.9,.3,1.15)}
body.has-radio .yt-dock.is-mini{bottom:calc(108px + env(safe-area-inset-bottom))}
.yt-dock.is-mini .yt-dock-frame{flex:none;aspect-ratio:16/9}
.yt-dock.is-mini .yt-dock-bar{display:flex;align-items:center;gap:6px;padding:6px 6px 6px 12px;background:#0A0F3C;color:#F4F6FF}
.yt-dock-title{flex:1;min-width:0;font:600 .82rem var(--font-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.yt-dock-back,.yt-dock-close{flex:none;display:grid;place-items:center;width:30px;height:30px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;text-decoration:none;font-size:1.05rem;line-height:1;cursor:pointer}
.yt-dock-back:hover,.yt-dock-close:hover{background:rgba(255,255,255,.24)}
@keyframes dock-in{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
@media(max-width:600px){.yt-dock.is-mini{right:8px;width:62vw}body.has-radio .yt-dock.is-mini{bottom:calc(92px + env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){.yt-dock.is-mini{animation:none}}

/* after a page is swapped in, its heading takes the focus for screen readers; no outline box for that */
h1[tabindex="-1"]:focus{outline:none}

/* ---------- the app: install from the footer ---------- */
.footer-app{margin:10px 0 0}
.install-app{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:99px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;font:600 .9rem var(--font-body);cursor:pointer}
.install-app:hover{background:rgba(255,255,255,.16)}
.install-ios{margin:0;color:var(--mist);font-size:.88rem}
.install-ios strong{color:#fff}

/* ---------- YouTube live chat beside the live video (Watch page; YtChat in views/public.tsx) ---------- */
.live-grid{display:grid;gap:16px;align-items:stretch}
.yt-chat{display:flex;flex-direction:column;gap:10px;min-width:0}
.yt-chat-frame{display:none}
.yt-chat.has-frame .yt-chat-frame{display:block;flex:1;min-height:420px;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--page)}
.yt-chat-frame iframe{display:block;width:100%;height:100%;min-height:420px;border:0}
.yt-chat-help p{margin:4px 0 8px}
.yt-chat-btns{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
@media(min-width:900px){.live-grid{grid-template-columns:minmax(0,1fr) minmax(300px,360px)}}

/* ---------- audio narration of Today's Message (TmAudioPlayer in views/tmaudio.tsx) ---------- */
.tm-audio{margin:0 0 22px;padding:16px 18px;border:1px solid var(--border);border-radius:16px;background:var(--mist)}
.tm-audio-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 10px}
.tm-audio-head h3{margin:0;font-size:1.05rem}
.tm-voices{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:0 0 12px}
.tm-voice{display:grid;gap:1px;text-align:left;padding:9px 12px;border:1.5px solid var(--border);border-radius:12px;background:var(--page);color:inherit;font:inherit;cursor:pointer;min-height:44px}
.tm-voice:hover{border-color:var(--teal-600)}
.tm-voice[aria-pressed=true]{border-color:var(--teal-600);box-shadow:0 0 0 2px rgba(0,150,170,.18)}
.tm-voice-name{font-weight:700}
.tm-voice-sub{font-size:.8rem;opacity:.75}
.tm-voice-state{font-size:.78rem;color:var(--teal-700);min-height:1em}
.tm-voice[data-state=failed]{opacity:.6}
.tm-audio audio{display:block;width:100%}
.tm-audio-bar{margin:10px 0 0}
.tm-audio-bar select{width:auto;display:inline-block;margin-left:6px}
.tm-audio-note{margin:8px 0 0;min-height:1.2em}
.tm-audio-ai{margin:4px 0 0}

/* ---------- the Summit manual pop-up (ManualPill in views/layout.tsx), shown while the Summit is on air ---------- */
.manual-pill{position:fixed;left:max(12px,env(safe-area-inset-left));bottom:calc(20px + env(safe-area-inset-bottom));z-index:60;display:flex;align-items:stretch;max-width:min(390px,calc(100vw - 24px));border-radius:16px;background:linear-gradient(135deg,#0A0F3C,#1B2A8F);color:#fff;box-shadow:0 22px 50px -14px rgba(5,11,60,.7),0 0 0 1px rgba(255,255,255,.1);animation:mp-in .5s .6s cubic-bezier(.2,.9,.3,1.15) both}
.manual-pill[hidden]{display:none}
.manual-pill a{display:flex;align-items:center;gap:12px;min-width:0;padding:12px 6px 12px 14px;color:inherit;text-decoration:none}
.manual-pill a:hover strong{text-decoration:underline}
.mp-ico{flex:none;width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5A2.5 2.5 0 0 1 6.5 3H20v16H6.5A2.5 2.5 0 0 0 4 21.5z'/%3E%3Cpath d='M4 5.5v16M8 7h8'/%3E%3C/svg%3E") center/22px no-repeat}
.mp-text{display:grid;gap:1px;min-width:0}
.mp-text strong{font-size:.98rem}
.mp-text small{opacity:.8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mp-live{display:flex;align-items:center;gap:6px;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#7FF0FF}
.manual-pill button{flex:none;align-self:flex-start;width:34px;height:34px;margin:4px 4px 0 0;border:0;border-radius:50%;background:transparent;color:#fff;font-size:1.3rem;line-height:1;cursor:pointer;opacity:.75}
.manual-pill button:hover{opacity:1;background:rgba(255,255,255,.14)}
body.has-radio .manual-pill{bottom:calc(104px + env(safe-area-inset-bottom))}
@media(max-width:600px){body.has-radio .manual-pill{bottom:calc(92px + env(safe-area-inset-bottom))}body:has(.yt-dock.is-mini) .manual-pill{bottom:calc(92px + 34vw + 56px + env(safe-area-inset-bottom))}}
@keyframes mp-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.manual-pill{animation:none}}
@media print{.manual-pill{display:none}}

/* the sermon leads a service listing (ServicePart in views/public.tsx) */
.part.part-lead{margin:12px 0 4px;padding:14px 16px;border:1px solid var(--border);border-radius:14px;background:var(--mist)}
.part.part-lead h4{font-size:1.1rem}

/* ---------- the admin dashboard (views/dashboard.tsx): feature cards, numbers, the site report ---------- */
.dash-hello{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px;margin:0 0 18px}
.dash-hello h2{margin:0;font-size:1.5rem}
.dash-hello p{margin:2px 0 0}
.dash-live{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:var(--mist);border:1px solid var(--border);color:inherit;text-decoration:none;font-size:.95rem}
.dash-live b{font-size:1.1rem}
.dash-cards{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr))}
.dash-card{--tone:#0AA6B8;position:relative;display:flex;flex-direction:column;gap:6px;padding:20px 20px 18px;border-radius:18px;background:var(--white,#fff);border:1px solid var(--border);box-shadow:0 18px 40px -30px rgba(5,11,90,.5);overflow:hidden}
.dash-card::before{content:'';position:absolute;inset:0 0 auto 0;height:5px;background:var(--tone)}
.dash-card.tone-message{--tone:#0AA6B8}
.dash-card.tone-manual{--tone:#3B4DD8}
.dash-card.tone-radio{--tone:#8A3FD1}
.dash-card.tone-report{--tone:#1F9D6B}
.dash-card header{display:flex;align-items:center;gap:12px;margin:0 0 4px}
.dash-card h2{margin:0;font-size:1.15rem}
.dash-ico{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:color-mix(in srgb,var(--tone) 14%,transparent);color:var(--tone)}
.dash-ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dash-status{margin:2px 0 0;font-size:1.02rem}
.dash-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:0;min-height:1.6em}
.dash-sub{margin:0;font-size:.9rem}
.dash-actions{display:flex;flex-wrap:wrap;gap:8px;margin:auto 0 0;padding-top:12px}
.warn-text{color:#B45309;font-weight:600}
.dash-report{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:4px 0 2px}
.dash-report b{display:block;font-size:1.5rem;line-height:1.1}
.dash-report span{font-size:.8rem;color:var(--slate)}
.dash-bars{width:100%;height:54px;margin:4px 0 0}
.dash-bars rect{fill:color-mix(in srgb,#1F9D6B 35%,transparent)}
.dash-bars rect.is-today{fill:#1F9D6B}
.dash-tiles{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin:16px 0 0}
.dash-tile{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border-radius:14px;background:var(--white,#fff);border:1px solid var(--border);color:inherit;text-decoration:none}
a.dash-tile:hover{border-color:var(--teal-600)}
.dash-tile b{font-size:1.6rem;line-height:1.1}
.dash-tile span{font-size:.85rem;color:var(--slate)}
.dash-tile.needs{border-color:#E0A526;background:#FFF8E7}
.dash-rank{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.dash-rank li{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) auto;gap:10px;align-items:center;font-size:.92rem}
.dash-rank li>a,.dash-rank li>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dash-rank .bar{height:8px;border-radius:99px;background:var(--mist);overflow:hidden}
.dash-rank .bar i{display:block;height:100%;background:#1F9D6B;border-radius:99px}
.online-now{margin:8px 0 0;font-weight:600;color:var(--teal-700)}
@media(max-width:560px){.dash-actions .btn{flex:1 1 auto;text-align:center}.dash-rank li{grid-template-columns:1fr auto}.dash-rank .bar{display:none}}