/* Mobile overrides (max-width: 600px). Loaded last so these win the cascade. */

@media (max-width: 600px) {
    :root {
        --shell-radius: 16px;
    }

    body {
        padding: 10px 20px 0;
        align-items: flex-start;
    }

    .container {
        max-width: calc(100vw - 40px);
        width: 100%;
        display: flex;
        flex-direction: column;
        border-top-left-radius: var(--shell-radius);
        border-top-right-radius: var(--shell-radius);
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        transition: none;
    }

    /* Main card: content height, capped — footer sits 30px above the lower border. */
    .container:not(.strategy-open) {
        height: auto;
        min-height: 0;
        max-height: calc(100dvh - 10px);
    }

    .container:not(.strategy-open) .content-scroll {
        flex: 1 1 auto;
        min-height: 0;
    }

    /* Normal-page end: rounded bottom once scrolled to the end. */
    .container:not(.strategy-open).at-bottom {
        max-height: calc(100dvh - 20px);
        border-bottom-left-radius: var(--shell-radius);
        border-bottom-right-radius: var(--shell-radius);
    }

    .container.strategy-open {
        height: auto;
        min-height: 0;
        max-height: calc(100dvh - 10px);
        border-top-left-radius: var(--shell-radius);
        border-top-right-radius: var(--shell-radius);
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        border-color: rgba(255, 255, 255, 0.1);
    }

    .container.strategy-open.at-bottom {
        max-height: calc(100dvh - 20px);
        border-bottom-left-radius: var(--shell-radius);
        border-bottom-right-radius: var(--shell-radius);
    }

    .container.strategy-open > .header,
    .container.strategy-open > .content-scroll {
        display: none;
    }

    .header {
        padding: 30px 12px 12px;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        border-radius: var(--shell-radius) var(--shell-radius) 0 0;
    }

    .header::before {
        border-radius: var(--shell-radius) var(--shell-radius) 0 0;
    }

    .title-container {
        margin-bottom: 10px;
        gap: 8px;
    }

    .logo {
        width: 50px;
        height: 50px;
    }

    .header h1 {
        font-size: 1.8rem;
        margin-bottom: 0;
        position: relative;
        left: 0;
        margin-left: -10px;
    }

    .header p {
        font-size: 0.9rem;
        margin-bottom: 10px;
    }

    .form-container {
        padding: 30px 25px;
        gap: 15px;
        flex-shrink: 0;
        margin-bottom: 15px;
    }

    .input-group {
        gap: 4px;
    }

    .input-label {
        font-size: 0.85rem;
        margin-bottom: 4px;
    }

    .info-button {
        width: 16px;
        height: 16px;
        font-size: 11px;
    }

    .header-top-right {
        top: 10px;
        right: 10px;
        gap: 6px;
    }

    .bmc-cup {
        width: 26px;
        height: 26px;
    }

    .bmc-cup img {
        width: 14px;
        height: 14px;
    }

    .header-info {
        width: 16px;
        height: 16px;
        font-size: 10px;
    }

    .tooltip {
        max-width: 250px;
        font-size: 0.8rem;
        padding: 10px 14px;
    }

    .input-field {
        padding: 22px 30px;
        padding-right: 3.5rem;
        font-size: 0.9rem;
        border-radius: 18px;
    }

    .input-suffix {
        right: 12px;
        font-size: 0.8rem;
    }

    .enlarged-suffix {
        font-size: 1rem;
    }

    .results-container {
        padding: 0 20px 0;
        flex-shrink: 0;
    }

    .results-card {
        padding: 12px;
        border-radius: 18px;
    }

    .result-row {
        padding: 8px 0;
    }

    .result-label {
        font-size: 0.85rem;
    }

    .result-value {
        font-size: 0.9rem;
    }

    .total-cost-card {
        padding: 12px;
        margin-top: 12px;
    }

    .total-cost-label {
        font-size: 0.75rem;
        margin-bottom: 6px;
        line-height: 1.4;
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }

    .total-cost-amount {
        font-size: 1.6rem;
    }

    .chart-button {
        margin: 10px auto 0;
        padding: 8px 16px;
        font-size: 0.85rem;
    }

    .empty-state {
        padding: 0 25px 0;
        flex-grow: 0;
        flex-shrink: 0;
        display: flex;
        justify-content: stretch;
        align-items: stretch;
    }

    .content-scale > .app-footer {
        margin-top: 15px;
        flex-shrink: 0;
    }

    .empty-state-card {
        max-width: none;
        border-radius: 18px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 25px 20px;
        width: 100%;
    }

    .empty-state-icon {
        right: 0;
    }

    .empty-state-icon svg {
        width: 2.2rem;
        height: 2.2rem;
    }

    .empty-state-icon .icon-clock {
        width: 1.9rem !important;
        height: 1.9rem !important;
    }

    .empty-state-text {
        font-size: 1rem;
        font-weight: 400;
    }

    .modal-content {
        width: calc(100vw - 40px);
        max-height: calc(100vh - 40px);
        border-radius: 16px;
        margin: 20px;
    }

    .modal-header {
        padding: 12px;
        border-radius: 16px 16px 0 0;
    }

    .modal-header::before {
        border-radius: 16px 16px 0 0;
    }

    .modal-header h3 {
        font-size: 1.1rem;
    }

    .close-button {
        right: 12px;
        font-size: 1.4rem;
    }

    .chart-container {
        margin: 8px;
        padding: 8px;
    }

    #growthChart {
        max-width: calc(100vw - 60px);
        aspect-ratio: 1 / 0.85;
        max-height: calc(100vh - 200px);
    }
}

@media (max-width: 600px) {
    .tab-btn { font-size: 0.78rem; padding: 12px 8px; }
    .select-field { padding: 22px 30px; font-size: 0.9rem; border-radius: 18px; }
    .frequency-select-button { padding: 22px 30px; font-size: 0.9rem; border-radius: 18px; }
    .frequency-option { font-size: 0.88rem; padding: 11px 14px; }
    .end-balance-amount { font-size: 1.6rem; }
}

@media (max-width: 600px) {
    .share-btn {
        width: 26px;
        height: 26px;
    }
    .share-btn svg { width: 12px; height: 12px; }
    .share-sheet { padding: 20px 16px 32px; }
    .share-grid { gap: 16px 8px; }
    .share-icon { width: 48px; height: 48px; border-radius: 12px; }
    .share-icon svg { width: 22px; height: 22px; }
}