/* mobile-habits.css — mobile rules extracted from habits-styles.css.
   Loaded immediately after habits-styles.css so the cascade is unchanged. */

@media (max-width: 768px) {
    .habits-cards-row {
        flex-direction: column;
    }

    .habit-card {
        min-height: 120px;
    }

    .habit-wizard-body {
        padding: 1.5rem;
    }

    .wizard-title {
        font-size: 1.5rem;
    }

    /* Stack sidebar and content on mobile */
    .wizard-layout {
        flex-direction: column;
        gap: 1rem;
        min-height: auto;
    }

    .wizard-category-sidebar {
        flex-direction: row;
        flex-wrap: wrap;
        min-width: auto;
        padding-right: 0;
        padding-bottom: 0.75rem;
        border-right: none;
        border-bottom: 1px solid var(--bf-border);
        gap: 0.35rem;
    }

    .wizard-category-btn {
        padding: 0.4rem 0.6rem;
        font-size: 0.75rem;
    }

    .wizard-category-btn .category-icon {
        font-size: 0.95rem;
    }

    .wizard-category-btn .category-label {
        font-size: 0.75rem;
    }

    .habit-wizard-footer {
        padding: 1rem 1.5rem;
    }
}

@media (max-width: 768px) {
    .habits-cards-row {
        flex-direction: column;
    }

    .habit-wizard-body {
        padding: 22px 18px 14px 18px;
    }

    .wizard-title {
        font-size: 1.25rem;
    }

    .habit-wizard-footer {
        padding: 12px 14px 14px 14px;
    }

    /* Mobile sidebar layout */
    .wizard-layout {
        flex-direction: column;
        gap: 1rem;
        min-height: auto;
    }

    .wizard-category-sidebar {
        flex-direction: row;
        flex-wrap: wrap;
        min-width: auto;
        padding-right: 0;
        padding-bottom: 0.75rem;
        border-right: none;
        border-bottom: 1px solid var(--bf-border);
        gap: 0.35rem;
    }

    .wizard-category-btn {
        padding: 0.4rem 0.6rem;
        font-size: 0.75rem;
    }

    .wizard-category-btn .category-icon {
        font-size: 0.95rem;
    }

    .wizard-category-btn .category-label {
        font-size: 0.75rem;
    }
}

@media (max-width: 768px) {
    .agent-band-inner {
        flex-direction: column;
        gap: 0.75rem;
    }

    .agent-band-right {
        align-self: flex-end;
    }

    .agent-band-moods {
        flex-wrap: wrap;
    }

    .agent-band-note {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .apple-cal {
        padding: 0.85rem;
        border-radius: 12px;
    }
    .apple-cal-day {
        min-height: 48px;
        padding: 3px 1px 3px;
    }
    .apple-cal-day-number {
        font-size: 0.7rem;
    }
    .apple-cal-event-pill {
        font-size: 0.52rem;
    }
    .apple-cal-day:hover .apple-cal-event-pill {
        font-size: 0.68rem;
    }
}