/* Source: doc/assets/css/contact.css */
@media (min-width: 720px) {
    .contact-container {
        max-width: var(--toddyi-size-820px);
    }
}

/* Source: doc/assets/css/impressum.css */
@media (max-width: 560px) {
    .impressum-dl__row {
        grid-template-columns: 1fr;
        gap: var(--toddyi-size-4px);
    }
}

/* Source: doc/assets/css/landing/responsive.css */
/* The screenshot used to be `order: -1` here, above the words. On a tablet
   that worked; on a 390px phone the frame is 460px tall and the header and
   language bar take 100 more, so the product's name, the sentence that says
   what it is and the only call to action all began below the fold — and the
   cookie card landed on top of what was left. The picture is the evidence and
   the sentence is the claim; the claim goes first. (#358, #271) */
@media (max-width: 820px) {
    .toddyi-hero__inner {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .toddyi-hero__visual {
        /* The screenshot spans the full width here, which for a 900px capture
           is about a third of its size — a picture of an interface rather than
           one you can read. A fixed frame height crops it instead of shrinking
           it, and because that height stays below the capture's own 660px the
           image is never scaled up: an aspect ratio here reached 123% at 768px,
           which is a blurred screenshot rather than a small one. (#271) */
        block-size: var(--toddyi-size-460px);
        min-height: 0;
    }

    /* contain, not cover: the narrow capture is already the right shape, and
       cropping it would clip the very cards it exists to show. The frame keeps
       a fixed height so the swap between the two sources shifts nothing. */
    .toddyi-hero__shot {
        inline-size: var(--toddyi-size-100pct);
        block-size: var(--toddyi-size-100pct);
        object-fit: contain;
    }

    .toddyi-agent__card {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .toddyi-agent__cta {
        width: var(--toddyi-size-100pct);
    }
}

/* Source: doc/assets/css/landing/responsive.css */
@media (max-width: 640px) {
    .toddyi-page {
        gap: var(--toddyi-size-40px);
    }

    .toddyi-hero__actions {
        flex-direction: column;
    }

    .toddyi-btn {
        width: var(--toddyi-size-100pct);
    }

    .toddyi-spec-list__row {
        grid-template-columns: 1fr;
        gap: var(--toddyi-size-4px);
    }

    .toddyi-doc-nav__list {
        flex-direction: column;
        gap: var(--toddyi-size-10px);
    }
}

/* Source: doc/assets/css/layout/responsive.css */
@media (max-width: 640px) {
    .site-header__inner {
        padding: var(--toddyi-size-28px) var(--toddyi-size-16px) var(--toddyi-size-24px);
    }

    .box {
        padding: var(--toddyi-size-28px) var(--toddyi-size-16px) var(--toddyi-size-60px);
    }

    .box > main {
        padding: var(--toddyi-size-20px) var(--toddyi-size-16px);
    }

    .stats {
        flex-direction: column;
    }

    .info-row {
        flex-direction: column;
        gap: var(--toddyi-size-4px);
    }

    .label {
        width: var(--toddyi-size-100pct);
    }
}

/* Source: doc/assets/css/landing/responsive.css */
/* Below this the hero has a whole viewport to itself and no more, so the
   platforms section starts on the first scroll rather than the second. */
@media (max-width: 560px) {
    .toddyi-hero__visual {
        block-size: var(--toddyi-size-280px);
    }

    .toddyi-hero__mark {
        inline-size: var(--toddyi-size-34px);
        block-size: var(--toddyi-size-34px);
    }

    .toddyi-section__title {
        font-size: var(--toddyi-size-1-15rem);
    }

    .toddyi-features {
        padding: var(--toddyi-size-18px) var(--toddyi-size-16px);
    }
}

/* Source: doc/assets/css/layout/consent.css */
/* A 24rem card is wider than the screen here, so it becomes the width of the
   screen less a margin — still a card with corners and a shadow, still sitting
   above the page rather than welded across it. (#358) */
@media (max-width: 480px) {
    .consent {
        inset-inline: var(--toddyi-size-12px);
        inset-block-end: var(--toddyi-size-12px);
        max-inline-size: none;
        padding: var(--toddyi-size-16px);
    }

    .consent__body {
        font-size: var(--toddyi-size-0-8rem);
    }
}

/* Source: doc/assets/css/layout/responsive.css */
@media (max-width: 768px) {
    .doc-bg {
        background-attachment: scroll;
        background-position: center top;
    }
}

/* Source: doc/assets/css/layout/responsive.css */
@media (max-width: 640px) {
    .doc-body--landing .site-header--landing .site-header__inner {
        padding: var(--toddyi-size-12px) var(--toddyi-size-16px);
    }

    .doc-body--landing .site-header__cta {
        padding: var(--toddyi-size-7px) var(--toddyi-size-12px);
        font-size: var(--toddyi-size-0-76rem);
    }
}


/* Source: doc/assets/css/layout/responsive.css */
/* At phone widths the brand and the call to action did not fit on one line, and
   neither would give way: the brand is wide letter-spaced uppercase, the button
   is nowrap. They overlapped. The brand yields — it is already the page you are
   on — and both shed padding. (#271) */
@media (max-width: 600px) {
    .doc-body--landing .site-header--landing .site-header__inner {
        gap: var(--toddyi-size-10px);
        padding: var(--toddyi-size-10px) var(--toddyi-size-16px);
    }

    .doc-body--landing .site-header__brand {
        min-inline-size: 0;
        overflow: hidden;
    }

    .doc-body--landing .site-header__org {
        letter-spacing: 0.1em;
        font-size: var(--toddyi-size-0-65rem);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .doc-body--landing .site-header__cta {
        flex: none;
        padding: var(--toddyi-size-8px) var(--toddyi-size-12px);
        font-size: var(--toddyi-size-0-75rem);
    }

    .lang-nav {
        padding: var(--toddyi-size-6px) var(--toddyi-size-16px);
    }
}