/* Source: baseline/teachings/*.html inline <style> blocks (identical on all four teaching pages and prayer.html), verbatim, in document order. */

html{scroll-behavior:smooth}
body{margin:0;background:var(--tgn-parchment-50);color:var(--tgn-ink);font-family:var(--font-body);font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3,h4,p,ul,li{margin:0;padding:0}
*{box-sizing:border-box}
ul{list-style:none}
a{color:inherit;text-decoration:none}
a:hover{color:var(--tgn-brick)}
button{font-family:var(--font-body);cursor:pointer;border:0}
@media(max-width:720px){
.py-card-grid{grid-template-columns:1fr!important}
}
@media(max-width:480px){
.py-bio-head{flex-direction:column;align-items:flex-start!important;gap:14px!important}
}
/* R2: .py-acc-cols carried `1fr`, but `1fr` is minmax(auto,1fr) and the auto
   minimum cannot drop below the column's min-content — measured a hard
   280.641px floor in containers as narrow as 167px. .py-acc-inner has
   overflow-x:hidden, so the excess was clipped and unreachable rather than
   scrollable. minmax(0,...) removes the floor; verified in-browser to move
   the track 280.641px -> 167px at 320. Bands are bounded and on the ladder;
   1024+ is deliberately left to the element's own inline 1fr 1fr, which
   already fits, so desktop stays byte-identical. */
@media(max-width:767px){
.py-acc-cols{grid-template-columns:minmax(0,1fr)!important}
}
@media(min-width:768px) and (max-width:1023px){
.py-acc-cols{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
/* R2 residual: the contact rows put a bare email address in a flex child.
   A flex item's automatic minimum size is its min-content, and an unbroken
   address has none — onthejourney.316@comcast.net measured 213px inside a
   125px parent at 320. Same defect and same remedy as the footer email,
   which tgn-nav.css already solves with overflow-wrap:anywhere in this exact
   band. Bounded to <=1023 so desktop stays byte-identical. */
@media(max-width:1023px){
.py-h3,.py-h4{min-width:0}
.py-h3>span,.py-h4>span{min-width:0;overflow-wrap:anywhere}
}
/* R4: the request forms set font-size:15px inline on their text-entry
   fields. iOS Safari zooms the viewport whenever a focused text field is
   under 16px, which throws the user out of the layout mid-form. Unbounded on
   purpose: iPadOS reports >=1024 CSS px in landscape and zooms just the same,
   so a max-width band would leave tablets exposed. Radios and checkboxes are
   excluded — they carry no text entry and never trigger the zoom. */
.py-acc-panel input:not([type=radio]):not([type=checkbox]),
.py-acc-panel select,
.py-acc-panel textarea { font-size: 16px !important; }
@media(prefers-reduced-motion:reduce){
*{transition:none!important}
}
/* Equal-height Levels cards, desktop two-column breakpoint only — tallest card (Go Together)
   measured 369px at the site's own --tgn-container-max width, closed, no accordions open.
   Not set at all below 721px, so the mobile single-column stack keeps its natural heights. */
@media(min-width:721px){
.py-level-card{min-height:370px}
}
/* accordion mechanics — Card 03/04 request panels and the Teachings rows share this.
   grid-template-rows 0fr/1fr (rather than max-height) scales correctly regardless of
   content length, and the global prefers-reduced-motion rule above already zeroes it out. */
.py-acc-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows 280ms ease}
.py-acc-panel.is-open{grid-template-rows:1fr}
.py-acc-inner{overflow:hidden}
.py-acc-ic-plus,.py-acc-ic-dash{display:block}
button[aria-expanded="true"] .py-acc-ic-plus{display:none}
button[aria-expanded="false"] .py-acc-ic-dash{display:none}
/* Teachings "Read More"/"Close" affordance — same swap logic as the plus/dash icons above, re-presented as a labeled control (Fix 3b). */
.py-rm-closed,.py-rm-open{display:inline-flex;align-items:center;gap:6px}
button[aria-expanded="true"] .py-rm-closed{display:none}
button[aria-expanded="false"] .py-rm-open{display:none}
.py-teach-row{transition:border-color 150ms ease}
.py-teach-row:hover{border-color:var(--tgn-parchment-300) !important}

/* CLOSING CTA — consolidated onto the canonical implementation in
   mission-disciple.html. The avatar ring itself is shared CSS: .ring and
   .tgn-av live in assets/css/tgn-avatar.css, linked above. */
.wrap{max-width:var(--tgn-container-max);margin:0 auto;padding:0 clamp(24px,2.8vw,40px)}
/* Top stop carries the white ground of the Teachings section, the background of the section
   directly above, so the band meets it with no neutral seam. */
.close{background:linear-gradient(to bottom,var(--tgn-white) 50%,var(--tgn-ink) 50%);padding-top:clamp(56px,6vw,80px)}
.ctacard{background:var(--tgn-brick);border-radius:var(--tgn-radius-card);padding:clamp(48px,5vw,72px);text-align:center;color:var(--tgn-parchment-50)}
.ctacard h2{font-family:var(--font-heading);font-size:clamp(28px,3vw,42px);font-weight:600;letter-spacing:-.02em;line-height:1.15}
.ctacard p{margin-top:16px;max-width:52ch;margin-left:auto;margin-right:auto;opacity:.9}
/* mission-disciple.html holds the base button declarations in a bare .btn
   rule. A bare .btn cannot be ported here: this page carries the soft-launch
   banner, whose own .btn is a plain text link, and the bare rule drops its
   line-height from 25.375px to 14.5px, shortening the banner by 3.6px at
   1280 and 9.4px at 360. Same declarations, scoped to the card instead. */
.ctacard .btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-body);font-size:16px;font-weight:600;line-height:1;padding:13px 24px;border-radius:var(--tgn-radius-pill);cursor:pointer;border:1.5px solid transparent;margin-top:28px}
.btn--dark{background:var(--tgn-parchment-50);color:var(--tgn-ink)}


/* hover states, page-local */
.py-h1:hover{background:var(--tgn-cta-surface-hover) !important;color:var(--tgn-cta-ink-hover) !important}
/* py-h1 also carries the hero's primary CTA (stays --tgn-cta resting, amber hover — unchanged).
   The six Levels-section buttons moved to their own class below so their amber-resting/cta-hover
   pair doesn't invert that shared rule out from under the hero button (Fix 2b). */
.py-amber-btn:hover{background:var(--tgn-cta) !important;color:var(--tgn-ink) !important}
.py-h2:hover{text-decoration:underline !important;color:var(--tgn-brick) !important}
.py-h3:hover{text-decoration:underline !important}
.py-h4:hover{text-decoration:underline !important}
/* Footer hover states, copied verbatim from index.html so both chassis blocks
   render identically. The closing CTA no longer contributes here: it moved to
   the shared .close/.ctacard implementation. */
.hm-h10:hover{color:var(--tgn-parchment-50) !important;border-bottom:1px solid var(--tgn-brick) !important}