/* 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_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; }

/* TK19M_PHONE (10-17): engine toks (jesustok, angeltok) phone polish + the fixed ambient layer no longer dims the page end */
nav.netfoot,form.news-box,.news-box,share-kit{position:relative;z-index:1}
/* Todd 10-17 ("jt and chat ... not good alignment"): content pages (chat, about, sponsor ...) sit in a centred 1160px container
   instead of hugging the left edge of a 1920-2560px screen; the chat card uses the container: messages + composer on the left,
   rules + sign-in on the right (no dead gap), header lines up with the container */
@media (min-width:900px){
  main.page-main>section,main.page-main>article,main.page-main>.chat-page{max-width:1160px;margin-left:auto!important;margin-right:auto!important;width:100%;box-sizing:border-box}
  body:has(main.page-main) header.top{padding-left:max(16px,calc((100vw - 1160px) / 2))!important;padding-right:max(16px,calc((100vw - 1160px) / 2))!important;box-sizing:border-box}
  .chat-page aside.chat{max-width:none!important;display:grid;grid-template-columns:minmax(0,1fr) 380px;column-gap:28px;align-items:start;grid-auto-flow:row dense}
  .chat-page aside.chat>*{grid-column:1}
  .chat-page aside.chat>.chat-h{grid-column:1 / -1}
  .chat-page aside.chat>.chat-rules,.chat-page aside.chat>.card,.chat-page aside.chat>[data-chat-ts]{grid-column:2}
  .chat-page aside.chat>.chat-log{grid-row:span 3;min-height:360px;max-height:62vh;overflow:auto}
}
/* room below the page end: the tab bar (phones) / footer bar (desktop) no longer covers PREVIOUS / NEXT */
body::after{content:"";display:block;height:72px}
/* jesustok: the fixed chips row under the header is opaque once scrolled (text no longer shows through it) */
html.theme-dark.tk-scrolled .chips-wrap{background:rgba(14,10,8,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
@media (max-width:640px){
  .rb,.rb-listen,.rb-imm{font-size:12px!important}
  .jt-kicker,.tv-kind,.tv-faith,.tv-label,.hint-step,.bv-ref,.at-who,.at-kicker,.eyebrow{font-size:12.5px!important}
  .tvb{min-height:44px}
  nav.tabbar a{font-size:12px!important}
  .foot a,.solo-foot a{font-size:15px}
  .foot,.solo-foot,.tk-billfoot{font-size:14px}
  footer nav.netfoot .tkacc:not(.open)>ul.netfoot-l{display:none!important}
  footer nav.netfoot .tkacc.open>ul.netfoot-l,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}
  nav.netfoot .tkacc:not(.open)>ul.netfoot-l{display:none!important}
  nav.netfoot .tkacc.open>ul.netfoot-l li{display:block;margin:0}
  nav.netfoot .tkacc.open>ul a{display:inline-flex;align-items:center;min-height:44px;font-size:15px}
  nav.netfoot h3.netfoot-gh{display:block;opacity:1;margin:0!important}
  nav.netfoot div.netfoot-g{margin:0;border-top:1px solid color-mix(in srgb,currentColor 16%,transparent)}
  .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;opacity:.7}
  .tkacc-b[aria-expanded=true]::after{content:"\2212"}
  .tkacc-b:focus-visible{outline:2px solid currentColor;outline-offset:2px}
}
.tk-billfoot-m{display:block;font-size:14px;line-height:1.55;opacity:.85;text-align:center;margin:18px auto 8px;padding:0 20px;max-width:680px;position:relative;z-index:1}
/* /TK19M_PHONE */
/* TOKS_READ1 (10-18, Todd: "fonts in the tok sites are hard to read"): readability layer for the engine toks (JesusTok, AngelTok).
   Look-only, no copy change. Body copy >= 16 px with line-height 1.55, credits/notes >= 14.5 px, topics >= 14 px. */
p,li{line-height:1.55}
p.hint-p,p.small.muted,.small.muted{font-size:16px!important;line-height:1.55!important}
p.tv-credit,a.tv-src{font-size:15px!important;line-height:1.45!important}
p.tv-note{font-size:14.5px!important;line-height:1.45!important}
p.d-topics,#d-topics{font-size:14px!important}
main p:not([class]),section p:not([class]),aside p:not([class]){font-size:max(16px,1em)}
p.side-p{font-size:16px!important;line-height:1.5!important}
.tv-credit,.tv-note,.d-topics{text-shadow:0 1px 3px rgba(0,0,0,.6)}
/* /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; }