/* =============================================================================
   Č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;
}

/* =============================================================================
   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;
}

.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;
}

/* 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 —
   kouzla, 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;
}

.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;
    }
}

/* =============================================================================
   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);
}

.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;
}

/* =============================================================================
   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
   ============================================================================= */