/* =========================================================================== MOBILE PARITY — μία οθόνη, δύο υλοποιήσεις Αυτό το αρχείο κρατά ΟΛΕΣ τις οπτικές αποκλίσεις του web κάτω από τα 768px, ώστε το κινητό web να διαβάζεται σαν την εφαρμογή iOS/Android και όχι σαν στριμωγμένο desktop. ── ΓΙΑΤΙ ΕΝΑ ΑΡΧΕΙΟ ΚΑΙ ΟΧΙ ΣΚΟΡΠΙΑ ΣΤΑ COMPONENTS ───────────────────────── Τα components εδώ ενίοτε εγχέουν τα δικά τους styles (KPICard.js). Για την ΠΑΡΙΤΗΤΑ όμως ισχύει το αντίστροφο: όταν αλλάξει κάτι στην εφαρμογή, θέλεις ΕΝΑ σημείο να ανοίξεις και ΕΝΑ μοτίβο να ακολουθήσεις. Σκορπισμένοι κανόνες σε έξι αρχεία σημαίνουν έξι ευκαιρίες να γραφτεί η επόμενη αλλαγή με άλλη μορφολογία — που είναι ακριβώς το πρόβλημα που λύνει αυτό το αρχείο. ── Ο ΚΑΝΟΝΑΣ, ΤΕΣΣΕΡΙΣ ΓΡΑΜΜΕΣ ──────────────────────────────────────────── 1. Κάθε μπλοκ ονομάζει ΤΟ ΑΡΧΕΙΟ ΤΗΣ ΕΦΑΡΜΟΓΗΣ που καθρεφτίζει. Αν δεν υπάρχει τέτοιο αρχείο, ο κανόνας δεν ανήκει εδώ. 2. Κάθε τιμή που αντιγράφεται από το `mobile/src/theme.ts` γράφεται ως custom property στο :root παρακάτω, ΜΕ το όνομα του token. Ποτέ literal μέσα στον κανόνα — αλλιώς το επόμενο sync είναι αναζήτηση για hex. 3. Ένα breakpoint: 767.98px. Είναι το `md` του Tailwind μείον ένα subpixel, δηλαδή ακριβώς εκεί που κρύβεται το sidebar και ο μήνας κατεβαίνει στο περιεχόμενο. Δεύτερο breakpoint σημαίνει τρίτη σύνθεση να συντηρείς. 4. Τα hooks στο markup είναι ΠΡΟΣΘΕΤΙΚΕΣ κλάσεις (`js-*` δεν χρησιμοποιείται· χρησιμοποιούμε σημασιολογικά ονόματα). Καμία υπάρχουσα κλάση δεν αφαιρείται — έτσι το desktop αποδεικνύεται αμετάβλητο με `git diff`. 🔴 5. ΚΑΘΕ ΚΑΝΟΝΑΣ ΠΟΥ ΠΑΤΑΕΙ ΠΑΝΩ ΣΕ UTILITY ΘΕΛΕΙ ΕΞΕΙΔΙΚΕΥΣΗ > (0,1,0). Ο κανόνας 4 έχει τίμημα που κόστισε ήδη: αφού οι utilities του Tailwind ΜΕΝΟΥΝ στο στοιχείο, ένας δικός μας κανόνας με μία κλάση έχει ΙΣΗ εξειδίκευση με το `.gap-3` ή το `.ml-auto` — και σε ισοπαλία αποφασίζει η σειρά. Το Tailwind CDN γράφει το