/* metafy · phone fit — loaded last. Keeps every screen the same size on every phone:
 * no page may be wider than the screen (a wider page made the app zoom out, so text
 * looked smaller on some screens), the browser may not enlarge text on its own, and
 * sizes scale smoothly from small phones (320px) to big phones and tablets. */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

@media (max-width: 860px) {
    html, body { max-width: 100%; overflow-x: hidden; overflow-x: clip; }
    body { font-size: 15px; line-height: 1.55; }

    /* Nothing inside a screen may push it wider than the phone */
    .ra-main, .ra-auth, .lp { width: 100%; max-width: 100%; }
    .ra-main * { min-width: 0; }
    .ra-main { overflow-wrap: anywhere; word-break: normal; }
    .ra-main img, .ra-main video, .ra-main canvas, .ra-main iframe, .ra-main svg { max-width: 100%; height: auto; }
    .ra-main .ra-thumb, .ra-main .mf-ico svg, .ra-main .mf-chev, .ra-main input[type=checkbox], .ra-main input[type=radio] { max-width: none; }
    .ra-main pre, .ra-main code { white-space: pre-wrap; word-break: break-word; }
    .ra-main table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .ra-main input, .ra-main select, .ra-main textarea { max-width: 100%; }
    .ra-main .ra-inline { flex-wrap: wrap; }
    .ra-main .ra-inline > * { flex: 1 1 200px; }
    .ra-main .ra-actions { flex-wrap: wrap; }
    .ra-main .lp-pricing, .ra-main .lp-pricing--app { grid-template-columns: minmax(0, 1fr); }
    .ra-main .ra-grid2, .ra-main .ra-edit { grid-template-columns: minmax(0, 1fr); }
    .ra-main .ra-source { flex-wrap: wrap; }
    .ra-main .ra-source > div:first-child { flex: 1 1 100%; }

    /* One title per screen: the header shows it, so the big page heading is hidden
       (the greeting on Home stays) */
    .ra-shell--app .ra-main .ra-h1:not(.ra-h1--keep) { display: none; }
    .ra-shell--app .ra-main .ra-h1--keep { font-size: clamp(20px, 5.6vw, 25px); line-height: 1.25; margin: 2px 0 14px; }

    /* Same spacing and type scale on every screen */
    .ra-shell--app .ra-main { padding: 14px clamp(12px, 3.8vw, 20px) calc(96px + env(safe-area-inset-bottom)); }
    .ra-card { padding: clamp(14px, 4.2vw, 20px); margin-bottom: 14px; }
    .ra-card-head { font-size: clamp(15px, 4.2vw, 17px); margin-bottom: 12px; }
    .ra-stat b { font-size: clamp(20px, 6.4vw, 27px); }
    .ra-stat span, .ra-small, .ra-item-meta { font-size: 13px; }
    .ra-kpis b { font-size: clamp(18px, 5.6vw, 23px); }
    .ra-alert { font-size: 14px; padding: 12px 14px; margin-bottom: 14px; }
    .ra-btn { font-size: 14.5px; }
    .mf-top-title { font-size: clamp(17px, 4.8vw, 20px); }
    .ra-tabbar > a > small { font-size: clamp(10px, 2.8vw, 11.5px); }
    .ra-tabbar > a > i { width: clamp(44px, 14vw, 60px); }
    .mf-profile-txt b { font-size: clamp(17px, 4.8vw, 20px); }
}

/* Small phones (320–359px) */
@media (max-width: 359px) {
    body { font-size: 14px; }
    .ra-stats { gap: 8px; }
    .ra-stat { padding: 12px; }
    .mf-row { padding: 12px; gap: 10px; }
    .mf-ico { width: 32px; height: 32px; }
    .mf-plan { padding: 14px; }
}

/* Big phones in landscape, foldables and small tablets: keep the app a comfortable width */
@media (min-width: 600px) and (max-width: 860px) {
    .ra-shell--app .ra-main { max-width: 720px; margin: 0 auto; }
    .ra-top { padding-left: max(14px, calc((100% - 720px) / 2)); padding-right: max(14px, calc((100% - 720px) / 2)); }
    .ra-tabbar { padding-left: max(6px, calc((100% - 640px) / 2)); padding-right: max(6px, calc((100% - 640px) / 2)); }
    .ra-shell--app .ra-main .ra-grid2 { grid-template-columns: 1fr 1fr; }
}