/* Mobile host (m.*): header padding */
html[data-ar-host-variant="mobile"] .site-header-inner {
    padding-inline: 14px;
}

/* Narrow viewport: unified gutter, safe areas, shorter header, readable text */
@media (max-width: 760px) {
    :root {
        --ar-header-height: 52px;
    }

    body {
        padding-left: env(safe-area-inset-left, 0);
        padding-right: env(safe-area-inset-right, 0);
    }

    .site-header-inner {
        padding-inline: 14px;
    }

    .shell,
    .shell-public,
    .site-footer {
        width: calc(100% - calc(var(--ar-shell-gutter) * 2));
    }

    .shell-public {
        padding-top: 16px;
        padding-bottom: 20px;
    }

    html[data-ar-host-variant="mobile"] .terminal-column-left {
        top: calc(var(--ar-header-height) + 10px);
        left: var(--ar-shell-gutter);
        right: var(--ar-shell-gutter);
        width: auto;
    }

    .hint,
    .field-help,
    .terminal-control-copy,
    .chart-footer-guidance {
        font-size: max(0.8125rem, 13px);
    }

    .site-footer-meta {
        gap: 12px 18px;
    }

    .site-footer-meta a {
        min-height: var(--ar-touch-min);
        padding: 8px 4px;
        margin: -8px -4px;
        display: inline-flex;
        align-items: center;
    }

    .footer-note {
        font-size: max(0.8125rem, 13px);
        line-height: 1.5;
        color: var(--ar-text-soft);
        margin-top: 12px;
    }
}

/* Landscape on mobile host: compact header height */
@media (max-height: 760px) and (orientation: landscape) {
    :root {
        --ar-header-height: 44px;
    }

    html[data-ar-host-variant="mobile"] .terminal-column-left {
        top: calc(var(--ar-header-height) + 8px);
        left: var(--ar-shell-gutter);
        right: var(--ar-shell-gutter);
        bottom: var(--ar-shell-gutter);
        width: auto;
    }
}

/* Mobile host: same width so shell/footer align when on m.* */
html[data-ar-host-variant="mobile"] .shell,
html[data-ar-host-variant="mobile"] .site-footer {
    width: calc(100vw - calc(var(--ar-shell-gutter) * 2));
}

.site-host-switch,
.footer-host-switch {
    color: var(--ar-text-soft);
    font-size: 0.72rem;
    font-weight: 600;
}