@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&family=Open+Sans:wght@300;400&family=Lato:ital,wght@0,300;0,400;1,400&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.hero-image {
    width: 100%;
    max-width: 400px;
    height: 180px;
    margin: 32px auto 24px auto;
    /* Brand: Updated to use Mindful Green from brand guide */
    background: #6B8E23;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.1rem;
    border-radius: 16px;
}
.features {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
    margin: 36px 0;
}
.feature {
    flex: 1 1 220px;
    background: #f9f9f9;
    border-radius: 12px;
    padding: 22px 16px;
    min-width: 200px;
    box-shadow: 0 2px 8px rgba(90,155,155,0.07);
}
.feature .feature-img {
    width: 60px;
    height: 60px;
    /* Brand: Updated to use Spark Yellow from brand guide for feature highlights */
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    border-radius: 10px;
    margin: 0 auto 12px auto;
}
.feature-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    color: #6B8E23;
    margin-bottom: 8px;
    font-weight: 600;
}
.cta-buttons {
    margin: 40px 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: center;
}
.cta-btn {
    display: inline-block;
    padding: 16px 36px;
    font-size: 1.1rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    background: #FFD700;
    color: #333;
    text-decoration: none;
    transition: background 0.2s;
    box-shadow: 0 2px 8px rgba(90,155,155,0.08);
}
.cta-btn:hover {
    background: #f0c800;
}
.cta-btn.secondary {
    background: #A9A9A9;
    color: #F8F8F8;
}
.coming-soon {
    font-size: 0.98rem;
    color: #888;
    margin-top: 6px;
}
@media (max-width: 600px) {
    .container {
        /* Brand: Maintain visual breathing room on smallest screens */
        /* Layout: Top padding ensures clean separation from any fixed UI elements */
        padding: 40px 5vw 18px 5vw;
    }
    .features {
        flex-direction: column;
        gap: 18px;
    }
}

body {
    font-family: 'Lato', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /* Brand: Updated to use Mindful Green and Calm Blue from brand guide */
    background: linear-gradient(135deg, #6B8E23 0%, #ADD8E6 100%);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #333333;
}

.screen {
    width: 100%;
    min-height: 100vh;
    padding: 20px;
}

.screen.active {
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    background: white;
    border-radius: 20px;
    /* Brand: Ample padding for visual breathing room and clean, uncluttered design */
    /* Layout: Extra top padding ensures menu icon never overlaps with screen title */
    padding: 60px 40px 40px 40px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 600px;
    width: 100%;
    text-align: center;
}

h1 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 2.5rem;
    /* Brand: Updated to use Mindful Green from brand guide */
    color: #6B8E23;
    margin-bottom: 10px;
}

h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 2rem;
    /* Brand: Updated to use Mindful Green from brand guide */
    color: #6B8E23;
    margin-bottom: 20px;
}

h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 1.3rem;
    color: #333333;
    margin-bottom: 15px;
}

.subtitle {
    font-size: 1.1rem;
    font-weight: 300;
    color: #333333;
    margin-bottom: 30px;
}

/* Daily Theme Styles */
/* Daily pause completion message */
.daily-pause-message {
    margin: 20px 0;
    padding: 20px;
    background-color: #f8f8f8;  /* Reflection White from brand palette */
    border-left: 4px solid #6B8E23;  /* Mindful Green from brand palette */
    border-radius: 8px;
    text-align: center;
}

.daily-pause-message p {
    margin: 0;
    font-family: 'Lato', sans-serif;
    font-style: italic;
    font-size: 1.1rem;
    color: #333;
    line-height: 1.6;
}

/* Usage Streaks Bar - Shows last 10 days of app usage */
.streaks-container {
    margin: 28px 0;
    padding: 20px;
    background-color: #f8f8f8;  /* Reflection White from brand palette */
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(90, 155, 155, 0.08);
}

.streaks-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #6B8E23;  /* Mindful Green from brand palette */
    margin-bottom: 12px;
    text-align: center;
}

.streaks-bar {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    padding: 0 4px;
}

.streak-day {
    flex: 1;
    min-width: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.streak-indicator {
    width: 100%;
    height: 36px;
    border-radius: 8px;
    transition: all 0.3s ease;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

/* Streak active state - user completed a pause that day */
.streak-indicator.active {
    background: linear-gradient(135deg, #FFD700 0%, #f0c800 100%);  /* Spark Yellow gradient */
    box-shadow: 0 2px 6px rgba(255, 215, 0, 0.4);
}

.streak-indicator.active:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(255, 215, 0, 0.5);
}

/* Streak inactive state - no pause completed that day */
.streak-indicator.inactive {
    background: #F8F8F8;  /* Reflection White from brand palette */
    border: 2px solid #A9A9A9;  /* Archive Grey from brand palette */
}

.streak-indicator.inactive:hover {
    background: #A9A9A9;
    transform: translateY(-1px);
}

/* Today's streak has a special highlight */
.streak-indicator.today {
    border: 2px solid #6B8E23;  /* Mindful Green border for today */
}

.streak-day-label {
    font-family: 'Lato', sans-serif;
    font-size: 0.75rem;
    color: #666;
    text-align: center;
    white-space: nowrap;
}

/* Emphasize today's label */
.streak-day-label.today {
    font-weight: 600;
    color: #6B8E23;  /* Mindful Green */
}

/* Tooltip styling - appears on hover */
.streak-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 8px;
    padding: 8px 12px;
    background: rgba(51, 51, 51, 0.95);
    color: #fff;
    font-family: 'Lato', sans-serif;
    font-size: 0.85rem;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 1000;
    line-height: 1.4;
}

.streak-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: rgba(51, 51, 51, 0.95);
}

.streak-day:hover .streak-tooltip {
    opacity: 1;
}

/* Responsive design for smaller screens */
@media (max-width: 600px) {
    .streaks-bar {
        gap: 4px;
        padding: 0 2px;
    }

    .streak-indicator {
        height: 32px;
        font-size: 1rem;
    }

    .streak-day-label {
        font-size: 0.7rem;
    }

    .streak-tooltip {
        font-size: 0.8rem;
        padding: 6px 10px;
    }
}

/* Form Styles */
#signup-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 20px;
}

input[type="text"],
input[type="email"],
input[type="password"] {
    padding: 15px;
    font-size: 1rem;
    border: 2px solid #A9A9A9;
    border-radius: 10px;
    transition: border-color 0.3s;
    font-family: 'Lato', sans-serif;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus {
    outline: none;
    /* Brand: Updated to use Mindful Green from brand guide */
    border-color: #6B8E23;
    box-shadow: 0 0 0 3px rgba(107, 142, 35, 0.2);
}

/* Input validation states */
input.invalid {
    /* Brand: Using a warm red that complements the brand palette */
    border-color: #d9534f;
}

input.valid {
    border-color: #27ae60;
}

/* Error messages */
.error-message {
    /* Brand: Using a warm red that complements the brand palette */
    color: #d9534f;
    font-size: 0.875rem;
    text-align: left;
    margin-top: -10px;
    margin-bottom: 5px;
    min-height: 20px;
}

/* Success messages */
.success-message {
    color: #27ae60;
    font-size: 0.875rem;
    text-align: left;
    margin-top: -10px;
    margin-bottom: 5px;
    min-height: 20px;
    font-weight: 600;
}

/* Divider */
.divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 20px 0;
    color: #999;
}

.divider::before,
.divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #ddd;
}

.divider span {
    padding: 0 15px;
    font-size: 0.9rem;
}

/* Google Button */
.btn-google {
    background: white;
    color: #333;
    border: 2px solid #A9A9A9;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-bottom: 10px;
}

.btn-google:hover {
    background: #f8f8f8;
    border-color: #bbb;
}

.google-icon {
    width: 20px;
    height: 20px;
}

/* Button Styles */
.btn {
    padding: 15px 30px;
    font-size: 1rem;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s;
    font-weight: 600;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.btn:active {
    transform: translateY(0);
}

.btn:focus {
    /* Brand: Updated to use Mindful Green from brand guide */
    outline: 3px solid rgba(107, 142, 35, 0.5);
    outline-offset: 2px;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn:disabled:hover {
    transform: none;
}

.btn-primary {
    /* Brand: Updated to use brighter Spark Yellow (#FFD700) from brand guide */
    background: #FFD700;
    color: #333333;
    font-weight: 600;
}

.btn-primary:hover {
    /* Brand: Slightly darker shade of Spark Yellow for hover state */
    background: #f0c800;
}

.btn-secondary {
    background: #F8F8F8;
    color: #333;
    border: 1px solid #A9A9A9;
}

.btn-link {
    background: transparent;
    /* Brand: Updated to use Mindful Green from brand guide */
    color: #6B8E23;
    padding: 10px;
    font-weight: 400;
    text-decoration: underline;
}

.btn-link:hover {
    background: transparent;
    /* Brand: Darker shade of Mindful Green for hover */
    color: #5a7520;
    transform: none;
    box-shadow: none;
}

/* Terms of Service Checkbox Container */
.terms-container {
    margin: 15px 0;
    text-align: left;
}

.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.9rem;
    color: #333;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    margin-top: 3px;
    cursor: pointer;
    width: 18px;
    height: 18px;
}

.checkbox-label span {
    flex: 1;
    line-height: 1.5;
}

.checkbox-label a {
    /* Brand: Updated to use Mindful Green from brand guide */
    color: #6B8E23;
    text-decoration: underline;
}

.checkbox-label a:hover {
    /* Brand: Darker shade of Mindful Green for hover */
    color: #5a7520;
}

/* UX: Centered button container for main screen "Ignite your spark" button */
/* Brand: Follows brand guidelines for clean, uncluttered layout with balanced visual composition */
.centered-button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

.btn-large {
    padding: 20px 50px;
    font-size: 1.3rem;
}

.btn-option {
    background: white;
    border: 2px solid #A9A9A9;
    color: #333;
    padding: 15px 25px;
    margin: 5px;
}

.btn-option.selected {
    /* Brand: Updated to use Mindful Green from brand guide */
    background: #6B8E23;
    color: white;
    border-color: #6B8E23;
    box-shadow: 0 0 0 3px rgba(107, 142, 35, 0.3);
}

.btn-option:hover {
    /* Brand: Updated to use Mindful Green from brand guide */
    border-color: #6B8E23;
    background: rgba(107, 142, 35, 0.1);
}

.button-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}

/* Configuration Screen */
.config-section {
    margin-bottom: 30px;
}

/* Timer Progress Bar - Reduces stress by showing progress instead of countdown */
.timer-progress-container {
    margin: 30px 0;
}

.timer-progress-bar {
    width: 100%;
    height: 40px;
    background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 100%);
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.timer-progress-fill {
    height: 100%;
    width: 0%;
    /* Brand: Updated to use Mindful Green and Calm Blue from brand guide */
    background: linear-gradient(135deg, #6B8E23 0%, #ADD8E6 100%);
    border-radius: 20px;
    transition: width 0.5s ease-out;
    box-shadow: 0 2px 4px rgba(107, 142, 35, 0.3);
}

.timer-progress-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    /* Brand: Updated to use Mindful Green from brand guide */
    color: #6B8E23;
    font-variant-numeric: tabular-nums;
}

.timer-progress-labels span {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.timer-progress-labels span::after {
    content: attr(data-label);
    font-size: 0.8rem;
    font-weight: 400;
    color: #666;
}

/* Prompt Section */
.prompt-section {
    margin: 30px 0;
    padding: 20px;
    /* Brand: Gentle gradient using Mindful Green and Calm Blue from brand palette */
    border-radius: 10px;
    text-align: left;
}

.prompt-text {
    font-size: 1.2rem;
    color: #333333;
    margin-bottom: 15px;
    font-style: italic;
    font-weight: 400;
}

/* Menu Button - Discreet positioning at top right */
.menu-btn {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    z-index: 1000;
}

.menu-btn:hover {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transform: scale(1.05);
}

.menu-icon {
    font-size: 1.5rem;
    /* Brand: Updated to use Mindful Green from brand guide */
    color: #6B8E23;
    font-weight: 600;
}

/* Menu Dropdown */
.menu-dropdown {
    position: fixed;
    top: 80px;
    right: 20px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    padding: 15px;
    min-width: 200px;
    z-index: 999;
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.menu-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 1.1rem;
    /* Brand: Updated to use Mindful Green from brand guide */
    color: #6B8E23;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 2px solid #f0f0f0;
}

/* Subcategory title styling for grouping menu items (e.g. "Fill database") */
.menu-subcategory-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 0.85rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 15px;
    margin-bottom: 5px;
    padding-left: 5px;
}

.menu-item-btn {
    display: block;
    width: 100%;
    padding: 12px 15px;
    margin: 5px 0;
    background: white;
    border: 2px solid #f0f0f0;
    border-radius: 8px;
    color: #333;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    font-family: 'Lato', sans-serif;
}

.menu-item-btn:hover {
    background: #f8f8f8;
    /* Brand: Updated to use Mindful Green from brand guide */
    border-color: #6B8E23;
    transform: translateX(3px);
}

/* Responsive */
@media (max-width: 768px) {
    .container {
        /* Brand: Maintain visual breathing room on mobile devices */
        /* Layout: Top padding ensures menu icon never overlaps with screen titles on small screens */
        padding: 50px 20px 20px 20px;
    }

    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    .timer-display {
        font-size: 3.5rem;
    }

    .btn-option {
        flex: 1 1 calc(50% - 20px);
        min-width: 120px;
    }

    .menu-btn {
        top: 15px;
        right: 15px;
        width: 45px;
        height: 45px;
    }

    .menu-dropdown {
        top: 70px;
        right: 15px;
        min-width: 180px;
    }
}

/* Add Pause Form Styles */
#add-pause-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-align: left;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label {
    font-weight: 600;
    color: #333333;
    font-size: 1rem;
}

.form-group select,
.form-group textarea,
.form-group input[type="number"] {
    padding: 12px;
    font-size: 1rem;
    border: 2px solid #A9A9A9;
    border-radius: 10px;
    transition: border-color 0.3s;
    font-family: 'Lato', sans-serif;
}

.form-group select:focus,
.form-group textarea:focus,
.form-group input[type="number"]:focus {
    outline: none;
    /* Brand: Updated to use Mindful Green from brand guide */
    border-color: #6B8E23;
    box-shadow: 0 0 0 3px rgba(107, 142, 35, 0.2);
}

.form-group select[multiple] {
    min-height: 120px;
}

.form-group textarea {
    resize: vertical;
    min-height: 100px;
}

.help-text {
    font-size: 0.85rem;
    color: #666;
    font-style: italic;
}

/* Completion Screen Styles */
.encouragement-message {
    background: linear-gradient(135deg, #f5f5f5 0%, #e8f4f5 100%);
    border-radius: 15px;
    padding: 30px;
    margin: 30px 0;
}

.encouragement-message p {
    font-size: 1.2rem;
    line-height: 2;
    color: #333333;
    margin: 10px 0;
}

#like-pause-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Pause Waiting Screen Styles */
.waiting-message {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2f7 100%);
    border-radius: 15px;
    padding: 25px;
    margin: 30px 0;
    /* Brand: Updated to use Mindful Green from brand guide */
    border-left: 5px solid #6B8E23;
}

.waiting-message p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #333333;
    margin: 8px 0;
}

.countdown-display {
    margin: 40px 0;
    padding: 30px;
    /* Brand: Updated to use Mindful Green and Calm Blue from brand guide */
    background: linear-gradient(135deg, #6B8E23 0%, #ADD8E6 100%);
    border-radius: 15px;
    color: white;
}

.countdown-display p {
    font-size: 1.2rem;
    margin: 10px 0;
    font-weight: 400;
}

.wait-time {
    font-family: 'Montserrat', sans-serif;
    font-size: 4rem;
    font-weight: 700;
    margin: 20px 0;
    letter-spacing: 0.1em;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.wait-time span {
    display: inline-block;
    min-width: 1.5em;
    text-align: center;
}

.countdown-label {
    font-size: 1rem;
    font-weight: 300;
    opacity: 0.9;
}

.waiting-tips {
    text-align: left;
    margin: 30px 0;
    padding: 20px;
    background: #f9f9f9;
    border-radius: 10px;
}

.waiting-tips h3 {
    text-align: center;
    margin-bottom: 20px;
    /* Brand: Updated to use Mindful Green from brand guide */
    color: #6B8E23;
}

.waiting-tips ul {
    list-style: none;
    padding: 0;
}

.waiting-tips li {
    padding: 10px 0;
    padding-left: 30px;
    position: relative;
    font-size: 1rem;
    line-height: 1.6;
    color: #555555;
}

.waiting-tips li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    /* Brand: Create CSS arrow using Mindful Green from brand guide */
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 10px solid #6B8E23;
}

/* Tooltip Styles - Provides contextual help for users */
/* Uses native browser title attribute for tooltips as a lightweight solution */
/* Note: For enhanced accessibility, consider implementing custom tooltips with aria-describedby */
/* in a future update if more robust screen reader support is needed */
/* Only apply help cursor to non-interactive elements to maintain proper cursor behavior */
[title]:not(button):not(a):not(input):not(select):not(textarea) {
    position: relative;
    cursor: help;
}

/* Loading State Styles - Provides visual feedback during async operations */
.loading {
    opacity: 0.6;
    pointer-events: none;
    position: relative;
}

.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    border: 3px solid #f3f3f3;
    /* Brand: Updated to use Mindful Green from brand guide */
    border-top: 3px solid #6B8E23;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Improved visual feedback for disabled states */
input:disabled,
select:disabled,
textarea:disabled {
    background-color: #f5f5f5;
    cursor: not-allowed;
    opacity: 0.7;
}

/* Enhanced visual hierarchy with better spacing */
.subtitle + * {
    margin-top: 30px;
}

/* Improved checkbox styling for better visibility */
input[type="checkbox"] {
    /* Brand: Updated to use Mindful Green from brand guide */
    accent-color: #6B8E23;
}

input[type="checkbox"]:focus {
    /* Brand: Updated to use Mindful Green from brand guide */
    outline: 2px solid rgba(107, 142, 35, 0.5);
    outline-offset: 2px;
}

/* Screen reader only text for accessibility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    clip: rect(0, 0, 0, 0); /* Fallback for older browsers - placed after clip-path */
    white-space: nowrap;
    border-width: 0;
}

/* ==================================================
   Pause Flow Screens - Three-Step Journey
   Brand: Dreamy, soft, mindful aesthetic with gentle transitions
   ================================================== */

/* Soft slide-from-bottom animation for screen transitions */
@keyframes slideFromBottom {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Apply animation to pause flow screens */
.pause-flow-screen {
    animation: slideFromBottom 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Progress Indicator - shows current step and allows navigation */
.progress-indicator {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 30px 20px 10px 20px;
    position: relative;
}

/* Individual progress step */
.progress-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Progress step name label - appears below the dot */
/* UX: Improved readability with larger font size and better contrast */
/* Brand: Following Open Sans body font for clean, approachable text */
/* Accessibility: #707070 provides 4.54:1 contrast ratio on white (WCAG AA compliant) */
.progress-step-name {
    font-family: 'Open Sans', sans-serif;
    font-size: 0.85rem;  /* Increased from 0.75rem for better readability */
    color: #707070;  /* Darker gray for WCAG AA compliance (4.54:1 contrast ratio) */
    transition: all 0.3s ease;
    white-space: nowrap;
    letter-spacing: 0.02em;  /* Slightly increased letter spacing for clarity */
}

/* Active step name styling */
/* UX: Enhanced visibility with stronger color and weight */
.progress-step.active .progress-step-name {
    color: #FFD700;  /* Spark Yellow - maintains brand identity */
    font-weight: 600;
}

/* Completed step name styling */
/* UX: Enhanced visibility and weight for completed steps */
.progress-step.completed .progress-step-name {
    color: #6B8E23;  /* Mindful Green - brand color for completed state */
    font-weight: 500;  /* Medium weight to indicate completion without overwhelming */
}

/* Progress dot - represents each step */
.progress-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    /* Brand: Archive Grey for inactive steps */
    background-color: #A9A9A9;
    border: 2px solid #F8F8F8;
    transition: all 0.3s ease;
}

/* Active step - current step in the journey */
.progress-step.active .progress-dot {
    /* Brand: Spark Yellow for active step */
    background-color: #FFD700;
    width: 16px;
    height: 16px;
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.4);
}

/* Completed step - already finished */
.progress-step.completed .progress-dot {
    /* Brand: Mindful Green for completed steps */
    background-color: #6B8E23;
    cursor: pointer;
}

/* Hover effect for completed steps - allows navigation back */
.progress-step.completed:hover .progress-dot {
    transform: scale(1.2);
    box-shadow: 0 2px 8px rgba(107, 142, 35, 0.4);
}

/* Line connecting progress dots */
.progress-indicator::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    /* Brand: Archive Grey for connection line */
    background-color: #D3D3D3;
    z-index: -1;
    transform: translateY(-50%);
}

/* Pause flow container - centered content area */
.pause-flow-container {
    max-width: 500px;
    margin: 0 auto;
    padding: 20px;
}

/* Pause flow title - main heading for each screen */
.pause-flow-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.2rem;
    /* Brand: Mindful Green */
    color: #6B8E23;
    margin-bottom: 25px;
    font-weight: 600;
}

/* Pause flow content - main text area */
.pause-flow-content {
    margin-bottom: 35px;
}

/* Pause flow text - body copy */
.pause-flow-text {
    font-family: 'Open Sans', sans-serif;
    font-size: 1.1rem;
    line-height: 1.7;
    color: #333;
    margin-bottom: 15px;
    font-weight: 300;
}

/* Pause flow question - emphasis for questions */
.pause-flow-question {
    font-family: 'Lato', sans-serif;
    font-size: 1.3rem;
    line-height: 1.6;
    color: #333;
    margin-bottom: 25px;
    font-style: italic;
    font-weight: 400;
}

/* Prompt section - displays the creative spark */
.prompt-section {
    margin: 30px 0;
    padding: 25px;
    /* Brand: Reflection White background */
    background-color: #F8F8F8;
    border-radius: 12px;
    border-left: 4px solid #FFD700;
}

.prompt-heading {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    color: #6B8E23;
    margin-bottom: 12px;
    font-weight: 600;
}

.prompt-text {
    font-family: 'Open Sans', sans-serif;
    font-size: 1.05rem;
    line-height: 1.6;
    color: #333;
    font-weight: 300;
}

/* Dreamy button - soft, gentle CTA */
/* Brand: Warm, gentle, no pressure aesthetic */
.btn-dreamy {
    display: inline-block;
    padding: 16px 40px;
    font-size: 1.15rem;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-style: italic;
    border-radius: 30px;
    border: none;
    cursor: pointer;
    /* Brand: Calm Blue background from brand palette */
    background: #ADD8E6;
    color: #333;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(173, 216, 230, 0.3);
    margin-top: 20px;
}

.btn-dreamy:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(173, 216, 230, 0.4);
}

.btn-dreamy:active {
    transform: translateY(0);
}

/* Disabled state for dreamy button */
/* Brand: Gentle, subtle indication that button is not yet available */
.btn-dreamy:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
    box-shadow: 0 2px 8px rgba(173, 216, 230, 0.2);
}

.btn-dreamy:disabled:hover {
    transform: none;
    box-shadow: 0 2px 8px rgba(173, 216, 230, 0.2);
}

/* Unfold button - gentle, inviting CTA for revealing more prompt text */
/* Brand: Warm, gentle, no pressure aesthetic - similar to dreamy button but distinct */
.btn-unfold {
    display: inline-block;
    padding: 12px 32px;
    font-size: 1rem;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-style: italic;
    border-radius: 30px;
    border: 2px solid #ADD8E6; /* Calm Blue border */
    cursor: pointer;
    background: transparent;
    color: #6B8E23; /* Mindful Green text */
    text-decoration: none;
    transition: all 0.3s ease;
    margin-top: 20px;
    /* Brand: Subtle, non-intrusive appearance */
}

.btn-unfold:hover {
    background: #ADD8E6;
    color: #333;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(173, 216, 230, 0.3);
}

.btn-unfold:active {
    transform: translateY(0);
}

/* Progressive text reveal animation - typewriter/fade-in effect */
/* Brand: Gentle, smooth appearance that doesn't overwhelm */
@keyframes fadeInText {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Apply progressive reveal to prompt text sections */
/* Animation delay is calculated dynamically in JavaScript for scalability */
.prompt-section {
    animation: fadeInText 0.8s ease-out;
    animation-fill-mode: both;
    margin-bottom: 15px;
}

/* Option list - selectable choices */
.option-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin: 20px 0;
    transition: all 0.4s ease;
    position: relative;
}

/* Slide away animation for non-selected options */
.option-list.sliding .option-item:not(.selected) {
    opacity: 0;
    transform: translateX(-100%) scale(0.8);
    pointer-events: none;
    position: absolute;
    left: 0;
    right: 0;
}

/* Selected option stays visible and grows slightly */
.option-list.sliding .option-item.selected {
    transform: scale(1.05);
    border-color: #FFD700;
    background-color: #fff;
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.3);
}

/* Individual option item */
.option-item {
    display: flex;
    align-items: center;
    padding: 18px 24px;
    /* Brand: Reflection White background */
    background-color: #F8F8F8;
    border: 2px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.4s ease;
    font-family: 'Lato', sans-serif;
    font-size: 1.05rem;
    color: #333;
    text-align: left;
}

.option-item:hover {
    /* Brand: Calm Blue border on hover */
    border-color: #ADD8E6;
    background-color: #fff;
    box-shadow: 0 4px 12px rgba(173, 216, 230, 0.2);
    transform: translateX(5px);
}

.option-item:active {
    transform: translateX(5px) scale(0.98);
}

/* Option icon */
.option-icon {
    font-size: 1.5rem;
    margin-right: 15px;
    min-width: 30px;
    text-align: center;
}

/* Option text */
.option-text {
    flex: 1;
    font-weight: 300;
}

/* Option container - wraps button and choose button */
.option-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: all 0.4s ease;
}

/* Expanded option state - shows full text with subtle emphasis */
.option-item.expanded {
    /* Brand: Spark Yellow border to highlight selected option */
    border-color: #FFD700;
    background-color: #fff;
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.25);
    /* Slightly larger padding for expanded content */
    padding: 24px;
    /* No transform on expanded state to keep it stable */
    transform: none;
    /* Allow text to wrap naturally in expanded state */
    white-space: normal;
}

/* Remove hover transform when expanded to prevent movement */
.option-item.expanded:hover {
    transform: none;
}

/* Choose button - appears below expanded option */
.choose-button {
    /* Brand: Spark Yellow primary action button */
    background: #FFD700;
    color: #333;
    border: none;
    border-radius: 10px;
    padding: 14px 28px;
    font-size: 1.05rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 3px 10px rgba(255, 215, 0, 0.2);
    /* Align to center within container */
    align-self: center;
    /* Smooth appearance animation */
    animation: fadeIn 0.4s ease;
}

.choose-button:hover {
    background: #f0c800;
    box-shadow: 0 4px 14px rgba(255, 215, 0, 0.35);
    transform: translateY(-2px);
}

.choose-button:active {
    transform: translateY(0);
}

/* Collection sections - hidden by default, shown when method selected */
.collection-section {
    margin-top: 30px;
    animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Write container */
.write-container {
    text-align: center;
}

.write-prompt {
    font-family: 'Lato', sans-serif;
    font-size: 1.05rem;
    line-height: 1.6;
    color: #666;
    margin-bottom: 20px;
    font-weight: 300;
    font-style: italic;
}

/* Collection actions - container for buttons */
.collection-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin-top: 20px;
}

/* Text link button - gentle, subtle option */
.btn-text-link {
    background: none;
    border: none;
    color: #A9A9A9;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.9rem;
    cursor: pointer;
    padding: 8px 16px;
    transition: color 0.3s ease;
}

.btn-text-link:hover {
    color: #6B8E23;
    text-decoration: underline;
}

/* Spark textarea - for writing collection */
.spark-textarea {
    width: 100%;
    min-height: 150px;
    padding: 15px;
    font-family: 'Lato', sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    border: 2px solid #E0E0E0;
    border-radius: 12px;
    resize: vertical;
    /* Brand: Reflection White background */
    background-color: #F8F8F8;
    color: #333;
    transition: border-color 0.3s ease;
}

.spark-textarea:focus {
    outline: none;
    /* ACCESSIBILITY: Darker blue for better contrast - WCAG AA compliant
       Contrast ratio: 3.29:1 against white background (meets 3:1 minimum for UI components) */
    border-color: #4A90E2;
    background-color: #fff;
}

.spark-textarea::placeholder {
    color: #999;
    font-style: italic;
    font-weight: 300;
}

/* Photo container */
.photo-container {
    text-align: center;
}

.photo-prompt {
    font-family: 'Lato', sans-serif;
    font-size: 1.05rem;
    line-height: 1.6;
    color: #666;
    font-weight: 300;
    font-style: italic;
}

/* Responsive adjustments for pause flow */
@media (max-width: 600px) {
    .pause-flow-title {
        font-size: 1.8rem;
    }

    .pause-flow-text,
    .pause-flow-question {
        font-size: 1rem;
    }

    .option-item {
        padding: 15px 20px;
        font-size: 1rem;
    }

    .btn-dreamy {
        padding: 14px 32px;
        font-size: 1.05rem;
    }

    .progress-indicator {
        gap: 15px;
    }

    /* UX: Maintain readability of progress step names on mobile */
    .progress-step-name {
        font-size: 0.8rem;  /* Slightly reduced but still readable on small screens */
    }
}

/* ============================================
   Previous Pauses / Archive Page Styles
   ============================================ */

/* Streaks header with title and discreet archive button */
.streaks-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

/* Discreet view archive button next to streak bar title */
/* Brand: Minimal, unobtrusive design following brand guidelines for clean interfaces */
.view-archive-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 6px 10px;
    font-size: 1.1rem;
    color: #6B8E23;  /* Mindful Green */
    transition: all 0.2s ease;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.view-archive-btn:hover {
    background: rgba(107, 142, 35, 0.1);  /* Subtle Mindful Green tint */
    transform: translateY(-1px);
}

.view-archive-btn:active {
    transform: translateY(0);
}

.archive-icon {
    font-size: 1rem;
}

/* Pauses list container */
.pauses-list-container {
    margin-top: 32px;
}

/* Loading and empty state messages */
/* Brand: Gentle, encouraging tone following persona guidelines */
.pauses-loading-message,
.no-pauses-message {
    text-align: center;
    padding: 40px 20px;
    color: #666;
    font-family: 'Lato', sans-serif;
    font-size: 1.1rem;
    font-style: italic;
}

.no-pauses-message p {
    margin-bottom: 12px;
    color: #6B8E23;  /* Mindful Green */
    font-size: 1.2rem;
    font-weight: 400;
}

.no-pauses-subtitle {
    font-size: 1rem !important;
    color: #666 !important;
    font-weight: 300 !important;
    line-height: 1.6;
}

/* Error message styling */
.error-message {
    text-align: center;
    padding: 20px;
    color: #d32f2f;
    font-family: 'Lato', sans-serif;
    font-size: 1rem;
}

/* Pauses list */
.pauses-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 40px;
}

/* Individual pause item */
/* Brand: Clean, uncluttered cards with ample white space */
.pause-item {
    background: #f8f8f8;  /* Reflection White from brand palette */
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(90, 155, 155, 0.08);
    transition: box-shadow 0.2s ease;
}

.pause-item:hover {
    box-shadow: 0 4px 12px rgba(90, 155, 155, 0.12);
}

/* Pause item header with title and date */
.pause-item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
    gap: 16px;
}

/* Title container with heart icon */
.pause-title-container {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.pause-item-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    color: #6B8E23;  /* Mindful Green */
    margin: 0;
}

/* Heart icon for liked pauses */
/* Brand: Gentle visual indicator without overwhelming the design */
.pause-liked-icon {
    font-size: 1rem;
    line-height: 1;
}

/* Date display */
.pause-item-date {
    font-family: 'Lato', sans-serif;
    font-size: 0.9rem;
    color: #999;
    white-space: nowrap;
    font-style: italic;
}

/* Pause content area */
.pause-item-content {
    margin-top: 12px;
}

/* Text content styling */
/* Brand: Clean, readable text following brand typography */
.pause-content-text {
    font-family: 'Open Sans', sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: #333;
    margin: 0;
    white-space: pre-wrap;  /* Preserve line breaks from user input */
}

/* Image content styling */
/* Brand: Natural, soft imagery with rounded corners */
.pause-content-image {
    width: 100%;
    max-width: 500px;
    height: auto;
    border-radius: 8px;
    display: block;
    margin: 8px auto 0 auto;
    box-shadow: 0 2px 8px rgba(90, 155, 155, 0.08);
}

/* Private content styling */
/* Brand: Gentle acknowledgment without judgment, following persona guidelines */
.pause-content-private {
    font-family: 'Lato', sans-serif;
    font-size: 0.95rem;
    font-style: italic;
    color: #999;
    margin: 0;
}

/* Responsive adjustments for previous pauses page */
@media (max-width: 600px) {
    .streaks-header {
        flex-direction: row;
        gap: 8px;
    }

    .view-archive-btn {
        padding: 4px 8px;
        font-size: 1rem;
    }

    .pause-item {
        padding: 16px;
    }

    .pause-item-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .pause-item-title {
        font-size: 1.1rem;
    }

    .pause-item-date {
        font-size: 0.85rem;
    }

    .pause-content-text {
        font-size: 0.95rem;
    }
}

/* ============================================
   Email Verification Screen Styles
   ============================================
   Brand-aligned styles for email verification states.
   Uses Spark Yellow, Mindful Green, and brand typography.
   ============================================ */

/* Verification state containers */
.verification-state {
    text-align: center;
    padding: 20px;
}

/* Verification icon styling */
.verification-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 24px auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: bold;
}

/* Loading state icon - uses Mindful Green with spinner animation */
.verification-icon.loading {
    background: #ADD8E6; /* Calm Blue for loading state */
    color: #6B8E23; /* Mindful Green text */
}

/* Success state icon - uses Spark Yellow for celebration */
.verification-icon.success {
    background: #FFD700; /* Spark Yellow */
    color: #fff;
}

/* Error state icon - gentle Archive Grey, not harsh red */
.verification-icon.error {
    background: #A9A9A9; /* Archive Grey */
    color: #fff;
}

/* Spinner animation for loading state */
.spinner {
    border: 3px solid rgba(107, 142, 35, 0.2); /* Mindful Green with transparency */
    border-top: 3px solid #6B8E23; /* Mindful Green */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Verification message text */
.verification-message {
    font-family: 'Open Sans', sans-serif;
    font-size: 1rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 16px;
    /* Brand: Ample white space for calm, uncluttered feel */
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

/* Additional note text - softer styling */
.verification-note {
    font-family: 'Lato', sans-serif;
    font-size: 0.95rem;
    font-style: italic;
    color: #666;
    line-height: 1.6;
    margin-bottom: 8px;
    /* Brand: Clean, spacious layout */
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

/* Action buttons container for error state */
.verification-actions {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

/* Responsive adjustments for verification screen */
@media (max-width: 600px) {
    .verification-icon {
        width: 60px;
        height: 60px;
        font-size: 2rem;
    }

    .spinner {
        width: 30px;
        height: 30px;
        border-width: 2px;
    }

    .verification-message {
        font-size: 0.95rem;
    }

    .verification-note {
        font-size: 0.9rem;
    }
}

/* ============================================
   Onboarding Flow Styles
   Brand: Soft, welcoming, brand-aligned introduction
   ============================================ */

/* Onboarding container - provides centered, clean layout */
.onboarding-container {
    max-width: 550px;
    padding: 50px 40px;
}

/* Large emoji icon at top of each onboarding screen */
/* Brand: Playful, warm, non-intimidating visual element */
.onboarding-icon {
    font-size: 4rem;
    margin-bottom: 24px;
    line-height: 1;
}

/* Onboarding subtitle - descriptive text below heading */
/* Persona: Warm, gentle, inviting language */
.onboarding-subtitle {
    font-family: 'Open Sans', sans-serif;
    font-size: 1.15rem;
    line-height: 1.6;
    color: #555;
    margin-bottom: 30px;
    font-weight: 300;
}

/* Onboarding content area - main text and features */
.onboarding-content {
    margin: 32px 0;
}

/* Onboarding text - body copy */
/* Persona: Uses sensory language, gentle invitations */
.onboarding-text {
    font-family: 'Lato', sans-serif;
    font-size: 1.1rem;
    line-height: 1.8;
    color: #333;
    margin-bottom: 20px;
    font-weight: 300;
}

/* Challenge step - individual step in micro-challenge */
.challenge-step {
    margin-bottom: 32px;
    padding: 20px;
    background-color: #F8F8F8;  /* Reflection White */
    border-radius: 12px;
    border-left: 4px solid #ADD8E6;  /* Calm Blue accent */
}

/* Step label - "Step 1: Notice" etc. */
.step-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: #6B8E23;  /* Mindful Green */
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
}

/* Challenge text - descriptive text for each step */
/* Persona: Sensory, gentle, no pressure */
.challenge-text {
    font-family: 'Lato', sans-serif;
    font-size: 1.05rem;
    line-height: 1.7;
    color: #333;
    font-weight: 300;
}

/* Ritual features - list of app features on final screen */
.ritual-features {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 28px 0;
}

/* Individual ritual feature */
.ritual-feature {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    background-color: #F8F8F8;  /* Reflection White */
    border-radius: 10px;
    transition: transform 0.2s ease;
}

.ritual-feature:hover {
    transform: translateX(5px);
}

/* Ritual emoji icon */
.ritual-emoji {
    font-size: 2rem;
    min-width: 40px;
    text-align: center;
}

/* Ritual text content */
.ritual-text {
    flex: 1;
    text-align: left;
}

.ritual-text strong {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.05rem;
    color: #6B8E23;  /* Mindful Green */
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
}

.ritual-text p {
    font-family: 'Open Sans', sans-serif;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #555;
    margin: 0;
    font-weight: 300;
}

/* Onboarding skip/secondary options */
.onboarding-skip {
    margin-top: 24px;
    text-align: center;
}

/* Onboarding navigation - back/forward buttons */
.onboarding-navigation {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* Responsive adjustments for onboarding */
@media (max-width: 600px) {
    .onboarding-container {
        padding: 40px 24px;
    }

    .onboarding-icon {
        font-size: 3rem;
    }

    .onboarding-subtitle {
        font-size: 1.05rem;
    }

    .onboarding-text,
    .challenge-text {
        font-size: 1rem;
    }

    .challenge-step {
        padding: 16px;
    }

    .ritual-emoji {
        font-size: 1.5rem;
        min-width: 32px;
    }

    .ritual-text strong {
        font-size: 1rem;
    }

    .ritual-text p {
        font-size: 0.9rem;
    }
}

/* ============================================
   Footer Styles - Persistent footer on all pages
   ============================================ */

/* Footer container - Brand: minimal, unobtrusive design */
.app-footer {
    width: 100%;
    max-width: 600px;
    padding: 16px 20px;
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.85rem;
    color: #666;
    margin-top: 0px;
    border-radius: 0 0 20px 20px;
}

/* Footer for app screens inside container */
.footer-in-screen {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid rgba(107, 142, 35, 0.15);
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.85rem;
    color: #666;
}

/* Footer links - Brand: Mindful Green for links */
.app-footer a,
.footer-in-screen a,
.footer-in-screen .footer-link {
    color: #5a7a1e;  /* Mindful Green */
    text-decoration: none;
    margin: 0 8px;
    transition: color 0.2s ease;
    background: none;
    border: none;
    font-family: 'Open Sans', sans-serif;
    font-size: inherit;
    cursor: pointer;
    padding: 0;
}

.app-footer a:hover,
.footer-in-screen a:hover,
.footer-in-screen .footer-link:hover {
    color: #496319;  /* Slightly darker green on hover */
    text-decoration: underline;
}

/* Footer separator between links */
.footer-separator {
    color: #496319;
    margin: 0 4px;
}

/* Responsive footer adjustments */
@media (max-width: 600px) {
    .app-footer,
    .footer-in-screen {
        font-size: 0.8rem;
        padding: 12px 16px;
    }

    .app-footer a,
    .footer-in-screen a {
        margin: 0 4px;
    }
}