/* GUI — κέλυφος και κοινά στοιχεία (GUI_SPEC §1-§3, §6). Φάση Π1. * * ΚΑΝΟΝΕΣ ΤΟΥ ΑΡΧΕΙΟΥ: * 1. Καμία τιμή χρώματος εδώ — μόνο `var(--…)` από το `tokens.css` (το επιβάλλει test). * 2. Λογικές ιδιότητες παντού (`margin-inline`, `inset-inline-end`): η αραβικά/εβραϊκά έκδοση (§B6) * αλλάζει ΜΟΝΟ το `dir` του — κανένα CSS δεν ξαναγράφεται. * 3. Ό,τι είναι ζωντανό αναπνέει, ό,τι είναι στατικό δεν κουνιέται· `prefers-reduced-motion` = όλα off. */ *, *::before, *::after { box-sizing: border-box; } /* Το `hidden` του HTML πρέπει να κερδίζει: οι δικοί μας κανόνες `#id { display: … }` έχουν μεγαλύτερη ειδικότητα από τον προεπιλεγμένο κανόνα του browser και θα εμφάνιζαν στοιχείο που ζητήσαμε να κρυφτεί. */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: var(--fs-m); line-height: var(--lh-text); -webkit-font-smoothing: antialiased; } /* Οι αριθμοί ευθυγραμμίζονται σε στήλη — ένα SoC που «χοροπηδά» καθώς ανανεώνεται φαίνεται σαν σφάλμα. */ .num, .mono, table td, input, .metric { font-variant-numeric: tabular-nums; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-s); } /* ---------------------------------------------------------------- top bar (mockup «Αιγαίο») */ #top { display: flex; align-items: center; gap: var(--sp-7); padding: var(--sp-5) var(--sp-8); background: var(--card); border-block-end: 1px solid var(--line); position: sticky; inset-block-start: 0; z-index: 20; } .brand { display: flex; align-items: center; gap: var(--sp-4); font-weight: var(--fw-bold); font-size: 16px; letter-spacing: .01em; color: var(--ink); white-space: nowrap; } .brand:hover { text-decoration: none; } .brand svg { flex: none; } /* Το σήμα παίρνει χρώμα από τα tokens — το `icons.js` δεν ξέρει ούτε ένα hex. */ .mark-bg { fill: var(--accent); } .mark-fg { stroke: var(--on-accent); fill: none; } .mark-fg.solid { fill: var(--on-accent); stroke: none; } .tabs { display: flex; gap: var(--sp-1); } .tabs a { padding: 7px 13px; border-radius: var(--r-s); font-size: var(--fs-s); color: var(--muted); white-space: nowrap; transition: background var(--t) var(--ease), color var(--t) var(--ease); } .tabs a:hover { background: var(--hover); color: var(--ink); text-decoration: none; } .tabs a.active { background: var(--accent-soft); color: var(--ink); font-weight: var(--fw-semi); } .spacer { flex: 1; } /* Κουμπί εικονιδίου (θέμα, ενέργειες κεφαλίδας) — 34×34 όπως στο mockup. */ .icon-btn { display: flex; align-items: center; justify-content: center; width: var(--ctl); height: var(--ctl); /* ΧΩΡΙΣ ΑΥΤΟ ΤΟ ΜΗΔΕΝ το γενικό `button` έβαζε padding 8px 18px: το κουτί έμενε 34px, το περιεχόμενο γινόταν 0 και το εικονίδιο εξαφανιζόταν. Φάνηκε μόνο σε αληθινό browser (01/09). */ padding: 0; flex: none; border-radius: var(--r-s); border: 1px solid var(--line); background: none; color: var(--muted); cursor: pointer; transition: color var(--t) var(--ease), border-color var(--t) var(--ease); } .icon-btn:hover { color: var(--ink); border-color: var(--muted); } .icon-btn svg { width: 17px; height: 17px; flex: none; display: block; } .avatar { width: var(--ctl); height: var(--ctl); flex: none; padding: 0; /* ίδιος λόγος με το .icon-btn */ border: none; border-radius: var(--r-pill); background: var(--accent-dim); color: var(--on-accent); font-family: inherit; font-weight: var(--fw-semi); font-size: 14px; cursor: pointer; } /* Επιλογέας πελάτη: μοιάζει με chip, είναι