/* =============================================================================
   Čaroděj — page styles: the product core.

   Layer 3 of the system (app.css → components.css → pages/*.css), and the one
   stylesheet the three areas somebody actually pays for share: the readings
   (`/vyklad/*`), the conversation with the Čaroděj (`/carodej`) and the Grimoár
   (`/grimoar/*`). One file rather than three, because they are one product seen
   at three distances — a reading is what the Čaroděj said once, a thread is
   what he is saying now, and the Grimoár is everything he has ever said — and
   the plates, the seams and the brass rules have to be identical across all
   three or the reader notices the seam instead of the reading.

   Everything here is prefixed `.rd-` unless it is refining a component that
   already exists in components.css. The `.rd-` set is listed at the foot of the
   file with a note on which of them have earned promotion.

   Rules of the house that this file follows: colours only through tokens, no
   horizontal overflow between 320 and 1920, `:focus-visible` never removed,
   and no class renamed that a functional test selects on.
   ============================================================================= */

/* =============================================================================
   The measure

   Every page in this group is a document: one column, `--content-narrow` wide,
   read top to bottom. The one thing that is allowed out of that column is the
   draw — the cards are the picture at the top of the article, and a picture
   confined to the text measure is a thumbnail.

   `--rd-bleed` is that permission, and it is zero until there is room for it.
   Below 1100px the band is exactly the column, which is why nothing here can
   overflow on a phone: the bleed does not exist there to overflow with.
   ============================================================================= */

.page-reading,
.page-chat,
.page-grimoire {
    --rd-bleed: 0px;
}

@media (min-width: 1100px) {
    .page-reading,
    .page-chat,
    .page-grimoire {
        --rd-bleed: 110px;
    }
}

/* =============================================================================
   Page head

   Promoted to components.css as `.page-head--ruled` / `.page-head__meta`: the
   ruled head is what every subpage in the system wanted, not only a reading.
   `.rd-head` is still the name the templates in this group carry and is
   declared alongside the canonical one there.
   ============================================================================= */

/* =============================================================================
   The draw — what a reading *is*, before it is words

   The band steps out of the text column on a wide screen and carries the plates
   across it. Its label is centred between two hairlines, which is the mockup's
   treatment for the one heading a band is allowed.
   ============================================================================= */

.rd-draw {
    padding: var(--space-5) var(--space-5) var(--space-6);
    margin-inline: calc(-1 * var(--rd-bleed));
    overflow: hidden;
    background:
        radial-gradient(ellipse at 50% 0%, rgb(57 43 78 / 24%), transparent 62%),
        var(--plate-fill);
}

/* The label keeps `.card__eyebrow` — a functional test asks the reading page
   what its first eyebrow says, and the answer has to stay "Vylosované runy". */
.rd-draw > .card__eyebrow {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    align-items: center;
    justify-content: center;
    text-align: center;
}

.rd-draw > .card__eyebrow::before,
.rd-draw > .card__eyebrow::after {
    flex: 1 1 0;
    max-width: 88px;
    height: 1px;
    background: var(--rule-gold);
    content: '';
}

/* Flex rather than the component's grid, and both halves of that matter.

   The ceiling: `.card-row`'s `1fr` has none, so three cards across a 980px band
   were three 310px plates with a small card floating in the middle of each. A
   card is card-shaped or it is a box.

   The centring: a grid puts the fifth card of a five-card spread in the *first*
   column of the second row, so a relationship spread hung one plate off the
   left edge under four. A wrapped flex line centres itself. */
.rd-draw .card-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: center;
}

.rd-draw .card-plate {
    flex: 1 1 8.5rem;
    max-width: 12rem;
}

/* A plate is a card, so it is shaped like one: taller than it is wide, with the
   name under the figure rather than beside it. */
.rd-draw .card-plate {
    gap: var(--space-3);
    padding: var(--space-4) var(--space-3) var(--space-5);
}

.rd-draw .card-plate__name {
    font-size: var(--text-lg);
}

/* On a phone the ceiling has to go, or a 292px column fits exactly one 12rem
   card and a six-card spread becomes six screens of scrolling. Below 600px two
   cards share the row. */
@media (max-width: 599px) {
    .rd-draw {
        padding-inline: var(--space-4);
    }

    .rd-draw .card-row {
        gap: var(--space-2);
    }

    .rd-draw .card-plate {
        flex: 1 1 7rem;
        max-width: none;
    }

    .rd-draw .card-plate__name {
        font-size: var(--text-md);
    }
}

.rd-draw .card-plate__position {
    min-height: 2.2em;
    display: flex;
    align-items: center;
}

/* The card back.

   Most decks in the catalogue have no illustration — the classic tarot is
   seventy-eight names and no pictures — and a plate with a name floating in the
   middle of it does not read as a card. This is what it gets instead: the
   engraved double frame the mockup draws around every card, with the house
   sigil at a whisper inside it. It is decoration and says nothing the name
   below does not, which is why the template marks it aria-hidden.

   Drawn in CSS rather than shipped as an image because it has to take the
   plate's own brass, and because a card back is two rectangles and a mark. */
.card-plate__back {
    position: relative;
    display: grid;
    place-items: center;
    width: min(100%, 6.5rem);
    aspect-ratio: 5 / 7;
    color: var(--color-gold);
    background:
        radial-gradient(ellipse at 50% 42%, rgb(200 145 76 / 12%), transparent 68%),
        linear-gradient(160deg, rgb(31 24 50 / 92%), rgb(11 15 29 / 94%));
    border: 1px solid rgb(157 105 55 / 52%);
    border-radius: calc(var(--radius) - 4px);
}

.card-plate__back::before {
    position: absolute;
    inset: 4px;
    border: 1px solid rgb(157 105 55 / 26%);
    border-radius: 3px;
    content: '';
}

.card-plate__back svg {
    width: 58%;
    height: auto;
    opacity: 0.72;
}

/* A reversed card is drawn upside down — components.css already turns the
   glyph and the drawn face; the back has to turn with them or a mixed row
   would be half upright. */
.card-plate--reversed .card-plate__back {
    transform: rotate(180deg);
}

/* The orientation is the one word on the plate that changes what the card
   means, so it is not muted grey with everything else. */
.card-plate--reversed .card-plate__orientation {
    color: var(--color-warning);
}

.rd-draw .card-row__deck,
.rd-draw .field__help {
    padding-block-start: var(--space-2);
    text-align: center;
    border-block-start: 1px solid var(--color-border-soft);
}

/* =============================================================================
   The reading itself (spec sec. 112)

   The order — cards, short answer, main theme, detail, what is in your favour,
   what to watch, the Čaroděj's view, follow-up questions — arrives sorted from
   ReadingSectionMapper. What this file decides is the *weight* of each step,
   and the decision is that they are not all the same weight.

   Before: eleven identical framed boxes down a column, which is a table of
   contents pretending to be a document. Now three registers:

   - the short answer is a lit plate — it is the sentence somebody will repeat
     to a friend, and it is the only plate that glows;
   - the prose sections are set on the page, separated by brass hairlines, the
     way an article is set. No box, because a box around a paragraph tells the
     reader the paragraph is a component;
   - the lists and the questions keep a quiet plate, because they are objects
     rather than prose.
   ============================================================================= */

/* --- the short answer ------------------------------------------------------ */

.rd-answer {
    position: relative;
    padding: var(--space-6) var(--space-6) var(--space-6) calc(var(--space-6) + 2px);
    border-color: var(--color-gold-light);
    box-shadow: var(--plate-shadow), 0 0 44px -20px rgb(224 175 103 / 70%);
}

.rd-answer .reading-section__title {
    font-size: var(--text-2xl);
    font-weight: 390;
}

.rd-answer .reading-section__body {
    font-size: var(--text-lg);
    line-height: 1.75;
    color: var(--color-text);
}

/* The house mark in the corner: "this is the plate that matters". A star and
   not a bracket — two hairlines meeting at a corner read as a rendering
   artefact at this size, which is what they were doing. */
.rd-answer::after {
    position: absolute;
    inset-block-start: var(--space-4);
    inset-inline-end: var(--space-5);
    font-size: var(--text-sm);
    line-height: 1;
    color: rgb(224 175 103 / 55%);
    pointer-events: none;
    content: '✦';
}

/* --- prose ---------------------------------------------------------------- */

.rd-section--prose,
.rd-questions {
    gap: var(--space-4);
    padding-block-start: var(--space-6);
    border-block-start: 1px solid var(--color-border-soft);
}

.rd-section--prose .reading-section__title,
.rd-questions .reading-section__title {
    display: flex;
    gap: 11px;
    align-items: baseline;
    font-size: var(--text-xl);
}

.rd-section--prose .reading-section__title::before,
.rd-questions .reading-section__title::before {
    flex: none;
    align-self: center;
    width: 22px;
    height: 1px;
    background: var(--color-gold);
    content: '';
}

.rd-section--prose .reading-section__body {
    padding-inline-start: 33px;
}

/* A "view" section belongs to a Velký výklad, where three traditions answer the
   same question in turn (spec sec. 57). Its eyebrow is what tells them apart,
   so it sits above the rule rather than inside the prose. */
.rd-section--prose .card__eyebrow {
    order: -1;
}

@media (max-width: 599px) {
    .rd-section--prose .reading-section__body {
        padding-inline-start: 0;
    }
}

/* --- lists ---------------------------------------------------------------- */

.rd-section--list {
    padding: var(--space-5);
}

.rd-section--list .reading-section__title {
    font-size: var(--text-lg);
}

.rd-list--positive {
    border-inline-start: 2px solid rgb(121 194 148 / 55%);
}

.rd-list--warning {
    border-inline-start: 2px solid rgb(224 168 91 / 60%);
}

/* --- the follow-up questions (spec sec. 113) ------------------------------- */

/* They were rendered as three identical filled buttons, which made the bottom
   of every reading look like a checkout. They are not calls to action; they are
   three doors, and each one is a question in the Čaroděj's own voice. So they
   are set in the display serif on a quiet plate, with the arrow that says the
   click starts a new reading. */
.rd-questions .reading-followups {
    gap: var(--space-3);
    padding-inline-start: 33px;
}

@media (max-width: 599px) {
    .rd-questions .reading-followups {
        padding-inline-start: 0;
    }
}

/* `.rd-question` — a link that is a whole sentence, on a plate — is promoted
   to components.css as `.question-door`. */

/* --- the two notes at the foot of a finished reading ----------------------- */

/* The keepsake PDF and "when to come back" are housekeeping, not reading, so
   they go side by side under a rule instead of continuing the column of plates
   that the reading itself is set in. */
.rd-coda {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--space-4);
    padding-block-start: var(--space-6);
    border-block-start: 1px solid var(--color-border-soft);
}

.rd-coda .card {
    background: var(--plate-fill-soft);
    border-color: var(--color-border-soft);
}

/* =============================================================================
   Paywall (spec sec. 82)

   The seam is the whole design problem. A preview has to look like a reading
   that has been *stopped*, not like a reading that is short — and it has to do
   that without pretending there is text where there is none. So: the free
   sections end, a brass tear-line crosses the column with a mark on it, and
   under it the offer names exactly what is behind the lock. Nothing is blurred
   and no ghost paragraphs are drawn, because both would be a picture of
   writing we are not showing.
   ============================================================================= */

/* `.rd-seam` is promoted to components.css as `.seam`. */

.rd-paywall {
    padding: var(--space-7) var(--space-6);
}

.rd-paywall .paywall__title {
    font-size: var(--text-2xl);
    font-weight: 390;
}

.rd-paywall .paywall__note {
    max-width: 52ch;
    font-size: var(--text-base);
    line-height: 1.75;
    color: var(--color-text-soft);
}

/* What is behind the lock, as a plate of its own inside the offer: the four
   headings are the only concrete thing on this screen and they were reading as
   a bullet list under a sentence. */
.rd-paywall .paywall__contents {
    gap: var(--space-2);
    width: min(100%, 26rem);
    padding: var(--space-4) var(--space-5);
    text-align: start;
    background: rgb(200 145 76 / 7%);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-control);
}

.rd-paywall .paywall__price {
    font-size: var(--text-3xl);
    line-height: 1;
    color: var(--color-gold-bright);
}

.rd-paywall .field__help,
.rd-paywall .auth__link {
    max-width: 48ch;
    text-align: center;
}

/* =============================================================================
   Ordering a reading — the question form (spec sec. 111, 81)

   One field, and the page has to make that feel like the beginning of something
   rather than like a support ticket. The textarea is therefore tall, the plate
   is lit, and the price sits under a rule as a stated fact rather than as a
   second decision.
   ============================================================================= */

.rd-ask {
    padding: var(--space-6);
}

.rd-ask .textarea {
    min-height: 8.5rem;
    font-size: var(--text-md);
    line-height: 1.7;
}

/* The price line. A bordered strip rather than a paragraph, because it is the
   answer to the question somebody is actually asking at this moment. */
.rd-terms {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5);
    background: rgb(200 145 76 / 6%);
    border: 1px solid var(--color-border-soft);
    border-inline-start: 2px solid var(--color-gold);
    border-radius: var(--radius-control);
}

.rd-terms > p {
    font-size: var(--text-base);
    line-height: 1.7;
    color: var(--color-text-soft);
}

.rd-terms .badge {
    margin-inline-end: var(--space-2);
}

/* =============================================================================
   Karta dne (spec sec. 68)

   The one free thing on the site, and it had no picture at all — a heading, two
   sentences and a button. It gets the card back the plates use, at the size of
   an offer, so that "vytáhnout kartu" has something to be about.
   ============================================================================= */

.rd-daily {
    display: grid;
    grid-template-columns: 9.5rem minmax(0, 1fr);
    gap: var(--space-6);
    align-items: center;
    padding: var(--space-6);
}

.rd-daily__back {
    width: 100%;
    aspect-ratio: 5 / 7;
    max-width: 9.5rem;
}

.rd-daily__back svg {
    opacity: 0.8;
}

@media (max-width: 599px) {
    .rd-daily {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        text-align: center;
    }

    .rd-daily .cluster,
    .rd-daily form.cluster {
        justify-content: center;
    }
}

/* =============================================================================
   The list of readings

   A date stamp in the margin, because a list of readings is a diary and the
   question people scan it with is "when was that". The stamp is set in the
   display serif and in tabular figures, so a column of them lines up.
   ============================================================================= */

.rd-row {
    gap: var(--space-4);
}

.rd-row__head {
    display: grid;
    grid-template-columns: 3.6rem minmax(0, 1fr);
    gap: var(--space-4);
}

/* The stamp in the margin is promoted to components.css as `.date-stamp`. */

.rd-row__body {
    display: grid;
    gap: var(--space-2);
    min-width: 0;
}

.rd-row .card__title {
    font-size: var(--text-lg);
    line-height: 1.3;
}

.rd-row .card__title a {
    transition: color var(--transition-fast);
}

.rd-row:hover .card__title a {
    color: var(--color-gold-light);
}

.rd-row .reading-row__teaser {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.rd-row__foot {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
    padding-block-start: var(--space-4);
    border-block-start: 1px solid var(--color-border-soft);
}

/* The stamp in the margin carries the day and the month; the hour belongs with
   the row's other facts rather than in a heading. */
.rd-row__when {
    margin-inline-start: auto;
    font-size: var(--text-xs);
    color: var(--color-muted);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 479px) {
    .rd-row__head {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-2);
    }
}

/* The waiting plate gets the sky the homepage hero has, so that a minute spent
   looking at it is spent looking at something. */
.rd-wait {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 50% 40%, rgb(38 25 71 / 42%), transparent 62%),
        var(--plate-fill);
}

.rd-wait .reading-wait__title {
    font-size: var(--text-2xl);
}

/* =============================================================================
   The Čaroděj — chat (spec sec. 58–61)

   The transcript is the product here, so it gets the room: the composer is a
   plate under it rather than a bare form, the Čaroděj's turns carry his mark,
   and the tool line is a caption across the column rather than a stray
   sentence.
   ============================================================================= */

.rd-thread {
    gap: var(--space-5);
}

/* Who is speaking. The mark is the same sigil the site signs itself with, at
   the size of a bullet — the Čaroděj's turns are the only ones that get it,
   which is the asymmetry the components file already states in the plates. */
.rd-who {
    display: inline-flex;
    gap: var(--space-2);
    align-items: center;
}

/* The mark takes the brass rather than the label's colour: the turn label is
   muted by design, and a muted grey sigil is a smudge. */
.rd-who svg {
    flex: none;
    color: var(--color-gold);
    opacity: 0.9;
}

.chat-turn--wizard .chat-turn__body,
.chat-bubble--wizard .chat-bubble__body {
    border-inline-start: 2px solid var(--color-gold);
}

/* A user turn is recessed rather than raised: the visitor's own words are not
   the thing on the page that should be lit. */
.chat-turn--user .chat-turn__body,
.chat-bubble--user .chat-bubble__body {
    background: rgb(9 12 25 / 82%);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 3%);
}

/* The tool line: "Čaroděj listuje vaším Grimoárem…", set as a caption between
   two rules across the whole column. It is the proof that he went and looked
   something up, and it should read as stage direction — present, quiet, not a
   message. */
.rd-activity {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: var(--space-3);
    align-items: center;
    justify-self: stretch;
    font-style: italic;
}

.rd-activity::before,
.rd-activity::after {
    height: 1px;
    background: var(--rule-gold-fade);
    animation: none;
    content: '';
}

/* `.chat-activity::after` in components.css is an animated ellipsis, which is
   wrong twice over here: every label already ends in one — "Čaroděj hází
   runy…" — so it rendered as two, and a transcript row is a thing that
   happened rather than a thing happening. The rule replaces it. */
.rd-activity::after {
    transform: scaleX(-1);
}

.rd-activity__text {
    display: inline-flex;
    gap: var(--space-2);
    align-items: baseline;
    font-size: var(--text-sm);
    color: var(--color-muted);
}

.rd-activity__text::before {
    font-style: normal;
    color: var(--color-gold);
    content: '✦';
}

.rd-thread .chat-turn__play {
    margin-block-start: var(--space-1);
}

/* --- the composer --------------------------------------------------------- */

.rd-composer {
    padding: var(--space-5);
    background: var(--plate-fill);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--plate-shadow);
}

.rd-composer .textarea {
    min-height: 6.5rem;
    line-height: 1.7;
}

.rd-composer .chat-compose__actions {
    gap: var(--space-3) var(--space-5);
    padding-block-start: var(--space-1);
}

.rd-composer .chat-quota {
    max-width: 44ch;
    line-height: 1.5;
}

.rd-composer .chat-compose__persona .field {
    max-width: 22rem;
}

/* --- the thread list ------------------------------------------------------ */

.rd-conversations {
    display: grid;
    gap: var(--space-2);
}

.rd-conversations .conversation-row {
    grid-template-columns: 1rem minmax(0, 1fr) auto;
    gap: var(--space-2) var(--space-3);
    align-items: baseline;
    padding: var(--space-4);
    background: var(--plate-fill-soft);
}

.rd-conversations .conversation-row::before {
    align-self: center;
    font-size: var(--text-sm);
    line-height: 1;
    color: var(--color-gold);
    content: '✦';
}

.rd-conversations .conversation-row__title {
    font-size: var(--text-lg);
}

@media (max-width: 479px) {
    .rd-conversations .conversation-row {
        grid-template-columns: 1rem minmax(0, 1fr);
    }

    .rd-conversations .conversation-row__when {
        grid-column: 2;
    }
}

/* The three openers under the composer. They are `.filter-chip`s from the
   catalogue, but a whole sentence is not a filter, so they wrap and sit on the
   text baseline instead of staying on one line. */
.rd-openers .filter-chip {
    height: auto;
    min-height: 34px;
    padding-block: 6px;
    text-transform: none;
    letter-spacing: 0.01em;
    white-space: normal;
}

/* =============================================================================
   Grimoár (spec sec. 64–65)
   ============================================================================= */

/* The one block on the page that asks for something rather than telling. Lit,
   because it is easy to scroll past a year of your own history. */
.rd-ask-back {
    border-color: var(--color-gold-light);
    box-shadow: var(--plate-shadow), 0 0 36px -20px rgb(224 175 103 / 60%);
}

.rd-ask-back .export-list {
    display: grid;
    gap: var(--space-2);
}

.rd-ask-back .export-list a {
    font-family: var(--font-serif);
    font-size: var(--text-md);
    color: var(--color-text);
    text-decoration: none;
}

.rd-ask-back .export-list a:hover {
    color: var(--color-gold-light);
}

/* --- the themes of the year (spec sec. 65) --------------------------------- */

/* The bar is a comparison between five themes, not a progress meter, so it is
   short and the count sits next to it. Stretched across the plate it read as
   five full bars saying nothing — which is exactly what a chart with no
   contrast does. */
.rd-themes .theme-row {
    grid-template-columns: minmax(5rem, 9rem) minmax(0, 15rem) 2.6rem;
    gap: var(--space-4);
    justify-content: start;
}

.rd-themes .theme-row__name {
    font-size: var(--text-base);
    color: var(--color-text);
}

.rd-themes .theme-row__bar {
    height: 4px;
    background: rgb(157 105 55 / 14%);
}

.rd-themes .theme-row__count {
    font-size: var(--text-base);
    color: var(--color-gold-light);
}

/* On a phone the three columns will not fit on one line, and left to itself the
   grid put the name on its own row and then floated the count away from the bar
   it belongs to. Name over bar, count beside the bar. */
@media (max-width: 599px) {
    .rd-themes .theme-row {
        grid-template-columns: minmax(0, 1fr) 2.6rem;
        gap: var(--space-1) var(--space-3);
    }

    .rd-themes .theme-row__name {
        grid-column: 1 / -1;
    }

    .rd-themes .theme-row__bar {
        grid-column: 1;
    }

    .rd-themes .theme-row__count {
        grid-column: 2;
    }
}

.rd-themes__sentence {
    font-size: var(--text-lg);
    line-height: 1.6;
}

.rd-themes__sentence strong {
    color: var(--color-gold-light);
}

/* --- the timeline --------------------------------------------------------- */

/* A month is a chapter heading, and the entries under it are diary rows: a date
   in the margin, a title in the display serif, and the note underneath. The
   spine and the dot are components.css's; what is added here is the margin and
   the fact that a title is not underlined — a whole timeline of underlined
   links reads as a search results page. */
.rd-journal {
    display: grid;
    gap: var(--space-7);
}

.rd-journal .timeline__month {
    font-size: var(--text-xl);
}

.rd-journal .timeline-entry {
    padding-block-end: var(--space-4);
}

.rd-journal .timeline-entry + .timeline-entry {
    border-block-start: 1px solid var(--color-border-soft);
    padding-block-start: var(--space-4);
}

.rd-journal .timeline-entry:last-child {
    padding-block-end: 0;
}

.rd-journal .timeline-entry::before {
    inset-block-start: 9px;
}

.rd-journal .timeline-entry + .timeline-entry::before {
    inset-block-start: calc(var(--space-4) + 9px);
}

.rd-journal .timeline-entry__title {
    font-size: var(--text-lg);
    line-height: 1.35;
}

/* The title is a link to the reading, and a link inside a <p> is underlined by
   the base stylesheet. Here it must not be: the underline is what turned the
   Grimoár into a list of URLs. */
.rd-journal .timeline-entry__title a {
    color: var(--color-text);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.rd-journal .timeline-entry__title a:hover {
    color: var(--color-gold-light);
    text-decoration: none;
}

.rd-journal .timeline-entry__body {
    max-width: 68ch;
    color: var(--color-text-soft);
}

.rd-journal .timeline-entry__head {
    gap: var(--space-2);
}

/* --- what the Čaroděj remembers (spec sec. 25, 103) ------------------------ */

/* One sentence, one plate, one "Zapomenout". The quotation mark is the whole
   point of the page: these are sentences somebody said or that were concluded
   about them, and they are shown as quotations rather than as records. */
.rd-memories {
    display: grid;
    gap: var(--space-3);
    padding: 0;
    margin: 0;
    list-style: none;
}

/* `.rd-memory` — the quoted sentence with a control after it — is promoted to
   components.css as `.memory-quote`. */

/* The long-term summary is the one paragraph on the page written *about*
   somebody, so it gets the plate rather than the quotation. */
.rd-summary .memory__text {
    font-size: var(--text-lg);
    line-height: 1.8;
    color: var(--color-text);
}

/* --- the follow-up answer form (spec sec. 62–63) --------------------------- */

.rd-followup .rd-head .section-header__title {
    font-size: var(--text-2xl);
    max-width: 26ch;
}

.rd-followup .choices {
    gap: var(--space-2);
}

/* =============================================================================
   The `.rd-` components in this file

   Five of them were promoted to components.css in the phase 2 consolidation and
   are declared there under both names, so the templates in this group did not
   change:

     .rd-head / .rd-head__meta        → .page-head--ruled / .page-head__meta
     .rd-seam                         → .seam
     .rd-question                     → .question-door
     .rd-row__stamp / __day / __month → .date-stamp / __day / __month
     .rd-memory                       → .memory-quote

   Still here, and genuinely local — every one of them is about a reading, a
   thread or the Grimoár specifically and would mean nothing on another page:
     .rd-draw, .rd-answer, .rd-section--*, .rd-coda, .rd-paywall, .rd-ask,
     .rd-terms, .rd-daily, .rd-wait, .rd-thread, .rd-who, .rd-activity,
     .rd-composer, .rd-conversations, .rd-openers, .rd-ask-back, .rd-themes,
     .rd-journal, .rd-summary, .rd-followup, .rd-row, .rd-questions, .rd-memories
   ============================================================================= */

/* The credit alternative beside the money price on the paywall — a quieter
   second line so „nebo N kouzel" reads as the same offer in another currency,
   not as a separate charge. */
.paywall__price-or {
    display: block;
    margin-top: 0.25rem;
    font-size: var(--text-base, 1rem);
    font-weight: 500;
    color: var(--color-muted);
    letter-spacing: normal;
}