/* tok-a11y 1014: shared readability layer for every tok site (loaded after the site's own CSS).
   Lifts dim text, borders, tabs, footer links and buttons to WCAG AA (4.5:1 text, 3:1 large text / UI) without
   changing each site's look, and styles the centred Sponsor dialog (tok-a11y.js). Same file on every site. */

/* ---------- 1. Form fields (all sites): visible edge and readable placeholder, in the field's own text colour ---------- */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]):not([type=submit]):not([type=button]):not([type=color]),
textarea, select {
  border-color: color-mix(in srgb, currentColor 62%, transparent) !important;
}
input::placeholder, textarea::placeholder {
  color: color-mix(in srgb, currentColor 72%, transparent) !important;
  opacity: 1 !important;
}

/* ---------- 2. Sponsor page centred on the engine sites (JesusTok, AngelTok, DivineTok, BibVid) ---------- */
.sponsor-page { margin-inline: auto !important; }
.sponsor-page .sp-chips, .sponsor-page .sp-month { justify-content: flex-start; }

/* ---------- 3. JesusTok + AngelTok (tokv15 engine): footer, tabs, counts, meta text ---------- */
body.jt footer.foot, body.jt footer.foot a, body.jt footer.foot span { color: rgba(243, 234, 219, .88) !important; }
body.jt nav.tabs a:not([aria-current]), body.jt .tabbar a:not([aria-current=page]) { color: rgba(243, 234, 219, .86) !important; }
body.jt .tok-filter small, body.jt button > small { opacity: 1 !important; color: rgba(243, 234, 219, .8) !important; }
body.jt .muted, body.jt .small.muted { color: rgba(243, 234, 219, .82) !important; }
body.jt .solo-src, body.solo-page .solo-card .solo-src { opacity: 1 !important; color: rgba(255, 250, 240, .84) !important; }
/* home page (desktop): the fixed link row at the bottom ran over the feed, the Radio bar and the network strip.
   Give it a dark band, keep it clear of the Radio bar, and leave room under the network strip. */
@media (min-width: 900px) {
  body.home:is(.jt, .at) { padding-bottom: 56px; }
  body.home.jt footer.foot { bottom: 0 !important; padding: 10px 16px 10px 196px !important; background: linear-gradient(to top, rgba(7, 8, 12, .96), rgba(7, 8, 12, .82)); }
  body.home.at footer.foot { bottom: 0 !important; padding: 10px 16px 10px 196px !important; background: linear-gradient(to top, rgba(245, 247, 252, .97), rgba(245, 247, 252, .86)); }
}

/* AngelTok is a light theme */
body.at footer.foot, body.at footer.foot a, body.at footer.foot span { color: rgba(24, 32, 58, .86) !important; }
body.at .tabbar a:not([aria-current=page]) { color: rgba(24, 32, 58, .84) !important; }
body.at .tabbar a[aria-current=page] { color: #1d4f8c !important; }
body.at .tabbar a.tb-share { color: #14213d !important; }
body.at .page-kicker, body.at .p-k, body.at .at-who, body.at span.word > b, body.at .enc-acts .btn.sm { color: #6f5310 !important; }
body.at p > a.btn.sm { color: #14213d !important; }
body.at .solo-src { opacity: 1 !important; }
body.at .at-label { color: rgba(20, 27, 51, .86) !important; }
/* AngelTok single-saying page: the card is a dark photo, so its words are light */
body.at .solo-card .solo-text, body.at .solo-card .solo-text p, body.at .solo-card blockquote p { color: #fbf8f1 !important; text-shadow: 0 1px 3px rgba(0, 0, 0, .55); }
body.at .solo-card figcaption, body.at .solo-card .solo-src { color: rgba(255, 255, 255, .86) !important; }
body.at .solo-card figcaption b { color: #a9cbff !important; }
/* the floating Radio | Ask bar sat white-on-white on AngelTok */
body.at #tokRadio .trBar, body.at .trBar { background: #1b2440 !important; border-color: #c9a24a !important; }
body.at .twn-pill { color: #fff !important; }

/* ---------- 4. DivineTok + BibVid (React app + chat pages) ---------- */
[data-brand=divinetok], .b-divinetok { --dim: #aeaac6; --muted: #c4c0d8; }
[data-brand=bibvid], .b-bibvid { --dim: #aaa293; --muted: #c6bead; }
[data-brand] footer, [data-brand] footer span, [data-brand] footer p, [data-brand] .shareRow > span { color: var(--muted) !important; opacity: 1 !important; }
[data-brand] .dtChipRow .dtAuto { color: #1a1308 !important; }
[data-brand] .oNowB button.on { color: #fff3d6 !important; }
[data-brand] .rStoryT small, [data-brand] .fTile > span, [data-brand] .rCrumbs span { color: var(--muted) !important; }

/* ---------- 5. Article-style tok sites (CatholicTok, HellTok, JewTok, MuslimTok, ApologeticTok, BuddhistTok, MormonTok, ScientologyTok) ---------- */
/* (scope: not the engine sites above: no data-brand on <html>, no jt/at/chat-body class on <body>) */
/* weekly-email card in the dark footer: its heading took the footer's pale colour on a cream card (HellTok's card is dark: left alone) */
html:not([data-brand]) body:not(.jt):not(.at):not(.chat-body):not([data-site=helltok]) footer.foot form.card :is(h2, h3, .h2-sm) { color: #1e2230 !important; }
/* "Send a question or correction" link sits on the dark ask panel */
html:not([data-brand]) body:not(.jt):not(.at):not(.chat-body) .qs-note .linkbtn { color: #cfe0ff !important; text-decoration: underline; }
/* header tag line under the logo (light header) */
html:not([data-brand]) body:not(.jt):not(.at):not(.chat-body) header a.brand small { color: #4a4e5e !important; }
/* HellTok: dark text on the red What's new pill */
body[data-site=helltok] .twn-pill { color: #fff !important; }
/* words over hero photos: brighter gold plus a dark halo so they read on any part of the picture */
html:not([data-brand]) body:not(.jt):not(.at):not(.chat-body) section.hero :is(.eyebrow, .eyebrow-gold, .lead, h1, .hero-verse, .hero-verse span, .hero-heb, .cta .btn-ghost) {
  text-shadow: 0 1px 2px rgba(0, 0, 0, .95), 0 0 12px rgba(0, 0, 0, .75);
}
html:not([data-brand]) body:not(.jt):not(.at):not(.chat-body) section.hero :is(.eyebrow-gold, .hero-verse, .hero-heb) { color: #f8e2a2 !important; }
html:not([data-brand]) body:not(.jt):not(.at):not(.chat-body) section.hero .hero-verse span { color: #fff1e6 !important; }
html:not([data-brand]) body:not(.jt):not(.at):not(.chat-body) section.hero .cta .btn-ghost { background-color: rgba(10, 12, 20, .55) !important; }

/* ---------- 6. Sponsor dialog (tok-a11y.js) ---------- */
html.tka-lock { overflow: hidden; }
dialog.tka-modal {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 16px; border: 0; background: transparent; color: inherit;
  overflow: auto; overscroll-behavior: contain; box-sizing: border-box;
}
dialog.tka-modal[open] { display: grid; place-items: center; }
dialog.tka-modal::backdrop { background: rgba(4, 6, 12, .66); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.tka-box {
  position: relative; box-sizing: border-box; width: 100%; max-width: 600px;
  max-height: calc(100dvh - 32px); overflow: auto; overscroll-behavior: contain;
  padding: 52px 24px 24px; border-radius: 20px;
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
  text-align: left;
}
@supports not (height: 100dvh) { .tka-box { max-height: calc(100vh - 32px); } }
.tka-x {
  position: sticky; top: 0; float: right; margin: -40px -12px 0 0; z-index: 2;
  width: 44px; height: 44px; display: grid; place-items: center; padding: 0; cursor: pointer;
  border-radius: 50%; border: 1px solid color-mix(in srgb, currentColor 55%, transparent);
  background: inherit; background-color: color-mix(in srgb, currentColor 10%, transparent); color: inherit;
}
.tka-x:hover { background-color: color-mix(in srgb, currentColor 18%, transparent); }
.tka-x:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }
.tka-body { clear: none; }
.tka-body .tka-content { margin: 0 !important; padding: 0 !important; max-width: none !important; width: auto !important; min-height: 0 !important; }
.tka-body .tka-content .wrap, .tka-body .tka-content .narrow { max-width: none !important; padding-inline: 0 !important; margin: 0 !important; }
.tka-body h1, .tka-body h2 { margin-top: 0; font-size: clamp(24px, 6vw, 32px); line-height: 1.15; }
.tka-body .btnrow a[href="/"] { display: none; }
.tka-load { text-align: center; }
@media (max-width: 420px) { dialog.tka-modal { padding: 10px; } .tka-box { padding: 50px 16px 18px; max-height: calc(100dvh - 20px); border-radius: 16px; } }

/* TK18_WELCOME (visual QA 10-17): first-visit welcome = one short paragraph, Skip always visible */
dialog.intro#intro > p:not(.btnrow):not(:first-of-type), .welcome-card > p:not(.btnrow):nth-of-type(n+2) { display: none; }
dialog.intro#intro, .welcome-card { max-width: min(92vw, 420px); }
dialog.intro#intro > p:first-of-type, .welcome-card > p:first-of-type { font-size: 1.05rem; line-height: 1.45; }
/* TK18_TAPS: 44 px minimum tap targets */
.tabbar a, .btnrow .btn, .btnrow button, button.linkbtn, .chip, footer li a, .foot li a, [data-intro-done], [data-welcome-skip], [data-welcome-go] { min-height: 44px; }
footer li a, .foot li a, button.linkbtn { display: inline-flex; align-items: center; }

/* TK18_NET6 (NET-6, Todd 10-17): every label is its own box with a real gap; headings on their own line; names never wrap apart */
.tk-footlinks { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 12px 0; padding: 0; }
.tk-footlinks a { min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap; }
.foot .cols p:has(> .foot-more) { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.foot h4 { display: block; margin: 0 0 8px; }
.foot ul { display: flex; flex-direction: column; gap: 8px; }
footer nav.netfoot h2.netfoot-h, footer nav.netfoot h3.netfoot-gh { display: block; margin: 0 0 8px; }
footer nav.netfoot div.netfoot-g { margin: 0 0 14px; }
footer nav.netfoot ul.netfoot-l { display: flex; flex-wrap: wrap; gap: 8px 16px; list-style: none; padding: 0; margin: 0; }
footer nav.netfoot ul.netfoot-l li { display: block; margin: 0; }
footer nav.netfoot a, .foot li a, .drawer a { white-space: nowrap; }
.drawer a, .drawer .drawer-btn, .drawer .drawer-h { display: block; }
.tk-homelinks { justify-content: center; max-width: 1100px; margin: 24px auto 0; padding: 0 16px; }
.tk-subbed { margin: 12px 0; font-weight: 600; }
.tk-subbed a { margin-left: 4px; }
.tk-deals { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); margin: 16px 0; }
.tk-deals .card { display: flex; flex-direction: column; gap: 8px; }
.tk-deals .card .btn { align-self: flex-start; margin-top: auto; }
.tk-pagecopy { max-width: 720px; margin: 0 auto; padding: 24px 16px 40px; }
.tk-pagecopy ul { padding-left: 20px; }

/* TK18_JEWWEL: keep the welcome's buttons clear of the floating Radio/Bible/Ask pill and above it */
.welcome[data-welcome] { z-index: 2147483000; padding-bottom: calc(118px + env(safe-area-inset-bottom)); }
@media (min-width: 761px) { .welcome[data-welcome] { padding-bottom: calc(96px + env(safe-area-inset-bottom)); } }

/* TK181_NETCOL: network block = wrapped rows of names under each group heading (not one long column) */
footer nav.netfoot ul.netfoot-l, .foot nav.netfoot ul.netfoot-l { flex-direction: row; flex-wrap: wrap; gap: 4px 18px; }
footer nav.netfoot ul.netfoot-l li a { min-height: 32px; }
@media (max-width: 767px) { footer nav.netfoot ul.netfoot-l li a { min-height: 44px; } }
/* desktop: mouse targets don't need 44 px rows; tighter link lists (footer was ~1,700-2,200 px at 1280) */
@media (min-width: 768px) {
  footer.foot .cols ul { gap: 2px !important; }
  footer.foot .cols ul li a { min-height: 30px; }
}
/* phones: the footer link lists were one link per 52 px row (~2,800 px of footer); two columns per list, same 44 px tap targets */
@media (max-width: 767px) {
  footer.foot .cols ul { display: grid !important; grid-template-columns: 1fr 1fr; gap: 0 16px; }
  .foot .cols ul li a { white-space: normal; line-height: 1.25; }
  .foot .cols h4 { margin-top: 12px; }
}

/* TK182_NOLABEL: no picture labels (Todd 10-17) */
.jt-label, .at-label, .imglab, .art-label { display: none !important; }
/* TK182_SPACE (Todd 10-17): share icons centred on every tok; footers get real breathing room from the content above */
share-kit { display: flex; justify-content: center; flex-wrap: wrap; margin-left: auto; margin-right: auto; }
.foot > share-kit, footer > share-kit, .wrap > share-kit { flex: 1 1 100%; width: 100%; }
footer.foot, body.page-wrap .foot, .solo-foot { margin-top: 32px; }
/* TK182_GRIDC (Todd: a short last row is centred; grid-center audit 10-17): flex rows of fixed-width cards, centred */
section.sisters > .grid.grid-5, #main .grid.grid-3, #main .warns, #main .doors, .enc-grid, .fToday, .oRail { display: flex !important; flex-wrap: wrap; justify-content: center; }
section.sisters > .grid.grid-5 > * { flex: 0 1 200px; }
#main .grid.grid-3 > *, #main .warns > *, #main .doors > * { flex: 0 1 calc((100% - 48px) / 3); min-width: 260px; }
.enc-grid > * { flex: 0 1 calc((100% - 40px) / 3); min-width: 280px; }
.fToday > * { flex: 0 1 340px; }
.oRail > * { flex: 0 1 calc((100% - 48px) / 4); min-width: 160px; }

/* TK19M_PHONE (10-17): phone design polish, one layer for every article tok (BROADCAST-MOBILE addendum) */
@media (max-width:640px){
  .wrap{padding-left:20px;padding-right:20px}
  main p.small,main .small.muted,main .card p,main li.small{font-size:16px;line-height:1.55}
  .eyebrow,.kicker,.tag,.credit,.foot h4,.netfoot-gh,.netfoot-h{font-size:12.5px!important;letter-spacing:.06em}
  .foot,.foot p,.foot li,.foot a{font-size:15px}
  .foot .fine,.foot .small{font-size:14px!important;line-height:1.55}
  main .btn,main a.btn,main button.btn,.foot .btn,.news-box button{min-height:48px}
  main .chip,main button.chip,.linkbtn.foot-more{min-height:44px!important}
  .foot .cols{gap:0!important}
  .tkacc{border-top:1px solid color-mix(in srgb,currentColor 16%,transparent);margin:0!important;padding:0!important}
  .tkacc:last-child{border-bottom:1px solid color-mix(in srgb,currentColor 16%,transparent)}
  .tkacc>h4,.tkacc>h3{margin:0!important;padding:0!important}
  .tkacc-b{all:unset;box-sizing:border-box;display:flex;width:100%;min-height:52px;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
  .tkacc-b::after{content:"+";font-size:22px;font-weight:400;letter-spacing:0;opacity:.7}
  .tkacc-b[aria-expanded=true]::after{content:"\2212"}
  .tkacc-b:focus-visible{outline:2px solid currentColor;outline-offset:2px}
  footer.foot .cols .tkacc:not(.open)>ul,footer nav.netfoot .tkacc:not(.open)>ul.netfoot-l{display:none!important}
  footer.foot .cols .tkacc.open>ul,footer nav.netfoot .tkacc.open>ul.netfoot-l{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px;margin:0 0 14px!important;padding:0!important;list-style:none}
  footer nav.netfoot .tkacc.open>ul.netfoot-l li{display:block;margin:0}
  footer.foot .tkacc.open>ul a,footer nav.netfoot .tkacc.open>ul a{display:inline-flex;align-items:center;min-height:44px;padding:0;font-size:15px;line-height:1.25}
  footer nav.netfoot h3.netfoot-gh{display:block;opacity:1}
  footer nav.netfoot h2.netfoot-h{font-size:15px!important;letter-spacing:0;margin:0 0 6px}
  footer nav.netfoot div.netfoot-g{margin:0}
  .netfoot{padding-top:8px}
  nav.tabbar a{font-size:12.5px!important}
  /* the tab bar already has Ask: the floating Ask button only covered content (newsletter Subscribe) */
  body:has(nav.tabbar a[href*="ask" i]) .askfab{display:none!important}
}
@media (max-width:400px){
  /* small phones: the site name was cut ("ScientologyT...") and "Quick exit" wrapped onto 2 lines */
  header .brand span{font-size:16px!important}
  header .brand small,header .brand .tag-line,header .brand em{display:none!important}
  header .top-act{gap:4px!important}
  header a.exit{white-space:nowrap!important;padding-left:10px!important;padding-right:10px!important}
}
/* tester2 TK18.2: at 1280 the floating Ask button sat on the network NEXT button at the page end -> room to scroll past it */
@media (min-width:641px){body::after{content:"";display:block;height:96px}}
/* /TK19M_PHONE */
/* TOKS_READ1 (10-18, Todd: "fonts in the tok sites are hard to read"): readability layer for the art toks. Look-only, no copy change.
   Body copy >= 16 px with line-height 1.55, card blurbs 16 px, notes/labels >= 14-15 px, reading width ~70ch, muted text brighter.
   r2: display text (verse of the day, quotes) is never shrunk; ask box fits at 390. */
main p,main li{line-height:1.55}
main p:not([class]):not(.votd *):not(blockquote *){font-size:max(16px,1em)}
p.small,.small.muted,p.small.muted{font-size:16px!important;line-height:1.55!important}
.muted{opacity:1}
p.qs-note,button.linkbtn,.qs-note{font-size:15px!important;line-height:1.5!important}
.eyebrow{font-size:13.5px!important;letter-spacing:.08em}
span.arrow{font-size:15px!important;line-height:1.5}
a.votd-link{font-size:16px!important}
/* long text stays at a comfortable measure on wide screens */
main article p,main .prose p,main section>p{max-width:72ch}
/* text on photos keeps a soft shadow so it never dissolves into the picture */
.hero h1,.hero p,.hero .eyebrow{text-shadow:0 1px 3px rgba(0,0,0,.55)}
@media (min-width:900px){main p:not([class]):not(.votd *):not(blockquote *),p.small,.small.muted,p.small.muted{font-size:16.5px!important}}
/* "Try me out" (.btn-try) carried its own gold text colour onto the gold button: gold on gold, nearly invisible */
.btn.btn-gold.btn-try{color:#14130f!important}
/* JewTok door cards: the title + blurb sit on photos (bright sky on "Their stories"): a bottom scrim keeps them readable */
.door .in{background:linear-gradient(to top,rgba(10,8,4,.82),rgba(10,8,4,.55) 60%,rgba(10,8,4,0))!important}
.door .in h3,.door .in p{text-shadow:0 1px 3px rgba(0,0,0,.7)}
/* AI guide box at phone width: mic + input + send + hands-free + mute share one row; give the input the room so the hint fits */
@media (max-width:420px){.hero-ask{padding-left:10px!important;padding-right:10px!important}
  glowmic-chat::part(input)::placeholder{font-size:14.5px}
  glowmic-chat::part(mic){flex:0 0 auto}}
/* hero: the CTA row and the Ask chips line up with the left-aligned headline */
.hero .cta{justify-content:flex-start!important}
.hero-ask glowmic-chat::part(chips){justify-content:flex-start}
/* first-visit welcome: on desktop it sits bottom-right, clear of the hero CTAs */
@media (min-width:1000px){.welcome{justify-content:flex-end!important;padding-right:24px!important}}
/* /TOKS_READ1 */

/* TAP1 (10-22, T-1016): 44 px tall hit areas on phones without moving anything (padding + equal negative margin) */
@media (pointer: coarse), (max-width: 600px) {
  blockquote cite a, .vcard cite a, a.bv-ref { display: inline-block; padding: 13px 8px; margin: -13px -8px; }
  footer a, .site-footer a, .foot a { display: inline-block; padding-top: 11px; padding-bottom: 11px; margin-top: -11px; margin-bottom: -11px; }
  a.brand { display: inline-flex; align-items: center; min-height: 44px; }
}

/* TOKFOOT1 (10-22): 44 px hit areas on phones for the network footer row (.nd-netlinks; its own adopted sheet sets padding with !important,
   hence the html body prefix), the home question list (ul.asklist + "All questions") and the JesusTok/AngelTok story titles;
   the network row's Sponsor link is hidden while this tok's sponsorship is off (body[data-sp-off], set by the worker) */
@media (pointer: coarse), (max-width: 600px) {
  html body .nd-netlinks a { padding-top: 11px !important; padding-bottom: 11px !important; min-height: 44px !important; box-sizing: border-box !important; }
  ul.asklist a, ul.asklist + p > a:only-child { display: inline-block; padding-top: 10px; padding-bottom: 10px; }
  h3.enc-t a { display: inline-block; padding-top: 9px; padding-bottom: 9px; margin-top: -9px; margin-bottom: -9px; }
}
body[data-sp-off] .nd-netlinks a[href="/sponsor"] { display: none !important; }