/* Ι.Ν. ΚΟΙΜΗΣΕΩΣ ΤΗΣ ΘΕΟΤΟΚΟΥ, 40 ΕΚΚΛΗΣΙΕΣ — ΟΙ ΕΣΩΤΕΡΙΚΕΣ ΣΕΛΙΔΕΣ, ΤΑ ΚΟΙΝΑ ΚΟΜΜΑΤΙΑ (14/10/2026).

   Ο Bill, 14/10/2026, για τις σελίδες πέρα από την αρχική: «…αντι να διαλεγεςι απο ημερολογιο μερα κτλ βαζεις τον κοσμο να γραφει και το κανεις
   γενικα δυσλολο και δεν ταιριαζει με το theme και την αρχικη εικονα δεν εχεις βαλει συμβολα και ομορφια και καθαρο grid…»

   ΤΙ ΕΙΝΑΙ. Ένα φύλλο για κάθε εσωτερική σελίδα (αιτήματα, χαρτιά, ανακοίνωση, «δεν βρέθηκε» και οι άλλες) και ό,τι από αυτά θέλει το γραφείο:
   η λεπτή κεφαλίδα, η ζώνη με την αψίδα του είδους, η διάταξη σε δύο στήλες, η κάρτα, τα πεδία, τα κουμπιά, οι επιλογές με σύμβολο,
   τα τσιπάκια, το ημερολόγιο ημερών, οι ώρες, τα βήματα, το «στάλθηκε». Ο οδηγός: diorthoseis-1410/esoterikes/OPSI.md.
   Όλες οι κλάσεις αρχίζουν από «es-», για να μη συγκρούονται με το styles.css, το vaptisi.css ή το dimosia.css που ήδη φορτώνουν οι φόρμες.

   ΧΡΩΜΑΤΑ ΚΑΙ ΓΡΑΜΜΑΤΑ ΜΟΝΟ ΑΠΟ ΤΟ xromata.css. Κανένα νέο χρώμα: το κόκκινο είναι το --kokkino-vathy, το χρυσό γραμμών το --xryso, το χρυσό
   πάνω στο σκούρο το --xryso-fos. Το «έγινε» δεν είναι πράσινο: χρυσός κύκλος με κόκκινο τικ (σύμβολο es-epitixia).
   Τα σύμβολα: eikones/symvola.svg (μία γραμμή 1,6 στο πλέγμα των 24). Οι μεγάλες αψίδες: τα eikones/mystirio-*.svg της αρχικής, ως μάσκες.
   ΚΙΝΗΣΗ: μόνο αλλαγή χρώματος και σκιάς στο πάτημα, με την --kampyli. ΚΑΝΕΝΑ μπλοκ «μειωμένης κίνησης» (κανόνας του Bill, 2/9/2026). */
@import url("xromata.css") screen;

@media screen {
  /* ── τα μέτρα: ένα πλέγμα για όλες τις εσωτερικές σελίδες ── */
  :root {
    --es-plaino: 24px;              /* το περιθώριο της σελίδας στο κινητό: το ίδιο με το .wrap της αρχικής (100% - 48px) */
    --es-platos: 1160px;            /* το πλάτος της αρχικής */
    --es-kena: 24px;                /* το κενό ανάμεσα σε κομμάτια μέσα στην κάρτα */
    --es-xroma-2: var(--xryso);     /* το δεύτερο χρώμα των δίχρωμων συμβόλων */
    --es-ypsos: 52px;               /* κάθε πεδίο και κάθε κουμπί */
    --es-aktina: var(--koumpi-aktina, 4px);
    --es-karta-aktina: 8px;         /* η γωνία των καρτών της αρχικής (οι κάρτες των μυστηρίων, 8px) */
    --es-stiles: 4; --es-plithos: 5; --es-meros: 0%; --es-zoni-foto: none; --es-apsida: 64px; --es-mask: none;   /* τα γράφει η σελίδα ή το esoteriki.js */
  }

  /* ── η σελίδα ── */
  .es-soma { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--xarti); color: var(--melani); font: 400 17px/1.6 var(--keimeno); }
  .es-soma > main { flex: 1 0 auto; }
  .es-krymmeno { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .es-sym { flex: none; display: inline-block; vertical-align: middle; overflow: visible; }
  .es-plato { width: min(var(--es-platos, 1160px), calc(100% - 2 * var(--es-plaino, 24px))); margin-inline: auto; }

  /* ── 1. Η ΚΕΦΑΛΙΔΑ: το σήμα, το όνομα στο Didot, και ΕΝΑΣ ήσυχος δρόμος πίσω («← Ο ναός») ── */
  .es-kefali { position: sticky; top: 0; z-index: 20; background: var(--xarti); border-bottom: 1px solid var(--grammi); }
  .es-kefali .es-plato { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
  .es-kefali-sima { display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--melani); text-decoration: none; }
  .es-kefali-sima b { display: block; font: 400 17px/1.15 var(--titlos); color: var(--melani); text-wrap: balance; }
  .es-kefali-sima small { display: block; margin-top: 2px; font: 400 12px/1.2 var(--etiketa); letter-spacing: .14em; text-transform: uppercase; color: var(--kokkino-vathy); }
  .es-piso { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 2px; border: 0; background: none; color: var(--kokkino-vathy); font: 600 15px/1 var(--etiketa); letter-spacing: .06em; text-decoration: none; cursor: pointer; }
  .es-piso .es-sym { width: 18px; height: 18px; }
  .es-piso:hover { text-decoration: underline; text-underline-offset: 4px; }
  /* «Να φύγετε;»: μια λωρίδα κάτω από την κεφαλίδα, όχι παράθυρο του browser */
  .es-fygi { border-top: 1px solid var(--grammi); background: var(--fyllo); }
  .es-fygi .es-plato { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 0; }
  .es-fygi p { flex: 1 1 260px; margin: 0; font-size: 16px; color: var(--melani); }
  .es-fygi .es-drasi { flex: 0 1 auto; margin: 0; }

  /* ── 2. Η ΖΩΝΗ: σκούρο (ή η φωτογραφία του ναού κάτω από το πέπλο), η αψίδα του είδους, ο τίτλος ── */
  .es-zoni { position: relative; overflow: hidden; isolation: isolate; background: var(--skouro-vathy); color: var(--gyali-keimeno); text-align: center; }
  .es-zoni[data-foto]::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--es-zoni-foto, none) center 38% / cover no-repeat; }
  .es-zoni[data-foto]::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--gyali-peplo), var(--menou-pisw)); }
  .es-zoni .es-plato { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 32px 0 36px; }
  .es-zoni .es-etiketa { color: var(--xryso-fos); }
  .es-zoni h1 { margin: 0; font: 400 34px/1.1 var(--titlos); color: var(--gyali-keimeno); text-wrap: balance; }
  .es-zoni p { max-width: 560px; margin: 0; font-size: 16px; color: var(--skouro-keimeno); }
  /* το διαμάντι-στολίδι κάτω από τον τίτλο, όπως η γραμμή της αρχικής */
  .es-stolidi { display: flex; align-items: center; gap: 10px; width: 132px; color: var(--xryso-fos); --es-xroma-2: var(--xryso-fos); }
  .es-stolidi::before, .es-stolidi::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .55; }
  .es-stolidi .es-sym { width: 14px; height: 14px; }

  /* ── 3. Η ΑΨΙΔΑ: το ίδιο υλικό με τις κάρτες των μυστηρίων της αρχικής (mystiria.css), σε τρία μεγέθη ── */
  .es-apsida {
    --es-apsida: 64px; position: relative; flex: none; display: inline-block; width: var(--es-apsida, 64px); aspect-ratio: 4 / 5; overflow: hidden;
    border-radius: 999px 999px 3px 3px; color: var(--xryso-fos);
    background:
      radial-gradient(ellipse 70% 52% at 50% 56%, color-mix(in srgb, var(--xryso-fos) 26%, transparent), transparent 100%),
      linear-gradient(180deg, var(--kokkino-vathy) 40%, var(--kokkino-nyxta) 100%);
    box-shadow: inset 0 0 0 3px var(--kokkino-vathy), inset 0 0 0 4px color-mix(in srgb, var(--xryso-fos) 62%, transparent);
  }
  .es-apsida::before { content: ""; position: absolute; inset: 12% 10% 8%; background: currentColor; -webkit-mask: var(--es-mask, none) center / contain no-repeat; mask: var(--es-mask, none) center / contain no-repeat; }
  .es-apsida-mikri { --es-apsida: 36px; box-shadow: inset 0 0 0 2px var(--kokkino-vathy), inset 0 0 0 3px color-mix(in srgb, var(--xryso-fos) 62%, transparent); }
  .es-apsida-megali { --es-apsida: 96px; }
  .es-apsida[data-eidos="vaptisi"] { --es-mask: url("eikones/mystirio-vaptisi.svg"); }
  .es-apsida[data-eidos="gamos"] { --es-mask: url("eikones/mystirio-gamos.svg"); }
  .es-apsida[data-eidos="mnimosyno"] { --es-mask: url("eikones/mystirio-mnimosyno.svg"); }
  .es-apsida[data-eidos="efchelaio"] { --es-mask: url("eikones/mystirio-efchelaio.svg"); }
  .es-apsida[data-eidos="agiasmos"] { --es-mask: url("eikones/mystirio-agiasmos.svg"); }
  /* τα είδη χωρίς μεγάλο σχέδιο (δήλωση, εθελοντής, χαρτιά): το μικρό σύμβολο στη μέση της αψίδας */
  .es-apsida > .es-sym { position: absolute; left: 50%; top: 54%; width: 46%; height: auto; aspect-ratio: 1; transform: translate(-50%, -50%); }
  /* (14/10/2026, the office) an arch with no big drawing must not paint its mask layer: with no mask it filled the whole arch in gold */
  .es-apsida:has(> .es-sym)::before { content: none; }

  /* ── 4. Η ΔΙΑΤΑΞΗ: μία στήλη στο κινητό· από 1024px η κάρτα (7) και η πλαϊνή στήλη (4), στο πλάτος της αρχικής ── */
  .es-diataxi { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 0 0 48px; }
  .es-plai { display: grid; gap: 16px; align-content: start; }

  /* ── 5. Η ΚΑΡΤΑ: στο κινητό φύλλο από άκρη σε άκρη (τα γράμματα μένουν στη γραμμή των 24px της κεφαλίδας)· από 720px κάρτα με περίγραμμα ── */
  .es-karta { margin-inline: calc(-1 * var(--es-plaino, 24px)); padding: 24px var(--es-plaino, 24px) 28px; background: var(--fyllo); border-block: 1px solid var(--grammi); }
  /* ο ρυθμός της κάρτας: 24px ανάμεσα σε κομμάτια (δύο κλάσεις βάρος, για να νικά το «margin: 0» κάθε κομματιού), πιο σφιχτά μόνο ό,τι πάει μαζί */
  .es-karta > :not(.es-krymmeno) + :not(.es-krymmeno) { margin-top: var(--es-kena, 24px); }
  .es-karta > .es-karta-kefali + :is(h2, .es-erotisi) { margin-top: 10px; }
  .es-karta > :is(h2, .es-erotisi) + :is(.es-voitheia, .es-simeiosi) { margin-top: 8px; }
  .es-karta > .es-drasi + .es-drasi-isyxa { margin-top: 8px; }
  .es-karta-kefali { display: flex; align-items: center; gap: 10px; margin: 0; }
  .es-etiketa { margin: 0; font: 400 13px/1.3 var(--etiketa); letter-spacing: .16em; text-transform: uppercase; color: var(--kokkino-vathy); }
  .es-karta-kefali .es-sym { width: 22px; height: 22px; color: var(--xryso); }
  .es-karta-kefali .es-meros { margin-left: auto; font: 400 15px/1 var(--etiketa); letter-spacing: .04em; color: var(--melani-2); font-variant-numeric: tabular-nums lining-nums; }
  .es-karta h2, .es-erotisi { margin: 8px 0 0; font: 400 28px/1.15 var(--titlos); color: var(--melani); text-wrap: balance; }
  .es-karta-kefali + :is(h2, .es-erotisi) { margin-top: 10px; }
  .es-voitheia { margin: 8px 0 0; font-size: 16px; line-height: 1.5; color: var(--melani-2); }
  /* μία ήσυχη γραμμή (σημείωση, «μένει μόνο σε αυτή την καρτέλα»): το σύμβολο και μία πρόταση, όχι κουτί */
  .es-simeiosi { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: 15px; line-height: 1.5; color: var(--melani-2); }
  .es-simeiosi .es-sym { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--xryso); }
  /* η τελευταία ενότητα της κάρτας (το γραφείο του ναού, τα επόμενα βήματα): η ίδια λεπτή γραμμή με τις σειρές του ελέγχου */
  .es-karta-telos { padding-top: 20px; border-top: 1px solid var(--grammi); }

  /* ── 6. ΤΑ ΠΕΔΙΑ ── */
  .es-plegma { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px 16px; }
  fieldset:is(.es-plegma, .es-epiloges) { min-inline-size: 0; margin-inline: 0; padding: 0; border: 0; }
  fieldset.es-plegma > legend { margin: 0 0 8px; padding: 0; font: 600 15px/1.35 var(--keimeno); color: var(--melani); }
  .es-pedio { display: grid; gap: 6px; min-width: 0; margin: 0; }
  .es-pedio > label, .es-pedio > .es-onoma-pediou { font: 600 15px/1.35 var(--keimeno); color: var(--melani); }
  .es-pedio > label small, .es-onoma-pediou small { font-weight: 400; color: var(--melani-2); }
  .es-eisodos, .es-pedio :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    box-sizing: border-box; width: 100%; min-height: var(--es-ypsos, 52px); margin: 0; padding: 12px 14px; border: 1px solid var(--grammi); border-radius: var(--es-aktina, 4px);
    background: var(--fyllo); color: var(--melani); font: 400 17px/1.3 var(--keimeno); -webkit-appearance: none; appearance: none;
    transition: border-color 260ms var(--kampyli), box-shadow 260ms var(--kampyli);
  }
  .es-pedio textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
  /* (14/10/2026) «Άλλη ώρα» in 24 hours: hour and minutes as two lists side by side (esoteriki.js, pedioOras) */
  .es-ora24 { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; max-width: 280px; }
  .es-ora24-dyo { font: 400 22px/1 var(--titlos); color: var(--melani-2); }
  /* [data-ora24] lifts it to the weight of the field rule above (its :is(input:not():not()) weighs 0,3,1), which would otherwise wipe the arrow */
  .es-pedio .es-ora24 select[data-ora24] { padding-right: 40px; background-color: var(--fyllo); background-image: linear-gradient(45deg, transparent 50%, var(--kokkino-vathy) 50%), linear-gradient(-45deg, transparent 50%, var(--kokkino-vathy) 50%); background-size: 6px 6px, 6px 6px; background-position: right 20px center, right 14px center; background-repeat: no-repeat; }
  .es-pedio select { padding-right: 40px; background-color: var(--fyllo); background-image: linear-gradient(45deg, transparent 50%, var(--kokkino-vathy) 50%), linear-gradient(-45deg, transparent 50%, var(--kokkino-vathy) 50%); background-size: 6px 6px, 6px 6px; background-position: right 20px center, right 14px center; background-repeat: no-repeat; }
  .es-pedio :is(input, select, textarea)::placeholder { color: color-mix(in srgb, var(--melani-2) 72%, transparent); }
  .es-pedio :is(input, select, textarea):hover { border-color: color-mix(in srgb, var(--kokkino-vathy) 40%, var(--grammi)); }
  .es-pedio :is(input, select, textarea):focus { outline: none; border-color: var(--kokkino-vathy); box-shadow: 0 0 0 3px color-mix(in srgb, var(--xryso-fos) 70%, transparent); }
  .es-pedio-ypo { margin: 0; font-size: 14px; line-height: 1.45; color: var(--melani-2); }
  /* το λάθος δένεται στο πεδίο: κόκκινη γραμμή από κάτω, το «!» και ΜΙΑ πρόταση με τον λόγο */
  .es-pedio[data-lathos] :is(input, select, textarea) { border-color: var(--prosoxi); border-bottom-width: 2px; }
  .es-lathos-grammi { display: flex; align-items: flex-start; gap: 8px; margin: 0; font: 600 15px/1.4 var(--keimeno); color: var(--prosoxi); }
  .es-lathos-grammi .es-sym { flex: none; width: 18px; height: 18px; margin-top: 1px; }
  .es-pedio:not([data-lathos]) .es-lathos-grammi { display: none; }
  /* η πρόταση με τα κουτιά της: «του [Γεωργίου] [Παπαδόπουλου]» — το άρθρο στην ίδια σειρά, τα κουτιά συνεχίζουν την πρόταση */
  .es-protasi { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 6px 12px; }
  /* το άρθρο κάθεται στη μέση του πρώτου κουτιού: ύψος της ετικέτας (15px × 1,35 = 20) + 6 κενό + (52 − 26) / 2 */
  .es-protasi-arthro { padding-top: 39px; font: 400 20px/26px var(--titlos); color: var(--melani); }
  .es-protasi-kouta { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }

  /* ── 7. ΤΑ ΚΟΥΜΠΙΑ: ένα κύριο, ένα δεύτερο, ένα ήσυχο. Το κύριο κουβαλά πάντα το σύμβολο της πράξης του ── */
  .es-koumpi {
    box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--es-ypsos, 52px); margin: 0; padding: 12px 22px;
    border: 1px solid var(--kokkino-vathy); border-radius: var(--es-aktina, 4px); background: var(--kokkino-vathy); color: var(--fyllo);
    font: 700 17px/1.2 var(--etiketa); letter-spacing: .05em; text-align: center; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: background-color 260ms var(--kampyli), border-color 260ms var(--kampyli), color 260ms var(--kampyli);
  }
  .es-koumpi .es-sym { flex: none; width: 20px; height: 20px; }
  .es-koumpi:active { background: var(--kokkino-nyxta); border-color: var(--kokkino-nyxta); }
  .es-koumpi-deytero { background: transparent; color: var(--kokkino-vathy); }
  .es-koumpi-deytero:active { background: var(--simera-fonto); color: var(--kokkino-vathy); }
  .es-koumpi:is([disabled], [aria-disabled="true"]) { border-color: var(--grammi); background: var(--xarti-2); color: var(--axno); cursor: not-allowed; }
  .es-koumpi-isyxo { box-sizing: border-box; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; padding: 0; border: 0; background: none; color: var(--kokkino-vathy); font: 600 16px/1.3 var(--keimeno); text-align: left; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--kokkino-vathy) 35%, transparent); text-underline-offset: 4px; cursor: pointer; }
  .es-koumpi-isyxo .es-sym { flex: none; width: 18px; height: 18px; }
  @media (hover: hover) {
    .es-koumpi:not([disabled]):not([aria-disabled="true"]):hover { background: var(--kokkino-nyxta); border-color: var(--kokkino-nyxta); color: var(--fyllo); }
    .es-koumpi-isyxo:hover { text-decoration-color: currentColor; }
  }
  /* ΕΝΑ μέρος για τις πράξεις: «Πίσω» και το κύριο στην ίδια σειρά, το ήσυχο από κάτω, αριστερά, στην ίδια γραμμή με τα γράμματα της κάρτας */
  .es-drasi { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .es-drasi:has(> .es-koumpi + .es-koumpi) { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .es-drasi > .es-koumpi { width: 100%; padding-inline: 12px; }
  .es-drasi-isyxa { display: flex; flex-wrap: wrap; gap: 4px 24px; }

  /* ── 8. ΟΙ ΕΠΙΛΟΓΕΣ ΜΕ ΣΥΜΒΟΛΟ (ραδιο-κάρτες): το σύμβολο αριστερά, όλη η πρόταση ως όνομα, το τικ δεξιά όταν διαλεχτεί ── */
  .es-epiloges { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 0; padding: 0; border: 0; }
  .es-epiloges > legend { margin-bottom: 10px; padding: 0; font: 600 15px/1.35 var(--keimeno); color: var(--melani); }
  .es-epilogi { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) 22px; align-items: center; gap: 14px; min-height: 64px; padding: 10px 14px 10px 10px; border: 1px solid var(--grammi); border-radius: var(--es-karta-aktina, 8px); background: var(--fyllo); color: var(--melani); cursor: pointer; transition: border-color 260ms var(--kampyli), background-color 260ms var(--kampyli); }
  .es-epilogi input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
  .es-epilogi-sym { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--simera-fonto); color: var(--xryso); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--xryso) 40%, transparent); }
  .es-epilogi-sym .es-sym { width: 26px; height: 26px; }
  .es-epilogi-keimeno { font: 400 17px/1.4 var(--keimeno); }
  .es-epilogi-keimeno small { display: block; margin-top: 2px; font-size: 14px; color: var(--melani-2); }
  .es-epilogi-tik { width: 22px; height: 22px; color: var(--kokkino-vathy); opacity: 0; transition: opacity 260ms var(--kampyli); }
  .es-epilogi:has(input:checked) { border-color: var(--kokkino-vathy); background: color-mix(in srgb, var(--simera-fonto) 100%, var(--fyllo)); box-shadow: inset 0 0 0 1px var(--kokkino-vathy); }
  .es-epilogi:has(input:checked) .es-epilogi-sym { background: var(--kokkino-vathy); color: var(--xryso-fos); box-shadow: none; }
  .es-epilogi:has(input:checked) .es-epilogi-tik { opacity: 1; }
  .es-epilogi:has(input:focus-visible) { outline: 3px solid var(--xryso-fos); outline-offset: 2px; }
  /* ομάδα επιλογών που δεν έχει απαντηθεί ακόμα, μέσα σε πρόταση: κόκκινο περίγραμμα και δικό της όνομα */
  .es-epiloges[data-lathos] .es-epilogi, .es-tsipakia[data-lathos] .es-tsip { border-color: var(--prosoxi); }

  /* ── 9. ΤΑ ΤΣΙΠΑΚΙΑ: διαλέγεις με ένα πάτημα (χρονιά, ώρα, ταμείο, «Δε Τρ Τε…»). aria-pressed για πολλά, role=radio + aria-checked για ένα ── */
  .es-tsipakia { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
  .es-tsipakia-plegma { display: grid; grid-template-columns: repeat(var(--es-stiles, 4), minmax(0, 1fr)); gap: 6px; }
  .es-tsipakia-plegma .es-tsip { padding-inline: 4px; white-space: nowrap; }
  .es-tsip {
    box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 48px; margin: 0; padding: 8px 16px;
    border: 1px solid var(--grammi); border-radius: var(--es-aktina, 4px); background: var(--fyllo); color: var(--melani);
    font: 400 17px/1.1 var(--keimeno); font-variant-numeric: tabular-nums lining-nums; cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: background-color 260ms var(--kampyli), border-color 260ms var(--kampyli), color 260ms var(--kampyli);
  }
  .es-tsip .es-sym { width: 18px; height: 18px; }
  .es-tsip:is([aria-pressed="true"], [aria-checked="true"]) { border-color: var(--kokkino-vathy); background: var(--kokkino-vathy); color: var(--fyllo); }
  .es-tsip:is([disabled], [aria-disabled="true"]) { border-color: transparent; background: none; color: var(--axno); opacity: .5; cursor: default; }
  .es-tsip-allo { border-style: dashed; color: var(--kokkino-vathy); }
  @media (hover: hover) { .es-tsip:not([disabled]):not([aria-pressed="true"]):not([aria-checked="true"]):hover { border-color: var(--kokkino-vathy); } }

  /* ── 10. ΤΟ ΗΜΕΡΟΛΟΓΙΟ ΗΜΕΡΩΝ: το ημερολόγιο σε χαρτί του προγράμματος της αρχικής (programma.css, «.pr-minas» στο χαρτί), για να διαλέγει ο άνθρωπος ── */
  .es-imer { box-sizing: border-box; min-width: 0; padding: 8px 0 4px; }
  .es-imer-kefali { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 8px; min-height: 48px; margin: 0 0 8px; }
  .es-imer-titlos { display: flex; justify-content: center; flex-wrap: nowrap; gap: 2px; min-width: 0; }
  .es-imer-anevasma { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; margin: 0; padding: 0 4px; border: 0; border-radius: var(--es-aktina, 4px); background: none; color: var(--melani); font: 400 21px/1.1 var(--titlos); white-space: nowrap; cursor: pointer; }
  @media (min-width: 560px) { .es-imer-titlos { gap: 8px; } .es-imer-anevasma { gap: 4px; padding: 0 8px; font-size: 24px; } }
  .es-imer-anevasma .es-sym { width: 16px; height: 16px; color: var(--kokkino-vathy); }
  .es-imer-anevasma:is([disabled]) { cursor: default; }
  .es-imer-anevasma[disabled] .es-sym { display: none; }
  .es-imer-velos { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 1px solid var(--grammi); border-radius: var(--es-aktina, 4px); background: var(--fyllo); color: var(--melani); cursor: pointer; }
  .es-imer-velos .es-sym { width: 20px; height: 20px; }
  .es-imer-velos[disabled] { opacity: .35; cursor: default; }
  .es-imer-pinakas { width: calc(100% + 8px); margin: 0 -4px; border-collapse: separate; border-spacing: 4px; table-layout: fixed; }
  .es-imer-pinakas td { padding: 0; }
  .es-imer-pinakas .es-keli { width: 100%; }
  .es-imer-onoma { padding: 4px 0; text-align: center; font: 400 14px/1.2 var(--etiketa); letter-spacing: .1em; text-transform: uppercase; color: var(--melani-2); }
  .es-imer-onoma[data-kyriaki] { color: var(--kokkino-vathy); }
  .es-keli {
    position: relative; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; min-height: 48px; margin: 0; padding: 0;
    border: 1px solid var(--grammi); border-radius: var(--es-aktina, 4px); background: var(--fyllo); color: var(--melani);
    font: 400 19px/1 var(--keimeno); font-variant-numeric: tabular-nums lining-nums; cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: background-color 260ms var(--kampyli), color 260ms var(--kampyli), border-color 260ms var(--kampyli);
  }
  .es-keli-adeio { border-color: transparent; background: none; cursor: default; }
  .es-keli-simera { border-color: var(--kokkino-vathy); box-shadow: inset 0 0 0 1px var(--kokkino-vathy); }
  .es-keli-simera::after { content: "σήμερα"; position: absolute; left: 0; right: 0; bottom: 3px; font: 400 10px/1 var(--etiketa); letter-spacing: .06em; color: var(--kokkino-vathy); }
  .es-keli[aria-disabled="true"] { border-color: transparent; background: none; color: var(--axno); opacity: .45; cursor: not-allowed; }
  .es-keli[aria-disabled="true"].es-keli-simera { opacity: .7; }
  .es-keli[aria-pressed="true"] { border-color: var(--kokkino-vathy); background: var(--kokkino-vathy); color: var(--fyllo); }
  .es-keli[aria-pressed="true"].es-keli-simera::after { color: var(--xryso-fos); }
  .es-keli:focus-visible { outline: 3px solid var(--xryso-fos); outline-offset: 1px; z-index: 1; }
  .es-teleia { display: flex; gap: 2px; height: 5px; }
  .es-teleia i { display: block; width: 5px; height: 5px; border-radius: 50%; background: var(--xryso); }
  .es-keli[aria-pressed="true"] .es-teleia i { background: var(--xryso-fos); }
  /* (15/10/2026, μετά τους τρίτους ελέγχους) το ποντίκι πάνω σε μια μέρα: χρυσό περίγραμμα και απαλό φόντο, ποτέ το κόκκινο του «σήμερα»· αλλιώς μια μέρα
     όπου απλώς στάθηκε το ποντίκι (π.χ. η 31) έμοιαζε σημαδεμένη δίπλα στη μέρα που διαλέχτηκε */
  @media (hover: hover) { .es-keli:not([aria-disabled="true"]):not([aria-pressed="true"]):not(.es-keli-adeio):not(.es-keli-simera):hover { border-color: var(--xryso); background: var(--simera-fonto); } }
  /* οι δύο σκάλες πριν από τις μέρες: οι χρονιές (και οι δεκαετίες), οι μήνες */
  .es-imer-epiloges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .es-imer-epiloges .es-tsip { width: 100%; padding-inline: 4px; }
  .es-imer-epiloges[data-eidos="etos"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .es-imer-odigia { margin: 0 0 10px; text-align: center; font-size: 15px; color: var(--melani-2); }
  /* η επιλογή ως πρόταση, κάτω από το ημερολόγιο */
  .es-imer-protasi { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 12px 0 0; padding: 10px 14px; border-left: 3px solid var(--xryso); background: var(--simera-fonto); font: 400 17px/1.4 var(--keimeno); color: var(--melani); }
  .es-imer-protasi .es-sym { flex: none; width: 20px; height: 20px; color: var(--kokkino-vathy); }
  .es-imer-protasi:empty { display: none; }

  /* ── 11. ΤΑ ΒΗΜΑΤΑ: ενότητες με όνομα και σύμβολο, όχι οθόνες. Στο κινητό μια σειρά κύκλων και από κάτω «Το παιδί · 2 από 4» ── */
  .es-vimata { margin: 0; padding: 0; }
  .es-vimata ol { display: grid; grid-template-columns: repeat(var(--es-plithos, 5), minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
  .es-vima { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; color: var(--axno); }
  .es-vima + .es-vima::before { content: ""; position: absolute; top: 19px; right: calc(50% + 24px); left: calc(-50% + 24px); height: 1px; background: var(--grammi); }
  .es-vima[data-katastasi="egine"] + .es-vima::before { background: var(--xryso); }
  .es-vima-kyklos { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--grammi); border-radius: 50%; background: var(--fyllo); color: var(--axno); }
  .es-vima-kyklos .es-sym { width: 20px; height: 20px; }
  .es-vima-onoma { max-width: 100%; overflow: hidden; font: 400 12px/1.2 var(--etiketa); letter-spacing: .04em; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
  .es-vima[data-katastasi="egine"] { color: var(--melani-2); }
  .es-vima[data-katastasi="egine"] .es-vima-kyklos { border-color: var(--xryso); background: var(--simera-fonto); color: var(--xryso-vathy); }
  .es-vima[data-katastasi="tora"] { color: var(--kokkino-vathy); }
  .es-vima[data-katastasi="tora"] .es-vima-kyklos { border-color: var(--kokkino-vathy); background: var(--kokkino-vathy); color: var(--xryso-fos); box-shadow: 0 0 0 4px color-mix(in srgb, var(--kokkino-vathy) 14%, transparent); }
  .es-vima-tik { position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--xryso); color: var(--fyllo); }
  .es-vima-tik .es-sym { width: 12px; height: 12px; stroke-width: 2.4; }
  .es-vimata-grammi { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 14px 0 0; padding-top: 10px; border-top: 1px solid var(--grammi); }
  .es-vimata-grammi b { font: 400 20px/1.2 var(--titlos); color: var(--melani); }
  .es-vimata-grammi span { font: 400 15px/1 var(--etiketa); letter-spacing: .04em; color: var(--melani-2); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
  .es-vimata-bara { display: block; height: 3px; margin-top: 8px; border-radius: 2px; background: var(--xarti-2); overflow: hidden; }
  .es-vimata-bara i { display: block; height: 100%; width: var(--es-meros, 0%); background: var(--kokkino-vathy); transition: width 420ms var(--kampyli); }
  /* σε στενό κινητό (κάτω από 380px) τα ονόματα κάτω από τους κύκλους φεύγουν· το όνομα της τωρινής ενότητας μένει στη γραμμή από κάτω */
  @media (max-width: 379px) { .es-vima-onoma { display: none; } }

  /* ── 12. Η ΠΛΑΪΝΗ ΣΤΗΛΗ: το είδος, τα βήματα κάθετα, το γραφείο του ναού ── */
  .es-plai-kouti { padding: 20px; border: 1px solid var(--grammi); border-radius: var(--es-karta-aktina, 8px); background: var(--fyllo); }
  .es-plai-kouti > * + * { margin-top: 12px; }
  .es-plai-eidos { display: flex; align-items: center; gap: 16px; }
  .es-plai-eidos b { display: block; font: 400 24px/1.15 var(--titlos); color: var(--melani); }
  .es-plai-eidos small { display: block; margin-top: 4px; font-size: 15px; color: var(--melani-2); }
  .es-grafeio dt { margin: 0; }
  .es-grafeio p { margin: 0; font-size: 15px; color: var(--melani-2); }
  .es-grafeio .es-koumpi { width: 100%; }

  /* ── 13. «ΣΤΑΛΘΗΚΕ»: το σημάδι (χρυσός κύκλος, κόκκινο τικ), ο αριθμός, οι σειρές του ελέγχου ── */
  .es-epitixia { display: grid; justify-items: center; gap: 12px; text-align: center; }
  .es-epitixia > .es-sym { width: 64px; height: 64px; color: var(--kokkino-vathy); --es-xroma-2: var(--xryso); }
  .es-epitixia h2 { margin: 0; }
  .es-arithmos { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 20px; border: 1px dashed var(--xryso); border-radius: var(--es-aktina, 4px); background: var(--simera-fonto); }
  .es-arithmos small { font: 400 12px/1.2 var(--etiketa); letter-spacing: .14em; text-transform: uppercase; color: var(--melani-2); }
  .es-arithmos b { font: 400 26px/1.1 var(--titlos); letter-spacing: .04em; color: var(--kokkino-vathy); font-variant-numeric: tabular-nums lining-nums; }
  .es-seires { display: grid; margin: 0; padding: 0; }
  .es-seira { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 4px 16px; padding: 12px 0; border-top: 1px solid var(--grammi); }
  .es-seira:last-child { border-bottom: 1px solid var(--grammi); }
  .es-seira dt { font: 400 14px/1.4 var(--etiketa); letter-spacing: .06em; color: var(--melani-2); }
  .es-seira dd { margin: 0; font-size: 16px; color: var(--melani); overflow-wrap: anywhere; }
  .es-seira dd .es-koumpi-isyxo { min-height: 32px; font-size: 15px; }

  /* ── ΑΠΟ 560px: δύο πεδία δίπλα δίπλα όπου το θέλει η φόρμα, κουτιά της πρότασης στη σειρά ── */
  @media (min-width: 560px) {
    .es-plegma-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .es-plegma-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .es-plegma .es-olo { grid-column: 1 / -1; }
    .es-protasi-kouta { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
    .es-epiloges-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .es-imer-epiloges[data-eidos="etos"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .es-imer-epiloges[data-eidos="minas"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .es-keli { min-height: 52px; }
  }

  /* ── ΑΠΟ 720px: η κάρτα γίνεται κάρτα ── */
  @media (min-width: 720px) {
    .es-karta { margin-inline: 0; padding: 32px 36px 36px; border: 1px solid var(--grammi); border-radius: var(--es-karta-aktina, 8px); box-shadow: 0 18px 48px -32px color-mix(in srgb, var(--melani) 35%, transparent); }
    .es-zoni .es-plato { padding: 44px 0 56px; }
    .es-zoni h1 { font-size: 46px; }
    .es-diataxi { padding-top: 0; margin-top: -28px; position: relative; }
    .es-karta h2, .es-erotisi { font-size: 32px; }
    .es-vima-onoma { font-size: 13px; }
  }

  /* ── ΑΠΟ 1024px: η κάρτα αριστερά (7 από 11 μέρη), η πλαϊνή στήλη δεξιά (4), σταθερή όσο κατεβαίνει η σελίδα ── */
  @media (min-width: 1024px) {
    .es-kefali .es-plato { min-height: 72px; }
    .es-kefali-sima b { font-size: 19px; }
    .es-zoni .es-plato { padding: 48px 0 76px; }
    .es-zoni h1 { font-size: 52px; }
    .es-diataxi { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: 48px; align-items: start; margin-top: -44px; padding-bottom: 72px; }
    .es-diataxi > .es-plai { position: sticky; top: 96px; }
    /* μόνη της (χωρίς πλαϊνή στήλη), η κάρτα παίρνει τα 7 μέρη στη μέση */
    .es-diataxi:not(:has(> .es-plai)) { grid-template-columns: minmax(0, 720px); justify-content: center; }
    /* στην πλαϊνή στήλη τα βήματα στέκονται κάθετα, με το όνομα δίπλα στον κύκλο */
    .es-plai .es-vimata ol { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .es-plai .es-vima { flex-direction: row; gap: 14px; min-height: 52px; }
    .es-plai .es-vima + .es-vima::before { top: -14px; bottom: auto; left: 19px; right: auto; width: 1px; height: 14px; }
    /* (16/10/2026, κλείσιμο, γύρος 2) εδώ το όνομα αναδιπλώνεται, άρα δεν κόβεται: ο τόνος του έντονου «Ό» κρέμεται αριστερά από το γράμμα και
       το overflow: hidden τον έκοβε («Ονομα») */
    .es-plai .es-vima-onoma { font-size: 16px; letter-spacing: .02em; text-align: left; white-space: normal; display: block; overflow: visible; overflow-wrap: anywhere; }
    .es-plai .es-vima[data-katastasi="tora"] .es-vima-onoma { font-weight: 700; }
    .es-plai .es-vimata-grammi { margin-top: 8px; }
    .es-drasi:has(> .es-koumpi + .es-koumpi) { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  }
}

/* ΣΤΟ ΧΑΡΤΙ ΠΟΥ ΤΥΠΩΝΕΤΑΙ: ούτε κεφαλίδα, ούτε ζώνη, ούτε κουμπιά· η κάρτα ως σκέτο κείμενο. */
@media print {
  .es-kefali, .es-zoni, .es-plai, .es-drasi, .es-drasi-isyxa, .es-fygi, .es-imer, .es-vimata { display: none !important; }
  .es-karta { border: 0; padding: 0; box-shadow: none; }
}