/* Το κέλυφος: δύο στήλες που ο χρήστης μπορεί να αντιμεταθέσει. */

/* ΤΟ ΘΕΜΑ ΤΟ ΑΠΟΦΑΣΙΖΕΙ ΤΟ JAVASCRIPT, ΟΧΙ ΤΟ @media.
   Το `data-θέμα` μπαίνει στο <html> ΠΡΙΝ ζωγραφιστεί η σελίδα (μικρό σενάριο
   στο <head> του index.html). Ο λόγος είναι ο ίδιος που το επέλεξε και το
   βιβλίο, και είναι ένας: ΟΙ ΤΙΜΕΣ ΓΡΑΦΟΝΤΑΙ ΜΙΑ ΦΟΡΑ. Με
   `@media (prefers-color-scheme: dark)` ΚΑΙ ρητή επιλογή χρήστη θα χρειάζονταν
   δύο πανομοιότυπες λίστες — μία για το σύστημα και μία για το κουμπί — που
   ξεσυγχρονίζονται στην πρώτη αλλαγή χρώματος και κανείς δεν το προσέχει.
   Χωρίς JavaScript μένει το ανοιχτό· εδώ δεν κοστίζει τίποτα, γιατί χωρίς
   JavaScript δεν υπάρχει ούτως ή άλλως περιβάλλον — είναι ΟΛΟ JavaScript.

   Το `color-scheme` δεν είναι διακόσμηση: χωρίς αυτό οι μπάρες κύλισης και
   τα `<select>` του λειτουργικού μένουν ανοιχτά μέσα στη σκοτεινή σελίδα. */
:root {
  color-scheme: light;
  --χαρτί: #fbfaf7;
  --μελάνι: #22201c;
  --απαλό: #6b665e;
  --γραμμή: #e2ddd3;
  --πλαίσιο: #ffffff;
  --τόνος: #8a5a2b;
  --κώδικας: #f5f2ec;
  --λάθος: #a4231f;
  --σωστό: #2f6b3a;
  --κλειδί: #7a4f9c;
  --κείμενο-κώδικα: #1e2430;
  --μπλε: #1f5fbf;
  --πράσινο-σ: #2f6b3a;
  --πορτοκαλί-α: #9a5b12;
  --προσοχή: #9a5b12;   /* προειδοποίηση — ούτε λάθος ούτε σωστό */
  --σκιά: 0 1px 2px rgba(0,0,0,.05), 0 6px 20px rgba(0,0,0,.05);
}

/* Οι σκούρες τιμές ΔΕΝ είναι οι ανοιχτές ανάποδα: το μελάνι δεν γίνεται
   καθαρό λευκό (κουράζει στο σκοτάδι) και τα μπλε/πράσινα ΑΝΟΙΓΟΥΝ, γιατί
   σκούρο χρώμα πάνω σε σκούρο φόντο δεν διαβάζεται. */
:root[data-θέμα="σκοτάδι"] {
  color-scheme: dark;
  --χαρτί: #16181c;
  --μελάνι: #e6e3dc;
  --απαλό: #9a958c;
  --γραμμή: #2c3038;
  --πλαίσιο: #1c1f25;
  --τόνος: #d99a5b;
  --κώδικας: #12141a;
  --λάθος: #f08a83;
  --σωστό: #7fc98c;
  --κλειδί: #c39ae8;
  --κείμενο-κώδικα: #dfe4ee;
  --μπλε: #7fb4ff;
  --πράσινο-σ: #8fd3a0;
  --πορτοκαλί-α: #e2a765;
  --προσοχή: #e2a765;
  --σκιά: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
}

* { box-sizing: border-box; }

/* Το κέλυφος ΔΕΝ κυλάει ποτέ ως σελίδα — κυλάνε μόνο η εκφώνηση, ο
   συντάκτης και η κονσόλα, το καθένα μέσα του. Χωρίς αυτό, το Android
   Chrome έσπρωχνε ολόκληρο το έγγραφο προς τα πάνω για να φέρει το πεδίο
   εισόδου πάνω από το πληκτρολόγιο, και η μπάρα με τον επιλογέα άσκησης
   έβγαινε εκτός οθόνης — χωρίς τρόπο να γυρίσει πίσω όσο έγραφε ο μαθητής. */
html, body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  margin: 0;
  background: var(--χαρτί);
  color: var(--μελάνι);
  font: 16px/1.6 "Gentium Book Plus", Georgia, "Times New Roman", serif;
  -webkit-text-size-adjust: 100%;
}

/* ---------------------------------------------------------------- μπάρα */

header {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem .9rem;
  border-bottom: 1px solid var(--γραμμή);
  background: var(--πλαίσιο);
  position: sticky;
  top: 0;
  z-index: 5;
  flex-wrap: wrap;
}

/* Δύο επιλογείς αντί για έναν: φυλλάδιο, μετά άσκηση. Μένουν πάντα δίπλα
   δίπλα — αν έσπαγαν σε δύο σειρές θα έτρωγαν ύψος από τον συντάκτη. */
.επιλογείς {
  display: flex;
  gap: .4rem;
  align-items: center;
  min-width: 0;
}

header select {
  font: inherit;
  font-size: .95rem;
  padding: .35rem .5rem;
  border: 1px solid var(--γραμμή);
  border-radius: 6px;
  background: var(--χαρτί);
  color: var(--μελάνι);
  max-width: min(48vw, 30rem);
}

/* Ο αριθμός της άσκησης είναι δύο ψηφία· δεν χρειάζεται πλάτος φυλλαδίου. */
#επιλογή { flex: 0 0 auto; }
#φύλλο   { flex: 0 1 auto; min-width: 0; }
/* Στο πρόχειρο δεν υπάρχει δεύτερος επιλογέας ούτε κουμπί φυλλαδίου, οπότε
   ο επιλογέας παίρνει το φυσικό του πλάτος και η λέξη φαίνεται ολόκληρη. */
body[data-πρόχειρο="ναι"] #φύλλο { flex: 0 0 auto; }

.κενό { flex: 1; }

.μέγεθος {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .92rem;
  color: var(--απαλό);
  white-space: nowrap;
}
.μέγεθος span { margin-right: .1rem; }
.μέγεθος button {
  min-width: 1.9rem;
  padding: .25rem .4rem;
  font-size: 1rem;
  line-height: 1;
}

/* ΤΟ ΘΕΜΑ — πρώτο στο μενού. Δανείζεται τη γραμμή του «μέγεθος» (ετικέτα
   αριστερά, χειριστήρια δεξιά) και το πατημένο ύφος των «όψεων», ώστε να μη
   γεννηθεί τρίτο ύφος για κουμπιά που κάνουν το ίδιο πράγμα: διαλέγουν μία
   από λίγες καταστάσεις. */
.θέμα {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .92rem;
  color: var(--απαλό);
  white-space: nowrap;
}
.θέμα > span { flex: 0 0 auto; }
.θέμα-κουμπιά { display: flex; gap: .25rem; flex: 1 1 auto; }
.θέμα-κουμπιά button {
  flex: 1 1 0;
  padding: .25rem .35rem;
  font-size: .82rem;
  line-height: 1.15;
}
.θέμα-κουμπιά button[aria-pressed="true"] {
  border-color: var(--τόνος);
  color: var(--τόνος);
}

.ταχύτητα {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .92rem;
  color: var(--απαλό);
  white-space: nowrap;
}
.ταχύτητα select {
  font: inherit;
  font-size: .9rem;
  padding: .3rem .4rem;
  border: 1px solid var(--γραμμή);
  border-radius: 6px;
  background: var(--χαρτί);
  color: var(--μελάνι);
}

/* Τα εργαλεία ζουν σε πτυσσόμενο μενού σε ΚΑΘΕ πλάτος.

   ΓΙΑΤΙ ΚΑΙ ΣΤΟΝ ΥΠΟΛΟΓΙΣΤΗ: παλιότερα ήταν `display: contents`, δηλαδή όλα
   τα κουμπιά κάθονταν αραδιασμένα στην κεφαλίδα. Όσο ήταν τέσσερα
   περνούσε. Με το πλαίσιο του συγγραφέα από πάνω, η κεφαλίδα έσπαγε σε
   ΔΕΥΤΕΡΗ ΣΕΙΡΑ και έσπρωχνε την «Εκτέλεση» μαζί της — φαινόταν χαλασμένο.
   Η κεφαλίδα κρατάει μόνο ό,τι πατιέται συνέχεια: επιλογή άσκησης,
   Εκτέλεση, και τα κουμπιά που εμφανίζονται ΟΣΟ τρέχει το πρόγραμμα. */
.εργαλεία {
  display: none;
  position: absolute;
  top: calc(100% + .3rem);
  right: .6rem;
  z-index: 20;
  flex-direction: column;
  align-items: stretch;
  gap: .3rem;
  padding: .45rem;
  min-width: 11rem;
  /* Ταβάνι: το μενού κρέμεται από τα δεξιά, οπότε ό,τι φαρδαίνει μέσα του
     το σπρώχνει έξω από την ΑΡΙΣΤΕΡΗ άκρη — εκεί που δεν υπάρχει μπάρα
     κύλισης να το προδώσει. Το «right: .6rem» αφαιρείται δύο φορές. */
  max-width: calc(100vw - 1.2rem);
  background: var(--πλαίσιο);
  border: 1px solid var(--γραμμή);
  border-radius: 10px;
  box-shadow: var(--σκιά);
}
body[data-μενού="ανοιχτό"] .εργαλεία { display: flex; }
.εργαλεία button { text-align: left; padding: .5rem .7rem; }

/* Η αντιμετάθεση πρώτη: είναι ρύθμιση της οθόνης, όχι ενέργεια πάνω στο
   πρόγραμμα, και ανάμεσα στις ενέργειες δεν κάθεται. */
.εργαλεία .εναλλαγή { justify-content: flex-start; order: -2; }
.εργαλεία .ταχύτητα,
.εργαλεία .μέγεθος { justify-content: space-between; padding: .2rem .7rem; }
.εργαλεία .μέγεθος button,
.εργαλεία .ταχύτητα select { flex: 0 0 auto; }

.μενού {
  display: inline-flex;
  align-items: center;
  padding: .38rem .5rem;
}
.μενού svg { width: 1.2em; height: 1.2em; }

button {
  font: inherit;
  font-size: .92rem;
  padding: .38rem .8rem;
  border: 1px solid var(--γραμμή);
  border-radius: 6px;
  background: var(--χαρτί);
  color: var(--μελάνι);
  cursor: pointer;
}
button:hover { border-color: var(--απαλό); }
#τρέξε { display: inline-flex; align-items: center; gap: .35rem; }
.εικονίδιο-play { display: none; width: 1.15em; height: 1.15em; }

button.κύριο {
  background: var(--τόνος);
  border-color: var(--τόνος);
  color: #fff;
  font-weight: 600;
}
button.κύριο:hover { filter: brightness(1.08); }
button[disabled] { opacity: .45; cursor: default; }

.εναλλαγή {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding-inline: .6rem;
}
.εναλλαγή svg { width: 1.05em; height: 1.05em; }

/* ------------------------------------------------------------- διάταξη */

/* Το --ορατό το γράφει το JS από το visualViewport. Το 100dvh ΔΕΝ αρκεί:
   συρρικνώνεται για τις μπάρες του browser, όχι για το εικονικό
   πληκτρολόγιο — που είναι ακριβώς αυτό που κρύβει τον συντάκτη. */
main {
  display: grid;
  grid-template-columns: 1fr 6px 1fr;
  height: calc(var(--ορατό, 100dvh) - 3.4rem);
}

/* ⚠ ΤΟ `grid-row: 1` ΕΙΝΑΙ ΑΠΑΡΑΙΤΗΤΟ, ΔΕΝ ΕΙΝΑΙ ΔΙΑΚΟΣΜΗΣΗ.
   Χωρίς αυτό η αυτόματη τοποθέτηση του πλέγματος διαβάζει τα παιδιά με τη
   σειρά του DOM (εκφώνηση, χωρίστρα, εργασία) και προχωράει τον δείκτη της
   μόνο ΜΠΡΟΣΤΑ. Στην κανονική πλευρά ταιριάζει τυχαία: 1, 2, 3. ΣΤΗΝ
   ΑΝΤΙΜΕΤΑΘΕΣΗ ΟΜΩΣ η εκφώνηση ζητάει τη στήλη 3, ο δείκτης φτάνει στο
   τέλος της πρώτης γραμμής, και η χωρίστρα με την εργασία —που ζητούν τις
   στήλες 2 και 1— δεν χωράνε πια πίσω του: πέφτουν στη ΔΕΥΤΕΡΗ ΓΡΑΜΜΗ.
   Αποτέλεσμα: οι δύο στήλες η μία ΚΑΤΩ από την άλλη, η εκφώνηση κομμένη
   στα 174px, ο συντάκτης να ξεκινάει 174px χαμηλότερα και η χωρίστρα με
   ύψος 0 — δηλαδή ασύρετη. Καρφώνοντας ΚΑΙ ΤΑ ΤΡΙΑ στη γραμμή 1, η σειρά
   των στηλών παύει να έχει σημασία. */
#εκφώνηση { grid-column: 1; grid-row: 1; }
#εργασία  { grid-column: 3; grid-row: 1; }

/* Η αντιμετάθεση: μόνο οι στήλες αλλάζουν, τίποτα άλλο δεν μετακινείται. */
body[data-πλευρά="αριστερά"] #εργασία  { grid-column: 1; }
body[data-πλευρά="αριστερά"] #εκφώνηση { grid-column: 3; }

.χωρίστρα {
  grid-column: 2;
  grid-row: 1;
  background: var(--γραμμή);
  cursor: col-resize;
}
.χωρίστρα:hover { background: var(--απαλό); }


section { overflow: auto; min-width: 0; }

/* Το μέγεθος γραμμάτων κάθε στήλης, ξεχωριστά. Πολλαπλασιαστής σε ΚΑΘΕ
   κανόνα και όχι «em» στους απογόνους: με em θα σύνθεταν αλυσίδες — ο
   διακόπτης μέσα στον πίνακα τιμών θα μίκραινε δύο φορές. */
#εκφώνηση { font-size: calc(1rem * var(--κλ-εκφ, 1)); }
#εργασία  { font-size: calc(1rem * var(--κλ-κωδ, 1)); }

/* Η εναλλαγή τιμές/διάγραμμα, μέσα στον κάτω πίνακα. */
.όψεις { display: flex; gap: .25rem; padding-bottom: .45rem; }
.όψεις button {
  flex: 1 1 0;
  padding: .18rem .3rem;
  font-size: calc(.72rem * var(--κλ-κωδ, 1));
  font-family: system-ui, sans-serif;
}
.όψεις button[aria-pressed="true"] {
  border-color: var(--τόνος);
  color: var(--τόνος);
}
.τιμές.κλειστός .όψεις { display: none; }

/* ΘΑΜΠΩΝΕΙ, ΔΕΝ ΣΒΗΝΕΙ. Όσο ο κώδικας δεν αναλύεται, μένει στην οθόνη το
   τελευταίο έγκυρο διάγραμμα — αλλιώς θα τρεμόπαιζε σε κάθε πλήκτρο. */
#δικό-διάγραμμα.παλιό { opacity: .38; }
#δικό-διάγραμμα .άδεια { color: var(--απαλό); font-size: .9em; padding: .4rem 0; }

/* ΜΕΣΑ ΣΤΟΝ ΚΑΤΩ ΠΙΝΑΚΑ ΔΕΝ ΜΠΑΙΝΕΙ ΤΑΒΑΝΙ ΥΨΟΥΣ. Το `.τιμές` που το
   περιέχει έχει ήδη δικό του ύψος και δική του `overflow: auto`· το
   `max-height: 60vh` του καμβά έβγαζε ΔΕΥΤΕΡΗ κάθετη μπάρα, τη μία μέσα
   στην άλλη. Το 60vh έχει νόημα ΜΟΝΟ στην εκφώνηση, όπου το διάγραμμα
   μοιράζεται τη σελίδα με το κείμενο και δεν πρέπει να το διώξει.
   Η ΟΡΙΖΟΝΤΙΑ κύλιση μένει στον καμβά: έτσι το πλατύ διάγραμμα κυλάει
   μόνο του και δεν σέρνει μαζί του ολόκληρο τον πίνακα τιμών. */
#δικό-διάγραμμα .διάγραμμα-καμβάς { max-height: none; }

/* --------------------------------------------- τα διαγράμματα ροής */

.διάγραμμα-θέση { margin: .9rem 0; }

/* Το πλαίσιο κυλάει ΜΟΝΟ ΤΟΥ όταν ο μαθητής μεγεθύνει — ούτε η εκφώνηση
   ούτε η σελίδα μετακινούνται. Το ύψος έχει ταβάνι ώστε ένα διάγραμμα 4000px
   να μη διώχνει την εκφώνηση εκτός οθόνης· μέσα του κυλάει κανονικά. */
.διάγραμμα-πλαίσιο {
  position: relative;
  border: 1px solid var(--γραμμή);
  border-radius: 8px;
  background: var(--πλαίσιο);
}
.διάγραμμα-καμβάς {
  overflow: auto;
  max-height: 60vh;
  padding: .5rem;
}
.διάγραμμα-καμβάς svg { display: block; }

.διάγραμμα-εργαλεία {
  position: absolute;
  top: .35rem;
  right: .35rem;
  display: flex;
  gap: .2rem;
  z-index: 1;
}
.διάγραμμα-εργαλεία button {
  min-width: 1.8rem;
  padding: .1rem .3rem;
  font-size: .9rem;
  line-height: 1.2;
  /* Αδιαφανές φόντο: τα κουμπιά κάθονται ΠΑΝΩ στο διάγραμμα και χωρίς αυτό
     διαβάζονται μαζί με τα βέλη από κάτω τους. */
  background: var(--πλαίσιο);
}

/* ------------------------------- το συρόμενο παράθυρο του διαγράμματος */

/* ΔΕΝ ΕΙΝΑΙ MODAL, ΚΑΙ ΔΕΝ ΕΧΕΙ ΦΟΝΤΟ ΠΟΥ ΣΚΟΤΕΙΝΙΑΖΕΙ ΤΗ ΣΕΛΙΔΑ. Το
   διάγραμμα κοιτάζεται ΜΑΖΙ με τον κώδικα ή την εκφώνηση· ένα overlay που
   σβήνει ό,τι συγκρίνεις μαζί του δεν λύνει τίποτα. Πίσω του γράφεις
   κανονικά, και το διάγραμμα ακολουθεί ό,τι γράφεις. */
.διαγρ-παράθυρο {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 60;                    /* πάνω από το μενού (20) */
  display: flex;
  flex-direction: column;
  /* ΤΟ ΠΡΑΓΜΑΤΙΚΟ ΜΕΓΕΘΟΣ ΤΟ ΒΑΖΕΙ Η `μέτρησεΣτοΔιάγραμμα` ΣΤΟ ΑΝΟΙΓΜΑ,
     ανάλογα με το πόσο φαρδύ και ψηλό είναι ΑΥΤΟ το διάγραμμα. Τα νούμερα
     εδώ είναι μόνο για την ελάχιστη στιγμή πριν γίνει η μέτρηση — και για
     την περίπτωση που το SVG δεν δηλώνει διαστάσεις. Τα διαγράμματα ροής
     είναι στενά και ψηλά (μετρήθηκαν 134×422 ως 698×514 στο 3530), γι' αυτό
     η εφεδρεία είναι ψηλή και όχι φαρδιά. */
  width: min(42rem, 92vw);
  height: min(52rem, 88vh);
  /* Ελάχιστο μέγεθος για το `resize`: πιο μικρό δεν χωράει ούτε η μπάρα. */
  min-width: 16rem;
  min-height: 9rem;
  max-width: 98vw;
  max-height: 94vh;
  border: 1px solid var(--γραμμή);
  border-radius: 10px;
  background: var(--πλαίσιο);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .45);
  /* `resize` ΘΕΛΕΙ overflow ≠ visible για να εμφανιστεί η λαβή στη γωνία.
     Το κόστος είναι μηδέν εδώ: το περιεχόμενο κυλάει στον καμβά του. */
  overflow: hidden;
  resize: both;
}
.διαγρ-παράθυρο.παλιό .διάγραμμα-καμβάς { opacity: .38; }

.διαγρ-μπάρα {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .5rem .4rem .75rem;
  border-bottom: 1px solid var(--γραμμή);
  background: var(--χαρτί);
  font-family: system-ui, sans-serif;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--απαλό);
  cursor: grab;
  /* Χωρίς αυτό, το σύρσιμο στο κινητό κυλάει τη σελίδα από κάτω αντί να
     μετακινήσει το παράθυρο. */
  touch-action: none;
  user-select: none;
}
.διαγρ-παράθυρο.σύρεται .διαγρ-μπάρα { cursor: grabbing; }
.διαγρ-τίτλος { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.διαγρ-κλείσιμο {
  flex: 0 0 auto;
  min-width: 1.9rem;
  padding: .05rem .35rem;
  font-size: 1.15rem;
  line-height: 1.1;
  cursor: pointer;
}

/* Μέσα στο παράθυρο το πλαίσιο ΔΕΝ έχει δικό του περίγραμμα ούτε ταβάνι:
   το παράθυρο ΕΙΝΑΙ το πλαίσιο, και ο καμβάς παίρνει όλο το ύψος που
   περίσσεψε — αυτός είναι όλος ο λόγος που ανοίγει κανείς παράθυρο. */
.διαγρ-παράθυρο .διάγραμμα-πλαίσιο {
  flex: 1 1 auto;
  min-height: 0;
  border: 0;
  border-radius: 0;
  display: flex;
}
.διαγρ-παράθυρο .διάγραμμα-καμβάς {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  padding: .9rem;
}
/* Τα κουμπιά του ζουμ κάθονται πάνω δεξιά ΜΕΣΑ στον καμβά, όπως και στα
   διαγράμματα της εκφώνησης — ίδια θέση, ίδια συνήθεια. Λίγο πιο κάτω, για
   να μην ακουμπάνε τη μπάρα. */
.διαγρ-παράθυρο .διάγραμμα-εργαλεία { top: .5rem; right: .6rem; }

.διάγραμμα-λάθος {
  padding: .6rem .7rem;
  border: 1px dashed var(--γραμμή);
  border-radius: 8px;
  color: var(--απαλό);
  font-size: .9em;
}

/* Τα σχήματα. Ο ρόμβος ξεχωρίζει με ΧΡΩΜΑ και όχι μόνο με σχήμα: σε
   προβολή από μακριά η γωνία δεν διαβάζεται, το χρώμα ναι. */
.διάγραμμα .σχ { fill: var(--πλαίσιο); stroke: var(--απαλό); stroke-width: 1.6; }
.διάγραμμα .τερ { fill: color-mix(in srgb, var(--απαλό) 18%, transparent); }
.διάγραμμα .ρομ {
  fill: color-mix(in srgb, var(--τόνος) 16%, transparent);
  stroke: var(--τόνος);
}
.διάγραμμα text {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px;
  fill: var(--μελάνι);
}
.διάγραμμα text.κ { text-anchor: middle; }
.διάγραμμα text.ετ {
  font-family: system-ui, sans-serif;
  font-size: 11px;
  fill: var(--απαλό);
}
.διάγραμμα line, .διάγραμμα path { stroke: var(--απαλό); stroke-width: 1.6; fill: none; }
.διάγραμμα marker path { fill: var(--απαλό); stroke: none; }

/* ------------------------------------------------------------ το πρόχειρο */

/* Η στήλη της εκφώνησης γίνεται πλαίσιο κειμένου. Παίρνει ΟΛΟ το ύψος της
   στήλης: αν έμενε στο προεπιλεγμένο ύψος του textarea, θα κρεμόταν ένα
   κουτί τεσσάρων σειρών μέσα σε μισή άδεια οθόνη. */
.πρόχειρη {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.πρόχειρη .ταυτότητα { flex: 0 0 auto; }
#εκφ-πρόχειρη {
  flex: 1 1 auto;
  min-height: 6rem;
  width: 100%;
  resize: none;
  padding: .7rem .8rem;
  border: 1px solid var(--γραμμή);
  border-radius: 8px;
  background: var(--πλαίσιο);
  color: var(--μελάνι);
  /* Η γραμματοσειρά της ΕΚΦΩΝΗΣΗΣ, όχι του κώδικα: εκφώνηση γράφεται εδώ,
     και ακολουθεί τη δική της κλίμακα γραμμάτων από το μενού. */
  font: inherit;
  font-size: calc(.95rem * var(--κλ-εκφ, 1));
  line-height: 1.5;
  /* Ρητά, ώστε να μην ξαναγίνει αόρατο αν κάποτε επανέλθει γενικός κανόνας. */
  -webkit-text-fill-color: currentColor;
}
#εκφ-πρόχειρη:focus { outline: 2px solid var(--τόνος); outline-offset: -1px; }

/* Το `#εκφώνηση` έχει μεγάλο κάτω περιθώριο (4rem) ώστε να μη σκάει η
   τελευταία παράγραφος στην άκρη της οθόνης. Με πλαίσιο που πιάνει όλο το
   ύψος, αυτό το περιθώριο είναι σκέτο χαμένος χώρος κάτω από το κουτί.
   Η κλάση μπαίνει από τη `δείξεΣτήλη` — όχι με `:has()`, που δεν το ξέρουν
   οι παλιότεροι browser και εδώ δεν κερδίζει τίποτα. */
#εκφώνηση.σκέτο {
  padding-bottom: 1.4rem;
  display: flex;
  flex-direction: column;
}

/* ------------------------------------------- η όψη «όλο το φυλλάδιο» */

/* Το κουμπί που εναλλάσσει τις δύο όψεις της αριστερής στήλης. Κάθεται
   δίπλα στους δύο επιλογείς γιατί είναι κι αυτό τρόπος να διαλέξεις
   άσκηση — δεν είναι εργαλείο, άρα δεν πάει στο μενού. */
.όλες {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  border: 1px solid var(--γραμμή);
  border-radius: 8px;
  background: var(--πλαίσιο);
  color: var(--απαλό);
  cursor: pointer;
}
/* ΤΟ ΙΔΙΟ ΠΑΤΗΜΑ ΣΤΗΝ ΙΔΙΑ ΛΑΣΠΗ ΜΕ ΤΟ `.συγγραφέας` ΤΗΣ 24/8: ο επιλογέας
   κλάσης με `display` ΝΙΚΑΕΙ το `display: none` που δίνει ο browser στο
   `[hidden]`. Η JavaScript έβαζε σωστά `hidden = true` και η CSS το ακύρωνε
   σιωπηλά — το κουμπί φυλλαδίου έμενε ορατό μέσα στο πρόχειρο, που δεν έχει
   φυλλάδιο. Όποιος γράψει `display` σε κλάση εδώ μέσα, γράφει και αυτό. */
.όλες[hidden] { display: none; }
.όλες svg { width: 1.15em; height: 1.15em; }
.όλες:hover { color: var(--τόνος); }
/* Πατημένο = η λίστα είναι ανοιχτή. Το κουμπί είναι η ΜΟΝΗ ένδειξη ότι
   υπάρχει δεύτερη όψη, οπότε πρέπει να λέει και σε ποια βρίσκεσαι. */
.όλες[aria-pressed="true"] {
  background: var(--τόνος);
  border-color: var(--τόνος);
  color: #fff;
}

.φυλλάδιο-κεφαλή { margin-bottom: 1rem; }
.φυλλάδιο-κεφαλή h1 {
  margin: 0;
  font-size: calc(1.15rem * var(--κλ-εκφ, 1));
  font-weight: 600;
}
.φυλλάδιο-κεφαλή p {
  margin: .2rem 0 0;
  color: var(--απαλό);
  font-size: calc(.85rem * var(--κλ-εκφ, 1));
}

.κάρτα {
  border: 1px solid var(--γραμμή);
  border-radius: 10px;
  background: var(--πλαίσιο);
  padding: .85rem 1rem 1rem;
  margin-bottom: .8rem;
  cursor: pointer;
}
.κάρτα:hover { border-color: var(--τόνος); }
.κάρτα:focus-visible { outline: 2px solid var(--τόνος); outline-offset: 2px; }

/* Η ΤΡΕΧΟΥΣΑ άσκηση: λωρίδα στην αριστερή άκρη. Όχι φόντο — η καρτέλα
   περιέχει ολόκληρη την εκφώνηση, και χρωματιστό φόντο σε παράγραφο που
   διαβάζεται στην τάξη κουράζει. */
.κάρτα.τώρα {
  border-color: var(--τόνος);
  box-shadow: inset 3px 0 0 var(--τόνος);
}

.κάρτα h2 {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  flex-wrap: wrap;
  margin: 0 0 .45rem;
  font-size: calc(1rem * var(--κλ-εκφ, 1));
  font-weight: 400;
}
.κάρτα h2 .αριθμός {
  font-weight: 700;
  color: var(--τόνος);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.κάρτα .κατάσταση {
  font-size: calc(.75rem * var(--κλ-εκφ, 1));
  padding: .1rem .5rem;
  border-radius: 999px;
  border: 1px solid currentColor;
}
.κάρτα .κατάσταση.τέλειωσε { color: var(--σωστό); }
.κάρτα .κατάσταση.ιδωμένη  { color: var(--απαλό); }

/* Η εκφώνηση μέσα στην καρτέλα κρατάει τη μορφή της, μαζεμένη. */
.κάρτα .σώμα > :first-child { margin-top: 0; }
.κάρτα .σώμα > :last-child  { margin-bottom: 0; }
.κάρτα .σήματα { margin-top: .6rem; }

/* Στην όψη φυλλαδίου δεν υπάρχει «τρέχουσα εκφώνηση» να κρυφτεί όταν
   γράφει ο μαθητής στο κινητό — ο κανόνας πιο κάτω αφορά την άλλη όψη. */

/* ---------------------------------------------------------- η εκφώνηση */

/* Κώδικας που ΠΑΡΑΤΙΘΕΤΑΙ μέσα στην εκφώνηση — όχι για εκτέλεση, αλλά για
   να μιλήσει η άσκηση γι' αυτόν. */
#εκφώνηση .δοσμένος {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: calc(.84rem * var(--κλ-εκφ, 1));
  line-height: 1.6;
  background: var(--κώδικας);
  border-radius: 7px;
  padding: .7rem .85rem;
  overflow-x: auto;
  white-space: pre;
  margin: .8rem 0;
}
/* Το κουτί κύλισης κάθε πίνακα. Ένας πίνακας 18 στηλών (απεικόνιση μνήμης,
   4710.05) δεν χωράει σε στήλη κινητού με κανέναν τρόπο· ή θα κυλήσει μόνος
   του, ή θα στριμωχτεί σε κελιά 15px με τα νούμερα σπασμένα κάθετα. */
.πίνακας-κύλιση { overflow-x: auto; margin: .8rem 0; }
/* Ο πλατύς παίρνει το πλάτος που θέλει· ο στενός απλώνεται όπως πριν. */
.πίνακας-κύλιση > table { min-width: max-content; }
.πίνακας-κύλιση > table.πλέγμα { min-width: 0; }

#εκφώνηση table {
  border-collapse: collapse;
  font-size: calc(.9rem * var(--κλ-εκφ, 1));
  width: 100%;
}
/* ------------------------------------------- η απεικόνιση στη μνήμη (:::μνήμη)

   ΚΑΘΕ ΚΟΜΒΟΣ ΔΙΚΟ ΤΟΥ ΚΟΥΤΙ, ΚΑΙ ΜΕΣΑ ΤΟΥ ΤΑ ΔΕΔΟΜΕΝΑ ΧΩΡΙΣΤΑ ΑΠΟ ΤΟΥΣ
   ΔΕΙΚΤΕΣ. Ως πίνακας markdown το σχήμα έβγαινε ένα ενιαίο πλέγμα, όπου δεν
   φαινόταν ούτε πού τελειώνει ο ένας κόμβος ούτε ποια γραμμή είναι τι.

   Το ύψος κάθε κελιού είναι ΜΙΑ μεταβλητή, και το ύψος των δεικτών βγαίνει
   πολλαπλασιάζοντάς την επί το πλήθος τους (`--μ-πλήθος`, από το χτίσιμο).
   Έτσι το υπόμνημα αριστερά στοιχίζεται ΥΠΟΛΟΓΙΣΜΕΝΑ με τις κάρτες, και δεν
   ξεκολλάει όταν αλλάξει η γραμματοσειρά ή το μέγεθος από το μενού. */
.μνήμη {
  --μ-κελί: 1.9em;
  /* Το φόντο του κολλημένου υπομνήματος πρέπει να είναι ΤΟΥ ΔΟΧΕΙΟΥ, όχι
     σταθερό: η ίδια απεικόνιση βγαίνει και στην εκφώνηση (χαρτί) και μέσα σε
     καρτέλα (πλαίσιο). Με σταθερό `--χαρτί` έβγαινε υπόλευκο μπάλωμα πάνω
     στη λευκή κάρτα — μετρήθηκε, #fbfaf7 πάνω σε #ffffff. */
  --μ-φόντο: var(--χαρτί);
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin: .9rem 0;
  font-size: calc(.9rem * var(--κλ-εκφ, 1));
  font-variant-numeric: tabular-nums;
  width: max-content;
}

/* Η σχετική θέση κάθεται ΠΑΝΩ από τον κόμβο και όχι μέσα του: είναι η
   διεύθυνσή του στη RAM, όχι περιεχόμενό του — έτσι το λέει και η εκφώνηση
   («πάνω από κάθε κόμβο εμφανίζεται η σχετική ονομασία του»). */
.μ-θέση {
  height: 1.45em;
  line-height: 1.45em;
  text-align: center;
  color: var(--απαλό);
  font-size: .88em;
}

.μ-κουτί {
  border: 1px solid var(--μελάνι);
  border-radius: 4px;
  background: var(--πλαίσιο);
  overflow: hidden;
  min-width: 2.9em;
}

.μ-δεδομένα,
.μ-δείκτης {
  height: var(--μ-κελί);
  line-height: var(--μ-κελί);
  padding: 0 .5em;
  text-align: center;
  white-space: nowrap;
}

.μ-δεδομένα { font-weight: 600; }

/* Η ΧΟΝΤΡΗ ΓΡΑΜΜΗ ΕΙΝΑΙ ΤΟ ΟΛΟ ΝΟΗΜΑ: χωρίζει τα δεδομένα από τους δείκτες.
   Οι δείκτες μεταξύ τους χωρίζονται με λεπτή — είναι το ίδιο είδος πεδίου. */
.μ-δείκτες { border-top: 2px solid var(--μελάνι); }
.μ-δείκτης + .μ-δείκτης { border-top: 1px solid var(--γραμμή); }

/* Οι λέξεις «Δεδομένα» και «Δείκτες» γράφονται ΜΙΑ φορά. Το υπόμνημα είναι
   κόμβος χωρίς κουτί — ίδια δομή, άρα ίδια ύψη, άρα στοιχίζεται μόνο του. */
/* ΤΟ ΥΠΟΜΝΗΜΑ ΜΕΝΕΙ ΚΟΛΛΗΜΕΝΟ ΑΡΙΣΤΕΡΑ. Σε στήλη κινητού οι οκτώ κόμβοι
   δεν χωράνε και το κουτί κυλάει — χωρίς αυτό, η πρώτη κίνηση του δαχτύλου
   έπαιρνε μαζί της τις λέξεις «Δεδομένα» και «Δείκτης», και ο μαθητής έβλεπε
   δύο σειρές αριθμούς χωρίς να ξέρει ποια είναι ποια. Θέλει φόντο: από κάτω
   του περνάνε οι κάρτες. */
.μ-υπόμνημα {
  color: var(--απαλό);
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--μ-φόντο);
  /* Αυλάκι ΜΕΤΑ τις λέξεις, όχι διακόσμηση: η κάρτα που περνάει από κάτω
     κόβεται στη μέση, και κολλητά στο υπόμνημα το μισό «Κ» διαβαζόταν σαν
     να ανήκει στην ετικέτα. Με το αυλάκι φαίνεται αυτό που είναι — κάρτα
     που κύλησε από κάτω. */
  padding-right: .55rem;
}
.κάρτα .μνήμη { --μ-φόντο: var(--πλαίσιο); }
.μ-υπόμνημα .μ-δεδομένα { font-weight: 400; }
.μ-κουτί.μ-κενό {
  border-color: transparent;
  background: none;
  min-width: 0;
}
.μ-κενό .μ-δεδομένα,
.μ-κενό .μ-δείκτης { text-align: right; padding-right: .35em; }
.μ-κενό .μ-δείκτες { border-top-color: transparent; }
/* Το «Δείκτες» κεντράρεται απέναντι σε ΟΛΕΣ τις θέσεις δείκτη μαζί, όχι
   στην πρώτη — αλλιώς σε δέντρο με τρία παιδιά η λέξη δείχνει μόνο τη μία. */
.μ-κενό .μ-δείκτες {
  display: flex;
  align-items: center;
  /* +2px ΓΙΑ ΤΗ ΧΟΝΤΡΗ ΓΡΑΜΜΗ, και ΜΟΝΟ γι' αυτήν: με `box-sizing: border-box`
     οι λεπτές γραμμές ανάμεσα στους δείκτες τρώνε από το ύψος του ίδιου τους
     του κελιού και δεν προσθέτουν τίποτα. Η πρώτη εκδοχή μετρούσε ανάποδα —
     ένα ανά χώρισμα, μηδέν για τη χοντρή — και ΕΤΥΧΕ να βγαίνει ίδιο νούμερο
     στους ΤΡΕΙΣ δείκτες της 4810.06. Το λάθος φάνηκε στην 4710.04, που έχει
     ΕΝΑΝ: υπόμνημα 27.36 απέναντι σε κάρτα 29.36. Δύο πίξελ, αόρατα με το
     μάτι, και σωστά μόνο κατά σύμπτωση σε μία από τις δύο ασκήσεις. */
  height: calc(2px + var(--μ-πλήθος) * var(--μ-κελί));
}
.μ-κενό .μ-δείκτες .μ-δείκτης { height: auto; line-height: 1.25; flex: 1; }

/* Οι εικόνες που ήρθαν από τα Word: σχήματα λιστών, κρίκοι, απεικονίσεις
   μνήμης. Λευκό φόντο ΠΑΝΤΑ — είναι μαύρο σχέδιο σε διαφάνεια και στο
   σκούρο θέμα θα εξαφανιζόταν. */
.εικόνα-άσκησης {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1rem 0;
  border: 1px solid var(--γραμμή);
  border-radius: 6px;
  background: #fff;
  padding: .4rem;
}

#εκφώνηση th, #εκφώνηση td {
  border: 1px solid var(--γραμμή);
  padding: .3rem .5rem;
  text-align: left;
}
#εκφώνηση th { background: var(--κώδικας); font-weight: 600; }

/* Ο πίνακας-ΕΙΚΟΝΑ του δισδιάστατου (ασκήσεις 41χχ): καμία γραμμή του δεν
   είναι κεφαλίδα, και τα κελιά είναι αριθμοί — στοιχίζονται στο κέντρο,
   με ίσο πλάτος, ώστε να φαίνεται πλέγμα και όχι λίστα. Δεν πιάνει όλο το
   πλάτος: ένας 5×5 τεντωμένος σε 100% δεν μοιάζει με πίνακα. */
#εκφώνηση table.πλέγμα { width: auto; }
#εκφώνηση table.πλέγμα td {
  text-align: center;
  min-width: 2.6em;
  font-variant-numeric: tabular-nums;
}

#εκφώνηση { padding: 1.4rem 1.6rem 4rem; }

/* Ο αριθμός ΕΙΝΑΙ η επικεφαλίδα — δεν υπάρχει τίτλος άσκησης. Μία γραμμή,
   χαμηλή, ώστε να μένει ο χώρος στην εκφώνηση και στον κώδικα. */
.ταυτότητα {
  display: flex;
  align-items: baseline;
  gap: .55rem;
  flex-wrap: wrap;
  margin: 0 0 .7rem;
  font-size: calc(1rem * var(--κλ-εκφ, 1));
  font-weight: 400;
  line-height: 1.3;
}
.αριθμός {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: calc(1.05rem * var(--κλ-εκφ, 1));
  color: var(--τόνος);
  font-weight: 700;
  letter-spacing: .03em;
}
.κεφάλαιο { font-size: calc(.82rem * var(--κλ-εκφ, 1)); color: var(--απαλό); }
#εκφώνηση li { margin-bottom: .25rem; }
#εκφώνηση code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: .9em;
  background: var(--κώδικας);
  padding: .1em .35em;
  border-radius: 4px;
}
.σημείωση { color: var(--απαλό); font-size: calc(.95rem * var(--κλ-εκφ, 1)); }

/* Η σημείωση του τετραδίου: γκρίζα και με αστερίσκο, όπως μια υποσημείωση
   σε φυλλάδιο. Δεν πρέπει να διαβάζεται ως μέρος της εκφώνησης — αλλά ούτε
   να χάνεται, γι' αυτό κρατάει τη γραμμή πάνω της για διαχωρισμό. */
.σημείωση-τετραδίου {
  margin: 1.4rem 0 .2rem;
  padding-top: .7rem;
  border-top: 1px solid var(--γραμμή);
  font-size: calc(.82rem * var(--κλ-εκφ, 1));
  line-height: 1.5;
  color: var(--απαλό);
}
.σημείωση-τετραδίου b { font-weight: 600; color: var(--απαλό); }
.κάρτα .σημείωση-τετραδίου { margin: .9rem 0 0; }

.σήματα { display: flex; gap: .4rem; flex-wrap: wrap; margin: 1.2rem 0 .6rem; }
.σήμα {
  font-family: system-ui, sans-serif;
  font-size: calc(.74rem * var(--κλ-εκφ, 1));
  letter-spacing: .02em;
  padding: .2rem .55rem;
  border-radius: 999px;
  border: 1px solid var(--γραμμή);
  color: var(--απαλό);
}
.σήμα.λύση { border-color: var(--σωστό); color: var(--σωστό); }
.σήμα.χωρίς-λύση { opacity: .75; }

/* «Λείπουν δεδομένα»: ΠΡΟΕΙΔΟΠΟΙΗΣΗ, όχι κατάσταση — γι' αυτό χρωματιστό
   και όχι απλώς πιο θαμπό. Είναι <button> επειδή ανοίγει την επεξήγηση με
   πάτημα· χρειάζεται μηδενισμό της εμφάνισης κουμπιού για να μοιάζει με τα
   αδελφάκια του. */
button.σήμα {
  font: inherit;
  font-size: inherit;
  cursor: help;
  background: none;
}
.σήμα.λείπουν {
  border-color: var(--προσοχή);
  color: var(--προσοχή);
}
.σήμα.λείπουν:hover, .σήμα.λείπουν:focus-visible {
  background: color-mix(in srgb, var(--προσοχή) 14%, transparent);
}
/* ───────────────────────── ο πάγκος ─────────────────────────
   Η δομή που ο μαθητής τη ΧΕΙΡΙΖΕΤΑΙ. Κάθεται μέσα στην εκφώνηση, εκεί που
   την έγραψε ο συγγραφέας, οπότε πρέπει να δείχνει «όργανο» και όχι
   «πίνακας δεδομένων»: δικό του πλαίσιο, δικό του φόντο. */
.πάγκος {
  border: 1px solid var(--γραμμή);
  border-radius: 8px;
  background: var(--πλαίσιο);
  padding: .7rem .8rem .6rem;
  margin: 1rem 0;
  max-width: 100%;
}
.πάγκος-κεφαλή {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .8rem;
  flex-wrap: wrap;
  margin-bottom: .6rem;
}
.πάγκος-τίτλος {
  font-size: calc(.85rem * var(--κλ-εκφ, 1));
  font-weight: 600;
  color: var(--απαλό);
  letter-spacing: .02em;
}
/* Ο ΑΡΙΘΜΟΣ ΤΟΥ ΔΕΙΚΤΗ, πάντα ορατός. Όταν η δομή αδειάσει δεν υπάρχει
   κελί να δείξει το βελάκι, και το «top = 0» είναι ακριβώς η ζητούμενη
   απάντηση στις μισές ασκήσεις. */
.πάγκος-δείκτες {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: calc(.82rem * var(--κλ-εκφ, 1));
  color: var(--απαλό);
}
.πάγκος-δείκτες b { color: var(--τόνος); }

.πάγκος-σχήμα { display: flex; gap: 2px; }
.πάγκος[data-είδος="στοίβα"] .πάγκος-σχήμα { flex-direction: column; width: max-content; }
.πάγκος[data-είδος="ουρά"]   .πάγκος-σχήμα { flex-direction: row; overflow-x: auto; padding-bottom: .2rem; }

.πάγκος-κελί {
  display: flex;
  align-items: center;
  gap: .5rem;
  border: 1px solid var(--γραμμή);
  background: var(--κώδικας);
  padding: .22rem .45rem;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: calc(.85rem * var(--κλ-εκφ, 1));
  transition: background-color .35s ease;
}
/* Η ΓΡΑΜΜΗ ΤΟΥ ΔΕΙΚΤΗ ΚΡΑΤΑΕΙ ΤΗ ΘΕΣΗ ΤΗΣ ΚΑΙ ΟΤΑΝ ΕΙΝΑΙ ΑΔΕΙΑ: αλλιώς
   τα κελιά με front/rear είναι ψηλότερα από τα υπόλοιπα και η ουρά
   βγαίνει κουρελιασμένη — μοιάζει με σφάλμα, όχι με δομή. */
.πάγκος[data-είδος="ουρά"] .πάγκος-σχήμα { align-items: stretch; }
.πάγκος[data-είδος="ουρά"] .πάγκος-κελί {
  flex-direction: column;
  gap: .1rem;
  justify-content: flex-start;
  /* ΣΤΕΝΟ. Το πλάτος το όριζε παλιά η χειρότερη περίπτωση — front και rear
     δίπλα-δίπλα κάτω από το ίδιο κελί — και τα κουτιά έβγαιναν τεράστια σε
     ΟΛΗ την ουρά για χάρη μιας σπάνιας στιγμής. Τώρα τα δύο σημάδια
     στοιβάζονται κάθετα, οπότε το πλάτος το ορίζει η λέξη, όχι δύο λέξεις. */
  min-width: 3.2em;
  padding-bottom: .25rem;
}
.πάγκος[data-είδος="ουρά"] .π-σημάδια {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Κρατάει τη θέση ΕΝΟΣ σημαδιού ακόμη κι όταν είναι άδειο, ώστε τα κελιά
     να έχουν όλα το ίδιο ύψος. Στη σπάνια στιγμή που πέφτουν δύο, ψηλώνει
     ΟΛΗ η σειρά μαζί (align-items: stretch) — και μένει ευθυγραμμισμένη. */
  min-height: 1.45em;
  margin-top: .1em;
}
.πάγκος[data-είδος="στοίβα"] .π-σημάδια { display: inline-flex; gap: .35em; }
.π-δείκτης { color: var(--απαλό); min-width: 1.5em; text-align: right; }
.π-τιμή { min-width: 2.6em; text-align: center; color: var(--απαλό); }
.πάγκος-κελί.γεμάτο { background: var(--πλαίσιο); }
.πάγκος-κελί.γεμάτο .π-τιμή { color: var(--μελάνι); font-weight: 600; }
.πάγκος-κελί.άλλαξε { background: color-mix(in srgb, var(--τόνος) 22%, transparent); }

/* Η ΘΕΣΗ 0: δεν αποθηκεύει, ΦΙΛΟΞΕΝΕΙ ΤΟΝ ΔΕΙΚΤΗ όταν η δομή είναι άδεια.
   Διακεκομμένο περίγραμμα και χωρίς φόντο, ώστε να μη διαβάζεται ποτέ ως
   κελί με περιεχόμενο — είναι θέση, όχι αποθήκη. */
.πάγκος-κελί.μηδέν {
  background: none;
  border-style: dashed;
  opacity: .8;
}
.πάγκος-κελί.μηδέν .π-δείκτης { opacity: .7; }

/* Το βελάκι του δείκτη γράφεται ΔΙΠΛΑ στο κελί, όχι μέσα: το κελί ανήκει
   στα δεδομένα, ο δείκτης δείχνει προς αυτά. */
.π-σημάδι {
  font-size: .74em;
  font-weight: 700;
  color: var(--τόνος);
  white-space: nowrap;
}
.πάγκος[data-είδος="στοίβα"] .π-σημάδι::before { content: "\2190\00a0"; }

/* ΣΤΗΝ ΟΥΡΑ ΤΟ ΒΕΛΑΚΙ ΚΑΘΕΤΑΙ ΠΑΝΩ ΑΠΟ ΤΗ ΛΕΞΗ ΤΟΥ, όχι μπροστά της: έτσι
   το σημάδι είναι δύο στενές γραμμές αντί για μία πλατιά, και το κελί
   στενεύει. Κάθε λέξη κρατάει ΤΟ ΔΙΚΟ ΤΗΣ βελάκι — όταν front και rear
   πέφτουν στο ίδιο κελί μπαίνουν το ένα κάτω από το άλλο, και φαίνεται
   καθαρά ότι είναι δύο δείκτες στην ίδια θέση και όχι ένας διπλός. */
.πάγκος[data-είδος="ουρά"] .π-σημάδι {
  display: block;
  font-size: .62em;
  line-height: 1.05;
  text-align: center;
}
.πάγκος[data-είδος="ουρά"] .π-σημάδι::before {
  content: "\2191";
  display: block;
}

/* ── η αλυσίδα της λίστας ──────────────────────────────────────────────
   ΑΝΑΔΙΠΛΩΝΕΤΑΙ. Αυτό είναι όλο το νόημα: το παλιό σχήμα ήταν εικόνα δύο
   σειρών, που σε κινητό γινόταν δυσανάγνωστη και σε υπολογιστή έμενε μικρή.
   Εδώ οι κόμβοι είναι κουτιά σε `flex-wrap` — χωράνε όσοι χωράνε ανά σειρά,
   σε κάθε πλάτος, χωρίς κανέναν υπολογισμό. */
.πάγκος[data-είδος="λίστα"] .πάγκος-σχήμα {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem .35rem;
}
.π-κεφαλή {
  border: 1px solid var(--τόνος);
  border-radius: 8px;
  padding: .3rem .5rem;
  font-size: calc(.8rem * var(--κλ-εκφ, 1));
  color: var(--τόνος);
  white-space: nowrap;
}
.π-βέλος { color: var(--απαλό); font-size: 1.1em; }
.π-άδεια { color: var(--απαλό); font-size: calc(.85rem * var(--κλ-εκφ, 1)); }

/* Ο κόμβος όπως στο χαρτί: δεδομένα αριστερά, δείκτης δεξιά σε δικό του
   γκρίζο τετράγωνο. Το `∅` στον τελευταίο είναι το NULL. */
.π-κόμβος {
  position: relative;
  display: flex;
  align-items: stretch;
  border: 1px solid var(--γραμμή);
  border-radius: 8px;
  background: var(--πλαίσιο);
  cursor: pointer;
  margin-top: .85em;                 /* χώρος για τον αύξοντα από πάνω */
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: calc(.85rem * var(--κλ-εκφ, 1));
}
.π-κόμβος:hover { border-color: var(--τόνος); }
.π-κόμβος.επιλεγμένος {
  border-color: var(--τόνος);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--τόνος) 35%, transparent);
}
.π-αύξων {
  position: absolute;
  top: -1.15em; left: 0; right: 0;
  text-align: center;
  font-size: .68em;
  color: var(--απαλό);
}
.π-δεδομένα {
  padding: .3rem .55rem;
  min-width: 2.2em;
  text-align: center;
  font-weight: 600;
  color: var(--μελάνι);
}
/* Το κουτί του δείκτη είναι ΚΕΝΟ. Γεμίζει μόνο όταν ο δείκτης είναι NULL,
   και τότε με μεγάλη τελεία — όπως γράφεται στο χαρτί. Κρατάει σταθερό
   πλάτος ώστε οι κόμβοι να μοιάζουν μεταξύ τους άδειοι ή γεμάτοι. */
.π-σύνδεσμος {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5em;
  padding: .3rem .35rem;
  background: var(--κώδικας);
  color: var(--μελάνι);
  font-size: 1.15em;
  line-height: 1;
}
.π-σύνδεσμος.μετά {
  border-left: 1px solid var(--γραμμή);
  border-radius: 0 7px 7px 0;
}
.π-σύνδεσμος.πριν {
  border-right: 1px solid var(--γραμμή);
  border-radius: 7px 0 0 7px;
}

/* ── το δέντρο ─────────────────────────────────────────────────────────
   SVG, γιατί οι ακμές είναι γραμμές ανάμεσα σε αυθαίρετα σημεία — το μόνο
   σχήμα σε όλο το περιβάλλον που δεν βγαίνει με κουτιά. Το πλάτος του το
   ορίζει το ίδιο· αν δεν χωράει, κυλάει ο καμβάς και όχι η σελίδα. */
.πάγκος[data-είδος="δέντρο"] .πάγκος-σχήμα {
  flex-direction: row;
  overflow-x: auto;
  padding: .2rem 0 .4rem;
}
/* Ο ΓΡΑΦΟΣ. Ίδια εμφάνιση κόμβου με το δέντρο — είναι η ίδια έννοια, και δύο
   διαφορετικοί κύκλοι στην ίδια σελίδα θα έλεγαν ότι κάτι διαφέρει. Η ακμή
   είναι ΠΙΟ ΣΚΟΥΡΗ από του δέντρου: στον γράφο οι ακμές ΕΙΝΑΙ η απάντηση, ενώ
   στο δέντρο απλώς επιβεβαιώνουν μια ιεραρχία που φαίνεται ήδη από τη θέση. */
.γ-γράφος { max-width: none; }
.γ-ακμή { stroke: var(--απαλό); stroke-width: 1.6; }
.γ-μύτη { fill: var(--απαλό); }
.γ-κόμβος { cursor: pointer; }
.γ-κόμβος ellipse {
  fill: var(--πλαίσιο);
  stroke: var(--απαλό);
  stroke-width: 1.5;
  transition: stroke .15s ease;
}
.γ-κόμβος text {
  text-anchor: middle;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px;
  font-weight: 600;
  fill: var(--μελάνι);
  pointer-events: none;
}
.γ-κόμβος:hover ellipse { stroke: var(--τόνος); }
.γ-κόμβος.επιλεγμένος ellipse {
  stroke: var(--τόνος);
  stroke-width: 3;
  fill: color-mix(in srgb, var(--τόνος) 18%, var(--πλαίσιο));
}

.δ-δέντρο { max-width: none; }
.δ-ακμή { stroke: var(--γραμμή); stroke-width: 1.5; }
.δ-κόμβος { cursor: pointer; }
.δ-κόμβος circle {
  fill: var(--πλαίσιο);
  stroke: var(--απαλό);
  stroke-width: 1.5;
  transition: stroke .15s ease;
}
.δ-κόμβος text {
  text-anchor: middle;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px;
  font-weight: 600;
  fill: var(--μελάνι);
  pointer-events: none;
}
.δ-κόμβος:hover circle { stroke: var(--τόνος); }
.δ-κόμβος.επιλεγμένος circle {
  stroke: var(--τόνος);
  stroke-width: 3;
  fill: color-mix(in srgb, var(--τόνος) 18%, var(--πλαίσιο));
}

.πάγκος-χειριστήρια {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
  align-items: center;
  margin-top: .7rem;
}
.πάγκος-τιμή {
  width: 6.5em;
  padding: .28rem .45rem;
  border: 1px solid var(--γραμμή);
  border-radius: 6px;
  background: var(--χαρτί);
  color: var(--μελάνι);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: calc(.85rem * var(--κλ-εκφ, 1));
}
.πάγκος-χειριστήρια button {
  padding: .28rem .7rem;
  border: 1px solid var(--γραμμή);
  border-radius: 6px;
  background: var(--χαρτί);
  color: var(--μελάνι);
  font: inherit;
  font-size: calc(.8rem * var(--κλ-εκφ, 1));
  cursor: pointer;
}
.πάγκος-χειριστήρια button:hover { border-color: var(--τόνος); color: var(--τόνος); }
.πάγκος-χειριστήρια button.ήπιο { color: var(--απαλό); margin-left: auto; }

.πάγκος-μήνυμα {
  margin: .5rem 0 0;
  min-height: 1.2em;
  font-size: calc(.8rem * var(--κλ-εκφ, 1));
  color: var(--απαλό);
}
.πάγκος-μήνυμα.λάθος { color: var(--λάθος); }
.πάγκος-μήνυμα.προσοχή { color: var(--προσοχή); }
.πάγκος-μήνυμα.έξοδος { color: var(--τόνος); }
/* Η ΣΕΙΡΑ ΤΩΝ ΠΡΑΞΕΩΝ ΠΟΥ ΕΚΑΝΕ, όχι η σειρά που έπρεπε να κάνει. Οι μισές
   ασκήσεις ζητούν ακριβώς αυτό: «τα στοιχεία που απωθήθηκαν, με τη σειρά». */
.πάγκος-ιστορικό {
  margin: .25rem 0 0;
  font-size: calc(.78rem * var(--κλ-εκφ, 1));
  color: var(--απαλό);
  line-height: 1.5;
}

/* Το κουμπί «βγες σε παράθυρο», δίπλα στους δείκτες. Ίδιος ρόλος με το ⛶
   του διαγράμματος, γι' αυτό και ίδιο ύφος: διακριτικό ώσπου να το θελήσεις. */
.πάγκος-έξω {
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  color: var(--απαλό);
  font: inherit;
  font-size: calc(.9rem * var(--κλ-εκφ, 1));
  line-height: 1;
  padding: .15rem .35rem;
  cursor: pointer;
}
.πάγκος-έξω:hover, .πάγκος-έξω:focus-visible {
  border-color: var(--γραμμή);
  color: var(--τόνος);
}
.πάγκος-κεφαλή { align-items: center; }
.πάγκος-κεφαλή .πάγκος-δείκτες { margin-left: auto; }

/* Ο ΠΑΓΚΟΣ ΣΕ ΠΑΡΑΘΥΡΟ. Δανείζεται ολόκληρο το κέλυφος του διαγράμματος —
   μπάρα, σύρσιμο, λαβή αλλαγής μεγέθους — και αλλάζει μόνο το τι κάθεται
   μέσα. Το μέγεθος το βάζει η `άνοιξεΠάγκο` στο άνοιγμα, στα μέτρα ΑΥΤΟΥ
   του πάγκου· τα νούμερα εδώ ισχύουν μόνο για τη στιγμή πριν μετρηθεί. */
.πάγκος-παράθυρο { width: min(34rem, 92vw); height: auto; }
.πάγκος-θήκη {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: .2rem .9rem .9rem;
}
/* Μέσα στο παράθυρο ο πάγκος δεν χρειάζεται δικό του πλαίσιο: το παράθυρο
   ΕΙΝΑΙ το πλαίσιό του. Διπλό περίγραμμα θα έμοιαζε με λάθος. */
.πάγκος-θήκη .πάγκος {
  border: 0;
  background: none;
  padding: 0;
  margin: .6rem 0 0;
}
.πάγκος-θήκη .πάγκος-έξω,
.πάγκος-θήκη .πάγκος-τίτλος { display: none; }
/* ΜΕΣΑ ΣΤΟ ΠΑΡΑΘΥΡΟ Η ΟΥΡΑ ΑΠΛΩΝΕΤΑΙ ΟΛΟΚΛΗΡΗ. Στην εκφώνηση το σχήμα
   κυλάει μόνο του, γιατί η στήλη είναι στενή και δεν θέλουμε να σέρνει μαζί
   του όλη τη σελίδα. Στο παράθυρο αυτό είναι ακριβώς λάθος: το παράθυρο
   άνοιξε ΓΙΑ να δει ο χρήστης ολόκληρη τη δομή, και μια ουρά 8 θέσεων που
   ξανακυλάει μέσα σε παράθυρο 360px δεν έλυσε τίποτα. Κυλάει η θήκη — και
   μόνο αν δεν χωράει ούτε στην οθόνη. */
.πάγκος-θήκη .πάγκος-σχήμα { overflow: visible; width: max-content; }

/* Η θέση που άφησε πίσω του. ΧΩΡΙΣ αυτό, ο πάγκος απλώς «εξαφανιζόταν» από
   την εκφώνηση και το παράθυρο μπορεί να είχε συρθεί κάπου που δεν κοιτάς. */
.πάγκος-έφυγε { margin: 1rem 0; }
.πάγκος-έφυγε button {
  width: 100%;
  padding: .55rem .7rem;
  border: 1px dashed var(--γραμμή);
  border-radius: 8px;
  background: none;
  color: var(--απαλό);
  font: inherit;
  font-size: calc(.8rem * var(--κλ-εκφ, 1));
  cursor: pointer;
}
.πάγκος-έφυγε button:hover { border-color: var(--τόνος); color: var(--τόνος); }

.επεξήγηση {
  margin: -.2rem 0 .8rem;
  padding: .5rem .7rem;
  border-left: 3px solid var(--προσοχή);
  background: var(--κώδικας);
  font-size: calc(.85rem * var(--κλ-εκφ, 1));
  line-height: 1.45;
  color: var(--απαλό);
}

.δοκιμαστικές {
  margin-top: 1.6rem;
  border-top: 1px solid var(--γραμμή);
  padding-top: .9rem;
}
.δοκιμαστικές h2 {
  font-family: system-ui, sans-serif;
  font-size: calc(.8rem * var(--κλ-εκφ, 1));
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--απαλό);
  margin: 0 0 .5rem;
}
.δοκιμαστικές button {
  display: block;
  width: 100%;
  text-align: left;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: calc(.85rem * var(--κλ-εκφ, 1));
  margin-bottom: .35rem;
}

/* --------------------------------------------------------------- «Δίνεται» */

/* Ό,τι δίνεται είναι ΟΡΑΤΟ. Ένας κρυφός πίνακας που επιβάλλει όνομα
   μεταβλητής παράγει μηνύματα λάθους για κώδικα που ο μαθητής δεν βλέπει
   πουθενά — το χειρότερο είδος σύγχυσης. */
.δίνεται {
  border-bottom: 1px solid var(--γραμμή);
  background: var(--πλαίσιο);
  padding: .55rem .9rem .6rem;
  max-height: 30vh;
  overflow: auto;
  flex: 0 0 auto;
}
.δίνεται pre {
  margin: .1rem 0 .4rem;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: calc(.82rem * var(--κλ-κωδ, 1));
  line-height: 1.55;
  color: var(--απαλό);
  white-space: pre;
  overflow-x: auto;
}
.ενέργειες-δίνεται { display: flex; gap: .4rem; }
.ενέργειες-δίνεται button { font-size: calc(.82rem * var(--κλ-κωδ, 1)); padding: .25rem .6rem; }

.δίνεται.κλειστό { max-height: none; overflow: visible; padding-bottom: .5rem; }
.δίνεται.κλειστό pre,
.δίνεται.κλειστό .ενέργειες-δίνεται { display: none; }
.δίνεται.κλειστό .διακόπτης { padding-bottom: 0; }
.δίνεται.κλειστό .διακόπτης svg { transform: rotate(-90deg); }

/* ------------------------------------------------------------ ο συντάκτης */

#εργασία {
  display: grid;
  grid-template-rows: auto minmax(7rem, 1fr) auto auto;
  /* «Δίνεται» · συντάκτης · πλήκτρα · κονσόλα. Ο συντάκτης δεν επιτρέπεται να
     συρρικνωθεί στο τίποτα όταν μεγαλώσουν τα άλλα δύο — ο μαθητής πρέπει
     να βλέπει πάντα τον κώδικά του.

     Οι γραμμές δίνονται ΡΗΤΑ σε κάθε παιδί: όταν κρύβεται το «Δίνεται», τα
     υπόλοιπα μετατοπίζονται και η μπάρα συμβόλων κληρονομούσε τη γραμμή
     minmax(7rem, 1fr) — γινόταν 112px ψηλή για περιεχόμενο 24px. */
  border-left: 1px solid var(--γραμμή);
  overflow: hidden;
}
body[data-πλευρά="αριστερά"] #εργασία {
  border-left: 0;
  border-right: 1px solid var(--γραμμή);
}

#δίνεται        { grid-row: 1; }
.συντάκτης      { grid-row: 2; }
.χωρίστρα-κάτω  { grid-row: 3; }
.κάτω           { grid-row: 4; }

/* Στο κινητό δεν υπάρχει ύψος να μοιραστείς με το χέρι — και μια λωρίδα
   6px δίπλα στο πληκτρολόγιο πατιέται κατά λάθος.

   ΤΑ ΔΥΟ ΜΑΖΙ ΚΑΙ ΜΕ ΑΥΤΗ ΤΗ ΣΕΙΡΑ: όσο το media query ήταν γραμμένο πιο
   πάνω στο αρχείο, αυτό εδώ το «display: none» το ακύρωνε — ίδια
   ειδικότητα, κερδίζει ο τελευταίος. Η χωρίστρα δεν φαινόταν πουθενά. */
.χωρίστρα-κάτω { display: none; }

@media (min-width: 781px) {
  .χωρίστρα-κάτω {
    display: block;
    height: 6px;
    background: var(--γραμμή);
    cursor: row-resize;
  }
  .χωρίστρα-κάτω:hover { background: var(--απαλό); }
}

/* ΔΕΝ ΚΥΛΑΕΙ Ο ΣΥΝΤΑΚΤΗΣ — κυλάει μόνο το πεδίο μέσα του.
   Με `overflow: auto` εδώ υπήρχαν ΔΥΟ κατακόρυφες μπάρες σε κάθε μεγάλο
   πρόγραμμα: μία του `.συντάκτης` κι άλλη μία του ίδιου του textarea. Και
   επειδή κυλούσε μόνο η μία από τις δύο, το περιθώριο με τους αριθμούς
   έμενε ακίνητο ενώ ο κώδικας έφευγε — μετρήθηκε απόκλιση 300px στη
   δέκατη γραμμή. Δηλαδή οι αριθμοί έδειχναν λάθος γραμμή. */
.συντάκτης {
  position: relative;
  display: flex;
  overflow: hidden;
  background: var(--κώδικας);
}

.αρίθμηση {
  flex: 0 0 auto;
  /* Κυλάει μαζί με τον κώδικα, από το JS (`συγχρόνισεΚύλιση`). Κρυφό
     overflow, όχι auto: δεν θέλουμε τρίτη μπάρα — θέλουμε απλώς να
     δέχεται `scrollTop`. */
  overflow: hidden;
  padding: 1rem .5rem 1rem .8rem;
  text-align: right;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: calc(.88rem * var(--κλ-κωδ, 1));
  line-height: 1.7;
  color: var(--απαλό);
  opacity: .5;
  user-select: none;
  white-space: pre;
}
.αρίθμηση b {
  display: block;
  font-weight: inherit;
  border-radius: 3px;
  padding-inline: .25em;
  margin-inline: -.25em;
  /* Το ύψος το γράφει το JS, από τη μετρημένη γραμμή της βαφής. */
  overflow: hidden;
}
/* Μία σειρά περιθωρίου ανά σειρά οθόνης: πρώτα ο αριθμός, μετά ένα «&» για
   κάθε συνέχεια. Ίδιο line-height με τον κώδικα, αλλιώς ξεκολλάνε. */
.αρίθμηση b i {
  display: block;
  font-style: normal;
  line-height: inherit;
}
.αρίθμηση b i.συν { opacity: .5; }
.αρίθμηση b.τώρα {
  background: var(--τόνος);
  color: #fff;
  opacity: 1;
  font-weight: 700;
}

/* Η βαφή είναι ένα <pre> ΑΚΡΙΒΩΣ κάτω από ένα διάφανο <textarea>. Τα δύο
   πρέπει να έχουν πανομοιότυπη γραμματοσειρά, μέγεθος, ύψος γραμμής και
   περιθώρια — οποιαδήποτε διαφορά και τα γράμματα ξεκολλάνε από τα χρώματα. */
.πεδίο { position: relative; flex: 1; min-width: 0; }

.πεδίο > .βαφή,
.πεδίο > textarea {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 1rem 1rem 1rem 0;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: calc(.88rem * var(--κλ-κωδ, 1));
  line-height: 1.7;
  tab-size: 2;
  /* ΤΥΛΙΓΜΑ, ΟΧΙ ΟΡΙΖΟΝΤΙΑ ΚΥΛΙΣΗ.
     Μια μακριά γραμμή που έφευγε δεξιά ήταν αόρατη σε προβολή: ο καθηγητής
     δεν κυλάει οριζόντια μπροστά σε τάξη, και ο μαθητής στο κινητό ούτε καν
     βλέπει ότι υπάρχει συνέχεια. Τώρα η γραμμή σπάει και η συνέχειά της
     σημαδεύεται με «&» στο περιθώριο, χωρίς να πάρει δικό της αριθμό.
     Το `break-word` υπάρχει για τη γραμμή που είναι ΜΙΑ λέξη (ένα τεράστιο
     όνομα μεταβλητής): χωρίς αυτό δεν σπάει πουθενά και ξαναγεννιέται η
     οριζόντια κύλιση που μόλις βγάλαμε. */
  white-space: pre-wrap;
  overflow-wrap: break-word;
  overflow-x: hidden;
  overflow-y: auto;
  border: 0;
}

/* Η ταινία που δείχνει ΠΟΙΑ εντολή εκτελείται τώρα. Κάθεται κάτω από το
   κείμενο και πάνω από το φόντο· η θέση της υπολογίζεται στο JS από το
   πραγματικό ύψος γραμμής, ώστε να μη χρειάζεται να συμφωνούν δύο αριθμοί
   σε δύο αρχεία. */
.ταινία {
  position: absolute;
  left: 0;
  right: 0;
  background: color-mix(in srgb, var(--τόνος) 22%, transparent);
  border-left: 3px solid var(--τόνος);
  pointer-events: none;
  z-index: 0;
  transition: top .12s ease-out;
}

/* Το κουμπί κοινοποίησης: ΑΙΩΡΟΥΜΕΝΟ πάνω δεξιά, μέσα στο πεδίο.
   Είχε δική του στήλη, ακριβώς για να μην περνάει κείμενο από κάτω του. Η
   στήλη όμως έκοβε πλάτος από τον κώδικα και — με την οριζόντια κύλιση που
   υπήρχε τότε — έβγαζε ΔΕΥΤΕΡΗ μπάρα κύλισης δίπλα στην πρώτη. Δύο μπάρες
   είναι χειρότερες από μια λέξη που κρύβεται: το τύλιγμα έδιωξε την
   οριζόντια κύλιση, και ό,τι κρύβεται είναι πάντα το δεξί άκρο ΜΟΝΟ της
   πρώτης σειράς — ορατό με ένα σκρολ, ή με το που σβήσει το κουμπί.
   Το αδιαφανές φόντο είναι απαραίτητο: χωρίς αυτό τα γράμματα θα φαίνονταν
   μέσα από το κουμπί. */
.κοινοποίηση {
  position: absolute;
  top: .3rem;
  right: .3rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  padding: 0;
  border-radius: 8px;
  border: 1px solid var(--γραμμή);
  background: var(--κώδικας);
  color: var(--απαλό);
  opacity: .75;
  cursor: pointer;
}
.κοινοποίηση:hover { opacity: 1; color: var(--τόνος); }
.κοινοποίηση svg { width: 1.05em; height: 1.05em; }

/* Επιβεβαίωση μετά την αντιγραφή: το κουμπί γίνεται στιγμιαία σημάδι. Ένα
   μήνυμα στην κονσόλα θα χανόταν ανάμεσα στα αποτελέσματα του προγράμματος.

   ΙΔΙΟ πλάτος: αν φάρδαινε για να χωρέσει λέξη, θα φάρδαινε η στήλη και θα
   κουνιόταν όλος ο συντάκτης για δύο δευτερόλεπτα σε κάθε κοινοποίηση. */
.κοινοποίηση.έγινε {
  opacity: 1;
  border-color: var(--σωστό);
  color: var(--σωστό);
  font-size: calc(1rem * var(--κλ-κωδ, 1));
  line-height: 1;
}
.κοινοποίηση.έγινε svg { display: none; }

.βαφή {
  pointer-events: none;
  color: var(--κείμενο-κώδικα);
  overflow: hidden;
  z-index: 1;
}

/* ΜΟΝΟ Ο ΣΥΝΤΑΚΤΗΣ ΚΩΔΙΚΑ. Το κείμενό του είναι ΑΟΡΑΤΟ επίτηδες: τα γράμματα
   που βλέπεις είναι της βαφής από κάτω, και το textarea πάνω της κρατάει τον
   δρομέα και την επιλογή.
   ΗΤΑΝ ΓΡΑΜΜΕΝΟ ΩΣ ΣΚΕΤΟ `textarea` και χτύπησε: το πλαίσιο εκφώνησης του
   προχείρου βγήκε ΤΕΛΕΙΩΣ ΑΔΕΙΟ στην οθόνη ενώ το `.value` του είχε κανονικά
   το κείμενο — αόρατο με `-webkit-text-fill-color`, που νικάει και το
   `color`. Κάθε νέο textarea στη σελίδα θα έπεφτε στην ίδια παγίδα. */
#κώδικας {
  outline: 0;
  resize: none;
  background: transparent;
  color: transparent;
  caret-color: var(--τόνος);
  -webkit-text-fill-color: transparent;
}
#κώδικας::selection { background: color-mix(in srgb, var(--τόνος) 35%, transparent); }

.βαφή i { font-style: normal; }
.βαφή .κ { color: var(--μπλε); font-weight: 600; }
.βαφή .σ { color: var(--πράσινο-σ); }
.βαφή .α { color: var(--πορτοκαλί-α); }
.βαφή .τ { color: var(--απαλό); }
.βαφή .χ { color: var(--απαλό); font-style: italic; }

/* ------------------------------------------------ στήλη τελεστών (κινητό) */

/* Το «<-» και οι συγκρίσεις είναι τα μόνα που στο κινητό απαιτούν αλλαγή
   πληκτρολογίου. Μπαίνουν ΔΙΠΛΑ στον κώδικα, όχι από κάτω: εκεί κάτω
   βρίσκεται το εικονικό πληκτρολόγιο, και ό,τι ακουμπά τη βάση της οθόνης
   είναι το πρώτο που εξαφανίζεται. */
/* Δύο στήλες, όχι μία. Με μία, σε τηλέφωνο με ανοιχτό πληκτρολόγιο έμεναν
   έξω τα δύο τελευταία κουμπιά (<> και [ ]) — και επειδή η μπάρα κύλισης
   είναι κρυμμένη, ο μαθητής δεν είχε ΚΑΝΕΝΑ σημάδι ότι υπάρχουν.
   Πέντε γραμμές: αριστερά οι συγκριτικοί, δεξιά τα υπόλοιπα με το «<>». */
.τελεστές {
  display: none;
  flex: 0 0 auto;
  grid-auto-flow: column;
  grid-template-rows: repeat(5, auto);
  gap: .2rem;
  padding: .3rem .28rem;
  border-left: 1px solid var(--γραμμή);
  background: var(--πλαίσιο);
  overflow-y: auto;
  scrollbar-width: none;
}
.τελεστές::-webkit-scrollbar { display: none; }

/* Σε πολύ κοντές οθόνες τα εννιά κουμπιά δεν χωρούν ούτε σε δύο στήλες. Τότε
   η μπάρα κυλάει — και επειδή η μπάρα κύλισης είναι κρυμμένη, ΧΩΡΙΣ σημάδι ο
   μαθητής δεν έχει τρόπο να μάθει ότι υπάρχει κι άλλο. Το σβήσιμο στην άκρη
   είναι αυτό το σημάδι. Μπαίνει μόνο στην πλευρά που κρύβει κάτι. */
.τελεστές.κι-άλλο-κάτω {
  mask-image: linear-gradient(to bottom, #000 calc(100% - 1.6rem), transparent);
}
.τελεστές.κι-άλλο-πάνω {
  mask-image: linear-gradient(to top, #000 calc(100% - 1.6rem), transparent);
}
.τελεστές.κι-άλλο-πάνω.κι-άλλο-κάτω {
  mask-image: linear-gradient(to bottom, transparent, #000 1.6rem,
                              #000 calc(100% - 1.6rem), transparent);
}

/* Λίγο πιο μαζεμένα, ώστε να χωρούν και τα οκτώ χωρίς κύλιση — αλλά όχι
   κάτω από 2rem ύψος, που είναι το όριο για να το πετύχει το δάχτυλο. */
.τελεστές button {
  flex: 0 0 auto;
  min-width: 2.15rem;
  height: 2.05rem;
  padding: 0 .3rem;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: calc(.8rem * var(--κλ-κωδ, 1));
  line-height: 1;
  border-radius: 7px;
}

/* ------------------------------------------------------------- η κονσόλα */

/* Το κάτω μισό μοιράζεται ανάμεσα σε πίνακα τιμών και κονσόλα. Τα ποσοστά
   πρέπει να μετρούν πάνω σε ΑΥΤΟ, γι' αυτό έχει ρητό όριο ύψους — αλλιώς
   ο γονέας είναι auto και το max-height δεν σημαίνει τίποτα. */
.κάτω {
  display: flex;
  /* ΔΙΠΛΑ-ΔΙΠΛΑ, όχι το ένα πάνω στο άλλο. Οι τιμές των μεταβλητών είναι
     σχεδόν πάντα κοντές — «Ι  7» — και ο πίνακας κρατούσε ολόκληρη σειρά
     ύψους για δύο χαρακτήρες, τρώγοντας τη θέση της κονσόλας. */
  flex-direction: row;
  align-items: stretch;
  /* Όχι ποσοστό: το ποσοστό εδώ μετριέται πάνω σε γραμμή πλέγματος με «auto»
     ύψος, οπότε ο browser το επιλύει απρόβλεπτα και ο πίνακας τιμών κοβόταν
     στη μέση ενώ υπήρχε άφθονος ελεύθερος χώρος.

     Αλλά ούτε vh: το vh μετράει τη ΜΕΓΑΛΗ οθόνη και δεν συρρικνώνεται ποτέ
     για το πληκτρολόγιο. Σε τηλέφωνο 900px, το 55vh έδινε στην κονσόλα 495px
     ενώ ολόκληρος ο ορατός χώρος ήταν 400 — η κονσόλα άνοιγε ένα τεράστιο
     μαύρο κενό και έπνιγε τον συντάκτη. Μετράμε πάνω στο ΟΡΑΤΟ ύψος. */
  max-height: calc(var(--ορατό, 100dvh) * .55);
  min-height: 0;
  /* Το ύψος που έσυρε ο χρήστης. Χωρίς αυτό, «auto» όπως πάντα. */
  height: var(--ύψος-κάτω, auto);
}

.κονσόλα {
  border-top: 1px solid var(--γραμμή);
  background: var(--πλαίσιο);
  flex: 1 1 auto;
  /* min-width: 0 ώστε οι μακριές γραμμές εξόδου να κυλούν ΜΕΣΑ στη στήλη
     αντί να τη φαρδαίνουν και να σπρώχνουν τον πίνακα τιμών έξω. */
  min-width: 0;
  min-height: 4.5rem;
  overflow: auto;
  padding: .7rem .9rem 1rem;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: calc(.85rem * var(--κλ-κωδ, 1));
  line-height: 1.65;
}

.κονσόλα .άδεια { color: var(--απαλό); font-style: italic; }

/* Κάθε γραμμή εξόδου έχει αριθμό. Δύο στήλες, όχι πρόθεμα μέσα στο κείμενο:
   όταν η έξοδος τυλίγεται σε δεύτερη σειρά, το κείμενο πρέπει να μένει
   στοιχισμένο κάτω από τον εαυτό του και όχι κάτω από τον αριθμό. */
.κονσόλα .έξοδος { display: flex; gap: .55rem; align-items: baseline; }
.κονσόλα .έξοδος .νο {
  flex: 0 0 auto;
  min-width: 2.1em;
  text-align: right;
  font-weight: 400;
  color: var(--απαλό);
  opacity: .55;
  user-select: none;
}
.κονσόλα .έξοδος .κειμ { flex: 1 1 auto; min-width: 0; white-space: pre-wrap; }

/* Στοιχισμένα με τη ΣΤΗΛΗ ΚΕΙΜΕΝΟΥ της εξόδου, ώστε να μη χορεύει η αριστερή
   άκρη· δεν παίρνουν αριθμό γιατί δεν είναι έξοδος του προγράμματος. */
.κονσόλα .σφάλμα,
.κονσόλα .προειδοποίηση,
.κονσόλα .τέλος { padding-left: calc(2.1em + .55rem); }

.κονσόλα .σφάλμα { color: var(--λάθος); }
.κονσόλα .προειδοποίηση { color: var(--τόνος); }
.κονσόλα .τέλος { color: var(--σωστό); }
.κονσόλα .ερώτηση { color: var(--απαλό); }

.γραμμή-εισόδου { display: flex; gap: .5rem; align-items: center; margin: .2rem 0; }
.γραμμή-εισόδου input {
  flex: 1;
  font: inherit;
  padding: .25rem .5rem;
  border: 1px solid var(--τόνος);
  border-radius: 5px;
  background: var(--χαρτί);
  color: var(--μελάνι);
  max-width: 14rem;
}

/* --------------------------------------------------------- πίνακας τιμών */

.τιμές {
  border-top: 1px solid var(--γραμμή);
  background: var(--πλαίσιο);
  padding: .6rem .9rem .8rem;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: calc(.82rem * var(--κλ-κωδ, 1));
  /* Δική του ΣΤΗΛΗ πια: σταθερό μερίδιο πλάτους, με ταβάνι ώστε σε φαρδιά
     οθόνη να μη γίνει μισή σελίδα για τρεις μεταβλητές. */
  flex: 0 0 34%;
  max-width: 22rem;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  border-right: 1px solid var(--γραμμή);
}
.διακόπτης {
  display: flex;
  align-items: center;
  gap: .4rem;
  width: 100%;
  border: 0;
  padding: 0 0 .45rem;
  background: none;
  font-family: system-ui, sans-serif;
  font-size: calc(.72rem * var(--κλ-κωδ, 1));
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--απαλό);
}
.διακόπτης:hover { color: var(--μελάνι); }
.διακόπτης svg {
  width: .9em;
  height: .9em;
  transition: transform .15s;
}
.διακόπτης em {
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  opacity: .8;
}

/* Κλειστός: μένει μόνο η γραμμή τίτλου, ώστε κονσόλα και συντάκτης να
   πάρουν πίσω τον χώρο τους. */
.τιμές.κλειστός { flex: 0 0 auto; max-width: none; overflow: hidden; }

/* Κλειστός πίνακας: πίσω σε στοίβα, ώστε η μπάρα του τίτλου να πιάνει μια
   λεπτή λωρίδα πάνω από την κονσόλα αντί για ολόκληρη άδεια στήλη. */
.κάτω.τιμές-κλειστές { flex-direction: column; }
.κάτω.τιμές-κλειστές .τιμές {
  border-right: 0;
  border-bottom: 1px solid var(--γραμμή);
  padding-bottom: .35rem;
}
.τιμές.κλειστός #πίνακας { display: none; }
.τιμές.κλειστός .διακόπτης { padding-bottom: 0; }
.τιμές.κλειστός .διακόπτης svg { transform: rotate(-90deg); }
.τιμές table { border-collapse: collapse; width: 100%; }
.τιμές td { padding: .12rem .5rem .12rem 0; vertical-align: top; }
.τιμές td.όνομα { color: var(--κλειδί); white-space: nowrap; }
.τιμές tr.άλλαξε td { background: color-mix(in srgb, var(--τόνος) 16%, transparent); }

/* ------------------------------------------ ο δισδιάστατος ως πλέγμα */

/* Η στήλη των τιμών είναι στενή (34%, ταβάνι 22rem) και ένα πλέγμα 10
   στηλών δεν χωράει. Κυλάει ΜΟΝΟ ΤΟΥ, οριζόντια, μέσα στη θήκη του — δεν
   σπρώχνει τη σελίδα και δεν στενεύει τις υπόλοιπες μεταβλητές. */
/* Χρησιμοποιείται κλάση από το JS και όχι `:has(.πλέγμα-θήκη)`: το `:has`
   θέλει σχετικά πρόσφατο browser και οι σχολικοί υπολογιστές δεν είναι. */
/* Το ταβάνι ανεβαίνει κι αυτό: στα 22rem το μέγιστο πλέγμα (12×10) έβγαινε
   335px σε 323px ωφέλιμα και κυλούσε για 12 pixel — δηλαδή για το τίποτα,
   αλλά μπροστά σε τάξη το κύλισμα είναι τριβή. Στα 24rem χωράει ολόκληρο. */
/* Όταν υπάρχει πλέγμα η στήλη παίρνει σταθερά 24rem αντί για το 34% της.
   ΣΤΑΘΕΡΟ ΚΑΙ ΟΧΙ «όσο χρειάζεται»: δοκίμασα `width: max-content` ώστε τα
   μικρά πλέγματα να μη σπαταλούν χώρο, και έφερε δύο προβλήματα μαζί —
   μπάρα κύλισης δύο pixel από στρογγυλοποίηση υποδιαστολής, και έναν
   Π[3,10] με εξαψήφιες τιμές να ξεπερνάει το ταβάνι και να αφήνει στην
   κονσόλα 107px. Το σταθερό πλάτος είναι λίγο γενναιόδωρο για έναν 4×5,
   αλλά δεν πηδάει μπροστά στην τάξη κάθε φορά που αλλάζει πίνακας. */
/* ΤΟ `:not(.κλειστός)` ΕΙΝΑΙ ΑΠΑΡΑΙΤΗΤΟ: ο κανόνας του κλειστού πίνακα
   (`flex: 0 0 auto; max-width: none`) γράφεται πιο πάνω στο αρχείο, οπότε
   χωρίς αυτό ένας ΚΛΕΙΣΤΟΣ πίνακας τιμών που τυχαίνει να έχει πλέγμα θα
   κρατούσε 24rem πλάτος αντί να γίνει λεπτή λωρίδα. */
/* ⚠ ΤΟ ΤΑΒΑΝΙ ΕΙΝΑΙ ΠΟΣΟΣΤΟ, ΟΧΙ ΜΟΝΟ PIXEL. Με σκέτο `24rem` η στήλη
   έπαιρνε 384px ό,τι κι αν γινόταν: σε παράθυρο 800px, όπου η κάτω σειρά
   είναι ~400, στην κονσόλα έμεναν 29 pixel. Το ίδιο ακριβώς λάθος που είχε
   φανεί στο κινητό — απλώς εδώ χρειάζεται στενό παράθυρο για να φανεί.
   Τώρα παίρνει το ΜΙΚΡΟΤΕΡΟ από 24rem και 62%. */
.τιμές.έχει-πλέγμα:not(.κλειστός),
.τιμές.όψη-διάγραμμα:not(.κλειστός) { flex: 0 1 24rem; max-width: 62%; }

/* Ό,τι δεν χωρέσει κυλάει ΜΕΣΑ ΣΤΗ ΘΗΚΗ ΤΟΥ — δεν σπρώχνει τη σελίδα και
   δεν στενεύει τις υπόλοιπες μεταβλητές. Χρειάζεται μόνο όταν το πλέγμα
   χτυπήσει το ταβάνι (μεγάλες τιμές σε πολλές στήλες). */
.πλέγμα-θήκη { margin: .35rem 0 .55rem; overflow-x: auto; }

.πλέγμα-όνομα {
  display: flex;
  align-items: baseline;
  gap: .4rem;
  color: var(--κλειδί);
  padding-bottom: .2rem;
}
.πλέγμα-όνομα em {
  font-style: normal;
  font-size: .85em;
  color: var(--απαλό);
}

.τιμές table.πλέγμα { width: auto; border-collapse: collapse; }
.τιμές table.πλέγμα th,
.τιμές table.πλέγμα td {
  padding: .1rem .38rem;
  text-align: right;
  border: 1px solid var(--γραμμή);
  vertical-align: middle;
  white-space: nowrap;
}
/* Οι δείκτες: διακριτικοί, για να ξεχωρίζουν από τα δεδομένα. Χωρίς αυτούς
   ο μαθητής μετράει κελιά με το δάχτυλο για να βρει ποιο είναι το Π[3,4]. */
.τιμές table.πλέγμα th {
  color: var(--απαλό);
  font-weight: 400;
  background: color-mix(in srgb, var(--γραμμή) 40%, transparent);
  text-align: center;
}
.τιμές table.πλέγμα thead th:first-child { border: 0; background: none; }
.τιμές table.πλέγμα td.άδειο { color: var(--απαλό); opacity: .5; text-align: center; }

/* Ο μονοδιάστατος κατακόρυφα. Οι στήλες μπαίνουν ΔΙΠΛΑ-ΔΙΠΛΑ (ο Π[40] είναι
   τέσσερις των 10, ψηλός όσο μία) με λίγη ανάσα ανάμεσά τους, ώστε να μη
   διαβάζονται σαν ένας πίνακας τεσσάρων στηλών. */
.πλέγμα-θήκη .στήλες { display: flex; align-items: flex-start; gap: .55rem; }
.τιμές table.πλέγμα.κατακόρυφη { width: auto; }
/* Ο δείκτης αριστερά, στοιχισμένος δεξιά ώστε το 9 και το 10 να μη
   χοροπηδάνε· η τιμή δεξιά. */
.τιμές table.πλέγμα.κατακόρυφη th { text-align: right; }
.τιμές table.πλέγμα.κατακόρυφη td { min-width: 2.2em; }
.τιμές table.πλέγμα td.άλλαξε {
  background: color-mix(in srgb, var(--τόνος) 28%, transparent);
}

/* ------------------------------------------- ΠΟΥ ΠΑΕΙ ΝΑ ΓΡΑΨΕΙ

   Δύο ΞΕΧΩΡΙΣΤΑ σήματα, και δεν πρέπει να μπερδεύονται:
     .άλλαξε  = «αυτό ΜΟΛΙΣ πήρε τιμή»  — γεμάτο φόντο, ο τόνος
     .στόχος  = «εδώ ΘΑ γράψει τώρα»    — περίγραμμα, χωρίς γέμισμα
   Το περίγραμμα διαβάζεται ως «σημάδι», το γέμισμα ως «έγινε». Αν ήταν
   και τα δύο γεμάτα, ο μαθητής δεν θα ξεχώριζε το πριν από το μετά — που
   είναι ΟΛΟ το νόημα αυτού του σήματος. */
.τιμές table.πλέγμα td.στόχος {
  outline: 2px solid var(--τόνος);
  outline-offset: -2px;
  border-radius: 2px;
}
/* Ο δείκτης που δείχνει εκεί: γραμμή ΚΑΙ στήλη στο πλέγμα, μία θέση στην
   κατακόρυφη. Ο μαθητής βλέπει «το Ι δείχνει στο 2, το Κ στο 3». */
.τιμές table.πλέγμα th.δείκτης {
  color: var(--τόνος);
  font-weight: 700;
  background: color-mix(in srgb, var(--τόνος) 18%, transparent);
}
.τιμές .κι-άλλα {
  color: var(--απαλό);
  font-family: system-ui, sans-serif;
  font-size: calc(.76rem * var(--κλ-κωδ, 1));
  padding-top: .3rem;
}

/* ------------------------------------------------------------- στο κινητό */

@media (max-width: 780px) {
  main {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 40%) 6px minmax(0, 1fr);
    height: calc(var(--ορατό, 100dvh) - 3.4rem);
  }
  /* ------ Ο ΠΙΝΑΚΑΣ ΤΙΜΩΝ ΣΤΟ ΚΙΝΗΤΟ: ΟΣΟ ΧΡΕΙΑΖΕΤΑΙ, ΟΧΙ ΟΣΟ ΤΟΥ ΔΩΣΑΝ

     Στην πλατιά οθόνη η στήλη παίρνει σταθερά 24rem όταν έχει πλέγμα, και
     σωστά — δεν θέλουμε να πηδάει μπροστά στην τάξη. ΣΤΟ ΚΙΝΗΤΟ ΟΜΩΣ ΤΑ
     24rem ΕΙΝΑΙ 384px ΣΕ ΟΘΟΝΗ 375px: μετρήθηκε ένας Π[6] με πίνακα 51px
     να κρατάει 384, η σειρά να ξεχειλίζει στα 509 και στην κονσόλα να
     μένουν 125 — δηλαδή η έξοδος του προγράμματος δεν φαινόταν.

     Εδώ λοιπόν η στήλη ΑΓΚΑΛΙΑΖΕΙ ΤΟ ΠΕΡΙΕΧΟΜΕΝΟ ΤΗΣ, με ταβάνι το 62%
     ώστε να μένει πάντα ουσιαστικός χώρος για τις τιμές εξόδου. Ο μεγάλος
     πίνακας που δεν χωράει κυλάει μέσα στη θήκη του, όπως και πριν. */
  .τιμές.έχει-πλέγμα:not(.κλειστός) {
    flex: 0 1 auto;
    width: fit-content;
    max-width: 62%;
  }
  /* Το διάγραμμα δεν «αγκαλιάζει περιεχόμενο»: είναι εικόνα που κλιμακώνεται
     και θα μάζευε τη στήλη σε τίποτα. Παίρνει σταθερό μερίδιο. */
  .τιμές.όψη-διάγραμμα:not(.κλειστός) { flex: 0 0 62%; max-width: 62%; }
  /* Χωρίς αυτά τα δύο, το ταβάνι της διπλανής στήλης είναι διακοσμητικό.
     Το `.κάτω` έχει εξ ορισμού `min-width: auto` — δηλαδή ΔΕΝ στενεύει
     κάτω από το περιεχόμενό του — και με έναν Α[12,10] η σειρά έβγαινε
     459px σε οθόνη 375: το δεξί άκρο απλώς κοβόταν. */
  .κάτω { min-width: 0; }
  .κάτω > .κονσόλα { flex: 1 1 0; min-width: 0; }

  #εκφώνηση, #εργασία,
  body[data-πλευρά="αριστερά"] #εκφώνηση,
  body[data-πλευρά="αριστερά"] #εργασία { grid-column: 1; }
  #εκφώνηση { grid-row: 1; }
  .χωρίστρα { grid-row: 2; grid-column: 1; cursor: row-resize; }
  #εργασία  { grid-row: 3; border-left: 0; border-top: 1px solid var(--γραμμή); }
  body[data-πλευρά="αριστερά"] #εργασία { grid-row: 1; border: 0; }
  body[data-πλευρά="αριστερά"] #εκφώνηση { grid-row: 3; }
  /* Κάθε pixel μετράει: η οθόνη είναι μικρή και το πληκτρολόγιο τρώει
     τη μισή. Πιο μαζεμένα κενά, χωρίς να γίνει δυσανάγνωστο. */
  #εκφώνηση { padding: .7rem .9rem 1rem; font-size: calc(.95rem * var(--κλ-εκφ, 1)); line-height: 1.45; }
  #εκφώνηση p { margin: .45rem 0; }
  #εκφώνηση ol, #εκφώνηση ul { margin: .45rem 0; padding-left: 1.4rem; }
  #εκφώνηση li { margin-bottom: .1rem; }
  #εκφώνηση .δοσμένος { margin: .5rem 0; padding: .5rem .6rem; font-size: calc(.8rem * var(--κλ-εκφ, 1)); }
  #εκφώνηση table { margin: .5rem 0; font-size: calc(.85rem * var(--κλ-εκφ, 1)); }

  .ταυτότητα { margin-bottom: .4rem; font-size: calc(.95rem * var(--κλ-εκφ, 1)); }
  .αριθμός { font-size: calc(1rem * var(--κλ-εκφ, 1)); }
  .σήματα { margin: .6rem 0 .3rem; }
  .σήμα { font-size: calc(.7rem * var(--κλ-εκφ, 1)); padding: .15rem .45rem; }
  .δοκιμαστικές { margin-top: .8rem; padding-top: .6rem; }

  .κονσόλα { padding: .5rem .7rem .7rem; line-height: 1.5; }
  .τιμές { padding: .45rem .7rem .6rem; }
  .αρίθμηση { padding: .6rem .45rem .6rem .6rem; }
  .πεδίο > .βαφή, .πεδίο > textarea { padding: .6rem .6rem .6rem 0; }

  /* Όταν γράφει, ο τίτλος δεν του χρησιμεύει — η εκφώνηση από πάνω μένει,
     ο αριθμός φαίνεται ήδη στον επιλογέα της μπάρας. */
  body[data-γράφει="ναι"] .ταυτότητα,
  body[data-γράφει="ναι"] .σήματα { display: none; }

  /* Όσο γράφει, η κονσόλα δεν έχει τίποτα να πει: η έξοδος είναι της
     ΠΡΟΗΓΟΥΜΕΝΗΣ εκτέλεσης και ο κώδικας από τότε άλλαξε. Κρύβεται, και
     ο χώρος της μοιράζεται στα δύο που μετράνε — εκφώνηση και κώδικα.

     Κριτήριο είναι το «γράφει», όχι το «ανοιχτό πληκτρολόγιο»: όταν το
     πρόγραμμα ζητάει Διάβασε, το πληκτρολόγιο είναι κι αυτό ανοιχτό, αλλά
     τότε η κονσόλα είναι το ΜΟΝΟ πράγμα που χρειάζεται να βλέπει. */
  body[data-γράφει="ναι"] .κάτω { display: none; }

  .τελεστές { display: grid; }

  /* Σε στενή στήλη η σύνοψη «2 μεταβλητές» τύλιγε τον τίτλο σε δεύτερη
     σειρά και τον έκοβε στη μέση. Ο τίτλος φτάνει· το πλήθος φαίνεται
     ούτως ή άλλως από τον ίδιο τον πίνακα. Και το αραιό γράμμα μαζεύεται,
     ώστε ο τίτλος να χωράει σε ΜΙΑ σειρά και να μην τρώει ύψος από τις
     ίδιες τις τιμές. */
  .τιμές .διακόπτης em { display: none; }
  .τιμές .διακόπτης { letter-spacing: .02em; }
  .τιμές .διακόπτης span { white-space: nowrap; }

  /* Στο κινητό η μπάρα κρατούσε δύο σειρές από τον λίγο κατακόρυφο χώρο.
     Τα κουμπιά μαζεύονται σε πτυσσόμενο μενού πάνω δεξιά. */
  header { flex-wrap: nowrap; padding: .5rem .6rem; }
  .επιλογείς { flex: 1; min-width: 0; }
  header select { max-width: none; }
  /* ΚΑΤΩ ΟΡΙΟ, ΟΧΙ ΜΗΔΕΝ: με το `min-width: 0` ο επιλογέας φυλλαδίου
     ΚΑΤΕΡΡΕΕ σε σκέτο βελάκι μόλις εμφανιζόταν η «Διακοπή» δίπλα στην
     Εκτέλεση — ο μαθητής δεν έβλεπε πια σε ποιο φυλλάδιο βρίσκεται. */
  #φύλλο { flex: 1; min-width: 4.5rem; }

  /* Τα κουμπιά της εκτέλεσης μαζεύονται: εμφανίζονται μόνο ΟΣΟ τρέχει
     πρόγραμμα, ακριβώς τότε που ο χώρος είναι πιο στριμωγμένος. */
  #σταμάτα, #συνέχισε { padding: .38rem .5rem; font-size: .82rem; }

  /* Η εκτέλεση πατιέται δεκάδες φορές την ώρα — στο κινητό μένει ως σκέτο
     εικονίδιο, για να χωρέσει δίπλα στους επιλογείς. */
  #τρέξε { padding: .38rem .6rem; }
  #τρέξε span { display: none; }
  .εικονίδιο-play { display: block; }
}

/* ------------------------------------------------------- συγγραφέας

   Το πλαίσιο με τις καταχωρημένες λύσεις. Ζει μέσα στο μενού και το βλέπει
   μόνο όποιος έχει ξεκλειδώσει· ο μαθητής δεν ξέρει καν ότι υπάρχει.
   Τα μεγέθη ΔΕΝ πολλαπλασιάζονται με τις κλίμακες εκφώνησης/κώδικα: το
   μενού δεν ανήκει σε καμία από τις δύο στήλες. */
/* ΠΡΩΤΑ ΑΥΤΟ, ΚΑΙ ΜΕ ΤΟ [hidden] ΝΑ ΚΕΡΔΙΖΕΙ: ο κανόνας «display: flex»
   παρακάτω είναι επιλογέας κλάσης και νικάει το `display: none` που δίνει ο
   browser στο [hidden] — δηλαδή το πλαίσιο ΔΕΝ κρυβόταν καθόλου και ο
   μαθητής σε οθόνη υπολογιστή θα έβλεπε τις λύσεις μέσα στο μενού.
   Το `hidden` της JavaScript δούλευε· η CSS το ακύρωνε σιωπηλά. */
.συγγραφέας[hidden] { display: none; }

.συγγραφέας {
  /* Το μενού δεν πρέπει να ξεπερνάει την οθόνη ό,τι κι αν γράφει μέσα του. */
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  margin-top: .45rem;
  padding-top: .5rem;
  border-top: 1px solid var(--γραμμή);
}
.συγγραφέας .κεφαλή {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .6rem;
  padding: 0 .7rem;
  font-size: .82rem;
}
.συγγραφέας .κεφαλή em { color: var(--σβηστό); font-style: normal; }
.συγγραφέας ul {
  list-style: none;
  margin: 0;
  padding: 0;
  /* Μια άσκηση με πολλές λύσεις δεν πρέπει να σπρώχνει το «Κατέβασε» έξω
     από την οθόνη — εκεί καταλήγει η δουλειά, δεν γίνεται να χαθεί. */
  max-height: 9rem;
  overflow-y: auto;
}
.συγγραφέας li {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .18rem .7rem;
  font-size: .78rem;
}
.συγγραφέας li span {
  flex: 1 1 auto;
  /* ΧΩΡΙΣ ΑΥΤΟ ΤΟ ΜΗΔΕΝ το text-overflow δεν ενεργοποιείται ποτέ: το
     στοιχείο flex έχει ελάχιστο πλάτος όσο το περιεχόμενό του, οπότε η
     σειρά με τη λύση φάρδαινε ΟΛΟ το μενού και το έβγαζε εκτός οθόνης
     στο κινητό. Φαινόταν στο στιγμιότυπο. */
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: var(--γραφή-κώδικα, monospace);
  color: var(--σβηστό);
}
.συγγραφέας li.άδειο span, .συγγραφέας li.άδειο {
  font-family: inherit;
  color: var(--σβηστό);
}
.συγγραφέας li button {
  flex: 0 0 auto;
  padding: .1rem .35rem;
  font-size: .8rem;
  line-height: 1;
  background: none;
  border: 1px solid transparent;
  color: var(--σβηστό);
  cursor: pointer;
}
.συγγραφέας li button:hover { color: var(--λάθος, #e06c75); border-color: var(--γραμμή); }

/* Ολοκληρωμένη άσκηση στον επιλογέα.

   Το χρώμα σε <option> ΔΕΝ το σέβονται όλοι οι browser — ο Safari και οι
   περισσότεροι εγγενείς επιλογείς κινητού το αγνοούν. Γι' αυτό το πράσινο
   συνοδεύεται ΠΑΝΤΑ από το ✓ μέσα στο ίδιο το κείμενο: το σημάδι πρέπει να
   φαίνεται και εκεί που το χρώμα δεν περνάει. */
#επιλογή option.ολοκληρωμένη { color: var(--σωστό); }

/* «✓ ολοκληρωμένη» δίπλα στον αριθμό της άσκησης.

   ΓΙΑΤΙ ΕΔΩ ΚΑΙ ΟΧΙ ΜΟΝΟ ΣΤΟΝ ΕΠΙΛΟΓΕΑ: το χρώμα σε <option> δεν το
   σέβονται ο Safari και οι εγγενείς επιλογείς του κινητού, οπότε το
   «πρασίνισμα» της λίστας μπορεί να μη φανεί ποτέ σε μισές συσκευές. Αυτό
   εδώ είναι δικό μας HTML και φαίνεται παντού. Στη λίστα μένει το ✓, που
   είναι κείμενο και περνάει και αυτό παντού. */
.τελείωσε {
  font-size: calc(.72rem * var(--κλ-εκφ, 1));
  font-weight: 600;
  letter-spacing: .02em;
  padding: .12rem .5rem;
  border: 1px solid var(--σωστό);
  border-radius: 999px;
  color: var(--σωστό);
  white-space: nowrap;
}
.τελείωσε[hidden] { display: none; }

/* Ιδωμένη αλλά όχι ολοκληρωμένη: σβηστό, να μην ανταγωνίζεται το πράσινο. */
#επιλογή option.ιδωμένη { color: var(--απαλό); }