/* Daily Journey. Scoped styles deliberately outrank the site's global element rules.
   Colors come from the site's brand tokens; each
   theme only chooses which warm or cool shades light the window panes. No Tailwind, no icon
   font: icons are inline SVG, so nothing depends on the page's font subset. */
.jd {
    /* Site brand tokens only. Text is navy, as on Bible and dashboard pages, not near-black. */
    --jd-ink: var(--text-primary, #1f2937);
    --jd-heading: var(--brand-navy-dark, #1e2b69);
    /* Darker than --text-secondary, which is 4.06:1 on this page background and fails AA. */
    --jd-muted: #475569;
    --jd-accent: var(--brand-navy, #2b3a7f);
    --jd-accent-dark: var(--brand-navy-dark, #1e2b69);
    --jd-accent-soft: var(--brand-navy-subtle-bg, #eef2ff);
    /* Eyebrow on dark panels, as on the Bible page CTA panels. */
    --jd-on-dark-accent: var(--brand-orange, #fa8334);
    /* The same dusk gradient and shadow as the Bible chapter/verse CTA panels. */
    --jd-hero: linear-gradient(135deg, rgba(17, 25, 44, .95) 0%, rgba(43, 58, 127, .92) 55%, rgba(250, 131, 52, .85) 100%);
    --jd-hero-shadow: 0 20px 40px rgba(17, 25, 44, .2);
    --jd-line: var(--border-subtle, #e2e8f0);
    --jd-panel: rgba(255, 255, 255, .96);
    --jd-radius: 16px;
    --jd-shadow: 0 8px 24px rgba(17, 25, 44, .08);
    --jd-sans: var(--font-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif);
    --jd-display: var(--font-display, 'Playfair Display', Georgia, serif);
    --jd-scripture: Georgia, 'Times New Roman', serif;
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px 16px 56px;  /* Room above the shared breadcrumb partial. */
    color: var(--jd-ink);
    font-family: var(--jd-sans);
    font-size: 17px;
    line-height: 1.65;
    text-align: left;
}
/* Window pane colors by theme. Every shade is from the navy / gold / ember family. */
.jd[data-jd-theme="prayer-habit"], .jd [data-jd-theme="prayer-habit"] { --jd-p1: #f59e4b; --jd-p2: #f7c76a; --jd-p3: #e07a45; --jd-p4: #fbe3a3; }
.jd[data-jd-theme="read-mark"], .jd [data-jd-theme="read-mark"] { --jd-p1: #d9a441; --jd-p2: #d4764d; --jd-p3: #ecc977; --jd-p4: #bd8c3d; }
.jd[data-jd-theme="practice-gratitude"], .jd [data-jd-theme="practice-gratitude"] { --jd-p1: #6f8fe8; --jd-p2: #a9c1f7; --jd-p3: #e8c068; --jd-p4: #5d7fe0; }

.jd *, .jd *::before, .jd *::after { box-sizing: border-box; }
.jd [hidden] { display: none !important; }
.jd h1, .jd h2, .jd h3, .jd h4 {
    font-family: var(--jd-display);
    font-weight: 500;
    letter-spacing: -.02em;
    line-height: 1.18;
    text-transform: none;
    color: var(--jd-heading);
    margin: 0;
}
.jd h1 { font-size: clamp(30px, 6vw, 48px); }
.jd h2 { font-size: clamp(24px, 4.2vw, 32px); margin-bottom: 12px; }
.jd h3 { font-size: 20px; margin: 22px 0 8px; }
.jd h4 { font-size: 16px; font-family: var(--jd-sans); font-weight: 700; letter-spacing: 0; margin: 14px 0 4px; }
.jd p, .jd li, .jd dt, .jd dd, .jd label, .jd legend, .jd blockquote, .jd button, .jd select, .jd textarea, .jd figcaption {
    font-family: var(--jd-sans);
}
.jd p { margin: 0 0 14px; }
.jd a { color: var(--jd-accent); }
.jd a:hover { text-decoration: underline; text-underline-offset: 4px; }
.jd :focus-visible { outline: 3px solid var(--jd-accent); outline-offset: 3px; }
.jd .jd-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.jd-kicker { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 10px; color: var(--jd-accent); }
.jd-lead { font-size: 19px; max-width: 640px; }
.jd-meta { font-size: 14px; color: var(--jd-muted); }
.jd-section { margin-top: 44px; }
.jd-section-intro { color: var(--jd-muted); max-width: 640px; }
.jd-panel { background: var(--jd-panel); border: 1px solid var(--jd-line); border-radius: var(--jd-radius); padding: 24px 20px; box-shadow: var(--jd-shadow); }
.jd-footnote { margin-top: 32px; font-size: 13px; color: var(--jd-muted); }
.jd-draft { margin: 0 0 16px; padding: 10px 14px; border-left: 4px solid var(--accent-wisdom, #b45309); background: var(--accent-wisdom-bg, #fffbeb); color: var(--accent-wisdom, #b45309); font-size: 14px; border-radius: 4px; }
.jd-draft-tag { font-size: 12px; color: var(--accent-wisdom, #b45309); margin: 6px 0 0; }

/* Buttons */
.jd .jd-button, .jd .jd-chip, .jd .jd-amen, .jd .jd-back, .jd .jd-restart {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 10px 20px; border-radius: .75rem; border: 1px solid transparent;
    font-size: 15px; font-weight: 600; line-height: 1.3; cursor: pointer; text-decoration: none !important;
    background: var(--jd-accent); color: #fff !important; text-transform: none; letter-spacing: 0;
    box-shadow: none; transform: none; margin-bottom: 0;
}
.jd .jd-button:hover { background: var(--brand-navy-light, #4b5ba3); }
/* Secondary actions use the soft navy tint of dashboard and verse-page actions, not outlines. */
.jd .jd-button--outline { background: var(--jd-accent-soft); color: var(--jd-accent) !important; border-color: transparent; }
.jd .jd-button--outline:hover { background: #dbe3ff; }
/* The main action. Navy on light pages; white on dusk panels (like the site's hero buttons). */
.jd .jd-button--gold { background: var(--jd-accent); color: #fff !important; }
.jd .jd-button--gold:hover { background: var(--brand-navy-light, #4b5ba3); }
.jd :is(.jd-hero, .jd-cta, .jd-complete, .jd-dayhead, .jd-guide-head) .jd-button--gold,
.jd :is(.jd-hero, .jd-cta, .jd-complete) .jd-button:not(.jd-button--ghost) { background: #fff; color: var(--jd-accent) !important; }
.jd :is(.jd-hero, .jd-cta, .jd-complete, .jd-dayhead, .jd-guide-head) .jd-button--gold:hover,
.jd :is(.jd-hero, .jd-cta, .jd-complete) .jd-button:not(.jd-button--ghost):hover { background: #f8fafc; }
.jd .jd-button--ghost { background: rgba(255, 255, 255, .15); color: #fff !important; border-color: rgba(255, 255, 255, .3); }
.jd .jd-button--ghost:hover { background: rgba(255, 255, 255, .24); }
.jd-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

/* Hub */
.jd-hero, .jd-cta {
    background: var(--jd-hero); box-shadow: var(--jd-hero-shadow);
    color: #fff; border-radius: 1.25rem; padding: 40px 22px;
}
.jd .jd-hero h1, .jd .jd-cta h2 { color: #fff; }
.jd-hero .jd-kicker, .jd-cta .jd-kicker { color: var(--jd-on-dark-accent); }
.jd-hero .jd-lead { color: rgba(255, 255, 255, .92); }
.jd-cta h2, .jd-cta p { color: #fff; }
.jd-cta p { max-width: 640px; }
.jd-cards { display: grid; gap: 20px; grid-template-columns: 1fr; margin-top: 20px; }
.jd-card { background: var(--jd-panel); border: 1px solid var(--jd-line); border-radius: var(--jd-radius); overflow: hidden; box-shadow: var(--jd-shadow); display: flex; flex-direction: column; }
.jd-card img { display: block; width: 100%; height: auto; aspect-ratio: 640 / 336; object-fit: cover; }
.jd-card-body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.jd-card h3 { margin: 0 0 8px; }
.jd-card h3 a { color: var(--jd-heading); text-decoration: none; }
.jd-card-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 8px; }
.jd-how { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.jd-how li { display: flex; flex-direction: column; padding: 14px 16px; background: var(--jd-panel); border: 1px solid var(--jd-line); border-radius: 12px; }
.jd-how strong { font-family: var(--jd-display); font-size: 18px; font-weight: 500; color: var(--jd-heading); }
.jd-how span { color: var(--jd-muted); }

/* Guide */
/* Photo headers sit under the same dusk gradient as every other hero, not a near-black overlay. */
.jd-guide-head { position: relative; border-radius: 1.25rem; overflow: hidden; background: var(--brand-navy, #2b3a7f); box-shadow: var(--jd-hero-shadow); }
.jd-guide-head img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.jd-guide-title { position: relative; padding: 64px 24px 32px; color: #fff; background: var(--jd-hero); }
.jd .jd-guide-title h1 { color: #fff; }
.jd-guide-title .jd-kicker { color: var(--jd-on-dark-accent); }
.jd-guide-title .jd-lead { margin: 10px 0 0; font-size: 17px; }
/* Shared milestone page: a celebratory hero, the steps they read, and ways deeper into the site. */
.jd .jd-milestone-cheer { margin: 14px 0 0; max-width: 640px; color: #fff; font-size: 19px; font-weight: 600; line-height: 1.5; }
.jd .jd-milestone-week { margin: 6px 0 4px; font-size: 20px; color: var(--jd-heading); }
.jd .jd-milestone-guide { margin: 14px 0 0; }
/* The shared daily prayer box sits on a dark gradient; Journey heading colours must not turn it navy. */
.jd .jd-milestone-prayer h3 { color: #fff; }
.jd .jd-milestone-guide a { color: #fff; font-weight: 600; }
.jd-explore { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.jd-explore a { display: grid; gap: 4px; height: 100%; padding: 18px; border: 1px solid var(--jd-line); border-radius: 14px; background: var(--jd-panel); color: var(--jd-heading); text-decoration: none; border-top: 4px solid var(--jd-accent); transition: transform .2s; }
.jd-explore a:hover, .jd-explore a:focus-visible { transform: translateY(-2px); border-color: var(--jd-accent); box-shadow: 0 6px 18px rgba(43, 58, 127, .12); }
.jd-explore strong { font-size: 17px; color: var(--jd-accent); }
.jd-explore a > span:last-child { color: var(--jd-muted); font-size: 15px; }
.jd .jd-milestone-stats { display: inline-block; margin: 16px 0 0; padding: 6px 14px; border-radius: 999px;
    background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .3); color: #fff; font-size: 15px; font-weight: 600; }
.jd-answer { font-size: 19px; line-height: 1.6; max-width: 700px; }
.jd-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.jd-facts li { padding: 6px 12px; border-radius: 999px; background: var(--brand-navy-subtle-bg, #eef2ff); color: var(--jd-accent-dark); font-size: 14px; font-weight: 600; }
.jd-week { margin-top: 12px; padding: 18px 20px; border: 1px solid var(--jd-line); border-radius: 12px; background: var(--jd-panel); }
.jd-week summary { cursor: pointer; min-height: 32px; font-weight: 600; color: var(--jd-accent-dark); }
.jd-week[open] summary { margin-bottom: 12px; }
.jd-detail-panel > summary { min-height: 44px; cursor: pointer; font-family: var(--jd-display); font-size: 22px; line-height: 1.4; color: var(--jd-accent-dark); }
.jd-detail-panel[open] > summary { margin-bottom: 18px; }
.jd-week > p { color: var(--jd-muted); max-width: 680px; }
.jd-outline { list-style: decimal; padding-left: 28px; margin: 12px 0 0; display: grid; gap: 10px; }
.jd-outline li { padding-left: 4px; }
.jd-outline-title { font-weight: 700; display: block; color: var(--jd-accent); }
.jd-outline-purpose { display: block; color: var(--jd-muted); font-size: 15px; }
.jd-flag { display: block; margin-top: 4px; font-size: 13px; color: var(--accent-wisdom, #b45309); }
.jd-faq { margin: 12px 0 0; }
.jd-faq > div { padding: 16px 0; border-top: 1px solid var(--jd-line); }
.jd-faq dt { font-weight: 700; margin-bottom: 4px; color: var(--jd-heading); }
.jd-faq dd { margin: 0; color: var(--jd-muted); }
.jd-adapt { margin: 12px 0 0; display: grid; gap: 12px; }
.jd-adapt dt { font-weight: 700; color: var(--jd-heading); }
.jd-adapt dd { margin: 0; color: var(--jd-muted); }
.jd-text-link { font-size: 15px; }
.jd-question { font-weight: 600; padding: 12px 16px; background: var(--brand-navy-subtle-bg, #eef2ff); border-radius: 10px; color: var(--jd-accent-dark); }
.jd-prayer { font-size: 18px; line-height: 1.7; padding: 4px 0 4px 18px; border-left: 3px solid var(--jd-accent); color: var(--jd-heading); }

/* Scripture: the Bible verse page's quote block (navy left rule, soft navy wash, italic serif). */
.jd-scripture {
    margin: 8px 0 16px; padding: 22px 24px; border-radius: 1rem; border-left: 5px solid var(--jd-accent);
    background: linear-gradient(135deg, rgba(43, 58, 127, .08) 0%, rgba(17, 25, 44, .04) 100%);
    box-shadow: 0 1px 2px rgba(17, 25, 44, .05);
}
.jd-scripture blockquote { margin: 0 0 12px; font-family: var(--jd-scripture); font-style: italic; font-size: 20px; line-height: 1.65; color: var(--jd-heading); }
.jd-scripture blockquote .jd-verse { font-family: var(--jd-scripture); }
.jd-scripture figcaption { font-size: 14px; font-weight: 600; letter-spacing: .02em; margin-bottom: 6px; }
.jd-ref { color: var(--jd-accent); }
.jd-edition { color: var(--jd-muted); font-weight: 400; margin-left: 8px; }
.jd-scripture sup { font-family: var(--jd-sans); font-style: normal; font-size: 11px; font-weight: 700; color: var(--jd-accent); margin-right: 2px; }
.jd-note { color: var(--jd-muted); font-size: 15px; }

/* Daily screen (the sample) */
.jd-day { max-width: 1100px; }
.jd-reading-main { min-width: 0; }
.jd-day:not(.jd-js) .jd-js-only { display: none !important; }
.jd-dayhead { position: relative; border-radius: 1.25rem; overflow: hidden; background: var(--brand-navy, #2b3a7f); color: #fff; box-shadow: var(--jd-hero-shadow); }
.jd-dayhead img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.jd-dayhead-body { position: relative; padding: 26px 20px 22px; background: var(--jd-hero); }
.jd .jd-dayhead h1 { color: #fff; }
.jd-dayhead .jd-kicker { color: var(--jd-on-dark-accent); }
.jd-controls { display: grid; gap: 14px; margin-top: 18px; }
.jd-seg { border: 0; padding: 0; margin: 0; min-width: 0; }
.jd .jd-seg legend, .jd .jd-field label { display: block; float: none; font-size: 13px; font-weight: 600; margin: 0 0 6px; padding: 0; color: rgba(255, 255, 255, .92); }
.jd .jd-seg label { display: inline-block; margin: 0 6px 0 0; position: relative; }
.jd-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.jd-seg span { display: inline-flex; align-items: center; justify-content: center; min-width: 72px; min-height: 44px; padding: 8px 14px; border: 1px solid rgba(255, 255, 255, .3); border-radius: .75rem; background: rgba(255, 255, 255, .15); color: #fff; font-weight: 600; cursor: pointer; }
.jd-seg input:checked + span { background: #fff; border-color: #fff; color: var(--jd-accent); }
.jd-seg input:focus-visible + span { outline: 3px solid #fff; outline-offset: 2px; }
.jd .jd-field select { width: 100%; max-width: 320px; min-height: 44px; border-radius: .75rem; border: 1px solid rgba(255, 255, 255, .3); background: #fff; color: var(--jd-heading); padding: 8px 12px; font-size: 16px; margin: 0; }

/* Stained-glass window: 28 panes, four rows of seven, drawn in CSS. */
/* Brand navy, like the site's stat cards; the window brightens toward dusk as steps are finished. */
.jd-window { margin-top: 18px; border-radius: var(--jd-radius); padding: 16px; color: #fff; background: linear-gradient(135deg, var(--brand-navy, #2b3a7f) 0%, var(--brand-navy-light, #4b5ba3) 100%); align-self: start; box-shadow: 0 4px 6px -1px rgba(43, 58, 127, .2); }
.jd-window summary { cursor: pointer; font-weight: 600; min-height: 44px; }
.jd-window summary:focus-visible { outline-color: #fff; }
.jd-window .jd-window-count { display: block; margin: 2px 0 0; text-align: left; font-size: 14px; font-weight: 400; color: #fff; }
.jd-window-details[open] summary { margin-bottom: 16px; }
.jd-window[data-stage="2"] { background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-navy-light) 70%, #b86a3a 100%); }
.jd-window[data-stage="3"] { background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-navy-light) 45%, #c9763f 100%); }
.jd-window[data-stage="4"] { background: linear-gradient(135deg, var(--brand-navy) 0%, #c9763f 60%, var(--brand-orange, #fa8334) 100%); }
.jd-window h2 { font-size: 20px; margin-bottom: 12px; color: #fff; }
.jd-panes { list-style: none; margin: 0 auto; padding: 5px; max-width: 420px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; background: var(--brand-navy-dark, #1e2b69); border-radius: 22px 22px 8px 8px; }
.jd-pane { position: relative; min-width: 0; padding: 0; aspect-ratio: 1; border-radius: 4px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .28); overflow: hidden; margin: 0; }
.jd-pane:nth-child(4n+1) { --jd-pane-color: var(--jd-p1); }
.jd-pane:nth-child(4n+2) { --jd-pane-color: var(--jd-p2); }
.jd-pane:nth-child(4n+3) { --jd-pane-color: var(--jd-p3); }
.jd-pane:nth-child(4n+4) { --jd-pane-color: var(--jd-p4); }
.jd-pane.is-locked { background: rgba(255, 255, 255, .04); border-style: dashed; }
.jd-pane-glass { position: absolute; inset: 0; display: grid; place-items: center; background: var(--jd-pane-color); opacity: 0; transform: scale(.8); transition: opacity .5s ease, transform .5s ease; }
.jd-pane.is-lit .jd-pane-glass { opacity: 1; transform: none; }
.jd-pane-glass svg { width: 62%; height: 62%; fill: none; stroke: var(--brand-surface-dark, #11192c); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.jd-pane-n { position: absolute; right: 3px; bottom: 1px; font-size: 10px; font-weight: 700; line-height: 1; color: rgba(255, 255, 255, .75); }
.jd-pane.is-lit .jd-pane-n { color: var(--brand-surface-dark, #11192c); }  /* AA on ember glass */
.jd-window-count { margin: 14px 0 2px; font-weight: 700; text-align: center; }
.jd .jd-window-note { margin: 14px 0 0; text-align: center; font-size: 14px; color: rgba(255, 255, 255, .85); }

/* Step */
.jd-step { margin-top: 24px; }
.jd-step-head { margin-bottom: 8px; }
.jd-step-count { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--jd-accent); margin: 0 0 6px; }
.jd-step-head h2 { margin-bottom: 8px; }
.jd-step-head h2:focus { outline: none; }
.jd-step-head h2, .jd-complete h2 { scroll-margin-top: 100px; }
.jd-intro-line { color: var(--jd-muted); font-size: 18px; }
.jd-block { background: var(--jd-panel); border: 1px solid var(--jd-line); border-radius: var(--jd-radius); padding: 6px 18px 12px; margin-top: 14px; box-shadow: var(--jd-shadow); }
.jd-block > h3 { margin-top: 14px; font-size: 22px; }
.jd-context { background: #f8fafc; border-radius: 10px; padding: 4px 14px 2px; }
.jd-block ul { padding-left: 22px; margin: 0 0 14px; }
.jd-block li { margin-bottom: 6px; }
.jd-trad-note { display: none; margin: 14px 0; padding: 12px 16px; border: 1px solid var(--jd-line); border-left: 4px solid var(--jd-accent); border-radius: 10px; background: var(--brand-navy-subtle-bg, #eef2ff); }
.jd-trad-note h4 { margin-top: 0; }
.jd-trad-note p { margin-bottom: 4px; }
.jd .jd-amen { background: var(--jd-accent-soft); color: var(--jd-accent) !important; border-color: transparent; margin-top: 6px; }
.jd .jd-amen[aria-pressed="true"] { background: var(--jd-accent); color: #fff !important; }
.jd .jd-field-label { display: block; font-size: 14px; font-weight: 600; margin: 12px 0 8px; color: var(--jd-heading); }
.jd-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.jd .jd-chip { min-height: 44px; padding: 8px 16px; background: var(--jd-accent-soft); color: var(--jd-accent) !important; border: 1px solid transparent; border-radius: 999px; }
.jd .jd-chip[aria-pressed="true"] { background: var(--jd-accent); color: #fff !important; border-color: var(--jd-accent); }
.jd textarea.jd-note { display: block; width: 100%; min-height: 96px; border: 1px solid var(--jd-line); border-radius: 10px; padding: 10px 12px; font-size: 16px; line-height: 1.5; color: var(--jd-ink); background: #fff; resize: vertical; }
.jd-help { font-size: 13px; color: var(--jd-muted); margin: 6px 0 14px; }
.jd-done { margin-top: 16px; padding: 14px 16px; border-radius: 12px; background: var(--jd-accent-soft); border-left: 4px solid var(--jd-accent); }
.jd-done-title { font-weight: 700; margin-bottom: 4px; }
.jd .jd-back, .jd .jd-restart { background: transparent; color: var(--jd-muted) !important; border: 0; min-height: 44px; padding: 8px 4px; margin-top: 10px; font-weight: 500; text-decoration: underline !important; }
.jd-complete { margin-top: 24px; padding: 28px 20px; border-radius: 1.25rem; background: var(--jd-hero); box-shadow: var(--jd-hero-shadow); color: #fff; }
.jd-complete h2, .jd-complete p { color: #fff; }
.jd-complete h2:focus { outline: none; }
.jd .jd-complete .jd-restart { color: rgba(255, 255, 255, .85) !important; }

/* Time and tradition switches are pure CSS keyed on the root's data attributes. */
.jd-day[data-pace="5"] .jd-only-10up, .jd-day[data-pace="5"] .jd-only-15, .jd-day[data-pace="10"] .jd-only-15 { display: none; }
.jd-day[data-pace="10"] .jd-only-5, .jd-day[data-pace="15"] .jd-only-5 { display: none; }
.jd-day[data-tradition="baptist"] .jd-trad-note[data-for="baptist"],
.jd-day[data-tradition="catholic"] .jd-trad-note[data-for="catholic"],
.jd-day[data-tradition="lutheran"] .jd-trad-note[data-for="lutheran"],
.jd-day[data-tradition="methodist"] .jd-trad-note[data-for="methodist"],
.jd-day[data-tradition="nondenominational"] .jd-trad-note[data-for="nondenominational"],
.jd-day[data-tradition="orthodox"] .jd-trad-note[data-for="orthodox"],
.jd-day[data-tradition="pentecostal"] .jd-trad-note[data-for="pentecostal"],
.jd-day[data-tradition="reformed"] .jd-trad-note[data-for="reformed"] { display: block; }
/* Without JavaScript the controls are hidden and the 10-minute, broad version is shown. */

@media (min-width: 720px) {
    .jd { padding: 28px 24px 64px; }
    .jd-hero { padding: 56px 44px; }
    .jd-cards { grid-template-columns: repeat(3, 1fr); }
    .jd-how { grid-template-columns: repeat(5, 1fr); }
    .jd-guide-title { padding: 90px 36px 30px; }
    .jd-guide-head img { max-height: 380px; }
    .jd-dayhead-body { padding: 36px 36px 28px; }
    .jd-controls { grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 28px; }
    .jd-panel { padding: 30px 32px; }
    .jd-block { padding: 8px 28px 16px; }
    .jd-cta { padding: 44px; }
}
@media (min-width: 960px) {
    .jd-reading-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; column-gap: 28px; align-items: start; }
    .jd-reading-main { grid-column: 1; grid-row: 1; }
    .jd-window { grid-column: 2; grid-row: 1; position: sticky; top: 100px; }
}

/* Reduced motion: every change is instant. Progress is still shown by the check and the text. */
@media (prefers-reduced-motion: reduce) {
    .jd *, .jd *::before, .jd *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}