/* Minimum tap target size for mobile */
button, a.btn, input[type="submit"], .tap-target {
    min-height: 44px;
    min-width: 44px;
}

/* Smooth HTMX transitions */
.htmx-swapping {
    opacity: 0;
    transition: opacity 0.2s ease-out;
}
.htmx-settling {
    opacity: 1;
    transition: opacity 0.2s ease-in;
}

/* Activity completion celebration */
@keyframes celebrate {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.05); background-color: #e8ebe3; }
    100% { transform: scale(1); }
}
.todo-completed {
    animation: celebrate 0.4s ease-in-out;
}

/* Milestone observed celebration */
@keyframes milestone-celebrate {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.08); background-color: #e8ebe3; }
    60%  { transform: scale(1.03); }
    100% { transform: scale(1); }
}
.milestone-observed {
    animation: milestone-celebrate 0.6s ease-in-out;
}

/* Form inputs */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
textarea,
select {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    font-size: 1rem;
    transition: border-color 0.15s;
}
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: #6b7f56;
    box-shadow: 0 0 0 3px rgba(107, 127, 86, 0.15);
}

/* Nav dropdown */
.nav-dropdown summary::-webkit-details-marker { display: none; }
.nav-dropdown[open] > div {
    animation: fadeIn 0.15s ease-out;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Cookie consent banner */
.cookie-banner {
    animation: slideUp 0.3s ease-out;
}
@keyframes slideUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

/* Guide info panel (loaded via HTMX) */
.guide-info-panel {
    animation: slideDown 0.2s ease-out;
}
@keyframes slideDown {
    from { opacity: 0; max-height: 0; }
    to   { opacity: 1; max-height: 200px; }
}