/*
 * Slightly compact sizing for the four mobile portal pages.
 *
 * The previous dimensions remain unchanged in mobile_portal.css. To restore
 * them, remove this stylesheet from home.html, tools/tool_list.html,
 * scan_pdf/scan_home.html, and accounts/profile.html.
 */

@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
    :root {
        --mobile-portal-gutter: 18px;
    }

    .mobile-portal-header {
        height: 60px;
        padding: 0 13px;
        border-radius: 17px;
    }

    .mobile-portal-brand img {
        width: 168px;
    }

    .mobile-portal-header.is-home-merged {
        border-radius: 22px 22px 0 0;
    }

    .mobile-portal-header.is-home-merged.is-scrolled {
        border-radius: 22px;
    }

    .mobile-portal-page {
        padding-top: 90px;
        padding-bottom: calc(98px + env(safe-area-inset-bottom));
    }

    .mobile-home-page {
        padding-top: calc(60px + max(10px, env(safe-area-inset-top)));
    }

    .mobile-portal-bottom-nav {
        height: 64px;
        padding: 5px;
        border-radius: 18px;
    }

    .mobile-portal-nav-item {
        gap: 2px;
        font-size: 10.5px;
    }

    .mobile-portal-nav-icon {
        width: 35px;
        height: 29px;
        border-radius: 10px;
    }

    .mobile-portal-nav-icon svg {
        width: 20px;
        height: 20px;
    }

    .mobile-portal-kicker {
        margin-bottom: 6px;
        font-size: 12px;
    }

    .mobile-portal-heading {
        font-size: 25px;
    }

    .mobile-portal-desc {
        margin-top: 7px;
        font-size: 13px;
        line-height: 1.58;
    }

    .mobile-home-hero {
        padding: 19px 17px 18px;
        border-radius: 0 0 22px 22px;
    }

    .mobile-home-title {
        margin-bottom: 8px;
        font-size: 26px;
    }

    .mobile-home-hero p {
        font-size: 13px;
        line-height: 1.5;
    }

    .mobile-home-search,
    .mobile-tools-search {
        height: 48px;
        margin-top: 17px;
        border-radius: 14px;
    }

    .mobile-home-search svg,
    .mobile-tools-search svg {
        width: 19px;
        height: 19px;
    }

    .mobile-home-search input,
    .mobile-tools-search input {
        font-size: 14px;
    }

    .mobile-home-search button {
        height: 33px;
        padding: 0 12px;
        font-size: 12px;
    }

    .mobile-section {
        margin-top: 19px;
    }

    .mobile-section-head {
        margin-bottom: 10px;
    }

    .mobile-section-head h2 {
        font-size: 18px;
    }

    .mobile-home-tool-grid,
    .mobile-quick-grid {
        gap: 8px;
        padding: 13px 9px 12px;
        border-radius: 18px;
    }

    .mobile-tool-icon-lg {
        width: 41px;
        height: 41px;
        margin-bottom: 6px;
        border-radius: 13px;
    }

    .mobile-tool-icon-lg svg {
        width: 20px;
        height: 20px;
    }

    .mobile-tool-label {
        font-size: 12px;
    }

    .mobile-category-grid {
        border-radius: 18px;
    }

    .mobile-category-card {
        min-height: 116px;
        padding: 15px 14px;
    }

    .mobile-category-card.is-full {
        min-height: 90px;
        gap: 12px;
    }

    .mobile-category-icon {
        width: 40px;
        height: 40px;
        margin-bottom: 11px;
        border-radius: 13px;
    }

    .mobile-category-card strong {
        margin-bottom: 4px;
        font-size: 15px;
    }

    .mobile-category-card p {
        font-size: 11.5px;
    }

    .mobile-tools-page {
        padding-top: 88px;
    }

    .mobile-tools-title-row {
        margin-bottom: 14px;
    }

    .mobile-tools-title {
        font-size: 24px;
    }

    .mobile-tools-search {
        height: 50px;
        margin: 0 0 12px;
        padding: 0 14px;
        border-radius: 15px;
    }

    .mobile-quick-card {
        margin-bottom: 14px;
        padding: 15px 14px 13px;
        border-radius: 18px;
    }

    .mobile-tools-tabs {
        margin-bottom: 14px;
        border-radius: 13px;
    }

    .mobile-tools-tab {
        height: 36px;
        border-radius: 10px;
        font-size: 13px;
    }

    .mobile-catalog-section {
        margin-top: 16px;
    }

    .mobile-catalog-title {
        gap: 9px;
        margin-bottom: 9px;
    }

    .mobile-catalog-title-icon {
        width: 28px;
        height: 28px;
    }

    .mobile-catalog-title h2 {
        font-size: 18px;
    }

    .mobile-tool-group {
        margin-bottom: 10px;
        border-radius: 16px;
    }

    .mobile-tool-group-head {
        height: 45px;
        padding: 0 14px;
    }

    .mobile-tool-group-head strong {
        font-size: 14px;
    }

    .mobile-tool-row {
        min-height: 50px;
        gap: 8px;
        padding: 7px;
    }

    .mobile-tool-row-icon {
        width: 32px;
        height: 32px;
    }

    .mobile-tool-row-name {
        font-size: 13px;
    }

    .mobile-scan-intro,
    .mobile-mine-intro {
        margin-bottom: 14px;
    }

    .mobile-scan-stage {
        padding: 16px;
        border-radius: 20px;
    }

    .mobile-scan-preview {
        height: 212px;
        border-radius: 16px;
    }

    .mobile-scan-preview::before {
        inset: 21px;
    }

    .mobile-scan-document {
        width: 112px;
        height: 144px;
        padding: 19px 15px;
    }

    .mobile-scan-caption {
        margin: 12px 0 13px;
    }

    .mobile-scan-caption strong {
        font-size: 16px;
    }

    .mobile-scan-caption span {
        font-size: 12px;
    }

    .mobile-scan-action {
        height: 46px;
        border-radius: 13px;
        font-size: 14px;
    }

    .mobile-scan-action svg {
        width: 18px;
        height: 18px;
    }

    .mobile-scan-features {
        margin-top: 15px;
        padding-top: 14px;
    }

    .mobile-scan-features h2 {
        margin-bottom: 10px;
        font-size: 15px;
    }

    .mobile-scan-feature-grid {
        gap: 8px;
    }

    .mobile-scan-feature {
        height: 84px;
        gap: 7px;
        border-radius: 14px;
        font-size: 12px;
    }

    .mobile-scan-feature-icon {
        width: 36px;
        height: 36px;
        border-radius: 11px;
    }

    .mobile-scan-feature-icon svg {
        width: 21px;
        height: 21px;
    }

    .mobile-profile-card {
        padding: 17px;
        border-radius: 20px;
    }

    .mobile-profile-top {
        gap: 12px;
    }

    .mobile-profile-avatar {
        width: 50px;
        height: 50px;
        border-radius: 16px;
        font-size: 23px;
    }

    .mobile-profile-copy strong {
        font-size: 17px;
    }

    .mobile-profile-button {
        height: 40px;
        margin-top: 15px;
        border-radius: 12px;
        font-size: 14px;
    }

    .mobile-mine-shortcuts {
        gap: 9px;
        margin-top: 13px;
    }

    .mobile-mine-shortcut {
        height: 79px;
        gap: 6px;
        border-radius: 16px;
        font-size: 12px;
    }

    .mobile-mine-shortcut svg {
        width: 22px;
        height: 22px;
    }

    .mobile-mine-section {
        margin-top: 18px;
    }

    .mobile-mine-section h2 {
        margin-bottom: 9px;
        font-size: 16px;
    }

    .mobile-mine-menu {
        border-radius: 16px;
    }

    .mobile-mine-row {
        min-height: 54px;
        gap: 11px;
        padding: 0 14px;
    }

    .mobile-mine-row-icon {
        width: 33px;
        height: 33px;
        border-radius: 10px;
    }

    .mobile-mine-row-copy strong {
        font-size: 13px;
    }

    .mobile-mine-row-copy span {
        font-size: 11px;
    }

    .mobile-mine-footer {
        margin-top: 19px;
    }
}

@media (max-width: 370px) {
    :root {
        --mobile-portal-gutter: 13px;
    }
}