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

body .rounded-lg,
body .rounded-xl { border-radius: var(--r-field); }
body .rounded-2xl { border-radius: var(--r-row); }
body .rounded-3xl { border-radius: var(--r-card); }

body {
    font-family: 'Outfit', sans-serif;
    background-color: var(--bg-main);
    color: var(--slate-dark);
    /* Same reasoning as index.html: padding here rather than a p-4
       utility so it can absorb the iPhone safe-area insets. */
    padding:
        calc(1rem + env(safe-area-inset-top))
        calc(1rem + env(safe-area-inset-right))
        calc(1rem + env(safe-area-inset-bottom))
        calc(1rem + env(safe-area-inset-left));
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

.tablet-card {
    background: white;
    border: 1px solid #E2E8F0;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.04);
    border-radius: var(--r-card);
}

.row-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-radius: var(--r-row);
    border: 1px solid #E2E8F0;
    background: white;
}

input {
    padding: 0.6rem 0.9rem;
    border-radius: var(--r-field);
    border: 1px solid #E2E8F0;
    font-size: 0.8rem;
    outline: none;
}

input:focus {
    box-shadow: 0 0 0 2px #FBBF24;
}

/* --- Mobile / iOS ------------------------------------------------ */
@media (max-width: 767px) {
    /* Below 16px iOS zooms the viewport on focus and never zooms back. */
    input, select, textarea { font-size: 16px !important; }
    input { padding: 0.7rem 0.9rem; }

    /* Apple's minimum comfortable touch target is 44pt. */
    .icon-btn {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .row-item button { min-width: 40px; min-height: 40px; }
}