@media (max-width: 600px) {
    body {
        margin: var(--space-sm);
    }

    .card,
    .panel {
        margin: var(--space-md) auto;
        padding: var(--space-md);
        border-radius: var(--radius-md);
    }

    .names-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .event-separator {
        display: none;
    }

    .event-mobile-break {
        display: block;
    }

    input[type="text"],
    input[type="email"],
    input[type="number"],
    input[type="tel"],
    input[type="date"],
    input[type="time"],
    input[type="password"],
    select,
    textarea {
        max-width: 100%;
    }

    .nav-grid {
        justify-content: center;
    }

    .nav-grid > * {
        flex: 1 1 calc(50% - var(--space-sm));
    }

    .nav-button {
        width: 100%;
        min-height: 42px;
        padding: 10px 5px;
        font-size: 0.9em;
    }

    .nav-logout {
        flex-basis: 100%;
    }

    .name-edit-row {
        flex-wrap: wrap;
    }

    .name-edit-row input {
        flex-basis: 100%;
    }

    .actions {
        align-items: stretch;
        flex-direction: column;
    }

    .actions .button,
    .actions button {
        width: 100%;
    }

    .actions-start {
        margin-right: 0;
    }
}