/* ==========================================================================
   Tiers.

   The Figma has no mobile frame. This is the proposed behaviour, flagged for
   sign-off in the architecture note: same markup throughout, with drag unbound
   and the windows reflowed into a scrolling stack below 768px.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Narrow desktops — --u already fits both axes, so the composition holds; the
   services rows just need fewer columns to stay readable at that scale.
   -------------------------------------------------------------------------- */

@media (max-width: 1179.98px) and (min-width: 1024px) {
    .hxp-service {
        grid-template-columns: calc(120 * var(--u)) minmax(0, 1fr);
        gap: calc(16 * var(--u)) calc(22 * var(--u));
    }

    .hxp-service__title {
        font-size: calc(30 * var(--u));
    }

    .hxp-service__body,
    .hxp-service__bullets {
        grid-column: 2;
    }
}

/* --------------------------------------------------------------------------
   Mobile — a desktop metaphor stops being useful. The windows become a
   scrolling stack of cards; the taskbar becomes the nav.
   -------------------------------------------------------------------------- */

@media (max-width: 1023.98px) {
    :root {
        --u-base: 1px;   /* the stack is laid out in real pixels, not scaled */
        --u: 1px;
        --taskbar-h: 34px;
        --win-pad: 16;
        --win-bar-h: 44;
        --t-title: 15;
        --t-lead: 15;
        --t-body: 15;
        --t-eyebrow: 11;
        --t-micro: 11;
    }

    body {
        overflow: auto;
        -webkit-text-size-adjust: 100%;
    }

    .hxp-desktop {
        position: relative;
        inset: auto;
        min-height: 100dvh;
        padding-bottom: var(--taskbar-h);
        overflow: visible;
    }

    .hxp-wallpaper {
        position: fixed;
    }

    /* --- header pills stack above the content --- */

    .hxp-logo,
    .hxp-nav {
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        height: auto;
    }

    .hxp-logo {
        margin: 12px 12px 0;
        width: max-content;
        padding: 9px 14px;
        gap: 12px;
    }

    .hxp-logo__mark { width: 30px; height: 30px; }
    .hxp-logo__mark img { width: 17px; }
    .hxp-logo__rule { height: 25px; }
    .hxp-logo__word img { width: 63px; }

    /* Four items do not fit one phone-width row; wrap rather than hide the
       last one behind a scroller. */
    .hxp-nav {
        margin: 10px 12px 0;
        padding: 4px 6px;
    }

    .hxp-nav__list {
        flex-wrap: wrap;
        row-gap: 2px;
    }

    .hxp-nav__list li + li { border-left: 0; }

    .hxp-nav__list a {
        padding: 10px 14px;
        font-size: 15px;
    }

    /* --- windows become a stack ------------------------------------- */

    .hxp-windows {
        position: relative;
        inset: auto;
        display: flex;
        flex-direction: column;
        gap: 14px;
        padding: 14px 12px 20px;
    }

    .hxp-win,
    .hxp-win[data-state="max"] {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        height: auto;
        z-index: auto;
        translate: none;
        scroll-margin-top: 14px;
    }

    /* Minimised means nothing without a desktop - show everything. */
    .hxp-win[data-state="min"],
    .hxp-win[data-state="closed"] {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .hxp-win__bar {
        cursor: default;
    }

    .hxp-win__body,
    .hxp-win__body--scroll {
        overflow: visible;
        max-height: none;
    }

    /* Fixed-height media needs an aspect ratio once the frame is fluid. */
    .hxp-figure,
    .hxp-player__stage {
        aspect-ratio: 4 / 5;
        height: auto;
    }

    .hxp-player__stage {
        aspect-ratio: 16 / 10;
    }

    .hxp-gimmick,
    .hxp-clippy {
        height: auto;
        padding-block: 8px;
    }

    /* --- body types collapse to one column --------------------------- */

    .hxp-project,
    .hxp-win[data-state="max"] .hxp-projects,
    .hxp-win[data-state="max"] .hxp-project,
    .hxp-grid,
    .hxp-win[data-state="open"] .hxp-grid {
        grid-template-columns: 1fr;
    }

    .hxp-project {
        gap: 12px;
    }

    /* On the stack every card should show, maximised or not. */
    .hxp-win[data-state="open"] .hxp-card:nth-child(n + 2) {
        display: flex;
    }

    .hxp-win[data-state="open"] .hxp-card .hxp-eyebrow,
    .hxp-win[data-state="open"] .hxp-card .hxp-card__title,
    .hxp-win[data-state="open"] .hxp-card .hxp-card__description,
    .hxp-win[data-state="open"] .hxp-card .hxp-bar {
        display: block;
    }

    .hxp-win[data-state="open"] .hxp-card {
        border-top: 1px solid var(--glass-rule);
        padding-top: 14px;
    }

    .hxp-win[data-state="open"] .hxp-services {
        display: block;
    }

    .hxp-services__intro {
        max-width: none;
    }

    .hxp-service {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 18px 0;
    }

    .hxp-service__mark {
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }

    .hxp-service__num { font-size: 26px; }
    .hxp-service__title { font-size: 27px; }

    /* --- desktop icons have no desktop to sit on --------------------- */

    .hxp-icons {
        position: relative;
        right: auto;
        bottom: auto;
        flex-direction: row;
        justify-content: center;
        padding-bottom: 18px;
    }

    /* --- taskbar becomes the window switcher ------------------------- */

    .hxp-taskbar {
        position: fixed;
    }

    .hxp-start {
        padding-right: 14px;
    }

    .hxp-start__label { font-size: 15px; }

    .hxp-tasklist {
        overflow-x: auto;
        scrollbar-width: none;
    }
    .hxp-tasklist::-webkit-scrollbar { display: none; }

    .hxp-tab {
        flex: 0 0 auto;
        min-width: 0;
        height: 24px;
    }

    /* The tray is decoration; the clock earns its place, the icons do not. */
    .hxp-tray__overflow,
    .hxp-tray__icons img {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Short viewports — a 970-tall composition on a 700-tall laptop needs the
   maximised windows to keep their padding rather than their proportions.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Coarse pointers get bigger hit targets on the window controls.
   -------------------------------------------------------------------------- */

@media (pointer: coarse) {
    .hxp-light {
        width: calc(16 * var(--u));
        height: calc(16 * var(--u));
    }
}

/* --------------------------------------------------------------------------
   Print — flatten to a document.
   -------------------------------------------------------------------------- */

@media print {
    .hxp-taskbar,
    .hxp-icons,
    .hxp-wallpaper,
    .hxp-win__tools {
        display: none !important;
    }

    body { overflow: visible; background: #fff; color: #000; }

    .hxp-desktop { position: static; }

    .hxp-windows {
        position: static;
        display: block;
    }

    .hxp-win {
        position: static;
        display: block;
        width: auto;
        height: auto;
        background: none;
        border: 0;
        border-top: 1pt solid #999;
        border-radius: 0;
        box-shadow: none;
        backdrop-filter: none;
        page-break-inside: avoid;
    }
}