/* Οθόνες σύνδεσης / χωρίς πρόσβαση (runtime). Ίδια γλώσσα με την εφαρμογή: navy μάστιγα, τετράγωνες γωνίες,
   λεπτές γραμμές, PF DIN Max Wide για τίτλους και Aeonik Pro για κείμενο (εξάγονται από το artifact στο build). */
@font-face { font-family: "PF DIN Max Wide"; src: url("/fonts/dinRegular.ttf") format("truetype") ; font-weight: 400; font-display: swap; }
@font-face { font-family: "PF DIN Max Wide"; src: url("/fonts/dinMedium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Aeonik Pro"; src: url("/fonts/aeoRegular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Aeonik Pro"; src: url("/fonts/aeoMedium.ttf") format("truetype"); font-weight: 500; font-display: swap; }

/* Μέχρι να ολοκληρωθεί η σύνδεση η εφαρμογή δεν φαίνεται καθόλου, ούτε το άδειο πλαίσιό της: μόνο οι οθόνες του runtime.
   Το runtime βάζει την κλάση hs-ready στο <html> όταν ο server επιβεβαιώσει την πρόσβαση (βλ. boot στο claude-runtime.js).
   opacity (όχι visibility/display): δεν ακυρώνεται από στοιχεία της εφαρμογής και δεν αλλάζει τις διαστάσεις της. */
html:not(.hs-ready), html:not(.hs-ready) body { background: #F2F2F2 !important; }
html:not(.hs-ready) body > :not(.hs-auth) { opacity: 0 !important; pointer-events: none !important; }

.hs-auth {
  position: fixed; inset: 0; z-index: 2147483000; overflow: auto;
  background: #F2F2F2; color: #0E0F23;
  font: 400 14px/1.5 "Aeonik Pro", "Helvetica Neue", Arial, system-ui, sans-serif;
}
.hs-auth .hs-wrap { max-width: 1440px; margin: 0 auto; padding: 0 16px; box-sizing: border-box; }
.hs-auth .hs-mast { background: #0E0F23; height: 64px; display: flex; align-items: center; }
.hs-auth .hs-mast .hs-wrap { width: 100%; display: flex; align-items: center; }
.hs-auth .hs-mast img { display: block; height: 20px; width: auto; }
.hs-auth .hs-main { display: flex; justify-content: center; padding-top: 9vh; padding-bottom: 48px; }
.hs-auth .hs-card { width: 100%; max-width: 420px; background: #fff; border-top: 2px solid #0E0F23; padding: 28px 28px 30px; box-sizing: border-box; }
.hs-auth h1 { font: 400 26px/1.15 "PF DIN Max Wide", "Helvetica Neue", Arial, sans-serif; text-transform: uppercase; letter-spacing: .02em; margin: 6px 0 12px; }
.hs-auth .hs-card > h1:first-child { margin-top: 0; }   /* τίτλος πρώτος στην κάρτα: πάνω κενό = το padding της κάρτας */
.hs-auth p { margin: 0 0 18px; color: #5F6178; }
.hs-auth .hs-label { display: block; font: 400 9px/1.2 "PF DIN Max Wide", Arial, sans-serif; text-transform: uppercase; letter-spacing: .1em; color: #5F6178; margin-bottom: 6px; }
.hs-auth .hs-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 42px; border: 1px solid #0E0F23; background: #0E0F23; color: #F2F2F2; font: 500 13px "Aeonik Pro", Arial, sans-serif; letter-spacing: .02em; cursor: pointer; border-radius: 0; }
.hs-auth .hs-btn:hover { background: #24264a; }
.hs-auth .hs-btn.ghost { background: #fff; color: #0E0F23; }
.hs-auth .hs-btn.ghost:hover { background: #E9EEF4; }
.hs-auth .hs-g { display: inline-grid; place-items: center; width: 20px; height: 20px; background: #fff; color: #0E0F23; font: 700 12px Arial, sans-serif; }
.hs-auth .hs-or { display: flex; align-items: center; gap: 10px; margin: 18px 0; color: #5F6178; font-size: 12px; }
.hs-auth .hs-or::before, .hs-auth .hs-or::after { content: ""; flex: 1; border-top: 1px solid #D6D9E1; }
.hs-auth .hs-form label { display: block; margin-bottom: 14px; }
.hs-auth .hs-form input { width: 100%; height: 38px; box-sizing: border-box; border: 1px solid #D6D9E1; padding: 0 10px; font: 400 14px "Aeonik Pro", Arial, sans-serif; border-radius: 0; background: #fff; color: #0E0F23; }
.hs-auth .hs-form input:focus { outline: none; border-color: #0E0F23; }
.hs-auth .hs-link { margin-top: 10px; background: none; border: 0; padding: 0; color: #5F6178; text-decoration: underline; cursor: pointer; font: 400 12px "Aeonik Pro", Arial, sans-serif; }
.hs-auth .hs-err { margin-top: 16px; padding: 8px 10px; background: #F8E3DE; color: #B4412F; font-size: 13px; }
.hs-auth .hs-acct { color: #0E0F23; font-weight: 500; }
.hs-auth .hs-wait { margin: 8px 0 0; }
@media (prefers-color-scheme: dark) {
  .hs-auth { background: #0E0F23; color: #F2F2F2; }
  .hs-auth .hs-mast { background: #080916; }
  .hs-auth .hs-card { background: #15172E; border-top-color: #F2F2F2; }
  .hs-auth p, .hs-auth .hs-label, .hs-auth .hs-or, .hs-auth .hs-link { color: #9C9EB6; }
  .hs-auth .hs-btn { background: #D2E9FA; color: #0E0F23; border-color: #D2E9FA; }
  .hs-auth .hs-btn.ghost { background: transparent; color: #F2F2F2; border-color: #F2F2F2; }
  .hs-auth .hs-form input { background: #15172E; color: #F2F2F2; border-color: #2A2D49; }
  .hs-auth .hs-acct { color: #F2F2F2; }
  .hs-auth .hs-err { background: #3A1F22; color: #E88B79; }
}