/* MEW Regulations App — Arabic UI & mobile polish */

@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&display=swap');

body {
    font-family: 'Tajawal', system-ui, sans-serif;
}

/* Smoother Arabic numerals in mono contexts */
.font-mono {
    font-variant-numeric: tabular-nums;
}

/* Mobile nav */
#mobile-nav {
    animation: slideDown 0.2s ease-out;
}

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

#mobile-nav a {
    display: block;
    padding: 0.625rem 0.75rem;
    border-radius: 0.5rem;
    transition: background-color 0.15s;
}

#mobile-nav a:hover,
#mobile-nav a:focus {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Checklist progress ring on cards */
.checklist-progress-track {
    height: 4px;
    background: #e5e7eb;
    border-radius: 9999px;
    overflow: hidden;
}

.checklist-progress-fill {
    height: 100%;
    border-radius: 9999px;
    transition: width 0.3s ease;
}

/* Install banner */
#pwa-install-banner {
    animation: slideUp 0.25s ease-out;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(1rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Safe area for notched phones */
@supports (padding: max(0px)) {
    body {
        padding-bottom: max(0px, env(safe-area-inset-bottom));
    }
}

/* Regulation content readability */
.regulation-content {
    line-height: 1.75;
    word-break: break-word;
}