/* =============================================================================
   Čaroděj — page styles, layer 3: the methods.

   One file for five areas that are the same page seen five times: astrology,
   numerology, the dream journal, the vision features (palm, coffee grounds,
   a spread photographed at home) and the thirteen service landings under
   `/sluzby/*`. They share a stylesheet because they share a shape — a band the
   page opens with, an engraved plate beside the copy, and a column of framed
   surfaces under it — and splitting that shape across five files would be five
   chances for it to drift.

   Everything here is named `mt-` (methods) except where it dresses a component
   that already exists in `components.css`, and those are scoped under
   `.page-method` so the component keeps its plain form everywhere else. The
   `mt-` pieces that earn promotion are listed at the foot of this file.

   Loading order: app.css → components.css → pages/home.css → this. It may use
   every token and every component; nothing outside these five areas may use
   what is declared here.
   ============================================================================= */

/* =============================================================================
   The opening band

   The mockup opens every band the same way: an opaque ground of its own, a
   nebula behind the middle, a star field over it and a brass hairline closing
   it at the bottom. `.mt-hero` is that band at page-opener size, and it is the
   one thing every page in this group has.

   It paints its own ground and star field for the reason the homepage's bands
   do — the fixed `body::before` sky is behind the page, and a band that reads
   as a separate plane has to be in front of it and bring its own.
   ============================================================================= */

.mt-hero {
    position: relative;
    isolation: isolate;
    padding-block: var(--space-7) var(--space-8);
    overflow: hidden;
    background:
        radial-gradient(ellipse 60% 70% at 50% 42%, rgb(26 22 52 / 78%), transparent 70%),
        radial-gradient(ellipse 40% 50% at 76% 38%, rgb(41 27 74 / 40%), transparent 70%),
        var(--color-band);
}

/* The star field, denser than the page's own so the band reads as sky rather
   than as a panel that happens to be darker. */
.mt-hero::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    background-image:
        radial-gradient(circle at 22% 19%, rgb(255 221 160 / 82%) 0 1px, transparent 1.5px),
        radial-gradient(circle at 71% 31%, rgb(255 218 145 / 68%) 0 1px, transparent 1.5px),
        radial-gradient(circle at 48% 73%, rgb(195 143 81 / 44%) 0 1px, transparent 1.5px);
    background-size: 207px 183px, 263px 227px, 171px 159px;
    opacity: 0.5;
    content: '';
}

/* The rule that closes the band, inset from the page edge the way the
   homepage's offering rules are. */
.mt-hero::after {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    width: min(100% - 80px, var(--content-wide));
    height: 1px;
    margin-inline: auto;
    background: var(--rule-gold);
    content: '';
}

.mt-hero__inner {
    display: grid;
    gap: var(--space-6);
    align-items: center;
    width: min(100% - 2 * var(--space-5), var(--content));
    margin-inline: auto;
}

.mt-hero__copy {
    position: relative;
    z-index: 2;
    display: grid;
    gap: var(--space-4);
    justify-items: start;
}

.mt-hero--centered .mt-hero__copy {
    justify-items: center;
    text-align: center;
}

.mt-hero__title {
    max-width: 18ch;
    font-family: var(--font-serif);
    font-size: var(--text-4xl);
    font-weight: 390;
    line-height: 1.14;
    letter-spacing: -0.02em;
}

/* The mockup's second phrase, in the accent — „Hvězdná mapa okamžiku, *kdy
   jste se narodili*". A page that has nothing to emphasise simply does not
   write the span. */
.mt-hero__title span {
    color: var(--color-accent-text);
}

.mt-hero--centered .mt-hero__title {
    max-width: 22ch;
}

.mt-hero__lead {
    max-width: 58ch;
    font-size: var(--text-md);
    font-weight: 430;
    line-height: 1.85;
    color: var(--color-text-soft);
}

/* A row of facts under the lede — a birth date, a date range, an element —
   set in brass and separated by the mockup's middle dot. */
.mt-hero__facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    padding: 0;
    margin: 0;
    font-size: var(--text-xs);
    font-weight: 550;
    color: var(--color-gold-light);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    list-style: none;
}

.mt-hero__facts > li + li::before {
    margin-inline-end: var(--space-4);
    color: rgb(200 145 76 / 55%);
    content: '·';
}

.mt-hero__art {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
}

@media (min-width: 56rem) {
    .mt-hero__inner {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
        gap: var(--space-8);
    }

    /* The minimum is the art's, not the band's: a hero with a plate beside the
       copy needs the room, and one without it would otherwise sit in the middle
       of three hundred pixels of nothing. */
    .mt-hero:not(.mt-hero--plain, .mt-hero--centered) .mt-hero__inner {
        min-height: 320px;
    }

    /* The art on the left, the copy still first in the reading order — the
       homepage's `.offering--reverse` trick, for the same reason. */
    .mt-hero--reverse .mt-hero__copy {
        grid-column: 2;
        grid-row: 1;
    }

    .mt-hero--reverse .mt-hero__art {
        grid-column: 1;
        grid-row: 1;
    }

    /* A page whose art is the subject rather than the ornament — the natal
       wheel — gives the picture the wider half. */
    .mt-hero--wide .mt-hero__inner {
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    }
}

/* A hero with no art at all: a form, a journal, anything whose first screen is
   the thing itself. It keeps the band and drops the second column. */
.mt-hero--plain .mt-hero__inner,
.mt-hero--centered .mt-hero__inner {
    grid-template-columns: minmax(0, 1fr);
}

.mt-hero--centered .mt-hero__inner {
    justify-items: center;
}

/* =============================================================================
   The engraved plate

   The mockup's art is a gilded figure inside a double frame on a nebula — the
   globe beside „Hvězdná mapa okamžiku", the two rings beside „Vy, ten druhý",
   the moon beside „Symboly, které se vracejí". Three pictures for three rows;
   this group has thirty-odd rows and thirteen services, so the plate is drawn
   rather than photographed: the same frame, the same nebula, and a hairline
   figure per subject in `services/_plate.html.twig`.

   It is decoration in the strict sense — every plate is `aria-hidden` and the
   heading beside it carries the meaning — so a page with images off loses
   nothing but the ornament.
   ============================================================================= */

.mt-plate {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    max-width: 27rem;
    aspect-ratio: 1000 / 620;
    color: var(--color-gold-light);
    background:
        radial-gradient(ellipse 62% 70% at 50% 50%, rgb(63 36 96 / 62%), transparent 72%),
        radial-gradient(ellipse 100% 100% at 30% 20%, rgb(28 24 56 / 70%), transparent 76%),
        linear-gradient(150deg, rgb(20 16 38 / 92%), rgb(9 12 26 / 94%));
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--plate-shadow);
}

/* The inner hairline, inset the way the mockup's frames are — two rules a few
   pixels apart is what makes a rectangle read as engraved rather than as a box
   with a border. */
.mt-plate::before {
    position: absolute;
    inset: 7px;
    border: 1px solid rgb(157 105 55 / 34%);
    border-radius: calc(var(--radius) - 5px);
    pointer-events: none;
    content: '';
}

/* The star field inside the frame. */
.mt-plate::after {
    position: absolute;
    inset: 1px;
    background-image:
        radial-gradient(circle at 18% 24%, rgb(255 224 168 / 70%) 0 1px, transparent 1.4px),
        radial-gradient(circle at 74% 66%, rgb(226 186 132 / 50%) 0 1px, transparent 1.4px);
    background-size: 97px 83px, 71px 63px;
    border-radius: calc(var(--radius) - 1px);
    opacity: 0.5;
    pointer-events: none;
    content: '';
}

.mt-plate__glyph {
    position: relative;
    z-index: 1;
    width: min(58%, 13rem);
    height: auto;
    filter: drop-shadow(0 0 12px rgb(224 175 103 / 22%));
}

/* Card-shaped, for a service whose subject is a card rather than a sky. */
.mt-plate--tall {
    max-width: 15rem;
    aspect-ratio: 3 / 4;
}

.mt-plate--tall .mt-plate__glyph {
    width: min(66%, 9rem);
}

/* Small enough to sit at the head of a card in a grid. */
.mt-plate--sm {
    max-width: none;
    aspect-ratio: 1000 / 420;
    border-radius: var(--radius-control);
}

.mt-plate--sm::before {
    inset: 5px;
    border-radius: 3px;
}

.mt-plate--sm .mt-plate__glyph {
    width: min(40%, 5.5rem);
}

/* =============================================================================
   Bands and section openers inside a page

   `.mt-band` is the tarot strip of the homepage generalised: a full-width strip
   in `--color-band` with a brass hairline top and bottom, used to set „Jak to
   probíhá" or „Co se vám zdává" onto a different plane from the copy above it.
   ============================================================================= */

.mt-band {
    position: relative;
    padding-block: var(--space-8);
    background: var(--color-band);
    border-block: 1px solid var(--color-border-soft);
}

.mt-band--quiet {
    background: rgb(9 12 25 / 62%);
}

.mt-band__inner {
    display: grid;
    gap: var(--space-6);
    width: min(100% - 2 * var(--space-5), var(--content));
    margin-inline: auto;
}

/* The heading of a section inside a page: the brass label, a Fraunces h2 and
   an optional lede. The same three parts as `.page-head`, one size down,
   because a subpage has one h1 and several of these. */
.mt-head {
    display: grid;
    gap: var(--space-3);
    justify-items: start;
}

.mt-head--centered {
    justify-items: center;
    text-align: center;
}

.mt-head__title {
    font-family: var(--font-serif);
    font-size: var(--text-3xl);
    font-weight: 390;
    line-height: 1.16;
    letter-spacing: -0.02em;
}

.mt-head__title span {
    color: var(--color-accent-text);
}

.mt-head__lead {
    max-width: 62ch;
    font-size: var(--text-base);
    line-height: 1.8;
    color: var(--color-text-soft);
}

/* =============================================================================
   The offering row

   `.feature-row` from `components.css` is the undressed version of the
   mockup's `.offering`; these rules are the dress, and they are scoped so that
   the plain one survives everywhere else. Copy on one side, a plate on the
   other, alternating, with the brass rule the mockup closes each row with.
   ============================================================================= */

.page-method .feature-row {
    position: relative;
    align-items: center;
    border-bottom: 0;
}

.page-method .feature-row::after {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    height: 1px;
    background: var(--rule-gold);
    content: '';
}

.page-method .feature-row:last-child::after {
    content: none;
}

.page-method .feature-row__body {
    display: grid;
    gap: var(--space-4);
    justify-items: start;
}

.page-method .feature-row__body > .reading-list,
.page-method .feature-row__body > .steps {
    justify-self: stretch;
}

.page-method .feature-row__art {
    display: grid;
    place-items: center;
}

/* =============================================================================
   Service landings — /sluzby and /sluzby/{slug}

   Thirteen pages with one skeleton, so the skeleton is what is styled: a hero
   with the price beside it, „Jak to probíhá" on a band, the specimen, „Co
   dostanete" as an offering row, and the price again at the foot.
   ============================================================================= */

/* The price card in the hero is quieter than the one at the foot of the page:
   it is beside the claim rather than after the argument, and a full plate
   there competes with the h1. */
.mt-hero .price-grid {
    width: 100%;
    max-width: 34rem;
}

.mt-hero .price-card {
    padding: var(--space-4) var(--space-5);
    background: var(--plate-fill-soft);
    border-color: var(--color-border-soft);
}

.mt-hero .price-card__name {
    font-size: var(--text-lg);
}

.mt-hero .price-card__amount {
    font-size: var(--text-2xl);
}

/* The foot of a service page: the same offer, argued for, so it gets the full
   plate and room around it. */
.mt-close {
    display: grid;
    gap: var(--space-5);
    justify-items: center;
    text-align: center;
}

.mt-close .price-grid {
    width: 100%;
    max-width: 44rem;
}

.mt-close .price-card {
    text-align: start;
}

/* The signpost at /sluzby: one card per service, each with its own engraved
   mark at the top so thirteen offers are told apart by shape before they are
   read. */
.mt-service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--space-4);
}

.mt-service-grid .price-card {
    gap: var(--space-3);
    padding: 0;
    overflow: hidden;
}

.mt-service-grid .price-card > :not(.mt-plate) {
    margin-inline: var(--space-5);
}

.mt-service-grid .price-card > .card__eyebrow {
    margin-block-start: var(--space-4);
}

.mt-service-grid .price-card__cta {
    margin-block-end: var(--space-5);
}

/* Five steps in one row rather than four and an orphan. The component's own
   minimum is written for the homepage's three, and a fifth plate on a line of
   its own reads as an afterthought rather than as the last step. */
.page-service .steps {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
}

/* The standing legal note under a price — the sentence of spec sec. 130 that
   has to be within reach of the button rather than only in the footer. */
.mt-fineprint {
    max-width: 68ch;
    margin-inline: auto;
    font-size: var(--text-sm);
    line-height: 1.8;
    color: var(--color-muted);
    text-align: center;
}

/* =============================================================================
   Astrology — the wheel as the subject of its own page

   On `/ucet/astrologie` the diagram is not an illustration of the tables, it is
   what the page is: a stellium, a grand trine and an empty hemisphere are one
   glance in the wheel and invisible in eleven rows. So it opens the page at the
   size a chart is actually read at, with the Big Three beside it.

   `.chart-wheel` and its `+ .field__help` are load-bearing (WheelDisplayTest),
   so the caption stays the wheel's immediate next sibling and the layout is
   done on the wrapper.
   ============================================================================= */

.mt-chart {
    display: grid;
    gap: var(--space-6);
    align-items: center;
    width: 100%;
}

.mt-chart__wheel {
    display: grid;
    gap: var(--space-3);
    justify-items: center;
}

/* Bigger than the component's default 32rem, and framed, because here it is the
   hero of the page rather than a figure inside a card. */
.mt-chart__wheel .chart-wheel svg {
    width: min(100%, 34rem);
    filter: drop-shadow(0 0 26px rgb(224 175 103 / 12%));
}

.mt-chart__wheel .chart-wheel + .field__help {
    max-width: 40ch;
    font-size: var(--text-sm);
    line-height: 1.75;
    text-align: center;
}

.mt-chart__side {
    display: grid;
    gap: var(--space-5);
    align-content: center;
}

@media (min-width: 62rem) {
    .mt-chart {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
        gap: var(--space-8);
    }
}

/* The Big Three, beside the wheel rather than under it. The component's grid
   is horizontal; here it is three rows so the wheel keeps the width. */
.mt-chart__side .triad {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
    text-align: start;
}

.mt-chart__side .triad__item {
    display: grid;
    grid-template-columns: 2.6rem minmax(0, 1fr);
    gap: var(--space-3);
    align-items: center;
    text-align: start;
}

.mt-chart__side .triad__glyph {
    font-size: 2rem;
}

/* The Big Three carry a text glyph, not an SVG, and the component sizes
   `.triad__glyph` as a 3rem box for the icon case — which crops a character set
   at body size and leaves it sitting in the corner of its own square. */
.page-method .triad__glyph {
    display: grid;
    place-items: center;
    width: auto;
    height: 3rem;
    font-family: var(--font-serif);
    font-size: 2.25rem;
    line-height: 1;
}

/* The mood: the one line of a horoscope somebody reads if they read one line,
   so it is set at the size that says so rather than as the first of four
   sections. */
.mt-mood .reading-section__body {
    font-family: var(--font-serif);
    font-size: var(--text-xl);
    font-weight: 350;
    font-style: italic;
    line-height: 1.6;
    color: var(--color-gold-light);
}

/* „Co s tím" — the closing instruction, framed rather than set as another
   paragraph, because it is the only part of a horoscope that asks for
   something. */
.mt-advice {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5);
    background: var(--plate-fill-soft);
    border: 1px solid var(--color-border);
    border-inline-start-width: 3px;
    border-radius: var(--radius-sm);
}

/* A row of computed facts — the ascendant, the MC, the house system — set as a
   ledger rather than as a paragraph, because they are values and read as such. */
.mt-ledger {
    display: grid;
    gap: 0;
    padding: 0;
    margin: 0;
}

.mt-ledger > div {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    align-items: baseline;
    justify-content: space-between;
    padding-block: var(--space-2);
    border-bottom: 1px solid rgb(153 105 59 / 16%);
}

.mt-ledger > div:last-child {
    border-bottom: 0;
}

.mt-ledger dt {
    font-size: var(--text-xs);
    font-weight: 620;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.mt-ledger dd {
    margin: 0;
    font-family: var(--font-serif);
    font-size: var(--text-md);
    color: var(--color-text);
}

/* The zodiac plate a sign page opens with: the glyph at display size in the
   engraved frame. */
.mt-sign-plate {
    display: grid;
    place-items: center;
    width: min(100%, 16rem);
    aspect-ratio: 3 / 4;
}

.mt-sign-plate__glyph {
    position: relative;
    z-index: 1;
    font-family: var(--font-serif);
    font-size: clamp(4rem, 3rem + 6vw, 6.5rem);
    font-weight: 300;
    line-height: 1;
    color: var(--color-gold-bright);
    text-shadow: 0 0 24px rgb(224 175 103 / 30%);
}

/* The strip of the other eleven signs at the foot of a sign page. Not
   `.card-row--index`: SignHoroscopeControllerTest counts exactly twelve of
   those on the index, and a second grid with the same name on the detail page
   would be a second thing for that count to find if the two pages ever merged. */
.mt-signstrip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr));
    gap: var(--space-2);
    padding: 0;
    margin: 0;
    list-style: none;
}

.mt-signstrip a {
    display: grid;
    gap: 2px;
    justify-items: center;
    padding: var(--space-3) var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-text-soft);
    text-align: center;
    background: var(--plate-fill-soft);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-control);
    transition: border-color var(--transition-fast), color var(--transition-fast);
}

.mt-signstrip a:hover,
.mt-signstrip a[aria-current='page'] {
    color: var(--color-gold-light);
    border-color: var(--color-gold-light);
}

.mt-signstrip__glyph {
    font-family: var(--font-serif);
    font-size: var(--text-xl);
    line-height: 1.1;
    color: var(--color-gold-light);
}

/* The twelve plates on `/horoskop/znameni` carry the sign's glyph in the slot
   `.card-plate__position` normally uses for a small brass label, so on this one
   page that slot is drawn at plate size. Scoped to the zodiac: the numerology
   index puts real words there and would clip every one of them. */
/* Six and six rather than seven and five: the zodiac is twelve and reads as
   twelve when the two rows match. */
.page-astrology .card-row--index {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
}

.page-astrology .card-row--index .card-plate__position {
    font-family: var(--font-serif);
    font-size: var(--text-3xl);
    font-weight: 300;
    color: var(--color-gold-light);
    text-transform: none;
    letter-spacing: 0;
}

/* The mood list under them: two columns of one-line readings, each a link. */
.mt-moods {
    display: grid;
    gap: var(--space-3);
    padding: 0;
    margin: 0;
    list-style: none;
}

.mt-moods > li {
    display: grid;
    gap: var(--space-1);
    padding-block-end: var(--space-3);
    border-bottom: 1px solid rgb(153 105 59 / 16%);
}

.mt-moods > li:last-child {
    padding-block-end: 0;
    border-bottom: 0;
}

.mt-moods__sign {
    font-family: var(--font-serif);
    font-size: var(--text-md);
    color: var(--color-gold-light);
}

.mt-moods__text {
    font-size: var(--text-base);
    line-height: 1.7;
    color: var(--color-text-soft);
}

@media (min-width: 46rem) {
    .mt-moods {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-3) var(--space-6);
    }
}

/* =============================================================================
   Numerology — a number is never shown without its arithmetic

   `.numeral` already draws the plate; what it did not do is make the number
   look like the subject. Here it does: the value at display size in Fraunces,
   a brass rule under it, and the reduction underneath set as a ledger in the
   mono face — because the whole argument of spec sec. 45 is that the reader can
   check the sum.
   ============================================================================= */

.page-method .numeral {
    position: relative;
    gap: var(--space-3);
    padding-block-start: var(--space-5);
}

.page-method .numeral__value {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: baseline;
    padding-block-end: var(--space-3);
    font-size: clamp(2.75rem, 2rem + 3vw, 3.75rem);
    border-bottom: 1px solid rgb(153 105 59 / 26%);
}

.page-method .numeral__steps {
    gap: 2px;
    padding: var(--space-3);
    background: rgb(3 8 18 / 55%);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-sm);
}

.page-method .numeral__step {
    overflow-x: auto;
    white-space: nowrap;
}

/* The label above the reduction, so the block reads as a derivation rather than
   as a stray line of code. */
.mt-steps-label {
    font-size: var(--text-2xs);
    font-weight: 620;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

/* The index grids of twelve numbers and nine years. The number is the subject
   here, so it wears the display face and the label under it stays a label —
   the reverse of what the component assumes, because the component was written
   for a card whose name is the interesting part. */
.page-numerology .card-row--index {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr));
}

.page-numerology .card-row--index .card-plate {
    gap: var(--space-1);
    min-height: 7.5rem;
    align-content: center;
}

.page-numerology .card-row--index .card-plate__name--numeral {
    font-family: var(--font-serif);
    font-size: 2.5rem;
    font-weight: 250;
    line-height: 1;
    color: var(--color-gold-light);
}

.page-numerology .card-row--index .card-plate__position {
    font-size: var(--text-2xs);
    letter-spacing: 0.12em;
    /* A nine-year title („Trpělivost", „Uzavření") is one long word in a plate
       nine and a half rem wide, and the plate clips rather than breaks. */
    hyphens: auto;
    overflow-wrap: anywhere;
}

/* A number as the plate itself, for the twelve life-path pages and the nine
   personal-year ones. The classes inside it are `.card-plate`'s, because
   LifePathControllerTest reads the number as `.card-plate__name` and the little
   plate this replaced wore the same two. */
.mt-numeral-plate {
    gap: var(--space-2);
    place-items: center;
    padding: var(--space-5);
}

.mt-numeral-plate .card-plate__position {
    position: relative;
    z-index: 1;
    font-size: var(--text-2xs);
    font-weight: 620;
    color: var(--color-gold-light);
    text-transform: uppercase;
    letter-spacing: 0.18em;
}

.mt-numeral-plate .card-plate__name {
    position: relative;
    z-index: 1;
    font-family: var(--font-serif);
    font-size: clamp(3.5rem, 2.5rem + 5vw, 5.5rem);
    font-weight: 250;
    line-height: 1;
    color: var(--color-gold-bright);
    text-shadow: 0 0 26px rgb(224 175 103 / 28%);
}

/* The calculator on `/numerologie`: the mockup's hero form, one field wide. */
.mt-calc {
    display: grid;
    gap: var(--space-5);
    padding: var(--space-6);
    background:
        radial-gradient(ellipse 70% 90% at 50% 0%, rgb(45 30 78 / 42%), transparent 70%),
        var(--plate-fill);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--plate-shadow);
}

.mt-calc__form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-4);
    align-items: flex-end;
}

.mt-calc__form > .field,
.mt-calc__form > .form-field {
    flex: 1 1 14rem;
}

.mt-calc__result {
    display: grid;
    gap: var(--space-4);
    padding-block-start: var(--space-5);
    border-top: 1px solid var(--color-border-soft);
}

/* The match rows on `/ucet/numerologie`: two columns on a wide screen — who,
   and how the two numbers get on — rather than four stacked paragraphs. */
.page-method .match-row {
    gap: var(--space-2) var(--space-5);
    align-items: baseline;
}

@media (min-width: 40rem) {
    .page-method .match-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    }
}

/* =============================================================================
   The dream journal

   A night's page: the entry itself is set larger and softer than body copy,
   because it is somebody's own writing and it is what they came back to read.
   ============================================================================= */

/* „Co se vám zdává" — the counts, on the band, so the journal underneath reads
   as the document and this reads as the note about it. */
.mt-journal-stats {
    display: grid;
    gap: var(--space-5);
}

/* `auto-fill`, not the component's `auto-fit`: a journal with feelings counted
   but no interpreted dream yet has exactly one tile, and `auto-fit` would
   stretch that one tile across the whole band. */
.page-dream .kpi-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
}

/* An entry's first line is the dream itself, so it is set as writing rather
   than as a link: six orange underlines down a page of nights is a list of
   links, and what somebody is looking at is their own journal. */
.page-dream .timeline-entry__title a {
    font-family: var(--font-serif);
    font-size: var(--text-md);
    color: var(--color-text);
    text-decoration-color: transparent;
    transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}

.page-dream .timeline-entry__title a:hover {
    color: var(--color-gold-light);
    text-decoration-color: currentcolor;
}

.page-method .dream-text {
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    font-weight: 350;
    line-height: 1.85;
    color: var(--color-text-soft);
}

/* The dream itself on its detail page: the same face, set as a passage with a
   brass margin rule, the way a quotation is set. */
.mt-dream-passage {
    padding-inline-start: var(--space-5);
    border-inline-start: 2px solid rgb(200 145 76 / 42%);
}

.mt-dream-passage .dream-text {
    font-size: var(--text-xl);
    line-height: 1.8;
    color: var(--color-text);
}

/* The search box and its chips, as one control strip rather than as a form
   floating between two cards. */
.page-method .journal-search {
    padding: var(--space-3) var(--space-4);
    background: var(--plate-fill-soft);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius);
}

/* The month heading of the timeline, with the rule the mockup closes a section
   with rather than the component's short dash. */
.page-method .timeline__month {
    display: flex;
    gap: var(--space-4);
    align-items: center;
}

.page-method .timeline__month::after {
    flex: 1 1 auto;
    height: 1px;
    background: var(--rule-gold-fade);
    content: '';
}

/* A symbol chip inside an entry, so „Symboly: voda, dům" reads as tags and not
   as a sentence with commas in it. */
.mt-symbols {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-2);
    align-items: baseline;
    font-size: var(--text-sm);
    color: var(--color-muted);
}

.mt-symbols a {
    padding: 1px 8px;
    color: var(--color-gold-light);
    text-decoration: none;
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-pill);
    transition: border-color var(--transition-fast), color var(--transition-fast);
}

.mt-symbols a:hover {
    color: var(--color-gold-bright);
    border-color: var(--color-gold-light);
}

/* =============================================================================
   Vision — photographs going in, plates coming out

   The upload slot is a drop zone with a form inside it, and the component's
   `place-items: center` fights a form that wants to be a column. Here it is a
   column, centred, with room for the picture.
   ============================================================================= */

.page-method .upload-slots {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: var(--space-4);
}

.page-method .upload-slot {
    display: grid;
    gap: var(--space-3);
    align-content: start;
    justify-items: stretch;
    min-height: 14rem;
    padding: var(--space-4);
    text-align: start;
}

/* `.stack`'s owl margin and the grid's gap would double up on every slot. */
.page-method .upload-slot.stack > * + * {
    margin-block-start: 0;
}

.page-method .upload-slot .card__eyebrow {
    color: var(--color-gold-light);
}

.page-method .upload-slot__preview {
    margin: 0;
}

.page-method .upload-slot__preview img {
    max-height: 15rem;
    border: 1px solid var(--color-border-soft);
}

.page-method .upload-slot form {
    display: grid;
    gap: var(--space-3);
}

/* The deletion checkbox of spec sec. 105 is a `.field--check` with three
   children — the box, its label and the sentence explaining what unticking
   means — and the component's two columns were written for two. The help text
   lands in the first column, widens it to its own measure and squeezes the
   label into a strip at the right-hand edge. The sentence belongs under both,
   so it spans them.

   This is a `components.css` bug rather than a vision one — every three-part
   checkbox on the site has it — and the fix wants promoting there. It is
   scoped here because this file may not name a component outside its own
   areas. */
.page-method .field--check > .field__help,
.page-method .field--check > .form-field__help,
.page-method .field--check > .field__error {
    grid-column: 1 / -1;
}

/* And the same component styles the check's label as `.label` only, while the
   form theme writes `.field__label` — so the one on a checkbox keeps the
   uppercase brass of a field label above an input. */
.page-method .field--check > .field__label {
    font-size: var(--text-base);
    font-weight: 400;
    color: var(--color-text-soft);
    text-transform: none;
    letter-spacing: 0;
}

/* The empty slot's mark: an engraved frame corner, so a slot with nothing in it
   still reads as a place a picture goes. */
.mt-slot-mark {
    display: grid;
    place-items: center;
    padding-block: var(--space-4);
    color: rgb(224 175 103 / 55%);
}

.mt-slot-mark svg {
    width: 3.5rem;
    height: auto;
}

/* „Jak fotit" — the four rules, as a list with brass markers rather than
   bullets, because they are the difference between a reading and a refusal. */
.mt-howto {
    display: grid;
    gap: var(--space-3);
    padding: 0;
    margin: 0;
    list-style: none;
}

.mt-howto > li {
    position: relative;
    padding-inline-start: var(--space-6);
    font-size: var(--text-base);
    line-height: 1.75;
    color: var(--color-text-soft);
}

.mt-howto > li::before {
    position: absolute;
    inset-inline-start: 0;
    color: var(--color-gold-light);
    content: '✦';
}

/* The confirmation screen of a photographed spread: one plate per position with
   two selects in it. `.card-plate--editable` had no rules at all before this —
   it was a plate whose contents were two full-width form controls in a box
   built for a name and a caption. */
.page-method .card-row--editable {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: var(--space-3);
    padding: 0;
    margin: 0;
    list-style: none;
}

.page-method .card-plate--editable {
    display: grid;
    gap: var(--space-2);
    align-content: start;
    aspect-ratio: auto;
    min-height: 0;
    padding: var(--space-4);
    text-align: start;
}

.page-method .card-plate--editable .field {
    gap: var(--space-1);
}

.page-method .card-plate--editable select {
    width: 100%;
    font-size: var(--text-sm);
}

.page-method .card-plate--editable .card-plate__position {
    color: var(--color-gold-light);
}

.page-method .card-plate--editable .card-plate__caption {
    margin-block-start: auto;
}

/* A plate the model was not sure about, marked so the eye lands on it first. */
.page-method .card-plate--doubtful {
    border-color: var(--color-warning);
}

/* The kept photographs on `/fotky`: the picture, its facts and one button, as a
   row rather than as a stack of cards a screen tall each. */
.mt-photo {
    display: grid;
    gap: var(--space-4);
    align-items: start;
}

.mt-photo__figure {
    margin: 0;
}

.mt-photo__figure img {
    width: 100%;
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-sm);
}

.mt-photo__body {
    display: grid;
    gap: var(--space-3);
    justify-items: start;
}

@media (min-width: 44rem) {
    .mt-photo {
        grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
        gap: var(--space-5);
    }
}

/* =============================================================================
   Small screens

   Nothing here changes what a page says, only how much room it takes. The rule
   the whole file is written to keep is the system's third: no horizontal
   overflow between 320 and 1920, which for this file means every plate is
   `width: 100%` of something, never a fixed pixel width.
   ============================================================================= */

@media (max-width: 56rem) {
    .mt-hero {
        padding-block: var(--space-6) var(--space-7);
    }

    .mt-hero__art {
        order: 2;
        width: 100%;
        max-width: 24rem;
        margin-inline: auto;
    }

    .mt-band {
        padding-block: var(--space-7);
    }
}

@media (max-width: 30rem) {
    .mt-hero__title {
        max-width: none;
    }

    .mt-plate {
        max-width: none;
    }

    .mt-plate--tall {
        max-width: 12rem;
    }
}

/* =============================================================================
   Worth promoting to components.css

   These four have no idea which of the five areas they are on and are already
   written for anything: `.mt-hero` (a band a subpage opens with), `.mt-plate`
   (the engraved frame), `.mt-band` (a strip on another plane) and `.mt-head`
   (a section opener under an h1). They stay here until a second area outside
   this file wants one — the system's rule is that a component earns
   `components.css` by being used twice, not by looking general.
   ============================================================================= */