/* #region Relationship-led ID overview */
/* Every component of the account's first screen — .id-empty-onboarding, .id-empty-paths,
   .id-relationship-list, .id-secondary-paths and the purpose line — is described once, in the ID
   overview exhibit region further down, and written there against .id-overview-page. The only page
   rendering any of them carries that class, so a rule for them written in this region is outranked
   whatever it says, at every viewport, media block included. This region is deliberately empty of
   them; keep it that way. Dashboard.cshtml also puts the list straight inside the section, so there
   is no header block to address. */
/* #endregion */

/* #region Odoardo ID unified workspace */
/* The single source of truth for the dashboard shell's padding. Redeclared in a second region,
   whichever copy comes last silently wins — so it belongs here and nowhere else. */
.id-dashboard {
    /* Surface depth, the deliberate exception to the single house black (see the tokens in site.css). */
    --id-surface: #090909;
    --id-surface-raised: #0d0d0d;
    /* The area's lines are the house's white hairlines; gold arrives only under the hand. */
    --id-line: var(--hairline);
    --id-line-strong: var(--hairline-strong);
    --id-copy: rgba(245, 245, 245, .64);
    min-height: 100vh;
    padding: clamp(4.3rem, 5vw, 4.8rem) 0 110px;
}

/* No narrow-screen padding for .id-dashboard on its own: every one in the markup also carries
   .id-subpage or .id-overview-page, and both set their own at a specificity this could not reach. */

    .id-dashboard > .container {
        width: min(calc(100% - 10vw), var(--section-content-max));
        max-width: none;
    }

/* The bar's own height, written once because everything that has to come to rest *under* it needs
   the number: 1.5rem of padding above and below a 24px row (a 44px link pulled in by -10px at each
   end), plus its two hairlines. Kept as a constant the way --site-header-h is, and for the same
   reason — the fixed furniture of a page is measured in the stylesheet, not at run time. */
:root {
    --id-area-nav-h: 74px;
}

.id-area-nav-wrap {
    position: sticky;
    top: var(--site-header-h, 72px);
    z-index: 100;
    /* Full bleed without 100vw: 100vw includes the scrollbar and forces sideways overflow. */
    width: auto;
    margin: 0 calc(50% - 50vw) clamp(4rem, 7vw, 6.5rem);
    background: rgba(5, 5, 5, .85);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
}

.id-area-nav.sticky-nav-cat {
    width: min(90vw, var(--section-content-max));
    max-width: none;
    margin-inline: auto;
    padding: 1.5rem 0;
    display: flex;
    gap: 2vw;
    overflow-x: auto;
    scrollbar-width: none;
    justify-content: flex-start;
}

    /* A customer with many areas has more tabs than the screen is wide, and with the scrollbar hidden the
       last of them — „Wyloguj się" — was cut off without a sign. Only then does the right edge fade, with
       room for the last tab to scroll clear of it; a row that fits keeps „Wyloguj się" on the page's edge.
       The class is set by the navigation's own script. */
    .id-area-nav.sticky-nav-cat.is-overflowing {
        padding-right: 2.5rem;
        -webkit-mask-image: linear-gradient(90deg, #050505 calc(100% - 2.5rem), transparent);
        mask-image: linear-gradient(90deg, #050505 calc(100% - 2.5rem), transparent);
    }


    .id-area-nav.sticky-nav-cat::-webkit-scrollbar {
        display: none;
    }

.id-area-nav .nav-cat-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-block: -10px;
    font-family: var(--font-mono);
    font-size: .65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 3px;
    text-decoration: none;
    white-space: nowrap;
    transition: color .3s;
}

    .id-area-nav .nav-cat-link:hover {
        color: var(--gold);
    }

    .id-area-nav .nav-cat-link.is-current {
        color: var(--gold);
    }

.id-area-nav .id-nav-logout {
    margin-left: auto;
    display: flex;
    align-items: center;
}

    /* The tracking after the last letter is taken back, so „Wyloguj się" ends on the same edge as „Menu"
       in the masthead above it. */
    .id-area-nav .id-nav-logout .nav-cat-link {
        margin-right: -3px;
        background: none;
        border: 0;
        padding: 0;
        cursor: pointer;
    }

/* The subpage's masthead, and only that. The overview's is .id-dashboard-head in the Dashboard
   region: two mastheads with two layouts, each said once. Written as one rule for both, the
   overview's own flex block contradicts it and every declaration here except the padding and the
   border is dead on that element while reading as though it governed both. */
.id-page-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: clamp(2rem, 6vw, 8rem);
    /* The masthead's width lives here, in one rule. The document pages override it to win the width
       back, and that override is written against this value — split between two rules further apart
       in the file, they contradict each other and the override answers whichever won last. */
    max-width: 950px;
    margin: 0 0 30px;
    padding: 0;
    border: 0;
}

    .id-page-head > div:first-child,
    .id-page-head:not(.id-page-head--with-meta):not(.id-page-head--action),
    .id-dashboard-head > div:first-child {
        max-width: 54rem;
    }

.id-dashboard .id-page-head h1,
.id-dashboard .id-dashboard-head h1 {
    max-width: 13ch;
    margin: 1rem 0 0;
    font-family: var(--font);
    font-size: clamp(2.8rem, 5vw, 5.8rem);
    font-weight: 500;
    letter-spacing: -.065em;
    line-height: .96;
}

.id-dashboard .id-page-head p,
.id-dashboard .id-dashboard-purpose {
    max-width: 48rem;
    margin: 1.5rem 0 0;
    color: var(--id-copy);
    font-size: clamp(1rem, 1.2vw, 1.08rem);
    line-height: 1.75;
}

.id-page-head-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1.25rem;
    padding-bottom: .35rem;
}

/* The left-hand side of a masthead that also carries a link: the text and the one figure the page
   reports. The figure and the link are two different things and are placed separately — stacked in
   one column on the right, the link ranges with the figure, and since the figure belongs where the
   text ends the link lands half a page short of the margin. This block keeps the cap; the link
   leaves it for the corner. See .id-page-head--away. */
.id-page-head-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: clamp(2rem, 6vw, 8rem);
}

.id-page-stat {
    display: grid;
    min-width: 11rem;
    padding: 1.5rem 0 1.5rem 2rem;
    border-left: 1px solid var(--id-line);
}

    .id-page-stat strong {
        color: var(--gold);
        font-size: clamp(2.5rem, 4vw, 4.5rem);
        font-weight: 400;
        letter-spacing: -.06em;
        line-height: 1;
    }

    /* The word under the figure, sized against it. The figure runs up to 4.5rem, so at .7rem the label is
       a caption a seventh the height of the thing it names — fine print stuck under a headline rather than
       the other half of „4 usługi". */
    .id-page-stat span {
        margin-top: .6rem;
        color: var(--text-muted);
        font-size: .85rem;
        letter-spacing: .06em;
    }

.id-account-section,
.id-subpage .id-account-section,
.id-library,
.id-overview-relationship {
    margin: 0;
    padding: clamp(3rem, 6vw, 5.5rem) 0;
    border-top: 1px solid var(--id-line);
    background: none;
}

.id-page-head + .id-account-section,
.id-page-head + .id-library {
    border-top: 0;
}

.id-section-heading,
.id-library-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

    .id-section-heading > div,
    .id-library-heading > div {
        max-width: 48rem;
    }

/* What belongs to a whole section rather than to any one thing in it — „Faktury", „Jak działa?" —
   stands in the slot the heading already keeps open on its right. Under the grid instead, two links
   trailing a row of tiles read as a footnote to the last tile rather than as the section's own. */
.id-section-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .6rem;
}

/* One voice for every section heading in the customer area, defined once. Split across several rules —
   sans at 500 in two sizes, the display face at 300 in two more — which one a tab gets depends on whether
   its wrapper carries .id-subpage or .id-overview-page, and the same heading then has two typefaces and
   four scales, which is what stops the tabs reading as one product. The display face at 300 is what the
   whole house sets a heading in; the scale is the denser one the eight subpages use, because this is a
   working surface and not an editorial page. */
.id-dashboard .id-section-heading h2,
.id-dashboard .id-library-heading h2,
.id-artist-panel h2 {
    margin-top: 1.15rem;
    color: var(--white);
    font-family: var(--font-display);
    font-size: clamp(2.35rem, 4vw, 4.5rem);
    font-weight: 300;
    letter-spacing: -.04em;
    line-height: .98;
    /* A heading of four or five words at this scale breaks wherever the column happens to end, which
       leaves a line of three words over a line of one — „Wybór przekazany do" over „realizacji". The
       browser is asked to even the lines out instead. A browser that cannot do it breaks as before,
       so nothing depends on it. */
    text-wrap: balance;
}

/* The lead stands a clear step below the heading, not tucked under it: the display face is set at
   .98 line-height, so a 1rem gap left the first line of copy inside the heading's own block and the
   two read as one paragraph in two typefaces. The measure itself is the site's --section-lead-gap:
   a number of the area's own is how the public pages and the account come to breathe differently at
   the same join. */
.id-section-heading p,
.id-library-heading p {
    margin-top: var(--section-lead-gap);
    color: var(--id-copy);
    font-size: 1rem;
    line-height: 1.7;
}

    /* A figure inside a lead — a count of views, a number of viewers — set in the page's own white,
       so the number is what is read and the sentence around it stays the sentence. */
    .id-section-heading p b,
    .id-library-heading p b {
        color: var(--white);
        font-weight: 500;
    }

/* No counter stands alone in a heading anywhere in the area: every figure says what it counts, either as
   the masthead's .id-page-stat or as the card-scale .id-count. */

/* .id-alert is styled once, in the Account dashboard region.

   Below it, the secondary action of the whole customer area, stated once here. A second definition
   opening with `border: 0` switches off the hairline under the word, which is the only thing that
   makes it read as a link. The underline hugs the word and the room around it is the list's gap:
   bought instead with 12px of padding and −12px of margin, the rule sits 12px below the word it
   underlines and two stacked actions („Strona adresu" over „Opłaty i faktury") overlap. */
.id-action {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding-bottom: .3rem;
    border: 0;
    border-bottom: 1px solid var(--id-line-strong);
    background: none;
    color: var(--white);
    font-family: var(--font);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .2em;
    line-height: 1.5;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    transition: color var(--motion-quick) var(--ease-house), border-color var(--motion-quick) var(--ease-house);
}

    /* Gold arrives under the hand. */
    .id-action:hover,
    .id-action:focus-visible {
        border-color: var(--gold);
        color: var(--gold);
    }

    .id-action.is-danger {
        color: #e9a7a7;
        border-color: rgba(211, 80, 80, .35);
    }

.odo-button.is-danger {
    border-color: #d35050;
    background: #d35050;
    color: var(--white);
}

/* The quiet form of it: an action that undoes something, standing among other actions rather than
   being the one thing a dialog asks. Filled red it would be the loudest thing in a row whose other
   entries merely open a page. */
.odo-button--quiet.is-danger {
    border-color: rgba(211, 80, 80, .5);
    background: transparent;
    color: #e9a7a7;
}

    .odo-button--quiet.is-danger:hover,
    .odo-button--quiet.is-danger:focus-visible {
        border-color: #d35050;
        background: transparent;
        color: #f2c3c3;
    }

.id-all-clear {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 3rem;
    padding: 1.25rem 0;
    border-top: 1px solid var(--id-line);
    border-bottom: 1px solid var(--id-line);
}

    .id-all-clear > span {
        display: grid;
        width: 2.5rem;
        height: 2.5rem;
        place-items: center;
        border: 1px solid var(--hairline-strong);
        border-radius: 50%;
        color: var(--gold);
    }

    /* The eyebrow and the title are two lines, not a sentence. Both are inline elements, so without
       this they set on one line and read as „Stan uruchomieńMamy wszystko, czego potrzebujemy" —
       which is what the Launch tab showed, because only .id-overview-page carried a rule of its own. */
    .id-all-clear small {
        display: block;
        margin-bottom: .35rem;
        color: rgba(245, 245, 245, .5);
        font-size: .6rem;
        letter-spacing: .18em;
        text-transform: uppercase;
    }

    .id-all-clear strong {
        display: block;
        font-size: 1rem;
    }

    .id-all-clear p {
        margin-top: .2rem;
        color: var(--text-muted);
        font-size: .78rem;
    }

/* .id-relationship-list and .id-empty-paths are described once, in the ID overview exhibit region —
   see the note above their blocks there. A second, hairline-grid design of them here — a row-shaped card at
   10rem against the overview's square-ish 16rem, its own eyebrow, its own type scale — reaches nothing:
   written without .id-overview-page, which the only page rendering either of them always carries, every
   declaration is outranked by the overview region. */

.id-library-tools {
    display: grid;
    grid-template-columns: minmax(16rem, 24rem) minmax(0, 1fr) auto;
    align-items: end;
    gap: 1.5rem;
    margin-bottom: 2.75rem;
    padding: 1.5rem;
    border: 1px solid var(--id-line);
    background: var(--id-surface);
}

.id-search-field label,
.id-filter-chips legend,
/* The step's own label, and only that — hence the :not(). As a bare child selector it also catches
   the error message at the foot of the step, a span like any other, and dresses it as a grey tracked
   capital heading: the one field that failed then announces it in the voice of a section title while
   every other field says it in red. */
/* The name over an upload is a field's label like any other, so it is set exactly as .id-field's label
   and stands as far above its control as a label stands above an input. */
.id-form-step > span:not(.id-field-error) {
    display: block;
    margin-bottom: 10px;
    color: var(--text-muted);
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.id-search-field > div {
    display: grid;
    grid-template-columns: 1fr auto;
}

.id-search-field input,
.id-search-field button {
    min-height: 3rem;
    border: 1px solid var(--id-line-strong);
    background: #050505;
    color: var(--white);
    font: inherit;
}

.id-search-field input {
    min-width: 0;
    padding: 0 1rem;
}

.id-search-field button {
    padding: 0 1rem;
    border-left: 0;
    color: var(--white);
    font-size: .7rem;
    font-weight: 600;
    cursor: pointer;
    transition: color .3s ease;
}

    .id-search-field button:hover,
    .id-search-field button:focus-visible {
        color: var(--gold);
    }

.id-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    min-width: 0;
    border: 0;
}

    /* A <legend> is drawn by the browser unless it is told otherwise, which leaves the one word on the tab
       set in the browser's own face at the browser's own size — a caption louder than the filters under
       it. It takes the micro-caps every other caption in this area wears. `float` is what takes a legend
       out of the fieldset's own box so the flex row below it starts on a line of its own; `display: block`
       alone leaves it in the browser's slot. */
    .id-filter-chips legend {
        float: left;
        width: 100%;
        margin-bottom: .7rem;
        padding: 0;
        color: var(--text-muted);
        font-size: .64rem;
        font-weight: 600;
        letter-spacing: .1em;
        text-transform: uppercase;
    }

    .id-filter-chips label {
        position: relative;
    }

    .id-filter-chips input {
        position: absolute;
        opacity: 0;
    }

    /* One control height with the search field beside it, and the area's own micro-caps rather than
       a lowercase sentence in a box: „W przygotowaniu" set in body copy next to a 3rem search field
       is what made the row read as five stray labels. It is kept on one line — a chip that wraps is
       taller than the ones around it and the row stops being a row. */
    .id-filter-chips span {
        display: flex;
        align-items: center;
        min-height: 3rem;
        padding: 0 1rem;
        border: 1px solid var(--id-line);
        color: var(--text-muted);
        font-size: .62rem;
        font-weight: 600;
        letter-spacing: .14em;
        text-transform: uppercase;
        white-space: nowrap;
        cursor: pointer;
        transition: border-color .3s ease, color .3s ease, background-color .3s ease;
    }

    .id-filter-chips label:hover span {
        border-color: var(--id-line-strong);
        color: var(--white);
    }

    .id-filter-chips input:checked + span {
        border-color: var(--gold);
        background: var(--gold-dim);
        color: var(--white);
    }

    .id-filter-chips input:focus-visible + span {
        outline: 2px solid var(--gold);
        outline-offset: 2px;
    }

.id-clear-filters {
    align-self: center;
    color: var(--white);
    font-size: .7rem;
    transition: color var(--motion-quick) var(--ease-house);
}

    .id-clear-filters:hover,
    .id-clear-filters:focus-visible {
        color: var(--gold);
    }

.id-lens-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(1.25rem, 2.5vw, 2.5rem);
}

.id-lens-card {
    min-width: 0;
    border: 1px solid var(--id-line);
    background: var(--id-surface);
}

.id-lens-media {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16;
    overflow: hidden;
    background: #050505;
}

    .id-lens-media video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.id-lens-play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--white);
    text-decoration: none;
    background: linear-gradient(transparent 55%, rgba(5,5,5,.5));
}

    .id-lens-play span {
        display: grid;
        width: 3.5rem;
        height: 3.5rem;
        padding-left: .2rem;
        place-items: center;
        border: 1px solid rgba(245,245,245,.7);
        border-radius: 50%;
        background: rgba(5,5,5,.3);
    }

.id-lens-placeholder {
    display: flex;
    width: 100%;
    height: 100%;
    padding: 2rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: radial-gradient(circle at 50% 35%, var(--tint-raised), transparent 35%), #050505;
}

    .id-lens-placeholder > span {
        color: rgba(245, 245, 245, .5);
        font-size: .68rem;
        letter-spacing: .12em;
        text-transform: uppercase;
    }

    .id-lens-placeholder p {
        margin-top: .8rem;
        color: var(--text-muted);
        font-size: .76rem;
        line-height: 1.6;
    }

.id-status-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: .42rem .65rem;
    border: 1px solid var(--id-line-strong);
    background: rgba(5,5,5,.82);
    /* White at rest: gold on a badge is kept for a state that asks something of the customer (is-attention). */
    color: var(--white);
    /* The label tier: it opens a card, above its title, and at the meta size it read as a caption
       on the photograph rather than as the card's own first word. */
    font-size: .65rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.id-lens-media > .id-status-badge {
    position: absolute;
    top: .85rem;
    left: .85rem;
    z-index: 2;
}

/* A matter we refused reads as one — a complaint or a declaration judged not to apply carries the
   same red the rest of the account uses for a state that needs answering. `is-blocked` sits here
   rather than with the quiet states: a blocked postcard is not a matter that ended, it is a film the
   owner took off the air and the one card in a grid that has to be findable at a glance. */
.id-status-badge.is-failed, .id-status-badge.is-pastdue,
.id-status-badge.is-rejected, .id-status-badge.is-blocked {
    border-color: rgba(211,80,80,.5);
    color: #e9a7a7;
}

/* And a matter that is over goes quiet: nothing is owed and nothing is awaited.
   `is-cancellationscheduled` belongs here and not with the running states: a subscription the customer has
   already ended is not a running one, and it is the single state this badge exists to tell apart — in the
   same white as „Aktywna" it says nothing the tile's own body does not. `is-draft` is the same case from the
   other side: an order that was never paid for. */
.id-status-badge.is-cancelled,
.id-status-badge.is-cancellationscheduled, .id-status-badge.is-draft,
.id-status-badge.is-closed, .id-status-badge.is-resolved, .id-status-badge.is-refunded {
    color: var(--text-muted);
}

.id-lens-card-body {
    display: grid;
    gap: 1.25rem;
    /* Less room under the card than over it: what ends the card is the menu, and its own control
       already carries the height of a touch target. With the full 1.25rem underneath, a closed menu
       sat on an empty band as deep as the row itself. */
    padding: 1.25rem 1.25rem .9rem;
}

    /* „Utworzono" and „Wyświetlenia" are one pair of facts about the film, not two paragraphs of
       copy, so the second sits directly under the first rather than a copy step below it. */
    .id-lens-card-body p + p {
        margin-top: .2rem;
    }

    .id-lens-card-body .odo-button {
        width: 100%;
        padding: 1rem;
    }

.id-card-menu {
    border-top: 1px solid var(--id-line);
}

    /* Set as a row rather than as a block with a floated sign: the min-height of a touch target used
       to be met by leaving the slack under the text, so the control looked bottom-heavy and the card
       ended on a gap. Centred in its own row, the same target reads as one line. */
    .id-card-menu summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding-block: .75rem;
        color: var(--text-muted);
        font-size: .68rem;
        list-style: none;
        cursor: pointer;
    }

        .id-card-menu summary::after {
            content: "+";
            color: var(--gold);
        }

    .id-card-menu[open] summary::after {
        content: "−";
    }

    .id-card-menu > div {
        display: grid;
        gap: .8rem;
        padding-top: 1rem;
    }

    /* The panel slides instead of appearing. A <details> shows and hides its contents outright, and
       on a grid of cards that makes the whole row re-lay itself in one frame. The transition is
       armed only once the script has taken the toggle over — with JavaScript off, and for a reader
       who has asked for less motion, the element opens the ordinary way. */
    .id-card-menu.is-sliding > div {
        overflow: hidden;
        transition: height .3s var(--ease-house);
    }

    .id-card-menu form, .id-card-menu button {
        width: fit-content;
    }

.id-pagination {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1.5rem;
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--id-line);
    font-size: .72rem;
}

    .id-pagination a {
        color: var(--white);
        text-decoration: none;
        transition: color var(--motion-quick) var(--ease-house);
    }

        .id-pagination a:hover,
        .id-pagination a:focus-visible {
            color: var(--gold);
        }

        .id-pagination a:last-child, .id-pagination > span:last-child {
            text-align: right;
        }

    .id-pagination > span {
        color: var(--text-muted);
    }

/* The grids and the filmable card are styled once, in the Filmable/Account regions further down. */

    .id-filmable-card.requires-action {
        border-color: var(--id-line-strong);
    }

.id-filmable-image {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background: #050505;
}

    .id-filmable-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .id-filmable-image .id-status-badge {
        position: absolute;
        top: 1rem;
        left: 1rem;
    }

    /* The edition, struck into the frame. Diagonally opposite the badge, where nothing else stands, and
       in the display face at a size that reads as a mark on the picture rather than as another label on
       top of it — a card carries one badge, and a second pill beside it would be two things competing to
       be read first.

       White and not gold: the badge is the accent on this picture and there is room for one. The frame
       behind it is a photograph of somebody's room and may be any brightness, so the numeral carries its
       own shadow rather than trusting the picture to be dark under it. */
    /* A band along the foot of the frame, with the year set at its right end. A frame is a photograph of
       somebody's room and may be anything from a night terrace to a white-walled lobby: on a shadow alone
       the mark read beautifully on the dark ones and all but vanished on the bright ones, which are most
       of them. What darkens is therefore aligned to the picture's own edge — the way a caption sits under
       a photograph — because a wash that floats in the corner instead reads as a smudge on the print,
       and a diagonal one reads as a grey triangle laid over it. On a dark frame none of it shows. */
    .id-filmable-image .id-filmable-year {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 2;
        padding: 3.2rem 1rem .55rem;
        background: linear-gradient(to top, rgba(5, 5, 5, .78), rgba(5, 5, 5, 0));
        color: var(--white-bright);
        font-family: var(--font-display);
        font-size: 2.4rem;
        font-weight: 300;
        font-style: normal;
        letter-spacing: .01em;
        line-height: 1;
        text-align: right;
        /* It is a mark on the frame, not something to reach for — a click belongs to the card. */
        pointer-events: none;
    }

        /* The numeral is set in an <i> so the words a screen reader is given can sit beside it without
           being drawn; the tag brings italics of its own, which a struck year does not want. */
        .id-filmable-image .id-filmable-year i {
            font-style: normal;
        }

.id-filmable-card-body {
    display: grid;
    gap: 1.1rem;
    padding: 1.5rem;
}

/* The figure a quiet line introduces — a date, a count — set in the page's own white, so the value
   is what is read and the label stays the label. */
.id-lens-card-body b {
    color: var(--white);
    font-weight: 500;
}

/* The one line on the card the venue acts on — gold when the guest consented to the brand using the film. */
.id-lens-card-body .id-lens-brand-use.is-granted {
    color: var(--gold);
}

/* One rhythm in this card, stated once. The body already sets a grid gap, and then the progress
   block added a rem of margin above and below its own, and the row of actions another 24px on top
   of that — so between the ladder and „Otwórz publiczną prezentację" stood sixty-four pixels of
   nothing, and an entry read as three cards stacked rather than as one. The gap belongs to the body;
   the children bring none. */
    .id-filmable-card-body .id-filmable-progress {
        margin: 0;
    }

    /* Three actions in a card this narrow wrap to a line each, and eighteen pixels between those
       lines is the distance between separate blocks, not between three things to do with one entry.
       The column gap is left alone: side by side they still need room not to read as one sentence. */
    /* The name and its notes, on their own rhythm. The card's gap is the distance between the things
       an entry is made of — the heading block, the ladder, the actions — and a sentence about this
       entry belongs to the heading rather than standing beside it as a fourth thing. */
    .id-filmable-card-head {
        display: grid;
        gap: .7rem;
    }

        /* The curator's note is written for the correction form, where it opens a page and is sized to
           do it. On a card it is one paragraph among several, so it drops the form's margins — which
           the card's own grid gap already provides — and a step of its scale with them. */
        .id-filmable-card-head .id-review-note {
            margin: 0;
            padding: .85rem 1rem;
            font-size: .85rem;
            line-height: 1.6;
        }

    .id-filmable-card-body .id-card-actions {
        /* Room over the row, because what sits above it is the entry's own ladder — the actions are
           answers to that state and not its last rung. Flush against it they read as one more step. */
        margin-top: 20px;
        gap: 8px 18px;
    }

/* One title for every card in the customer area, listed together. Left to each tab, the name of a product,
   a postcard, a chapter, a submitted space or a filed matter runs at half a dozen sizes — 1rem, 1.2, 1.25,
   1.5, 1.55, 1.6 — in two typefaces and two weights, so no two tabs read alike even where they show the
   same kind of thing. The display face, because a card carries a name; one size, because a card is a card.
   Rows in a dense list (an order, an invoice, a service line) keep their 1rem sans: that is a different
   thing and it stays one. */
.id-filmable-card h3,
.id-tile h3,
.id-lens-card-body h3,
.id-art-selected-grid h3,
.id-request-card h3,
.id-privacy-card h3,
.id-upsell h3 {
    margin-top: .65rem;
    color: var(--white);
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 1.5vw, 1.45rem);
    font-weight: 400;
    letter-spacing: -.02em;
    line-height: 1.25;
}

/* And one body copy under it, listed together so the value is set once. Left to each tab, the same
   sentence under the same kind of card runs at .7, .78, .8, .82 and .85rem in two greys and two
   line-heights — close enough that no single card looks wrong, far enough apart that no two tabs look
   alike. */
.id-filmable-card p,
.id-tile p,
.id-lens-card-body p,
.id-art-selected-grid p,
.id-privacy-card p,
.id-upsell p {
    margin-top: .7rem;
    color: var(--id-copy);
    font-size: .82rem;
    line-height: 1.7;
}

/* The request card is out of that group on purpose: every paragraph in it now says which of four
   things it is — the order it belongs to, the dates that bind us, what the customer wrote, what we
   answered — and each of those wants its own weight. One rule for all four made the answer we sent
   look exactly like the reference number above it. */

    .id-card-actions form {
        display: inline-flex;
    }

/* Only the subpage variant lives here — the plain .id-artist-panel is styled in the artist region below. */
.id-subpage .id-artist-panel {
    display: grid;
    grid-template-columns: minmax(16rem, .8fr) minmax(0, 1.2fr);
    gap: clamp(2rem, 6vw, 7rem);
    padding: clamp(2rem, 4vw, 4rem);
    border: 1px solid var(--id-line);
    background: var(--id-surface);
}

    .id-artist-panel > div > p {
        margin-top: 1rem;
        color: var(--id-copy);
        font-size: .86rem;
        line-height: 1.7;
    }

/* The artist's message to patrons, played in the page: the take being chosen on the right, the delivered
   one on the left. Black behind it rather than the surface's own grey — a video letterboxes itself, and a
   lighter frame around a dark first frame reads as a fault in the file. */
.id-artist-video {
    display: block;
    width: 100%;
    max-height: 22rem;
    margin-top: 1.25rem;
    border: 1px solid var(--id-line);
    background: var(--black);
}

/* The licence, stated in full before it is accepted: one row per thing the artist is agreeing to,
   the number or the deadline in the middle so the eye finds it without reading the note. */
/* The application form stands beside the whole deal, which runs several times its height. Stretched to
   the height of the column beside it, the form's own grid spread its field, its two consents and its
   button down that height with screens of air between them. It keeps its own height, and on a wide
   screen it stays in view under the account's strip while the terms beside it are read. */
.id-artist-panel > #artistApplicationForm {
    align-self: start;
}

@media (min-width: 901px) {
    .id-artist-panel > #artistApplicationForm {
        position: sticky;
        top: calc(var(--site-header-h, 72px) + var(--id-area-nav-h, 74px) + 2rem);
    }
}

.id-licence-brief {
    display: grid;
    margin: 0 0 2.5rem;
    padding: 0;
    border-top: 1px solid var(--id-line);
    list-style: none;
}

    .id-licence-brief li {
        padding: 1.1rem 0;
        border-bottom: 1px solid var(--id-line);
    }

        .id-licence-brief li > span {
            display: block;
            color: rgba(245, 245, 245, .5);
            font-size: .58rem;
            font-weight: 500;
            letter-spacing: .18em;
            text-transform: uppercase;
        }

        .id-licence-brief li > strong {
            display: block;
            margin: .5rem 0 .35rem;
            color: var(--white);
            font-family: var(--font-display);
            font-size: clamp(1.05rem, 1.6vw, 1.35rem);
            font-weight: 400;
            letter-spacing: -.01em;
            line-height: 1.25;
        }

        .id-licence-brief li > small {
            display: block;
            color: var(--id-copy);
            font-size: .8rem;
            line-height: 1.65;
        }

/* The day the licence was granted, kept as a record and set as one. As a .78rem grey paragraph with two
   links running on after the full stop it is the most important date on the artist's page set as the least
   important line on it, with two separate documents reading as one phrase. */
.id-licence-granted {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    margin-top: clamp(2.5rem, 5vw, 4rem);
    padding: clamp(1.35rem, 2.4vw, 1.9rem);
    border: 1px solid var(--hairline);
    border-left: 2px solid var(--hairline-strong);
    background: linear-gradient(90deg, var(--tint), transparent 60%);
}

    .id-licence-granted > div:first-child {
        display: grid;
        gap: .55rem;
    }

    .id-licence-granted p {
        margin: 0;
        color: var(--id-copy);
        font-size: .88rem;
        line-height: 1.65;
    }

.id-licence-granted-actions {
    display: grid;
    justify-items: start;
    gap: 1rem;
}

@media (max-width: 760px) {
    .id-licence-granted {
        grid-template-columns: 1fr;
    }
}

/* The gap is a property of the form and is written down as one, because the rule over a fieldset has
   to stand the same distance from the block above it as from the block below — and the block above it
   is separated by exactly this gap. */
.id-form,
.id-upload-form,
.id-profile-form {
    --id-form-gap: 1.5rem;
    display: grid;
    gap: var(--id-form-gap);
    width: 100%;
    max-width: none;
}

.id-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

    .id-form-grid .is-wide {
        grid-column: 1 / -1;
    }

.id-field,
.id-form > label:not(.id-check):not(.id-square-upload) {
    display: grid;
    gap: .55rem;
    color: var(--white);
    font-size: .72rem;
    font-weight: 500;
}

    /* The checkout's label — see .chk-field span, and the Auth region below, which states the same
       thing for the forms that do not go through .id-field. */
    .id-field label,
    .id-form > label:not(.id-check):not(.id-square-upload) {
        color: var(--text-muted);
        font-size: .66rem;
        font-weight: 600;
        letter-spacing: .2em;
        text-transform: uppercase;
    }

        /* Same control as the checkout's, stated in full. `font: inherit` took the wrapper's .72rem
           label size into the field, which is what made a typed e-mail address smaller than the
           hint beneath it. */
        .id-field input,
        .id-field select,
        .id-field textarea,
        .id-form > label:not(.id-check):not(.id-square-upload) input,
        .id-form > label:not(.id-check):not(.id-square-upload) select,
        .id-form > label:not(.id-check):not(.id-square-upload) textarea {
            width: 100%;
            min-height: 3.4rem;
            padding: 1.05rem 1.1rem;
            border: 1px solid var(--line);
            border-radius: 0;
            outline: none;
            background: rgba(245, 245, 245, .018);
            color: var(--white);
            font-family: var(--font);
            font-size: 1rem;
            letter-spacing: normal;
            text-transform: none;
        }

    /* Height is the field's own business — see the auto-fit in site.js. The drag handle went with
       it: a control somebody has to pull on to read what they just wrote is not one this house
       hands anybody. */
    .id-field textarea,
    .id-form textarea {
        min-height: 8rem;
        overflow-y: hidden;
        resize: none;
    }

        .id-field input:focus,
        .id-field select:focus,
        .id-field textarea:focus,
        .id-form input:focus,
        .id-form select:focus,
        .id-form textarea:focus {
            border-color: var(--gold);
            box-shadow: 0 0 0 1px var(--gold);
        }

    .id-field input:disabled {
        border-color: var(--id-line);
        color: var(--text-muted);
        opacity: 1;
    }

    .id-field small {
        color: var(--text-muted);
        font-size: .68rem;
        line-height: 1.5;
    }

/* „Opcjonalnie" belongs to the label above it, so it sits right under it rather than floating
   halfway to the input. */
.id-form label small {
    display: block;
    margin-top: .1rem;
    color: var(--text-muted);
    font-size: .66rem;
    font-weight: 400;
    line-height: 1.3;
}

/* .id-field-error is described once, in the Auth region below. */

.id-form-submit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--id-line);
}

    .id-form-submit p {
        max-width: 28rem;
        color: var(--text-muted);
        font-size: .7rem;
        line-height: 1.5;
        /* Help prints the address a reply will go to inside this note — see .id-logout-dialog p. */
        overflow-wrap: anywhere;
    }

/* .id-check and its box are styled once, in site.css's „Consent checkbox” region. */
.id-check a {
    color: var(--white);
    transition: color var(--motion-quick) var(--ease-house);
}

    .id-check a:hover,
    .id-check a:focus-visible {
        color: var(--gold);
    }

/* .id-square-upload is described once, in the artist region below. The block that stood here gave it
   a width and a ground that survived and a dashed border that did not, so the plate was half
   described in each of two places. */

.id-form-step {
    display: grid;
}

.id-document-list,
.id-order-list {
    display: grid;
    gap: 1px;
    border: 1px solid var(--id-line);
    background: var(--id-line);
}

/* .id-section-action is described once, at the foot of this file — its margin included. */

.id-order-card {
    border: 1px solid var(--id-line);
    background: var(--id-surface);
}

    .id-order-card > summary {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 2rem;
        padding: clamp(1.5rem, 2.6vw, 2rem);
        cursor: pointer;
        list-style: none;
        transition: background-color .3s ease;
    }

        /* The row that opens the card answers the pointer. It is the only thing on this tab that is
           pressed and did not move under the cursor at all, which reads as disabled rather than quiet. */
        .id-order-card > summary:hover {
            background: var(--id-surface-raised);
        }

        .id-order-card > summary::-webkit-details-marker {
            display: none;
        }

        .id-order-card > summary h3 {
            margin-top: .5rem;
            font-size: 1rem;
            font-weight: 500;
        }

        .id-order-card > summary > div:last-child {
            display: flex;
            align-items: center;
            gap: 1.5rem;
        }

            /* What the order cost is what the row is scanned for, so it is not set below the name of
               the order it belongs to. */
            .id-order-card > summary > div:last-child > strong {
                color: var(--white);
                font-size: 1rem;
                font-weight: 500;
            }

/* The one label a block inside a card is headed by, and the only one. Written separately per area — .58rem
   here, .64rem in the relationship tiles, .65rem in the Lens statistics, each with its own tracking — the
   same rank of type comes out at three sizes on three tabs of one account. */
.id-block-label {
    display: block;
    margin-bottom: .85rem;
    color: var(--text-muted);
    font-size: .68rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* A block that heads a chart is not labelled, it is titled: „Ostatnie 14 dni" names what the rows
   underneath show, and set in the tracked uppercase of .id-block-label it read as a field caption
   over a figure. Same display face, same light weight and the same negative tracking as a section
   heading — one rank down in scale, not a different language. The two are deliberately separate
   classes: a caption over a value and a title over a chart are different ranks, and folding them
   into one is how .id-block-label came to be written at three sizes in the first place. */
.id-block-title {
    display: block;
    margin-bottom: .85rem;
    color: var(--white);
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 300;
    letter-spacing: -.03em;
    line-height: 1.15;
}

/* Two columns and two full-width bands: the path over the top, what was bought on the left, the documents
   on the right, and the two statutory declarations across the foot. Three unequal columns size themselves
   from the longest block on the card, so the same order reads differently depending on how many things are
   in it. */
.id-order-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.75rem, 3vw, 2.5rem);
    padding: clamp(1.5rem, 2.6vw, 2rem);
    border-top: 1px solid var(--id-line);
}

/* The path reads left to right, because that is the direction the order itself moves in and because
   two steps and four steps then occupy the same band instead of the same column of different heights. */
.id-order-timeline {
    grid-column: 1 / -1;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    margin: 0;
    padding: 0;
    list-style: none;
}

    .id-order-timeline li {
        position: relative;
        padding: 1.75rem 1.25rem 0 0;
        color: var(--text-muted);
    }

        .id-order-timeline li > span {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: .75rem;
        }

            /* The house's mark, standing on its point. */
            .id-order-timeline li > span::before {
                content: "";
                position: absolute;
                top: .1rem;
                left: .05rem;
                width: .5rem;
                height: .5rem;
                border: 1px solid var(--id-line-strong);
                background: var(--id-surface);
                transform: rotate(45deg);
            }

            /* The thread to the next mark, drawn between the two of them and never through one. The
               insets are what keep it clear of both points — the next step's diamond begins just past
               this item's right edge, since the columns carry no gap of their own. */
            .id-order-timeline li:not(:last-child) > span::after {
                content: "";
                position: absolute;
                top: .35rem;
                left: .95rem;
                right: .35rem;
                height: 1px;
                background: var(--id-line);
            }

        .id-order-timeline li.is-done {
            color: var(--white);
        }

            .id-order-timeline li.is-done > span::before {
                border-color: var(--gold);
                background: var(--gold);
            }

            /* A segment leaving a step that has happened is drawn stronger, so the path shows how far the
               order has actually come rather than only which stations it has. */
            .id-order-timeline li.is-done:not(:last-child) > span::after {
                background: var(--hairline-strong);
            }

    .id-order-timeline strong {
        display: block;
        font-size: .85rem;
        font-weight: 500;
    }

    .id-order-timeline small {
        display: block;
        margin-top: .25rem;
        color: var(--text-muted);
        font-size: .78rem;
    }

.id-order-contents p {
    display: grid;
    gap: .3rem;
    padding: .75rem 0;
    border-bottom: 1px solid var(--id-line);
}

    .id-order-contents p:first-of-type {
        padding-top: 0;
    }

    /* The rules belong between the lines, not under the last one: the block already ends on an edge
       of its own, so the two stacked drew a double stroke across the order. */
    .id-order-contents p:last-of-type {
        border-bottom: 0;
    }

.id-order-contents strong {
    color: var(--white);
    font-size: .95rem;
    font-weight: 500;
}

    /* The count, one step quieter than the name it multiplies — it is the smaller half of the line. */
    .id-order-contents strong em {
        color: var(--text-muted);
        font-style: normal;
    }

.id-order-contents small, .id-order-documents small {
    color: var(--text-muted);
    font-size: .85rem;
    line-height: 1.6;
}

    /* A line's own way into a complaint: the size of the note above it, and only as wide as its words —
       stretched by the grid, the whole row would answer a click. */
    .id-order-contents .id-order-line-action {
        justify-self: start;
        font-size: .85rem;
        line-height: 1.6;
    }

.id-order-documents {
    display: grid;
    align-content: start;
    gap: 1.75rem;
}

    /* Each document is a label with one thing to press under it. */
    .id-order-documents > div {
        display: grid;
        justify-items: start;
        gap: .6rem;
    }

        .id-order-documents > div > .id-block-label {
            margin-bottom: 0;
        }

.id-document-list article {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 2rem;
    padding: 1.25rem 1.5rem;
    background: var(--id-surface);
}

.id-document-list h3 {
    margin-top: .3rem;
    font-size: 1rem;
    font-weight: 500;
}

.id-document-list p, .id-document-list span, .id-document-list small {
    color: var(--text-muted);
    font-size: .68rem;
}

.id-document-list article > div:last-child {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 1rem;
}

/* The artist's three steps to the catalogue: a rail drawn in white as far as the artist has come and in
   gold at the step they stand on, a square mark, and the step's name in the display face. Three columns for three steps — a four-column strip ends
   the row in an empty bordered box — and the name is set large enough to lead, because this is the first
   thing an artist reads on the page that decides whether their work is published. */
.id-artist-path {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 2.5vw, 2.25rem);
    margin: 0 0 clamp(2.5rem, 5vw, 4rem);
    padding: 0;
    list-style: none;
}

    .id-artist-path li {
        display: grid;
        justify-items: start;
        gap: .9rem;
        padding-top: 1.15rem;
        border-top: 1px solid var(--id-line);
        animation: idArtistPathIn .6s var(--ease-house) both;
        animation-delay: calc(var(--i, 0) * 90ms);
    }

        /* The rail is the step's own top border, so the path is drawn by the steps rather than by a
           line behind them — nothing to keep in sync when a step is added. */
        .id-artist-path li.is-complete {
            border-top-color: var(--white-faint);
        }

        .id-artist-path li.is-current {
            border-top-color: var(--gold);
        }

.id-artist-path-mark {
    display: grid;
    place-items: center;
    width: 2.7rem;
    height: 2.7rem;
    border: 1px solid var(--hairline);
    color: var(--text-muted);
    font-family: var(--font-display);
    font-size: 1rem;
    line-height: 1;
}

    .id-artist-path li.is-current .id-artist-path-mark {
        border-color: var(--gold);
        color: var(--gold);
    }

    .id-artist-path li.is-complete .id-artist-path-mark {
        border-color: var(--white);
        background: var(--white);
        color: #050505;
    }

.id-artist-path strong {
    color: var(--white);
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 1.4vw, 1.3rem);
    font-weight: 400;
    letter-spacing: -.01em;
    line-height: 1.25;
}

.id-artist-path li:not(.is-complete):not(.is-current) strong {
    color: var(--text-muted);
}

@keyframes idArtistPathIn {
    from { opacity: 0; transform: translateY(10px) }
    to { opacity: 1; transform: none }
}

@media (prefers-reduced-motion: reduce) {
    .id-artist-path li {
        animation: none;
    }
}

@media (max-width: 620px) {
    .id-artist-path {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
}

/* .id-waiting is described once, in the artist region below. */

/* A refused application, in the one voice the house refuses in — the same red the message strip and a
   rejected field use. On the plain waiting plate „czekamy na decyzję" and „nie przyjęliśmy zgłoszenia" are
   one object in one hairline, and the sentence underneath is the only thing saying which of the two
   happened. */
.id-waiting.is-rejected {
    border-color: rgba(192, 57, 43, .45);
    background: rgba(192, 57, 43, .06);
}

    .id-waiting.is-rejected h3 {
        color: #e55;
    }

    .id-waiting h3 {
        margin-top: .75rem;
        font-size: 1.35rem;
        font-weight: 500;
    }

    .id-waiting p {
        max-width: 44rem;
        margin-top: 1rem;
        color: var(--id-copy);
        line-height: 1.7;
    }

/* .id-empty is styled once, in the Account dashboard region. */
    .id-empty .id-action {
        margin-top: 1.5rem;
    }

.id-logout-modal[hidden] {
    display: none;
}

/* The logout modal is styled once, in the later sign-out region. */

body.id-modal-open {
    overflow: hidden;
}

button:disabled,
.odo-button:disabled {
    opacity: .38;
    pointer-events: none;
}

@media (max-width: 1080px) {
    .id-lens-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .id-library-tools {
        grid-template-columns: minmax(16rem, 1fr) 1.5fr;
    }

        .id-library-tools .id-clear-filters {
            grid-column: 1 / -1;
        }

}

@media (max-width: 760px) {
    .id-dashboard > .container {
        width: calc(100% - 2.5rem);
    }

    .id-area-nav-wrap {
        margin-bottom: 3.5rem;
    }

    .id-page-head,
    .id-dashboard-head {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 2rem;
    }

    /* Both grids of the two-part masthead collapse here, or the link and the figure keep a column
       each on a screen that has room for one. */
    .id-subpage .id-page-head--away,
    .id-subpage .id-page-head--away > .id-page-head-main {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

        .id-subpage .id-page-head--away > .odo-button {
            justify-self: start;
        }

    .id-dashboard .id-page-head h1,
    .id-dashboard .id-dashboard-head h1 {
        font-size: clamp(2.65rem, 12vw, 4.4rem);
    }

    .id-page-head-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .id-page-stat {
        min-width: 0;
        padding: 1.25rem 0 0;
        border-top: 1px solid var(--id-line);
        border-left: 0;
    }

        .id-page-stat strong {
            font-size: 2.75rem;
        }

    .id-lens-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .id-library-tools {
        grid-template-columns: 1fr;
    }

        .id-library-tools .id-clear-filters {
            grid-column: auto;
        }

    .id-filmable-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .id-artist-panel,
    .id-subpage .id-artist-panel {
        grid-template-columns: 1fr;
        padding: 1.5rem;
    }

    .id-order-details {
        grid-template-columns: 1fr;
    }

    /* The path turns back down the page. Four stations across a phone give each one about the width
       of the word „Dostarczono", so the row is read as one column of steps instead. */
    .id-order-timeline {
        grid-auto-flow: row;
        grid-auto-columns: auto;
    }

        .id-order-timeline li {
            padding: 0 0 1.1rem 1.5rem;
        }

            .id-order-timeline li:last-child {
                padding-bottom: 0;
            }

            .id-order-timeline li > span {
                right: auto;
                bottom: 0;
                width: .75rem;
                height: auto;
            }

                .id-order-timeline li > span::before {
                    top: .2rem;
                }

                /* The same thread, now running down between two marks. */
                .id-order-timeline li:not(:last-child) > span::after {
                    top: .95rem;
                    bottom: .2rem;
                    left: .3rem;
                    right: auto;
                    width: 1px;
                    height: auto;
                }

    .id-form-submit {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 520px) {
    .id-dashboard > .container {
        width: calc(100% - 2rem);
    }

    .id-area-nav.sticky-nav-cat {
        /* Full width with a fading right edge, so the strip reads as scrollable
           instead of looking accidentally cut off. */
        width: 100%;
        padding-inline: 5vw;
        scroll-padding-inline: 5vw;
        gap: 6vw;
        /* The fade stays inside the side padding: a strip short enough not to scroll puts its last tab
           against the right edge, and a wider fade left „Wyloguj się" permanently dimmed. */
        -webkit-mask-image: linear-gradient(90deg, #050505 calc(100% - 5vw), transparent);
        mask-image: linear-gradient(90deg, #050505 calc(100% - 5vw), transparent);
    }

    .id-area-nav .nav-cat-link {
        font-size: .6rem;
    }

    .id-section-heading,
    .id-library-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    /* .id-secondary-paths turns into a left-ranged column here — see the rule at the foot of the ID
       overview exhibit region. It has to live down there rather than in this block: it needs
       .id-overview-page to reach the element at all, and with equal specificity the later of the two
       rules wins, so written here it lost the tie to the base rule and left the row centred. */

    .id-lens-grid,
    .id-filmable-grid {
        grid-template-columns: 1fr;
    }

    .id-lens-card {
        width: min(100%, 22rem);
        margin-inline: auto;
    }

    .id-pagination {
        grid-template-columns: 1fr 1fr;
    }

        .id-pagination > span:nth-child(2) {
            grid-column: 1 / -1;
            grid-row: 1;
            text-align: center;
        }

    .id-form-grid {
        grid-template-columns: 1fr;
    }

        .id-form-grid .is-wide {
            grid-column: auto;
        }

    .id-order-card > summary {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

        .id-order-card > summary > div:last-child {
            justify-content: space-between;
        }

    .id-document-list article {
        grid-template-columns: 1fr;
    }

        .id-document-list article > div:last-child {
            justify-content: flex-start;
        }

    .id-privacy-actions {
        grid-template-columns: 1fr;
    }

    .id-logout-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

        .id-logout-actions .odo-button {
            width: 100%;
        }
}

@media (prefers-reduced-motion: reduce) {
    .id-dashboard *, .id-dashboard *::before, .id-dashboard *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}
/* #endregion */

/* #region Art chapters */
.id-art-chapter-page .id-page-head {
    max-width: 62rem;
}

.id-art-current {
    padding-block: clamp(3rem, 6vw, 6rem);
    border-block: 1px solid var(--hairline);
}

/* The chapter head carries .id-section-heading, so its row, its scale and the step down to its lead
   are the area's own. Stated again here, a fifth of a rem wider and half a rem larger, it is the kind
   of private measurement that makes one tab look like a different product from the next. What belongs
   here is the empty state, which is not a section heading: it is a plate with its own copy inside. */
.id-art-empty h2 {
    margin-top: 1rem;
    font-family: var(--font-display);
    font-size: clamp(2.35rem, 4vw, 4.5rem);
    font-weight: 300;
    letter-spacing: -.04em;
    line-height: .98;
}

.id-art-empty p, .id-art-state p {
    max-width: 40rem;
    color: var(--white-soft);
    line-height: 1.8;
}

/* One frame, one plate. This is the page's main navigation — which frame am I choosing for — so it reads as
   a wall plate rather than as a strip of small capitals with a number over it, which carries the weight of a
   filter: the figure struck large, the frame's own chapter under it (a frame added later is on its first
   work while its neighbour is on its fourth) and the date this frame has to be answered by — a date per
   frame, not one in the chapter's header for all of them at once. */
.id-art-frame-tabs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 1px;
    background: var(--hairline);
    border-block: 1px solid var(--hairline);
}

.id-art-frame-tab {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: .9rem;
    padding: 1.15rem 1.25rem;
    border: 0;
    background: var(--black);
    color: var(--white-soft);
    cursor: pointer;
    text-align: left;
    transition: background .35s var(--ease-house), color .35s var(--ease-house);
}

/* White at rest; the numeral takes gold on the frame being chosen and under the hand. */
.id-art-frame-tab-index {
    color: rgba(245, 245, 245, .5);
    transition: color .35s var(--ease-house);
    font-family: var(--font-display);
    font-size: 1.9rem;
    font-style: italic;
    font-weight: 300;
    line-height: 1;
}

.id-art-frame-tab-copy {
    display: grid;
    min-width: 0;
    gap: .15rem;
}

    .id-art-frame-tab-copy strong {
        font-size: .82rem;
        font-weight: 500;
        letter-spacing: .04em;
    }

    .id-art-frame-tab-copy small {
        color: var(--text-muted);
        font-size: .66rem;
        letter-spacing: .04em;
    }

.id-art-frame-tab[aria-selected="true"] {
    background: var(--gold-dim);
    color: var(--white);
}

    .id-art-frame-tab:hover .id-art-frame-tab-index,
    .id-art-frame-tab:focus-visible .id-art-frame-tab-index,
    .id-art-frame-tab[aria-selected="true"] .id-art-frame-tab-index {
        color: var(--gold);
    }

/* „Wybrane" is markup, not a string in this stylesheet — copy in a file no translator opens is copy
   that never gets translated. Hidden until the frame has a work in it. */
.id-art-frame-tab-done {
    position: absolute;
    top: .7rem;
    right: .9rem;
    color: var(--gold);
    font-size: .55rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity .3s ease;
}

.id-art-frame-tab.is-complete .id-art-frame-tab-done {
    opacity: 1;
}

.id-art-frame-panel {
    padding-top: 2rem;
}

/* A wall of works, not a form: the works are the square the whole house is built on, so they are hung as a
   wall and the row fills itself. Fixed at three columns each thumbnail is a photograph with its title and
   its artist printed underneath, which turns a catalogue of twenty works into a page of type to scroll
   past — and the one fact a patron is weighing is the picture. */
.id-art-catalog {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: 1px;
}

.id-art-work {
    display: block;
    padding: 0;
    border: 0;
    background: #050505;
    color: var(--white);
    text-align: left;
}

/* The hairline belongs to the work, not to the grid. Drawn the other way round — a gold ground
   showing through a one-pixel gap — it also showed through wherever the last row ran out of works,
   so a catalogue of seven ended in a lit gold square with nothing in it. */
.id-art-work-image {
    position: relative;
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--black);
    box-shadow: inset 0 0 0 1px var(--hairline);
}

    .id-art-work-image img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 1.8s var(--ease-house), opacity .35s var(--ease-house), filter .35s var(--ease-house);
    }

/* Read on demand. Every title and every artist printed at once is what turned a wall of pictures
   into a page of names — the picture is the thing being chosen, and the name is what settles it
   once one has been picked out. */
.id-art-work-meta {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    gap: .15rem;
    padding: 2.2rem .7rem .6rem;
    background: linear-gradient(to top, rgba(5, 5, 5, .92), transparent);
    opacity: 0;
    transform: translateY(.4rem);
    transition: opacity .35s ease, transform .35s ease;
    pointer-events: none;
}

    .id-art-work-meta strong {
        color: var(--white);
        font-family: var(--font-display);
        font-size: .92rem;
        font-weight: 300;
        line-height: 1.2;
    }

    .id-art-work-meta span {
        color: var(--text-muted);
        font-size: .62rem;
        letter-spacing: .1em;
        text-transform: uppercase;
    }

.id-art-work:hover .id-art-work-meta,
.id-art-work:focus-visible .id-art-work-meta,
.id-art-work[aria-pressed="true"] .id-art-work-meta {
    opacity: 1;
    transform: none;
}

.id-art-work:hover img,
.id-art-work:focus-visible img {
    transform: scale(1.025);
}

.id-art-work-owned {
    position: absolute;
    top: .55rem;
    left: .55rem;
    padding: .2rem .45rem;
    background: rgba(5, 5, 5, .86);
    color: var(--white);
    font-size: .5rem;
    letter-spacing: .18em;
    text-transform: uppercase;
}

/* Chosen, and unmistakably so: the mark is struck in the corner, a gold rule closes round the work, and
   every square that was not picked steps back — the way a chosen work is lit on a wall and the rest of the
   room is not. A one-pixel outline on a black ground is invisible on a grid of dark squares. */
.id-art-work-check {
    position: absolute;
    top: .55rem;
    right: .55rem;
    display: grid;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--gold);
    color: var(--black);
    font-style: normal;
    opacity: 0;
    place-items: center;
    transform: scale(.6);
    transition: opacity .3s ease, transform .3s var(--ease-house);
}

    .id-art-work-check::before {
        content: "✓";
        font-size: .78rem;
        line-height: 1;
    }

.id-art-work[aria-pressed="true"] .id-art-work-image {
    outline: 2px solid var(--gold);
    outline-offset: -2px;
}

.id-art-work[aria-pressed="true"] .id-art-work-check {
    opacity: 1;
    transform: none;
}

.id-art-catalog:has(.id-art-work[aria-pressed="true"]) .id-art-work[aria-pressed="false"] img {
    opacity: .38;
    filter: saturate(.55);
}

    /* Still answerable: a patron changing their mind has to be able to see the alternative again. */
    .id-art-catalog:has(.id-art-work[aria-pressed="true"]) .id-art-work[aria-pressed="false"]:hover img,
    .id-art-catalog:has(.id-art-work[aria-pressed="true"]) .id-art-work[aria-pressed="false"]:focus-visible img {
        opacity: .9;
        filter: none;
    }

.id-art-configurator-footer {
    position: sticky;
    bottom: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-top: 1px;
    padding: 1.25rem 0;
    border-top: 1px solid var(--hairline);
    background: rgba(5, 5, 5, .94);
    backdrop-filter: blur(16px);
}

    .id-art-configurator-footer p {
        color: var(--text-muted);
    }

.id-art-state {
    padding: clamp(2rem, 5vw, 4rem);
    border: 1px solid var(--hairline);
    background: var(--surface-card);
}

/* The chapter as it will arrive. Each work is in the house's own moulding — the same border-image the
   artist's page and the Art configurator hang a work in — and the row fills itself rather than being told
   a number. Not a grid of cards on a gold hairline ground: that is the shape this site uses for things
   still for sale, and this is the opposite moment, where the choice is settled and all a patron wants from
   the screen is to see the work hanging. */
.id-art-selected-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: clamp(1.6rem, 3vw, 2.75rem);
    margin-top: clamp(1.6rem, 3vh, 2.5rem);
}

.id-art-selected {
    position: relative;
    margin: 0;
}

    /* The frame is one link to the artist's page, stretched over it rather than wrapped around it,
       so the caption inside stays a caption. */
    .id-art-selected-link {
        position: absolute;
        inset: 0;
        z-index: 3;
    }

    .id-art-selected:has(.id-art-selected-link) .id-art-selected-frame {
        transition: border-color .35s ease;
    }

    .id-art-selected:hover .id-art-selected-link ~ .id-art-selected-frame {
        border-color: var(--gold-border);
    }

.id-art-selected-frame {
    box-sizing: border-box;
    aspect-ratio: 1;
    overflow: hidden;
    border: clamp(.55rem, 1.6vw, 1rem) solid transparent;
    border-image: url('/img/art/frame-wood.webp') 30% round;
    outline: 1px solid var(--hairline-strong);
    background: #050505;
    box-shadow: 0 1.6rem 3.5rem rgba(5, 5, 5, .55);
    /* The moulding taken down a little; a border-image has nothing under it to tint, so the dimming
       sits on the whole plate and the work inside takes its own grade back below. */
    filter: brightness(.88);
}

    .id-art-selected-frame img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: var(--photo-grade);
    }

.id-art-selected figcaption {
    display: grid;
    gap: .3rem;
    margin-top: 1.1rem;
}

    .id-art-selected figcaption strong {
        color: var(--white);
        font-family: var(--font-display);
        font-size: 1.05rem;
        font-weight: 300;
        line-height: 1.25;
    }

    .id-art-selected figcaption small {
        color: var(--text-muted);
        font-size: .72rem;
    }

    .id-art-selected-grid span, .id-art-history-list header span {
        color: rgba(245, 245, 245, .5);
        font-size: .65rem;
        letter-spacing: .12em;
        text-transform: uppercase;
    }


.id-art-tracking {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .75rem 2rem;
    margin-top: 1px;
    padding: 1.5rem;
    border: 1px solid var(--hairline);
    color: var(--white);
    text-decoration: none;
    transition: border-color var(--motion) var(--ease-house);
}

    .id-art-tracking span {
        color: rgba(245, 245, 245, .5);
        font-size: .66rem;
        letter-spacing: .13em;
        text-transform: uppercase;
        transition: color var(--motion) var(--ease-house);
    }

    a.id-art-tracking:hover,
    a.id-art-tracking:focus-visible {
        border-color: var(--gold-hover);
    }

        a.id-art-tracking:hover span,
        a.id-art-tracking:focus-visible span {
            color: var(--gold);
        }

/* The rhythm every other tab keeps: the section's own space, one hairline above it in the customer
   area's own colour. These two stood a whole rem taller than their neighbours and closed themselves
   top and bottom, so the Art tab read as a different page of a different site. */
.id-art-empty {
    padding: clamp(3rem, 6vw, 5.5rem) 0;
    border-top: 1px solid var(--id-line);
}

/* A way out, offered at the size of an aside — see ArtChapter.cshtml. */
/* Help choosing for the room. The offer is folded to one quiet line above the catalogue — most patrons choose on
   their own — and opens onto the same form every page of Odoardo ID uses. The waiting state and the proposal are
   plates, like the paused chapter, because they are the chapter's news rather than a control. */
.id-art-room {
    margin-bottom: clamp(1.6rem, 3vw, 2.5rem);
    border-block: 1px solid var(--id-line);
}

    .id-art-room summary {
        padding: 1.1rem 0;
        color: var(--text-muted);
        font-size: .85rem;
        cursor: pointer;
    }

    .id-art-room[open] summary {
        color: var(--white-soft);
    }

.id-art-room-form {
    padding-bottom: clamp(1.6rem, 3vw, 2.5rem);
}

.id-art-room-state,
.id-art-room-proposal {
    margin-bottom: clamp(1.6rem, 3vw, 2.5rem);
}

.id-art-room-proposal {
    padding: clamp(2rem, 5vw, 4rem);
    border: 1px solid var(--hairline);
    background: var(--surface-card);
}

    .id-art-room-proposal > p {
        max-width: 40rem;
        margin-top: 1rem;
        color: var(--white-soft);
        line-height: 1.8;
    }

.id-art-room-accept {
    margin-top: clamp(1.6rem, 3vh, 2.5rem);
}

.id-art-room-change {
    color: var(--text-muted);
    font-size: .85rem;
}

/* The photographs the patron sent, small: they are a receipt of what was sent, not a gallery. */
.id-art-room-photos {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.25rem;
}

    .id-art-room-photos img {
        width: 6rem;
        height: 6rem;
        object-fit: cover;
        border: 1px solid var(--hairline);
    }

.id-art-pause {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .65rem;
    padding: clamp(1.75rem, 3vw, 2.5rem) 0;
    border-top: 1px solid var(--id-line);
    color: var(--text-muted);
    font-size: .85rem;
}

    .id-art-pause form {
        display: inline-flex;
    }

.id-art-history-list {
    border-top: 1px solid var(--id-line);
}

    .id-art-history-list article {
        display: grid;
        grid-template-columns: minmax(12rem, .35fr) 1fr;
        gap: 3rem;
        padding: 2rem 0;
        border-bottom: 1px solid var(--hairline);
    }

    .id-art-history-list header {
        display: grid;
        align-content: start;
        gap: .75rem;
    }

        .id-art-history-list header strong {
            font-family: var(--font-display);
            font-size: 1.5rem;
            font-weight: 300;
        }

    .id-art-history-list article > div {
        display: grid;
        gap: .75rem;
    }

    .id-art-history-list p {
        display: grid;
        grid-template-columns: 6rem minmax(0, 1fr);
        gap: 1rem;
        color: var(--text-muted);
        font-size: .8rem;
    }

    @media (max-width: 520px) {
        .id-art-history-list p {
            grid-template-columns: minmax(0, 1fr);
            gap: .2rem;
        }
    }

    .id-art-history-list b {
        color: var(--white);
        font-weight: 400;
    }

@media (max-width: 800px) {
    /* The chapter head is not named here any more: it is a .id-section-heading, and the area
       already stacks those on a narrow screen. */
    .id-art-pause {
        display: grid;
    }

    /* Neither .id-art-catalog nor .id-art-selected-grid is here any more: both fill their own rows
       now, so a narrow screen simply fits fewer works to a row without being told a number. */
    .id-art-history-list article {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

@media (max-width: 520px) {
    .id-art-configurator-footer {
        align-items: stretch;
        flex-direction: column;
    }
}

/* A phone held sideways: the header and the area strip together took two fifths of the screen, and
   this footer another quarter. Only the site header stays fixed. */
@media (max-height: 500px) {
    .id-area-nav-wrap,
    .id-art-configurator-footer {
        position: static;
    }
}

/* Pinned to the bottom edge, so it clears the home indicator. */
.id-art-configurator-footer {
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom, 0px));
}
/* #endregion */

/* #region ID overview exhibit */
/* The overview's own page padding, written once and only here. Written again further down as a
   `padding-block` under the same two classes in the opposite order, the two read as different selectors
   and only the later pair of vertical values applies. The sides are nought. */
.id-overview-page.id-dashboard {
    padding: clamp(3.2rem, 3.8vw, 3.8rem) 0 clamp(4rem, 8vw, 7rem);
}

    .id-overview-page.id-dashboard > .container {
        width: min(90vw, var(--section-content-max));
        max-width: none;
    }

.id-overview-page .id-area-nav-wrap {
    margin-bottom: clamp(3rem, 5.5vw, 4.5rem);
}

/* One column: the head holds the greeting alone, and a second track reserved for nothing squeezed the
   greeting into half the page beside empty ground. */
.id-overview-page .id-overview-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: clamp(4rem, 9vw, 10rem);
    min-height: 0;
    margin: 0 0 clamp(4.5rem, 8vw, 7rem);
    padding-top: clamp(2rem, 4vw, 3rem);
    border-bottom: 0;
}

.id-overview-page .id-overview-intro {
    max-width: 46rem;
}

.id-overview-page .id-overview-head .h-tag {
    display: flex;
    align-items: center;
    width: fit-content;
    gap: .8rem;
    line-height: 1;
}

/* Wide enough for the greeting to stand on one line — „Dzień dobry" is eleven characters and
   „Dobry wieczór" thirteen, so an 8ch measure divides both of them in half. */
.id-overview-page.id-dashboard .id-overview-head h1 {
    max-width: 14ch;
    margin: 1.35rem 0 0;
    color: var(--white);
    font-family: var(--font-display);
    font-size: var(--hero-title-size);
    font-weight: 300;
    letter-spacing: -.04em;
    line-height: var(--hero-title-line-height);
}

.id-overview-page.id-dashboard .id-dashboard-purpose {
    max-width: 38rem;
    margin-top: clamp(2rem, 3vw, 3rem);
    color: var(--white-soft);
    font-family: var(--font);
    font-size: clamp(1rem, 1.1vw, 1.08rem);
    line-height: 1.8;
}


.id-overview-page .id-alert {
    margin: 2rem 0 0;
}

.id-overview-page .id-all-clear {
    display: grid;
    grid-template-columns: minmax(9rem, .35fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 5rem);
    min-height: 14rem;
    margin: clamp(4rem, 7vw, 7rem) 0 0;
    padding: 0;
    border: 1px solid var(--hairline);
    background: linear-gradient(100deg, var(--tint), transparent 55%);
}

    .id-overview-page .id-all-clear > span {
        display: grid;
        width: auto;
        height: auto;
        place-items: center;
        border: 0;
        border-right: 1px solid var(--hairline);
        border-radius: 0;
        color: var(--gold);
        font-family: var(--font-display);
        font-size: 3rem;
    }

    .id-overview-page .id-all-clear > div {
        align-self: center;
        padding: 2rem 2rem 2rem 0;
    }

    .id-overview-page .id-all-clear small {
        display: block;
        margin-bottom: .8rem;
        color: rgba(245, 245, 245, .5);
        font-size: .6rem;
        letter-spacing: .18em;
        text-transform: uppercase;
    }

    .id-overview-page .id-all-clear strong {
        font-family: var(--font-display);
        font-size: clamp(1.9rem, 3vw, 3rem);
        font-weight: 300;
    }

    .id-overview-page .id-all-clear p {
        margin-top: .65rem;
        color: var(--text-muted);
        font-size: .82rem;
    }

.id-overview-page .id-overview-relationship {
    padding: clamp(1.1rem, 2vw, 1.75rem) 0 0;
    border: 0;
}

.id-overview-page .id-section-heading {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    margin-bottom: clamp(3rem, 6vw, 5.5rem);
}

    .id-overview-page .id-section-heading > div {
        grid-column: 1 / 8;
        max-width: none;
    }

/* The overview takes the same heading as every tab — see the one definition above. A whole rem
   larger, on the public site's editorial scale, the first screen of the area does not match the
   eight behind it. */

.id-overview-page .id-section-heading p {
    max-width: 33rem;
    margin-top: var(--section-lead-gap);
    color: var(--white-soft);
    line-height: 1.8;
}

.id-overview-page .id-relationship-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.25rem, 2.2vw, 2rem);
    border: 0;
    background: transparent;
}

    .id-overview-page .id-relationship-list > a {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        min-height: clamp(13rem, 16vw, 16rem);
        padding: clamp(1.75rem, 2.5vw, 2.5rem);
        overflow: hidden;
        border: 1px solid var(--id-line);
        background: #050505;
        color: var(--white);
        text-decoration: none;
        transform: none;
        transition: background var(--motion) var(--ease-house), border-color var(--motion) var(--ease-house);
    }

        .id-overview-page .id-relationship-list > a::after {
            display: none;
        }

        .id-overview-page .id-relationship-list > a:hover,
        .id-overview-page .id-relationship-list > a:focus-visible {
            border-color: var(--id-line-strong);
            background: var(--id-surface-raised, #050505);
            transform: none;
        }

        .id-overview-page .id-relationship-list > a > span,
        .id-overview-page .id-relationship-list > a > div,
        .id-overview-page .id-relationship-list > a > b {
            position: relative;
            z-index: 1;
            grid-column: auto;
        }

        /* One eyebrow for every card on this page, written once. Given their own — the body face at
           .13em instead of the house's mono at 5px — the three cards a customer with nothing sees
           („Zarządzam miejscem", „Tworzę sztukę", „Urządzam przestrzeń") make the first screen of the
           account the one screen whose labels are set differently from every other card in the
           area. */
        .id-overview-page .id-relationship-list > a > span,
        .id-overview-page .id-empty-paths > a > span {
            align-self: start;
            color: rgba(245, 245, 245, .5);
            font-family: var(--font-mono);
            font-weight: 400;
            /* A card eyebrow, so the label tier — it stood a size below the same eyebrow on every
               other card in the area. */
            font-size: .65rem;
            letter-spacing: 5px;
            text-transform: uppercase;
            transition: color var(--motion) var(--ease-house);
        }

        /* Gold arrives under the hand — and stays on a card that waits for the customer. */
        .id-overview-page .id-relationship-list > a:hover > span,
        .id-overview-page .id-relationship-list > a:focus-visible > span,
        .id-overview-page .id-relationship-list > a.is-attention > span,
        .id-overview-page .id-empty-paths > a:hover > span,
        .id-overview-page .id-empty-paths > a:focus-visible > span {
            color: var(--gold);
        }

        /* Clear of the arrow in the card's top right corner, which a long tracked label ran under. */
        .id-overview-page .id-relationship-list > a > span {
            padding-right: 2rem;
        }

        /* The name and the sentence under it, pushed to the foot of the card. The four declarations that
           make this a column belong here rather than in the region further up, which describes a card twice
           this size. */
        .id-overview-page .id-relationship-list > a > div {
            display: flex;
            flex: 1;
            flex-direction: column;
            justify-content: flex-end;
            margin-top: auto;
            padding: 0;
        }

    .id-overview-page .id-relationship-list h3 {
        font-family: var(--font-display);
        font-size: clamp(1.3rem, 2vw, 1.7rem);
        font-weight: 300;
        letter-spacing: -.02em;
        line-height: 1.1;
    }

    /* One size for every tile on the pulpit, and it is the larger one — these lines are the pulpit's
       whole explanation of where each tile leads. Set at .78rem with an .is-emphasis of .88rem on one
       tile, the same rank of copy comes out at two sizes in one grid and the odd one reads as the only
       one that matters. */
    .id-overview-page .id-relationship-list p {
        max-width: none;
        margin-top: .5rem;
        color: var(--text-muted);
        font-size: .88rem;
        line-height: 1.6;
    }

    .id-overview-page .id-relationship-list > a > b {
        position: absolute;
        top: clamp(1.75rem, 2.5vw, 2.5rem);
        right: clamp(1.75rem, 2.5vw, 2.5rem);
        align-self: auto;
        justify-self: auto;
        color: var(--white-soft);
        font-size: 1.4rem;
        font-weight: 300;
        line-height: 1;
        transform: translateY(-.28em);
        transition: transform var(--motion) var(--ease-house), color var(--motion) var(--ease-house);
    }

    .id-overview-page .id-relationship-list > a:hover > b,
    .id-overview-page .id-relationship-list > a:focus-visible > b {
        color: var(--gold);
        transform: translateY(-.28em) translateX(.3rem);
    }

    /* A card that waits for the customer is marked by its gold eyebrow and a dot that breathes slowly;
       the card itself stays still. */
    .id-overview-page .id-relationship-list > a.is-attention {
        border: 1px solid var(--hairline-strong);
        background: radial-gradient(circle at 85% 15%, var(--tint-raised), transparent 60%), #050505;
    }

        .id-overview-page .id-relationship-list > a.is-attention > span {
            display: inline-flex;
            align-items: center;
            gap: .85rem;
        }

            .id-overview-page .id-relationship-list > a.is-attention > span::before {
                width: .4rem;
                height: .4rem;
                border-radius: 50%;
                background: var(--gold);
                content: "";
                animation: id-attention-dot var(--breath-period) ease-in-out infinite;
            }

/* The one breath the customer area allows a marker: opacity alone, one exhale every few seconds. */
@keyframes id-attention-dot {
    0%, 100% {
        opacity: .4;
    }

    50% {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .id-overview-page .id-relationship-list > a.is-attention > span::before {
        animation: none;
        opacity: .8;
    }
}

/* No room of its own under the greeting: the distance is the greeting's own margin and nothing else.
   With no heading band opening this block, padding of its own simply adds to that margin — in this
   state nothing stands between the two. */
.id-overview-page .id-empty-onboarding {
    padding: 0;
}

/* The three ways in, whole — this card is described here and not assembled from several regions of
   the file, because two things break silently when it is:
     · the hover darkening does not fire. `.id-empty-paths a:hover` and the overview's own `> a` rule
       tie on specificity, so whichever declares the `background` shorthand later wins, leaving a
       `transition` on the card animating a change that cannot happen.
     · the paragraph under a 4.3rem heading falls to .84rem, from a copy of the rule in another region,
       instead of the size the rest of the area is read at.
   Its call to action takes .id-action's own size and tracking rather than smaller, tighter values of
   its own — see the note above `strong` below. */
.id-overview-page .id-empty-paths {
    display: grid;
    grid-template-columns: 1.2fr .9fr .9fr;
    gap: 0;
    border: 1px solid var(--hairline);
    background: transparent;
}

    .id-overview-page .id-empty-paths > a {
        display: flex;
        flex-direction: column;
        min-height: clamp(27rem, 38vw, 36rem);
        padding: clamp(2rem, 4vw, 4rem);
        border: 0;
        background: #050505;
        color: var(--white);
        text-decoration: none;
        transition: background-color var(--motion) var(--ease-house);
    }

        .id-overview-page .id-empty-paths > a + a {
            border-left: 1px solid var(--hairline);
        }

        .id-overview-page .id-empty-paths > a.is-primary {
            background: radial-gradient(circle at 20% 12%, var(--tint-raised), transparent 45%), #050505;
        }

        /* After .is-primary, so the ground darkens under the glow rather than beside it. */
        .id-overview-page .id-empty-paths > a:hover {
            background-color: #050505;
        }

    .id-overview-page .id-empty-paths h3 {
        max-width: 9em;
        margin: auto 0 1.5rem;
        font-family: var(--font-display);
        font-size: clamp(2.2rem, 3.7vw, 4.3rem);
        font-weight: 300;
        letter-spacing: -.045em;
        line-height: .97;
    }

    /* Read at the size the rest of the area is read at. These are the three largest cards in Odoardo
       ID — a heading of up to 4.3rem stands over this paragraph — so set smaller it is fine print under a
       poster. */
    .id-overview-page .id-empty-paths p {
        /* The card is a flex column, so margins do not collapse: this rem is the whole of the gap
           between the heading and the sentence under it. */
        margin-top: 1rem;
        color: var(--text-muted);
        font-size: clamp(.95rem, 1.05vw, 1.05rem);
        line-height: 1.8;
    }

    /* The CTA is .id-action, the area's own — nothing is declared here that the class already says,
       or this one card keeps a call to action of its own invention. Two regions had done exactly
       that, and the three onboarding cards carried the only .id-action in the panel set at .65rem in
       caps while every other one is .7rem and is not. Only where it stands belongs here. */
    .id-overview-page .id-empty-paths strong {
        margin-top: 2rem;
    }

        .id-overview-page .id-empty-paths strong b {
            display: inline-block;
            margin-left: .4rem;
            font-size: 1rem;
            font-weight: 300;
            transition: transform var(--motion) var(--ease-house);
        }

        .id-overview-page .id-empty-paths > a:hover strong b {
            transform: translateX(.35rem);
        }

        /* The whole card is the link, so the action answers a hand held anywhere on it — .id-action's
           own hover fires only over the two words themselves. */
        .id-overview-page .id-empty-paths > a:hover .id-action,
        .id-overview-page .id-empty-paths > a:focus-visible .id-action {
            border-color: var(--gold);
            color: var(--gold);
        }

/* The quiet row at the foot of the overview, described whole and in one place. Split across this file —
   wrapping and type size in one region, spacing and alignment in a second, rule and margin in a third —
   it is three places to look for one row of two elements. The border is not in dispute either way: the
   overview's own `border-block` outranks any copy. */
.id-overview-page .id-secondary-paths {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2rem;
    margin-top: clamp(4rem, 7vw, 7rem);
    padding: 2rem 0;
    border-block: 1px solid var(--hairline);
    background: transparent;
    color: var(--text-muted);
    font-size: .65rem;
}

    /* „Coś jeszcze" — the row's own label. */
    .id-overview-page .id-secondary-paths > span {
        color: var(--text-muted);
        font-size: .66rem;
        letter-spacing: .12em;
        text-transform: uppercase;
    }

    .id-overview-page .id-secondary-paths a {
        color: var(--id-copy);
        font-size: .82rem;
        text-decoration: none;
        transition: color var(--motion-quick) var(--ease-house);
    }

        /* The question that opens the link, and the arrow that closes it. */
        .id-overview-page .id-secondary-paths a b,
        .id-overview-page .id-secondary-paths a span {
            color: var(--white);
            transition: color var(--motion-quick) var(--ease-house);
        }

        .id-overview-page .id-secondary-paths a b {
            margin-right: .45rem;
            font-weight: 400;
        }

        .id-overview-page .id-secondary-paths a:hover,
        .id-overview-page .id-secondary-paths a:focus-visible,
        .id-overview-page .id-secondary-paths a:hover b,
        .id-overview-page .id-secondary-paths a:focus-visible b,
        .id-overview-page .id-secondary-paths a:hover span,
        .id-overview-page .id-secondary-paths a:focus-visible span {
            color: var(--gold);
        }

/* On a phone the row stops being a row: the label and the link stack, ranged left. It is written
   here rather than with the other narrow-screen rules because it needs .id-overview-page to reach
   the element, and two selectors of equal specificity are settled by source order — written further
   up the file it lost that tie to the block above and the stack came out centred. */
@media (max-width: 520px) {
    .id-overview-page .id-secondary-paths {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 980px) {
    .id-overview-page .id-overview-head {
        grid-template-columns: minmax(0, 1fr);
        gap: clamp(2.5rem, 6vw, 5rem);
        min-height: 0;
    }

    .id-overview-page .id-empty-paths {
        grid-template-columns: 1.15fr 1fr;
    }

        .id-overview-page .id-empty-paths > a:last-child {
            grid-column: 1 / -1;
            min-height: 22rem;
            border-top: 1px solid var(--hairline);
            border-left: 0;
        }
}

@media (max-width: 760px) {
    .id-overview-page.id-dashboard {
        padding-top: 4.3rem;
    }

        .id-overview-page.id-dashboard > .container {
            width: calc(100% - 2.5rem);
        }

    .id-overview-page .id-overview-head {
        grid-template-columns: 1fr;
        gap: 3.5rem;
        min-height: 0;
        padding: 4rem 0;
    }

    .id-overview-page.id-dashboard .id-overview-head h1 {
        font-size: var(--hero-title-size);
    }

    .id-overview-page .id-all-clear {
        grid-template-columns: 6rem minmax(0, 1fr);
    }

    .id-overview-page .id-section-heading,
    .id-overview-page .id-section-heading > div {
        display: block;
    }

    .id-overview-page .id-relationship-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .id-overview-page .id-empty-paths {
        grid-template-columns: 1fr;
    }

        .id-overview-page .id-empty-paths > a,
        .id-overview-page .id-empty-paths > a:last-child {
            grid-column: auto;
            min-height: 25rem;
            border-left: 0;
        }

            .id-overview-page .id-empty-paths > a + a {
                border-top: 1px solid var(--hairline);
            }
}

@media (max-width: 520px) {
    .id-overview-page.id-dashboard > .container {
        width: calc(100% - 2rem);
    }

    .id-overview-page .id-overview-head {
        padding-top: 3.25rem;
    }

    .id-overview-page .id-all-clear {
        grid-template-columns: 1fr;
    }

        .id-overview-page .id-all-clear > span {
            min-height: 5rem;
            border-right: 0;
            border-bottom: 1px solid var(--hairline);
        }

        .id-overview-page .id-all-clear > div {
            padding: 1.5rem;
        }

    .id-overview-page .id-relationship-list {
        grid-template-columns: 1fr;
    }

        .id-overview-page .id-relationship-list > a {
            padding-block: clamp(1.75rem, 5vw, 2.25rem);
        }

        .id-overview-page .id-relationship-list h3 {
            font-size: 1.5rem;
        }
}
/* #endregion */

/* #region Overview page shell */
/* The page's own padding is stated once, with the rest of this page's frame — see
   .id-overview-page.id-dashboard above. */
    .id-dashboard.id-overview-page .id-dashboard-head h1 {
        font-family: var(--font-display);
        font-size: var(--hero-title-size);
        font-weight: 300;
        line-height: var(--hero-title-line-height);
    }

@media (max-width: 620px) {
    .id-dashboard.id-overview-page {
        padding-top: 4.3rem;
    }
}
/* #endregion */

/* #region ID subpages */
.id-dashboard.id-subpage {
    padding-block: clamp(3.2rem, 3.8vw, 3.8rem) var(--section-space);
}

    .id-dashboard.id-subpage > .container {
        width: min(90vw, var(--section-content-max));
        max-width: none;
    }

.id-subpage .id-area-nav-wrap {
    margin-bottom: clamp(3rem, 5.5vw, 4.5rem);
}

.id-subpage .id-page-head {
    align-items: start;
    max-width: 56rem;
    padding-top: clamp(2rem, 4vw, 3rem);
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

/* A heading that carries an action on its right has to reach the container's right edge, or the
   link lands in the middle of the page. The 56rem measure above is the width of the text, and left in place
   it caps the whole two-column grid; the text column keeps its own measure instead. */
.id-subpage .id-page-head--action {
    align-items: end;
    max-width: none;
}

    .id-subpage .id-page-head--action > div:first-child {
        max-width: 54rem;
    }

/* The masthead that carries both: a figure the page reports and a way out to the product's own page.
   The 56rem measure is the width of the text and the figure is read against it, so that block keeps
   the cap; only the link leaves it, ranged against the container's right edge like every section
   action below. Lifting the cap off the whole head instead would take the figure to the margin with
   it, which is the one thing that must not move. */
.id-subpage .id-page-head--away {
    max-width: none;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2rem;
}

    .id-subpage .id-page-head--away > .id-page-head-main {
        max-width: 56rem;
    }

    .id-subpage .id-page-head--away > .odo-button {
        justify-self: end;
    }

/* On a portrait tablet the heading, its figure and the link do not share one row: a one-word title
   such as „Wideopocztówki" ran across the figure's rule. The link drops under them. */
@media (max-width: 900px) {
    .id-subpage .id-page-head--away {
        grid-template-columns: 1fr;
    }

        .id-subpage .id-page-head--away > .odo-button {
            justify-self: start;
        }
}

.id-subpage .id-page-head h1 {
    margin: 1.35rem 0 1.75rem;
    color: var(--white);
    font-family: var(--font-display);
    font-size: var(--hero-title-size);
    font-weight: 300;
    line-height: var(--hero-title-line-height);
}

.id-subpage .id-page-head p {
    max-width: 40rem;
    margin-bottom: 32px;
    color: var(--white-soft);
    font-size: clamp(1rem, 1.1vw, 1.08rem);
    font-weight: 300;
    line-height: 1.8;
}

.id-subpage .id-account-section {
    padding-block: clamp(4.5rem, 8vw, 7rem);
    border-bottom-color: var(--hairline);
}

    .id-subpage .id-account-section:first-of-type {
        border-top: 1px solid var(--hairline);
    }

.id-page-head + .id-account-section:first-of-type {
    border-top: 0;
    padding-top: clamp(1.5rem, 2.5vw, 2rem);
}

.id-subpage .id-account-section.id-artist {
    border-bottom: none;
}

.id-subpage .id-account-section.id-filmable-submit {
    border-bottom: none;
}

.id-subpage .id-section-heading {
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

    /* The heading itself is described once, up beside .id-library-heading h2 — a subpage adds
       nothing to it. */

.id-subpage .id-action {
    display: inline-flex;
    align-items: center;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--hairline-strong);
    font-size: .66rem;
    font-weight: 500;
    letter-spacing: .18em;
    transition: border-color var(--motion-quick) var(--ease-house), color var(--motion-quick) var(--ease-house);
}

    .id-subpage .id-action:hover,
    .id-subpage .id-action:focus-visible {
        border-bottom-color: var(--gold);
        color: var(--gold);
    }

.id-subpage .id-empty,
.id-subpage .id-waiting {
    /* As tall as what it says. The 16rem floor with centred content left a hand's width of ground
       under a three-line state, which reads as a gap somebody forgot to fill rather than as air. */
    min-height: 0;
    padding: clamp(2rem, 5vw, 4rem);
    border: 1px solid var(--hairline);
    background: transparent;
}

    .id-subpage .id-empty h3,
    .id-subpage .id-waiting h3 {
        margin-bottom: 1rem;
        font-family: var(--font-display);
        font-size: clamp(1.8rem, 3vw, 3rem);
        font-weight: 300;
        letter-spacing: -.035em;
    }

    /* A refusal is a note above the way back, not a second title under the section's own heading. */
    .id-subpage .id-waiting.is-rejected h3 {
        margin: 0 0 .5rem;
        font-family: var(--font);
        font-size: 1.35rem;
        font-weight: 500;
        letter-spacing: 0;
        line-height: 1.3;
    }

    .id-subpage .id-reapply-form {
        max-width: 36rem;
        margin-top: 2rem;
    }

.id-subpage .id-upsell-grid {
    gap: clamp(1rem, 2vw, 1.5rem);
}

.id-subpage .id-upsell {
    border-color: var(--hairline);
    background: transparent;
}

.id-subpage .id-order-list {
    border-top-color: var(--hairline);
}

.id-logout-modal[hidden] {
    display: none;
}

.id-logout-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 5vw;
    opacity: 0;
    transition: opacity .4s ease;
}

    .id-logout-modal.is-open {
        opacity: 1;
    }

.id-logout-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: rgba(5, 5, 5, .82);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    opacity: 0;
    transition: opacity .5s ease, backdrop-filter .5s ease, -webkit-backdrop-filter .5s ease;
}

.id-logout-modal.is-open .id-logout-backdrop {
    opacity: 1;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.id-logout-dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 42rem);
    max-height: calc(100vh - 10vw);
    max-height: calc(100dvh - 10vw);
    overflow-y: auto;
    padding: clamp(2.5rem, 6vw, 5rem);
    border: 1px solid var(--hairline-mid);
    background: radial-gradient(circle at 85% 15%, var(--tint-raised), transparent 45%), var(--surface-card);
    box-shadow: 0 2rem 8rem rgba(5, 5, 5, .65);
    opacity: 0;
    transform: translateY(3.5rem) scale(.9);
    transition: transform .55s var(--ease-house), opacity .45s ease;
}

.id-logout-modal.is-open .id-logout-dialog {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.id-logout-dialog h2 {
    margin: 0 0 1.25rem;
    color: var(--white);
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 5vw, 4.5rem);
    font-weight: 300;
    letter-spacing: -.045em;
    line-height: .98;
}

.id-logout-dialog p {
    max-width: 34rem;
    margin-top: 1rem;
    color: var(--white-soft);
    font-size: 1rem;
    line-height: 1.8;
    /* Both delete steps print the customer's own address into this sentence, and an address offers
       a line no place to break: on a phone the dialog leaves about 270px between its paddings, so a
       long one runs out through the side of the box somebody is being asked to confirm a deletion in.
       Only ever breaks a token that would otherwise overflow — ordinary prose still wraps at
       its spaces. */
    overflow-wrap: anywhere;
}

.id-logout-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2rem;
    margin-top: clamp(2.5rem, 5vw, 4rem);
}

    .id-logout-actions .id-action {
        padding: 0 0 .55rem;
        border: 0;
        border-bottom: 1px solid var(--hairline-strong);
        background: transparent;
        font-weight: 400;
        letter-spacing: .2em;
    }

@media (max-width: 560px) {
    .id-logout-actions {
        align-items: stretch;
        flex-direction: column-reverse;
        gap: 1.5rem;
    }

        .id-logout-actions .id-action {
            align-self: center;
        }
}

.id-delete-dialog .id-field {
    margin-top: 1.5rem;
}

.id-delete-error {
    min-height: 1.2rem;
    margin-top: 1rem;
    color: #e55;
    font-size: .82rem;
    line-height: 1.6;
}

    .id-delete-error:empty {
        margin-top: 0;
    }

.id-subpage .id-artist-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(15rem, 22rem);
    gap: clamp(3rem, 8vw, 8rem);
    align-items: center;
    max-width: none;
}

.id-subpage .id-artist-panel {
    padding: clamp(2.25rem, 5vw, 5rem);
    border-color: var(--hairline);
    background: var(--surface-card);
}

    .id-subpage .id-artist-panel h3 {
        font-family: var(--font-display);
        font-size: clamp(2.2rem, 3.8vw, 4.2rem);
        font-weight: 300;
        letter-spacing: -.04em;
        line-height: .98;
    }

/* The checkout's label here too — one caption for every field in the house. */
.id-subpage .id-form label {
    color: var(--text-muted);
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .2em;
}

/* A consent is a declaration the customer is making, not a note about the form, so it is set in the
   page's own white and a shade heavier than body copy — read once, deliberately, before a tick. The
   room under it separates the sentence from the button that acts on it. */
.id-subpage .id-form .id-check {
    margin-bottom: 1rem;
    color: var(--white);
    font-size: .85rem;
    font-weight: 450;
    letter-spacing: normal;
    line-height: 1.6;
    text-transform: none;
}

/* The subpages keep the shared box — only the weight of what is typed into it is theirs. No
   border-bottom colour (the fields wear no underline) and no padding-block of its own, which would
   only fight the one above. */
.id-subpage .id-form input,
.id-subpage .id-form textarea,
.id-subpage .id-form select,
.id-subpage .id-form .odo-picker-toggle {
    color: var(--white);
    font-family: var(--font);
    font-size: 1rem;
    font-weight: 300;
}

.id-subpage .id-square-upload,
/* The card title is described once for the whole area — a Filmable card is not a different kind of
   card because it is on a subpage. */

.id-subpage .id-filmable-card {
    border-color: var(--hairline);
    background: var(--surface-card);
}

.id-subpage .id-filmable-submit .id-upload-form > input {
    padding-inline: 0;
    border-width: 0 0 1px;
}

/* Two columns of fields inside the panel's own right-hand column left each input some 200px wide. */
@media (max-width: 1180px) {
    .id-artist-panel .id-form-grid {
        grid-template-columns: 1fr;
    }

        .id-artist-panel .id-form-grid .is-wide {
            grid-column: auto;
        }
}

@media (max-width: 900px) {
    .id-subpage .id-artist-head,
    .id-subpage .id-upsell-grid {
        grid-template-columns: 1fr;
    }

    .id-subpage .id-artist-panel {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .id-dashboard.id-subpage {
        padding-top: 4.3rem;
    }
}

@media (max-width: 800px) {
    .id-subpage .id-section-heading {
        align-items: start;
        flex-direction: column;
    }

}
/* #endregion */

/* #region ID overview */
.id-overview-page {
    padding-block: clamp(4.3rem, 5vw, 4.8rem) var(--section-space);
}

    .id-overview-page > .container {
        width: min(90vw, var(--section-content-max));
        max-width: none;
    }

    .id-overview-page .id-area-nav-wrap {
        margin-bottom: clamp(3rem, 5.5vw, 4.5rem);
    }

    .id-overview-page .id-overview-head {
        align-items: start;
        padding-top: clamp(2rem, 4vw, 3rem);
        margin-bottom: clamp(4.5rem, 8vw, 7rem);
    }

        .id-overview-page .id-overview-head h1 {
            max-width: 9em;
            margin: 1.35rem 0 0;
            color: var(--white);
            font-family: var(--font-display);
            font-size: clamp(3.25rem, 5.8vw, 6.4rem);
            font-weight: 300;
            letter-spacing: -.045em;
            line-height: .94;
        }

            .id-overview-page .id-overview-head h1 i {
                color: var(--gold);
                font-weight: inherit;
            }

    .id-overview-page .id-dashboard-purpose {
        max-width: 35rem;
        margin-top: 1.75rem;
        color: var(--white-soft);
        font-size: clamp(1rem, 1.1vw, 1.08rem);
        line-height: 1.8;
    }


@media (max-width: 800px) {
    .id-overview-page .id-overview-head {
        gap: 2.5rem;
    }

}
/* #endregion */

/* #region Page head & shared blocks */
/* .id-page-head and its heading and lead are described once, at the top of this file, and not again here:
   a second h1 or p rule in this region is dead on arrival, because every masthead in the area sits inside
   .id-dashboard and the rules up there are written against that, so they outrank anything written plain. */

.id-filmable-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.id-filmable-card {
    display: grid;
    grid-template-columns: 42% 1fr;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--id-line);
    background: var(--id-surface);
}

    .id-filmable-card img {
        width: 100%;
        height: 100%;
        min-height: 270px;
        object-fit: cover;
    }

    .id-filmable-card > div {
        padding: 28px;
    }

        /* The photograph is a div too, and the text's padding framed it in black. */
        .id-filmable-card > .id-filmable-image {
            padding: 0;
        }

        .id-filmable-card > div > span {
            color: rgba(245, 245, 245, .5);
            font-size: .65rem;
            letter-spacing: .12em;
            text-transform: uppercase;
        }

    .id-filmable-card h3 {
        margin: 14px 0;
    }


.id-card-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    margin-top: 24px;
}

/* Two cards abreast, each with the photograph beside its text, leave the four-rung ladder columns
   narrower than the rung names — the photograph goes above the text until the card is wide enough. */
@media (max-width: 1200px) {
    .id-filmable-card {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 400px) {
    .id-filmable-card > div {
        padding: 1.25rem;
    }

    .id-filmable-ladder {
        font-size: .55rem;
        letter-spacing: .02em;
    }
}

@media (max-width: 800px) {
    .id-filmable-grid {
        grid-template-columns: 1fr;
    }

    .id-filmable-card {
        grid-template-columns: 1fr;
    }
}
/* #endregion */

/* #region Account dashboard */
/* The overview's masthead and its heading are described once, in the Dashboard region below. Two
   declarations stood here: a 38px bottom margin that the block down there replaced with 70px, and an
   `h1` rule every one of whose seven properties was beaten twice over — by `.id-dashboard
   .id-dashboard-head h1` and again by the overview page's own. */

.id-dashboard-purpose {
    max-width: 700px;
    font-size: 1rem;
    line-height: 1.7;
}


/* The one sentence the area says back to a customer who has just done something. As a flat gold-tinted
   band of grey text it is indistinguishable from a note, so a confirmation and a refusal look like the
   same thing and neither looks like an answer. A square mark says which of the two it is before the
   sentence is read, the accent lives on one edge rather than in a fill,
   and the plate arrives instead of appearing, because the page around it does not move. */
.id-alert {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
    margin: 0 0 clamp(1.75rem, 3vw, 2.5rem);
    padding: 1.1rem 1.4rem;
    border: 1px solid var(--hairline);
    border-left-width: 2px;
    background: linear-gradient(90deg, var(--tint), transparent 62%);
    color: var(--white);
    font-size: .88rem;
    line-height: 1.6;
    animation: idAlertIn .45s var(--ease-house) both;
}

    .id-alert::before {
        display: grid;
        place-items: center;
        width: 1.6rem;
        height: 1.6rem;
        border: 1px solid currentColor;
        font-size: .78rem;
        line-height: 1;
        opacity: .9;
    }

    .id-alert.is-success {
        border-color: rgba(120, 168, 132, .4);
        border-left-color: #7aa884;
        color: #cfe4d5;
    }

        .id-alert.is-success::before {
            content: '\2713';
        }

    .id-alert.is-error {
        border-color: rgba(198, 106, 106, .4);
        border-left-color: #c66a6a;
        background: linear-gradient(90deg, rgba(198, 106, 106, .08), transparent 62%);
        color: #edc0c0;
    }

        .id-alert.is-error::before {
            content: '!';
        }

    /* A task still owed rather than an answer to something just done: the house gold on the edge, and a link
       straight to where it is done. */
    .id-alert.is-notice {
        border-left-color: var(--gold);
    }

        .id-alert.is-notice::before {
            content: '\2022';
        }

        .id-alert.is-notice a {
            color: inherit;
            text-decoration: underline;
            text-underline-offset: .2em;
        }

/* The settlement form shows only the fields the chosen case asks for; a label's own display rule would
   otherwise outrank the hidden attribute the script sets. */
#artistPayoutForm [data-payout-when][hidden] {
    display: none;
}

@keyframes idAlertIn {
    from { opacity: 0; transform: translateY(-6px) }
    to { opacity: 1; transform: none }
}

@media (prefers-reduced-motion: reduce) {
    .id-alert {
        animation: none;
    }
}

/* Jumped to from outside — „Zgłoś przestrzeń" on the Filmable page lands on #submit — so where the
   section comes to rest matters. html already carries scroll-padding-top: var(--site-header-h), so
   this only has to clear what stands *under* the header: the sticky tab bar. The 150px written here
   before cleared it and then some, leaving seventy-odd pixels of nothing between the bar and the
   rule that opens the section. One pixel more than the bar, so that rule lands just under it rather
   than behind it. */
.id-account-section {
    padding: clamp(70px, 8vw, 120px) 0;
    border-bottom: 1px solid var(--line);
    scroll-margin-top: calc(var(--id-area-nav-h) + 1px);
}

/* The last section on the page hands over to the footer, and the footer opens with a full
   --section-space of its own: two paddings meeting at one seam put nearly fourteen rem of nothing
   between the end of a tab and the Listy Odoardo sign-up. The section keeps its air above and gives
   up the half the footer already brings.
   By position, not by a modifier somebody has to remember: hand-marking --last leaves whichever tabs nobody
   marked ending on twice the gap, and a section that is last only when a customer happens to have no
   subscriptions cannot be marked by hand at all. */
.id-subpage .id-account-section:last-of-type,
.id-overview-page .id-account-section:last-of-type,
.id-account-section--last,
.id-subpage .id-account-section--last {
    padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
    border-bottom: 0;
}

.id-section-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 30px;
    margin-bottom: 38px;
}

    /* The fourth description of the same heading lived here — sans at 500, a third scale again.
       Nothing renders an .id-section-heading outside .id-dashboard, so it only ever competed. */

    .id-section-heading > span {
        color: var(--text-muted);
        /* The label tier of the customer area: .65rem, the size the house's own eyebrow uses.
           These micro-labels ran from .52 to .85rem across the file — the same gold word above
           two cards on two tabs came out visibly different. Two sizes now: .65rem for a label,
           .58rem for the dense meta inside a row. */
        font-size: .65rem;
        letter-spacing: .12em;
        text-transform: uppercase;
    }

/* The chapter's works are drawn with the tile the whole tab is drawn with — see .id-tile. One idiom, one
   set of rules; a second, nearly identical card here is a card that drifts from it. */

.id-upsell h3 {
    margin: 12px 0;
}

.id-upsell p, .id-empty p, .id-artist-panel p, .id-waiting p {
    color: var(--text-muted);
    font-size: .85rem;
    line-height: 1.7;
}

.id-empty {
    display: grid;
    justify-items: start;
    min-height: 16rem;
    align-content: center;
    padding: 38px;
    border: 1px solid var(--line);
    background: var(--black-soft);
}

    .id-empty h3 {
        margin-top: .75rem;
        margin-bottom: 10px;
        font-size: 1.4rem;
        font-weight: 500;
        letter-spacing: -.03em;
    }

    .id-empty p {
        max-width: 40rem;
        margin-top: .8rem;
    }

/* .id-order-list is described once, beside .id-document-list. A block here redrawing only its top edge,
   in the site's --line rather than the account's --id-line, gives the list a hairline from a second
   definition that can drift from the other three. */

.id-upsell-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.id-upsell {
    display: block;
    padding-bottom: 26px;
    color: var(--white);
    border: 1px solid var(--line);
    text-decoration: none;
    overflow: hidden;
    transition: border-color var(--motion) var(--ease-house);
}

    .id-upsell:hover,
    .id-upsell:focus-visible {
        border-color: var(--hairline-strong);
    }

    .id-upsell img {
        width: 100%;
        aspect-ratio: 1;
        object-fit: cover;
        transition: transform 1.8s var(--ease-house);
    }

    .id-upsell:hover img {
        transform: scale(1.025);
    }

    .id-upsell > span, .id-upsell h3, .id-upsell p, .id-upsell strong {
        display: block;
        margin-inline: 24px;
    }

    .id-upsell > span {
        margin-top: 22px;
        color: rgba(245, 245, 245, .5);
        font-size: .65rem;
        letter-spacing: .13em;
        text-transform: uppercase;
    }

    .id-upsell strong {
        margin-top: 22px;
        color: var(--white);
        font-size: .68rem;
        letter-spacing: .12em;
        text-transform: uppercase;
        transition: color var(--motion) var(--ease-house);
    }

    .id-upsell:hover strong,
    .id-upsell:focus-visible strong {
        color: var(--gold);
    }

.id-artist-panel {
    display: grid;
    grid-template-columns: .75fr 1.25fr;
    gap: clamp(40px, 7vw, 100px);
    padding: clamp(30px, 5vw, 64px);
    border: 1px solid var(--line);
    background: radial-gradient(circle at 0 0, var(--tint), transparent 42%), #050505;
}

    .id-artist-panel h3, .id-waiting h3 {
        margin: 14px 0 18px;
        font-family: var(--font);
        font-size: clamp(2rem, 3.5vw, 3.8rem);
        font-weight: 500;
        letter-spacing: -.055em;
        line-height: 1.02;
    }

/* .id-form is styled once, in the Auth region. */
.id-profile-form {
    --id-form-gap: 40px;
}

    /* No rule over the button. The line in .id-form-submit separates the note that stands beside the button
       from the form above it; here there is no note, so it is a band drawn under a form that has already
       ended with one — two lines within a screen of each other, neither dividing anything. */
    .id-profile-form .id-form-submit,
    .id-launch-form .id-form-submit {
        padding-top: 0;
        border-top: 0;
    }

    /* No pull upwards. An error message holds no empty line open above a consent (see
       .id-field-error:empty), so a negative offset here drags the checkbox into whatever stands
       over it. */

.id-profile-submit {
    justify-self: start;
    padding-left: 42px;
    padding-right: 42px;
}

/* .id-form-grid is styled once, in the workspace region above; the width release lives
   next to .id-form in the Auth region so the cascade stays readable. */

.id-form label:not(.id-check) {
    display: grid;
    gap: 9px;
    color: var(--text-muted);
    /* A field's label, the same size as the one .id-field sets — the two rules describe the same
       word above the same kind of input and disagreed by a size. */
    font-size: .66rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* The same box every field in this area wears — stated up in the .id-field region and repeated here
   because this rule stands later in the file and would otherwise win with whatever it says. An
   underline with `padding: 14px 0` leaves a typed address flush against the left edge with no side
   padding and a <select> showing neither border nor ground. One control, one description. */
.id-form input, .id-form textarea, .id-form select {
    width: 100%;
    min-height: 3.4rem;
    padding: 1.05rem 1.1rem;
    border: 1px solid var(--line);
    border-radius: 0;
    background: rgba(245, 245, 245, .018);
    color: var(--white);
    font-family: var(--font);
    font-size: 1rem;
    letter-spacing: normal;
    text-transform: none;
}

    .id-form select option {
        background: var(--black-mid);
    }

/* A <select> is drawn by the operating system unless it is told not to be, so it kept its own
   chrome on a form where every other control is a line and a label — the one field on the screen
   that looked like it belonged to a different site. Neutralised, it takes the rule above like an
   input; the arrow is drawn back here, because appearance: none takes the native one with it. */
.id-form select,
.id-field select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 1.6rem;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23b6a574' stroke-width='1.4' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .15rem center;
    background-size: .7rem auto;
}

/* A file field is drawn by the operating system unless it is told otherwise, and what it draws is
   a grey button in the system's own face on a black form. The field keeps the box every other field
   wears; the button inside it is redrawn in the house's control idiom, and the file name beside it
   stays the browser's — it is the one part a visitor must be able to trust. */
.id-form input[type="file"],
.id-field input[type="file"] {
    padding: .85rem 1.1rem;
    color: var(--text-muted);
    font-size: .85rem;
    cursor: pointer;
}

    .id-form input[type="file"]::file-selector-button,
    .id-field input[type="file"]::file-selector-button {
        margin-right: 1.1rem;
        padding: .6rem 1.2rem;
        border: 1px solid var(--hairline-strong);
        border-radius: 0;
        background: transparent;
        color: var(--white);
        cursor: pointer;
        font-family: var(--font-mono);
        font-size: .66rem;
        letter-spacing: .14em;
        text-transform: uppercase;
        transition: border-color .3s ease, color .3s ease;
    }

    .id-form input[type="file"]::file-selector-button:hover,
    .id-field input[type="file"]::file-selector-button:hover {
        border-color: var(--gold);
        color: var(--gold);
    }

.id-form .is-wide {
    grid-column: 1 / -1;
}

/* No sub-640px input bump here: the base rules hold every form control at 1rem, because anything under
   16px makes iOS Safari zoom in on focus and stay zoomed. That floor is site-wide, not a breakpoint. */

/* The plate a work is dropped onto, described whole and in one place. Split between the forms region (the
   width and the ground) and here (everything else), the two blocks disagree about the dashed border. */
.id-square-upload {
    position: relative;
    display: grid !important;
    width: min(100%, 28rem);
    max-width: 480px;
    min-height: 280px;
    aspect-ratio: 1;
    place-items: center;
    overflow: hidden;
    border: 1px dashed var(--hairline-strong);
    background: #050505;
    transition: border-color .3s ease;
}

    .id-square-upload:hover,
    .id-square-upload:focus-within {
        border-color: var(--gold-dashed);
    }

    .id-square-upload input {
        position: absolute;
        inset: 0;
        opacity: 0;
        z-index: 2;
    }

    .id-square-upload img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: .58;
    }

        /* Nothing chosen yet, so there is nothing to show. An <img> carrying no source still draws
           its alternative text, and across an upload square that reads as a caption nobody wrote —
           „Podgląd wybranego kadru" over an invitation to choose one. The element stays in the
           document because the script that accepts a file writes its source. */
        .id-square-upload img:not([src]) {
            display: none;
        }

    /* The frame the visitor chose, shown as it is. The picture is held at .58 while it is only the
       ground under an invitation to choose one; the moment it has been chosen it is the answer, and
       dimming the answer to keep a caption legible over it means nobody ever sees what they framed. */
    .id-square-upload img.is-visible {
        opacity: 1;
    }

    .id-square-upload > span {
        position: relative;
        z-index: 1;
        color: var(--white-soft);
        transition: color .3s ease;
    }

    .id-square-upload:hover > span,
    .id-square-upload:focus-within > span {
        color: var(--gold);
    }

    /* And the caption comes off the picture. It stays in the document, because it is the name of the
       file field underneath — taken out, the control would be a box a screen reader cannot announce —
       but a sentence printed across a photograph somebody has just framed is printed over the one
       thing they are looking at. */
    .id-square-upload img.is-visible ~ span {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

.id-form-actions, .id-crop-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

@media (max-width: 520px) {
    .id-form-actions, .id-crop-actions {
        flex-direction: column;
        align-items: stretch;
    }

        .id-form-actions .odo-button, .id-crop-actions .odo-button {
            width: 100%;
            justify-content: center;
        }
}

    .id-form-actions .id-action, .id-crop-actions .id-action {
        padding: 14px 0;
        border: 0;
        background: none;
    }

/* Left, like every other block in the area. Centred, „Po naszej stronie / Sprawdzamy jakość przekazanego
   dzieła" is the one panel on the artist's page whose lines do not begin where every other line on that page
   begins — and a centred paragraph with a date under it reads as a notice board rather than as the state of
   somebody's own submission. */
.id-waiting {
    padding: clamp(45px, 7vw, 90px);
    border: 1px solid var(--line);
    text-align: left;
    background: radial-gradient(circle at 12% 0, var(--tint), transparent 65%);
}

    .id-waiting > span {
        color: rgba(245, 245, 245, .5);
        font-size: .68rem;
        letter-spacing: .15em;
        text-transform: uppercase;
    }

    .id-waiting p {
        max-width: 680px;
        margin: 1rem 0 0;
    }

    .id-waiting .id-action {
        display: inline-block;
        margin-top: 28px;
    }

.id-public-link {
    display: inline-block;
    margin-top: 25px;
    color: var(--white);
    font-size: clamp(1rem, 2vw, 1.5rem);
    text-decoration: none;
    transition: color var(--motion-quick) var(--ease-house);
}

    .id-public-link:hover,
    .id-public-link:focus-visible {
        color: var(--gold);
    }

/* A sentence from a person, so it is set like one: the gold rule down its left edge says who is speaking and
   the type is the area's own reading size. This is the plate's only description — watch for a `border: 1px
   solid` with no colour, which the browser draws in the text colour. It is the only thing on the page that
   asks the customer for something, and it
   stands between a heading and a form, so it is set to be seen: a wider rule, its own air, and the
   air below it that keeps the form from starting where the request ends. */
.id-review-note {
    display: grid;
    gap: .5rem;
    margin-top: 1.75rem;
    margin-bottom: 2.25rem;
    padding: 1.25rem 1.5rem;
    border: 0;
    border-left: 3px solid var(--gold);
    background: var(--tint);
    color: var(--white-soft);
    font-size: .95rem;
    font-weight: 300;
    line-height: 1.7;
}

    /* Who is speaking, on its own line. Run into the sentence as „Prośba od zespołu: …" it reads as the
       note's first three words and is skipped with them. */
    .id-review-note strong {
        color: var(--gold);
        font-family: var(--font);
        font-size: .68rem;
        font-weight: 600;
        letter-spacing: .2em;
        line-height: 1.2;
        text-transform: uppercase;
    }

.id-crop-dialog {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    padding: 30px;
    place-items: center;
    background: rgba(5,5,5,.88);
    backdrop-filter: blur(14px);
}

    .id-crop-dialog[hidden] {
        display: none;
    }

.id-crop-shell {
    width: min(900px, 100%);
    padding: 28px;
    border: 1px solid var(--hairline-mid);
    background: #050505;
}

.id-crop-head {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 20px;
}

    .id-crop-head h2 {
        margin-top: 8px;
        font-family: var(--font-display);
        font-size: clamp(1.6rem, 2.6vw, 2.4rem);
        font-weight: 500;
        letter-spacing: -.025em;
        line-height: 1.05;
    }

    .id-crop-head button {
        border: 0;
        background: none;
        color: var(--white);
        font-size: 2rem;
    }

.id-crop-stage {
    height: min(60vh, 620px);
    background: #050505;
}

    .id-crop-stage img {
        display: block;
        max-width: 100%;
    }

.id-crop-actions {
    margin-top: 22px;
}

/* A phone — and any screen held sideways — is shorter than the heading, the stage and the buttons
   together. The dialog scrolls, the shell centres only while it fits, and the stage is sized from the
   visible height rather than from 60vh, which iOS measures with its toolbars hidden. */
@media (max-width: 900px), (max-height: 760px) {
    .id-crop-dialog {
        place-items: start center;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
    }

    .id-crop-shell {
        margin-block: auto;
        padding: 20px;
    }

    .id-crop-stage {
        height: clamp(10rem, calc(100dvh - 18rem), 620px);
    }
}

@media (max-width: 900px) {
    .id-upsell-grid, .id-artist-panel {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .id-dashboard-head, .id-section-heading {
        display: grid;
    }

    .id-form-grid {
        grid-template-columns: 1fr;
    }

    .id-form .is-wide {
        grid-column: auto;
    }

    .id-crop-dialog {
        padding: 10px;
    }
}
/* #endregion */

/* #region Login screen */
/* At least one screen, and as tall as the form needs. A panel held to exactly one screen scrolled
   inside itself on every laptop — the submit button under the fold of a box inside the page, and the
   page's own scrollbar leading only to the footer. The photograph stays pinned beside a long form. */
.id-login-screen {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
    min-height: 100dvh;
}

    /* Screens without a photograph (unsubscribe) get the panel across the full width
       instead of leaving an empty black half. */
    .id-login-screen:not(:has(.id-login-visual)) {
        grid-template-columns: 1fr;
    }

        .id-login-screen:not(:has(.id-login-visual)) .id-login-panel {
            border-left: none;
        }

.id-login-visual {
    position: sticky;
    top: 0;
    align-self: start;
    overflow: hidden;
    height: 100vh;
    height: 100dvh;
}

.id-login-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: var(--photo-at-rest);
    /* The photograph settles into place instead of simply being there: it comes up out of nothing
       and eases back from a slight over-scale, which is the entrance every hero on the site makes.
       Not `animation: odoEnter … both` on the container: odoEnter is a to-only keyframe and animates
       from whatever the element already is, so on an element with no starting opacity and no starting
       transform it plays from the finished state to the finished state and nothing moves — on the one
       screen a visitor sees before they trust us with an address. */
    opacity: 0;
    transform: scale(1.07);
    animation: idLoginPhotoSettle 1.7s var(--ease-house) .1s forwards;
}

@keyframes idLoginPhotoSettle {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* The seam between the photograph and the panel: the picture darkens into the panel's own black
   rather than stopping at a hard edge against it. */
.id-login-visual::after {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(5, 5, 5, .28) 0%, transparent 32%, rgba(5, 5, 5, .55) 100%);
    content: "";
    pointer-events: none;
}

    /* Signing in and registering each keep their own photograph, so the two screens are recognisable apart
       at a glance. The file is fixed per screen, which is why it belongs here and not on the element. */
    .id-login-bg.is-login {
        background-image: url('/img/house/ambient-02.webp');
    }

    .id-login-bg.is-register {
        background-image: url('/img/house/ambient-01.webp');
    }

.id-login-panel {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 16vh 6vw 10vh;
    background: var(--black);
    border-left: 1px solid var(--line);
}

.id-login-form-wrap {
    width: 100%;
    max-width: 560px;
}

/* The screen arrives in two beats: the photograph settles (its own keyframe, up beside .id-login-bg
   — odoEnter is a to-only keyframe and animated this container from its finished state to its
   finished state, so the first beat never played), then the panel's lines lift in one after
   another. Written here rather than in the markup so the order follows the document. */
.id-login-form-wrap > * {
    opacity: 0;
    transform: translateY(18px);
    animation: odoEnter .85s var(--ease-house) forwards;
}

    .id-login-form-wrap > *:nth-child(1) { animation-delay: .12s; }
    .id-login-form-wrap > *:nth-child(2) { animation-delay: .2s; }
    .id-login-form-wrap > *:nth-child(3) { animation-delay: .28s; }
    .id-login-form-wrap > *:nth-child(4) { animation-delay: .36s; }
    .id-login-form-wrap > *:nth-child(5) { animation-delay: .44s; }
    .id-login-form-wrap > *:nth-child(n+6) { animation-delay: .52s; }

@media (prefers-reduced-motion: reduce) {
    .id-login-bg,
    .id-login-form-wrap > * {
        opacity: 1;
        transform: none;
        animation: none;
    }
}

/* The signed-in area arrives in the same three beats on every one of its pages: the tab strip, the
   heading, then the sections. Written here once rather than in each of the nineteen views, and in
   CSS rather than through the scroll observer in site.js — a panel somebody signed in to must not
   wait for a script to show what they came for. The sections share one delay instead of a ladder:
   past the first screen the reader has scrolled anyway, and a section that waits half a second to
   appear reads as a page still loading rather than as a page arriving. */
.id-dashboard .id-area-nav-wrap,
.id-dashboard .id-page-head,
.id-dashboard .id-dashboard-head,
.id-dashboard .id-account-section {
    opacity: 0;
    transform: translateY(18px);
    animation: odoEnter .8s var(--ease-house) forwards;
}

    .id-dashboard .id-page-head,
    .id-dashboard .id-dashboard-head {
        animation-delay: .08s;
    }

    .id-dashboard .id-account-section {
        animation-delay: .16s;
    }

@media (prefers-reduced-motion: reduce) {
    .id-dashboard .id-area-nav-wrap,
    .id-dashboard .id-page-head,
    .id-dashboard .id-dashboard-head,
    .id-dashboard .id-account-section {
        opacity: 1;
        transform: none;
        animation: none;
    }
}

    .id-login-form-wrap .h-title {
        margin-bottom: 4vh;
    }

.id-register-screen .id-login-form-wrap .h-title {
    margin-bottom: 6vh;
}

.id-login-desc {
    max-width: 380px;
    margin: 5vh 0 4vh;
}

@media (max-width: 1024px) {
    .id-login-screen {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .id-login-visual {
        position: relative;
        height: 40vh;
        height: 40dvh;
    }

    .id-login-panel {
        min-height: 0;
        padding: 10vh 6vw 8vh;
        border-left: none;
        border-top: 1px solid var(--line);
    }
}

/* #endregion */

/* #region Auth */
/* Scoped to the sign-in panel, never written as a bare `.id-form`. Unscoped it stands later in this file
   than the area's own description of a form (up beside .id-field) and therefore wins everywhere: every
   form in the customer area — the launch brief, the profile, the Lens top-up, Pomoc — is then capped at
   640 pixels and given a 12-pixel gap, which leaves the brief's two columns barely three hundred pixels
   each however wide the screen is, and puts the rule over a group of fields 12 pixels from the block above
   it and 40 from the block below. The sign-in panel is 560 wide in any case (.id-login-form-wrap), so
   nothing here needs the cap; what it needs is the tighter gap. */
.id-login-form-wrap .id-form {
    display: grid;
    gap: 12px;
}

/* A single column of fields still wants a measure — an input running the whole width of the page is
   a name field the size of a paragraph. The two-column forms and the brief set their own. */
.id-dashboard .id-form:not(.id-form-grid):not(.id-launch-form) {
    max-width: 44rem;
}

    /* Two-column forms span their container in full. */
    .id-form-grid {
        max-width: none;
    }

    /* The checkout's label — see .chk-field span. Gold on a form field made every caption compete
       with the value under it; muted micro-caps name the field and then get out of the way. */
    .id-form label:not(.id-check),
    .id-upload-form > label:not(.id-check),
    .id-upload-form > .id-field label {
        color: var(--text-muted);
        font-size: .66rem;
        font-weight: 600;
        letter-spacing: .2em;
        text-transform: uppercase;
    }

    /* The checkout's field, to the letter — see .chk-field input in checkout.css. Every form in the house
       wears the same control. The family and the size are named rather than inherited: `font: inherit` with
       no size pulls the label's .72rem into the input, so the address somebody types comes out smaller than
       the note under it. The tracking is reset because the wrapper letter-spaces its label. */
    .id-form input,
    .id-upload-form > input,
    .id-upload-form > .id-field input {
        width: 100%;
        padding: 1.05rem 1.1rem;
        border: 1px solid var(--line);
        border-radius: 0;
        background: rgba(245, 245, 245, .018);
        color: var(--white);
        font-family: var(--font);
        font-size: 1rem;
        letter-spacing: normal;
        text-transform: none;
        outline: none;
    }

        .id-form input:focus,
        .id-upload-form > input:focus,
        .id-upload-form > .id-field input:focus {
            border-color: var(--gold);
        }

    .id-form .odo-button {
        margin-top: 14px;
    }

.id-message {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 10px;
    row-gap: 6px;
    margin: 20px 0;
    padding: 14px;
    border-left: 2px solid var(--hairline-strong);
    background: var(--tint);
    color: var(--text-muted);
    font-size: .88rem;
    line-height: 1.6;
}

.id-message--error {
    border-left-color: #c0392b;
    background: rgba(192, 57, 43, .08);
    color: #e55;
}

    .id-message--error .id-message-action {
        color: #e55;
        border-bottom-color: rgba(238, 85, 85, .45);
    }

        .id-message--error .id-message-action:hover {
            border-bottom-color: #e55;
        }

.id-field {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .id-field input:disabled {
        border-bottom-color: var(--line);
        color: var(--text-muted);
        -webkit-text-fill-color: var(--text-muted);
        opacity: 1;
    }

    /* The hint belongs to the label over it, not to the field's own rhythm: standing on the full flex
       gap it sat as far from „Numer telefonu" as the input sat from it, so it read as a third line of
       the field rather than as a note on the second. It is pulled up to its label, and the input
       follows a little closer. */
    .id-field small {
        margin-top: -4px;
        margin-bottom: -2px;
        color: var(--text-muted);
        font-family: var(--font);
        font-size: .78rem;
        font-weight: 300;
        letter-spacing: normal;
        line-height: 1.6;
        text-transform: none;
    }

.id-field-error {
    font-size: .8rem;
    color: #e55;
    min-height: 1.1em;
    letter-spacing: .01em;
}

    /* A field with nothing wrong with it takes no room for the message it is not showing. Holding the
       height open against the shift an error would cause steadies nothing, because only some fields carry
       the element at all: the postal code and the country reserve the line, the street and the city do not,
       so „Kraj" stands further from the row above it than „Miasto" stands from the street. */
    .id-field-error:empty {
        display: none;
    }

    .id-field-error:not(:empty) {
        margin-bottom: 8px;
    }

/* The drawn dropdown is named beside the select it stands in front of: the select still carries the
   answer, but hidden it is not the thing that can go red. */
.id-field--error input,
.id-field--error textarea,
.id-field--error select,
.id-field--error .odo-picker-toggle {
    border-color: #c0392b;
    outline-color: #c0392b;
}

.id-login-note {
    margin-top: 22px;
    font-size: .8rem;
    line-height: 1.6;
    color: var(--text-muted);
    /* „Kod wysłaliśmy na …" names the address it went to — see .id-logout-dialog p. */
    overflow-wrap: anywhere;
}

    .id-login-note:empty {
        display: none;
    }

.id-register-cta {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(24px, 4vw, 48px);
    overflow: hidden;
    margin-top: 48px;
    padding: 26px 28px 26px 30px;
    border: 1px solid var(--hairline);
    background: radial-gradient(circle at 0 0, var(--tint-raised), transparent 42%), linear-gradient(135deg, rgba(245,245,245,.025), transparent 62%), #050505;
    transition: border-color var(--motion) var(--ease-house), background-color var(--motion) var(--ease-house);
}

    .id-register-cta::before {
        position: absolute;
        inset: 0 auto 0 0;
        width: 2px;
        background: var(--hairline-strong);
        content: "";
        transition: background-color var(--motion) var(--ease-house);
    }

    .id-register-cta::after {
        position: absolute;
        top: -34px;
        right: 106px;
        width: 76px;
        aspect-ratio: 1;
        border: 1px solid var(--hairline-faint);
        content: "";
        pointer-events: none;
    }

    /* Gold arrives under the hand: the frame, its edge and the eyebrow warm together. */
    .id-register-cta:hover,
    .id-register-cta:focus-within {
        border-color: var(--gold-hover);
        background-color: #050505;
    }

        .id-register-cta:hover::before,
        .id-register-cta:focus-within::before {
            background: var(--gold);
        }

        .id-register-cta:hover .id-register-cta-eyebrow,
        .id-register-cta:focus-within .id-register-cta-eyebrow {
            color: var(--gold);
        }

.id-register-cta-text {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 7px;
}

.id-register-cta-eyebrow {
    color: rgba(245, 245, 245, .5);
    transition: color var(--motion) var(--ease-house);
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.id-register-cta-desc {
    max-width: 29rem;
    color: var(--white-soft);
    font-size: .82rem;
    line-height: 1.65;
}

.id-register-cta-btn {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 46px;
    padding: 12px 18px 12px 20px;
    border: 1px solid var(--button-border);
    background: var(--button-layers);
    color: var(--white);
    /* The control tier of the area — every control here wears this size. */
    font-size: .7rem;
    font-weight: 400;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: background-size var(--motion) var(--ease-house), border-color var(--motion) var(--ease-house), color var(--motion) var(--ease-house);
}

    .id-register-cta-btn::after {
        content: "→";
        display: grid;
        width: 1em;
        height: 1em;
        place-items: center;
        font-size: 1rem;
        font-weight: 300;
        line-height: 1;
        transition: transform var(--motion-quick) var(--ease-house), color var(--motion) var(--ease-house);
        transform: translateY(-3px);
    }

    /* The house button (see --button-layers): drawn, never filled; the arrow takes the gold. */
    .id-register-cta-btn:hover,
    .id-register-cta-btn:focus-visible {
        background-size: 100% 1px, 100% 100%;
        border-color: var(--button-border-hover);
    }

        .id-register-cta-btn:hover::after,
        .id-register-cta-btn:focus-visible::after {
            color: var(--gold);
        }

        .id-register-cta-btn:hover::after,
        .id-register-cta-btn:focus-visible::after {
            transform: translateY(-3px) translateX(3px);
        }

@media (max-width: 640px) {
    .id-register-cta {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 24px;
        text-align: left;
    }

        .id-register-cta::after {
            top: -40px;
            right: -24px;
        }

    .id-register-cta-btn {
        width: 100%;
    }
}

.id-message-action {
    flex-shrink: 0;
    display: inline-block;
    /* "Wyślij kod ponownie" / "Zmień e-mail" in the OTP step must be tappable with a thumb. */
    padding: 12px 4px 4px;
    margin: -12px -4px -4px;
    color: var(--white);
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: 1px solid var(--hairline-strong);
    transition: color .3s ease, border-color .3s ease;
}

    .id-message-action:hover,
    .id-message-action:focus-visible {
        border-bottom-color: var(--gold);
        color: var(--gold);
    }

.id-code-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .75rem 1.5rem;
    margin-top: 1.25rem;
}

    .id-code-actions form {
        display: inline;
    }

    .id-code-actions button.id-message-action {
        background: none;
        border: 0;
        border-bottom: 1px solid var(--hairline-strong);
        padding: 12px 4px 4px;
        font-family: inherit;
        cursor: pointer;
    }

/* A row gap, not zero: zero is invisible only while the row holds exactly two fields. The invoice block
   puts four in it, so its second line — the address and the country — sits against the line above with
   nothing between them; and on a phone, where this grid drops to one column, every field stacks with no
   gap at all. The row breathes like the form around it. */
.id-field-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--id-form-gap, 1.5rem) 18px;
}

@media (max-width: 620px) {
    .id-field-row {
        grid-template-columns: 1fr;
    }
}

/* The consent box itself — .id-check, its hidden input, .id-check-box and .id-check-text — is site.css's
   „Consent checkbox” region, because the Lens guest page draws the same box without loading this file. What
   stays here is how the box sits in the customer area's forms. */
.id-field-row + .id-check {
    margin-top: 22px;
}

/* A consent is a block, not another row of the form. It carries a declaration somebody is held to —
   the Filmable one grants a licence — and inside a grid whose gap is the same between every item it sits
   flush with the fields above it and with the note below, so the sentence under it reads as attached to
   the button rather than to the consent. A little air on both sides, and the note adds no margin of its own
   to the grid's gap. */
.id-form .id-check {
    margin-block: .6rem;
}

    /* Two consents in a row are one block, not two: the air belongs around the pair, and doubled
       between them it opened a gap wider than the one separating them from the fields above. */
    .id-form .id-check + .id-check {
        margin-top: 0;
    }

.id-form .id-privacy-note {
    margin-bottom: 0;
}

/* Two consents with the error line of the first between them stand a form's gap apart, and nothing
   pulls the second one up: no empty line is held open there (see .id-field-error:empty), so a
   negative offset closes the two blocks into each other. */

/* #endregion */

/* #region Dashboard */
/* The overview's masthead, whole and in one rule. Assembled from three blocks in three regions — the
   subpage head's group, a bare bottom margin in the Account dashboard region, and this one — the three
   disagree about the layout model, the alignment, the gap and the margin, and what the element computes to
   is readable nowhere. */
.id-dashboard-head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 24px;
    max-width: none;
    margin: 0 0 70px;
    padding: 0;
    border: 0;
}

.id-dashboard h1 {
    font-size: clamp(2.8rem, 5vw, 4.5rem);
}

/* The sentence under the greeting is .id-dashboard-purpose, and the overview page describes it —
   a bare `.id-dashboard-head p` rule here was beaten by that and reached nothing. */

/* A link inside a sentence, not an action standing under one: it takes the size, the face and the
   tracking of the words around it and is told apart by the underline alone; gold arrives under the hand. .id-action
   is the other kind — a control of its own, set in capitals away from any sentence — so using that inside
   a line of copy puts a tracked-out capital phrase in the middle of a lowercase sentence. */
.id-inline-link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--white);
    font: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    cursor: pointer;
    transition: color var(--motion-quick) var(--ease-house);
}

    .id-inline-link:hover,
    .id-inline-link:focus-visible {
        color: var(--gold);
    }

.id-upload-form {
    display: grid;
    gap: 16px;
}
/* #endregion */

/* #region Responsive */
@media (max-width: 800px) {
    .id-dashboard-head {
        display: grid;
        grid-template-columns: 1fr;
    }
}
/* #endregion */

/* #region Privacy & data */
.id-privacy-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.id-privacy-card {
    padding: clamp(1.5rem, 2.6vw, 2rem);
    border: 1px solid var(--id-line);
    background: var(--id-surface);
}

    .id-privacy-card h3 {
        margin-bottom: 12px;
    }

    .id-privacy-card p {
        margin-bottom: 22px;
    }

    .id-privacy-card.is-danger {
        border-color: rgba(211, 80, 80, .35);
    }

    .id-privacy-card .id-action.is-danger {
        background: none;
        border: 0;
        padding: 0;
        cursor: pointer;
        color: #e9a7a7;
    }

/* No horizontal timeline variant here: the markup is the vertical dotted list styled in the Billing
   region above, and a block targeting text-bearing spans only sabotages it. */

@media (max-width: 620px) {
    .id-privacy-actions {
        grid-template-columns: 1fr;
    }
}

/* #endregion */

/* #region Launch — data population after purchase */
.id-area-nav-badge {
    display: inline-grid;
    place-items: center;
    min-width: 1.15rem;
    height: 1.15rem;
    margin-left: .4rem;
    padding: 0 .3rem;
    border-radius: 999px;
    /* No pill: the count of what waits for the customer is a gold figure on its own. */
    background: none;
    color: var(--gold);
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: 0;
}

/* No band opens this tab — see the note in Launch.cshtml. .id-all-clear, the one case worth saying
   out loud, keeps its own rules below. */

/* One brief, one section, one heading of its own — see Launch.cshtml. No card framing a brief and no
   list holding them: four cards under a single „Co uruchamiamy" make the customer read the heading and
   then work out for themselves which object each panel belongs to. The section's own hairline and the
   object's name answer that instead. */
.id-launch-heading {
    /* The plate sits with the top of the heading, not with its last line: this block runs to
       four lines and .id-section-heading aligns to the baseline for headings that run to two. */
    align-items: flex-start;
    gap: clamp(2rem, 5vw, 4.5rem);
}

    /* Gold on the one brief that is actually waiting for the customer, grey on the rest — a colour
       that says „your move" on a finished brief stops saying anything. */
    .id-launch-item:not(.requires-action) .id-launch-heading .h-tag {
        color: var(--text-muted);
    }

    .id-launch-item.requires-action .id-launch-heading .h-tag {
        color: var(--gold);
    }

/* The configuration is meta about the name above it, not the section's lead: the shared heading rule
   would set it at reading size a step and a half down, level with the sentence about what happens
   next, and the two would read as one paragraph saying two unrelated things. */
.id-launch-heading .id-launch-config {
    margin-top: .9rem;
    color: var(--text-muted);
    font-size: .85rem;
    line-height: 1.6;
}

/* The object, at the size of the object. A brief is a screen of empty fields, and the one thing on
   it that says what the customer is filling them in for is this picture — at four rems it is a favicon
   beside a page of forms. The double frame is the house's own: a hairline on the picture, a second one set
   inside it. */
.id-launch-plate {
    position: relative;
    flex: 0 0 auto;
    width: clamp(11rem, 20vw, 17rem);
    aspect-ratio: 1;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--hairline);
    background: #050505;
}

    .id-launch-plate::after {
        content: '';
        position: absolute;
        inset: .65rem;
        border: 1px solid var(--photo-frame);
        pointer-events: none;
    }

    .id-launch-plate img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* One slow settle when the brief opens, so the object arrives rather than appearing. */
        animation: idLaunchPlateIn 1.1s var(--ease-house) both;
    }

@keyframes idLaunchPlateIn {
    from { opacity: 0; transform: scale(1.06) }
    to { opacity: 1; transform: none }
}

@media (prefers-reduced-motion: reduce) {
    .id-launch-plate img {
        animation: none;
    }
}

/* Stacked, the object comes first at every narrow width. Three rules used to decide it between them —
   a column here, a column-reverse below 760 and a grid below 620 that ignores both — so the picture
   jumped above and below the text as the window narrowed. One flex column and an order settle it. */
@media (max-width: 800px) {
    .id-launch-heading {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .id-launch-plate {
        order: -1;
    }
}

@media (max-width: 760px) {
    .id-launch-plate {
        width: min(100%, 14rem);
    }
}

/* The delivery promise and the order number are part of the brief's opening paragraph now, at the
   same size as the sentence they follow — see Launch.cshtml. */

/* No rule above the form: it divides the head of a card from its body, and there is no card here —
   the section heading already puts its own step of air in that place. */
.id-launch-form {
    margin-top: 0;
}

/* The field's explanation stands in the column beside the one the answer is typed in, which is otherwise
   empty under every input on this tab. Between the label and the field it is read after the answer or not at
   all, and a specimen the length of the Facts example pushes the field itself most of a screen down. */
/* The grid is declared here, not inherited from .id-field — that class is a column flex. Naming only
   the columns and relying on it makes both a dead declaration: the explanation drops under the field
   it explains, and `align-items: start`, which in flex governs the horizontal axis, shrinks the column
   onto its contents, leaving an input about twenty characters wide. */
/* A brief that is not the one being asked for folds away, and the thing that opens it has to look like
   something to press: a full-width bar — a hairline box, the label on the left and the mark on the right —
   the same shape as the buttons this area uses, at the width of the form it opens. Set as a line of
   micro-caps it is a caption somebody has made clickable: the one control on the page a reader has to find,
   drawn quieter than the text around it. */
.id-launch-fold > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.75rem;
    padding: 1.1rem 1.35rem;
    border: 1px solid var(--hairline-strong);
    background: var(--tint);
    color: var(--white);
    font-family: var(--font-mono);
    font-size: .7rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    cursor: pointer;
    list-style: none;
    transition: border-color .3s ease, background-color .3s ease, color .3s ease;
}

    .id-launch-fold > summary:hover,
    .id-launch-fold > summary:focus-visible {
        border-color: var(--gold);
        background: rgba(var(--gold-rgb), .1);
        color: var(--gold);
    }

    .id-launch-fold > summary::-webkit-details-marker {
        display: none;
    }

    /* The mark sits at the far end of the bar, and turns over when the brief opens. */
    .id-launch-fold > summary::after {
        content: '';
        flex: none;
        width: .45rem;
        height: .45rem;
        border-right: 1px solid currentColor;
        border-bottom: 1px solid currentColor;
        transform: translateY(-.12rem) rotate(45deg);
        transition: transform .3s ease;
    }

.id-launch-fold[open] > summary::after {
    transform: translateY(.06rem) rotate(-135deg);
}

.id-launch-fold[open] > summary {
    margin-bottom: 1.5rem;
}

/* One column. Set against a column of its own explanation, a dozen questions read as a dozen
   paragraphs of instruction with boxes wedged between them — and this is the first screen somebody
   sees after paying us. The explanation lives in the mark beside the field's name, which leaves the
   field its width. */
.id-launch-field {
    display: grid;
}

/* The field's name and, beside it, the mark that explains it. */
.id-launch-field-head {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.id-launch-field-control {
    display: grid;
    gap: .55rem;
}

    /* Stated here as well as in the shared field rule: whatever a browser would rather do with a
       file input or a textarea, the box a brief is answered in takes the whole of its column. */
    .id-launch-field-control input,
    .id-launch-field-control select,
    .id-launch-field-control textarea {
        width: 100%;
        max-width: none;
        box-sizing: border-box;
    }

/* Why we ask, kept out of the way until it is wanted. A small mark beside the field's name; the
   sentence appears on hover and on keyboard focus, and it is reachable as a button rather than as a
   hover-only ornament, so it works on a phone and with a screen reader (the input points at the
   bubble through aria-describedby whether or not it is on screen). */
.id-infotip {
    position: relative;
    display: inline-flex;
}

    .id-infotip button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.15rem;
        height: 1.15rem;
        padding: 0;
        border: 1px solid var(--hairline-strong);
        border-radius: 999px;
        background: none;
        color: var(--white-soft);
        font-family: var(--font);
        font-size: .62rem;
        font-style: italic;
        line-height: 1;
        cursor: help;
        transition: border-color .3s ease, background-color .3s ease, color .3s ease;
    }

        .id-infotip button:hover,
        .id-infotip button:focus-visible {
            border-color: var(--gold);
            background: var(--gold-dim);
            color: var(--gold);
        }

.id-infotip-bubble {
    position: absolute;
    bottom: calc(100% + .6rem);
    left: 50%;
    z-index: 30;
    width: max-content;
    max-width: min(22rem, 70vw);
    padding: .85rem 1rem;
    border: 1px solid var(--hairline-mid);
    background: #050505;
    color: var(--white-soft);
    font-size: .8rem;
    line-height: 1.6;
    text-transform: none;
    letter-spacing: normal;
    opacity: 0;
    transform: translate(-50%, .25rem);
    transition: opacity .25s ease, transform .25s ease;
    pointer-events: none;
}

    /* What a good answer looks like, under the reason for the question — a second kind of sentence,
       so it stands on its own line rather than running into the first. */
    .id-infotip-bubble em {
        display: block;
        margin-top: .5rem;
        color: var(--text-muted);
        font-style: normal;
        /* An example may be several lines (name servers, DNS records); each keeps its own line. */
        white-space: pre-line;
    }

.id-infotip:hover .id-infotip-bubble,
.id-infotip:focus-within .id-infotip-bubble {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* On a tablet a bubble centred on the mark of a short label began left of the field and past the page's
   margin. Pinned to the start of the field's head instead; phones take the whole head below. */
@media (max-width: 940px) {
    .id-launch-field-head {
        position: relative;
    }

        .id-launch-field-head .id-infotip {
            position: static;
        }

    .id-infotip-bubble {
        left: 0;
        transform: translate(0, .25rem);
    }

    .id-infotip:hover .id-infotip-bubble,
    .id-infotip:focus-within .id-infotip-bubble {
        transform: translate(0, 0);
    }
}

.id-launch-answers {
    display: grid;
    gap: .9rem;
    margin-top: 0;
}

    .id-launch-answers p {
        display: grid;
        gap: .2rem;
        /* An answer can be a list — ten engravings, one to a copy — and collapsing its line breaks
           would print them as one run-on sentence. */
        white-space: pre-line;
    }

    .id-launch-answers b {
        font-size: .64rem;
        font-weight: 600;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: rgba(245, 245, 245, .5);
    }

    .id-launch-answers span {
        font-size: .84rem;
        color: var(--text-muted);
        white-space: pre-line;
    }

    .id-launch-answers a {
        font-size: .84rem;
        color: var(--white);
    }

/* The files of one field — a brief question, a complaint, the documents for a Space address: those
   already with us, each with its own way back and its own removal, and beneath them the ones being
   added (id-files.js), previewed before anything is saved. */
.id-launch-files {
    display: grid;
    gap: .6rem;
}

.id-launch-file-list {
    display: grid;
    gap: .4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.id-launch-file {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: .75rem;
    padding: .5rem .75rem;
    border: 1px solid var(--id-line);
    background: var(--id-surface-raised);
}

    .id-launch-file[data-launch-existing] {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .id-launch-file.is-removed .id-launch-file-name {
        color: var(--text-muted);
        text-decoration: line-through;
    }

    .id-launch-file small {
        font-size: .72rem;
        color: var(--text-muted);
    }

.id-launch-file-name {
    overflow: hidden;
    font-size: .84rem;
    color: var(--white);
    text-overflow: ellipsis;
    white-space: nowrap;
}

    /* A name that opens the file — one already with us, or one chosen and not yet sent. */
    a.id-launch-file-name:hover,
    a.id-launch-file-name:focus-visible {
        color: var(--gold);
    }

.id-launch-file-preview {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    overflow: hidden;
    border: 1px solid var(--id-line);
    font-size: .6rem;
    font-weight: 600;
    letter-spacing: .08em;
    color: rgba(245, 245, 245, .5);
}

    .id-launch-file-preview img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.id-launch-file-remove {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: .72rem;
    letter-spacing: .04em;
    color: var(--text-muted);
    cursor: pointer;
}

    .id-launch-file-remove:hover {
        color: var(--gold);
    }

.id-status-badge.is-neutral {
    color: var(--text-muted);
}

/* The one state that is waiting on the customer, the one badge in gold at rest and the only one in the
   area that moves. It breathes rather than blinks: opacity alone, one slow exhale, which catches the eye
   across a grid of tiles without ever becoming an alert. A badge that says „Czekamy na Twoje dane" is
   the one thing on this page somebody has to notice. */
.id-status-badge.is-attention {
    border-color: var(--gold);
    color: var(--gold);
    animation: id-badge-breathe var(--breath-period) ease-in-out infinite;
}

@keyframes id-badge-breathe {
    0%, 100% {
        opacity: .7;
    }

    50% {
        opacity: 1;
    }
}

/* Somebody who has asked for less movement gets the state without the breath. */
@media (prefers-reduced-motion: reduce) {
    .id-status-badge.is-attention {
        animation: none;
    }
}

/* #region ID owned objects shelf */
/* What a customer owns, two to a row, each on its own square. Neither alternative works: the photograph as
   a column beside the name makes it a mark rather than the thing, and a full-width poster one to a screen
   costs more height than the shelf can spend. Two columns give the object back the square the whole house is
   built on:
   these are pieces somebody bought and lives with, so the shelf reads as a collection rather than
   as a list of order lines. It is also the card the chapter's mini-works already use, which is what
   makes the tab read as one design. */
.id-tile-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 1.6vw, 1.4rem);
}

/* The tile is the square, and everything the card says sits on the photograph rather than under it.
   Written as a picture over a body the card is a square plus a caption — no two tiles the same height, the
   grid without rhythm, and the object's own picture shrinking every time a name runs to two lines. With the
   type laid over the image the tile is 1:1 whatever it holds, which is the proportion the whole house is
   drawn in. */
.id-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    aspect-ratio: 1;
    /* The square is the intention, not a guillotine. A tile that also carries buttons — the billing
       tab's subscriptions carry three — can want more height than the column is wide, and `overflow:
       hidden` alone would answer that by cutting the heading off the top of its own card, silently.
       Asked for explicitly, the minimum overrides the zero that `overflow` otherwise imposes on a
       grid item, so the row grows together and the tiles in it stay one height. */
    min-height: min-content;
    overflow: hidden;
    border: 1px solid var(--hairline);
    background: var(--id-surface);
    transition: border-color var(--motion) var(--ease-house);
}

    .id-tile:hover {
        border-color: var(--gold-border);
    }

    /* The ground the type stands on. A photograph is not a background until something makes it one:
       without this the name sat on whatever the picture happened to be doing at the bottom edge, and
       a pale object made it unreadable. It is drawn over the picture and under the content. */
    .id-tile::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 1;
        background: linear-gradient(to top, rgba(5, 5, 5, .92) 0%, rgba(5, 5, 5, .72) 32%, rgba(5, 5, 5, .12) 62%, transparent 100%);
        pointer-events: none;
    }

    /* A tile that also carries buttons stands its type much higher up the square — on a phone the
       name, the fee and two buttons fill two thirds of it — so its ground reaches that far too, and
       only the top of the photograph stays open. */
    .id-tile:has(.id-tile-actions)::before {
        background: linear-gradient(to top, rgba(5, 5, 5, .94) 0%, rgba(5, 5, 5, .86) 55%, rgba(5, 5, 5, .3) 82%, transparent 100%);
    }

    /* A whole tile that is one link. Stretched over the square rather than wrapped around it, so the
       markup inside stays a heading and a paragraph instead of becoming the contents of an anchor —
       and so a tile that also carries buttons can keep them clickable by sitting them above it. */
    .id-tile-link {
        position: absolute;
        inset: 0;
        z-index: 3;
    }

    /* The state, in the corner of the tile — the same place the yearbook's card marks one. */
    .id-tile > .id-status-badge {
        position: absolute;
        top: 1rem;
        left: 1rem;
        z-index: 2;
    }

    .id-tile.requires-action {
        border-left: 2px solid var(--gold);
    }

/* The photograph, framed: a hairline on the picture and a second one set inside it. It is the same
   double frame the house prints on paper, and it is what turns a row of photographs into a shelf. */
.id-tile-plate {
    position: absolute;
    inset: 0;
    margin: 0;
    overflow: hidden;
    background: #050505;
}

    /* A tile with no photograph is not an empty tile. The house's own diamond, repeated very faintly
       across the black, gives it grain — drawn from two crossed gradients rather than an image, so it
       costs no request and scales with whatever size the tile is. */
    .id-tile-plate:has(.id-tile-mark) {
        background-image:
            repeating-linear-gradient(45deg, var(--hairline-faint) 0 1px, transparent 1px 15px),
            repeating-linear-gradient(-45deg, var(--hairline-faint) 0 1px, transparent 1px 15px);
    }

    /* The inner hairline the house prints on paper, kept just inside the tile's own edge — the
       photograph's mount, which warms to gold under the hand. */
    .id-tile-plate::after {
        content: '';
        position: absolute;
        inset: .5rem;
        z-index: 1;
        border: 1px solid var(--photo-frame);
        pointer-events: none;
        transition: border-color var(--motion) var(--ease-house);
    }

    .id-tile:hover .id-tile-plate::after {
        border-color: var(--photo-frame-hover);
    }

/* The same tile for a thing that has no photograph — a leased address, a certificate, a workshop
   number. What a picture would do here, the thing's own name does: set large on the tile's ground it
   is the object, and the section keeps one shape instead of splitting into photographs upstairs and
   rows downstairs. It is centred in the upper part of the square, clear of the ground the name and
   the actions stand on. */
/* Written with two classes so it outweighs the shared card-title rule: the mark is often an <h3>,
   because on a tile with no photograph the name *is* the subject and still has to be the heading. */
.id-tile .id-tile-mark {
    position: absolute;
    /* Centred a little below the middle of the square: sitting on the geometric centre the name read
       as floating above the tile's own weight, with the whole lower half of it empty. */
    inset: 12% 0 30% 0;
    margin: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1.25rem, 2.5vw, 2rem);
    color: var(--white);
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 2.4vw, 2.1rem);
    transition: color var(--motion) var(--ease-house);
    font-weight: 300;
    letter-spacing: -.02em;
    line-height: 1.15;
    text-align: center;
    /* An address has no spaces to break at and a workshop number is one word. */
    overflow-wrap: anywhere;
}

/* A tile whose picture is its own name keeps the name in flow, above the words and the buttons. Laid
   over the square in a fixed upper band, the name printed across the heading, the fee and the
   paragraphs of every tile whose body took more than the lower third — a leased address with its
   buttons, a document form. In flow, the name takes whatever the square leaves above the body: a short
   body keeps the square exactly as it was, and a tall one makes the tile taller instead of covering it.
   The plate's hairline and ground still span the tile, since the tile is now their containing box. */
/* Neither the plate nor the name may shrink below the name's own height: a long address wraps to
   several lines, and anything that squeezes it clips the name at the top and the bottom of the tile. */
.id-tile-plate:has(.id-tile-mark) {
    position: static;
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    overflow: visible;
    background-color: transparent;
    background-image: none;
}

    /* The plate's ground and grain move to the tile, which is the box the plate used to cover. The
       tile is also the name's measure: the type follows the width of the square, not of the window,
       so three tiles to a row and one to a row set the same name at the same share of the tile. */
    /* With the overflow visible, `auto` is the ratio's own content floor: a body taller than the square
       makes the tile taller, instead of pushing the name up under the state badge. */
    .id-tile:has(.id-tile-mark) {
        container-type: inline-size;
        min-height: auto;
        overflow: visible;
        background-color: #050505;
        background-image:
            repeating-linear-gradient(45deg, var(--hairline-faint) 0 1px, transparent 1px 15px),
            repeating-linear-gradient(-45deg, var(--hairline-faint) 0 1px, transparent 1px 15px);
    }

    .id-tile:hover .id-tile-mark {
        color: var(--gold);
    }

    .id-tile .id-tile-plate:has(.id-tile-mark) .id-tile-mark {
        position: relative;
        inset: auto;
        flex: 1 0 auto;
        min-height: 6rem;
        font-size: clamp(1.05rem, 8cqi, 2.1rem);
    }

    /* The state sits in the tile's corner, so the name starts below it rather than under it. */
    .id-tile:has(> .id-status-badge) .id-tile-plate:has(.id-tile-mark) .id-tile-mark {
        padding-top: 3.5rem;
    }

    .id-tile-plate img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 1.8s var(--ease-house);
    }

    .id-tile:hover .id-tile-plate img {
        transform: scale(1.025);
    }

    /* Rendered above one copy only — „1 ×" is not information. Top right, opposite the state: the
       foot of the tile is where the name lies now, and a count sitting there ran into it. */
    .id-tile-plate figcaption {
        position: absolute;
        z-index: 2;
        top: 1rem;
        right: 1rem;
        padding: .25rem .5rem;
        background: rgba(5, 5, 5, .85);
        color: var(--white);
        font-size: .62rem;
        letter-spacing: .1em;
    }

/* The name and what the thing is, lying on the photograph. Both blocks are lifted over the scrim by
   one z-index; without it they are painted under it and the tile reads as an empty picture. */
.id-tile-body {
    position: relative;
    z-index: 2;
    display: grid;
    justify-items: start;
    gap: 0;
    min-width: 0;
    padding: clamp(1.1rem, 1.8vw, 1.5rem) clamp(1.1rem, 1.8vw, 1.5rem) 0;
}

    /* A tile with nothing to press has no foot to give it the bottom margin, so the last line of the
       body sat on the tile's own edge. The padding is dropped only where actions follow. */
    .id-tile-body:last-child {
        padding-bottom: clamp(1.1rem, 1.8vw, 1.5rem);
    }

    .id-tile-body > .h-tag {
        margin-bottom: .35rem;
    }

    .id-tile-body h3 {
        margin-top: 0;
    }

    .id-tile-body p {
        margin-top: .35rem;
    }

    /* What a recurring service costs, on the tile that names it. The amount is the part that is
       read; the interval beside it is the quiet half of the same sentence. */
    .id-tile-fee {
        margin-top: .6rem;
    }

        .id-tile-fee strong {
            color: var(--white);
            font-weight: 500;
        }

/* The foot of the tile: what the customer may do with this thing, and nothing else. The state left
   this block — it describes the object, not the button, and standing directly over „Przekaż dane" it
   read as a caption on a control; it is in the tile's own corner now. No rule above it either: the
   scrim already separates the type from the picture, and a hairline drawn across a photograph is a
   line through the object rather than under the words. */
.id-tile-actions {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    padding: clamp(.85rem, 1.4vw, 1.1rem) clamp(1.1rem, 1.8vw, 1.5rem) clamp(1.1rem, 1.8vw, 1.5rem);
}

/* Two to a row on a laptop. Three columns of a narrow window make each square about the width of a
   thumbnail, which is where a name, an amount and a row of buttons stop fitting inside one — and the
   square is the shelf's whole point, so the answer is fewer of them rather than taller ones. */
@media (max-width: 1080px) {
    .id-tile-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    /* One to a row, where two squares would each be the width of a thumbnail. */
    .id-tile-grid {
        grid-template-columns: minmax(0, 1fr);
    }

}
/* #endregion */

/* One rhythm for a whole form: the gap is the form's property (--id-form-gap), and both sides of the
   rule are measured from it. A group setting its own 1.25rem inside a form that uses 2.5rem, plus a
   margin of its own on top of that gap, puts the rule over „Adres dostawy" further from the block
   above it than from the group below, and seats two fields inside a group closer together than the
   same two fields outside one. */
.id-fieldset {
    display: grid;
    gap: var(--id-form-gap, 1.5rem);
    margin: 0;
    padding-top: var(--id-form-gap, 1.5rem);
    border-top: 1px solid var(--id-line);
}

    /* The group's name and the sentence under it are one block, so they keep their own small gap
       instead of standing a whole field apart. */
    .id-fieldset-head {
        display: grid;
        gap: .5rem;
    }

    /* A sub-heading of the section it stands in, not a second eyebrow. „Adres dostawy",
       „Komunikacja" and „Dane do faktury" head whole blocks of fields; set as tracked micro-caps they are
       the same shape as the field labels beneath them and as the section's own eyebrow above them, so one
       screen carries three ranks of the same mark. They take the house's display face,
       in white, one clear step under „Twoje dane". */
    .id-fieldset-title {
        margin: 0;
        color: var(--white);
        font-family: var(--font-display);
        font-size: clamp(1.15rem, 1.6vw, 1.45rem);
        font-weight: 400;
        letter-spacing: -.02em;
        line-height: 1.2;
    }

/* Two consents under each other are two lines of the same declaration, not two blocks. The form's
   own gap — a whole field's worth of air — put them as far apart as two unrelated questions, so they
   are pulled back into a pair. The gap is the grid's, not the item's, so a negative margin is the
   only thing that can reach it. */
.id-check + .id-check {
    margin-top: calc(var(--id-form-gap, 1.5rem) * -1 + .75rem);
}

.id-fieldset-note {
    margin: 0;
    color: var(--text-muted);
    font-size: .78rem;
    line-height: 1.6;
}

@media (max-width: 620px) {
    /* A bubble centred on a mark near the edge of a narrow screen hangs off it, and pinned to the mark
       it still runs off the right edge when the mark follows a long label. It spans the field's head
       instead, which is always as wide as the column. */
    .id-launch-field-head {
        position: relative;
    }

        .id-launch-field-head .id-infotip {
            position: static;
        }

    .id-infotip-bubble {
        left: 0;
        right: 0;
        width: auto;
        max-width: none;
        transform: translate(0, .25rem);
    }

    .id-infotip:hover .id-infotip-bubble,
    .id-infotip:focus-within .id-infotip-bubble {
        transform: translate(0, 0);
    }
}
/* #endregion */

/* #region Help and Requests */
.id-page-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.id-service-period {
    display: block;
    margin-top: 6px;
    color: var(--text-muted);
    line-height: 1.6;
}

    /* The date itself, in the page's own white — the label around it stays quiet. */
    .id-service-period b {
        color: var(--white);
        font-weight: 500;
    }

/* The foot of the card, under its own label and across both columns. */
.id-order-rights {
    grid-column: 1 / -1;
    display: grid;
    gap: 1rem;
    padding-top: clamp(1.25rem, 2vw, 1.75rem);
    border-top: 1px solid var(--id-line);
}

    .id-order-rights > .id-block-label {
        margin-bottom: 0;
    }

    /* The two declarations stand together, and the deadline that governs one of them stands with
       them rather than in a line of its own — it is the sentence that says how long the button
       beside it is still there. */
    .id-order-rights-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: .75rem 1rem;
    }

        .id-order-rights-actions small {
            color: var(--text-muted);
            font-size: .85rem;
        }

/* A matter already filed: what it is, and the dates that bind us. */
.id-order-right-state {
    display: grid;
    justify-items: start;
    gap: .35rem;
    padding: 1rem;
    border-left: 2px solid var(--hairline);
    background: var(--id-surface-raised);
}

    .id-order-right-state strong {
        color: var(--white);
        font-size: .95rem;
        font-weight: 500;
    }

    .id-order-right-state small,
    .id-order-right-state em {
        color: var(--text-muted);
        font-size: .85rem;
        font-style: normal;
        line-height: 1.7;
    }

    .id-order-right-state > a {
        margin-top: .35rem;
    }

.id-history-list {
    display: grid;
    border-top: 1px solid var(--id-line);
}

.id-history-row {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--id-line);
}

    /* The list opens with a rule of its own, so the last row must not close with one: a one-row list
       — the current acceptance of the terms, above the trail — then ended on a stroke that stood
       directly over the stroke opening the list underneath it, and the page carried a double line
       nothing separated. The rules belong between rows. */
    .id-history-row:last-child {
        border-bottom: 0;
    }

    .id-history-row > span {
        color: var(--text-muted);
        font-size: .78rem;
        font-variant-numeric: tabular-nums;
    }

    .id-history-row strong {
        display: block;
        font-size: .85rem;
        font-weight: 500;
    }

    /* The second line of a row says what the first one was done with — the device, the browser. It is part
       of the same record, so it takes the row's own ink; set muted it reads as a footnote to the line above
       rather than as the other half of it. The date on the left stays quiet: that is the column, not the
       record. */
    .id-history-row small {
        display: block;
        margin-top: 2px;
        font-size: .75rem;
        overflow-wrap: anywhere;
    }

    .id-history-row b {
        font-size: .65rem;
        font-weight: 500;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

        .id-history-row b.is-granted {
            color: var(--white);
        }

        .id-history-row b.is-revoked {
            color: var(--text-muted);
        }

/* The acceptance of the terms is drawn as a row of the list below it, so it needs no type of its
   own — only the step that keeps it from touching that list. */

/* Set at the area's ordinary reading size, not smaller. This paragraph names the controller, the
   rights somebody has over their own data and the authority they may complain to — the one piece of
   copy on the page that must not look like small print, so it is never set below the measure everything
   around it is read at.

   It is also the section's own lead, so it stands where a lead stands: the heading's full bottom margin
   holds it a whole block away from the title it belongs to while the next thing on the page begins almost
   against its last line. */
/* The information clause under a form's consents: small print, a step below the consents it follows,
   and standing clear of them — pulled up against the last consent it read as that consent's second
   sentence, and at body size it outweighed the declarations themselves. */
.id-privacy-note {
    margin-top: .6rem;
    margin-bottom: 2.5rem;
    color: var(--text-muted);
    font-size: .78rem;
    line-height: 1.6;
}

/* One measure for the whole page, and it is the form's. The three matters carry different fields —
   two columns for a message and a complaint, one for a declaration — so a panel left to size itself from its
   own content changes the page's width every time the chooser above it is used. A select is
   also not a control that gets better at seventy rems wide. The history below reads to the same
   measure, so the page is one column rather than a narrow form over wide cards. */
.id-help-panel {
    max-width: 52rem;
}

.id-request-list {
    display: grid;
    max-width: 52rem;
    gap: clamp(1rem, 2vw, 1.25rem);
}

/* The customer area has its own ground and its own hairline (--id-surface, --id-line): a card that
   reaches for the site's --line and --black-soft instead is a shade off its neighbours on every other tab,
   with a padding of its own on top. One card, described once. */
.id-request-card {
    padding: clamp(1.5rem, 2.6vw, 2rem);
    border: 1px solid var(--id-line);
    background: var(--id-surface);
}

    .id-request-card h3 {
        margin: .5rem 0 0;
    }

/* The date and the subject on the left, where the matter stands on the right. The badge is what the
   customer scans the list for, so it is the one thing that keeps its own place down the column
   instead of being the third sentence of a grey paragraph on every third card. */
.id-request-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
}

    /* Which order the matter belongs to — the card's quietest line, because it identifies rather
       than informs. */
    .id-request-meta {
        margin-top: .45rem;
        color: var(--text-muted);
        font-size: .85rem;
    }

/* The dates that bind us: when the refund is due, when our answer is due. */
.id-request-note {
    margin-top: .9rem;
    color: var(--id-copy);
    font-size: .9rem;
    line-height: 1.7;
}

/* What the customer wrote, in their own line breaks and to a reading measure. */
.id-request-message {
    max-width: 62ch;
    margin-top: 1rem;
    padding-top: 1rem;
    color: var(--text-muted);
    font-size: .9rem;
    line-height: 1.75;
    border-top: 1px solid var(--id-line);
    white-space: pre-line;
}

/* And our answer. It carries a stronger edge than every other block: on this page it is the thing the
   customer came back to read. */
.id-request-response {
    max-width: 62ch;
    margin-top: 1rem;
    padding: 1rem 1.25rem;
    border-left: 2px solid var(--hairline-strong);
    background: var(--id-surface-raised);
    color: var(--white-soft);
    font-size: .9rem;
    line-height: 1.75;
    white-space: pre-line;
}

/* The way into the matter's own page, and the attachments beside it — one row of quiet buttons at the foot
   of the card, wrapping on a phone rather than running off it. */
.id-request-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.25rem;
}

/* A part select with no part to offer — a message about no order — is taken off the form by the script.
   .id-field's own flex display outranks the browser's [hidden] rule, so it is restated here. */
.id-help-page .id-field[hidden] {
    display: none;
}

/* The customer's own words on the matter's page, in their own line breaks — the sheet's reading measure
   and colour otherwise, from .id-document-block p. */
.id-request-text {
    max-width: 62ch;
    white-space: pre-line;
}

/* What was sent with a complaint, shown rather than listed: pictures and films side by side at a size
   that shows a defect, a document as a button. Square-cornered, on the sheet's own hairline. */
.id-request-attachments {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .id-request-attachments img,
    .id-request-attachments video {
        display: block;
        width: 100%;
        max-height: 24rem;
        object-fit: contain;
        border: 1px solid var(--id-line);
        background: var(--id-surface-raised);
    }

/* The sheet, on the account's own ground: every other card here is drawn on --id-surface behind --id-line,
   so reaching for the site's --line and --black-soft leaves a document a shade off the tab it was opened
   from — the same mismatch the request card guards against. A document is also read rather than scanned, so
   it keeps a measure: at the full width of the page a clause runs to about a hundred and forty characters a
   line. */
.id-document {
    display: grid;
    gap: clamp(2rem, 4vw, 2.5rem);
    max-width: 62rem;
    margin-top: .5rem;
    padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3.25rem);
    border: 1px solid var(--id-line);
    background: var(--id-surface);
}

.id-document-block h2 {
    margin-bottom: 1rem;
    color: var(--white);
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 500;
    letter-spacing: -.02em;
}

/* The same grey a provision is set in — see .id-document-clauses below. A sheet whose paragraphs are
   --text-muted and whose clauses are --id-copy reads as two documents bound together, which is
   exactly what the licence looked like. */
/* An e-mail address has no break point of its own and a document box on a phone is narrower than a
   long one. */
.id-document-block p {
    margin-bottom: .75rem;
    color: var(--id-copy);
    font-size: .85rem;
    line-height: 1.8;
    overflow-wrap: anywhere;
}

.id-order-documents .odo-button,
.id-order-documents strong {
    overflow-wrap: anywhere;
}

    .id-document-block p strong {
        color: var(--white-soft);
    }

/* One voice for a document, on screen as well as on paper.
   Everything below sets the same measure, so a provision, an archived provision and the sentence the
   entrant ticked are the same kind of text, which is what they are. Rules kept inside the print block
   alone leave the browser to draw them on screen: a numbered list at its own size with its own indent, and
   a <blockquote> pushed in by 40px no stylesheet asked for, standing beside a facts table that *is* styled,
   in a third size again — four blocks of one sheet in four idioms, which is what makes a licence read as
   assembled rather than as written. */
.id-document-clauses {
    margin: 0;
    padding: 0;
    list-style: none;
}

    .id-document-clauses li {
        margin-bottom: 1rem;
        color: var(--id-copy);
        font-size: .85rem;
        line-height: 1.8;
    }

        /* „Zakres." opens its own provision rather than standing on a line of its own: a run-in head
           is how a contract is set, and it keeps the sheet to one column of text. */
        .id-document-clauses strong {
            color: var(--white-soft);
            font-weight: 500;
        }

.id-document-archived {
    color: var(--id-copy);
    font-size: .85rem;
    line-height: 1.8;
}

    .id-document-archived h3,
    .id-document-archived h4 {
        margin: 1.25rem 0 .5rem;
        color: var(--white);
        font-family: var(--font-display);
        font-size: 1rem;
        font-weight: 500;
    }

    .id-document-archived p,
    .id-document-archived li {
        margin-bottom: 1rem;
        font-size: .85rem;
        line-height: 1.8;
    }

/* The sentence the entrant actually ticked, set exactly as the note that explains where the wording
   came from — same face, same size, same colour. Not the display italic: that is the house's voice for
   something it is saying, and this is a sentence somebody else agreed to, quoted back to them. What
   marks it as quoted is the rule down its left side and nothing else. */
.id-document-quote {
    margin: 0 0 1rem;
    padding: 0 0 0 1rem;
    border-left: 1px solid var(--hairline);
    color: var(--text-muted);
    font-family: var(--font);
    font-size: .78rem;
    font-style: normal;
    line-height: 1.8;
}

/* „Sprzedawca" / „Kupujący", „Licencjodawca" / „Licencjobiorca" — the two sides of the document, and
   each is headed by the account's one block label. It had a fourth hand-written set of micro-caps
   here, at a fourth size and a fourth tracking. */
.id-document-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.5rem, 3vw, 2rem);
}

.id-document-note {
    margin-top: 24px;
    font-size: .78rem;
}

/* The earlier licences under a printed proof. With no rule of its own the list is drawn by the browser: a
   bullet list whose date, work and edition run together on one line, on the two pages of the account that
   are meant to look like documents. One row per licence, ruled off from the one above, with the edition and
   the way it was granted set quietly under the work it belongs to. */
.id-document-history {
    display: grid;
    gap: 0;
    margin-top: 1.25rem;
    padding: 0;
    list-style: none;
}

    .id-document-history li {
        display: grid;
        gap: .25rem;
        padding: .9rem 0;
        border-top: 1px solid var(--id-line);
        color: var(--id-copy);
        font-size: .85rem;
        line-height: 1.6;
    }

        .id-document-history li:first-child {
            border-top: 0;
        }

        .id-document-history strong {
            color: var(--white);
            font-weight: 500;
        }

        /* The edition and who recorded it — the sheet's own small print, and on its own line: beside
           the work's name it read as part of the title. */
        .id-document-history small {
            color: var(--text-muted);
            font-family: var(--font-mono);
            font-size: .6rem;
            letter-spacing: .14em;
            text-transform: uppercase;
        }

.id-document-facts {
    display: grid;
    gap: 12px;
}

    .id-document-facts > div {
        display: grid;
        grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
        gap: 1rem;
        padding-bottom: .75rem;
        border-bottom: 1px solid var(--id-line);
    }

    .id-document-facts dt {
        color: var(--text-muted);
        /* The label of a fact, at the size everything else grey on this sheet is set in — never a step
           smaller than its own value, which makes it a caption, and a caption is not what „Numer
           zamówienia" is. */
        font-size: .85rem;
    }

    .id-document-facts dd {
        color: var(--white-soft);
        font-size: .85rem;
    }

.id-document-table-scroll {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.id-document-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .85rem;
}

    .id-document-table th {
        padding: 0 .75rem .75rem 0;
        border-bottom: 1px solid var(--id-line-strong);
        color: var(--text-muted);
        font-size: .68rem;
        font-weight: 400;
        letter-spacing: .12em;
        text-align: left;
        text-transform: uppercase;
    }

    .id-document-table td {
        padding: .9rem .75rem;
        padding-left: 0;
        border-bottom: 1px solid var(--id-line);
        vertical-align: top;
    }

        /* The name of the thing that was bought, in the sheet's own white. */
        .id-document-table td strong {
            color: var(--white);
            font-weight: 500;
        }

    .id-document-table small {
        color: var(--text-muted);
        font-size: .78rem;
    }

    .id-document-table tfoot td {
        color: var(--text-muted);
    }

    /* The amount the customer actually paid, ruled off from the partial sums above it and set louder than
       them. One shade under white at the size of the line items, the one figure this document exists to
       state is the quietest number on the sheet. */
    .id-document-table tfoot .is-total td {
        padding-top: 1.1rem;
        border-top: 1px solid var(--id-line-strong);
        border-bottom: 0;
        color: var(--white);
        font-size: 1rem;
        font-weight: 500;
    }

    .id-document-table th:last-child,
    .id-document-table td:last-child {
        padding-right: 0;
        text-align: right;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

/* A document's heading carries an order number, so it is a long title standing beside a print
   button. The area's 13ch measure and 56rem cap are right for a page called „Rozliczenia" and wrong
   here: „Potwierdzenie zamówienia ODO-2026-000001" came out as four crushed lines in a column half
   the width of the page. */
.id-document-page .id-page-head {
    max-width: none;
    align-items: end;
}

    .id-dashboard.id-document-page .id-page-head h1 {
        max-width: 24ch;
        margin-bottom: 1.25rem;
        font-size: clamp(2rem, 3.4vw, 3.2rem);
    }

    .id-dashboard.id-document-page .id-page-head p {
        max-width: 46rem;
        margin-bottom: 0;
    }

/* The sheet's own masthead and colophon exist for the printer alone — see ArtistLicence.cshtml. */
.id-print-masthead,
.id-print-colophon {
    display: none;
}

/* A checksum is a reference, not a statement, and it is text on this sheet rather than a code
   sample: set in a monospaced face it is the one thing on the page in a different alphabet, which is what a
   run of 64 characters looks like when it is also the only thing set differently. It keeps the document's own
   face and takes only what it genuinely needs — a quieter grey, and permission to break, since it carries no
   spaces and would otherwise set the width of the whole sheet on a phone. Described once, here: a second rule
   inside the facts list sets the same value one way under „Plik" and another three sections down. */
.id-document code {
    color: var(--text-muted);
    font-family: inherit;
    font-size: inherit;
    font-weight: 400;
    overflow-wrap: anywhere;
}

/* A proof leaves the screen, and this whole area is built for a dark one: near-white type on
   near-black ground. Browsers do not print background colours, so without the rules that follow the
   sheet leaves the printer with its headings, clauses and checksums in white ink on white paper —
   three lines of black text and nothing else. They set the document as ink instead: one scale in
   points, hairline rules, and blocks that do not break across a fold. */
/* The head and foot margins belong to the page box, because a page-box margin is the only one
   repeated on every sheet — padding on the document is spent once, at the top of the first page and
   the bottom of the last. The side margins are padding on the content instead (see .id-document and
   .id-dashboard > .container below), so a „Marginesy: brak" left over in the print dialog still
   keeps the text off the edge of the paper. */
@page {
    size: A4;
    /* Head and foot generous enough that a block pushed onto a fresh page does not open hard against the
       paper's edge — which is what the „Oświadczenie" section did, because it is the one block long enough
       to be carried over. The sides stay zero here on purpose: they are padding on the content instead (see
       .id-document and .id-dashboard > .container below), so a „Margins: none" left over in the print dialog
       still keeps the text off the edge of the sheet. */
    margin: 20mm 0 16mm;
}

@media print {
    /* Printouts are pure black on pure white (#000 on #fff), never the screen's #050505/#F5F5F5. */
    .id-area-nav-wrap,
    .id-page-actions,
    .core-interface,
    /* Everything the layout puts on every page and nobody prints on purpose. site.css already hides
       the header, the footer and the overlays — but Odoardo Letters™ is a band of its own standing
       above the footer rather than inside it, so a printed licence ended with an invitation to
       subscribe to a newsletter. */
    .letters-band,
    .odo-orb,
    .cart-root,
    .noise-overlay,
    .custom-cursor,
    footer {
        display: none !important;
    }

    html,
    body {
        background: #fff !important;
    }

    /* One sweep rather than a list of elements: every colour in this area comes from a
       light-on-dark token, and a list would go stale the next time the area grows a screen. */
    .id-dashboard,
    .id-dashboard * {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    .id-dashboard {
        padding: 0 !important;
    }

        .id-dashboard > .container {
            width: auto !important;
            max-width: none !important;
            padding: 0 !important;
        }

        /* Every other page of the area goes to paper as it is, so it takes the sheet's side margins
           here; a document page takes them on the sheet itself, and giving it both would set the
           text in twice. */
        .id-dashboard:not(.id-document-page) > .container {
            padding: 0 17mm !important;
        }

    /* The area's entrance starts at opacity 0 — without this a licence goes to paper blank. */
    .id-dashboard .id-page-head,
    .id-dashboard .id-dashboard-head,
    .id-dashboard .id-account-section,
    .id-dashboard .id-document {
        opacity: 1;
        transform: none;
        animation: none;
    }

    /* On paper the sheet introduces itself; the screen's heading and its lead do not follow it. */
    .id-document-page .id-page-head {
        display: none;
    }

    /* The wordmark is the drawing — black on paper — and the two faces under it each do the one job
       they have: Playfair for the document's name, Plus Jakarta for the date. A sheet that leaves the
       browser for a printer is exactly where a mark set in type comes out in whatever the printer had. */
    .id-print-masthead {
        display: grid;
        gap: 1.8mm;
        margin-bottom: 7mm;
        padding-bottom: 3.5mm;
        border-bottom: .4pt solid #000;
        justify-items: start;
    }

        /* The file is drawn 720 units tall for a 700-unit cap, so this is the height of the letters. */
        .id-print-masthead img {
            width: auto;
            height: 2mm;
        }

        .id-print-masthead b {
            font-family: var(--font-display), 'Playfair Display', serif;
            font-size: 19pt;
            font-weight: 400;
            letter-spacing: -.015em;
            line-height: 1.1;
        }

        .id-print-masthead i {
            font-family: var(--font), 'Plus Jakarta Sans', sans-serif;
            font-size: 7.5pt;
            font-style: normal;
            letter-spacing: .12em;
        }

    /* The sheet. Its side margins (head and foot are the page box's, see @page above), its own scale,
       and the house's two faces stated outright rather than inherited — a printed licence is the one
       thing of ours somebody keeps in a drawer, and it must not come out of the printer set in the
       browser's default serif. */
    .id-document {
        display: block;
        /* The screen's reading measure is the screen's. On paper the page's own margins decide the
           column, and a max-width left standing here would set the sheet inside them a second time. */
        max-width: none;
        margin: 0;
        padding: 0 17mm;
        border: 0;
        background: none;
        font-family: var(--font), 'Plus Jakarta Sans', sans-serif;
        font-size: 9pt;
        line-height: 1.5;
    }

    /* Anything that belongs to the screen alone — see ArtistLicence.cshtml. */
    .id-print-hide {
        display: none !important;
    }

    /* A block may break across pages; its heading may not be left behind at the foot of one. Kept whole, a
       long section — the declaration, the fields of exploitation — jumped to a page of its own the moment it
       would not fit, which left a third of a sheet empty and carried the licence onto a third page. What has
       to stay together is each fact and each clause, and those say so themselves below. */
    .id-document-block {
        margin-bottom: 5.5mm;
        break-inside: auto;
    }

        .id-document-block h2 {
            margin-bottom: 2mm;
            break-after: avoid;
            font-family: var(--font-display), 'Playfair Display', serif;
            font-size: 10.5pt;
            font-weight: 500;
            letter-spacing: -.01em;
        }

        .id-document-block p {
            margin-bottom: 1.8mm;
            font-family: var(--font), 'Plus Jakarta Sans', sans-serif;
            font-size: 8.8pt;
            line-height: 1.5;
        }

    .id-document-grid {
        gap: 8mm;
    }

        .id-document-grid span {
            margin-bottom: 1.5mm;
            font-size: 7pt;
            letter-spacing: .18em;
        }

    .id-document-facts {
        gap: 1.5mm;
    }

        .id-document-facts > div {
            grid-template-columns: 46mm minmax(0, 1fr);
            gap: 4mm;
            padding-bottom: 1.5mm;
            border-bottom: .3pt solid #bbb;
            break-inside: avoid;
        }

        .id-document-facts dt,
        .id-document-facts dd {
            font-family: var(--font), 'Plus Jakarta Sans', sans-serif;
            font-size: 8pt;
        }

    /* On paper a checksum sets itself one step under the text around it and nothing else — it wears
       the sheet's own face there for the same reason it does on screen. */
    .id-document code {
        font-size: 8pt;
        letter-spacing: 0;
    }

    .id-document-note {
        margin-top: 2.5mm;
        font-size: 7.5pt;
        line-height: 1.45;
    }

    .id-document-quote {
        margin: 0 0 2.5mm;
        padding: 2.5mm 3.5mm;
        border-left: .8pt solid #000;
        font-family: var(--font-display), 'Playfair Display', serif;
        font-size: 9pt;
        font-style: italic;
        line-height: 1.45;
    }

    .id-document-clauses {
        margin: 0;
        padding-left: 4.5mm;
    }

        .id-document-clauses li {
            margin-bottom: 1.5mm;
            font-size: 8.2pt;
            line-height: 1.45;
            break-inside: avoid;
        }

    /* The archived edition, when there is one. Same measure as the clause list it replaces, so the
       sheet's rhythm does not change with the age of the licence. */
    .id-document-archived {
        font-size: 8.2pt;
        line-height: 1.45;
    }

        .id-document-archived h3,
        .id-document-archived h4 {
            margin: 2.5mm 0 1mm;
            font-family: var(--font-display), 'Playfair Display', serif;
            font-size: 9pt;
            font-weight: 500;
        }

        .id-document-archived p,
        .id-document-archived li {
            margin-bottom: 1.5mm;
            font-size: 8.2pt;
            line-height: 1.45;
        }

    /* The order confirmation's table of lines. On screen it scrolls sideways inside its own box and
       carries a 34rem floor for the phone; on paper both of those are how a document loses its right
       edge to the fold. */
    .id-document-table-scroll {
        overflow: visible;
    }

    .id-document-table {
        width: 100%;
        min-width: 0;
        border-collapse: collapse;
        font-size: 8.5pt;
    }

        .id-document-table th {
            padding: 1.5mm 2mm;
            border-bottom: .5pt solid #000;
            font-size: 7pt;
            letter-spacing: .12em;
        }

        .id-document-table td {
            padding: 1.5mm 2mm;
            border-bottom: .3pt solid #ccc;
        }

        .id-document-table tfoot .is-total td {
            padding-top: 2.5mm;
            border-top: .5pt solid #000;
            border-bottom: 0;
            /* The screen lifts the total to a rem; on paper the sheet's own scale decides, so the
               figure is told apart by weight rather than by being a third larger than the table. */
            font-size: 9.5pt;
            font-weight: 600;
        }

    /* A printed address is noise: the sheet carries the house's own at the foot. */
    a[href] {
        text-decoration: none;
    }

    .id-print-colophon {
        display: block;
        margin-top: 6mm;
        padding-top: 2.5mm;
        border-top: .3pt solid #bbb;
        font-family: var(--font), 'Plus Jakarta Sans', sans-serif;
        font-size: 7pt;
        letter-spacing: .06em;
        text-align: center;
    }
}

/* Screen only: a printed sheet is about as wide as this breakpoint, and the phone's inset and single
   column must never reach paper, where the print rules above decide. */
@media screen and (max-width: 760px) {
    .id-history-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
    }

    .id-document {
        padding: 28px 22px;
    }

    .id-document-grid,
    .id-document-facts > div {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    /* A confirmation document must keep every column — quantity and billing mode included —
       so on a phone the table scrolls sideways inside its own box instead of dropping data. */
    .id-document-table {
        min-width: 34rem;
    }
}
/* #endregion */

/* #region Filmable press kit */
.id-presskit-graphics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
    margin-top: 2.5rem;
}

.id-presskit-graphic {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    background: var(--surface-card);
}

    .id-presskit-graphic.is-wide {
        grid-column: 1 / -1;
    }

    .id-presskit-graphic img {
        width: 100%;
        height: auto;
        display: block;
    }

    .id-presskit-graphic.is-tall img {
        max-height: 34rem;
        object-fit: contain;
        background: var(--black);
    }

.id-presskit-graphic-meta {
    display: flex;
    justify-content: space-between;
    /* Centred, not on a baseline: what stands opposite the caption is a pair of buttons now, and a
       button has no baseline worth aligning a word to. */
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem 1.5rem;
    margin-top: auto;
    padding: 1rem 1.2rem;
    border-top: 1px solid var(--line);
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: .6rem;
    letter-spacing: .18em;
    text-transform: uppercase;
}

/* A pair of doors, not two underlined words. Dressed as gold text links — a rule underneath and
   negative padding to reach a touch target — they fight the button's own border, padding and ink.
   The container places them and nothing else; the shape is the house's. */
.id-presskit-graphic-links {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

    /* Tighter than a button standing alone: this one sits in a card's footer beside a caption, and
       the full 18/30 padding made two of them as tall as the strip they live in. */
    .id-presskit-graphic-links .odo-button {
        padding: 11px 18px;
        font-size: .62rem;
        letter-spacing: .16em;
    }

.id-presskit-copies {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
    margin-top: 2.5rem;
}

.id-presskit-copy {
    display: flex;
    flex-direction: column;
    gap: .8rem;
}

    .id-presskit-copy label {
        color: rgba(245, 245, 245, .5);
        font-family: var(--font-mono);
        font-size: .6rem;
        letter-spacing: .22em;
        text-transform: uppercase;
    }

    .id-presskit-copy textarea {
        width: 100%;
        padding: 1rem 1.1rem;
        border: 1px solid var(--line);
        background: var(--surface-card);
        color: var(--white-soft);
        font-family: var(--font);
        font-size: .82rem;
        font-weight: 200;
        line-height: 1.7;
        overflow-y: hidden;
        resize: none;
    }

        .id-presskit-copy textarea:focus-visible {
            outline: none;
            border-color: var(--gold-accent);
        }

    /* Below 16px iOS Safari zooms the page on focus and never zooms back out. These boxes are the
       one place in Odoardo ID somebody taps into a field they are not filling in — they tap to
       select the text the button beside it copies — so the zoom arrives where nothing is being
       typed and nothing explains it. Phones only: the desktop box keeps its reading size.
       The same box carries the artist's promo pack, so this reaches both screens. */
    @media (max-width: 760px) {
        .id-presskit-copy textarea {
            font-size: max(16px, .82rem);
        }
    }

.id-presskit-copy-button {
    align-self: flex-start;
    padding: .75rem 1.5rem;
    border: 1px solid var(--hairline-strong);
    background: transparent;
    color: var(--white);
    font-family: var(--font);
    font-size: .64rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color var(--motion-quick) var(--ease-house), color var(--motion-quick) var(--ease-house), background-color var(--motion-quick) var(--ease-house);
}

    .id-presskit-copy-button:hover,
    .id-presskit-copy-button:focus-visible {
        border-color: var(--gold);
        background: var(--gold-dim);
        color: var(--gold);
    }

.id-presskit-badge {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2rem;
    margin-top: 2.5rem;
}

.id-presskit-badge-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1.5rem;
    padding: 2.5rem;
    border: 1px dashed var(--hairline-strong);
    background: var(--surface-card);
}

    .id-presskit-badge-preview > span {
        color: var(--text-muted);
        font-family: var(--font-mono);
        font-size: .6rem;
        letter-spacing: .22em;
        text-transform: uppercase;
    }

.id-presskit-qr {
    display: flex;
    align-items: flex-start;
    gap: 2.5rem;
    margin-top: 2.5rem;
}

    /* Large enough to be judged rather than identified. This is a sheet somebody is about to send to
       a printer and stand on their own reception desk, and at eighteen rems it is a stamp — the wordmark,
       the code and the address all below the size at which anyone can tell whether the thing is right. */
    .id-presskit-qr img {
        width: min(32rem, 62vw);
        height: auto;
        border: 1px solid var(--line);
    }

/* The material language: the filter chips' own look, carried by links, because each choice is a
   page address the owner can reload or share with whoever posts for them. */
.id-material-language {
    margin-bottom: 2.5rem;
}

    .id-material-language-label {
        display: block;
        margin-bottom: .7rem;
        color: var(--text-muted);
        font-size: .64rem;
        font-weight: 600;
        letter-spacing: .1em;
        text-transform: uppercase;
    }

    .id-material-language .id-filter-chips a {
        text-decoration: none;
    }

    .id-material-language .id-filter-chips a:hover span {
        border-color: var(--id-line-strong);
        color: var(--white);
    }

    .id-material-language .id-filter-chips a[aria-current="page"] span {
        border-color: var(--gold);
        background: var(--gold-dim);
        color: var(--white);
    }

    .id-material-language .id-filter-chips a:focus-visible {
        outline: 2px solid var(--gold);
        outline-offset: 2px;
    }

@media (max-width: 900px) {
    .id-presskit-graphics,
    .id-presskit-copies,
    .id-presskit-badge {
        grid-template-columns: 1fr;
    }

    .id-presskit-qr {
        align-items: stretch;
        flex-direction: column;
    }

        .id-presskit-qr .id-presskit-graphic-links {
            align-self: flex-start;
        }
}
/* #endregion */

/* #region Lens view statistics */
/* Text-first bars: a label, a bar and the number — legible without any chart library,
   and honest at every screen width. */
.id-lens-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
}

/* Three plates abreast leave the hour chart's two half-columns a rail of a few pixels on a tablet in
   landscape and a small laptop; two abreast give it the room. */
@media (min-width: 901px) and (max-width: 1200px) {
    .id-lens-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Three boxes, not one wall. Each group is a plate of its own, which is the whole of what makes it
   legible: as three lists running side by side with nothing between them, fourteen days, twenty-four
   hours, the devices and the languages read as one column of sixty numbers and nothing says where one
   question ends and the next begins. */
.id-lens-stat-block {
    padding: clamp(1.25rem, 2vw, 1.75rem);
    border: 1px solid var(--id-line);
    background: var(--id-surface);
}

/* The heading of a statistics block is the account's block title — see .id-block-title. Only the
   room under it is this block's own. */
.id-lens-stat-block h3 {
    margin-bottom: 1.25rem;
}

.id-lens-stat-block h3 + .id-lens-bars + h3 {
    margin-top: 1.5rem;
}

/* The rows are set loosely on purpose. Packed at .4rem a fortnight of days read as a solid block of
   type with hairlines through it; the air between them is what lets the rails be seen as a
   chart rather than as a table. */
.id-lens-bars {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .7rem;
}

.id-lens-bars li {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr) 2.5rem;
    align-items: center;
    gap: .75rem;
    font-size: .8rem;
    line-height: 1.4;
}

.id-lens-bars span {
    color: var(--white-muted, rgba(245, 245, 245, .62));
}

/* The bar is the rail and the fill is drawn inside it. Painted straight onto the row, a day with no
   views had nothing at all in its middle column, so an empty fortnight read as a list of labels with
   a column of noughts beside it and no chart between them. The rail is always there; what varies is
   how much of it is filled. */
.id-lens-bars b {
    position: relative;
    display: block;
    height: 4px;
    background: var(--hairline);
}

    .id-lens-bars b::after {
        content: '';
        position: absolute;
        inset: 0 auto 0 0;
        width: var(--fill, 0%);
        background: var(--white-bright);
    }

.id-lens-bars i {
    font-style: normal;
    text-align: right;
}

    /* A nought is the quietest thing in the block: it is the absence the rail already shows. */
    .id-lens-bars i.is-zero {
        color: var(--white-muted, rgba(245, 245, 245, .38));
    }

/* The 24 hour rows would tower over the section — two columns keep them level with the days. */
.id-lens-bars.is-hours {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.5rem;
}

    /* Half a column is narrow: the day's label and count widths left the hour's rail no width at all.
       „00-01" and a count still fit these. */
    .id-lens-bars.is-hours li {
        grid-template-columns: 2.6rem minmax(0, 1fr) 2rem;
        gap: .5rem;
    }

@media (max-width: 900px) {
    .id-lens-stats-grid {
        grid-template-columns: 1fr;
    }
}
/* #endregion */

/* #region Lens top-up materials */
/* A count of two objects, with the objects shown. The form asked for „Karty powitalne" and „Kotwice
   kadru" in words alone, on the one screen where somebody decides how many more of each to buy —
   and a customer meets both exactly once, at installation. The plate is small and square, the field
   keeps the whole rest of the row, and the picture is the same one the product page sells with. */
/* Each material is a panel of its own, not a field with a stamp beside it. The two run down the form
   as equals — a picture large enough to recognise the object by, its name, the one thing worth
   knowing before ordering it, and the count — so a customer deciding how many more to buy is looking
   at the thing rather than at a number box with a thumbnail. */
.id-topup-item {
    display: grid;
    grid-template-columns: clamp(6.5rem, 12vw, 10.5rem) minmax(0, 1fr);
    align-items: center;
    gap: clamp(1.5rem, 2.75vw, 2.25rem);
    padding: clamp(1.25rem, 2.25vw, 1.75rem);
    border: 1px solid var(--id-line);
    background: var(--id-surface);
}

    /* The material's name heads its own panel: it names an object the customer is looking at a
       picture of, so it is set like every other block title in the account — the display face, light,
       in the page's white — and not in the tracked uppercase a form caption wears. The caption style
       is right where a word labels a box; here the box is the smaller half of the panel. */
    .id-topup-item .id-field label {
        color: var(--white);
        font-family: var(--font-display);
        font-size: 1.15rem;
        font-weight: 300;
        letter-spacing: -.02em;
        text-transform: none;
    }

        /* And the note under it is read, not scanned, so it carries the account's own copy size
           rather than the smallest one in the form. */
        .id-topup-item .id-field label small {
            margin-top: .35rem;
            font-family: var(--font);
            font-size: .8rem;
            font-weight: 300;
            letter-spacing: normal;
            line-height: 1.6;
        }

    .id-topup-item + .id-topup-item {
        margin-top: 1rem;
    }

.id-topup-plate {
    margin: 0;
    aspect-ratio: 1;
    overflow: hidden;
    border: 1px solid var(--id-line);
    background: #050505;
}

    .id-topup-plate img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* Under about 520px the plate and a number field share a row that is no longer wide enough for
   either: the picture stands over the field instead, at the width it is given. */
@media (max-width: 520px) {
    .id-topup-item {
        grid-template-columns: minmax(0, 1fr);
    }

    .id-topup-plate {
        max-width: 9rem;
    }
}
/* #endregion */

/* #region Lens usage meter */
/* Odoardo Lens™ prices the month behind it, so the running month has to be visible while it
   still can be influenced. The same bars as the statistics above — one meter, twelve months. */
.id-lens-usage-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 2rem;
    align-items: start;
}

.id-lens-usage-meter .id-page-stat {
    margin-bottom: 1rem;
}

.id-lens-usage-charge {
    margin-top: 1rem;
    font-size: .85rem;
    color: var(--white-muted, rgba(245, 245, 245, .62));
}

.id-lens-usage-warning {
    margin-top: .5rem;
    font-size: .85rem;
    color: var(--gold);
}

/* A count of cards is four characters wide. Running the whole column, the box reads as a place to write a
   sentence, and a number typed into a field the width of an address looks like a mistake. */
.id-lens-topup-form .id-field input[type="number"] {
    width: min(100%, 9rem);
}

/* Twelve months read as a year only when they stand side by side on one baseline. As rows they are
   twelve repetitions of a label, an invisible bar and a nought — the horizontal bars above are right
   for five days or twenty-four hours, and wrong for the one figure a customer wants to see the shape
   of. The column keeps the number above it and the month under it, so nothing is lost by turning. */
/* While the next set of films is on its way, the ones on the screen step back rather than vanish —
   a library that empties and refills reads as a page reload. */
[data-lens-results].is-loading {
    opacity: .45;
    transition: opacity .2s ease;
    pointer-events: none;
}

.id-lens-months {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(.3rem, .7vw, .6rem);
    margin: 0;
    padding: 0;
}

    .id-lens-months li {
        display: grid;
        grid-template-rows: auto 1fr auto;
        gap: .45rem;
        justify-items: center;
        text-align: center;
    }

    /* A month with nothing in it still prints its nought, one step quieter — the year has to be
       readable as twelve months, not as the three that happened to have traffic. */
    .id-lens-months em {
        color: var(--text-muted);
        font-size: .72rem;
        font-style: normal;
        line-height: 1;
    }

    .id-lens-months li.has-value em {
        color: var(--white);
    }

    .id-lens-months b {
        position: relative;
        display: block;
        width: 100%;
        height: clamp(3.25rem, 7vw, 5.25rem);
        background: linear-gradient(to top, var(--tint-raised), rgba(245, 245, 245, .01));
        border-bottom: 1px solid var(--hairline-mid);
    }

        .id-lens-months b i {
            position: absolute;
            inset: auto 0 0;
            height: var(--fill, 0%);
            /* A year of columns is a block of light at full strength; held back, it still reads. */
            background: linear-gradient(to top, rgba(245, 245, 245, .42), rgba(245, 245, 245, .12));
            /* The year draws itself once, left to right, when the tab opens. */
            animation: idLensMonthRise .8s var(--ease-house) both;
            animation-delay: calc(var(--i, 0) * 45ms);
        }

    .id-lens-months span {
        color: var(--text-muted);
        font-size: .56rem;
        letter-spacing: .06em;
    }

@keyframes idLensMonthRise {
    from { height: 0 }
    to { height: var(--fill, 0%) }
}

@media (prefers-reduced-motion: reduce) {
    .id-lens-months b i {
        animation: none;
    }
}

@media (max-width: 900px) {
    .id-lens-usage-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    /* Six to a row rather than twelve columns three characters wide. */
    .id-lens-months {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        row-gap: 1.25rem;
    }
}
/* #endregion */

/* #region Filmable entry progress */
/* The counter is what the selection turns on, so the card carries it: how many unique visits the
   space has, against the threshold it is walking toward, and which stage of the four it stands on. */
.id-filmable-progress {
    display: grid;
    gap: .75rem;
    margin: 1rem 0;
}

.id-filmable-visits {
    display: grid;
    gap: .6rem;
}

/* The one figure this card is about, set as a figure. „47 unikalnych wejść" read as an aside in the
   same grey as everything else, while it is the number that decides whether the space is
   distinguished. The card's own scale, not the masthead's .id-page-stat — that carries a rule and a
   fixed width, which belong to a page and would crowd a card. */
.id-count {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    margin: 0;
}

    .id-count strong {
        color: var(--gold);
        font-size: clamp(1.7rem, 2.8vw, 2.4rem);
        font-weight: 400;
        letter-spacing: -.05em;
        line-height: 1;
    }

    .id-count span {
        color: var(--text-muted);
        font-size: .7rem;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    .id-filmable-visits span {
        font-size: .78rem;
        letter-spacing: .04em;
        color: var(--white-muted, rgba(245, 245, 245, .62));
    }

.id-filmable-bar {
    height: 3px;
    background: var(--hairline);
}

    .id-filmable-bar i {
        display: block;
        height: 100%;
        min-width: 2px;
        background: var(--white-bright);
    }

/* The four rungs drawn as the house's own mark: diamonds threaded on a hairline, filled up to the
   one the space stands on and open above it — the same lock-up the certificate and the press kit
   print. Set as four words wrapped in a row they are a list of statuses, with colour alone carrying which
   one the entry has reached. */
.id-filmable-ladder {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    font-size: .58rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--white-muted, rgba(245, 245, 245, .38));
}

    .id-filmable-ladder li {
        position: relative;
        padding-top: 1.55rem;
        text-align: center;
    }

        /* The thread runs from this rung to the next and stops at the last. */
        .id-filmable-ladder li::before {
            content: '';
            position: absolute;
            top: .34rem;
            left: 50%;
            right: -50%;
            height: 1px;
            background: var(--hairline-mid);
        }

        .id-filmable-ladder li:last-child::before {
            display: none;
        }

        /* The bead, painted over the thread and filled on its own ground, so an open rung shows a
           diamond rather than a diamond with a line through it. */
        .id-filmable-ladder li::after {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            width: .6rem;
            height: .6rem;
            border: 1px solid var(--hairline-strong);
            background: var(--id-surface, #050505);
            transform: translateX(-50%) rotate(45deg);
        }

    .id-filmable-ladder li.is-done {
        color: var(--white-muted, rgba(245, 245, 245, .62));
    }

        .id-filmable-ladder li.is-done::after {
            border-color: var(--gold);
            background: var(--gold);
        }

    .id-filmable-ladder li.is-current {
        color: var(--gold);
    }

        .id-filmable-ladder li.is-current::after {
            border-color: var(--gold);
            background: var(--gold);
        }
/* #endregion */

/* #region Field counters and quiet notes */
/* The count stands next to the field while it is being written, so the minimum is never something
   the server discloses after a rejected submission. */
.id-char-counter {
    display: block;
    margin-top: .35rem;
    font-size: .72rem;
    letter-spacing: .04em;
    color: var(--white-muted, rgba(245, 245, 245, .45));
}

    .id-char-counter.is-short {
        color: var(--gold);
    }

/* The chooser stands alone above the form it decides, with the air of a heading rather than of a
   first field — what is being answered here is „which matter", not „which order". */
.id-help-kind {
    max-width: 26rem;
    margin-bottom: clamp(1.6rem, 3vh, 2.4rem);
}

/* Each kind opens with its own sentence, in the weight the area's section leads carry. */
.id-help-panel-lead {
    max-width: 68ch;
    margin: 0 0 clamp(1.6rem, 3vh, 2.2rem);
    color: var(--text-muted);
    font-size: .95rem;
    font-weight: 300;
    line-height: 1.75;
}

.id-waiting-sent {
    display: block;
    margin-top: 1rem;
    color: var(--white-muted, rgba(245, 245, 245, .55));
    font-size: .78rem;
    letter-spacing: .03em;
}

.id-form-note {
    display: block;
    margin-top: .4rem;
    color: var(--white-muted, rgba(245, 245, 245, .55));
    font-size: .78rem;
    letter-spacing: .03em;
}

/* The one link that belongs to a whole list rather than to any row in it, set below the list at the
   distance the rows keep between themselves. */
.id-section-action {
    display: grid;
    justify-items: start;
    gap: .35rem;
    margin-top: 1.75rem;
}

    .id-section-action small {
        font-size: .74rem;
        color: var(--white-muted, rgba(245, 245, 245, .5));
        max-width: 26rem;
    }

/* #endregion */