/* ── Public Prayer Request Feed ────────────────────────────────────────────
   Styles for the redesigned anonymous prayer request feed (Pages/PrayerRequests).

   This page deliberately steps outside the SmartAdmin/Bootstrap look used
   everywhere else in the portal: it is the one surface external visitors see and
   the redesign is a self-contained visual system. Everything is namespaced under
   .prf- so it cannot leak into the rest of the site, and no Bootstrap utility
   classes are relied on inside the feed itself.

   Two designs live here: the cards themselves, and the frame they sit in - a fixed navy
   gradient canvas, two sticky editorial rails, and the cream plate the feed mounts on.
   The frame came later, from the Prayer Wall handoff, and its .pw- classes are translated
   into this namespace rather than added as a second prefix.

   Tokens are lifted verbatim from the design handoffs. */

/* Tokens sit on :root, not on .prf-page. The bottom sheet and the modals are
   appended to document.body so they can be position:fixed above everything, which
   puts them outside .prf-page - a token scoped there would not resolve and every
   background would silently fall back to transparent. This stylesheet only loads on
   this page, so nothing else inherits them. */
:root {
    /* The frame around the feed: navy canvas, gold accents, light text on navy. Lifted from
       the Prayer Wall handoff's --pw- tokens. --prf-navy-top is both the canvas gradient's 0%
       stop and the colour the page hands the layout for its header bar, so the header and the
       canvas read as one surface. */
    --prf-navy: #00205B;
    --prf-navy-deep: #001433;
    --prf-navy-top: #001432;
    --prf-gold: #E3B74A;
    --prf-on-navy: rgba(246, 241, 233, .74);
    --prf-on-navy-strong: #F6F1E9;
    --prf-hairline: rgba(246, 241, 233, .18);
    /* Three warm values, outward to inward: plate, card, and the lines drawn on them.
       Nothing in the feed is pure white - white breaks the paper-on-navy read that the
       whole page is built around. */
    --prf-page-bg: #F4EEE1;
    --prf-card: #FCFAF4;
    --prf-card-border: #E7DDC9;
    --prf-hairline: #DFD5C0;
    --prf-rule-gold: #D8C08B;

    --prf-ink: #241F1C;
    --prf-body-ink: #241F1C;
    --prf-ink-soft: #3A342D;

    /* #6E6455 is roughly 5.3:1 on the card and is the lightest grey allowed on text at
       these sizes. Metadata is de-emphasised with size and weight instead of by going
       lighter than this. */
    --prf-muted: #6E6455;
    --prf-subtle: #6E6455;
    --prf-faint: #6E6455;
    --prf-meta-strong: #5C5346;
    --prf-bullet: #C9BFA8;

    --prf-red: #9E1B32;
    --prf-red-hover: #8A1729;

    --prf-submit-bg: #FAF6EC;
    --prf-submit-border: #E7DDC9;

    /* Answered is a solid gold chip rather than a tint, and it is the only badge: there is
       no urgent state on this feed. */
    --prf-answered-bg: #E3B74A;
    --prf-answered-ink: #241F1C;

    /* The prayer pill, in both states. Same footprint either way so the card cannot
       reflow when it flips. */
    --prf-pray-border: #C6BCA6;
    --prf-pray-hover-bg: #EDE5D4;
    --prf-prayed-bg: rgba(227, 183, 74, .26);
    --prf-prayed-border: #C9A94E;
    --prf-prayed-ink: #5E4708;

    /* Follow-ups and praise reports are told apart by a rule and a label rather than by a
       tinted box, on the card and in the full view alike, so the tints those used to carry
       are gone rather than kept around unused. */

    --prf-secondary-border: #D6CDBE;
    --prf-scrim: rgba(31, 27, 24, .42);
    --prf-card-shadow: 0 1px 2px rgba(36, 31, 28, .06);
}

/* Overscroll and any strip the canvas does not cover land on navy rather than white. */
body.mod-bg-1 {
    background-color: var(--prf-navy) !important;
}

.prf-page {
    position: relative;
    background: var(--prf-navy);
    min-height: 100vh;
    font-family: Figtree, "Segoe UI", system-ui, sans-serif;
    color: var(--prf-ink);
}

/* Every width below is a border-box width. Without this the plate measures 756px where it
   should measure 700px and overflows sideways on a phone. */
.prf-page *,
.prf-page *::before,
.prf-page *::after {
    box-sizing: border-box;
}

/* ── Page frame ─────────────────────────────────────────────────
   The handoff's .pw- frame, translated into this page's namespace rather than added as a
   second prefix. None of it touches the feed: it is only the surface the feed sits on,
   and every rule below the frame section still styles the cards exactly as before.

   The two rails are supplementary, so they are marked up as <aside> and drop out as the
   viewport narrows - first the right at 1180px, then the left at 1000px - leaving the
   phone layout the feed was designed for. */

.prf-canvas {
    position: fixed;
    inset: 0;
    z-index: 0;
}

.prf-canvas::before,
.prf-canvas::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* The navy field. */
.prf-canvas::before {
    background: linear-gradient(155deg, var(--prf-navy-top) 0%, var(--prf-navy) 48%, #000C22 100%);
}

/* A faint warm glow at the top edge, which is what stops the navy reading flat. Gradients
   only, deliberately: an earlier revision of the design had a darkened photograph behind
   these and it was removed, since at the visibility it needed it added nothing. */
.prf-canvas::after {
    background: radial-gradient(120% 80% at 50% 0%, rgba(227, 183, 74, .10), transparent 60%);
}

.prf-content {
    position: relative;
    z-index: 1;
}

/* Three columns centred as a whole. The middle one carries the constraint that matters:
   the feed never squeezes below 420px and never stretches past 700px, and the rails
   absorb whatever width is left over. */
.prf-grid {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) minmax(420px, 700px) minmax(240px, 1fr);
    padding: 56px 56px 0;
    align-items: start;
}

/* Sticky rather than fixed: a rail scrolls into place and then holds while the feed
   carries on past it. No script is involved. */
.prf-rail {
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 108px;
}

.prf-rail-left {
    gap: 28px;
    padding-right: 48px;
}

.prf-rail-right {
    gap: 22px;
    padding-left: 48px;
}

/* The feed's sheet. Cream is the feed's own page token rather than the handoff's, so the
   plate and the bottom sheet cannot drift apart. min-height keeps it reading as a
   continuous page rather than a card that runs out mid-scroll. */
/* The inset highlight along the top edge is not decoration: it is what makes the plate
   read as a lifted sheet rather than a painted rectangle. */
.prf-plate {
    background: var(--prf-page-bg);
    border-radius: 14px;
    padding: 30px 32px;
    box-shadow: 0 28px 70px -12px rgba(0, 0, 0, .55), inset 0 2px 0 rgba(255, 255, 255, .35);
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 100vh;
}

/* ── Rail typography ────────────────────────────────────────────
   The handoff pairs Archivo with Source Serif 4 Light. Figtree stands in for Archivo,
   which the handoff allows where the app already loads a grotesque: the pairing and the
   eyebrow letter-spacing are what carry the look, and they are kept. */

.prf-eyebrow {
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--prf-gold);
}

.prf-eyebrow-sm {
    font-size: 10px;
    letter-spacing: .22em;
}

.prf-display {
    margin: 16px 0 0;
    font-family: "Source Serif 4", Georgia, serif;
    font-weight: 300;
    font-size: 58px;
    line-height: 1.02;
    color: var(--prf-on-navy-strong);
}

.prf-rule {
    width: 52px;
    height: 2px;
    margin: 24px 0;
    background: var(--prf-gold);
}

.prf-lede {
    margin: 0;
    font-size: 15px;
    line-height: 1.62;
    color: var(--prf-on-navy);
    max-width: 340px;
    text-wrap: pretty;
}

/* A rail section under a hairline. */
.prf-block {
    border-top: 1px solid var(--prf-hairline);
    padding-top: 24px;
}

.prf-quote {
    margin: 0;
    font-family: "Source Serif 4", Georgia, serif;
    font-weight: 300;
    font-style: italic;
    font-size: 22px;
    line-height: 1.42;
    color: var(--prf-on-navy-strong);
    text-wrap: pretty;
}

.prf-cite {
    margin-top: 14px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(227, 183, 74, .92);
}

/* The week's figures, as one plain sentence. Never a stat block, a counter or a chart:
   that is an explicit decision in the design, not an omission. */
.prf-stat {
    margin: 0;
    font-size: 15px;
    line-height: 1.62;
    color: rgba(246, 241, 233, .7);
    text-wrap: pretty;
}

/* Verse panel. No fixed height anywhere: it shrinks to fit its text, because a fixed one
   left a conspicuous empty rectangle under short verses. */
.prf-versepanel {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    background: var(--prf-navy-deep);
    border: 1px solid rgba(246, 241, 233, .16);
}

.prf-versepanel::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0, 20, 50, .3), rgba(0, 16, 40, .88));
}

.prf-versepanel-body {
    position: relative;
    z-index: 1;
    padding: 22px;
}

.prf-versepanel .prf-quote {
    font-size: 18px;
}

.prf-versepanel .prf-cite {
    font-size: 10px;
    margin-top: 10px;
}

/* The NIV copyright mark, which sits on the citation line. Inherits the citation's type so
   it reads as part of that line rather than as a control dropped into it, but stays off the
   gold so it is still legible as something to press. */
.prf-copyright {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    letter-spacing: normal;
    vertical-align: baseline;
    color: var(--prf-gold)
    cursor: pointer;
}

.prf-copyright:hover,
.prf-copyright:focus {
    color: var(--prf-on-navy-strong);
}

/* Guidance card */
.prf-guidance {
    border: 1px solid rgba(246, 241, 233, .2);
    border-radius: 6px;
    padding: 22px;
    background: rgba(246, 241, 233, .07);
}

.prf-guidance-list {
    display: flex;
    flex-direction: column;
    margin: 6px 0 0;
    padding: 0;
}

.prf-guidance-list li {
    list-style: none;
    padding: 12px 0;
    border-bottom: 1px solid rgba(246, 241, 233, .14);
    font-size: 14px;
    line-height: 1.5;
    color: rgba(246, 241, 233, .82);
}

.prf-guidance-list li:last-child {
    border-bottom: 0;
}

/* ── Header block ───────────────────────────────────────────────
   The plate supplies the gutter now, so these only need the small inset that keeps card
   shadows off the plate's rounded edge. */

.prf-header {
    padding: 4px 2px 0;
}

/* Title and the week's count share a baseline, so the count reads as a caption on the
   title rather than as a second heading. */
.prf-header-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 6px;
}

.prf-title {
    margin: 0;
    font-family: "Source Serif 4", Georgia, serif;
    font-weight: 400;
    font-size: 27px;
    line-height: 1;
    color: var(--prf-ink);
}

.prf-count {
    flex: none;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--prf-muted);
}

/* The one solid red thing in the feed, so submitting is unmistakably the primary action. */
.prf-submit-btn {
    margin-top: 12px;
    width: 100%;
    border: 0;
    background: var(--prf-red);
    color: #F6F1E9;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 15px 20px;
    min-height: 48px;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(36, 31, 28, .14);
    cursor: pointer;
    transition: background .16s ease;
}

.prf-submit-btn:hover,
.prf-submit-btn:focus-visible {
    background: var(--prf-red-hover);
}

/* The landing page's version of the same action is a link rather than a form control, so it
   needs the centring a button gets for free - and the colour restated, since Bootstrap styles
   anchors and is still loaded by the layout. */
a.prf-submit-btn,
a.prf-submit-btn:hover,
a.prf-submit-btn:focus-visible {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    color: #F6F1E9;
}

/* ── Page-level notice ──────────────────────────────────────────
   Currently only used for "we couldn't find that corps". Tinted rather than alarming:
   the reader still got a working feed, they just did not get the one they asked for. */

.prf-error {
    margin: 0 2px;
    padding: 13px 15px;
    border-radius: 12px;
    background: #FBEDEB;
    border: 1px solid #F0CFC9;
    color: #8A2B20;
    font-size: 14px;
    line-height: 1.5;
}

/* ── Corps / territory scope toggle ─────────────────────────────
   Only rendered when the reader arrived through a corps. A segmented pill rather
   than the theme's btn-group, so it reads as part of this page's system. */

.prf-scope {
    margin-top: 12px;
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--prf-submit-bg);
    border: 1px solid var(--prf-submit-border);
    border-radius: 999px;
}

.prf-scope-btn {
    flex: 1 1 0;
    min-width: 0;
    border: 1px solid transparent;
    background: transparent;
    color: var(--prf-muted);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    padding: 9px 12px;
    min-height: 40px;
    border-radius: 999px;
    cursor: pointer;
    /* Corps names can be long; ellipsis rather than wrapping to two lines. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}

.prf-scope-btn:hover:not(.prf-scope-active) {
    color: var(--prf-ink);
}

.prf-scope-active {
    background: #FFFFFF;
    border-color: var(--prf-submit-border);
    color: var(--prf-ink);
    box-shadow: 0 1px 2px rgba(31, 27, 24, .06);
    cursor: default;
}

@media (prefers-reduced-motion: reduce) {
    .prf-scope-btn {
        transition: none;
    }
}

/* ── Card list ──────────────────────────────────────────────────── */

.prf-list {
    padding: 4px 2px 8px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.prf-card {
    background: var(--prf-card);
    border: 1px solid var(--prf-card-border);
    border-radius: 10px;
    box-shadow: var(--prf-card-shadow);
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 13px;
    cursor: pointer;
    text-align: left;
    width: 100%;
    font-family: inherit;
}

.prf-identity {
    display: flex;
    align-items: center;
    gap: 12px;
}

.prf-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: #F6F1E9;
    object-fit: cover;
    overflow: hidden;
}

/* Corps requests carry the shield as a mark in its own right, not a portrait, so it sits
   bare on the card rather than inside a circle. */
.prf-shield {
    height: 26px;
    width: auto;
    flex: none;
    display: block;
}

.prf-identity-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.prf-name {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    color: var(--prf-ink);
}

.prf-org {
    margin: 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    color: var(--prf-subtle);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The only badge on the feed. There is no urgent state here. */
.prf-answered {
    flex: none;
    font-size: 9px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .18em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--prf-answered-ink);
    background: var(--prf-answered-bg);
    padding: 6px 9px;
    border-radius: 3px;
}

/* Message bodies are serif and clamped; the date leads the text inline, here and in every
   follow-up and praise report, rather than sitting apart in the footer. */
.prf-message {
    margin: 0;
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 17px;
    line-height: 1.5;
    color: var(--prf-body-ink);
    text-wrap: pretty;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.prf-date {
    font-family: Figtree, "Segoe UI", system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--prf-faint);
}

.prf-bullet {
    color: var(--prf-bullet);
    padding: 0 7px;
}

/* ── Latest update block (one only, most recent) ──────────────────
   Set off by a rule rather than a tinted box: on a card this warm, a tint reads as a
   different material, and the praise report is the same voice as the request above it. */

.prf-update {
    border-top: 1px solid var(--prf-hairline);
    padding-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.prf-update-label {
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.prf-update-body {
    margin: 0;
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--prf-ink-soft);
    text-wrap: pretty;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.prf-update-body .prf-date {
    color: inherit;
    opacity: .72;
}

.prf-update-body .prf-bullet {
    color: inherit;
    opacity: .4;
}

/* An answered prayer earns the gold rule. */
.prf-update-praise {
    border-top-color: var(--prf-rule-gold);
}

.prf-update-praise .prf-update-label {
    color: var(--prf-red);
}

.prf-update-followup .prf-update-label {
    color: var(--prf-muted);
}

.prf-earlier {
    font-size: 12px;
    font-weight: 500;
    color: var(--prf-muted);
}

/* ── Prayer row ─────────────────────────────────────────────────── */

.prf-prayer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

/* The candles absorb the slack and the pill keeps its intrinsic size, so a long
   candle run can never push the button past the card edge. space-between alone let
   the row overflow, because candles are fixed-width and do not shrink. */
.prf-candles {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    gap: 3px;
}

/* One slot per candle. The slot is what animates: a new candle starts at zero width and
   expands, which is what pushes the row right instead of just appearing in place. */
.prf-candle {
    flex: 0 0 auto;
    width: 12px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
    transition: opacity .55s ease, width .42s cubic-bezier(.22, .61, .36, 1);
}

.prf-candles svg {
    display: block;
    flex: none;
    transition: opacity .42s ease .06s, transform .42s cubic-bezier(.22, .61, .36, 1) .06s;
}

/* Entrance state: collapsed slot, glyph held back and small. Removing the class lets the
   slot open while the glyph slides up into it. */
.prf-candle-entering {
    width: 0;
}

.prf-candle-entering svg {
    opacity: 0;
    transform: translateX(-12px) scale(.55);
}

@media (prefers-reduced-motion: reduce) {

    .prf-candle,
    .prf-candles svg {
        transition: none;
    }
}

/* No candles at all rather than an empty row, and the card says so plainly. */
.prf-candles-empty {
    margin: 0;
    font-size: 12px;
    font-style: italic;
    line-height: 1.3;
    color: var(--prf-muted);
}

.prf-pray-slot {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    /* Set inline at click time to the slot's measured size, so swapping the button for
       the confirmed pill cannot resize the card. See PrayerRequestFeed.js. */
    transition: none;
}

/* Hides the pill while leaving it in flow. Removing it instead collapsed the slot and
   reflowed the whole card mid-animation.

   The transition lives on the pills themselves rather than here, so one class covers
   both directions: add it to fade the button out, or add-reflow-remove to fade the
   confirmed pill in. */
.prf-pray-fading {
    opacity: 0;
    pointer-events: none;
}

/* Both states share every dimension, so flipping one for the other cannot resize the
   card. Only the colours and the checkmark differ. */
.prf-pray-btn,
.prf-prayed {
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    padding: 11px 18px;
    border-radius: 22px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    white-space: nowrap;
    transition: opacity .26s ease, background .16s ease, border-color .16s ease;
}

.prf-pray-btn {
    border: 1px solid var(--prf-pray-border);
    background: var(--prf-page-bg);
    color: var(--prf-ink-soft);
    cursor: pointer;
}

.prf-pray-btn:hover:not([disabled]),
.prf-pray-btn:focus-visible {
    background: var(--prf-pray-hover-bg);
    border-color: var(--prf-red);
}

.prf-pray-btn[disabled] {
    cursor: default;
}

/* Confirmed state, also used for the static "already prayed" render on load. */
.prf-prayed {
    margin: 0;
    background: var(--prf-prayed-bg);
    border: 1px solid var(--prf-prayed-border);
    color: var(--prf-prayed-ink);
    cursor: default;
}

/* Draws itself on as the pill lands, which is the whole of the confirmation. */
.prf-check {
    flex: none;
    display: block;
    stroke-dasharray: 18;
    animation: prfCheckDraw .34s ease-out .06s both;
}

@keyframes prfCheckDraw {
    from {
        stroke-dashoffset: 18;
    }

    to {
        stroke-dashoffset: 0;
    }
}

/* ── Caught-up divider and end of feed ──────────────────────────── */

/* Keeps its flanking rules, unlike the design's end-of-feed marker: this one sits in the
   middle of the feed and has to read as a divider rather than as a sign-off. */
.prf-caught-up {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 2px;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--prf-meta-strong);
}

.prf-caught-up::before,
.prf-caught-up::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--prf-hairline);
}

.prf-feed-end,
.prf-empty {
    padding: 14px 2px 24px;
    text-align: center;
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 15px;
    font-style: italic;
    line-height: 1.5;
    color: var(--prf-muted);
}

.prf-loading {
    padding: 18px 2px;
    text-align: center;
    font-size: 14px;
    color: var(--prf-subtle);
}

/* ── Full view (bottom sheet) ───────────────────────────────────── */

.prf-scrim {
    position: fixed;
    inset: 0;
    background: var(--prf-scrim);
    animation: prfScrimIn .22s ease both;
    z-index: 1040;
}

/* The sheet is the plate again, arriving from the bottom edge: same cream, same corner, and
   the same inset highlight along the top so it reads as another lifted sheet of the same
   paper rather than a panel in its own right. Its shadow is the plate's, thrown upward. */
.prf-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 88%;
    /* Sits on body rather than inside .prf-page, so the font stack and the border-box reset
       have to be restated here instead of inherited. */
    font-family: Figtree, "Segoe UI", system-ui, sans-serif;
    color: var(--prf-ink);
    background: var(--prf-page-bg);
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -22px 60px -12px rgba(0, 0, 0, .5), inset 0 2px 0 rgba(255, 255, 255, .35);
    display: flex;
    flex-direction: column;
    animation: prfSheetPop .3s cubic-bezier(.2, .9, .25, 1) both;
    z-index: 1050;
}

.prf-sheet,
.prf-sheet *,
.prf-sheet *::before,
.prf-sheet *::after {
    box-sizing: border-box;
}

/* Desktop holds the sheet to the plate's own width and centre, so the card inside lands at
   the width the reader was just looking at. */
@media (min-width: 672px) {
    .prf-sheet {
        left: 50%;
        right: auto;
        transform: none;
        width: 700px;
        margin-left: -350px;
    }
}

.prf-sheet-handle {
    padding: 10px 0 0;
    display: flex;
    justify-content: center;
    flex: none;
}

.prf-sheet-handle span {
    width: 40px;
    height: 4px;
    border-radius: 99px;
    background: var(--prf-secondary-border);
}

/* Matches the plate's gutter and the gap between its cards. */
.prf-sheet-scroll {
    overflow-y: auto;
    padding: 16px 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    -webkit-overflow-scrolling: touch;
}

/* The feed's card, minus the affordances: nothing here opens anything. */
.prf-sheet-card {
    cursor: default;
}

.prf-sheet .prf-avatar {
    width: 36px;
    height: 36px;
    font-size: 12px;
}

.prf-sheet .prf-shield {
    height: 30px;
}

.prf-sheet .prf-name {
    font-size: 15px;
}

.prf-sheet .prf-org {
    white-space: normal;
}

/* One entry per thing that was approved onto the request. Set off by a rule, exactly as the
   card's own update block is, rather than by the tinted boxes this view used to use: on a
   card this warm a tint reads as a different material, and every entry here is the same
   voice as the request above it. The first entry needs no rule - the byline is already
   sitting above it. */
.prf-entry {
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-top: 1px solid var(--prf-hairline);
    padding-top: 12px;
}

/* Keyed off the byline rather than :first-of-type, which would match the byline itself -
   both are divs, and the first div in the card is the byline. */
.prf-identity + .prf-entry {
    border-top: 0;
    padding-top: 0;
}

.prf-entry-label {
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--prf-muted);
}

/* Thread entries are never clamped: the sheet exists to show the whole thing. */
.prf-entry-body {
    margin: 0;
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 17px;
    line-height: 1.55;
    color: var(--prf-ink-soft);
    text-wrap: pretty;
}

.prf-entry-body .prf-date {
    color: inherit;
    opacity: .72;
}

.prf-entry-body .prf-bullet {
    color: inherit;
    opacity: .4;
}

/* The request itself is the one entry in full ink; the updates hanging off it sit a step
   back, which is the same relationship the card draws. */
.prf-entry-request .prf-entry-body {
    color: var(--prf-body-ink);
}

/* An answered prayer earns the gold rule here too. */
.prf-entry-praise {
    border-top-color: var(--prf-rule-gold);
}

.prf-entry-praise .prf-entry-label {
    color: var(--prf-red);
}

.prf-sheet-prayer {
    background: var(--prf-card);
    border: 1px solid var(--prf-card-border);
    border-radius: 10px;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

/* A step up from the card's pill: the sheet is the deliberate, one-request view. */
.prf-sheet-prayer .prf-pray-btn,
.prf-sheet-prayer .prf-prayed {
    font-size: 13px;
    padding: 13px 20px;
    min-height: 48px;
}

/* Deliberately the quietest thing in the sheet: the handle and the scrim are the ways out
   a reader reaches for first, and this is the one for everybody else. */
.prf-sheet-close {
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--prf-muted);
    padding: 10px;
    min-height: 44px;
    cursor: pointer;
    transition: color .16s ease;
}

.prf-sheet-close:hover,
.prf-sheet-close:focus-visible {
    color: var(--prf-ink);
}

/* Candles are a shade larger in the sheet, in step with the pill beside them. The slot has
   to grow with the glyph or it would clip it. */
.prf-sheet-prayer .prf-candle {
    width: 14px;
}

.prf-sheet-prayer .prf-candles svg {
    width: 14px;
    height: 23px;
}

/* ── Sign-in prompt modal ───────────────────────────────────────── */

.prf-modal-scrim {
    position: fixed;
    inset: 0;
    background: var(--prf-scrim);
    animation: prfScrimIn .22s ease both;
    z-index: 1060;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.prf-modal {
    /* Also body-level, so restate the font stack. */
    font-family: Figtree, "Segoe UI", system-ui, sans-serif;
    color: var(--prf-ink);
    background: var(--prf-card);
    border-radius: 18px;
    box-shadow: var(--prf-card-shadow);
    padding: 22px;
    width: 100%;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    animation: prfSheetPop .3s cubic-bezier(.2, .9, .25, 1) both;
}

.prf-modal-title {
    margin: 0;
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 20px;
    line-height: 1.25;
    color: var(--prf-ink);
}

.prf-modal-body {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--prf-muted);
}

.prf-modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}

.prf-modal-actions button {
    flex: 1;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    padding: 13px;
    min-height: 48px;
    border-radius: 10px;
    cursor: pointer;
}

.prf-modal-cancel {
    border: 1px solid var(--prf-submit-border);
    background: var(--prf-submit-bg);
    color: var(--prf-muted);
}

.prf-modal-confirm {
    border: 1px solid #CE0E00;
    background: #CE0E00;
    color: #FFFFFF;
}

/* ── Animations ─────────────────────────────────────────────────── */

@keyframes prfSheetPop {
    from {
        opacity: 0;
        transform: translateY(26px) scale(.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes prfScrimIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {

    .prf-scrim,
    .prf-sheet,
    .prf-modal,
    .prf-modal-scrim {
        animation: none;
    }
}

/* Locks the feed behind the sheet so only the sheet scrolls. */
.prf-scroll-locked {
    overflow: hidden;
}

/* ── Frame breakpoints ──────────────────────────────────────────
   Kept at the end so they override the frame rules above regardless of source order.
     <=1180px  right rail drops, the feed keeps its 700px
     <=1000px  left rail drops, single column, navy stays visible around the plate
      <=560px  tighter padding throughout */

@media (max-width: 1180px) {
    .prf-rail-right {
        display: none;
    }

    .prf-grid {
        grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
    }

    .prf-plate {
        max-width: 700px;
    }
}

@media (max-width: 1000px) {
    .prf-rail-left {
        display: none;
    }

    .prf-grid {
        grid-template-columns: minmax(0, 1fr);
        padding: 14px 14px 0;
        justify-items: center;
    }

    /* Rounded on all four corners with the canvas showing as a margin around it. That
       margin is what keeps a phone from reading as a generic white app. */
    .prf-plate {
        width: 100%;
        max-width: 700px;
        border-radius: 16px;
        padding: 16px;
        min-height: 0;
        margin-bottom: 28px;
    }
}

@media (max-width: 560px) {
    .prf-grid {
        padding: 10px 10px 0;
    }

    .prf-plate {
        border-radius: 12px;
        padding: 12px;
    }

    .prf-card {
        padding: 16px;
    }

    .prf-message {
        font-size: 16px;
    }

    /* The pill takes the full width on its own line rather than being squeezed beside the
       candles, and grows to the 44px touch target. */
    .prf-prayer-row,
    .prf-sheet-prayer {
        align-items: stretch;
    }

    .prf-prayer-row .prf-pray-slot,
    .prf-sheet-prayer .prf-pray-slot {
        flex: 1 1 100%;
    }

    .prf-pray-btn,
    .prf-prayed {
        width: 100%;
        min-height: 44px;
        justify-content: center;
    }
}