/* ===========================================================================
   Εργαστήρια — stylesheet
   Dark by default. Light theme via [data-theme="light"] on <html>.
   Every colour comes from a token, so a class accent can retint a whole page.
   =========================================================================== */

:root {
  /* --- dark (default) --- */
  --bg:          #0a0c0f;
  --bg-2:        #0f1319;
  --surface:     #13171d;
  --surface-2:   #191e26;
  --border:      #242a33;
  --border-2:    #333b47;
  --text:        #e9ecf2;
  --text-dim:    #aab2c0;
  --muted:       #7b8493;

  --accent:      #6ea8fe;
  /* Text-safe and fill-safe versions, derived so any accent stays legible. */
  --accent-strong: color-mix(in srgb, var(--accent) 78%, #ffffff);
  --accent-fill:   var(--accent);
  --on-accent:     #0a0c0f;
  --accent-wash:   color-mix(in srgb, var(--accent) 12%, transparent);
  --accent-line:   color-mix(in srgb, var(--accent) 34%, transparent);

  --danger:      #ff7a7a;
  --ok:          #56c98d;
  --warn:        #e8b04a;

  --shadow:      0 1px 2px rgba(0,0,0,.45), 0 14px 40px -22px rgba(0,0,0,.85);
  --shadow-lift: 0 2px 6px rgba(0,0,0,.4), 0 22px 60px -28px rgba(0,0,0,.95);
  /* Ένα λεπτό φωτεινό χείλος στην πάνω ακμή: το φως που πιάνει το υλικό. */
  --edge:        inset 0 1px 0 rgba(255,255,255,.055);
  --radius:      14px;
  --font:        ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono:        ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --speed:       .38s;

  /* ---------------------------------------------------------------- κίνηση
     Πραγματικά ελατήρια, γραμμένα ως linear(): κάθε καμπύλη παράχθηκε από το
     μοντέλο της Apple (damping ratio ζ + response R), όχι από cubic-bezier με
     το μάτι. Η διάρκεια κάθε token είναι ο χρόνος που όντως κάθεται το
     ελατήριο, γι' αυτό πάνε πάντα σε ζευγάρι.                              */

  /* ζ 1.0 · R 0.40 — κρίσιμη απόσβεση, χωρίς υπέρβαση. Η προεπιλογή. */
  --dur-smooth: .6s;
  --ease-smooth: linear(0, 0.0171, 0.0603, 0.1196, 0.1878, 0.2599, 0.3323, 0.4025, 0.469, 0.5309, 0.5876, 0.6391, 0.6854, 0.7267, 0.7633, 0.7955, 0.8238, 0.8486, 0.8701, 0.8888, 0.9049, 0.9189, 0.9309, 0.9412, 0.95, 0.9576, 0.964, 0.9695, 0.9742, 0.9782, 0.9816, 0.9844, 0.9869, 0.9889, 0.9907, 0.9922, 0.9934, 0.9945, 0.9953, 0.9961, 0.9967, 0.9972, 0.9977, 0.9981, 0.9984, 0.9986, 0.9989, 0.999, 0.9992);

  /* ζ 1.0 · R 0.22 — το ίδιο, πιο γρήγορο: επαναφορά μετά από πάτημα. */
  --dur-quick: .34s;
  --ease-quick: linear(0, 0.0179, 0.0628, 0.1242, 0.1945, 0.2685, 0.3424, 0.4137, 0.481, 0.5433, 0.6002, 0.6516, 0.6975, 0.7383, 0.7743, 0.8059, 0.8335, 0.8575, 0.8783, 0.8963, 0.9117, 0.925, 0.9364, 0.9461, 0.9544, 0.9615, 0.9675, 0.9726, 0.9769, 0.9806, 0.9836, 0.9863, 0.9885, 0.9903, 0.9919, 0.9932, 0.9943, 0.9952, 0.996, 0.9967, 0.9972, 0.9977, 0.9981, 0.9984, 0.9987, 0.9989, 0.9991, 0.9992, 0.9994);

  /* ζ 0.8 · R 0.30 — μικρή υπέρβαση. Μόνο όπου προηγήθηκε ορμή. */
  --dur-bounce: .42s;
  --ease-bounce: linear(0, 0.0153, 0.0554, 0.1128, 0.1815, 0.2566, 0.3342, 0.4114, 0.4862, 0.5569, 0.6225, 0.6824, 0.7363, 0.7842, 0.8261, 0.8625, 0.8936, 0.9199, 0.9418, 0.9599, 0.9745, 0.9861, 0.9952, 1.0021, 1.0072, 1.0108, 1.0131, 1.0145, 1.0151, 1.0151, 1.0147, 1.0139, 1.013, 1.0119, 1.0107, 1.0095, 1.0084, 1.0073, 1.0062, 1.0053, 1.0044, 1.0036, 1.0029, 1.0024, 1.0018, 1.0014, 1.001, 1.0007, 1.0005);

  /* Το πάτημα δεν είναι ελατήριο: πρέπει να προλάβει το δάχτυλο. */
  --dur-press: 90ms;
  --ease-press: cubic-bezier(.2, 0, .38, 1);

  /* ------------------------------------------------------------ τυπογραφία
     Το tracking είναι πάντα συνάρτηση του μεγέθους: τα μεγάλα γράμματα
     μοιάζουν αραιά και σφίγγουν, τα μικρά χρειάζονται λίγο αέρα. Μία τιμή για
     όλα τα μεγέθη είναι λάθος κάπου.                                        */
  --track-display: -.028em;
  --track-title:   -.021em;
  --track-title-2: -.014em;
  --track-callout: -.006em;
  --track-body:     0em;
  --track-caption:  .005em;
}

/* Το φωτεινό θέμα δούλευε ως παλέτα αλλά όχι ως υλικό: το φόντο (#F8F3EF) και οι
   επιφάνειες (#FFFCFA) απείχαν τέσσερις μονάδες φωτεινότητας, οπότε οι κάρτες
   δεν ξεχώριζαν από τη σελίδα — «κάτι έλειπε» επειδή έλειπε το ανάγλυφο.

   Η διόρθωση είναι η ίδια που κάνει η Apple στο iOS: το φόντο γίνεται σαφώς
   βαθύτερο (grouped background), οι κάρτες καθαρά λευκές, και η σκιά πραγματική
   αντί για υπαινιγμό. Η ζεστασιά μένει — απλώς αποκτά βάθος. */
[data-theme="light"] {
  --bg:          #F1EBE3;
  --bg-2:        #E9E1D7;
  --surface:     #FFFFFF;
  --surface-2:   #F6F1EA;
  --border:      #E2D8CC;
  --border-2:    #C9BAAA;
  --text:        #1D1814;
  --text-dim:    #443930;
  --muted:       #6B5E52;

  --accent-strong: color-mix(in srgb, var(--accent) 68%, #2A1F17);
  --accent-fill:   var(--accent-strong);
  --on-accent:     #FFFCFA;
  --accent-wash:   color-mix(in srgb, var(--accent) 14%, transparent);
  --accent-line:   color-mix(in srgb, var(--accent) 40%, transparent);

  --danger:      #B33A32;
  --ok:          #14724A;
  --warn:        #9A6512;

  /* Τρία στρώματα: επαφή, κοντινή σκιά, μακρινή σκιά. Έτσι μια λευκή κάρτα
     πάνω σε ζεστό φόντο διαβάζεται ως αντικείμενο, όχι ως κενό. */
  --shadow:      0 1px 1px rgba(62,46,33,.045),
                 0 2px 5px rgba(62,46,33,.045),
                 0 10px 22px -10px rgba(62,46,33,.16);
  --shadow-lift: 0 1px 2px rgba(62,46,33,.06),
                 0 4px 10px rgba(62,46,33,.06),
                 0 18px 36px -14px rgba(62,46,33,.22);
  /* Σε λευκή επιφάνεια το λευκό χείλος δεν φαίνεται· ένα ψιλό ζεστό δαχτυλίδι
     κάνει τη δουλειά που κάνει το φως στο σκοτεινό θέμα. */
  --edge:        inset 0 0 0 1px rgba(62,46,33,.028);
  --on-accent:   #FFFFFF;
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  /* rem, ώστε η διάταξη να μεγαλώνει μαζί με τη ρύθμιση γραμματοσειράς
     του χρήστη αντί να σπάει. */
  font-size: .9375rem;
  line-height: 1.55;
  letter-spacing: var(--track-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
}

/* Ambient accent glow — the page quietly takes the colour of the class. */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(1100px 620px at 50% -12%, var(--accent-wash), transparent 68%),
    radial-gradient(760px 420px at 100% 108%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 70%),
    var(--bg-2);
  opacity: .9;
  transition: background var(--speed) ease;
}

/* Το leading κινείται αντίστροφα από το μέγεθος: σφιχτό στους τίτλους,
   άνετο στο σώμα κειμένου. */
h1, h2, h3 { margin: 0; line-height: 1.22; letter-spacing: var(--track-title-2); }
h1 { line-height: 1.1; letter-spacing: var(--track-title); }
a { color: inherit; }

/* Τα ψηφία στις μονόχωρες σειρές στοιχίζονται κάθετα — ημερομηνίες και
   αριθμοί εργαστηρίων δεν χοροπηδούν από γραμμή σε γραμμή. */
.who, .chip, .tag, .lab .meta, .class-card .meta, .card-head,
.prose .updated, footer.foot .legal { font-variant-numeric: tabular-nums; }

/* Colour-only transition, so dark <-> light glides instead of snapping. */
body, .topbar, .card, input, .empty, .banner-warn,
.chip, .class-hero, .msg, .rain i {
  transition:
    background-color var(--speed) ease,
    border-color var(--speed) ease,
    color var(--speed) ease,
    box-shadow var(--speed) ease;
}

/* =========================== accessibility =========================== */

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--accent-fill); color: var(--on-accent);
  padding: 10px 16px; border-radius: 0 0 10px 10px;
  font-weight: 600; text-decoration: none;
  transition: top .18s ease;
}
.skip:focus { top: 0; }

:focus-visible {
  outline: 3px solid var(--accent-strong);
  outline-offset: 3px;
  border-radius: 6px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================== αφή ==============================
   Η απόκριση είναι το θεμέλιο: το στοιχείο απαντά τη στιγμή που πατιέται, όχι
   όταν αφήνεται. Το πάτημα μπαίνει γρήγορα (90ms) και η επαναφορά γίνεται με
   ελατήριο — η ασυμμετρία είναι που το κάνει να μοιάζει με υλικό.
   Το motion.js χειρίζεται pointer capture, κατώφλι 10px και ακύρωση όταν το
   δάχτυλο φύγει από το στοιχείο.                                            */

[data-press] {
  touch-action: manipulation;            /* χωρίς την καθυστέρηση των 300ms */
  -webkit-tap-highlight-color: transparent;
}
[data-press].is-pressed {
  transition-duration: var(--dur-press) !important;
  transition-timing-function: var(--ease-press) !important;
}

/* ---------------------------------------------------------------- είσοδος
   Οι κάρτες έρχονται με ελατήριο και μικρή κλιμάκωση.

   Animation και όχι transition, για έναν λόγο ασφαλείας: το `backwards` κρατά
   την αρχική κατάσταση μόνο όσο τρέχει η καθυστέρηση, και μόλις τελειώσει το
   στοιχείο επιστρέφει στους κανονικούς του κανόνες. Καμία κατάσταση δεν μένει
   κολλημένη πάνω του, άρα τίποτα δεν παλεύει αργότερα με το hover ή το πάτημα
   — και αν για οποιονδήποτε λόγο δεν τρέξει η κίνηση, το στοιχείο είναι απλώς
   ορατό. Η ορατότητα δεν εξαρτάται ποτέ από JavaScript που μπορεί να μην τρέξει. */
[data-reveal] {
  animation: reveal-in var(--dur-smooth) var(--ease-smooth) var(--reveal-delay, 0ms) backwards;
}
@keyframes reveal-in {
  from { opacity: 0; transform: translateY(10px) scale(.99); }
}

/* ============================ code rain ============================ */

.rain {
  position: fixed; top: 0; bottom: 0; z-index: -1;
  width: clamp(84px, 15vw, 210px);
  overflow: hidden;
  font-family: var(--mono);
  font-size: 19px; line-height: 26px;
  color: var(--accent);
  user-select: none; pointer-events: none;
}
.rain-left  { left: 0;
  -webkit-mask-image: linear-gradient(to right, #000 25%, transparent 100%);
          mask-image: linear-gradient(to right, #000 25%, transparent 100%); }
.rain-right { right: 0;
  -webkit-mask-image: linear-gradient(to left, #000 25%, transparent 100%);
          mask-image: linear-gradient(to left, #000 25%, transparent 100%); }
[data-theme="light"] .rain { color: var(--accent-strong); }

/* Μία στήλη ανά γράμμα — ξεκινά αλλού και πέφτει με άλλη ταχύτητα, ώστε τα
   σύμβολα να μη στοιχίζονται ποτέ σε ίσιες οριζόντιες γραμμές. */
.rain .col {
  position: absolute; display: block; width: 21px;
  text-align: center;
  animation-name: rain-fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
}
.rain i { display: block; font-style: normal; transition: opacity .18s linear; }
.rain i.hot { opacity: 1 !important; color: var(--accent-strong); text-shadow: 0 0 14px var(--accent), 0 0 4px var(--accent); }

/* Η μετατόπιση είναι ακέραιο πολλαπλάσιο της γραμμής, οπότε ο βρόχος δεν φαίνεται. */
@keyframes rain-fall { to { transform: translateY(var(--rain-loop, 52px)); } }

@media (max-width: 860px) { .rain { display: none; } }

/* ============================== shell ============================== */

/* Η μπάρα είναι υλικό, όχι λωρίδα: το περιεχόμενο περνά από κάτω της και
   φαίνεται θολό. Το saturate ζωντανεύει τα χρώματα που περνούν — έτσι
   συμπεριφέρεται το γυαλί της Apple. */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: .75rem;
  padding: .75rem 1.375rem;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid transparent;
}
/* Διαχωριστικό μόνο όταν υπάρχει πράγματι περιεχόμενο από κάτω — αντί για μια
   μόνιμη γραμμή που χωρίζει τη σελίδα ακόμη κι όταν δεν χρειάζεται. */
.topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--border);
  opacity: 0;
  transition: opacity var(--dur-quick) var(--ease-quick);
}
.is-scrolled .topbar::after { opacity: 1; }
.scroll-sentinel { position: absolute; top: 0; height: 1px; width: 1px; pointer-events: none; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; font-weight: 650; letter-spacing: -.02em; }
/* Το λογότυπο μπαίνει ως μάσκα, όπως και τα λογότυπα των μαθημάτων, ώστε το
   χρώμα του να είναι πάντα το accent. Το viewBox του SVG είναι κομμένο πάνω στο
   σχέδιο, οπότε το `contain` το γεμίζει ακριβώς — και αν κάποτε ξαναβγεί από το
   πρόγραμμα σχεδίασης με περιθώριο γύρω του, θα δείξει απλώς μικρότερο αντί να
   κοπεί. Το aspect-ratio είναι το viewBox του. */
.brand-mark, .brand .mark {
  display: block; flex: none;
  background-color: var(--accent);
  -webkit-mask-image: url(../logos/coding-platform-logo.svg);
          mask-image: url(../logos/coding-platform-logo.svg);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
  aspect-ratio: 7881 / 4414;
}
.brand .mark { height: 30px; width: auto; }
.topbar .spacer { flex: 1; }
.who { font-size: .8125rem; color: var(--muted); font-family: var(--mono); }
@media (max-width: 700px) { .who { display: none; } }

.wrap { max-width: 1020px; margin: 0 auto; padding: 2.375rem 1.375rem 5.625rem; position: relative; z-index: 1; }

/* ============================= buttons ============================= */

.btn {
  position: relative;
  appearance: none; cursor: pointer;
  font: inherit; font-size: .875rem; font-weight: 550;
  letter-spacing: var(--track-caption);
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .5rem .875rem;
  box-shadow: var(--edge);
  transition: transform var(--dur-quick) var(--ease-quick),
              filter .15s ease,
              background-color var(--speed) ease,
              border-color var(--speed) ease,
              color var(--speed) ease;
}
.btn:hover { background: var(--surface); border-color: var(--border-2); }
.btn.ghost { background: transparent; box-shadow: none; }
.btn.icon { padding: .5rem; width: 2.375rem; height: 2.375rem; display: inline-grid; place-items: center; vertical-align: middle; }
.btn.icon svg { width: 1.0625rem; height: 1.0625rem; }
/* Ο στόχος αφής φτάνει τα 44px χωρίς να μεγαλώσει το σχέδιο. */
.btn.icon::before {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 44px; height: 44px; transform: translate(-50%, -50%);
}
.btn.primary {
  background: var(--accent-fill); color: var(--on-accent);
  border-color: transparent; width: 100%; padding: .75rem 1rem;
  font-weight: 650; font-size: .9375rem; letter-spacing: var(--track-body);
}
.btn.primary:hover { filter: brightness(1.09); background: var(--accent-fill); }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }
.btn[disabled]:hover { filter: none; background: var(--accent-fill); }

/* ============================== login ============================== */

.login-shell { min-height: 100%; display: grid; place-items: center; padding: 56px 20px; position: relative; z-index: 1; }
.login-inner { width: 100%; max-width: 452px; }

.login-lede { text-align: center; margin-bottom: 26px; }
.login-lede .brand-logo {
  margin: 0 auto 22px;
  height: clamp(54px, 10vw, 74px); width: auto;
}
.login-lede .kicker {
  font-family: var(--mono); font-size: .75rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--accent-strong); margin-bottom: .875rem;
}
/* Display: το μεγαλύτερο κείμενο της σελίδας, άρα το πιο σφιχτό tracking
   και το πιο σφιχτό leading. */
.login-lede h1 { font-size: clamp(1.875rem, 6vw, 2.625rem); line-height: 1.05; letter-spacing: var(--track-display); }
.login-lede h1 .b { color: var(--accent-strong); font-family: var(--mono); font-weight: 400; }
.login-lede p { color: var(--muted); margin: .625rem 0 0; font-size: .9375rem; letter-spacing: var(--track-body); }
.login-owner {
  font-family: var(--mono); font-size: .78rem;
  color: var(--accent-strong) !important;
  margin-top: .5rem !important;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow), var(--edge);
}
.card-head {
  display: flex; align-items: center; gap: .5625rem;
  padding: .6875rem 1rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  border-radius: 17px 17px 0 0;
  font-family: var(--mono); font-size: .75rem; color: var(--muted);
}
.card-head .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border-2); }
.card-head .dot:first-child { background: var(--accent); }
.card-body { padding: 1.625rem 1.625rem 1.5rem; }

.caret { display: inline-block; width: 8px; background: var(--accent); margin-left: 3px; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

label.field { display: block; font-size: .8125rem; font-weight: 600; letter-spacing: var(--track-caption); color: var(--text-dim); margin-bottom: .5rem; }
input[type="email"], input[type="text"] {
  width: 100%; font: inherit; font-size: .9375rem;
  color: var(--text); background: var(--bg);
  border: 1px solid var(--border-2); border-radius: 10px;
  padding: .75rem .875rem; margin-bottom: .5rem;
  transition: border-color var(--dur-quick) var(--ease-quick),
              background-color var(--speed) ease, color var(--speed) ease;
}
/* Η επικύρωση γίνεται επιτόπου: το πεδίο δείχνει το πρόβλημα μόλις φύγει ο
   δρομέας από πάνω του, όχι αφού πατηθεί το κουμπί. */
input.is-invalid { border-color: color-mix(in srgb, var(--danger) 60%, var(--border-2)); }
input::placeholder { color: var(--muted); }
input:focus { outline: 3px solid var(--accent-strong); outline-offset: 1px; border-color: transparent; }
.hint { font-size: .78rem; line-height: 1.5; letter-spacing: var(--track-caption); color: var(--muted); margin: 0 0 1rem; }

.msg {
  display: none; margin-top: 1rem; padding: .75rem .875rem;
  border-radius: 10px; font-size: .845rem; line-height: 1.5;
  border: 1px solid var(--border); background: var(--surface-2);
}
.msg.show { display: block; }
.msg.ok    { border-color: color-mix(in srgb, var(--ok) 50%, var(--border)); color: var(--ok); }
.msg.error { border-color: color-mix(in srgb, var(--danger) 50%, var(--border)); color: var(--danger); }

.login-foot { margin-top: 24px; text-align: center; }
.login-foot .label { font-size: .75rem; letter-spacing: var(--track-caption); color: var(--muted); margin-bottom: .75rem; }
.login-foot .logos { display: flex; justify-content: center; gap: 20px; align-items: center; }
.login-foot .logo { width: 24px; height: 24px; opacity: .55; }
.login-foot .btn.icon { margin: 0 auto; }

/* ============================= headings ============================= */

.page-head { margin-bottom: 30px; }
.page-head .kicker {
  font-family: var(--mono); font-size: .75rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--accent-strong); margin-bottom: .625rem;
}
.page-head h1 { font-size: clamp(1.625rem, 4.4vw, 2.125rem); line-height: 1.08; letter-spacing: var(--track-title); }
.page-head p { color: var(--muted); margin: .5625rem 0 0; font-size: .906rem; line-height: 1.5; letter-spacing: var(--track-body); }

.back { display: inline-flex; align-items: center; gap: .5rem; font-size: .845rem; color: var(--muted); text-decoration: none; margin-bottom: 1.25rem;
  transition: transform var(--dur-quick) var(--ease-quick), color var(--speed) ease; }
.back:hover { color: var(--accent-strong); }
.back svg { width: 15px; height: 15px; }

/* =========================== logo marks =========================== */

.logo {
  display: block;
  background-color: var(--accent);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
}

/* ========================== class cards ========================== */

.grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

/* Η κάρτα έχει βάθος και σε ηρεμία· στο hover ανεβαίνει και φωτίζεται. Κινούνται
   μόνο transform και opacity — ό,τι τρέχει στον compositor. */
.class-card {
  position: relative; display: block; text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.375rem 1.375rem 1.125rem 1.625rem;
  overflow: hidden;
  box-shadow: var(--shadow), var(--edge);
  transition: transform var(--dur-smooth) var(--ease-smooth),
              background-color var(--speed) ease,
              border-color var(--speed) ease,
              color var(--speed) ease;
}
/* the accent, given room to breathe */
.class-card::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 7px; background: var(--accent);
  transform-origin: left center;
  transition: transform var(--dur-smooth) var(--ease-smooth);
}
.class-card::after {
  content: ""; position: absolute; right: -70px; top: -70px;
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, var(--accent-wash), transparent 66%);
  pointer-events: none;
  opacity: .78;
  transition: opacity var(--dur-smooth) var(--ease-smooth);
}
.class-card:hover { border-color: var(--accent-line); transform: translateY(-3px); }
.class-card:hover::before { transform: scaleX(1.6); }   /* scale, όχι width: χωρίς reflow */
.class-card:hover::after  { opacity: 1; }

.class-card .top { display: flex; align-items: flex-start; justify-content: space-between; gap: .875rem; }
.class-card .logo { width: 2.125rem; height: 2.125rem; }
.class-card h2 { font-size: 1.1875rem; line-height: 1.25; letter-spacing: var(--track-title-2); margin: .9375rem 0 .4375rem; }
.class-card p { margin: 0; color: var(--muted); font-size: .845rem; line-height: 1.5; letter-spacing: var(--track-body); }

.class-card .meta {
  margin-top: 1.125rem; padding-top: .875rem; border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: .625rem;
  font-size: .78rem; color: var(--muted); font-family: var(--mono);
}
.class-card .go { color: var(--accent-strong); font-weight: 700; font-family: var(--font); }

/* =========================== class hero =========================== */

.class-hero {
  position: relative; overflow: hidden;
  display: flex; align-items: flex-start; gap: 20px;
  padding: 1.625rem;
  margin-bottom: 1.625rem;
  border: 1px solid var(--accent-line);
  border-radius: var(--radius);
  background:
    linear-gradient(100deg, var(--accent-wash), transparent 62%),
    var(--surface);
  box-shadow: var(--shadow), var(--edge);
}
.class-hero::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 7px; background: var(--accent); }
.class-hero .logo { width: 3.375rem; height: 3.375rem; flex: none; margin-top: .25rem; }
.class-hero h1 { font-size: clamp(1.5rem, 4.2vw, 2rem); line-height: 1.1; letter-spacing: var(--track-title); }
.class-hero p { margin: .4375rem 0 0; color: var(--text-dim); font-size: .906rem; line-height: 1.5; letter-spacing: var(--track-body); max-width: 62ch; }
.class-hero .stats { display: flex; gap: .5rem; margin-top: .875rem; flex-wrap: wrap; }

.chip {
  font-family: var(--mono); font-size: .72rem; font-weight: 600;
  letter-spacing: var(--track-caption);
  padding: .25rem .625rem; border-radius: 99px;
  color: var(--accent-strong);
  background: var(--accent-wash);
  border: 1px solid var(--accent-line);
}

/* ============================== labs ============================== */


.lab .title { display: block; font-weight: 600; font-size: .97rem; line-height: 1.35; letter-spacing: var(--track-callout); }
.lab .note { display: block; color: var(--muted); font-size: .8125rem; line-height: 1.45; margin-top: .25rem; }

.tag {
  font-family: var(--mono); font-size: .66rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  padding: .125rem .5rem; border-radius: 99px;
  color: var(--on-accent); background: var(--accent-fill);
}

/* ============================= states ============================= */

.empty {
  text-align: center; padding: 58px 26px;
  border: 1px dashed var(--border-2); border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  color: var(--muted);
}
.empty svg { width: 2.125rem; height: 2.125rem; color: var(--accent-strong); margin-bottom: .875rem; }
.empty h2 { font-size: 1.125rem; letter-spacing: var(--track-title-2); color: var(--text); margin-bottom: .5rem; }
.empty p { margin: 0 auto; max-width: 420px; font-size: .875rem; line-height: 1.55; }

.skeleton { display: grid; gap: 12px; }
.skeleton div {
  height: 78px; border-radius: 12px;
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 50%, var(--surface) 75%);
  background-size: 300% 100%;
  animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer { to { background-position: -300% 0; } }

.banner-warn {
  margin-bottom: 1.5rem; padding: .875rem 1.0625rem;
  border-radius: 11px; font-size: .845rem; line-height: 1.55;
  border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--border));
  background: color-mix(in srgb, var(--warn) 10%, var(--surface));
  color: var(--text-dim);
}
.banner-warn b { color: var(--text); }
.banner-warn code { font-family: var(--mono); font-size: .78rem; }

.hidden { display: none !important; }

footer.foot {
  margin-top: 3.125rem; padding-top: 1.25rem; border-top: 1px solid var(--border);
  font-size: .78rem; letter-spacing: var(--track-caption); color: var(--muted);
}

/* ======================= page-change transition ======================= */

/* Το πλακίδιο κλειδώνει τη στιγμή του κλικ: το accent απλώνεται από αριστερά
   προς τα δεξιά πίσω από το κείμενο, όσο τα γράμματα διαλύονται σε τυχαίους
   χαρακτήρες — έτσι το πλακίδιο βάφεται χωρίς να χαθούν τα γράμματα. */
.is-warping { position: relative; overflow: hidden; pointer-events: none; }
.is-warping.class-card:hover, .is-warping.lab:hover { transform: none; }

/* Το περιεχόμενο ανεβαίνει πάνω από το χρώμα, αντί να το σκεπάζει εκείνο, και
   σβήνει γραμμικά μαζί με το γέμισμα μέχρι το --warp-fade (0.2 = 20% ορατό στο
   τέλος). Τη διάρκεια και το τελικό σβήσιμο τα δίνει το transition.js. */
.is-warping > *:not(.warp-fill) {
  position: relative; z-index: 1;
  transition: opacity var(--warp-time, 1.5s) linear;
}
.warp-go > *:not(.warp-fill) { opacity: var(--warp-fade, .2); }

.warp-fill {
  position: absolute; inset: 0; z-index: 0;
  /* var(--accent) και όχι --accent-fill: το accent-fill έχει ήδη υπολογιστεί στο
     :root, ενώ κάθε κάρτα μαθήματος κουβαλά το δικό της --accent. Το μείγμα με
     το --bg κρατά το κείμενο ευανάγνωστο και στα δύο θέματα: σκούρο accent στο
     σκοτεινό, παστέλ στο φωτεινό. */
  background: color-mix(in srgb, var(--accent) 50%, var(--bg));
  box-shadow: 0 0 26px 2px color-mix(in srgb, var(--accent) 45%, transparent);
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--warp-time, 1.5s) cubic-bezier(.65, .02, .35, 1);
  pointer-events: none;
}
.warp-go .warp-fill { transform: scaleX(1); }

/* ============================ πληκτρολόγηση ============================ */

/* Όσο γράφεται το `cd ..`, ο σύνδεσμος επιστροφής γίνεται γραμμή τερματικού. */
.is-typing { font-family: var(--mono); color: var(--accent-strong); }
.is-typing .caret { vertical-align: baseline; }

/* Στην αποσύνδεση δεν πατιέται τίποτε άλλο όσο σπάνε τα γράμματα. */
.is-glitching { pointer-events: none; }

/* ============================== footer ============================== */

footer.foot .legal {
  margin: 14px 0 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  font-family: var(--mono); font-size: .75rem; color: var(--muted);
}
footer.foot .legal a { color: var(--muted); text-decoration: none; }
footer.foot .legal a span { border-bottom: 1px solid var(--border-2); }
footer.foot .legal a:hover { color: var(--accent-strong); }
footer.foot .legal a:hover span { border-bottom-color: var(--accent-line); }
/* Το διαχωριστικό ταξιδεύει μαζί με τον σύνδεσμο, ώστε να μη μένει ορφανό
   στο τέλος μιας γραμμής όταν το υποσέλιδο σπάει στα δύο. */
footer.foot .legal a::before { content: "·"; margin-right: 12px; opacity: .5; }
footer.foot p { margin: 0; }

/* Στη σελίδα σύνδεσης το ίδιο κείμενο στέκεται μόνο του, χωρίς γραμμή. */
footer.login-legal {
  margin-top: 30px; padding-top: 0; border: 0; text-align: center;
}
footer.login-legal .legal { justify-content: center; margin: 0; }

/* ============================== κείμενο ============================== */

.prose { max-width: 68ch; }
.prose h2 {
  font-size: 1.125rem; margin: 1.875rem 0 .625rem;
  font-family: var(--mono); color: var(--accent-strong);
  letter-spacing: -.01em;
}
.prose h2::before { content: "// "; opacity: .55; }
.prose p, .prose li { color: var(--text-dim); font-size: .906rem; line-height: 1.65; letter-spacing: var(--track-body); }
.prose p { margin: 0 0 12px; }
.prose ul { margin: 0 0 12px; padding-left: 20px; }
.prose li { margin-bottom: 6px; }
.prose code { font-family: var(--mono); font-size: .78rem; color: var(--accent-strong); }
.prose a { color: var(--accent-strong); }
.prose .updated { font-family: var(--mono); font-size: .75rem; color: var(--muted); }

/* ============================== αρχική ==============================
   Δύο κάρτες, ένα υλικό. Ο επισκέπτης έχει μία απόφαση να πάρει. */

.nav-links { display: flex; gap: 1.25rem; font-size: .84rem; color: var(--muted); }
.nav-links a { text-decoration: none; }
.nav-links a:hover { color: var(--text); }
@media (max-width: 620px) { .nav-links { display: none; } }

.hero { padding: clamp(3rem, 8vw, 5.5rem) 0 2rem; text-align: center; }
.display {
  font-size: clamp(2.25rem, 5.4vw, 3.4rem); line-height: 1.06;
  letter-spacing: var(--track-display); font-weight: 700; margin: 0;
}
.lede {
  font-size: clamp(1rem, 1.7vw, 1.25rem); line-height: 1.45;
  color: var(--muted); margin: 1rem auto 0; max-width: 34em;
}
.hero-owner {
  font-family: var(--mono); font-size: .8rem; color: var(--accent-strong);
  margin: .625rem 0 0;
}
.scope-note {
  margin: 2rem auto 0; max-width: 46em;
  padding: .75rem 1rem;
  border: 1px solid var(--border); border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 60%, transparent);
  font-size: .82rem; line-height: 1.5; color: var(--muted);
}

.course-grid {
  display: grid; gap: 1rem; margin: 2.75rem auto 0;
  grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
  max-width: 60rem; text-align: left;
}
.course-card {
  appearance: none; cursor: pointer; font: inherit; color: inherit;
  display: flex; flex-direction: column; align-items: flex-start; gap: .625rem;
  text-align: left;                     /* τα <button> κεντράρουν από μόνα τους */
  padding: 1.375rem 1.5rem; min-height: 11.5rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow), var(--edge);
  transition: transform var(--dur-smooth) var(--ease-smooth),
              border-color var(--speed) ease, background-color var(--speed) ease;
}
.course-card:hover { border-color: var(--accent-line); transform: translateY(-3px); }
.course-top { display: flex; align-items: center; gap: .75rem; }
.course-top .glyph { width: 2.25rem; height: 2.25rem; border-radius: 9px; }
.course-card h3 {
  font-size: 1.25rem; line-height: 1.15;
  letter-spacing: var(--track-title); margin: 0; font-weight: 700;
}
.course-card p { margin: 0; font-size: .85rem; line-height: 1.5; color: var(--muted); }
.course-foot {
  margin-top: auto; padding-top: .75rem; width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: .625rem;
  font-family: var(--mono); font-size: .72rem; color: var(--muted);
}
.course-lock, .course-open { display: inline-flex; align-items: center; gap: .375rem; }
.course-open { color: var(--ok); }
.course-foot svg { width: .8125rem; height: .8125rem; display: block; }

/* --------------------------- υλικό για όλους --------------------------- */

.section { padding: 2.5rem 0; }
.sec-head { margin-bottom: 1.25rem; }
.sec { font-size: clamp(1.375rem, 2.6vw, 1.75rem); letter-spacing: var(--track-title); margin: 0; font-weight: 650; }
.sec-sub { margin: .375rem 0 0; font-size: .9rem; }
.small { font-size: .82rem; }
.muted { color: var(--muted); }

.res-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }
.res-card {
  padding: 1.5rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); box-shadow: var(--edge);
}
.res-head { display: flex; align-items: center; gap: .625rem; }
.res-ic { color: var(--accent-strong); }
.res-ic svg { width: 1.125rem; height: 1.125rem; display: block; }
.res-card h3 { font-size: 1.0625rem; letter-spacing: var(--track-title-2); margin: 0; font-weight: 650; }
.res-card p { margin: .375rem 0 0; line-height: 1.5; }
.res-card ul { list-style: none; margin: 1rem 0 0; padding: 0; }
.res-card li a {
  display: flex; justify-content: space-between; align-items: center; gap: .5rem;
  padding: .5625rem 0; color: var(--accent-strong); font-size: .875rem;
  text-decoration: none;
  transition: transform var(--dur-quick) var(--ease-quick);
}
.res-card li + li a { border-top: 1px solid var(--border); }
.res-card li a:hover { text-decoration: underline; }
.res-card li a svg { width: .8125rem; height: .8125rem; flex: none; opacity: .6; }

/* ========================== πλαίσιο κωδικού ========================== */

dialog.sheet {
  width: min(25rem, calc(100% - 2rem));
  padding: 2rem 1.75rem 1.5rem;
  border: 1px solid var(--border); border-radius: 22px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
          backdrop-filter: blur(30px) saturate(180%);
  color: var(--text);
  box-shadow: 0 30px 80px rgba(0,0,0,.4);
  text-align: center;
}
dialog.sheet::backdrop { background: rgba(0,0,0,.45); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
dialog.sheet[open] { animation: sheet-in var(--dur-bounce) var(--ease-bounce); }
@keyframes sheet-in { from { opacity: 0; transform: translateY(12px) scale(.96); } }
.sheet-lock {
  width: 3.25rem; height: 3.25rem; border-radius: 50%;
  display: grid; place-items: center; margin: 0 auto 1rem;
  background: var(--accent-wash); color: var(--accent-strong);
  -webkit-mask: none;
}
.sheet-lock::before {
  content: ""; width: 1.375rem; height: 1.375rem; display: block;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='10' width='16' height='11' rx='2.5' fill='black'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='10' width='16' height='11' rx='2.5' fill='black'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat;
}
dialog.sheet h2 { font-size: 1.4rem; letter-spacing: var(--track-title); margin: 0 0 .375rem; }
dialog.sheet p { margin: 0; font-size: .875rem; }

.code-field {
  display: block; width: 100%; height: 3.125rem; margin-top: 1.375rem;
  border-radius: 12px; border: 1px solid var(--border-2);
  background: var(--bg); color: var(--text);
  font: inherit; font-family: var(--mono); font-size: 1.125rem;
  letter-spacing: .24em; text-align: center; text-transform: uppercase;
}
.code-field::placeholder { letter-spacing: 0; font-size: .95rem; text-transform: none; color: var(--muted); font-family: var(--font); }
.code-field.shake { animation: shake .34s cubic-bezier(.36,.07,.19,.97); }
@keyframes shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-7px); }
  40%, 60% { transform: translateX(7px); }
}
.gate-msg { display: none; margin-top: .75rem !important; font-size: .82rem !important; color: var(--danger) !important; }
.gate-msg.show { display: block; }
.sheet-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .625rem; margin-top: 1rem; }
.sheet-actions .btn { height: 2.875rem; border-radius: 12px; font-size: .95rem; width: auto; }

/* ============================= βιβλιοθήκη =============================
   Πλάι-πλάι: αριστερά τι υπάρχει, δεξιά τι διάλεξε. Σε στενή οθόνη η λίστα
   γίνεται οριζόντια σειρά από πλακίδια. */

.split {
  /* Πιο πλατύ από τις σελίδες κειμένου: εδώ δεν διαβάζει κανείς παράγραφο, εδώ
     συγκρίνει στήλες. Ο πίνακας χρειάζεται τον χώρο για να χωρέσει ολόκληρος. */
  max-width: 1280px;
  display: grid; grid-template-columns: 13.5rem minmax(0, 1fr);
  gap: 2.25rem; padding: 2.25rem 1.5rem 4rem;
  align-items: start;
}
.side { position: sticky; top: 4.75rem; display: flex; flex-direction: column; gap: .125rem; }
.side-h {
  font-family: var(--mono); font-size: .68rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  margin: 1.25rem .625rem .375rem;
}
.side-h:first-child { margin-top: 0; }
.side-i {
  appearance: none; cursor: pointer; font: inherit; color: inherit; text-align: left;
  display: flex; align-items: center; gap: .625rem;
  padding: .375rem .625rem; border: 0; border-radius: 10px;
  background: transparent; font-size: .875rem;
  transition: transform var(--dur-quick) var(--ease-quick), background-color .16s ease;
}
.side-i:hover { background: var(--surface-2); }
.side-i.is-active { background: var(--surface); font-weight: 650; box-shadow: var(--edge); }
.side-i > span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-ic { color: var(--muted); display: grid; place-items: center; width: 1.75rem; }
.side-ic svg { width: 1rem; height: 1rem; display: block; }
.side-add { text-decoration: none; color: var(--muted); }
.side-add:hover { color: var(--text); }
.count { font-family: var(--mono); font-size: .72rem; color: var(--muted); font-variant-numeric: tabular-nums; }

@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; gap: 1.5rem; padding: 1.5rem 1rem 3rem; }
  .side { position: static; flex-direction: row; overflow-x: auto; gap: .5rem; padding-bottom: .25rem; }
  .side-h { display: none; }
  .side-i { flex: none; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: .375rem .875rem .375rem .375rem; }
}

/* πλακίδιο μαθήματος */
.glyph {
  flex: none; width: 1.75rem; height: 1.75rem; border-radius: 7px;
  display: grid; place-items: center;
  background: var(--accent);
}
.glyph-logo {
  width: 62%; height: 62%; background: #fff;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
}
.glyph.lg { width: 4.5rem; height: 4.5rem; border-radius: 17px; }
.glyph.is-plain { background: var(--accent-wash); color: var(--accent-strong); }
.glyph.is-plain svg { width: 1.75rem; height: 1.75rem; }

/* κεφαλίδα δεξιάς στήλης */
.d-head { display: flex; align-items: center; gap: 1.25rem; margin-bottom: 1.5rem; }
.d-title { font-size: clamp(1.625rem, 3.4vw, 2.3rem); line-height: 1.1; letter-spacing: var(--track-title); margin: .125rem 0 0; font-weight: 700; }
.d-sub { margin: .4375rem 0 0; font-size: .9rem; line-height: 1.5; max-width: 60ch; }
@media (max-width: 560px) { .d-head { gap: .875rem; } .glyph.lg { width: 3.25rem; height: 3.25rem; border-radius: 13px; } }

/* ============================ λίστα σειρών ============================ */

.tl-block { margin-top: 2rem; }
.tl-h {
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--mono); font-size: .68rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  padding-bottom: .5rem; margin: 0 0 .25rem;
  border-bottom: 1px solid var(--border);
}

/* Κάρτες, όχι σειρές πίνακα: κάθε εργαστήριο είναι δικό του αντικείμενο, με
   περίγραμμα, βάθος και αριθμημένο πλακίδιο στο χρώμα του μαθήματος. */
.tl { display: grid; gap: .6875rem; }
.lab {
  display: grid; grid-template-columns: 2.875rem minmax(0, 1fr) 4.5rem 1rem;
  align-items: center; gap: 1rem;
  padding: .9375rem 1.0625rem;
  text-decoration: none; color: inherit;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent-line);
  border-radius: 12px;
  box-shadow: var(--edge);
  transition: transform var(--dur-quick) var(--ease-quick),
              background-color .16s ease, border-color .16s ease;
}
.lab:hover {
  background: var(--surface-2);
  border-color: var(--accent-line); border-left-color: var(--accent);
  transform: translateX(3px);
}
.lab.is-now {
  border-color: var(--accent-line); border-left-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}
.lab-n {
  width: 2.875rem; height: 2.875rem; border-radius: 11px;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 1rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--on-accent); background: var(--accent-fill);
}
/* Διαλέξεις και επιπλέον υλικό: ίδια κάρτα, ήπιο πλακίδιο αντί για αριθμό. */
.doc-row { border-left-color: var(--border); }
.doc-row .lab-n {
  background: var(--accent-wash); color: var(--accent-strong);
  border: 1px solid var(--accent-line);
}
.doc-row.is-shared .lab-n { background: var(--surface-2); color: var(--muted); border-color: var(--border); }
.lab-n svg { width: 1.0625rem; height: 1.0625rem; display: block; }
.lab-main { min-width: 0; }
.lab-title { display: block; font-weight: 600; font-size: .95rem; line-height: 1.3; letter-spacing: var(--track-callout); }
.lab-note { display: block; font-size: .8rem; color: var(--muted); margin-top: .1875rem; line-height: 1.4; }
.lab-date {
  font-family: var(--mono); font-size: .78rem; color: var(--muted);
  text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.lab-go { color: var(--muted); }
.lab-go svg { width: .9375rem; height: .9375rem; display: block; }
.lab:hover .lab-go { color: var(--accent-strong); }
.tag.new {
  background: var(--accent-wash); color: var(--accent-strong);
  border: 1px solid var(--accent-line); vertical-align: 1px;
}

@media (max-width: 640px) {
  .lab { grid-template-columns: 2.5rem minmax(0, 1fr) 1rem; row-gap: .375rem; gap: .875rem; padding: .875rem; }
  .lab-n { width: 2.5rem; height: 2.5rem; font-size: .875rem; }
  .lab-date { grid-column: 2; grid-row: 2; text-align: left; }
  .lab-go { grid-column: 3; grid-row: 1; }
}

/* ============================== πρόοδος ============================== */

.d-bar { display: flex; align-items: center; gap: 1rem; margin: 1.125rem 0 0; max-width: 30rem; }
.progress {
  /* Το αυλάκι βγαίνει από το ίδιο το κείμενο, όχι από τις επιφάνειες: έτσι
     είναι πάντα ένα σκαλί πιο βαθύ από το φόντο, σε όποιο θέμα κι αν βρεθεί. */
  flex: 1; height: 6px; border-radius: 99px; overflow: hidden;
  background: color-mix(in srgb, var(--text) 11%, transparent);
}
.progress i { transition: width var(--dur-smooth) var(--ease-smooth); }
.progress i { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
.d-bar .small { white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .d-bar { flex-direction: column; align-items: stretch; gap: .5rem; } }

/* ========================= εναλλαγή εμφάνισης ========================= */

.seg {
  display: inline-flex; gap: 2px; padding: 2px;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface-2);
}
.seg button {
  appearance: none; cursor: pointer; font: inherit; font-size: .78rem; font-weight: 550;
  display: inline-flex; align-items: center; gap: .375rem;
  padding: .3125rem .6875rem; border: 0; border-radius: 999px;
  color: var(--muted); background: transparent;
  transition: transform var(--dur-quick) var(--ease-quick), background-color .16s ease, color .16s ease;
}
.seg button:hover { color: var(--text); }
.seg button.is-on { color: var(--on-accent); background: var(--accent-fill); }
.seg svg { width: .875rem; height: .875rem; display: block; }
@media (max-width: 720px) { .seg button span { display: none; } .seg button { padding: .375rem .5rem; } }

/* ============================== ο πίνακας ==============================
   Στήλη ανά μάθημα, σειρά ανά αριθμό — η διάταξη του Notion.

   Οι στήλες μοιράζονται ό,τι πλάτος υπάρχει (`minmax(0, 1fr)`) αντί να
   απαιτούν ελάχιστο: όσα μαθήματα κι αν έχει το έτος, χωρούν όλα σε μία οθόνη
   και δεν χρειάζεται οριζόντια κύλιση. Μόνο στο κινητό ο πίνακας γίνεται
   ταμπλό που κυλά πλάγια, όπως κάθε board σε μικρή οθόνη. */

.gal-head { margin-bottom: 1.5rem; }
.gal-scroll { margin: 0 -.375rem; padding: 0 .375rem .25rem; }

.gal-grid {
  display: grid;
  grid-template-columns: 1.375rem repeat(var(--cols, 2), minmax(0, 1fr));
  column-gap: .625rem;
  row-gap: .5rem;
  align-items: stretch;
}

.gal-corner { }

/* Χωρίς πλαίσιο και χωρίς φόντο: μόνο το λογότυπο, το όνομα και μια γραμμή
   από κάτω. Το όνομα του μαθήματος είναι επικεφαλίδα στήλης — έχει το μέγεθος
   που του αναλογεί. */
.gal-col-h {
  display: flex; align-items: center; gap: .5625rem; min-width: 0;
  padding: 0 .125rem .75rem;
  font-size: 1.0625rem; font-weight: 650; letter-spacing: var(--track-title-2);
  border-bottom: 1px solid var(--border);
}
.gal-col-h > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Η στήλη του επιλεγμένου μαθήματος: το όνομα παίρνει χρώμα και η γραμμή από
   κάτω πυκνώνει — ίδιο σήμα με το πλαϊνό μενού, χωρίς θόρυβο. */
.gal-col-h.is-active { color: var(--accent-strong); border-bottom-color: var(--accent); }
.gal-col-h .glyph { width: 1.625rem; height: 1.625rem; border-radius: 7px; }
@media (max-width: 1100px) { .gal-col-h { font-size: .95rem; } }

.gal-rn {
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: .1875rem;
  font-family: var(--mono); font-size: .72rem; color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* Διαλέξεις και επιπλέον υλικό δεν μπαίνουν στον πίνακα: δεν είναι αριθμημένα
   και δεν αντιστοιχούν σειρά προς σειρά. Μπαίνουν από κάτω, ανά μάθημα, με την
   ίδια μορφή που έχουν και στη Λίστα. */
.gal-extra { margin-top: 3rem; }
.gal-extra.is-active .gal-extra-h { color: var(--accent-strong); border-bottom-color: var(--accent); }
.gal-extra-h {
  display: flex; align-items: center; gap: .625rem;
  font-size: 1.0625rem; font-weight: 650; letter-spacing: var(--track-title-2);
  padding-bottom: .75rem; margin-bottom: .25rem;
  border-bottom: 1px solid var(--border);
}
.gal-extra-h .glyph { width: 1.625rem; height: 1.625rem; border-radius: 7px; }
.gal-extra .tl-block { margin-top: 1.25rem; }

.gal-cell { min-height: 4.75rem; border-radius: 11px; }
/* Το κενό δεν είναι σφάλμα — είναι «εδώ δεν υπάρχει ακόμη κάτι». Ελάχιστο
   βάρος, ίσα που να κρατά τη στήλη ευθυγραμμισμένη. */
.gal-cell.is-empty { background: color-mix(in srgb, var(--surface) 42%, transparent); }

.gal-card {
  display: flex; flex-direction: column; gap: .5rem;
  padding: .75rem .8125rem;
  text-decoration: none; color: inherit;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow), var(--edge);
  overflow-wrap: anywhere;
  transition: transform var(--dur-quick) var(--ease-quick),
              border-color .16s ease, box-shadow .16s ease;
}
.gal-card:hover { border-color: var(--accent-line); box-shadow: var(--shadow-lift), var(--edge); transform: translateY(-2px); }
.gal-card.is-now { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow); }

.gal-title {
  font-size: .8125rem; font-weight: 600; line-height: 1.35;
  letter-spacing: var(--track-callout);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.gal-foot {
  margin-top: auto; display: flex; align-items: center; gap: .4375rem; flex-wrap: wrap;
  font-family: var(--mono); font-size: .66rem; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.gal-date { margin-right: auto; }
.gal-go { color: var(--muted); display: block; margin-left: auto; }
.gal-go svg { width: .75rem; height: .75rem; display: block; }
.gal-card:hover .gal-go { color: var(--accent-strong); }
.gal-card .tag.new { font-size: .58rem; padding: .0625rem .375rem; }

/* Πολλά μαθήματα σε μία οθόνη: λιγότερο εσωτερικό περιθώριο, ίδια ανάγνωση. */
@media (max-width: 1100px) {
  .gal-card { padding: .625rem .6875rem; }
  .gal-title { font-size: .78rem; }
}

/* Στο κινητό γίνεται ταμπλό που κυλά πλάγια. */
@media (max-width: 860px) {
  .gal-scroll { overflow-x: auto; }
  .gal-grid { grid-template-columns: 1.25rem repeat(var(--cols, 2), minmax(11rem, 1fr)); min-width: min-content; }
}

/* ====================== το εργαστήριο της ημέρας ====================== */

.now-card {
  display: flex; align-items: center; gap: 1.25rem;
  text-decoration: none;
  padding: 1.125rem 1.25rem; margin-bottom: .5rem;
  border-radius: var(--radius);
  background: var(--accent-fill); color: var(--on-accent);
  box-shadow: var(--shadow);
  transition: transform var(--dur-quick) var(--ease-quick), filter .16s ease;
}
.now-card:hover { filter: brightness(1.06); transform: translateY(-2px); }
.now-card-body { display: block; flex: 1; min-width: 0; }
.now-kicker {
  display: block; font-family: var(--mono); font-size: .66rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; opacity: .78;
}
.now-card-title { display: block; margin-top: .25rem; font-size: 1rem; font-weight: 650; line-height: 1.3; letter-spacing: var(--track-title-2); }
.now-card-date { display: block; margin-top: .1875rem; font-family: var(--mono); font-size: .7rem; opacity: .78; font-variant-numeric: tabular-nums; }
.now-card-go {
  flex: none; display: inline-flex; align-items: center; gap: .375rem;
  font-size: .8rem; font-weight: 650;
  padding: .4375rem .75rem; border-radius: 99px;
  background: color-mix(in srgb, var(--on-accent) 16%, transparent);
}
.now-card-go svg { width: .8125rem; height: .8125rem; display: block; }
@media (max-width: 560px) {
  .now-card { flex-direction: column; align-items: stretch; gap: .875rem; }
  .now-card-go { justify-content: center; }
}

.cal-none { color: var(--muted); font-size: .875rem; }

/* ========================= κατάσταση πατήματος =========================
   Μπαίνει μετά από κάθε component, ώστε το πάτημα να κερδίζει πάντα το hover:
   με το ποντίκι ο δείκτης είναι ούτως ή άλλως από πάνω τη στιγμή που πατάει.
   Όσο μεγαλύτερη η επιφάνεια, τόσο λιγότερο βυθίζεται — όπως στον φυσικό κόσμο. */

.btn.is-pressed                     { transform: scale(.965); }
.class-card.is-pressed              { transform: translateY(-2px) scale(.985); }
.lab.is-pressed                     { transform: translateX(2px) scale(.992); }
.back.is-pressed, .brand.is-pressed { transform: scale(.96); }
.course-card.is-pressed             { transform: translateY(-2px) scale(.985); }
.side-i.is-pressed                  { transform: scale(.96); }
.lab.is-pressed                     { transform: translateX(2px) scale(.99); }
.gal-card.is-pressed                { transform: translateY(-1px) scale(.985); }
.seg button.is-pressed              { transform: scale(.94); }
.now-card.is-pressed                { transform: translateY(-1px) scale(.99); }
.res-card li a.is-pressed           { transform: scale(.98); }

/* Μόλις ξεκινήσει η μετάβαση σελίδας, το πάτημα παραδίδει τη σκυτάλη. */
.is-warping.is-pressed { transform: none; }

/* ============================ mobile ============================ */

@media (max-width: 620px) {
  .wrap { padding: 1.625rem 1rem 4.375rem; }
  footer.foot .legal { font-size: .72rem; }
  .class-hero { flex-direction: column; gap: .875rem; padding: 1.375rem 1.25rem; }
  .class-hero .logo { margin-top: 0; }
  .lab { padding: .875rem; gap: .8125rem; }
  .lab .num { width: 2.5rem; height: 2.5rem; font-size: .875rem; }
  .lab .meta .sep { display: none; }        /* χωρίς ορφανές τελείες όταν σπάει η γραμμή */
  .topbar { padding: .625rem .875rem; }
}

/* ===================== theme change animation ===================== */

::view-transition-old(root), ::view-transition-new(root) {
  animation: none; mix-blend-mode: normal;
}
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 2; }

/* ======================= προσβασιμότητα υλικού =======================
   Τρία ανεξάρτητα σήματα από το σύστημα του χρήστη, τρεις ανεξάρτητες
   απαντήσεις. Λιγότερη κίνηση δεν σημαίνει καμία απόκριση — σημαίνει
   απόκριση που δεν κουνά τον χώρο κάτω από τα μάτια. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .class-card:hover, .lab:hover, .back:hover { transform: none; }
  .rain .col { animation: none !important; }
  .warp-fill { display: none; }
  /* Το πάτημα μένει — αλλάζει ακαριαία, δεν ταξιδεύει. */
  [data-reveal] { animation: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}

/* Παγωμένο γυαλί αντί για διάφανο: το θόλωμα φεύγει, η επιφάνεια γίνεται συμπαγής. */
@media (prefers-reduced-transparency: reduce) {
  .topbar {
    background: var(--bg);
    backdrop-filter: none; -webkit-backdrop-filter: none;
    border-bottom-color: var(--border);
  }
  .topbar::after { display: none; }
  .empty { background: var(--surface); }
  body::before { opacity: .35; }
  .rain { opacity: .5; }
}

/* Περισσότερη αντίθεση: συμπαγές φόντο και ορατό περίγραμμα παντού. */
@media (prefers-contrast: more) {
  :root, [data-theme="light"] { --muted: var(--text-dim); }
  .topbar { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .class-card, .lab, .card, .class-hero { border-color: var(--border-2); }
  .chip { border-color: var(--accent-strong); }
  .rain { display: none; }
  :focus-visible { outline-width: 4px; }
}