/*
 * Series day posts (day.php): the series bar, Today's path, the finish card,
 * prev/next, the series footer, and the block classes publishers use
 * (ds-section-label, ds-pick, ds-check, ds-practice).
 *
 * Colours, fonts and radii come from the DS token spine through local
 * --dsd-* variables (literal fallbacks only, per design-system/core/principles.md).
 * :is(#dark-mode-content, body) gives the content rules ID-level specificity,
 * as DS Components does, so they beat the dark-mode layout's p/li/a rules;
 * sizes that the site's Global CSS forces on <p> carry !important.
 *
 * Doc: design-system/ds/components/ds-series.md → "Day posts"
 */

:root {
    --dsd-base: var(--ds-base, #121212);
    --dsd-band: var(--ds-band, #181A1E);
    --dsd-card: var(--ds-card, #23262D);
    --dsd-hover: var(--ds-hover, #2C2F35);
    --dsd-border: var(--ds-border, rgba(255,255,255,0.11));
    --dsd-border-emph: var(--ds-border-emph, rgba(255,255,255,0.16));
    --dsd-t1: var(--ds-text-1, #F2F2F2);
    --dsd-t2: var(--ds-text-2, #E0E0E0);
    --dsd-t3: var(--ds-text-3, #A0A0A0);
    --dsd-t4: var(--ds-text-4, #6B6B6B);
    --dsd-teal-200: var(--ds-tw-teal-200, #99F6E4);
    --dsd-teal-300: var(--ds-tw-teal-300, #5EEAD4);
    --dsd-teal-400: var(--ds-tw-teal-400, #2DD4BF);
    --dsd-teal-950: var(--ds-tw-teal-950, #042F2E);
    --dsd-teal-wash: color-mix(in srgb, var(--dsd-teal-400) 12%, transparent);
    --dsd-ui: var(--ds-ui-font, 'neue-haas-grotesk-text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
    --dsd-body: var(--ds-body-font, 'source-serif-4', Georgia, 'Times New Roman', serif);
    --dsd-serif: var(--ds-heading-serif, 'GT Sectra', Georgia, 'Times New Roman', serif);
    --dsd-radius: var(--ds-radius, 9px);
    --dsd-radius-card: var(--ds-radius-card, 16px);
    --dsd-ease: cubic-bezier(.2, .8, .2, 1);
}

.dsd, .dsd *, .dsd *::before, .dsd *::after { box-sizing: border-box; }
:is(#dark-mode-content, body) .dsd { font-family: var(--dsd-ui); color: var(--dsd-t2); }
:is(#dark-mode-content, body) .dsd p { margin: 0 !important; }
:is(#dark-mode-content, body) .dsd a { text-decoration: none !important; }
.dsd .dsd-i { width: 18px; height: 18px; flex: none; }
.dsd [hidden] { display: none !important; }
.dsd :focus-visible { outline: 2px solid var(--dsd-teal-300); outline-offset: 2px; }

:is(#dark-mode-content, body) .dsd .dsd-eyebrow {
    font-size: 12px !important;
    line-height: 16px !important;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--dsd-teal-300);
}

/* buttons */
:is(#dark-mode-content, body) .dsd .dsd-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 20px;
    border-radius: 999px;
    border: 1px solid transparent;
    font: 700 15px/1 var(--dsd-ui);
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}
:is(#dark-mode-content, body) .dsd .dsd-btn--primary { background: var(--dsd-teal-400); color: var(--dsd-teal-950) !important; }
:is(#dark-mode-content, body) .dsd .dsd-btn--primary:hover { background: var(--dsd-teal-300); }
:is(#dark-mode-content, body) .dsd .dsd-btn--ghost { background: transparent; color: var(--dsd-t1) !important; border-color: var(--dsd-border-emph); font-weight: 500; }
:is(#dark-mode-content, body) .dsd .dsd-btn--ghost:hover { border-color: var(--dsd-teal-400); }

/* ------------------------------------------------------------ crumb */
:is(#dark-mode-content, body) .dsd-crumb {
    margin: 0 0 14px !important;
    font: 400 14px/20px var(--dsd-ui) !important;
    color: var(--dsd-t3);
}
:is(#dark-mode-content, body) .dsd-crumb a {
    color: var(--dsd-teal-300) !important;
    font-weight: 500;
    text-decoration: none !important;
}
:is(#dark-mode-content, body) .dsd-crumb a:hover { color: var(--dsd-teal-200) !important; }

/* ---------------------------------------------------- Today's path */
.dsd-top { margin: 0 0 44px; }
.dsd-path {
    display: grid;
    grid-template-columns: repeat(min(var(--dsd-n, 4), 4), minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 18px;
}
:is(#dark-mode-content, body) .dsd-path__item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid var(--dsd-border);
    border-radius: 12px;
    background: var(--dsd-band);
    transition: border-color .15s ease;
}
:is(#dark-mode-content, body) .dsd-path__item:hover { border-color: var(--dsd-teal-400); }
.dsd-path__n { font-size: 11px; line-height: 14px; font-weight: 500; letter-spacing: 0.1em; color: var(--dsd-teal-300); }
.dsd-path__t { font-size: 14px; line-height: 18px; font-weight: 500; color: var(--dsd-t1); }

:is(#dark-mode-content, body) .dsd-draws {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font: 400 13px/18px var(--dsd-ui) !important;
    color: var(--dsd-t3);
}
:is(#dark-mode-content, body) .dsd-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--dsd-card);
    border: 1px solid var(--dsd-border);
    color: var(--dsd-t2) !important;
    font-size: 13px;
}
:is(#dark-mode-content, body) .dsd-chip:hover { background: var(--dsd-hover); }
.dsd-chip .dsd-i { width: 14px; height: 14px; }

/* ------------------------------------------- finish card + up next */
.dsd-end { margin-top: 48px; }
.dsd-finish {
    padding: 24px;
    border-radius: 20px;
    border: 1px solid var(--dsd-border-emph);
    background: var(--dsd-band);
}
.dsd-finish.is-done { border-color: color-mix(in srgb, var(--dsd-teal-400) 40%, transparent); background: color-mix(in srgb, var(--dsd-teal-400) 6%, var(--dsd-band)); }
.dsd-finish__ask { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
:is(#dark-mode-content, body) .dsd-finish__q { font: 700 18px/24px var(--dsd-ui) !important; color: var(--dsd-t1); }
.dsd-finish .dsd-btn .dsd-i { stroke-width: 2.6; }
.dsd-finish__done { display: flex; flex-direction: column; gap: 18px; }
:is(#dark-mode-content, body) .dsd-finish__head { display: flex; align-items: center; gap: 12px; font: 700 18px/24px var(--dsd-ui) !important; color: var(--dsd-t1); }
.dsd-tick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: 50%;
    background: var(--dsd-teal-400);
    color: var(--dsd-teal-950);
}
.dsd-tick .dsd-i { stroke-width: 2.8; }
:is(#dark-mode-content, body) .dsd .dsd-undo {
    margin-left: auto;
    padding: 8px;
    background: none;
    border: 0;
    color: var(--dsd-t3);
    font: 400 13px/1 var(--dsd-ui);
    text-decoration: underline;
    cursor: pointer;
}
.dsd-finish__last { display: flex; flex-wrap: wrap; gap: 10px; }

:is(#dark-mode-content, body) .dsd-next {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid var(--dsd-border-emph);
    background: var(--dsd-card);
    color: var(--dsd-t1) !important;
}
:is(#dark-mode-content, body) .dsd-next.is-open:hover { border-color: var(--dsd-teal-400); }
:is(#dark-mode-content, body) .dsd-next:not(.is-open) { background: transparent; border-style: dashed; border-color: var(--dsd-border-emph); cursor: default; }
.dsd-next:not(.is-open) > .dsd-i { display: none; }
.dsd-next:not(.is-open) .dsd-eyebrow { color: var(--dsd-t3); }
.dsd-next:not(.is-open) .dsd-thumb { opacity: .45; filter: grayscale(.6); }
.dsd-next .dsd-thumb { width: 64px; height: 64px; border-radius: 10px; }
.dsd-next__txt { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0; }
.dsd-next__title { font-size: 18px; line-height: 24px; font-weight: 500; color: var(--dsd-t1); }
.dsd-next .dsd-i { width: 22px; height: 22px; }
.dsd-next.is-open .dsd-when { display: none; }

.dsd-thumb {
    position: relative;
    display: block;
    flex: none;
    background: var(--dsd-card) center / cover no-repeat;
}

/* --------------------------------------------------------- prev/next */
.dsd-pn { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
:is(#dark-mode-content, body) .dsd-pn__item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 18px;
    border-radius: 14px;
    border: 1px solid var(--dsd-border);
    background: var(--dsd-band);
    transition: border-color .15s ease;
}
:is(#dark-mode-content, body) .dsd-pn__item[href]:hover { border-color: var(--dsd-teal-400); }
.dsd-pn__next { grid-column: 2; text-align: right; align-items: flex-end; }
.dsd-pn__k { font-size: 12px; line-height: 16px; color: var(--dsd-t3); }
.dsd-pn__t { font-size: 16px; line-height: 22px; font-weight: 500; color: var(--dsd-t1); }
:is(#dark-mode-content, body) .dsd-pn__next:not(.is-open) { background: transparent; border-style: dashed; border-color: var(--dsd-border-emph); cursor: default; }
.dsd-pn__next:not(.is-open) .dsd-pn__t { color: var(--dsd-t3); }
.dsd-pn__next:not(.is-open) .dsd-pn__arrow,
.dsd-pn__next.is-open .dsd-when { display: none; }

/* ------------------------------------------------------ series footer */
/* Full width under the post column, whatever the column's width. */
html:has(.dsd-footer) { overflow-x: clip; }
.dsd-footer {
    width: 100vw;
    margin: 80px 0 0 calc(50% - 50vw);
    background: var(--dsd-band);
    border-top: 1px solid var(--dsd-border);
}
.dsd-footer__wrap { max-width: 1180px; margin: 0 auto; padding: 56px 32px 64px; display: flex; flex-direction: column; gap: 28px; }
.dsd-footer__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; }
.dsd-footer__head > div { display: flex; flex-direction: column; gap: 6px; }
:is(#dark-mode-content, body) .dsd-footer__title { font: 500 34px/1.15 var(--dsd-serif) !important; color: var(--dsd-t1); }
:is(#dark-mode-content, body) .dsd-footer__count { font: 400 15px/20px var(--dsd-ui) !important; color: var(--dsd-t3); }

/* Up to six days in one row on desktop; three across on tablets, two on phones. */
.dsd-cards { display: grid; grid-template-columns: repeat(min(var(--dsd-n, 5), 6), minmax(0, 1fr)); gap: 12px; }
:is(#dark-mode-content, body) .dsd-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid var(--dsd-border);
    background: var(--dsd-base);
    color: var(--dsd-t1) !important;
    transition: border-color .15s ease;
}
:is(#dark-mode-content, body) .dsd-card[href]:hover { border-color: var(--dsd-teal-400); }
:is(#dark-mode-content, body) .dsd-card.is-current { border-color: var(--dsd-teal-400); }
:is(#dark-mode-content, body) .dsd-card:not(.is-open) { border-style: dashed; border-color: var(--dsd-border-emph); cursor: default; }
.dsd-card:not(.is-open) .dsd-thumb { opacity: .4; filter: grayscale(.6); }
.dsd-card .dsd-thumb { width: 100%; aspect-ratio: 16 / 9; }
.dsd-card .dsd-tick { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; display: none; }
.dsd-card .dsd-tick .dsd-i { width: 14px; height: 14px; }
.dsd-card.is-done .dsd-tick { display: inline-flex; }
.dsd-card__txt { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; }
.dsd-card__meta { font-size: 11px; line-height: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dsd-t3); }
.dsd-card.is-current .dsd-card__meta { color: var(--dsd-teal-300); }
.dsd-card__title { font-size: 15px; line-height: 20px; font-weight: 500; color: var(--dsd-t1); }

/* --------------------------------------------------------- series bar */
.dsd-bar {
    position: fixed;
    top: var(--dsd-top, 0px);
    left: 0;
    right: 0;
    z-index: 8000; /* under the audio player (9000), like the TOC bar */
    background: color-mix(in srgb, var(--dsd-band) 96%, transparent);
    border-bottom: 1px solid var(--dsd-border);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    transform: translateY(-110%);
    visibility: hidden;
    transition: transform .3s var(--dsd-ease), visibility 0s linear .3s;
}
.dsd-bar.is-in { transform: none; visibility: visible; transition: transform .3s var(--dsd-ease), visibility 0s; }
@media (prefers-reduced-motion: reduce) { .dsd-bar, .dsd-bar.is-in { transition: none; } }
.dsd-bar__in { max-width: 1180px; margin: 0 auto; padding: 0 32px; height: 60px; display: flex; align-items: center; gap: 20px; }
.dsd-bar a { text-decoration: none !important; }
.dsd-bar__back {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: none;
    height: 40px;
    padding: 0 10px 0 4px;
    margin-left: -4px;
    border-radius: 8px;
    color: var(--dsd-t1) !important;
    font: 500 14px/1 var(--dsd-ui);
    white-space: nowrap;
}
.dsd-bar__back:hover { background: var(--dsd-hover); }
.dsd-segs { flex: 1 1 auto; display: flex; gap: 6px; min-width: 0; margin: 0 !important; padding: 0 !important; list-style: none !important; }
.dsd-segs li { flex: 1 1 0; min-width: 0; margin: 0 !important; padding: 0 !important; list-style: none !important; }
.dsd-segs li::marker { content: none; }
.dsd-segs li { container-type: inline-size; }
/* Too narrow for a readable title: just the number and its state. */
@container (max-width: 120px) { .dsd-seg__t { display: none; } }
/* The day being read gets room for its whole title; the rest shrink. */
.dsd-segs li:has(.is-current) { flex-grow: 2.4; }
.dsd-seg {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid var(--dsd-border);
    background: transparent;
    color: var(--dsd-t2) !important;
    font: 400 12px/1 var(--dsd-ui);
}
.dsd-seg[href]:hover { background: var(--dsd-hover); }
.dsd-seg.is-current { background: var(--dsd-teal-wash); border-color: var(--dsd-teal-400); color: var(--dsd-t1) !important; }
.dsd-seg:not(.is-open) { border-style: dashed; color: var(--dsd-t4) !important; cursor: default; }
.dsd-seg__n { flex: none; min-width: 12px; text-align: center; font-weight: 700; }
.dsd-seg__t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dsd-seg__done, .dsd-seg__when { margin-left: auto; flex: none; }
.dsd-seg__done { display: none; color: var(--dsd-teal-300); }
.dsd-seg__done .dsd-i { width: 14px; height: 14px; stroke-width: 2.4; }
.dsd-seg.is-done .dsd-seg__done { display: inline-flex; }
.dsd-seg__when { font-size: 11px; white-space: nowrap; }
.dsd-seg.is-open .dsd-seg__when { display: none; }

.dsd-bar__end { display: flex; align-items: center; gap: 6px; margin-left: auto; flex: none; }
.dsd-bar__count {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: 6px;
    padding: 0;
    background: none;
    border: 0;
    color: var(--dsd-t3);
    font: 400 13px/1 var(--dsd-ui);
    white-space: nowrap;
    cursor: default;
}
.dsd-bar__count .dsd-i { display: none; width: 16px; height: 16px; }
.dsd-bar__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 1px solid var(--dsd-border-emph);
    background: var(--dsd-card);
    color: var(--dsd-t1) !important;
}
.dsd-bar__btn[href]:hover { background: var(--dsd-hover); }
.dsd-bar__btn.is-off, .dsd-bar__btn:not([href]) { color: var(--dsd-t4) !important; cursor: default; }
.dsd-bar__progress { height: 2px; background: color-mix(in srgb, var(--dsd-t1) 6%, transparent); }
.dsd-bar__progress span { display: block; height: 2px; width: 0; background: var(--dsd-teal-400); }

/* Tablets and phones: no day segments; "Day 2 of 5" opens them as a list. */
@media (max-width: 960px) {
    .dsd-bar__in { padding: 0 16px; gap: 10px; }
    .dsd-bar__back span { max-width: 38vw; overflow: hidden; text-overflow: ellipsis; }
    .dsd-segs { display: none; }
    .dsd-bar__count { cursor: pointer; color: var(--dsd-t1); font-weight: 500; }
    .dsd-bar__count .dsd-i { display: block; transition: transform .2s ease; }
    .dsd-bar.is-drawer .dsd-bar__count .dsd-i { transform: rotate(180deg); }
    .dsd-bar.is-drawer .dsd-segs {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        padding: 8px 16px 16px !important;
        background: var(--dsd-band);
        border-bottom: 1px solid var(--dsd-border);
        box-shadow: 0 16px 32px color-mix(in srgb, var(--dsd-base) 70%, transparent);
    }
    .dsd-bar.is-drawer .dsd-seg { height: 48px; font-size: 14px; }
    .dsd-footer__wrap { padding: 48px 16px 56px; }
    .dsd-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .dsd-path { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dsd-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dsd-pn { grid-template-columns: minmax(0, 1fr); }
    .dsd-pn__next { grid-column: 1; }
    .dsd-bar__count { margin-right: 0; }
    .dsd-bar__btn { width: 36px; height: 36px; }
}

/* ===================================================================
   Block classes (Advanced → Additional CSS class in the block editor)
   =================================================================== */

/* ds-section-label: Read / Reflect / Act / Keep going. A Paragraph or
   Heading; day.php numbers it ("01") and builds Today's path from them. */
:is(#dark-mode-content, body) .ds-section-label {
    display: flex !important;
    align-items: baseline;
    gap: 0.5em;
    margin: 48px 0 18px !important;
    padding: 18px 0 0 !important;
    border-top: 1px solid var(--dsd-border);
    font: 500 12px/16px var(--dsd-ui) !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: var(--dsd-teal-300) !important;
    scroll-margin-top: 96px;
}
:is(#dark-mode-content, body) .ds-section-label::before { content: none !important; }
.ds-section-label__n::after { content: " ·"; }
:is(#dark-mode-content, body) .ds-section-label:first-child { margin-top: 0 !important; }

/* Section rhythm on series days only (body.ds-series-day). Body text runs
   40px apart (Avada's paragraph margin), so a new section gets more room
   above its rule (72px), the label sits 24px under the rule, and the
   section's H2 hangs 12px under the label: label and heading read as one
   unit. The H2's own 40px top margin (global .ds-blog-content h2) is for
   headings that follow body text, not a label. */
body.ds-series-day #dark-mode-content .ds-section-label {
    margin: 72px 0 20px !important;
    padding-top: 24px !important;
}
body.ds-series-day #dark-mode-content .ds-section-label + :is(h2, h3) {
    margin-top: -8px !important; /* collapses with the label's 20px: 12px */
    margin-bottom: 20px !important;
}
body.ds-series-day #dark-mode-content .dsd-top + .ds-section-label { margin-top: 0 !important; }

/* ds-pick and ds-check: a List readers answer. */
:is(#dark-mode-content, body) :is(ul.ds-pick, ol.ds-pick, .ds-pick > ul, .ds-pick > ol, ul.ds-check, ol.ds-check, .ds-check > ul, .ds-check > ol) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    margin: 0 0 40px !important;
    padding: 0 !important;
    list-style: none !important;
    max-width: none !important;
}
:is(#dark-mode-content, body) :is(ul.ds-pick, ol.ds-pick, .ds-pick > ul, .ds-pick > ol):is(.is-2col, .is-2col > *) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 600px) {
    :is(#dark-mode-content, body) :is(ul.ds-pick, ol.ds-pick, .ds-pick > ul, .ds-pick > ol):is(.is-2col, .is-2col > *) { grid-template-columns: minmax(0, 1fr); }
}
:is(#dark-mode-content, body) :is(.ds-pick, .ds-check) li {
    position: relative;
    box-sizing: border-box;
    margin: 0 !important;
    padding: 12px 14px 12px 44px !important;
    min-height: 44px;
    border-radius: 12px;
    border: 1px solid var(--dsd-border);
    background: var(--dsd-band);
    color: var(--dsd-t3);
    font: 400 14px/1.45 var(--dsd-ui) !important;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
    -webkit-user-select: none;
            user-select: none;
}
:is(#dark-mode-content, body) :is(.ds-pick, .ds-check) li::marker { content: none; }
:is(#dark-mode-content, body) :is(.ds-pick, .ds-check) li:hover { border-color: var(--dsd-border-emph); background: var(--dsd-card); }
:is(#dark-mode-content, body) :is(.ds-pick, .ds-check) li:focus-visible { outline: 2px solid var(--dsd-teal-300); outline-offset: 2px; }
:is(#dark-mode-content, body) :is(.ds-pick, .ds-check) li.is-on { border-color: var(--dsd-teal-400); background: var(--dsd-teal-wash); }
:is(#dark-mode-content, body) :is(.ds-pick, .ds-check) li strong {
    display: block;
    margin-bottom: 2px;
    font: 500 15px/1.35 var(--dsd-ui) !important;
    color: var(--dsd-t1);
}
:is(#dark-mode-content, body) .ds-check li { color: var(--dsd-t1); font-size: 15px !important; }
/* the radio / checkbox */
:is(#dark-mode-content, body) :is(.ds-pick, .ds-check) li::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 13px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--dsd-t4);
    background: transparent;
}
:is(#dark-mode-content, body) .ds-pick li.is-on::before {
    border-color: var(--dsd-teal-400);
    background: radial-gradient(circle, var(--dsd-teal-400) 0 4px, transparent 4.5px);
}
:is(#dark-mode-content, body) .ds-check li::before { border-radius: 5px; top: 12px; width: 20px; height: 20px; }
:is(#dark-mode-content, body) .ds-check li.is-on::before { border-color: var(--dsd-teal-400); background: var(--dsd-teal-400); }
:is(#dark-mode-content, body) .ds-check li.is-on::after {
    content: "";
    position: absolute;
    left: 17px;
    top: 15px;
    width: 14px;
    height: 14px;
    background: var(--dsd-teal-950);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
:is(#dark-mode-content, body) .ds-check__count {
    margin: -28px 0 40px !important;
    font: 500 13px/18px var(--dsd-ui) !important;
    color: var(--dsd-teal-300);
}

/* ds-practice: the Act box. A Group of paragraphs, each starting with a
   bold label ("Morning:"); day.php picks the icon from the label. */
:is(#dark-mode-content, body) .ds-practice {
    margin: 0 0 32px !important;
    padding: 0 !important;
    border: 1px solid var(--dsd-border);
    border-radius: var(--dsd-radius-card);
    background: var(--dsd-band);
    overflow: hidden;
}
:is(#dark-mode-content, body) .ds-practice p {
    position: relative;
    margin: 0 !important;
    padding: 20px 22px 20px 78px !important;
    border-bottom: 1px solid color-mix(in srgb, var(--dsd-t1) 8%, transparent);
    font-family: var(--dsd-body);
    color: var(--dsd-t2);
}
:is(#dark-mode-content, body) .ds-practice p:last-child { border-bottom: 0; }
:is(#dark-mode-content, body) .ds-practice p:not(.ds-practice__row) { padding-left: 22px !important; }
:is(#dark-mode-content, body) .ds-practice p > strong:first-child {
    display: block;
    margin-bottom: 6px;
    font: 500 12px/16px var(--dsd-ui) !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--dsd-t3);
}
:is(#dark-mode-content, body) .ds-practice p > strong:first-child + br { display: none; }
:is(#dark-mode-content, body) .ds-practice__row::before,
:is(#dark-mode-content, body) .ds-practice__row::after {
    content: "";
    position: absolute;
    left: 22px;
    top: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
:is(#dark-mode-content, body) .ds-practice__row::before { background: var(--dsd-teal-wash); }
:is(#dark-mode-content, body) .ds-practice__row::after {
    left: 32px;
    top: 30px;
    width: 20px;
    height: 20px;
    border-radius: 0;
    background: var(--dsd-teal-300);
    -webkit-mask: var(--dsd-practice-icon) center / contain no-repeat;
            mask: var(--dsd-practice-icon) center / contain no-repeat;
}
.ds-practice__row.is-sun { --dsd-practice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E"); }
.ds-practice__row.is-moon { --dsd-practice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z'/%3E%3C/svg%3E"); }
.ds-practice__row.is-clock { --dsd-practice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
/* A list inside the practice box (Day 3's pattern) sits in the row above it. */
:is(#dark-mode-content, body) .ds-practice :is(ul, ol) { margin: -8px 22px 20px 78px !important; color: var(--dsd-t2); }
@media (max-width: 600px) {
    :is(#dark-mode-content, body) .ds-practice__row { padding: 72px 18px 18px !important; }
    :is(#dark-mode-content, body) .ds-practice__row::before { left: 18px; top: 18px; }
    :is(#dark-mode-content, body) .ds-practice__row::after { left: 28px; top: 28px; }
    :is(#dark-mode-content, body) .ds-practice :is(ul, ol) { margin: -8px 18px 18px 18px !important; }
}

/* Keep going (ds-resources) on a day: each linked post's featured image
   instead of the type icon. day.php sets --dsd-thumb on the row. */
:is(#dark-mode-content, body) .ds-resources li[data-dsd-thumb] { --res-chip-size: 3.5rem; --res-text-left: 5.5rem; }
:is(#dark-mode-content, body) .ds-resources li[data-dsd-thumb]::before { background: var(--dsd-card) var(--dsd-thumb) center / cover no-repeat; }
:is(#dark-mode-content, body) .ds-resources li[data-dsd-thumb] a::before { content: none; }
/* Titles in the UI face on series days, like the rest of the day's cards. */
body.ds-series-day #dark-mode-content .ds-resources li a {
    font-family: var(--ds-ui-font) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
}
/* The bigger image makes the row 80px tall. Center title + label in it,
   2px apart: the label still sits over the link's bottom padding (so it
   stays clickable), and that padding is sized to put it right under the
   title however many lines the title takes. */
:is(#dark-mode-content, body) .ds-resources li[data-dsd-thumb] a {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}
:is(#dark-mode-content, body) .ds-resources li[data-dsd-thumb] a::after { margin-top: 2px; }
:is(#dark-mode-content, body) .ds-resources li[data-dsd-thumb]:has(em) a { padding-bottom: 38px !important; }
:is(#dark-mode-content, body) .ds-resources li[data-dsd-thumb] em { margin-top: -36px !important; }

/* ===================================================================
   Post layout meta row (Avada): byline, read time, Listen, Share, Print
   =================================================================== */

/* [ds_byline]: "By" muted and regular (like the read time); the name keeps
   the colour and weight set on the Avada element holding the shortcode. */
:is(#dark-mode-content, body) .ds-byline__by { color: var(--dsd-t3); font-weight: 400; }
:is(#dark-mode-content, body) a.ds-byline__name { color: inherit !important; font-weight: inherit; text-decoration: none !important; }
:is(#dark-mode-content, body) a.ds-byline__name:hover { color: var(--dsd-teal-200) !important; }

/* The row: give its Avada column the class ds-post-meta. On phones the
   byline and read time take the first line and the three actions the
   second, together, instead of Listen squeezing onto line one and Share
   and Print wrapping alone. */
/* 6px: on phones the line break below is a line of its own, so the byline
   and the actions end up 12px apart. !important: Avada sets the gap. */
.ds-post-meta > .fusion-column-wrapper { row-gap: 6px !important; }

/* The actions: Listen leads with a soft teal fill; Share and Print share
   one outlined pill split by a short divider. Overrides the Avada button
   and icon elements' own settings, so it only applies inside ds-post-meta. */
.ds-post-meta a.fusion-button.dsap-launch {
    height: 36px !important;
    margin-right: 12px !important;
    padding: 0 16px 0 14px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--dsd-teal-wash) !important;
    color: var(--dsd-teal-200) !important;
    transition: background-color .15s ease;
}
.ds-post-meta a.fusion-button.dsap-launch:hover { background: color-mix(in srgb, var(--dsd-teal-400) 22%, transparent) !important; }
.ds-post-meta a.fusion-button.dsap-launch .fusion-button-text {
    color: inherit !important;
    font: 500 13px/16px var(--dsd-ui) !important;
}
.ds-post-meta a.fusion-button.dsap-launch i { color: var(--dsd-teal-300) !important; font-size: 14px !important; margin-right: 8px !important; }
.ds-post-meta :is(.dssh-launch, .dspr-launch).fb-icon-element {
    position: relative;
    box-sizing: border-box;
    width: 44px !important;
    height: 36px !important;
    margin: 0 !important;
    border: 1px solid var(--dsd-border-emph) !important;
    background: transparent !important;
    color: var(--dsd-t2) !important;
    font-size: 17px !important;
    line-height: 34px !important;
    text-align: center;
    transition: background-color .15s ease, color .15s ease;
}
.ds-post-meta .dssh-launch.fb-icon-element { border-right: 0 !important; border-radius: 18px 0 0 18px !important; }
.ds-post-meta .dspr-launch.fb-icon-element { border-left: 0 !important; border-radius: 0 18px 18px 0 !important; }
.ds-post-meta .dspr-launch.fb-icon-element::after {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 1px;
    height: 16px;
    background: var(--dsd-border-emph);
}
.ds-post-meta :is(.dssh-launch, .dspr-launch).fb-icon-element:hover {
    background: var(--dsd-hover) !important;
    color: var(--dsd-teal-300) !important;
}
@media (max-width: 640px) {
    .ds-post-meta > .fusion-column-wrapper::after {
        content: "";
        order: 1;
        flex-basis: 100%;
        height: 0;
    }
    .ds-post-meta > .fusion-column-wrapper > :is(div:has(.dsap-launch), .dssh-launch, .dspr-launch) { order: 2; }
}