/* =============================================================================
   Čaroděj — page styles: the account, the till and the small print.

   Layer 3 of the system (app.css → components.css → pages/*.css). One file for
   one group of pages, because they are one place: everything a signed-in
   person owns (`/ucet*`, `/prehled`, `/ucet/lide`, `/ucet/oznameni`), the
   pages where money changes hands (`/cenik`, `/platba/navrat/*`, `/darek`),
   the signed-out forms that lead into all of it, and the legal documents they
   all link to.

   Nothing here may be used outside those pages. Anything that turns out to be
   wanted by another area belongs one layer up, in components.css — the
   candidates are listed at the bottom of this file.

   Page-specific notes
   -------------------
   * `.acct-*` is the prefix for everything invented here.
   * The three test-visible shapes that constrain the markup: on `/ucet` the
     first `.card` must hold the profile summary and the first `.badge` the
     verification state; on `/ucet/oznameni` a notification title is the only
     `.card__title`; on `/ucet/predplatne` the first `.card__eyebrow` is the
     subscription state. The layout below works with those, not around them.
   * Two plates side by side is the default answer to a short block, and the
     reason is the brief's: a page of full-width plates each holding three
     lines is a page of empty plates.
   ============================================================================= */

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

   Every page in this group opens the same way: brass label, Fraunces title,
   one paragraph, and a hairline that closes the head off from the content the
   way the mockup closes its sections.
   ============================================================================= */

.acct-head {
    position: relative;
    padding-block-end: var(--space-5);
    margin-block-end: var(--space-6);
}

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

.page-head--centered.acct-head::after {
    background: var(--rule-gold);
}

/* A labelled run of content inside a page: brass label, optional Fraunces
   heading, optional lead, then whatever the section holds. */
.acct-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
}

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

.acct-section > .section-label + .acct-section__title,
.acct-section > .section-label + .acct-section__lead {
    margin-block-start: calc(var(--space-4) * -1 + var(--space-1));
}

.acct-section__lead {
    margin-block-end: var(--space-1);
}

/* =============================================================================
   Layout: the two-column split and the tile grid

   `.acct-split` — "a thing and its companion" — is promoted to components.css
   as `.split`. `.acct-grid` is "n of the same" and stays here.
   ============================================================================= */

.acct-aside {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
}

.acct-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: var(--space-4);
}

.acct-grid--people {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.acct-grid--vouchers {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

/* Two form fields that are one fact asked twice — a date and a time of birth. */
.acct-field-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
}

@media (width >= 34rem) {
    .acct-field-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.acct-actions {
    margin-block-start: var(--space-2);
}

.acct-footnote {
    margin-block-start: var(--space-4);
}

/* =============================================================================
   Panels

   `.acct-panel` is `.card` at page scale: the same plate, a little more air
   inside, and a `.section-label` rather than a heading at the top of it.
   ============================================================================= */

.acct-panel {
    gap: var(--space-4);
    padding: var(--space-5) var(--space-5) var(--space-6);
}

.acct-panel > .section-label {
    margin-block-end: calc(var(--space-2) * -1);
}

.acct-panel__rule {
    margin-block: var(--space-2);
}

/* The plate that ends the account wears a different frame from every other
   plate in the group, so nobody arrives at it by scrolling. */
.acct-panel--danger {
    /* The danger token at plate strength; a border-colour token for it would
       be a fifth border in the system for one plate. */
    border-color: rgb(229 128 121 / 45%);
    box-shadow: var(--plate-shadow), inset 3px 0 0 rgb(229 128 121 / 55%);
}

.acct-panel__label--danger {
    color: var(--color-danger);
}

.acct-panel--danger .section-label--left::before {
    background: var(--color-danger);
}

.acct-panel--danger .btn--danger {
    align-self: start;
}

/* The empty plate and the invitation are promoted to components.css as
   `.panel--empty` / `.panel--invite` — the plate, its mark, the measure of its
   paragraph and the centred button — and `.acct-empty__title` was merged into
   the shared `.empty-state__title` there. What is left below is what the
   invitation does that the empty plate does not. */

.acct-panel--invite .account-fact {
    justify-items: center;
    text-align: center;
}

.acct-panel--invite .cluster {
    justify-content: center;
}

/* The fine print at the foot of a page: present, quiet, not a plate that competes with the
   content above it. */
.acct-fineprint {
    background: transparent;
    border-color: var(--color-border-soft);
    box-shadow: none;
}

/* =============================================================================
   Status pairs — promoted to components.css as `.status-pair`.
   ============================================================================= */

/* A date that is the answer to the block it sits in. */
.acct-date {
    font-family: var(--font-serif);
    font-size: var(--text-xl);
    font-weight: 400;
    color: var(--color-gold-light);
    font-variant-numeric: tabular-nums;
}

.acct-pending {
    margin-block-start: var(--space-2);
}

/* =============================================================================
   Tiles — the nine destinations on /ucet

   Promoted to components.css as `.tile` and declared there under both names.
   `.acct-tile__glyph` is still refined below by the two plates that borrow the
   mark without being a tile.
   ============================================================================= */

/* =============================================================================
   The invite block and the consent block
   ============================================================================= */

.acct-invite,
.acct-consent {
    gap: var(--space-3);
    padding: var(--space-5) var(--space-5) var(--space-6);
}

.acct-invite__code .account-code {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-lg);
    letter-spacing: 0.22em;
}

.acct-invite__link {
    font-size: var(--text-sm);
}

.acct-consent form {
    margin-block-start: var(--space-2);
}

/* The last row of /ucet: the mark, the sentence, and the two ways out. */
.acct-close {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3) var(--space-5);
    align-items: center;
}

@media (width >= 48rem) {
    .acct-close {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .acct-close__actions {
        justify-content: flex-end;
    }
}

.acct-close .acct-tile__glyph {
    width: 32px;
    opacity: 0.7;
}

/* =============================================================================
   Balance — /ucet/kredity

   The number is the page, so it is set at display size against the plate's
   other half, which says where more of them come from.
   ============================================================================= */

.acct-balance {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
    align-items: center;
    padding: var(--space-6) var(--space-5);
}

@media (width >= 44rem) {
    .acct-balance {
        grid-template-columns: minmax(0, auto) minmax(0, 1fr);
        gap: var(--space-7);
    }

    .acct-balance__aside {
        padding-inline-start: var(--space-6);
        border-inline-start: 1px solid var(--color-border-soft);
    }
}

.acct-balance__figure {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
}

.acct-balance .balance {
    align-items: baseline;
}

.acct-balance .balance__amount {
    font-size: clamp(3.25rem, 2rem + 5vw, 5rem);
    line-height: 0.9;
}

.acct-balance__aside {
    gap: var(--space-2);
}

.acct-balance__aside .cluster {
    margin-block-start: var(--space-2);
}

/* The ledger sits flush inside its plate — the table draws its own rules. */
.acct-ledger .data-table {
    min-width: 32rem;
}

/* „Moje platby" has three columns and fits a phone as it is: the receipt link
   in the last one must not sit past the edge of a sideways-scrolling table. */
.acct-ledger--payments .data-table {
    min-width: 0;
}

.acct-payment__meta {
    display: block;
}

/* „Částka" over its amounts: `.data-table th` aligns every heading to the
   start and outranks `.data-table__num` on its own. Kept to this table — the
   same rule site-wide would move the headings of the astrology tables too. */
.acct-ledger--payments th.data-table__num {
    text-align: end;
}

/* The four numbers beside the balance on /ucet/provize: a label and its
   figure on one line, the figures lined up at the end. */
.acct-facts {
    display: grid;
    gap: var(--space-2);
    margin: 0;
}

.acct-facts__row {
    display: flex;
    gap: var(--space-3);
    align-items: baseline;
    justify-content: space-between;
    padding-block-end: var(--space-2);
    border-block-end: 1px solid var(--color-border-soft);
}

.acct-facts__row dt {
    font-size: var(--text-sm);
    color: var(--color-muted);
}

.acct-facts__row dd {
    margin: 0;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* A date or an account number that must not break at its spaces or its hyphen
   („26. 9." on one line and „2026" on the next). */
.acct-nowrap {
    white-space: nowrap;
}

/* =============================================================================
   Notifications — /ucet/oznameni

   One brass rail down the left with a mark per entry, so the list reads as a
   run of time rather than as unrelated plates. The rail is decoration and is
   dropped below 40rem, where the indent would cost more than it says.
   ============================================================================= */

.acct-notices {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    padding: 0;
    margin: 0;
    list-style: none;
}

.acct-notices__item {
    position: relative;
}

@media (width >= 40rem) {
    .acct-notices {
        position: relative;
        padding-inline-start: var(--space-6);
    }

    .acct-notices::before {
        position: absolute;
        inset-block: var(--space-4);
        inset-inline-start: 5px;
        width: 1px;
        background: linear-gradient(to bottom, transparent, var(--color-border-soft) 12%, var(--color-border-soft) 88%, transparent);
        content: '';
    }

    .acct-notices__item::before {
        position: absolute;
        inset-block-start: var(--space-5);
        inset-inline-start: calc(var(--space-6) * -1);
        width: 11px;
        height: 11px;
        border: 1px solid var(--color-border);
        border-radius: 50%;
        content: '';
    }

    .acct-notices__item:has(.acct-notice--new)::before {
        background: var(--color-gold);
        border-color: var(--color-gold-light);
    }
}

.acct-notice {
    gap: var(--space-2);
}

.acct-notice .card__eyebrow {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}

.acct-notice--new {
    border-color: var(--color-border);
}

.acct-notice.notification--read {
    background: var(--plate-fill-soft);
    border-color: var(--color-border-soft);
    box-shadow: none;
}

/* =============================================================================
   People — /ucet/lide
   ============================================================================= */

.acct-person {
    gap: var(--space-3);
}

.acct-person__name {
    font-family: var(--font-serif);
    font-size: var(--text-xl);
    font-weight: 400;
    line-height: 1.2;
}

.acct-person__facts {
    min-height: 3.4em;
}

/* „Brno – nepotvrzené místo" (vizuální oponentura, 24. 9. 2026): a place kept
   as text, which nothing can be computed from yet. The words say it; the
   colour of a warning keeps it from reading as one more stored fact. */
.acct-person__unconfirmed {
    color: var(--color-warning);
}

/* „Vybrat přesné místo" at the end of the line above: one action, so one
   piece — broken after „Vybrat" on a phone it read as two. */
.acct-person__place {
    white-space: nowrap;
}

.acct-person__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-block-start: auto;
    padding-block-start: var(--space-2);
}

/* Deleting somebody is deliberately the quietest row on the plate, below a
   hairline, with a checkbox in front of the button. */
.acct-person__delete {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
    justify-content: space-between;
    padding-block-start: var(--space-3);
    border-block-start: 1px solid var(--color-border-soft);
}

.acct-person__delete .choice {
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-xs);
    border-color: transparent;
}

.acct-person--add {
    display: grid;
    gap: var(--space-2);
    place-content: center;
    place-items: center;
    min-height: 12rem;
    text-align: center;
    background: var(--plate-fill-soft);
    border-style: dashed;
    border-color: var(--color-border-soft);
}

.acct-person--add:hover {
    border-style: solid;
}

.acct-person__plus {
    font-family: var(--font-serif);
    font-size: var(--text-3xl);
    font-weight: 300;
    line-height: 1;
    color: var(--color-gold);
}

.acct-person--add .field__help {
    max-width: 26ch;
}

/* =============================================================================
   Export and history lists
   ============================================================================= */

.acct-export__when {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: baseline;
    color: var(--color-text-soft);
}

/* =============================================================================
   Gift vouchers — /ucet/darky

   A voucher plate is a certificate seen small: an inner hairline frame and the
   code centred in it, because that is the one thing anybody reads off it.
   ============================================================================= */

.acct-voucher {
    gap: var(--space-3);
    text-align: center;
    align-items: center;
}

.acct-voucher__code {
    width: 100%;
    padding: var(--space-4) var(--space-3);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-sm);
}

.acct-voucher__code .voucher-code {
    font-size: var(--text-lg);
    letter-spacing: 0.28em;
    background: none;
    border: 0;
}

.acct-voucher .acct-status__line {
    justify-content: center;
}

.acct-voucher--spent {
    background: var(--plate-fill-soft);
    border-color: var(--color-border-soft);
    box-shadow: none;
}

.acct-voucher--spent .acct-voucher__code .voucher-code {
    color: var(--color-muted);
}

.acct-voucher__actions {
    margin-block-start: auto;
    padding-block-start: var(--space-2);
    justify-content: center;
}

/* Moje dárky: „Dárky pro vás" a pod nimi „Koupené dárky" jako dva oddíly,
   ne jedna mřížka, na kterou hned doléhá prázdný stav (oponentura Codexu
   26. 9. 2026). Nadpis druhého oddílu má od prvního odstup a pod sebou místo. */
.acct-gifts-received {
    margin-block-end: var(--space-8);
}

.acct-gifts-received ~ .section-label {
    margin-block-end: var(--space-4);
}

/* One voucher in an auto-fit grid becomes one plate 1140 px wide. A certificate
   has proportions like a price plate does, so a short shelf is capped. */
.acct-grid--vouchers:has(> :nth-child(1):last-child) {
    max-width: 24rem;
}

.acct-grid--vouchers:has(> :nth-child(2):last-child) {
    max-width: 48rem;
}

.acct-redeem .input {
    font-family: var(--font-mono);
    font-size: var(--text-lg);
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

/* =============================================================================
   Payment return — /platba/navrat/*

   The state is drawn once, large, above the heading. While the meta refresh is
   armed the ring turns; the moment the controller stops re-arming it, the ring
   stops with it, which is the difference between "still working" and "we gave
   up" said without a word.
   ============================================================================= */

.acct-pay {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
    justify-items: center;
}

.acct-pay__mark {
    width: 88px;
    color: var(--color-gold);
}

.acct-pay__mark svg {
    width: 100%;
    height: auto;
}

.acct-pay--paid .acct-pay__mark {
    color: var(--color-success);
}

.acct-pay--stopped .acct-pay__mark {
    color: var(--color-danger);
}

.acct-pay--waiting .acct-pay__mark {
    color: var(--color-warning);
}

.acct-pay__head {
    padding-block-end: 0;
}

.acct-pay__head::after {
    content: none;
}

.acct-pay .card {
    width: 100%;
}

.acct-pay__product {
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    font-weight: 400;
}

.acct-pay__amount {
    font-family: var(--font-serif);
    font-size: var(--text-xl);
    color: var(--color-gold-light);
    font-variant-numeric: tabular-nums;
}

/* A 26-character ULID needs a line of its own, and the frame it sits in has to
   be allowed to break it. */
.acct-pay__code .account-code {
    overflow-wrap: anywhere;
}

.acct-pay--live .acct-pay__ring {
    transform-origin: 32px 32px;
    stroke-dasharray: 40 136;
    animation: acct-pay-turn 2.4s linear infinite;
}

@keyframes acct-pay-turn {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .acct-pay--live .acct-pay__ring {
        stroke-dasharray: none;
        animation: none;
    }
}

/* =============================================================================
   The observation on /prehled — the one sentence the Čaroděj volunteers
   ============================================================================= */

.acct-observation__line {
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-text);
}

/* =============================================================================
   Signed-out forms — /prihlaseni, /registrace, /zapomenute-heslo, /odber/*

   The sigil sits above the plate rather than inside it: on a page with a
   single form the ornament has to frame the form, not compete with it.
   ============================================================================= */

.acct-auth {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
}

.acct-auth--wide {
    width: min(100% - 2 * var(--space-5), 32rem);
}

.acct-auth__mark {
    color: var(--color-gold);
    opacity: 0.8;
}

.acct-auth__plate {
    position: relative;
    width: 100%;
}

/* A second hairline just inside the frame — the mockup's plate-in-a-plate. */
.acct-auth__plate::before {
    position: absolute;
    inset: 5px;
    border: 1px solid var(--color-border-soft);
    border-radius: calc(var(--radius) - 4px);
    pointer-events: none;
    content: '';
}

.acct-auth__head {
    padding-block-end: var(--space-4);
    margin-block-end: 0;
}

.acct-auth__head::after {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 12%;
    height: 1px;
    background: var(--rule-gold);
    content: '';
}

.acct-auth__head .page-head__title {
    font-size: var(--text-2xl);
}

.acct-auth__head .page-head__lead {
    font-size: var(--text-base);
    line-height: 1.7;
    text-align: center;
}

/* =============================================================================
   Ceník — /cenik

   The one subpage a visitor arrives on straight from an advertisement, so it
   opens like the homepage does: engraved art bleeding in from both edges, the
   title on the sky between them. Everything below it is plates.
   ============================================================================= */

.pricing-hero {
    position: relative;
    isolation: isolate;
    padding-block: var(--space-9) var(--space-8);
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 30%, rgb(25 29 48 / 70%), transparent 42%),
        var(--color-band);
}

.pricing-hero::after {
    position: absolute;
    z-index: 2;
    inset-block-end: -29px;
    inset-inline-start: 50%;
    width: 110%;
    height: 60px;
    border-top: 1px solid rgb(153 105 58 / 43%);
    border-radius: 50% 50% 0 0;
    transform: translateX(-50%);
    content: '';
}

.pricing-hero__art {
    position: absolute;
    z-index: 0;
    inset-block-start: 0;
    width: 520px;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    opacity: 0.72;
    pointer-events: none;
    user-select: none;
}

.pricing-hero__art--left {
    inset-inline-start: 0;
    background-image: url("../../images/cards-left-yoVy-Zk.webp");
    mask-image: linear-gradient(to right, #000 0%, #000 42%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 42%, transparent 100%);
}

.pricing-hero__art--right {
    inset-inline-end: 0;
    background-image: url("../../images/cards-right-CCEcw6w.webp");
    mask-image: linear-gradient(to left, #000 0%, #000 42%, transparent 100%);
    -webkit-mask-image: linear-gradient(to left, #000 0%, #000 42%, transparent 100%);
}

@media (width < 60rem) {
    .pricing-hero__art {
        width: 260px;
        opacity: 0.4;
    }
}

.pricing-hero__head {
    position: relative;
    z-index: 1;
    padding-block-end: 0;
}

.pricing-hero__title {
    font-size: var(--text-4xl);
}

.pricing-hero__head .page-head__lead {
    max-width: 56ch;
    text-align: center;
}

.pricing-bands {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
}

.pricing-band {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
}

.pricing-band__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
    max-width: 62ch;
}

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

/* A price plate has proportions. Left alone, a section with two products —
   kredit, předplatné — makes two plates 34 rem wide, which is a banner and not
   a card. Capping the *grid* rather than the track keeps a full section edge to
   edge with the page head while a short one stays a row of cards. */
.pricing-band .price-grid:has(> :nth-child(1):last-child) {
    max-width: 21rem;
}

.pricing-band .price-grid:has(> :nth-child(2):last-child) {
    max-width: 42rem;
}

.pricing-band .price-grid:has(> :nth-child(3):last-child) {
    max-width: 63rem;
}

/* A product we cannot sell today says so as a chip, not as a badge lost among
   the buttons: it is the plate's call to action, and it has to look like one
   even when the answer is "not yet". */
.price-card__cta .badge--muted {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-xs);
    letter-spacing: 0.16em;
    border-style: dashed;
}

/* The gift plates carry a whole form. Compacted so a three-field plate does
   not double the height of its row. */
.gift-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
    width: 100%;
}

.gift-form .field {
    gap: var(--space-1);
}

.gift-form .label {
    font-size: var(--text-2xs);
}

.gift-form .textarea {
    min-height: 4.5rem;
}

/* Tlačítko u pravého okraje plotny (pokyn majitele 2026-09-16). Dárková plotna
   je formulář jako každý jiný: věnování, e-mail a pod nimi tlačítko — a to
   patří doprava, i s řádkem bonusu a větou o bráně pod ním. */
.gift-form > .btn {
    justify-self: end;
}

.gift-form .pay-methods__option {
    justify-items: end;
}

.gift-form > .loyalty-bonus,
.gift-form > .field__help {
    text-align: end;
}

.price-card__cta {
    flex-direction: column;
    align-items: stretch;
}

.price-card__cta > .btn,
.price-card__cta > .badge,
.price-card__cta > form > .btn {
    align-self: start;
}

.pricing-note {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    align-items: center;
    background: var(--plate-fill-soft);
    border-color: var(--color-border-soft);
}

@media (width >= 56rem) {
    .pricing-note {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: var(--space-6);
    }

    .pricing-note__actions {
        justify-content: flex-end;
    }
}

/* -----------------------------------------------------------------------------
   Časté dotazy na ceníku

   Six questions under the price bands, drawn as a plate rather than as a band:
   somebody who came for a number has already found it above, and this is the
   part they read only if they are still deciding.

   `<details>` collapses them so the section costs one screen instead of four.
   The marker is replaced with a brass chevron built from a border, which needs
   no glyph and no icon font — the same trick `.mobile-nav summary` uses.
   -------------------------------------------------------------------------- */

.pricing-faq {
    display: grid;
    gap: var(--space-4);
    background: var(--plate-fill-soft);
    border-color: var(--color-border-soft);
}

.pricing-faq__item {
    border-block-end: 1px solid var(--color-border-soft);
    padding-block-end: var(--space-3);
}

.pricing-faq__item:last-child {
    border-block-end: 0;
    padding-block-end: 0;
}

.pricing-faq__question {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    cursor: pointer;
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    color: var(--color-text);
    list-style: none;
}

.pricing-faq__question::-webkit-details-marker {
    display: none;
}

.pricing-faq__question::before {
    content: '';
    flex: none;
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-inline-end: 2px solid var(--color-gold);
    border-block-end: 2px solid var(--color-gold);
    transform: rotate(-45deg);
    transition: transform 150ms ease;
}

.pricing-faq__item[open] .pricing-faq__question::before {
    transform: rotate(45deg);
}

.pricing-faq__answer {
    margin-block-start: var(--space-3);
    padding-inline-start: calc(0.5rem + var(--space-3));
    color: var(--color-text-soft);
}

@media (prefers-reduced-motion: reduce) {
    .pricing-faq__question::before {
        transition: none;
    }
}

/* =============================================================================
   Karta dne — /karta-dne

   The plate and its meaning side by side, which is the shape a card and its
   reading have everywhere else on the site.
   ============================================================================= */

.daily__head {
    margin-block-end: var(--space-6);
}

.daily__title {
    font-size: var(--text-4xl);
}

.daily__head .page-head__lead {
    max-width: 54ch;
    text-align: center;
}

.daily__spread {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
    align-items: start;
    padding: var(--space-6) var(--space-5);
}

@media (width >= 52rem) {
    .daily__spread {
        grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
        gap: var(--space-7);
    }
}

/* The daily plate has to read as a card. Without a ratio it is a box three
   lines tall beside a column of six, and the pair looks like a caption that
   escaped its picture. The star is decoration on ::after — ::before is already
   the engraved inner rule every `.card-plate` wears. */
.daily__spread .daily-card__plate {
    position: relative;
    align-content: center;
    aspect-ratio: 5 / 7;
    min-height: 16rem;
}

.daily__spread .daily-card__plate::after {
    width: 84px;
    height: 84px;
    margin-block-start: var(--space-3);
    background: currentcolor;
    opacity: 0.28;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.2' stroke-linejoin='round'%3E%3Ccircle cx='32' cy='32' r='28' opacity='.6'/%3E%3Cpath d='M32 3 37.5 26.5 61 32 37.5 37.5 32 61 26.5 37.5 3 32 26.5 26.5Z'/%3E%3Cpath d='M46.1 17.9 36 32 46.1 46.1 32 36 17.9 46.1 28 32 17.9 17.9 32 28Z'/%3E%3C/g%3E%3C/svg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.2' stroke-linejoin='round'%3E%3Ccircle cx='32' cy='32' r='28' opacity='.6'/%3E%3Cpath d='M32 3 37.5 26.5 61 32 37.5 37.5 32 61 26.5 37.5 3 32 26.5 26.5Z'/%3E%3Cpath d='M46.1 17.9 36 32 46.1 46.1 32 36 17.9 46.1 28 32 17.9 17.9 32 28Z'/%3E%3C/g%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    color: var(--color-gold);
    content: '';
}

.daily-card__caveat {
    padding-block-start: var(--space-3);
    border-block-start: 1px solid var(--color-border-soft);
}

/* The question field with its price, between the draw and the e-mail form
   (audit 10c, P2, 27 September 2026: the offer before the address is asked
   for). As wide as the reading text below it, centred under the card. */
.daily__offer {
    max-width: var(--content-narrow);
    margin: var(--space-6) auto 0;
}

.daily__capture {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
    align-items: start;
    margin-block-start: var(--space-6);
    padding: var(--space-6) var(--space-5);
}

@media (width >= 52rem) {
    .daily__capture {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--space-7);
    }

    .daily__capture .lead-capture__form {
        padding-inline-start: var(--space-6);
        border-inline-start: 1px solid var(--color-border-soft);
    }
}

.daily__capture-text {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
}

.daily__capture-title {
    font-family: var(--font-serif);
    font-size: var(--text-2xl);
    font-weight: 390;
    line-height: 1.16;
}

/* Which of the three morning draws they want. A fieldset rather than three
   loose checkboxes, because "Co vám má chodit" is one question with three
   answers and a screen reader should be told so; the border a fieldset comes
   with is removed by the reset, so this only has to space the rows. */
.lead-capture__decks {
    gap: var(--space-2);
    margin-block: var(--space-2);
    padding: 0;
    border: 0;
}

.lead-capture__decks legend {
    padding: 0;
    margin-block-end: var(--space-2);
}

/* The page's own text, under the gift and the ask. A narrower measure than the
   card above it: this is prose somebody reads, and 68 characters is where a
   line stops being one. */
.daily__prose {
    margin-block-start: var(--space-7);
}

.daily__prose p {
    max-width: 68ch;
}

/* The questions at the end. The heading is the section's, so the individual
   questions drop a step and lose the brass rule — a page with five identical
   rules on it reads as five sections rather than one list. */
.daily__faq {
    margin-block-start: var(--space-6);
}

.daily__faq .reading-section__title {
    font-size: var(--text-lg);
}

.daily__faq > .reading-section__title {
    font-size: var(--text-2xl);
}

/* =============================================================================
   Legal documents — /obchodni-podminky, /ochrana-osobnich-udaju, /kontakt

   Long-form typography: a 72-character measure, numbered articles that read as
   articles, and a way in at the top, because a contract is a document somebody
   arrives at with one question rather than a page anybody reads end to end.
   ============================================================================= */

.page-legal .legal__section p,
.page-legal .legal__section li {
    max-width: 72ch;
}

.page-legal .legal__section h2 {
    position: relative;
    padding-block-start: var(--space-5);
    margin-block-start: var(--space-6);
    font-size: var(--text-2xl);
    font-weight: 390;
}

.page-legal .legal__section h2::before {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    width: 31px;
    height: 1px;
    background: var(--color-gold);
    content: '';
}

.page-legal .legal__section:first-of-type h2 {
    margin-block-start: 0;
}

.page-legal .legal__section h3 {
    margin-block-start: var(--space-4);
    color: var(--color-gold-light);
}

.page-legal .legal__meta {
    font-size: var(--text-sm);
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.legal-toc {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    padding: var(--space-5);
    background: var(--plate-fill-soft);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius);
}

.legal-toc__list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2) var(--space-5);
    padding: 0;
    margin: 0;
    list-style: none;
    counter-reset: none;
}

@media (width >= 40rem) {
    .legal-toc__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.legal-toc__list a {
    display: flex;
    gap: var(--space-3);
    align-items: baseline;
    font-size: var(--text-base);
    color: var(--color-text-soft);
    transition: color var(--transition-fast);
}

.legal-toc__list a:hover {
    color: var(--color-gold-bright);
}

.legal-toc__num {
    flex: 0 0 1.6em;
    font-family: var(--font-serif);
    font-size: var(--text-md);
    color: var(--color-gold);
    text-align: end;
    font-variant-numeric: tabular-nums;
}

/* Two classes, because `.legal__section p` sets a size and one is not enough
   to answer it. */
.page-legal .legal-contact__address {
    font-family: var(--font-serif);
    font-size: var(--text-2xl);
    font-weight: 390;
    line-height: 1.2;
}

.legal-contact__address a {
    color: var(--color-gold-light);
    text-decoration: none;
}

.legal-contact__address a:hover {
    color: var(--color-gold-bright);
    text-decoration: underline;
}

/* =============================================================================
   Promoted to components.css

   Four objects this file invented turned out to be general, and the phase 2
   consolidation moved them. They are declared there under both names, so no
   template in this group changed:

     .acct-split                             → .split
     .acct-tile                              → .tile
     .acct-status                            → .status-pair
     .acct-panel--empty / .acct-panel--invite → .panel--empty / .panel--invite
     .acct-empty__title                      → merged into .empty-state__title
   ============================================================================= */

/* Platba převodem — the QR square beside the numbers it encodes.

   The two have to be readable side by side on a laptop and stacked on a
   telephone, and the square must never be scaled down: a QR code whose modules
   land on fractions of a pixel is a QR code a camera hunts for. So the image
   keeps its own 320 pixels and the definition list takes whatever is left. */
.qr-pay {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
    align-items: start;
}

@media (min-width: 40rem) {
    .qr-pay {
        grid-template-columns: auto minmax(0, 1fr);
    }
}

.qr-pay__figure {
    margin: 0;
    display: grid;
    gap: var(--space-2);
    justify-items: center;
}

/* White behind the code, always, whatever the page is doing around it. A dark
   background under a dark-module QR code is a code nothing reads. */
.qr-pay__code {
    width: 320px;
    max-width: 100%;
    height: auto;
    background: #fff;
    border-radius: var(--radius-sm);
    padding: var(--space-2);
}

.qr-pay__facts {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-2) var(--space-4);
    margin: 0;
    align-content: start;
}

.qr-pay__facts dt {
    color: var(--color-muted);
    font-size: var(--text-sm);
}

.qr-pay__facts dd {
    margin: 0;
    overflow-wrap: anywhere;
}

/* A figure and its „Zkopírovat" (audit 10c, P2, 27 September 2026): on a
   phone the square cannot be scanned by the phone showing it, so the three
   numbers a banking app asks for are one press each, and in internet banking
   on a laptop one paste each.

   With the buttons the facts are one column — the label over the figure, the
   button beside it — because beside a label column the figure had a third of
   the width and the account number broke at its hyphen. The figure itself
   never breaks; when a line is too short for both, the button goes under it. */
.qr-pay__facts {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
}

.qr-pay__facts dt:not(:first-child) {
    margin-block-start: var(--space-3);
}

.qr-pay__facts .qr-pay__copyable {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    align-items: center;
}

.qr-pay__copyable .account-code {
    white-space: nowrap;
    letter-spacing: 0.03em;
}

/* As wide as „Zkopírováno" from the start, so the confirmation does not push
   the button onto the next line under the figure. */
.qr-pay__copy {
    min-height: 2.25rem;
    min-inline-size: 8rem;
    letter-spacing: 0.06em;
}

/* On a narrow phone the account number and its button do not fit one line;
   rather than one button under its figure and two beside theirs, all three go
   under. */
@media (max-width: 26rem) {
    .qr-pay__facts .qr-pay__copyable {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* The gallery sentence is for the phone the code is on; beside a laptop the
   phone in the other hand scans it. It spans both columns of the panel. */
.qr-pay__phone {
    grid-column: 1 / -1;
    margin: 0;
}

@media (min-width: 48rem) {
    .qr-pay__phone {
        display: none;
    }
}

/* Výběr způsobu platby v ceníku a na paywallu.

   Dvě odesílací tlačítka pod sebou, každé se svou větou. Vedle sebe by na
   telefonu skončila obě na dvou řádcích a věta pod nimi by patřila neznámo
   ke kterému. */
.pay-methods__options {
    display: grid;
    gap: var(--space-3);
}

.pay-methods__option {
    display: grid;
    gap: var(--space-1);
    justify-items: start;
}

/* -----------------------------------------------------------------------------
   Kompaktní plotna ceníku (audit 10c, P1)

   Značka vedle názvu a ceny, ne nad nimi: na telefonu měla každá plotna přes
   500 px a ceník 26 000 px. Značka zmenšená na 3,5 rem stojí v levém sloupci
   hlavičky, název s cenou vpravo; popis a tlačítko pod nimi přes celou šířku.
   ----------------------------------------------------------------------------- */
.price-card--compact {
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
}

.price-card__head {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr);
    gap: var(--space-4);
    align-items: center;
}

.price-card__head .product-motif svg {
    width: 3.5rem;
}

.price-card__title {
    display: grid;
    gap: var(--space-1);
}

.price-card--compact .price-card__note {
    font-size: var(--text-sm);
    line-height: 1.6;
}

.price-card--compact .price-card__cta {
    gap: var(--space-2);
}

.price-card--compact .price-card__name {
    font-size: var(--text-lg);
}

/* „Pokračujete k: Velký výklad – 249 Kč“ nad registrací, přihlášením a profilem
   (user/_pending_purchase.html.twig, audit 10c). Tichá věta pod nadpisem jako
   `.rd-head__status`, bez rámečku a pozadí (pravidlo majitele: stav není
   odznak): říká, kam se po formuláři jde. */
.pending-purchase {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-2);
    align-items: baseline;
    justify-content: center;
    margin-block: calc(-1 * var(--space-2)) var(--space-4);
    font-size: var(--text-sm);
    line-height: 1.4;
    text-align: center;
    color: var(--color-muted);
}

.pending-purchase__label {
    color: var(--color-muted);
}

.pending-purchase__product {
    font-weight: 600;
    color: var(--color-gold-light);
}

/* V profilu stojí pod nadpisem zarovnaným vlevo. */
.acct-head + .pending-purchase {
    justify-content: flex-start;
    margin-block-start: 0;
    text-align: start;
}

/* =============================================================================
   Odstoupení od smlouvy — /odstoupeni-od-smlouvy (§ 1830a OZ, P14)

   Seznam objednávek ve lhůtě: název a lhůta vlevo, tlačítko vpravo; na
   telefonu tlačítko pod textem. Údaje o objednávce jsou `.acct-facts`, jen se
   smí zalomit — název výkladu bývá delší než číslo na /ucet/provize.
   ============================================================================= */

.acct-facts--wrap .acct-facts__row dd {
    min-width: 0;
    white-space: normal;
    text-align: end;
    overflow-wrap: anywhere;
}

.acct-withdraw-list {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.acct-withdraw-list__item {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    align-items: center;
    justify-content: space-between;
    padding-block-end: var(--space-3);
    border-block-end: 1px solid var(--color-border-soft);
}

.acct-withdraw-list__item:last-child {
    padding-block-end: 0;
    border-block-end: 0;
}

.acct-withdraw-list__item > div {
    flex: 1 1 16rem;
    min-width: 0;
}

.acct-withdraw-list__name {
    margin: 0;
    font-weight: 600;
    color: var(--color-text);
}

.acct-withdraw-list__item .field__help {
    margin: 0;
}

/* Věta, kterou zákazník potvrzuje — obsah odstoupení, jak ho pak dostane
   v e-mailu. */
.acct-withdraw-statement {
    margin: 0;
    padding: var(--space-3);
    border-inline-start: 3px solid var(--color-gold);
    background: var(--color-surface-light);
    color: var(--color-text-soft);
}

.field__optional {
    font-weight: 400;
    color: var(--color-muted);
}

.acct-withdraw-message {
    white-space: pre-line;
}

/* „Odstoupit od smlouvy" v řádku platby na /ucet/platby, pod datem a stavem. */
.acct-payment__withdraw {
    display: inline-block;
    margin-block-start: var(--space-1);
    font-size: var(--text-sm);
}

/* Číslo objednávky ve větě o odstoupení: 26 znaků bez mezery se na úzkém
   telefonu musí zlomit, jinak vyleze z karty. */
.acct-code-wrap {
    overflow-wrap: anywhere;
}