/* ===========================================================================
   ΚΛΙΜΑΚΑ ΔΙΕΠΑΦΗΣ ΣΤΑ ΜΕΓΑΛΑ ΚΙΝΗΤΑ

   ── ΤΟ ΠΡΟΒΛΗΜΑ, ΜΕΤΡΗΜΕΝΟ ────────────────────────────────────────────────

   Στο iPhone 16 Pro Max τα γράμματα «φαίνονται μικρά», ενώ στο 16 Pro είναι
   μια χαρά. Και τα δύο τηλέφωνα έχουν DPR 3 και σχεδόν ίδιο ppi, οπότε ένα
   γράμμα 26px είναι ΤΟ ΙΔΙΟ ΜΕΓΑΛΟ σε χιλιοστά και στα δύο. Μετρημένα στη
   σελίδα σύνδεσης:

       τίτλος     26px  /  26px      υπότιτλος  13px  /  13px
       κουμπί     15px  /  15px      βοήθεια    12px  /  12px

   Αυτό που αλλάζει είναι το ΠΛΑΤΟΣ: 402 έναντι 440 CSS px. Το ίδιο κείμενο
   πιάνει 6,47% της οθόνης στο Pro και 5,91% στο Pro Max. Η αίσθηση είναι
   σωστή· δεν είναι απόλυτη, είναι αναλογική. Μεγαλύτερος καμβάς, ίδιο μελάνι.

   ── Η ΛΥΣΗ ────────────────────────────────────────────────────────────────

   Ορίζουμε ΠΛΑΤΟΣ ΣΧΕΔΙΑΣΗΣ 402px — το 16 Pro, που είναι και η συσκευή στην
   οποία κρίθηκε η σύνθεση — και σε φαρδύτερα κινητά μεγεθύνουμε ΤΑ ΠΑΝΤΑ
   αναλογικά. Επαληθευμένο: στα 440 με ×1,09 η κάρτα πιάνει 90,3% της οθόνης
   και στα 402 χωρίς κλίμακα 90,1%, με ύψος σελίδας 2620 έναντι 2622 device px.
   Ίδια σύνθεση, μεγαλύτερη.

   ── ΓΙΑΤΙ `zoom` ΚΑΙ ΟΧΙ ΡΙΖΑ ΣΕ rem ──────────────────────────────────────

   Επειδή το χρώμα και τα μεγέθη εδώ γράφονται σε px — Tailwind utilities με
   ρητές τιμές (`text-[11px]`) και inline styles μέσα στα components. Μια ρίζα
   σε rem δεν τα αγγίζει ΚΑΘΟΛΟΥ: θα μεγάλωνε μόνο ό,τι τυχαία ήταν σε rem και
   θα διέλυε τις αναλογίες αντί να τις κρατήσει. Το `zoom` πιάνει κάθε μονάδα
   μήκους, ό,τι κι αν την έγραψε.

   ── ΓΙΑΤΙ ΒΗΜΑΤΑ ΚΑΙ ΟΧΙ ΣΥΝΕΧΗΣ ΤΙΜΗ ─────────────────────────────────────

   Το προφανές θα ήταν `zoom: clamp(1, 100vw / 402, 1.12)`. Δοκιμάστηκε στον
   browser και ΑΠΟΡΡΙΠΤΕΤΑΙ: το `zoom` δέχεται μόνο σκέτο αριθμό ή ποσοστό, όχι
   `calc()` ούτε `clamp()`. Το `CSS.supports('zoom','clamp(...)')` επιστρέφει
   false. Τρία βήματα καλύπτουν όλο το φάσμα των κινητών, και η διαφορά μεταξύ
   1,05 και 1,09 δεν είναι ορατή ούτως ή άλλως.

   ── ΤΟ ΕΠΙΚΙΝΔΥΝΟ ΣΗΜΕΙΟ, ΕΛΕΓΜΕΝΟ ────────────────────────────────────────

   Αν τα media queries έβλεπαν το ΖΟΥΜΑΡΙΣΜΕΝΟ πλάτος, ο κανόνας θα έσβηνε
   μόλις εφαρμοζόταν και θα ξανάναβε μόλις έσβηνε — ατέρμονη ταλάντωση. Δεν
   συμβαίνει: με `zoom: 1.09` στα 440, το `innerWidth` μένει 440 και το
   `(min-width: 430px)` συνεχίζει να ταιριάζει. Το `zoom` αλλάζει το πώς
   ΣΤΡΩΝΕΤΑΙ το περιεχόμενο, όχι το πόσο μετράει το παράθυρο.

   Οροφή 1,12: πάνω από το φάσμα των κινητών θέλεις ΠΕΡΙΣΣΟΤΕΡΟ περιεχόμενο,
   όχι μεγαλύτερο. Πάνω από 768px δεν ισχύει τίποτα από εδώ.

   🔴 ── Η ΠΑΓΙΔΑ, ΚΑΙ ΓΙΑΤΙ ΥΠΑΡΧΕΙ ΤΟ --ui-scale ──────────────────────────

   ΤΟ `zoom` ΔΕΝ ΑΓΓΙΖΕΙ ΤΙΣ ΜΟΝΑΔΕΣ VIEWPORT. Ένα `100dvh` λύνεται πάνω στο
   ΠΡΑΓΜΑΤΙΚΟ ύψος της οθόνης και ΜΕΤΑ πολλαπλασιάζεται από το zoom. Σε οθόνη
   956px με ×1,09 ζωγραφίζεται 1042px — ξεχειλίζει κατά 86px.

   Αυτό δεν είναι θεωρητικό: το κέλυφος είναι `h-[100dvh] overflow-hidden` με
   το tabbar τελευταίο παιδί μιας στήλης flex. Τα 86px έπεσαν ακριβώς πάνω
   του και ΤΟ ΜΕΝΟΥ ΤΟΥ ΚΙΝΗΤΟΥ ΕΞΑΦΑΝΙΣΤΗΚΕ. Καμία δοκιμή δεν το έπιασε:
   το markup ήταν σωστό, το CSS ήταν σωστό, απλώς η σελίδα ήταν ψηλότερη από
   την οθόνη και δεν κυλούσε.

   Ο κανόνας, χωρίς εξαιρέσεις:

       ΚΑΘΕ μήκος σε vh/dvh/vw/vmin/vmax ΔΙΑΙΡΕΙΤΑΙ με το --ui-scale.
           height: calc(100dvh / var(--ui-scale, 1))
           max-width: calc(85vw / var(--ui-scale, 1))

   Το fallback `1` είναι αυτό που κρατά το desktop και τα μικρά κινητά ακριβώς
   όπως ήταν: εκεί το --ui-scale δεν δηλώνεται ποτέ.

   Το tests/ui/viewportUnits.test.js το επιβάλλει μηχανικά.
   =========================================================================== */

/* Το ύψος του κελύφους. Ήταν `h-[100dvh]` του Tailwind σε τρία σημεία και
   έπρεπε να πάψει να είναι utility: το utility δεν μπορεί να διαιρέσει. */
.app-vh {
    height: calc(100dvh / var(--ui-scale, 1));
}

/* 403–428: iPhone 14/15/16 Plus, Pixel 8/9, τα περισσότερα 6,7" Android */
@media (min-width: 403px) and (max-width: 767.98px) {
    :root { zoom: 1.05; --ui-scale: 1.05; }
}

/* 429–479: iPhone 15/16 Pro Max (430 / 440), Pixel 9 Pro XL (448) */
@media (min-width: 429px) and (max-width: 767.98px) {
    :root { zoom: 1.09; --ui-scale: 1.09; }
}

/* 480+: φάμπλετ και ανοιγμένα foldables, μέχρι την οροφή */
@media (min-width: 480px) and (max-width: 767.98px) {
    :root { zoom: 1.12; --ui-scale: 1.12; }
}