/* =========================================================================
   urhema_reading_plan.css
   Reading plans: library (/reading-plans), plan overview, and day page.
   Replaced 6 October 2026 with the Reading Plan Template v1.0 pages.

   One idea drives the look: the page is mostly Scripture, and the interface
   stays out of its way. The only signature element is the week map on the
   plan overview, seven marks to a week. A mark's SHAPE says what kind of day
   it is (circle = read, open circle = catch-up, square = gather) and its FILL
   says whether the member has read it. Nothing on any of these pages shows a
   pace, a gap or a missed day.

   Tokens only: every colour, size and space is a --ub-* custom property from
   urhema_tokens.css. No raw colour values in this file.
   ========================================================================= */

/* ---- Shared frame -------------------------------------------------------- */

.rp-page {
    padding-block: var(--ub-space-7);
    display: flex;
    flex-direction: column;
    gap: var(--ub-space-6);
}

.rp-crumb {
    font-family: var(--ub-font-ui);
    font-size: var(--ub-text-sm);
}

    .rp-crumb a {
        color: var(--ub-ink-muted);
        text-decoration: none;
    }

        .rp-crumb a::before {
            content: '\2190\00a0';
        }

        .rp-crumb a:hover {
            color: var(--ub-ink);
        }

.rp-head {
    display: flex;
    flex-direction: column;
    gap: var(--ub-space-3);
    max-width: var(--ub-width-reading);
}

    .rp-head .ub-eyebrow {
        margin: 0;
    }

.rp-title {
    margin: 0;
    font-family: var(--ub-font-heading);
    font-size: var(--ub-text-2xl);
    font-weight: 800;
    line-height: var(--ub-leading-tight);
    letter-spacing: var(--ub-tracking-tight);
    color: var(--ub-ink);
}

.rp-lede {
    margin: 0;
    font-family: var(--ub-font-body);
    font-size: var(--ub-text-md);
    line-height: var(--ub-leading-body);
    color: var(--ub-ink-soft);
}

.rp-section-title {
    margin: 0 0 var(--ub-space-4);
    font-family: var(--ub-font-heading);
    font-size: var(--ub-text-lg);
    font-weight: 700;
    color: var(--ub-ink);
}

.rp-empty {
    margin: 0;
    font-family: var(--ub-font-ui);
    color: var(--ub-ink-muted);
}

.rp-tag {
    display: inline-block;
    margin-left: var(--ub-space-2);
    padding: 0.1rem var(--ub-space-2);
    border: 1px solid var(--ub-line-strong);
    border-radius: var(--ub-radius-pill);
    font-family: var(--ub-font-ui);
    font-size: var(--ub-text-xs);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ub-ink-soft);
}

/* Facts row: what is read, how long, how much a day. A definition list, so a
   screen reader pairs each label with its value. */
.rp-facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ub-space-2) var(--ub-space-5);
    margin: 0;
    font-family: var(--ub-font-ui);
    font-size: var(--ub-text-sm);
}

    .rp-facts div {
        display: flex;
        gap: var(--ub-space-2);
    }

    .rp-facts dt {
        color: var(--ub-ink-muted);
    }

    .rp-facts dd {
        margin: 0;
        font-weight: 600;
        color: var(--ub-ink);
    }

/* ---- Library ------------------------------------------------------------- */

.rp-cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
    gap: var(--ub-space-5);
}

.rp-card {
    display: flex;
    flex-direction: column;
    gap: var(--ub-space-3);
    padding: var(--ub-space-5);
    background: var(--ub-paper-raised);
    border: var(--ub-rule);
    border-radius: var(--ub-radius-md);
}

.rp-card__category {
    margin: 0;
    font-family: var(--ub-font-ui);
    font-size: var(--ub-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--ub-tracking-eyebrow);
    color: var(--ub-accent-700);
}

.rp-card__title {
    margin: 0;
    font-family: var(--ub-font-heading);
    font-size: var(--ub-text-xl);
    font-weight: 700;
    line-height: var(--ub-leading-snug);
}

    .rp-card__title a {
        color: var(--ub-ink);
        text-decoration: none;
    }

        .rp-card__title a:hover {
            text-decoration: underline;
        }

.rp-card__description {
    margin: 0;
    font-family: var(--ub-font-body);
    font-size: var(--ub-text-base);
    line-height: var(--ub-leading-body);
    color: var(--ub-ink-soft);
}

.rp-card__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ub-space-3);
    margin-top: auto;
    padding-top: var(--ub-space-3);
}

.rp-card__status {
    font-family: var(--ub-font-ui);
    font-size: var(--ub-text-sm);
    color: var(--ub-ink-muted);
}

/* ---- Plan overview: where you are ------------------------------------------ */

/* The overview is a list to scan, so it keeps to a column a little wider than
   the reading measure. Left to fill the shell, a day's title and its passage sat
   a full screen apart. */
.rp-next,
.rp-weeks,
.rp-key {
    max-width: 52rem;
}

.rp-next {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ub-space-3) var(--ub-space-5);
    padding: var(--ub-space-5);
    background: var(--ub-paper-raised);
    border: var(--ub-rule);
    border-radius: var(--ub-radius-md);
}

.rp-next__label {
    flex: 1 1 16rem;
    margin: 0;
    font-family: var(--ub-font-ui);
    font-size: var(--ub-text-base);
    color: var(--ub-ink-soft);
}

    .rp-next__label strong {
        display: block;
        font-family: var(--ub-font-heading);
        font-size: var(--ub-text-lg);
        color: var(--ub-ink);
    }

.rp-next__passage {
    display: block;
    font-size: var(--ub-text-sm);
    color: var(--ub-ink-muted);
}

.rp-next__note {
    flex-basis: 100%;
    margin: 0;
    font-family: var(--ub-font-ui);
    font-size: var(--ub-text-sm);
    color: var(--ub-ink-muted);
}

    .rp-next__note a,
    .rp-handoff a {
        color: var(--ub-accent-700);
        font-weight: 600;
    }

.rp-handoff {
    margin: 0;
    font-family: var(--ub-font-ui);
    font-size: var(--ub-text-sm);
    color: var(--ub-ink-muted);
}

/* ---- Day 0: the anchor sentence ---------------------------------------------
   "After I ___, I will read in ___." The member finishes one sentence; the two
   inputs sit inside it so it reads as writing a line, not filling in a form. */

.rp-start {
    max-width: 52rem;
    padding: var(--ub-space-5);
    background: var(--ub-paper-raised);
    border: var(--ub-rule);
    border-radius: var(--ub-radius-md);
}

    .rp-start .rp-section-title {
        margin-bottom: var(--ub-space-2);
    }

.rp-start__lede,
.rp-start__note {
    margin: 0;
    font-family: var(--ub-font-ui);
    font-size: var(--ub-text-sm);
    color: var(--ub-ink-muted);
}

.rp-start__note {
    margin-top: var(--ub-space-2);
}

.rp-anchor {
    margin: var(--ub-space-4) 0 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ub-space-3);
}

.rp-anchor__sentence {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--ub-space-2);
    font-family: var(--ub-font-body);
    font-size: var(--ub-text-md);
    line-height: var(--ub-leading-body);
    color: var(--ub-ink);
}

.rp-anchor__input {
    flex: 1 1 12rem;
    min-width: 0;
    padding: var(--ub-space-1) var(--ub-space-2);
    font: inherit;
    color: var(--ub-ink);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--ub-line-strong);
    border-radius: 0;
}

    .rp-anchor__input::placeholder {
        color: var(--ub-ink-muted);
        font-style: italic;
    }

    .rp-anchor__input:focus-visible {
        border-bottom-color: var(--ub-accent-500);
    }

/* Shown back to the member once written. */
.rp-next__anchor {
    flex-basis: 100%;
    padding-top: var(--ub-space-3);
    border-top: var(--ub-rule);
}

.rp-next__anchor-text {
    margin: 0 0 var(--ub-space-1);
    font-family: var(--ub-font-body);
    font-style: italic;
    font-size: var(--ub-text-base);
    color: var(--ub-ink-soft);
}

.rp-anchor-edit {
    font-family: var(--ub-font-ui);
    font-size: var(--ub-text-sm);
}

    .rp-anchor-edit summary {
        cursor: pointer;
        color: var(--ub-accent-700);
        font-weight: 600;
    }

.rp-leave {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--ub-space-2);
    margin: 0;
    font-family: var(--ub-font-ui);
    font-size: var(--ub-text-sm);
    color: var(--ub-ink-muted);
}

.rp-leave__btn {
    color: var(--ub-ink-muted);
    text-decoration: underline;
}

/* ---- The marks ------------------------------------------------------------- */

.rp-mark {
    display: inline-block;
    flex-shrink: 0;
    width: 0.85rem;
    height: 0.85rem;
    box-sizing: border-box;
    border: 2px solid var(--ub-line-strong);
    background: transparent;
}

.rp-mark--read {
    border-radius: 50%;
    border-color: var(--ub-ink-muted);
}

/* Catch-up: the same circle, dashed. A lighter day, and it reads as one. Same
   ink as the other two marks: the fainter line colour all but vanished on the
   dark theme. */
.rp-mark--catchup {
    border-radius: 50%;
    border-style: dashed;
    border-color: var(--ub-ink-muted);
}

.rp-mark--gather {
    border-radius: 2px;
    border-color: var(--ub-ink-muted);
}

.rp-mark.is-done {
    border-style: solid;
    border-color: var(--ub-accent-500);
    background: var(--ub-accent-500);
}

.rp-key {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--ub-space-2) var(--ub-space-5);
    margin: 0 0 var(--ub-space-5);
    padding: 0;
    font-family: var(--ub-font-ui);
    font-size: var(--ub-text-xs);
    color: var(--ub-ink-muted);
}

    .rp-key li {
        display: inline-flex;
        align-items: center;
        gap: var(--ub-space-2);
    }

/* ---- Week map ------------------------------------------------------------- */

.rp-weeks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ub-space-6);
}

.rp-week__title {
    margin: 0 0 var(--ub-space-2);
    font-family: var(--ub-font-ui);
    font-size: var(--ub-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--ub-tracking-eyebrow);
    color: var(--ub-ink-muted);
}

.rp-days {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: var(--ub-rule);
}

.rp-day {
    border-bottom: var(--ub-rule);
}

.rp-day__link {
    display: grid;
    grid-template-columns: auto 4.5rem 1fr auto;
    align-items: center;
    gap: var(--ub-space-3);
    padding: var(--ub-space-3) var(--ub-space-2);
    color: inherit;
    text-decoration: none;
    transition: background-color var(--ub-duration-fast) var(--ub-ease);
}

    .rp-day__link:hover {
        background: var(--ub-paper-raised);
    }

.rp-day__number {
    font-family: var(--ub-font-ui);
    font-size: var(--ub-text-sm);
    font-variant-numeric: tabular-nums;
    color: var(--ub-ink-muted);
}

.rp-day__title {
    font-family: var(--ub-font-heading);
    font-size: var(--ub-text-base);
    font-weight: 600;
    color: var(--ub-ink);
}

.rp-day__meta {
    font-family: var(--ub-font-ui);
    font-size: var(--ub-text-sm);
    color: var(--ub-ink-muted);
    text-align: right;
}

/* A day already read settles back; the eye goes to what is ahead. */
.rp-day.is-done .rp-day__title {
    font-weight: 400;
    color: var(--ub-ink-soft);
}

/* The next unread day: one accent rule on the left. No badge, no count. The row
   takes the raised paper tone, not the accent wash: on the dark theme the wash
   came out as a heavy maroon band that outweighed everything else on the page. */
.rp-day.is-next .rp-day__link {
    box-shadow: inset 3px 0 0 var(--ub-accent-500);
    background: var(--ub-paper-raised);
}

@media (max-width: 34rem) {
    .rp-day__link {
        grid-template-columns: auto 1fr;
        row-gap: 0;
    }

    .rp-day__number {
        grid-column: 2;
    }

    .rp-day__title,
    .rp-day__meta {
        grid-column: 2;
        text-align: left;
    }
}

/* ---- Day page -------------------------------------------------------------- */

.rp-daypage {
    max-width: var(--ub-width-reading);
    margin: 0 auto;
    padding: var(--ub-space-7) var(--ub-gutter, var(--ub-space-4)) var(--ub-space-9);
    display: flex;
    flex-direction: column;
    gap: var(--ub-space-6);
}

.rp-dayhead {
    display: flex;
    flex-direction: column;
    gap: var(--ub-space-2);
}

    .rp-dayhead .ub-eyebrow {
        margin: 0;
    }

.rp-dayhead__passage {
    margin: 0;
    font-family: var(--ub-font-ui);
    font-size: var(--ub-text-md);
    color: var(--ub-ink-muted);
}

/* A move: Pray, Read, Notice, Respond. The label is small and steady so the
   four of them read as one rhythm down the page. */
.rp-move {
    display: flex;
    flex-direction: column;
    gap: var(--ub-space-3);
    padding-top: var(--ub-space-5);
    border-top: var(--ub-rule);
}

.rp-move__label {
    margin: 0;
    font-family: var(--ub-font-ui);
    font-size: var(--ub-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--ub-tracking-eyebrow);
    color: var(--ub-accent-700);
}

.rp-prayer {
    margin: 0;
    font-family: var(--ub-font-body);
    font-size: var(--ub-text-md);
    font-style: italic;
    line-height: var(--ub-leading-body);
    color: var(--ub-ink);
}

.rp-context,
.rp-prompt,
.rp-christ,
.rp-appeal {
    font-family: var(--ub-font-body);
    font-size: var(--ub-text-md);
    line-height: var(--ub-leading-body);
    color: var(--ub-ink);
}

.rp-context {
    margin: 0;
    color: var(--ub-ink-soft);
}

    .rp-context > :first-child,
    .rp-prompt > :first-child,
    .rp-christ > :first-child,
    .rp-appeal > :first-child {
        margin-top: 0;
    }

    .rp-context > :last-child,
    .rp-prompt > :last-child,
    .rp-christ > :last-child,
    .rp-appeal > :last-child {
        margin-bottom: 0;
    }

.rp-aloud {
    margin: 0;
    font-family: var(--ub-font-ui);
    font-size: var(--ub-text-sm);
    color: var(--ub-ink-muted);
}

/* The passage is the page. Larger than the copy around it, with the generous
   scripture leading, and it follows the member's reading-size preference
   because it is sized in rem off the root. */
.rp-passage {
    padding: var(--ub-space-5) 0;
    font-family: var(--ub-font-body);
    font-size: var(--ub-text-lg);
    line-height: var(--ub-leading-reading);
    color: var(--ub-ink);
}

.rp-passage__chapter {
    margin: var(--ub-space-5) 0 var(--ub-space-2);
    font-family: var(--ub-font-ui);
    font-size: var(--ub-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--ub-tracking-eyebrow);
    color: var(--ub-ink-muted);
}

    .rp-passage__chapter:first-child {
        margin-top: 0;
    }

/* Verses run on as prose, one paragraph per chapter, to keep a long chapter from
   filling several screens. Each verse is an inline span so its number travels
   with its first word. */
.rp-passage__text {
    margin: 0;
}

.rp-verse {
    display: inline;
}

.rp-verse__n {
    margin-right: 0.2em;
    font-family: var(--ub-font-ui);
    font-size: 0.65em;
    font-weight: 600;
    color: var(--ub-ink-muted);
    vertical-align: super;
    line-height: 0;
}

.rp-passage__source,
.rp-passage__missing {
    margin: 0;
    font-family: var(--ub-font-ui);
    font-size: var(--ub-text-sm);
    color: var(--ub-ink-muted);
}

    .rp-passage__source a,
    .rp-passage__missing a,
    .rp-memory a,
    .rp-done__state a,
    .rp-weeklist a {
        color: var(--ub-accent-700);
        font-weight: 600;
    }

/* ---- Gather and catch-up -------------------------------------------------- */

.rp-recall {
    margin: 0;
    padding-left: var(--ub-space-5);
    display: flex;
    flex-direction: column;
    gap: var(--ub-space-3);
    font-family: var(--ub-font-body);
    font-size: var(--ub-text-md);
    line-height: var(--ub-leading-body);
    color: var(--ub-ink);
}

/* ---- A member's own answer under a prompt ----------------------------------
   Notice, Respond and each Recall prompt. Private; saved by the button at the foot. */

.rp-answer {
    display: flex;
    flex-direction: column;
    gap: var(--ub-space-1);
    margin-top: var(--ub-space-3);
}

.rp-answer__label {
    font-family: var(--ub-font-ui);
    font-size: var(--ub-text-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ub-ink-muted);
}

.rp-answer__input {
    width: 100%;
    min-height: 5rem;
    padding: var(--ub-space-3);
    resize: vertical;
    font-family: var(--ub-font-body);
    font-size: var(--ub-text-base);
    line-height: var(--ub-leading-body);
    color: var(--ub-ink);
    background: var(--ub-paper);
    border: var(--ub-rule-strong);
    border-radius: var(--ub-radius-sm);
}

    .rp-answer__input:focus-visible {
        outline: none;
        border-color: var(--ub-accent-500);
        box-shadow: var(--ub-focus-ring);
    }

/* Gather day: send the share question to the member's group. */
.rp-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ub-space-2) var(--ub-space-3);
    margin: var(--ub-space-3) 0 0;
}

.rp-share__note {
    margin: var(--ub-space-3) 0 0;
    font-family: var(--ub-font-ui);
    font-size: var(--ub-text-sm);
    color: var(--ub-ink-muted);
}

    .rp-share .rp-share__note {
        margin: 0;
    }

/* A gated day: the member's own earlier answers, read-only. */
.rp-kept {
    max-width: 52rem;
    margin-top: var(--ub-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--ub-space-3);
}

.rp-kept__list {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ub-space-2);
}

    .rp-kept__list dt {
        font-family: var(--ub-font-ui);
        font-size: var(--ub-text-xs);
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--ub-ink-muted);
    }

    .rp-kept__list dd {
        margin: 0 0 var(--ub-space-3);
        font-family: var(--ub-font-body);
        font-size: var(--ub-text-base);
        line-height: var(--ub-leading-body);
        color: var(--ub-ink);
        white-space: pre-wrap; /* keep the member's own line breaks */
    }

/* Recall before looking back: the week's readings stay folded until asked for. */
.rp-lookback {
    font-family: var(--ub-font-ui);
    font-size: var(--ub-text-sm);
}

    .rp-lookback summary {
        cursor: pointer;
        color: var(--ub-accent-700);
        font-weight: 600;
    }

    .rp-lookback[open] summary {
        margin-bottom: var(--ub-space-3);
    }

.rp-weeklist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ub-space-2);
    font-family: var(--ub-font-ui);
    font-size: var(--ub-text-base);
}

.rp-weeklist__meta {
    margin-left: var(--ub-space-2);
    font-size: var(--ub-text-sm);
    color: var(--ub-ink-muted);
}

/* The Gospel Appeal is the longest thing we write on a reading plan. A left rule
   sets it apart as one sustained word to the reader. */
.rp-appeal {
    padding-left: var(--ub-space-5);
    border-left: 3px solid var(--ub-accent-500);
}

.rp-memory {
    margin: 0;
    padding: var(--ub-space-4) var(--ub-space-5);
    background: var(--ub-paper-raised);
    border: var(--ub-rule);
    border-radius: var(--ub-radius-md);
    font-family: var(--ub-font-ui);
    font-size: var(--ub-text-sm);
    color: var(--ub-ink-soft);
}

/* ---- Finishing the day ----------------------------------------------------- */

.rp-done {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ub-space-3);
    padding-top: var(--ub-space-5);
    border-top: var(--ub-rule);
}

.rp-done__form {
    margin: 0;
}

.rp-done__state,
.rp-teaser {
    margin: 0;
    font-family: var(--ub-font-ui);
    font-size: var(--ub-text-sm);
    color: var(--ub-ink-muted);
}

.rp-teaser {
    font-family: var(--ub-font-body);
    font-style: italic;
    font-size: var(--ub-text-base);
    color: var(--ub-ink-soft);
}

.rp-gate {
    max-width: 52rem; /* same measure as the plan's other boxes; it ran off the page edge */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ub-space-3);
    padding: var(--ub-space-5);
    background: var(--ub-paper-raised);
    border: var(--ub-rule);
    border-radius: var(--ub-radius-md);
    font-family: var(--ub-font-ui);
    color: var(--ub-ink);
}

    .rp-gate p {
        margin: 0;
    }

.rp-pager {
    display: flex;
    justify-content: space-between;
    gap: var(--ub-space-4);
    padding-top: var(--ub-space-5);
    border-top: var(--ub-rule);
}

.rp-pager__link {
    display: flex;
    flex-direction: column;
    gap: var(--ub-space-1);
    max-width: 48%;
    font-family: var(--ub-font-ui);
    font-size: var(--ub-text-sm);
    color: var(--ub-ink);
    text-decoration: none;
}

    .rp-pager__link:hover {
        color: var(--ub-accent-700);
    }

.rp-pager__link--next {
    margin-left: auto;
    text-align: right;
}

.rp-pager__dir {
    font-size: var(--ub-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--ub-tracking-eyebrow);
    color: var(--ub-ink-muted);
}