/*
 * Application stylesheet of the IVFP Plattform on template v2.
 *
 * Plain modern CSS against Kyusu's tokens, no preprocessor - what is written here is what the
 * browser parses. Everything that is a shape rather than a measurement of one of these screens
 * comes from Kyusu (`k-surface`, `k-field`, the `k-` utilities); what is left here is this
 * application's own rhythm and its two one-off layouts.
 *
 * The `kyusu.*` cascade layers are declared idempotently so this file may load in any order.
 */
@layer kyusu.tokens, kyusu.base, kyusu.components, kyusu.utilities;

@layer kyusu.utilities {

    /* == dashboard ========================================================================== */

    /* -- greeting --------------------------------------------------------------------------- */

    /*
     * Breakpoints are Kyusu's (tokens.css): 1023px is where the shell turns the sidebar into a
     * drawer, 639px is the phone. The dashboard adds one of its own at 899px, where the software
     * split and the partner grid run out of room before the shell does.
     */

    .p-greeting {
        display: flex;
        align-items: center;
        gap: 20px;

        @media (max-width: 639px) {
            gap: 14px;
        }
    }

    .p-greeting__mark {
        display: inline-flex;
        flex: none;
        align-items: center;
        justify-content: center;
        inline-size: 64px;
        block-size: 64px;
        border-radius: 50%;
        background-color: var(--kyusu-primary);
        color: var(--kyusu-primary-contrast);
        font-size: 20px;
        font-weight: 700;

        @media (max-width: 639px) {
            inline-size: 48px;
            block-size: 48px;
            font-size: 16px;
        }
    }

    .p-greeting__title {
        font-size: 26px;
        font-weight: 700;
        letter-spacing: -0.025em;
        line-height: 1.5;
        text-wrap: balance;

        @media (max-width: 639px) {
            font-size: 22px;
            line-height: 1.3;
        }
    }

    .p-greeting__text {
        margin: 4px 0 0;
        color: var(--kyusu-secondary);
        font-size: 15px;
    }

    /* -- brand marks: letters on a filled square, the design's logo for the Plattform and every product */

    .p-mark {
        display: inline-flex;
        flex: none;
        align-items: center;
        justify-content: center;
        inline-size: var(--p-mark-size);
        block-size: var(--p-mark-size);
        border-radius: var(--kyusu-radius-lg);
        background: var(--kyusu-primary);
        color: var(--kyusu-primary-contrast);
        font-size: var(--p-mark-font-size);
        font-weight: 700;
        line-height: 1;
        letter-spacing: -0.01em;

        &[data-tone="slate"] {
            background: #334155;
        }
    }

    .p-mark--sm {
        --p-mark-size: 32px;
        --p-mark-font-size: 14px;
    }

    .p-mark--md {
        --p-mark-size: 40px;
        --p-mark-font-size: 18px;
    }

    .p-mark--lg {
        --p-mark-size: 44px;
        --p-mark-font-size: 15px;
    }

    .p-mark--xl {
        --p-mark-size: 56px;
        --p-mark-font-size: 18px;
    }

    /* the subscription's plus: smaller than the letters and lifted to their cap height */
    .p-mark__plus {
        margin-block-end: 0.9em;
        font-size: 0.55em;
        font-weight: 800;
    }

    /* -- page rhythm ------------------------------------------------------------------------ */

    .p-section {
        margin-block-start: 36px;
    }

    .p-section__title {
        margin: 0;
    }

    .p-section__lead {
        margin: 4px 0 0;
        color: var(--kyusu-secondary);
        font-size: 13px;
        line-height: 1.625;
    }

    /* -- software: the leading card, the stack beside it, the bundle under both -------------- */

    /*
     * Two halves of equal width, the same split the Webinare & News grid uses. It is a fixed split
     * and not a fit to the entitlement count: the controller always hands one product to the left
     * track (see IndexController), so the section keeps these proportions for every visitor.
     */
    .p-product-split {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
        margin-block-start: 16px;

        /* one column: the leading card first, the stack under it, in the order the design reads them */
        @media (max-width: 899px) {
            grid-template-columns: minmax(0, 1fr);
        }
    }

    .p-product {
        display: flex;
        flex-direction: column;
        --kyusu-surface-padding: 28px;

        /*
         * on a phone the featured card takes the shape of the rows under it - logo beside the text,
         * chip under the subtitle, the button across the bottom - so the column reads as one list
         * of equal cards, with the filled button as the only thing that still marks it out
         */
        @media (max-width: 639px) {
            display: grid;
            grid-template-columns: 44px minmax(0, 1fr);
            grid-template-rows: auto auto;
            column-gap: 20px;
            align-items: center;
            --kyusu-surface-padding: 18px;
        }
    }

    .p-product__head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;

        @media (max-width: 639px) {
            display: contents;
        }
    }

    .p-product__logo {
        @media (max-width: 639px) {
            grid-row: 1 / span 2;
            --p-mark-size: 44px;
            --p-mark-font-size: 15px;
        }
    }

    /*
     * The badge takes the slot under the subtitle, and starts at the text there: the rows carry
     * theirs under their own subtitle, at the start of the line, so a card that pushed its badge to
     * the card's edge would be the odd one out.
     */
    .p-product__head > .p-product__badge {
        @media (max-width: 639px) {
            grid-column: 2;
            grid-row: 2;
            justify-self: start;
            margin-block-start: 8px;
        }
    }

    /* the subscription state: the pill the design gives it, in the positive ramp */
    .p-product__badge {
        display: inline-flex;
        flex: none;
        align-items: center;
        gap: 6px;
        padding: 4px 10px;
        border: 1px solid color-mix(in srgb, var(--kyusu-positive) 20%, transparent);
        border-radius: var(--kyusu-radius-pill);
        background-color: color-mix(in srgb, var(--kyusu-positive) 10%, transparent);
        color: var(--kyusu-positive);
        font-size: 12px;
        font-weight: 600;
    }

    .p-product__body {
        flex: 1;
        margin-block-start: 20px;

        @media (max-width: 639px) {
            grid-column: 2;
            grid-row: 1;
            margin-block-start: 0;
        }
    }

    .p-product__name {
        color: var(--kyusu-ink);
        font-size: 15px;
        font-weight: 700;
    }

    .p-product .p-product__name {
        font-size: 20px;
        letter-spacing: -0.025em;
        line-height: 28px;

        @media (max-width: 639px) {
            font-size: 15px;
            letter-spacing: normal;
            line-height: normal;
        }
    }

    .p-product__subtitle {
        margin: 2px 0 0;
        color: var(--kyusu-secondary);
        font-size: 13px;
        line-height: 1.5;
    }

    .p-product .p-product__subtitle {
        margin-block-start: 6px;
        font-size: 14px;
        line-height: 1.625;

        @media (max-width: 639px) {
            margin-block-start: 2px;
            font-size: 13px;
            line-height: 1.5;
        }
    }

    /* -- the stack beside the leading card, and the band under both ------------------------- */

    .p-product-stack {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    /*
     * The cards of the stack divide the height of the track between them, so the pair ends level
     * with the leading card beside it.
     */
    .p-product-stack > .p-product {
        flex: 1;
    }

    /*
     * And they wear, at every width, the shape every card takes on a phone: the mark beside the name
     * rather than above it, the buttons across the foot. Two cards of the leading card's shape stand
     * twice its height, so it would be the one left with a void; this way the pair fits beside it and
     * the height they gain goes to the text and pushes the buttons down.
     *
     * The declarations repeat the phone block above deliberately - same shape, different trigger -
     * and the two are to be changed together.
     */
    @media (min-width: 640px) {
        .p-product-stack > .p-product {
            display: grid;
            grid-template-columns: 44px minmax(0, 1fr) auto;
            column-gap: 20px;
            align-items: center;
            --kyusu-surface-padding: 20px;
        }

        .p-product-stack > .p-product .p-product__head {
            display: contents;
        }

        .p-product-stack > .p-product .p-product__logo {
            grid-row: 1;
            --p-mark-size: 44px;
            --p-mark-font-size: 15px;
        }

        /* a column of its own at the end of the first line: the badge holds the card's top right
           corner here, as it does on the leading card, and only drops under the title on a phone */
        .p-product-stack > .p-product .p-product__head > .p-product__badge {
            grid-column: 3;
            grid-row: 1;
            justify-self: end;
            align-self: start;
            margin-block-start: 0;
        }

        .p-product-stack > .p-product .p-product__body {
            grid-column: 2;
            grid-row: 1;
            margin-block-start: 0;
        }

        .p-product-stack > .p-product .p-product__name {
            font-size: 15px;
            letter-spacing: normal;
            line-height: normal;
        }

        .p-product-stack > .p-product .p-product__subtitle {
            margin-block-start: 2px;
            font-size: 13px;
            line-height: 1.5;
        }
    }

    /* the bundle stands under the split, the width of the section, in the compact row shape */
    .p-bundle-list {
        margin-block-start: 20px;
    }

    /* ui:repeat leaves whitespace behind, so :empty never matches an exhausted list */
    .p-product-stack:not(:has(> *)),
    .p-bundle-list:not(:has(> *)),
    .p-partner-grid:not(:has(> *)) {
        display: none;
    }

    .p-upsell {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 16px;
        --kyusu-surface-padding: 20px;

        /* the mark gets a little more air on a phone, where it sits closer to the card's edge */
        @media (max-width: 639px) {
            gap: 20px;
            --kyusu-surface-padding: 18px;
        }
    }

    .p-upsell__notes {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        margin-block-start: 8px;

    }

    /*
     * Off the text and into the band's top right corner, where every other badge sits; on a phone it
     * stays under the title.
     *
     * Out of flow, so it reserves no width - which is safe only in a band that has no buttons for it
     * to land on. Today none does: the only band is the Gesamtpaket, and a bought bundle has nothing
     * left to order. The `:not(:has())` says so rather than trusting it, and a band that ever carries
     * both keeps its badge in flow under the title instead of wearing it over its own button.
     */
    @media (min-width: 640px) {
        .p-upsell:not(:has(.p-upsell__actions)) .p-upsell__notes {
            position: absolute;
            inset-block-start: var(--kyusu-surface-padding);
            inset-inline-end: var(--kyusu-surface-padding);
            margin-block-start: 0;
        }
    }

    /*
     * The two actions of a row, kept together at its end and given one width. Equal auto columns
     * take the width of the wider label, so Bestellen and Starten read as a pair instead of two
     * differently sized buttons; a row with only one action gets one column and is unaffected.
     */
    .p-upsell__actions {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        flex: none;
        gap: 8px;

        @media (max-width: 639px) {
            flex: 1 1 100%;
        }
    }

    /* -- News & Webinare and Learning Plattform tiles ----------------------------------------- */

    /*
     * The same row as an upsell card, for the services that are not products: an icon where the
     * mark would be, no badge, and the same pair of actions at the end.
     */
    .p-tile-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
        margin-block-start: 16px;

        @media (max-width: 639px) {
            grid-template-columns: minmax(0, 1fr);
            gap: 12px;
        }
    }

    /* the Learning Plattform is one tile across the section, not half of a two-column row */
    .p-tile-grid--single {
        grid-template-columns: minmax(0, 1fr);
    }

    .p-tile {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 16px;
        --kyusu-surface-padding: 20px;

        @media (max-width: 639px) {
            gap: 20px;
            --kyusu-surface-padding: 18px;
        }
    }

    /*
     * `k-grow` only grows; its basis stays at the text's own width, which on a phone is wider than
     * what is left beside the icon and would drop the whole block onto a line of its own.
     */
    .p-tile > .k-grow {
        flex-basis: 0;
    }

    /* one width for the pair, as on the upsell rows */
    .p-tile__actions {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        flex: none;
        gap: 8px;

        @media (max-width: 639px) {
            flex: 1 1 100%;
        }
    }

    /* -- partner filter and grid ------------------------------------------------------------- */

    .p-filter {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-block-start: 16px;
    }

    /* the pill shape of the design's filter row - a quiet outline that fills in when it is on */
    .p-chip {
        display: inline-flex;
        align-items: center;
        padding: 6px 14px;
        border: 1px solid var(--kyusu-line);
        border-radius: var(--kyusu-radius-pill);
        background-color: var(--kyusu-surface);
        color: var(--kyusu-secondary);
        font-family: inherit;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.5;
        white-space: nowrap;
        cursor: pointer;
        transition: var(--kyusu-transition-tint);

        &:hover {
            background-color: var(--kyusu-canvas);
            color: var(--kyusu-ink);
        }

        &.is-active {
            border-color: var(--kyusu-primary);
            background-color: var(--kyusu-primary-50);
            color: var(--kyusu-primary);
        }
    }

    .p-partner-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 20px;
        margin-block-start: 16px;

        /* four cards need the full desktop; the grid gives one up per step down and ends as a list */
        @media (max-width: 1279px) {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        @media (max-width: 899px) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        @media (max-width: 639px) {
            grid-template-columns: minmax(0, 1fr);
            gap: 12px;
        }
    }

    .p-partner {
        display: flex;
        flex-direction: column;
        --kyusu-surface-padding: 24px;

        /* the card is display:flex, which beats the user agent's [hidden] rule */
        &[hidden] {
            display: none;
        }

        /* a partner that is announced rather than available recedes until it is */
        &[data-coming-soon="true"] {
            background-color: color-mix(in srgb, var(--kyusu-canvas) 60%, var(--kyusu-surface));
        }

        &[data-coming-soon="true"] :is(.p-partner__logo, .p-partner__wordmark) {
            opacity: 0.6;
        }
    }

    /* a fixed line box, so wordmarks of different aspect ratios sit on one baseline across the row */
    .p-partner__head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 8px;
        block-size: 32px;
    }

    /*
     * The logo shares the head with the "Demnächst" badge, and it is the half that gives way. An
     * <img> is a replaced element, so its automatic minimum size is its intrinsic width and flex
     * refuses to shrink it below that - a wide wordmark kept its full width and pushed the badge
     * clean off the card. min-inline-size lets the badge take what it needs first.
     *
     * The cap is what keeps a wide wordmark off both card edges where there is no badge to make
     * room for. It is a length and not a fraction of the card on purpose: a percentage grows with
     * the column and a 12:1 wordmark still ran the width of a wide card. 150x32 is the box every
     * logo is fitted into, so the marks stay on one scale across breakpoints as well as on one
     * baseline.
     */
    .p-partner__logo {
        min-inline-size: 0;
        max-inline-size: 150px;
        max-block-size: 32px;
        object-fit: contain;
        object-position: left center;
    }

    /* what a partner without a logo shows: its name, set the way the design sets a wordmark */
    .p-partner__wordmark {
        min-inline-size: 0;
        overflow: hidden;
        color: var(--kyusu-ink);
        font-size: 24px;
        font-weight: 700;
        letter-spacing: -0.025em;
        line-height: 32px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .p-partner__flag {
        flex: none;
    }

    .p-partner__category {
        margin-block-start: 4px;
        color: var(--kyusu-secondary);
        font-size: 12px;
        font-weight: 500;
    }

    .p-partner__text {
        flex: 1;
        margin: 12px 0 0;
        color: var(--kyusu-secondary);
        font-size: 13px;
        line-height: 1.625;
    }

    /*
     * The two states of the card's foot are one box: the accent outline that leads to the partner,
     * and the inert line that says the partnership is not live yet.
     */
    .p-partner__cta,
    .p-partner__soon {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        block-size: 36px;
        margin-block-start: 16px;
        padding-inline: 16px;
        border: 1px solid var(--kyusu-line);
        border-radius: var(--kyusu-radius-lg);
        background-color: var(--kyusu-surface);
        color: var(--kyusu-secondary);
        font-size: 13px;
        font-weight: 600;
    }

    .p-partner__cta {
        border-color: var(--kyusu-primary);
        color: var(--kyusu-primary);
        transition: background-color var(--kyusu-transition);

        &:hover {
            background-color: var(--kyusu-primary-50);
            color: var(--kyusu-primary);
            text-decoration: none;
        }
    }

    /* == settings =============================================================================
     *
     * The "Meine Daten" dialog. Kyusu owns the dialog, the rail and the footer; what is left here
     * is the rhythm of the four section bodies and the two field rows whose columns are a
     * measurement (a house number, a postcode) rather than a fraction of the panel.
     *
     * The panel is ~540px wide - 820px dialog less the 209px rail and its gap.
     */

    .p-settings__body {
        margin-block-start: 18px;
    }

    .p-settings__street {
        grid-template-columns: minmax(0, 1fr) 88px;
    }

    .p-settings__plz {
        grid-template-columns: 110px minmax(0, 1fr);
    }

    /* -- Vermittlernummern: one card per entry, the bin in its head ------------------------- */

    .p-vnr {
        display: flex;
        flex-direction: column;
        gap: 13px;
        padding: 18px;
        border: 1px solid var(--kyusu-line);
        border-radius: var(--kyusu-radius-lg);
        background-color: var(--kyusu-surface);
    }

    .p-vnr__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 13px;
    }

    .p-vnr__index {
        color: var(--kyusu-ink);
        font-size: var(--kyusu-font-size);
        font-weight: 700;
    }

    /* 44px is the design's form button (theme _variables.scss: default -> h-11), so the placeholder
       stands exactly as tall as the upload button beside it */
    .p-settings__logo {
        inline-size: 79px;
        block-size: 44px;
        border: 1px solid var(--kyusu-line);
        border-radius: var(--kyusu-radius-lg);
        background: var(--kyusu-canvas);
        color: var(--kyusu-secondary);
    }

    .p-settings__logo-image {
        max-inline-size: 71px;
        max-block-size: 36px;
        object-fit: contain;
    }

    /* a stored logo is shown large and centred, the buttons centred under it */
    .p-settings__logo-section[data-has-logo="true"] {
        flex-direction: column;

        .p-settings__logo {
            inline-size: 100%;
            max-inline-size: 320px;
            block-size: auto;
            padding: 16px;
        }

        .p-settings__logo-image {
            max-inline-size: 100%;
            max-block-size: 160px;
        }

        .p-settings__logo-actions {
            flex-grow: 0;
            justify-content: center;
        }
    }

    /* -- partner admin: the table thumbnail and the edit dialog ----------------------------- */

    .p-partner-admin__logo {
        display: block;
        block-size: 28px;
        max-inline-size: 110px;
        object-fit: contain;
        object-position: left center;
    }

    .p-partner-admin__logo-none {
        color: var(--kyusu-secondary);
        font-size: 12px;
    }

    .p-partner-admin__actions {
        display: flex;
        justify-content: flex-end;
        gap: 8px;

        /* a reflowed row has no column edge to sit against */
        @media (max-width: 639px) {
            justify-content: flex-start;
        }
    }

    .p-partner-admin__logo-status {
        margin-block-start: 7px;
        color: var(--kyusu-secondary);
        font-size: 12px;
    }

    .p-partner-dialog {
        display: flex;
        flex-direction: column;
        gap: 18px;
    }

    /* -- settings: Rechtliches, a list of document links ------------------------------------ */

    .p-legal-list__intro {
        margin: 0 0 16px;
        color: var(--kyusu-secondary);
        font-size: 13px;
    }

    .p-legal-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin: 0;
        padding: 0;
        list-style: none;

        & a {
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }
    }

    /* -- chrome free pages (error, expired, notFound) build on base.xhtml -------------------- */

    .p-plain {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 22px;
        min-block-size: 100vh;
        padding: 40px 22px;
        text-align: center;
    }

    .p-plain__mark {
        color: var(--kyusu-primary);
    }

    .p-plain__title {
        margin: 0;
        color: var(--kyusu-ink);
        font-size: 22px;
        font-weight: 600;
    }

    .p-plain__text {
        max-inline-size: 52ch;
        margin: 0;
        color: var(--kyusu-secondary);
    }

    .p-plain__trace {
        max-inline-size: 100%;
        overflow-x: auto;
        color: var(--kyusu-secondary);
        font-size: 12px;
        text-align: start;
        white-space: pre-wrap;
    }

    /* == topbar on a phone ================================================================== */

    /*
     * The phone bar is menu, help and the avatar (or the login button) and nothing else. The
     * brand goes: the drawer names the product, and the "P" mark would only crowd the actions.
     * The gear goes too: the avatar menu's "Meine Daten" opens the same settings dialog, and its
     * divider has nothing left to separate.
     */
    @media (max-width: 639px) {
        .k-topbar__brand,
        .k-topbar__settings,
        .k-topbar__divider {
            display: none;
        }

        .k-topbar__actions {
            gap: 8px;
        }
    }
}

/*
 * The two dashboard buttons, unlayered on purpose: what these rules have to beat is the theme's own
 * `.ui-button`, which is unlayered and would win against any `kyusu.*` layer regardless of
 * specificity (Kyusu DESIGN.md §5).
 *
 * p:linkButton renders `span.ui-button > a > span.ui-icon + span.ui-button-text`. The span is the
 * button box and lays out as a flex container, which blockifies the anchor inside it, and the
 * theme's `.ui-button-text` is a block - so icon and label end up on two lines unless the anchor
 * lays its own children out in a row.
 */
.p-product__cta,
.p-upsell__action,
.p-tile__action {
    & > a {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        inline-size: 100%;
    }

    & .ui-button-text {
        padding: 0;
    }
}

/* the actions sit at the end of the card, at their own width rather than half of it each */
.p-product .p-product__actions {
    display: grid;
    grid-auto-flow: column;
    justify-content: end;
    gap: 8px;
    margin-block-start: 24px;

    /* on a phone they share the card's width, as the rows' buttons share theirs */
    @media (max-width: 639px) {
        grid-auto-columns: 1fr;
        justify-content: stretch;
        grid-column: 1 / -1;
        margin-block-start: 16px;
    }
}

/*
 * In the stack the card is the compact one, so its buttons span both of its columns and sit closer
 * to the text. The row is named rather than left to auto placement: the mark spans the first two
 * rows, and an auto placed button row would land inside that span and drag the mark down with it.
 *
 * Here rather than in the layer because the rule above is unlayered and would otherwise beat it.
 */
@media (min-width: 640px) {
    .p-product-stack > .p-product .p-product__actions {
        grid-row: 2;
        grid-column: 1 / -1;
        margin-block-start: 16px;
    }
}

/*
 * One box for every action button on the page - the card's, the rows' and the tiles' alike: the same
 * height and the same width, whether the button stands alone or in a pair.
 *
 * The width is a floor rather than a fixed size, so a label too long for it grows instead of being
 * clipped - but a label that outgrows it is then the only button of a different width, which is what
 * "Anmelden" did when the Webinare tile was renamed. The floor clears the widest label on the page
 * ("Anmelden", 135px); raise it when a longer one arrives.
 */
.p-product .p-product__cta,
.p-upsell .p-upsell__action,
.p-tile .p-tile__action {
    block-size: 44px;
    min-inline-size: 9rem;
    padding: 0 16px;

    /* a phone gives them the full width of the card instead, which is the touch target it wants */
    @media (max-width: 639px) {
        min-inline-size: 0;
    }
}

.p-upsell .p-upsell__actions,
.p-tile .p-tile__actions {
    @media (max-width: 639px) {
        margin-block-start: 8px;
    }
}

/*
 * The logo row's two controls, unlayered for the reason above: what they have to beat is
 * theme-base's own `.ui-button`.
 *
 * "Logo hochladen" is a <span> that p:fileUpload wraps around the file input, "Logo löschen" a
 * <button> - two different boxes that reach the theme's button height by two different paddings,
 * and they do not have to land on the same number in every engine. Both are pinned to the design's
 * 44px form button and centre their own label, so the row stays level whatever the engine does with
 * a span that is dressed as a button.
 */
.p-settings__logo-actions .ui-fileupload-simple,
.p-settings__logo-actions .ui-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    block-size: 44px;
}

.p-settings__logo-actions .ui-button .ui-button-text {
    padding: 0;
}