/* ============================================================
   ΓΡΑΜΜΑΤΟΣΕΙΡΕΣ — τοπικές, από το assets/fonts/
   ------------------------------------------------------------
   Μέχρι τον Αύγουστο 2026 οι τρεις οικογένειες κατέβαιναν από το
   fonts.googleapis.com. Αυτό σήμαινε δύο πράγματα, και τα δύο ανεπιθύμητα:
   η τυπογραφία της σελίδας εξαρτιόταν από τρίτο server, και κάθε επισκέπτης
   έστελνε τη διεύθυνσή του στη Google ΠΡΙΝ πατήσει οτιδήποτε — διαβίβαση
   προσωπικού δεδομένου χωρίς συγκατάθεση. Τώρα η σελίδα δεν κάνει ούτε ένα
   αίτημα εκτός του geomiso.cloud.

   Τα αρχεία είναι ΑΥΤΟΥΣΙΑ τα woff2 της Google (ίδια subsets, ίδια
   unicode-range) — δεν έγινε κανένα ξαναχτίσιμο. Άρα ο επισκέπτης κατεβάζει
   ό,τι ακριβώς κατέβαζε πριν, μόνο από αλλού.

   Κρατήθηκαν τέσσερα subsets: latin, latin-ext, greek, greek-ext. Τα
   cyrillic και vietnamese πετάχτηκαν — η σελίδα δεν γράφει σε αυτά, και το
   unicode-range δεν θα τα ζητούσε ποτέ.

   ΠΡΟΣΟΧΗ: η IBM Plex Mono ΔΕΝ έχει ελληνικό subset — ούτε είχε ποτέ, ούτε
   στη Google. Ό,τι ελληνικό πέφτει σε .mono-label ή σε readout το ζωγραφίζει
   η Consolas του συστήματος. Αυτό ΔΕΝ είναι σφάλμα του self-hosting: είναι
   ακριβώς η ίδια συμπεριφορά με πριν. Αν κάποτε ενοχλήσει, η λύση είναι άλλη
   γραμματοσειρά στο --f-mono, όχι άλλο αρχείο εδώ.

   ΝΕΑ ΓΡΑΜΜΑΤΟΣΕΙΡΑ Ή ΝΕΟ ΒΑΡΟΣ: κατέβασε το woff2 στο assets/fonts/ και
   γράψε το @font-face εδώ. Μη βάλεις <link> προς CDN στο index.html — θα
   ξανανοίξει η ίδια τρύπα, και σιωπηλά.
   ============================================================ */

/* Commissioner 200 900 · latin */
@font-face{
  font-family:'Commissioner';
  font-style:normal;
  font-weight:200 900;
  font-display:swap;
  src:url(../fonts/commissioner-200-900-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Commissioner 200 900 · latin-ext */
@font-face{
  font-family:'Commissioner';
  font-style:normal;
  font-weight:200 900;
  font-display:swap;
  src:url(../fonts/commissioner-200-900-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Commissioner 200 900 · greek */
@font-face{
  font-family:'Commissioner';
  font-style:normal;
  font-weight:200 900;
  font-display:swap;
  src:url(../fonts/commissioner-200-900-greek.woff2) format('woff2');
  unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* IBM Plex Mono 400 · latin */
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url(../fonts/ibmplexmono-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Mono 400 · latin-ext */
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url(../fonts/ibmplexmono-400-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Mono 500 · latin */
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url(../fonts/ibmplexmono-500-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Mono 500 · latin-ext */
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url(../fonts/ibmplexmono-500-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Mono 600 · latin */
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url(../fonts/ibmplexmono-600-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Mono 600 · latin-ext */
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url(../fonts/ibmplexmono-600-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Literata 300 700 · latin */
@font-face{
  font-family:'Literata';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url(../fonts/literata-300-700-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Literata 300 700 · latin-ext */
@font-face{
  font-family:'Literata';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url(../fonts/literata-300-700-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Literata 300 700 · greek */
@font-face{
  font-family:'Literata';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url(../fonts/literata-300-700-greek.woff2) format('woff2');
  unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* Literata 300 700 · greek-ext */
@font-face{
  font-family:'Literata';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url(../fonts/literata-300-700-greek-ext.woff2) format('woff2');
  unicode-range:U+1F00-1FFF;
}

/* ============================================================
   SUBDIVISION SURFACES
   Light shell, navy structure, red for the detail that matters.
   The palette still encodes the algorithm:
     red  = the cage you author      (L0)
     navy = the surface it computes  (L∞)
   ============================================================ */

:root{
  /* surface */
  --bg:#FFFFFF;
  --bg-alt:#F1F4FA;
  --panel:#FFFFFF;
  --panel-2:#E9EFF7;
  --line:#DCE4EF;
  --line-2:#BCCADC;

  /* the two poles */
  --cage:#D01A2D;
  --cage-soft:rgba(208,26,45,.07);
  --cage-line:rgba(208,26,45,.34);
  --limit:#12386E;
  --limit-soft:rgba(18,56,110,.06);
  --limit-line:rgba(18,56,110,.26);

  /* Η κλίμακα του χρωματικού πεδίου των εργαστηρίων (§21δ, §22δ): πέντε
     στάσεις από τη μηδενική στη μέγιστη μετατόπιση. Οι δύο ΑΚΡΑΙΕΣ δεν
     γράφονται εδώ, γιατί είναι ήδη γραμμένες — είναι το --limit στο μηδέν
     και το --cage στο μέγιστο, τα ίδια δύο χρώματα που κρατά η σελίδα για
     ό,τι μένει και για ό,τι κινείται. Ένα τρίτο αντίγραφο των ίδιων hex θα
     ήταν μια δεύτερη αλήθεια που θα ξεχνιόταν στην πρώτη αλλαγή χρώματος. */
  --cont-1:#1C6FA8;
  --cont-2:#2F9C7C;
  --cont-3:#D89B24;

  /* deep field — cta and footer share it, separated by a hairline */
  --deep:#0E2647;
  --on-deep:#EEF3FA;
  --on-deep-mute:#9BAECA;

  /* text */
  --text:#0B111C;
  --muted:#4B5A72;
  --dim:#7B889D;

  /* type */
  --f-display:"Commissioner","Noto Sans Display","Segoe UI",system-ui,sans-serif;
  --f-body:"Literata","Noto Serif",Georgia,"Times New Roman",serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Consolas,"Courier New",monospace;

  /* rhythm */
  --gap:clamp(18px,2.4vw,32px);
  --sec-pad:clamp(66px,8vw,120px);
  --radius:3px;
  /* Τα κουμπιά έχουν δικό τους radius, πιο στρογγυλό από τις κάρτες: ένα
     κουμπί πρέπει να διαβάζεται ως κάτι που πατιέται, όχι ως πλαίσιο.
     Μία αλλαγή εδώ πιάνει .btn, τα L0–L∞, EL/EN και το burger. */
  --radius-btn:10px;
  --radius-ctl:7px;

  --shadow-sm:0 1px 2px rgba(11,17,28,.05),0 10px 26px -20px rgba(11,17,28,.40);
  --shadow-md:0 28px 64px -44px rgba(11,17,28,.55);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}

html[data-lang="el"] [data-l="en"]{display:none !important}
html[data-lang="en"] [data-l="el"]{display:none !important}

html{
  scroll-behavior:smooth;
  scroll-padding-top:86px;
  -webkit-text-size-adjust:100%;
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  /* και transition-delay: οι σκαλωτές αποκαλύψεις είναι καθυστερήσεις, και
     μια καθυστέρηση 270ms επιβιώνει από το μηδενισμό της διάρκειας */
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important;transition-delay:0ms !important;animation-delay:0ms !important}
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--f-body);
  font-size:clamp(15.5px,.42vw + 14.6px,17px);
  line-height:1.68;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ambient: one quiet wash + one hairline grid, nothing more */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(120% 70% at 80% -10%, rgba(18,56,110,.07), transparent 62%),
    radial-gradient(90% 60% at 6% 2%, rgba(208,26,45,.045), transparent 58%);
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.7;
  background-image:
    linear-gradient(to right,rgba(18,56,110,.045) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(18,56,110,.045) 1px,transparent 1px);
  background-size:96px 96px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 0%,transparent 78%);
  mask-image:radial-gradient(120% 90% at 50% 0%,#000 0%,transparent 78%);
}
main,.nav,.pagerwrap,.foot,.cta{position:relative;z-index:1}

img,svg,canvas{max-width:100%;display:block}

a{color:inherit}
:focus-visible{outline:2px solid var(--cage);outline-offset:3px;border-radius:2px}

.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--cage);color:#fff;padding:12px 18px;font-family:var(--f-mono);font-size:13px;
}
.skip:focus{left:12px;top:12px}

/* Grid and flex children default to min-width:auto, so one wide child
   (a code block, a long token) can push a whole track past the viewport.
   Every layout container on this page opts out. */
.cards-3>*,.cards-2>*,.split>*,.versus>*,.uses>*,.stackgrid>*,.creasegrid>*,.refinergrid>*,
.dias-4>*,.srcgrid>*,.loopdiag>*,.stats>*,.rule>*,.tl__item>*,
.featlist>li>*,.layers>li>*,.foot__map>*,.pager>*,.plans>*,.clients>*,
.doclayout>*{min-width:0}

/* ---------- shell ---------- */
.shell{
  width:100%;max-width:1260px;margin-inline:auto;
  padding-inline:clamp(20px,4.6vw,60px);
}
.shell--narrow{max-width:880px}

/* ---------- type roles ---------- */
.h-display{
  font-family:var(--f-display);
  font-weight:760;
  font-size:clamp(2.5rem,6.4vw,5.05rem);
  line-height:.98;
  letter-spacing:-.035em;
  margin:0 0 26px;
  text-wrap:balance;
  color:var(--limit);
}
.h-display em{font-style:normal;color:var(--cage)}
.h2{
  font-family:var(--f-display);
  font-weight:700;
  font-size:clamp(1.72rem,3.1vw,2.72rem);
  line-height:1.09;
  letter-spacing:-.028em;
  margin:0 0 18px;
  text-wrap:balance;
  color:var(--limit);
}
.h3{
  font-family:var(--f-display);
  font-weight:640;
  font-size:1.06rem;
  line-height:1.28;
  letter-spacing:-.012em;
  margin:0 0 10px;
  color:var(--text);
}
.mono-label{
  font-family:var(--f-mono);
  font-size:.665rem;
  font-weight:500;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--dim);
}
.lede{
  font-size:clamp(1.02rem,1.15vw,1.16rem);
  color:var(--muted);
  max-width:56ch;
  margin:0 0 34px;
}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
code{
  font-family:var(--f-mono);font-size:.86em;
  background:var(--panel-2);border:1px solid var(--line);
  padding:.08em .38em;border-radius:2px;color:var(--limit);
}

/* ============================================================
   NAV
   ============================================================ */
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:60;background:transparent}
.progress i{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--limit),var(--cage));
}

/* ---------- η οπτική ταυτότητα «Ελλάδα 2.0 / NextGenerationEU» ----------
   Η μπάρα κάθεται ΠΑΝΩ από το sticky menu, άρα φεύγει με την κύλιση: ο Οδηγός
   Επικοινωνίας του Ταμείου Ανάκαμψης ζητά η ταυτότητα να είναι ορατή στο πρώτο
   καρέ, όχι κολλημένη σε κάθε καρέ — και ένα δεύτερο sticky στρώμα θα έτρωγε
   66px οθόνης σε κάθε διάγραμμα.

   Το φόντο είναι ΛΕΥΚΟ και όχι --bg-alt επίτηδες: η επίσημη εικόνα κουβαλά το
   δικό της λευκό φόντο (δεν επιτρέπεται να το κόψουμε), οπότε πάνω σε #F1F4FA
   θα φαινόταν ένα λευκό ορθογώνιο γύρω από το έμβλημα.

   Η στοίχιση είναι ΔΕΞΙΑ, απέναντι από το logo της Geomiso που ξεκινά αριστερά
   μια γραμμή πιο κάτω: ο Οδηγός θέλει τα λοιπά λογότυπα «σε σχετική απόσταση»
   από την ταυτότητα, και η μεγαλύτερη απόσταση που χωράει η μπάρα είναι αυτή.

   Τα 40px είναι το κατώτατο όριο του Οδηγού (1 cm) με μια ανάσα, και ισχύουν
   και σε κινητό: στα 320px οθόνης η ελληνική εκδοχή πιάνει 235px μέσα σε 280px
   διαθέσιμα. Μην τα κάνεις clamp() — δεν είναι θέμα γούστου, είναι όριο. */
.eubar{background:var(--bg);border-bottom:1px solid var(--line)}
.eubar__inner{display:flex;justify-content:flex-end;padding-block:9px}
/* line-height:0 στον σύνδεσμο: αλλιώς η γραμμή βάσης του inline <img> αφήνει
   τρεις ψευδείς γραμμές από κάτω και η μπάρα βγαίνει ασύμμετρη. */
.eubar__link{display:block;line-height:0;text-decoration:none}
.eubar__logo{display:block;height:40px;width:auto}

.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.80);
  backdrop-filter:blur(14px) saturate(1.25);
  -webkit-backdrop-filter:blur(14px) saturate(1.25);
  border-bottom:1px solid transparent;
  transition:border-color .3s,background .3s,box-shadow .3s;
}
.nav.is-stuck{
  border-bottom-color:var(--line);
  background:rgba(255,255,255,.95);
  box-shadow:0 10px 30px -26px rgba(11,17,28,.7);
}
.nav__inner{display:flex;align-items:center;gap:20px;height:66px}

.brand{display:flex;align-items:center;text-decoration:none;flex:0 0 auto}
/* Το logo της Geomiso μπαίνει ΜΕ ΥΨΟΣ και width:auto, ποτέ το αντίστροφο: το
   αρχείο είναι 640x140 και ό,τι κουμπώνει με τη μπάρα των 66px είναι το ύψος.
   Τα 34px είναι το κατώφλι κάτω από το οποίο η κόκκινη ταινία του σλόγκαν
   παύει να διαβάζεται — μην τα κατεβάσεις για να χωρέσει κάτι δίπλα. */
.brand__logo{display:block;height:34px;width:auto;flex:0 0 auto}

/* stretched to the full nav height so the dropdown opens flush against the
   bar — no dead gap for the pointer to fall through on the way down */
.nav__links{display:flex;gap:clamp(10px,1.5vw,18px);margin-left:auto;align-self:stretch;align-items:center}
.nav__links a{
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.075em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;padding:7px 0;position:relative;white-space:nowrap;
  transition:color .2s;
}
.nav__links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--cage);transform:scaleX(0);transform-origin:left;transition:transform .28s;
}
.nav__links a:hover{color:var(--limit)}
.nav__links a:hover::after{transform:scaleX(1);opacity:.4}
.nav__links a.is-active{color:var(--cage);font-weight:600}
.nav__links a.is-active::after{transform:scaleX(1);opacity:1}

/* ---------- nav dropdown (Παραδοτέα → Π1 / Π2) ----------
   Opens on hover, on keyboard focus, and on click of the caret — the last
   one is what makes it usable on a touch device at desktop width. */
.nav__group{position:relative;display:flex;align-items:center;gap:4px;align-self:stretch}
.nav__caret{
  -webkit-appearance:none;appearance:none;background:transparent;border:0;padding:6px 0;cursor:pointer;
  display:inline-flex;align-items:center;color:var(--muted);transition:color .2s;
}
.nav__caret svg{width:9px;height:6px;display:block;transition:transform .25s}
.nav__caret:hover{color:var(--limit)}
.nav__group:hover .nav__caret svg,
.nav__group:focus-within .nav__caret svg,
.nav__group.is-open .nav__caret svg{transform:rotate(180deg)}

.nav__sub{
  position:absolute;top:100%;left:-14px;z-index:5;
  min-width:238px;margin:0;padding:6px;list-style:none;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 24px 50px -30px rgba(11,17,28,.6);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .2s,transform .2s,visibility .2s;
}
.nav__group:hover .nav__sub,
.nav__group:focus-within .nav__sub,
.nav__group.is-open .nav__sub{opacity:1;visibility:visible;transform:none}

.nav__sub a{
  display:flex;align-items:baseline;gap:10px;padding:11px 12px;border-radius:2px;
  font-family:var(--f-body);font-size:.92rem;letter-spacing:0;text-transform:none;
  color:var(--text);white-space:nowrap;
}
.nav__sub a::after{display:none}
.nav__sub a:hover{background:var(--panel-2);color:var(--limit)}
.nav__sub a.is-active{background:var(--limit);color:#fff;font-weight:600}
/* min-width ώστε να ευθυγραμμίζονται τα ονόματα· η σελίδα-κόμβος δεν έχει
   κωδικό και κουβαλάει άδειο badge μόνο γι' αυτή τη στοίχιση. */
.nav__sub-no{
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.1em;color:var(--cage);
  min-width:30px;
}
.nav__sub a.is-active .nav__sub-no{color:#FF8A96}
/* Σε μια geomiso-*.html φωτίζονται ΔΥΟ γραμμές: η ίδια η σελίδα και η
   σελίδα-κόμβος από πάνω της. Το navy pill το παίρνει μόνο η τρέχουσα
   (aria-current="page") — ο πρόγονος μένει απλώς έντονος, αλλιώς το μενού
   λέει δύο φορές «εδώ είσαι». */
.nav__sub a.is-active:not([aria-current="page"]){background:transparent;color:var(--cage)}
.nav__sub a.is-active:not([aria-current="page"]) .nav__sub-no{color:var(--cage)}

.nav__tools{display:flex;align-items:center;gap:12px;margin-left:8px}
.langswitch{display:flex;border:1px solid var(--line-2);border-radius:var(--radius-ctl);overflow:hidden}
.langswitch button{
  -webkit-appearance:none;appearance:none;background:transparent;border:0;cursor:pointer;
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.1em;color:var(--dim);
  padding:6px 9px;transition:color .2s,background .2s;
}
.langswitch button:hover{color:var(--limit)}
.langswitch button.is-on{background:var(--limit);color:#fff}

.burger{display:none;-webkit-appearance:none;appearance:none;background:transparent;border:1px solid var(--line-2);border-radius:var(--radius-ctl);width:36px;height:32px;cursor:pointer;padding:0;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.burger span{display:block;width:16px;height:1.5px;background:var(--limit);transition:transform .25s,opacity .25s}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.25px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.25px) rotate(-45deg)}

/* ============================================================
   PAGER — each nav entry is its own .html file, so prev/next
   replaces the continuous scroll of a one-page site
   ============================================================ */
.pagerwrap{border-top:1px solid var(--line);background:var(--bg)}
.pager{display:grid;grid-template-columns:1fr 1fr;background:var(--bg)}
.pager__side{
  background:var(--bg);text-decoration:none;
  padding:clamp(22px,3vw,34px) clamp(18px,2.4vw,30px);
  display:flex;flex-direction:column;gap:7px;
  transition:background .25s,color .25s;
}
.pager__side:hover{background:var(--panel-2)}
/* the divider only exists when there is something on both sides */
.pager__side--next{text-align:right;align-items:flex-end;grid-column:2;border-left:1px solid var(--line)}
.pager__side--next:only-child{border-left:0}
.pager__dir{
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.17em;text-transform:uppercase;
  color:var(--cage);
}
.pager__name{
  font-family:var(--f-display);font-weight:680;font-size:1.12rem;letter-spacing:-.018em;
  color:var(--limit);
}

/* ============================================================
   HERO
   ============================================================ */
.hero{padding:clamp(46px,7vw,90px) 0 0;overflow:hidden}
.hero__grid{
  display:grid;grid-template-columns:1.02fr .98fr;
  gap:clamp(28px,4vw,64px);align-items:center;
  padding-bottom:clamp(46px,6vw,78px);
}
.eyebrow{
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--cage);margin:0 0 24px;display:flex;flex-wrap:wrap;gap:.5em;align-items:center;
}
.eyebrow__sep{color:var(--line-2)}
.eyebrow span[data-l]{color:var(--muted)}

.hero__cta{display:flex;flex-wrap:wrap;gap:12px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--f-mono);font-size:.74rem;letter-spacing:.11em;text-transform:uppercase;
  text-decoration:none;padding:14px 24px;border-radius:var(--radius-btn);border:1px solid transparent;
  transition:transform .18s,background .22s,border-color .22s,color .22s,box-shadow .22s;
}
.btn--solid{background:var(--limit);color:#fff;font-weight:600}
.btn--solid:hover{background:var(--cage);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.btn--ghost{border-color:var(--line-2);color:var(--limit)}
.btn--ghost:hover{border-color:var(--cage);color:var(--cage);transform:translateY(-2px)}
.btn--lg{padding:18px 34px;font-size:.78rem;border-radius:calc(var(--radius-btn) + 2px)}

/* ---------- SIGNATURE: the refiner ---------- */
.refiner{
  margin:0;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-md);
  overflow:hidden;
}
.refiner__head{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:13px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap;
  background:var(--bg-alt);
}
.refiner__head .mono-label{color:var(--limit)}
.refiner__scheme{color:var(--dim) !important;text-transform:none;letter-spacing:.08em}
.refiner__stage{position:relative;padding:8px}
#refinerCanvas{width:100%;height:auto;aspect-ratio:1/.78;display:block;touch-action:none;cursor:grab}
#refinerCanvas.is-grabbing{cursor:grabbing}
.refiner__hint{
  position:absolute;right:16px;bottom:12px;margin:0;pointer-events:none;
  opacity:.75;font-size:.6rem;
}
.refiner__ui{
  display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  padding:12px 16px;border-top:1px solid var(--line);
}
.levels{display:flex;gap:4px;flex-wrap:wrap}
.levels button{
  -webkit-appearance:none;appearance:none;cursor:pointer;background:var(--bg);border:1px solid var(--line-2);
  color:var(--muted);font-family:var(--f-mono);font-size:.67rem;letter-spacing:.07em;
  padding:6px 10px;border-radius:var(--radius-ctl);transition:all .2s;
}
.levels button:hover{color:var(--limit);border-color:var(--limit-line)}
.levels button.is-on{background:var(--limit);border-color:var(--limit);color:#fff}
/* Το κουμπί που δεν έχει πια τι να κάνει το λέει, αντί να αγνοεί το πάτημα:
   ο κόμβος του §15 σταματά όταν γεμίσει ο καμβάς ή όταν η πολλαπλότητα
   φτάσει το p−1. */
.levels button:disabled{cursor:not-allowed;opacity:.42}
.levels button:disabled:hover{color:var(--muted);border-color:var(--line-2)}
/* Τέσσερις μετρητές (§19) δεν χωράνε σε μία σειρά σε στενή οθόνη· τρεις
   χωράνε παντού. Το wrap είναι για τον τέταρτο, όχι για τους τρεις. */
.readout{display:flex;gap:18px;margin:0;flex-wrap:wrap}
.readout div{display:flex;flex-direction:column;gap:2px}
.readout dt{font-family:var(--f-mono);font-size:.575rem;letter-spacing:.15em;text-transform:uppercase;color:var(--dim)}
/* Η ετικέτα του §20 κουβαλάει μέσα της τιμή που γράφεται ζωντανά — «0.3006»
   ή «p=4, 16×16». Τα κεφαλαία θα έκαναν τον βαθμό «P», που είναι άλλο σύμβολο. */
.readout dt b{text-transform:none;font-weight:600}
.readout dd{margin:0;font-family:var(--f-mono);font-size:.78rem;color:var(--limit)}
/* Ο μετρητής που βγήκε εκτός ισχύος του μοντέλου γίνεται κόκκινος (§19,
   w > L/12). Δεν κρύβει το νούμερο — αλλάζει μόνο χρώμα, γιατί ο αριθμός
   εξακολουθεί να είναι σωστός· αυτό που έπαψε να ισχύει είναι η θεωρία. */
.readout dd.is-warn{color:var(--cage)}
.refiner__legend{
  display:flex;gap:18px;flex-wrap:wrap;margin:0;padding:11px 16px;border-top:1px solid var(--line);
  background:var(--bg-alt);
}
.key{
  font-family:var(--f-mono);font-size:.605rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--dim);display:inline-flex;align-items:center;gap:8px;
}
.key::before{content:"";width:14px;height:0;border-top:1.6px solid currentColor}
.key--cage{color:var(--cage)}
.key--limit{color:var(--limit)}
/* Το ίχνος της μετατόπισης (§21δ, §22δ) είναι διακεκομμένη γραμμή στον
   καμβά, οπότε είναι διακεκομμένη και στο κλειδί: ένα κλειδί που δείχνει
   άλλο πράγμα από αυτό που εξηγεί δεν είναι κλειδί. */
.key--trace{color:var(--cage)}
.key--trace::before{border-top-style:dashed;border-top-width:1.8px}

/* ---------- τα δύο επόμενα διαγράμματα: επιφάνεια και στερεό ----------
   Μοιράζονται ολόκληρο το κέλυφος του .refiner — head, stage, ui, legend.
   Εδώ μπαίνει μόνο ό,τι δεν υπάρχει ήδη: οι δύο καμβάδες, ο διαχωριστής
   ανάμεσα στις τρεις σειρές, και τα κλειδιά-διακόπτες των μέσων όρων. */
#meshCanvas,#solidCanvas{
  width:100%;height:auto;aspect-ratio:1/.86;display:block;touch-action:none;cursor:grab;
}
#meshCanvas.is-grabbing,#solidCanvas.is-grabbing{cursor:grabbing}
/* Δύο χειρονομίες, δύο δείκτες: πάνω σε κορυφή ο δείκτης λέει «αυτό μετακινείται»,
   αλλού λέει «αυτό γυρίζει». Οι δύο κλάσεις δεν συνυπάρχουν ποτέ — το app.js
   βάζει είτε τη μία είτε την άλλη — οπότε η σειρά τους εδώ δεν κρίνει τίποτα. */
#solidCanvas.is-vert{cursor:move}
/* Το στερεό γυρίζει και με τα βελάκια, άρα δέχεται focus· χωρίς radius το
   περίγραμμα εστίασης κολλούσε στις γωνίες του καμβά. */
#solidCanvas:focus-visible{border-radius:var(--radius)}

.refinergrid--sep{
  margin-top:clamp(38px,4.6vw,66px);
  padding-top:clamp(38px,4.6vw,66px);
  border-top:1px solid var(--line);
}

/* Η λεζάντα των τριών μέσων όρων ΕΙΝΑΙ το χειριστήριο: κάθε κλειδί ανάβει
   και σβήνει τη δική του οικογένεια σημείων, οπότε δεν χρειάζεται ξεχωριστή
   σειρά με κουμπιά και δεύτερη με εξήγηση. */
.avgs{
  display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  padding:11px 16px;border-top:1px solid var(--line);
}
.avgs__label{margin:0}
.toggles{display:flex;gap:4px;flex-wrap:wrap}
.toggles button{
  -webkit-appearance:none;appearance:none;cursor:pointer;background:var(--bg);border:1px solid var(--line-2);
  color:var(--muted);font-family:var(--f-mono);font-size:.67rem;letter-spacing:.07em;
  padding:6px 11px;border-radius:var(--radius-ctl);transition:all .2s;
  display:inline-flex;align-items:center;gap:7px;
}
.toggles button:hover{color:var(--limit);border-color:var(--limit-line)}
.toggles button.is-on{background:var(--limit);border-color:var(--limit);color:#fff}

/* Τα σχήματα είναι η γλώσσα: γεμάτος κύκλος = έδρα, κενός κύκλος = ακμή,
   τετράγωνο = κορυφή. Ίδια ακριβώς και μέσα στον καμβά. */
.mark{display:inline-block;width:8px;height:8px;flex:0 0 auto;background:var(--limit);border:1.4px solid transparent}
.mark--f{border-radius:50%}
.mark--e{border-radius:50%;background:var(--bg);border-color:var(--limit)}
.mark--p{border-radius:1px}
.toggles button.is-on .mark{background:#fff;border-color:#fff}
.toggles button.is-on .mark--e{background:var(--limit);border-color:#fff}
.toggles button:not(.is-on) .mark{background:var(--line-2);border-color:transparent}
.toggles button:not(.is-on) .mark--e{background:var(--bg);border-color:var(--line-2)}

/* ---------- η μπάρα του κλουβιού (μόνο στο στερεό) ----------
   Ίδιο κέλυφος με τη σειρά των μέσων όρων, αλλά ΚΟΚΚΙΝΟ, και αυτό είναι
   πληροφορία: τα L0–L∞ από πάνω αφορούν την οριακή επιφάνεια, άρα είναι μπλε·
   ο επιλογέας και η επαναφορά αφορούν το πλέγμα ελέγχου, άρα είναι κόκκινα.
   Η παλέτα κουβαλάει ήδη αυτή τη διάκριση παντού στη σελίδα — εδώ την
   κουβαλάει και το χειριστήριο. */
.cagebar{
  display:flex;justify-content:space-between;align-items:center;gap:10px 14px;flex-wrap:wrap;
  padding:11px 16px;border-top:1px solid var(--line);
}
.solids{display:flex;gap:4px;flex-wrap:wrap}
.solids button{
  -webkit-appearance:none;appearance:none;cursor:pointer;background:var(--bg);border:1px solid var(--line-2);
  color:var(--muted);font-family:var(--f-mono);font-size:.67rem;letter-spacing:.07em;
  padding:6px 10px;border-radius:var(--radius-ctl);transition:all .2s;
}
.solids button:hover{color:var(--cage);border-color:var(--cage-line)}
.solids button.is-on{background:var(--cage);border-color:var(--cage);color:#fff}
.cagebar__reset{
  -webkit-appearance:none;appearance:none;cursor:pointer;background:transparent;
  border:1px solid var(--line-2);color:var(--dim);
  font-family:var(--f-mono);font-size:.605rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  padding:6px 11px;border-radius:var(--radius-ctl);transition:all .2s;
  display:inline-flex;align-items:center;gap:7px;
}
.cagebar__reset:hover{color:var(--cage);border-color:var(--cage-line);background:var(--cage-soft)}
/* Το βέλος γυρίζει μία πλήρη στροφή σε κάθε πάτημα — η μόνη κίνηση εδώ, και
   λέει ακριβώς τι έγινε. Το prefers-reduced-motion τη μηδενίζει καθολικά. */
.cagebar__reset .rot{display:inline-block;font-size:.86rem;line-height:1;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.cagebar__reset.is-spun .rot{transform:rotate(-360deg)}

/* ---------- τα διαγράμματα των σελίδων τεκμηρίωσης ----------
   Πέντε διαγράμματα σε πέντε σελίδες, ένα λεξιλόγιο. Ο κανόνας που τα δένει:
   κάθε καμβάς παίρνει τη δική του ετικέτα σε **HTML** — μεταφράσιμη, επιλέξιμη,
   αναγνώσιμη από screen reader — αντί για κείμενο ζωγραφισμένο μέσα στον καμβά.
   Κανένα διάγραμμα του site δεν γράφει κείμενο σε canvas, και αυτό δεν είναι
   σύμπτωση· γι' αυτό και τα περισσότερα εδώ είναι δύο καμβάδες, όχι ένας. */
.diagcap{
  margin:2px 0 6px;padding-left:4px;
  font-family:var(--f-mono);font-size:.63rem;line-height:1.5;color:var(--dim);
}
.diagcap b{
  color:var(--limit);font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;font-size:.9em;
}
.diagcap+canvas{margin-bottom:15px}
.diagcap--cage b{color:var(--cage)}
/* Η μεγέθυνση του §19 είναι μετρητής μέσα στη λεζάντα: κοκκινίζει μόνο όταν
   πάψει να είναι η ονομαστική ×3, δηλαδή όταν το σχέδιο δεν χωράει πια. */
.diagcap b .is-warn{color:var(--cage)}
.refiner__stage canvas{width:100%;height:auto;display:block;touch-action:none}
/* Όπου σέρνονται λαβές, ο δείκτης το λέει από πριν. Προσοχή στη βαρύτητα:
   αν κάποιος κανόνας #id έβαζε cursor, θα νικούσε αυτόν εδώ και η λαβή θα
   έμενε βουβή — γι' αυτό κανένας από τους παρακάτω δεν ορίζει δείκτη, εκτός
   από τον άξονα, που δεν παίρνει ποτέ .is-vert. */
.refiner__stage canvas.is-vert{cursor:move}
/* Η κλίμακα ενός άξονα κρατάει ΠΕΖΑ τα σύμβολα: το mono-label τα κεφαλαιοποιεί
   όλα, και ένα «T = 0» δεν είναι η παράμετρος που λέει η επικεφαλίδα. */
.diagscale{text-transform:none;letter-spacing:.09em}

/* §10 — μία βάση, δύο δουλειές */
#igaTopCanvas{aspect-ratio:1/.46}
#igaBasisCanvas{aspect-ratio:1/.26;cursor:ew-resize}
/* §11 — η ρωγμή· §12 — το σφάλμα του πλέγματος */
#cadCanvas{aspect-ratio:1/.44}
#caeTopCanvas{aspect-ratio:1/.46}
#caeErrCanvas{aspect-ratio:1/.22}
/* §13 — δύο κανόνες δίπλα-δίπλα, άρα δύο τετράγωνα */
.diagpair{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;align-items:start}
.diagpair .diagcap{grid-row:1;margin:0}
.diagpair canvas{margin-bottom:0}
#schemeCCCanvas,#schemeLoopCanvas{aspect-ratio:1/1}
/* §14 — τοπικό, όχι καθολικό */
#dsnBezCanvas,#dsnSplCanvas{aspect-ratio:1/.36}
/* §15 — λεπτομέρεια χωρίς αλλοίωση· ένας καμβάς, πιο ψηλός από τους δύο
   του §14 γιατί εδώ φαίνεται και το πολύγωνο σε όλο του το ύψος */
#dtlCanvas{aspect-ratio:1/.44}
/* §16 — το βάρος. Ο πάνω καμβάς κρατάει ΤΕΤΡΑΓΩΝΗ περιοχή σχεδίασης (ένα
   τεταρτοκύκλιο δεν επιτρέπεται να παραμορφωθεί, αλλιώς παύει να είναι
   κύκλος), γι' αυτό είναι σχεδόν τετράγωνος: ό,τι περισσεύει δεξιά κι
   αριστερά είναι περιθώριο, όχι εικόνα. */
#nurbCanvas{aspect-ratio:1/.72}
#nurbBasisCanvas{aspect-ratio:1/.26}
/* §17 — πού καταλήγει η κορυφή: κλειστό κλουβί, όπως στο §5 */
#limCanvas{aspect-ratio:1/.74}
/* §18 — ο πίνακας. Τετράγωνος για τον ίδιο λόγο: ένας n×n με ορθογώνια
   κελιά διαβάζεται λάθος — η ζώνη δεν θα φαινόταν συμμετρική. */
#sparseCanvas{aspect-ratio:1/.66}
/* §19 — ο βραχίονας, σε τρεις διαστάσεις. Η αναλογία δεν είναι γούστο: το
   app.js κανονικοποιεί τα πάντα με ΣΤΑΘΕΡΟ μέτρο σκηνής (BR_REF = 500 mm,
   το τέρμα του διακόπτη του μήκους) και βάζει τον άξονα στο 0.30 του
   ύψους, οπότε κάτω από αυτόν μένει 0.70·h για τη βύθιση. Στη μεγέθυνση
   ×3 το κόκκινο όριο (L/12) πιάνει 0.25 μονάδες σκηνής — δηλαδή λιγότερο
   από το μισό αυτού του χώρου, ακόμη και όταν η προοπτική φέρνει την άκρη
   μπροστά. Αν αλλάξει το .66, ξαναγίνεται ο λογαριασμός. */
#beamCanvas{aspect-ratio:1/.66;touch-action:none;cursor:grab}
#beamCanvas.is-grabbing{cursor:grabbing}
#beamCanvas:focus-visible{border-radius:var(--radius)}

/* §20 — το κέλυφος Scordelis-Lo. Ίδια αναλογία με το §19, γιατί είναι το
   ίδιο εργαστήριο: καμβάς αριστερά, έξι διακόπτες δεξιά, μετρητές από κάτω.
   Ο άξονας εδώ κάθεται στη ΜΕΣΗ του ύψους και όχι στο 0.30, γιατί το κέλυφος
   δεν κρέμεται από τη μία άκρη — απλώνεται και προς τις δύο. */
#roofCanvas{aspect-ratio:1/.66;touch-action:none;cursor:grab}
#roofCanvas.is-grabbing{cursor:grabbing}
#roofCanvas:focus-visible{border-radius:var(--radius)}

/* §21 — η βάση που γράφεται. Τρεις καμβάδες στο ίδιο εργαστήριο: οι δύο
   άξονες δίπλα-δίπλα, χαμηλοί (σε μισό πλάτος το .52 βγάζει σχεδόν
   τετράγωνο κάδρο), και από κάτω η επιφάνεια των R. Ο δείκτης λέει από
   πριν τι κάνει η κάθε χειρονομία: οριζόντιο σύρσιμο στους άξονες,
   περιστροφή στην επιφάνεια. */
#cdbXiCanvas,#cdbEtaCanvas{aspect-ratio:1/.52;cursor:ew-resize}
#cdbSrfCanvas{aspect-ratio:1/.64;touch-action:none;cursor:grab}
#cdbSrfCanvas.is-grabbing{cursor:grabbing}
#cdbSrfCanvas:focus-visible{border-radius:var(--radius)}
/* Η συνέχεια κάθε κόμβου είναι ΚΕΙΜΕΝΟ κάτω από τον άξονά της, όχι γραφή
   μέσα σε canvas: επιλέγεται, μεταφράζεται, διαβάζεται. Τρίτη σειρά του
   .diagpair — ρητά, γιατί ο κανόνας του .diagcap καρφώνει τη σειρά 1 και
   μια λωρίδα με την ίδια κλάση θα εκτοξευόταν στην κορυφή. */
/* Χρώμα --muted και όχι --dim: εδώ γράφεται η συνέχεια κάθε κόμβου, που
   είναι το ζητούμενο της ενότητας και όχι διακοσμητική λεζάντα. Το --dim
   δίνει 3.59:1 και δεν περνάει AA· το --muted δίνει 8.0:1. */
.cdbknots{
  grid-row:3;margin:5px 0 13px;padding-left:4px;
  font-size:.58rem;line-height:1.6;color:var(--muted);
  text-transform:none;letter-spacing:.06em;
}
.cdbknots b{font-weight:600}

/* §21β — το δίκτυο ελέγχου: ο μόνος πίνακας της σελίδας που ΓΡΑΦΕΤΑΙ.
   Μπαίνει μέσα στο ίδιο κέλυφος .refiner, ανάμεσα στον καμβά και στους
   μετρητές, γιατί δεν είναι παράρτημα του διαγράμματος — είναι η είσοδός του. */
.netlead{
  max-width:900px;margin-inline:auto;
  margin-top:clamp(30px,3.4vw,52px);padding-top:clamp(30px,3.4vw,52px);
  border-top:1px solid var(--line);
}
.netlead .h3{margin-bottom:12px}
.netlead p{color:var(--muted);font-size:.96rem;max-width:70ch;margin:0}
.netlead .code{margin-top:16px}
.netlead+.lab{margin-top:clamp(20px,2.4vw,30px)}
/* Η υπόδειξη κάθεται στον πάτο του πάνελ και όχι κάτω από τον πίνακα: εκεί
   κοιτάει ο επισκέπτης πριν αρχίσει να γράφει, όχι αφού τελειώσει. */
.labhint{
  margin:auto 0 0;font-size:.63rem;line-height:1.65;color:var(--muted);
  border-top:1px solid var(--line);padding-top:10px;
}
/* Το ύψος έχει φράγμα γιατί το πλήθος των γραμμών δεν έχει: με 13 × 10
   συναρτήσεις ο πίνακας πιάνει 130 γραμμές, και ο καμβάς δεν επιτρέπεται να
   φύγει από την οθόνη τη στιγμή ακριβώς που γράφονται οι συντεταγμένες. */
.tablewrap--net{
  border:0;border-top:1px solid var(--line);border-radius:0;
  max-height:min(46vh,330px);overflow:auto;
}
/* Διπλή κλάση: το σκέτο .tbl ορίζεται ΠΙΟ ΚΑΤΩ στο αρχείο με min-width 860px
   — πλάτος για πίνακα με στήλη κειμένου — και με ίδια ειδικότητα θα κέρδιζε
   ως μεταγενέστερο. Εδώ οι στήλες είναι πέντε και στενές. */
.tbl.tbl--net{min-width:430px;font-size:.82rem}
.tbl--net th,.tbl--net td{padding:5px 10px;vertical-align:middle}
/* Η κεφαλίδα μένει ορατή όσο κυλάει ο πίνακας: χωρίς αυτό, στη γραμμή 40 δεν
   ξέρεις πια ποια στήλη είναι το Z και ποια το βάρος. */
.tbl--net thead th{position:sticky;top:0;z-index:1;background:var(--bg-alt)}
.tbl--net tbody th{
  font-family:var(--f-mono);font-size:.7rem;font-weight:500;color:var(--cage);
  white-space:nowrap;width:1%;
}
/* Η αναμμένη γραμμή είναι το σημείο της κυρίαρχης συνάρτησης — το ίδιο που
   γεμίζει και στον καμβά. Κόκκινο, όπως ό,τι γράφει ο επισκέπτης. */
.tbl--net tbody tr.is-sel,
.tbl--net tbody tr.is-sel:hover{background:var(--cage-soft);box-shadow:inset 3px 0 0 var(--cage)}
.cellin{
  width:100%;min-width:0;height:24px;padding:0 7px;
  background:var(--bg);border:1px solid var(--line-2);border-radius:var(--radius-ctl);
  font-family:var(--f-mono);font-size:.72rem;color:var(--limit);
  transition:border-color .2s,box-shadow .2s,background .2s;
}
.cellin:focus{outline:none;border-color:var(--cage);box-shadow:0 0 0 3px var(--cage-soft)}
/* Κοκκινίζει μόνο όσο η τιμή δεν διαβάζεται ως αριθμός· φεύγει μόλις το κελί
   ξαναγραφτεί με ό,τι όντως σχεδιάζεται. */
.cellin.is-bad{border-color:var(--cage);background:var(--cage-soft)}
#netCanvas{aspect-ratio:1/.68;touch-action:none;cursor:grab}
#netCanvas.is-grabbing{cursor:grabbing}
#netCanvas:focus-visible{border-radius:var(--radius)}
/* §21γ — ο επιλύτης, κάτω από τον πίνακα της γεωμετρίας. Δεν έχει καμβά,
   άρα δεν έχει και .lab__grid: τα χειριστήρια πιάνουν όλο το πλάτος σε δύο
   στήλες — υλικό και φορτίο αριστερά, οι τέσσερις ακμές δεξιά — γιατί αυτά
   ακριβώς είναι τα δύο πράγματα που ο επισκέπτης αλλάζει εναλλάξ. Το φόντο
   είναι του πάνελ, ώστε το μπλοκ να διαβάζεται ως ΕΝΑ χειριστήριο και όχι
   ως δεύτερο εργαστήριο δίπλα στο πρώτο. */
.igaform{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px 22px;
  background:var(--bg-alt);border-top:1px solid var(--line);padding:14px 16px 16px;
}
.igacol{display:flex;flex-direction:column;gap:11px;min-width:0}
/* Το κουμπί πέφτει στον πάτο της στήλης του: δίπλα στα πεδία θα ήταν άλλο
   ένα πεδίο, στον πάτο είναι το τέλος της φόρμας. */
.igacol .numgo{margin-top:auto}
/* Η ακμή γράφεται με την παράμετρό της — σύμβολο, όχι λέξη — οπότε η
   ετικέτα κάθεται μόνη πάνω από τα τρία κουμπιά της. */
.labctl--edge .labctl__row{margin-bottom:3px}
#igaNote:not([hidden]){
  padding:11px 16px;border-top:1px solid var(--line);background:var(--bg-alt);
  max-width:none;
}
/* Ο πίνακας των αποτελεσμάτων δανείζεται το κέλυφος του §21β (.tbl--net) και
   αλλάζει μόνο τη στοίχιση: εκεί τα κελιά είναι πεδία, εδώ είναι αριθμοί,
   και αριθμοί συγκρίνονται μόνο δεξιά στοιχισμένοι.

   ΔΙΠΛΗ ΚΛΑΣΗ ΠΑΝΤΟΥ, για τον λόγο που γράφει και το .tbl.tbl--net από πάνω:
   το σκέτο .tbl ορίζεται ΠΙΟ ΚΑΤΩ στο αρχείο, και με ίδια ειδικότητα κερδίζει
   ως μεταγενέστερο. Χωρίς το δεύτερο .tbl οι αριθμοί βγαίνουν αριστερά
   στοιχισμένοι — δηλαδή ασύγκριτοι μεταξύ τους. */
.tbl.tbl--iga td{
  font-family:var(--f-mono);font-size:.72rem;color:var(--limit);
  text-align:right;font-variant-numeric:tabular-nums;
}
.tbl.tbl--iga thead th{text-align:right}
.tbl.tbl--iga thead th:first-child,.tbl.tbl--iga tbody th{text-align:left}
/* Η μονάδα της στήλης αλλάζει με τη λύση (m / mm / µm) και γι' αυτό είναι
   στοιχείο, όχι κείμενο μέσα στην κεφαλίδα: το app.js τη γράφει μία φορά
   ανά λύση, σε ΟΛΕΣ τις στήλες μαζί. */
.tbl--iga .igau{font-style:normal;font-weight:400;color:var(--dim)}

/* §21δ — η παραμορφωμένη γεωμετρία. Δύο καμβάδες, ένα σχέδιο: ο ένας μέσα
   στην κάρτα του επιλύτη (.defstage, όλο το πλάτος, πάνω από τον πίνακα των
   μετατοπίσεων), ο άλλος στη δική του κάρτα μέσα σε .lab__stage. Γι' αυτό οι
   αναλογίες είναι δύο: σε όλο το πλάτος ένα τετράγωνο θα έσπρωχνε τον πίνακα
   έξω από την οθόνη, σε στήλη ένα πλατύ θα άφηνε το σχήμα μια λωρίδα. */
.defstage{position:relative;padding:10px 16px 4px;border-top:1px solid var(--line)}
#igaDefCanvas{width:100%;height:auto;aspect-ratio:1/.42;display:block}
#defCanvas{aspect-ratio:1/.68}
#igaDefCanvas,#defCanvas{touch-action:none;cursor:grab}
#igaDefCanvas.is-grabbing,#defCanvas.is-grabbing{cursor:grabbing}
#igaDefCanvas:focus-visible,#defCanvas:focus-visible{border-radius:var(--radius)}
/* Ο ΕΛΕΓΚΤΗΣ ΤΗΣ ΑΝΑΠΑΡΑΓΩΓΗΣ (§21δ, §22δ) — μία γραμμή κάτω από κάθε καμβά
   παραμόρφωσης: κουμπί, μπάρα, και οι δύο αριθμοί που κάνουν τη διαφορά
   αναγνώσιμη (το λ του φορτίου και η μετατόπιση της στιγμής). Τέσσερις
   φορές στη σελίδα, δύο ανά εργαστήριο, πάνω σε ένα ρολόι το καθένα.

   Το κουμπί είναι ΓΕΜΑΤΟ και όχι περίγραμμα σαν τα .levels: τα .levels
   διαλέγουν ανάμεσα σε καταστάσεις που ήδη ισχύουν, αυτό ΚΑΝΕΙ κάτι. */
.player{
  display:flex;align-items:center;gap:12px;flex-wrap:nowrap;
  padding:9px 16px 0;
}
.player__go{
  -webkit-appearance:none;appearance:none;cursor:pointer;flex:none;
  display:inline-flex;align-items:center;gap:8px;
  padding:0 14px;height:30px;
  background:var(--limit);border:1px solid var(--limit);color:#fff;
  font-family:var(--f-mono);font-size:.63rem;font-weight:600;letter-spacing:.09em;
  border-radius:var(--radius-ctl);transition:background .2s,border-color .2s,opacity .2s;
}
.player__go:hover{background:var(--cage);border-color:var(--cage)}
/* Χωρίς λύση δεν υπάρχει διαδρομή να παιχτεί: το κουμπί το λέει αντί να
   αγνοεί το πάτημα — ίδιος κανόνας με τα .levels:disabled. */
.player__go:disabled{cursor:not-allowed;opacity:.38}
.player__go:disabled:hover{background:var(--limit);border-color:var(--limit)}
/* Τα δύο σύμβολα (▶ και ❚❚) δεν έχουν μετάφραση και δεν πρέπει να
   αναγκαστούν να αποκτήσουν — ίδιος κανόνας με το ↺ και το ↓. Οι λέξεις
   δίπλα τους έχουν, και είναι δύο ζευγάρια: ένα ανά κατάσταση. */
.player__ico{font-size:.66em;line-height:1;opacity:.9}
.player__ico--stop,.player__lbl--stop{display:none}
.player__go.is-playing .player__ico--go,
.player__go.is-playing .player__lbl--go{display:none}
.player__go.is-playing .player__ico--stop,
.player__go.is-playing .player__lbl--stop{display:inline}
/* Η μπάρα δανείζεται το τρακ και τη λαβή του .slider: είναι το ίδιο
   χειριστήριο με άλλο νόημα, όχι άλλο χειριστήριο. */
.player__bar{
  -webkit-appearance:none;appearance:none;flex:1 1 auto;min-width:34px;
  height:22px;background:transparent;cursor:pointer;
}
.player__bar::-webkit-slider-runnable-track{height:2px;background:linear-gradient(90deg,var(--limit),var(--cage));border-radius:2px}
.player__bar::-moz-range-track{height:2px;background:linear-gradient(90deg,var(--limit),var(--cage));border-radius:2px}
.player__bar::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;background:var(--cage);border-radius:50%;margin-top:-5.5px;border:0}
.player__bar::-moz-range-thumb{width:13px;height:13px;background:var(--cage);border-radius:50%;border:0}
.player__bar:disabled{opacity:.38;cursor:not-allowed}
/* Οι δύο αριθμοί αλλάζουν εξήντα φορές το δευτερόλεπτο: χωρίς tabular-nums
   η γραμμή θα χοροπηδούσε σε κάθε καρέ και θα ήταν αδιάβαστη. */
.player__ro{flex:none;white-space:nowrap;color:var(--muted);font-size:.6rem;letter-spacing:.05em}
.player__ro b{color:var(--cage);font-weight:600;font-variant-numeric:tabular-nums}
/* Το «σύρε για περιστροφή» κάθεται κανονικά πάνω στον καμβά (absolute, κάτω
   δεξιά). Εκεί όπου μπήκε ο ελεγκτής θα έπεφτε πάνω του, οπότε γίνεται δική
   του γραμμή από κάτω — χωρίς μαγικό «bottom», που θα έσπαγε μόλις τυλιγόταν
   ο ελεγκτής σε δεύτερη σειρά. */
.has-player .refiner__hint{position:static;text-align:right;padding:2px 16px 0;opacity:.62}
/* Σε στενή οθόνη οι λέξεις του κουμπιού φεύγουν και μένουν τα σύμβολα: η
   μπάρα είναι το χειριστήριο που ΔΕΝ επιτρέπεται να στριμωχτεί. */
@media (max-width:460px){
  .player__lbl{display:none}
  .player__go.is-playing .player__lbl--stop{display:none}
  .player__go{padding:0 11px}
  .player__ro{font-size:.55rem}
}

/* Οι νέες συντεταγμένες θέλουν ως εννιά δεκαδικά για να φανεί ότι άλλαξαν
   (app.js §21δ): σε στενή οθόνη ο πίνακας κυλάει οριζόντια αντί να στριμώξει
   τα ψηφία, γιατί σπασμένος αριθμός δεν συγκρίνεται με τίποτα. */
.tbl.tbl--def{min-width:520px}

/* §22β — το πλέγμα ελέγχου του στερεού. Ίδιο κέλυφος με το §21β: ο πίνακας
   είναι ο ίδιος (.tbl--net), αλλάζει μόνο ότι οι γραμμές είναι n·m·l. */
#solCanvas{aspect-ratio:1/.68;touch-action:none;cursor:grab}
#solCanvas.is-grabbing{cursor:grabbing}
#solCanvas:focus-visible{border-radius:var(--radius)}
/* Το φράγμα των γραμμών μιλάει στη θέση του πίνακα, άρα κάθεται εκεί που θα
   ήταν η κεφαλίδα του — με τη δική του γραμμή από πάνω, όχι κολλητά. */
#solNote:not([hidden]){padding:11px 16px;border-top:1px solid var(--line);background:var(--bg-alt)}

/* §22γ/§22δ — ο επιλύτης του στερεού και το παραμορφωμένο σχήμα. Δανείζονται
   ΟΛΟΚΛΗΡΟ το κέλυφος του §21γ/§21δ (.igaform, .igacol, .defstage, .tbl--iga,
   .solvebtn, .numnote): οι δύο επιλύτες είναι η ίδια διεπαφή με άλλον πυρήνα,
   και μια δεύτερη γραμμή κανόνων θα ήταν δεύτερη ευκαιρία να αποκλίνουν.
   Ό,τι προστίθεται εδώ είναι μόνο ό,τι ΔΕΝ υπάρχει στο 1.2. */

/* Οι έδρες είναι έξι, όχι τέσσερις ακμές: σε μία στήλη θα έφτιαχναν πύργο
   ψηλότερο από τη διπλανή του υλικού. Δύο στήλες, τρεις σειρές. */
.ig3faces{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px}
/* Σε μισή στήλη οι τρεις λέξεις «ελεύθερη στήριξη πάκτωση» δεν χωράνε στο
   κανονικό μέγεθος και σπάνε σε 2+1 — έξι ομάδες που αναδιπλώνονται όλες
   στο ίδιο σημείο μοιάζουν με λάθος, όχι με σχεδιασμό. Λίγο στενότερα
   γράμματα και λιγότερο πλάγιο περιθώριο τις φέρνουν σε μία σειρά. */
.ig3faces .levels{gap:3px}
.ig3faces .levels button{padding:6px 7px;font-size:.63rem;letter-spacing:.045em}
#ig3Note:not([hidden]){
  padding:11px 16px;border-top:1px solid var(--line);background:var(--bg-alt);
  max-width:none;
}
.tbl--iga .ig3u{font-style:normal;font-weight:400;color:var(--dim)}
/* Ίδιες δύο αναλογίες με το §21δ και για τον ίδιο λόγο: σε όλο το πλάτος ένα
   τετράγωνο θα έσπρωχνε τον πίνακα έξω από την οθόνη, σε στήλη ένα πλατύ θα
   άφηνε το στερεό μια λωρίδα. Το .74 αντί για .68 του §21δ επειδή εδώ το σχήμα
   είναι ΣΩΜΑ: γυρίζοντας, η διαγώνιός του γίνεται σχεδόν κατακόρυφη. */
#ig3DefCanvas{width:100%;height:auto;aspect-ratio:1/.44;display:block}
#df3Canvas{aspect-ratio:1/.74}
#ig3DefCanvas,#df3Canvas{touch-action:none;cursor:grab}
#ig3DefCanvas.is-grabbing,#df3Canvas.is-grabbing{cursor:grabbing}
#ig3DefCanvas:focus-visible,#df3Canvas:focus-visible{border-radius:var(--radius)}

/* §22 — η ίδια βάση με τρίτο άξονα. Τρεις άξονες δεν χωράνε στο .diagpair:
   εκεί η λεζάντα, ο καμβάς και η λωρίδα των κόμβων είναι καρφωμένοι σε
   σειρές του ίδιου grid, που σημαίνει ότι σε στενή οθόνη δεν στοιβάζονται
   χωρίς να ξηλωθεί ο κανόνας. Εδώ κάθε άξονας είναι δικό του .diagcol και
   το grid κρατά μόνο τις στήλες — μία γραμμή CSS τα κάνει τρία από κάτω
   προς τα πάνω σε κινητό, και το .cdbknots δουλεύει αυτούσιο (το grid-row
   του αγνοείται όταν ο γονέας δεν είναι grid). */
.diagtrio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 12px}
.diagtrio .diagcol{min-width:0}
.diagtrio .diagcap{margin:2px 0 6px}
/* Σε τρίτο του πλάτους η λωρίδα των κόμβων χωράει σε μία γραμμή μόνο
   ως εδώ: «Ξ · 0×3 C⁻¹ · 1 C¹ · 2 C¹ · 3×3 C⁻¹» είναι 36 χαρακτήρες σε
   194px, δηλαδή 5.4px ο καθένας. Με πυκνότερο διάνυσμα αναδιπλώνεται,
   και σωστά — η συνέχεια κάθε κόμβου δεν κόβεται για να χωρέσει. */
.diagtrio .cdbknots{font-size:.54rem;letter-spacing:.02em}
/* Σε τρίτο του πλάτους ένας άξονας βγαίνει ~185px: το .62 του δίνει ύψος
   να μη σφηνώσουν οι συναρτήσεις η μία πάνω στην άλλη. */
#cdvXiCanvas,#cdvEtaCanvas,#cdvZetaCanvas{aspect-ratio:1/.62;cursor:ew-resize}
/* Ο κύβος είναι σχεδόν τετράγωνος επειδή ΕΙΝΑΙ κύβος: η διαγώνιός του
   γίνεται οριζόντια σε κάποιες γωνίες και σχεδόν κατακόρυφη σε άλλες, και
   ένα χαμηλό κάδρο θα τον έκοβε ακριβώς όταν ο επισκέπτης τον γυρίζει. */
#cdvVolCanvas{aspect-ratio:1/.78;touch-action:none;cursor:grab}
#cdvVolCanvas.is-grabbing{cursor:grabbing}
#cdvVolCanvas:focus-visible{border-radius:var(--radius)}
/* Το σκαρίφημα του προβλήματος: SVG γραμμένο με το χέρι μέσα στο HTML, άρα
   οι ετικέτες του είναι ΚΕΙΜΕΝΟ — μεταφράζονται με το data-l όπως όλα τα
   υπόλοιπα, και τις διαβάζει ο screen reader. */
.refiner__stage>.sketch{width:100%;height:auto;display:block}
.sketch text{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.04em;fill:var(--dim)}
.sketch .sketch__k{fill:var(--limit)}
.sketch .sketch__c{fill:var(--cage)}

/* ---------- §23: το δυναμικό εργαστήριο ----------
   Ίδιες αναλογίες με τα §22β/§22δ, γιατί το σχήμα είναι το ίδιο σώμα σε
   ίδιου πλάτους κάρτες. Ό,τι είναι καινούργιο εδώ είναι το .twoplot: δύο
   διαγράμματα δίπλα-δίπλα που ΔΕΝ είναι το ίδιο πράγμα δύο φορές — το ένα
   έχει τον χρόνο στον οριζόντιο άξονα, το άλλο την παραμόρφωση. Μπαίνουν
   μαζί επειδή διαβάζονται μαζί: η κορυφή της απόκρισης ΕΙΝΑΙ η κορυφή του
   βρόχου. Σε στενή οθόνη στοιβάζονται, γιατί το μισό από 400px δεν είναι
   διάγραμμα, είναι λωρίδα. */
#dynCanvas{width:100%;height:auto;aspect-ratio:1/.68;touch-action:none;cursor:grab}
#dynCanvas.is-grabbing{cursor:grabbing}
#dynCanvas:focus-visible{border-radius:var(--radius)}
#nidDefCanvas{width:100%;height:auto;aspect-ratio:1/.44;display:block}
#ndfCanvas{aspect-ratio:1/.74}
#nidDefCanvas,#ndfCanvas{touch-action:none;cursor:grab}
#nidDefCanvas.is-grabbing,#ndfCanvas.is-grabbing{cursor:grabbing}
#nidDefCanvas:focus-visible,#ndfCanvas:focus-visible{border-radius:var(--radius)}
.tbl--iga .nidu{font-style:normal;font-weight:400;color:var(--dim)}
#dynNote:not([hidden]),#nidNote:not([hidden]){
  padding:11px 16px;border-top:1px solid var(--line);background:var(--bg-alt);
  max-width:none;
}
.twoplot{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px;padding:12px 16px 4px}
.twoplot>div{min-width:0}
.twoplot .diagcap{margin:2px 0 6px}
.twoplot canvas{width:100%;height:auto;aspect-ratio:1/.62;display:block}
@media (max-width:640px){.twoplot{grid-template-columns:minmax(0,1fr);gap:14px 0}}

/* ---------- §19: το εργαστήριο ----------
   Έξι παράμετροι δεν διαβάζονται αν τα χειριστήρια είναι από κάτω και ο
   επισκέπτης πρέπει να κυλήσει για να δει τι έκανε το προηγούμενο. Γι'
   αυτό ο καμβάς κρατιέται ΜΙΚΡΟΣ και το πάνελ κάθεται δίπλα του: καμβάς,
   διακόπτες και μετρητές χωράνε μαζί σε μία οθόνη — που είναι η μόνη
   διάταξη στην οποία το «άλλαξε αυτό, κοίτα εκείνο» βγάζει νόημα. */
.lab{max-width:900px;margin-inline:auto}
.lab .lab__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,278px)}
.lab__stage{position:relative;padding:8px;min-width:0}
.lab__stage canvas{width:100%;height:auto;display:block}
.lab__panel{
  border-left:1px solid var(--line);background:var(--bg-alt);
  padding:13px 16px 16px;display:flex;flex-direction:column;gap:11px;
}
.labctl__row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:0}
.labctl__k{
  font-family:var(--f-mono);font-size:.575rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--dim);
}
.labctl__v{font-family:var(--f-mono);font-size:.73rem;color:var(--cage)}
.labctl__v b{font-weight:600}
/* Ο διακόπτης δανείζεται το τρακ και τη λαβή του .slider· εδώ φεύγει μόνο
   το πλάγιο περιθώριο, γιατί μέσα στο πάνελ το δίνει ήδη το padding. */
.labctl .slider{padding:1px 0 0}
.labctl .levels{margin-top:5px}
/* Έξι παράμετροι στο §20 δεν χωράνε η μία κάτω από την άλλη: το πάνελ θα
   ξεπερνούσε τον καμβά και θα έσπαγε ακριβώς αυτό που κάνει το εργαστήριο
   να δουλεύει — να βλέπεις μαζί τον διακόπτη και το αποτέλεσμα. Δύο στήλες
   λοιπόν, όπου η παράμετρος χωράει σε μισό πλάτος. */
.labctl--pair{display:grid;grid-template-columns:1fr 1fr;gap:11px 12px;align-items:start}
.labctl--pair>div{min-width:0}
.labctl--pair .labctl__k{letter-spacing:.11em}

/* ---------- §20: τα πεδία τιμών ----------
   Ο διακόπτης έδινε εύρος αλλά όχι τιμή: για να πατήσεις ακριβώς R = 25
   έπρεπε να το κυνηγήσεις με το ποντίκι, και σε ένα benchmark η ακριβής
   τιμή ΕΙΝΑΙ το ζητούμενο. Το πλαίσιο κρατά την ίδια γραμμή ύψους με τα
   .levels δίπλα του (29px), ώστε το πάνελ να μη γίνει σκάλα. Δεξιά, με
   το ίδιο mono σε μικρότερο μέγεθος, το εύρος — η μόνη πληροφορία που
   χάθηκε όταν έφυγε το τρακ του slider. */
.numin{
  display:flex;align-items:center;gap:6px;margin-top:5px;height:29px;padding:0 8px;
  background:var(--bg);border:1px solid var(--line-2);border-radius:var(--radius-ctl);
  transition:border-color .2s,box-shadow .2s,background .2s;
}
.numin:focus-within{border-color:var(--cage);box-shadow:0 0 0 3px var(--cage-soft)}
/* Κοκκινίζει ΜΟΝΟ μετά την επίλυση, ποτέ όσο πληκτρολογείς: ένα «0.» στη
   μέση μιας τιμής δεν είναι λάθος, είναι μισοτελειωμένη λέξη. */
.numin.is-bad{border-color:var(--cage);background:var(--cage-soft)}
.numin input{
  flex:1 1 auto;min-width:0;width:100%;height:100%;
  border:0;background:transparent;padding:0;
  font-family:var(--f-mono);font-size:.75rem;color:var(--limit);
}
.numin input:focus{outline:none}
.numin__r{
  flex:0 0 auto;font-family:var(--f-mono);font-size:.55rem;
  letter-spacing:.05em;color:var(--muted);white-space:nowrap;
}

/* Το κουμπί κάθεται στη θέση του πέμπτου πεδίου, ευθυγραμμισμένο στο ΚΑΤΩ
   άκρο του κελιού — δηλαδή ακριβώς στη γραμμή των πλαισίων δίπλα του. */
.numgo{display:flex;align-items:flex-end;height:100%;align-self:stretch}
.solvebtn{
  -webkit-appearance:none;appearance:none;cursor:pointer;width:100%;height:29px;padding:0 10px;
  background:var(--limit);border:1px solid var(--limit);color:#fff;
  font-family:var(--f-mono);font-size:.615rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  border-radius:var(--radius-ctl);transition:background .2s,border-color .2s,box-shadow .2s;
}
.solvebtn:hover{background:var(--cage);border-color:var(--cage)}
/* Navy όσο η οθόνη λέει την αλήθεια, κόκκινο μόλις τα πεδία προσπεράσουν
   τη λύση — η ίδια σύμβαση με όλη τη σελίδα: κόκκινο = ό,τι γράφει ο
   χρήστης, navy = ό,τι έχει υπολογιστεί. */
.solvebtn.is-hot{background:var(--cage);border-color:var(--cage);box-shadow:0 0 0 3px var(--cage-soft)}
.numnote{
  margin:0;font-family:var(--f-mono);font-size:.575rem;line-height:1.5;
  letter-spacing:.03em;color:var(--cage);
}

/* Το ζουμ κάθεται στην ΚΑΤΩ ΑΡΙΣΤΕΡΗ γωνία του καμβά — τη μόνη που μένει
   άδεια σε κάθε μήκος, γιατί η βύθιση, το βέλος του φορτίου και το μέτρο
   της πέφτουν όλα δεξιά, και η πλάκα του τοίχου σταματάει πολύ πιο πάνω.
   Απέναντί του, στην κάτω δεξιά, κάθεται το .refiner__hint. */
.labzoom{position:absolute;left:16px;bottom:11px;display:flex;align-items:center;gap:6px}
.labzoom button{
  -webkit-appearance:none;appearance:none;cursor:pointer;
  background:var(--bg);border:1px solid var(--line-2);color:var(--muted);
  font-family:var(--f-mono);font-size:.8rem;line-height:1;padding:0;
  width:22px;height:22px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius-ctl);transition:all .2s;
}
.labzoom button:hover:not(:disabled){color:var(--limit);border-color:var(--limit-line)}
.labzoom button:disabled{cursor:not-allowed;opacity:.42}
.labzoom__v{
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.09em;color:var(--dim);
  min-width:2.5em;text-align:center;
}
.labzoom__v b{font-weight:600;color:var(--cage)}
/* Η υπόδειξη του ζουμ αλλάζει με τη συσκευή: ρόδα εκεί που υπάρχει ρόδα,
   δύο δάχτυλα εκεί που δεν υπάρχει. Το ίδιο το ζουμ δουλεύει και στα δύο
   ούτως ή άλλως — αυτό που δεν πρέπει να πει η σελίδα είναι ψέματα. */
.hint--coarse{display:none}
@media (hover:none) and (pointer:coarse){
  .hint--fine{display:none}
  .hint--coarse{display:inline}
}

.igamodes{display:flex;gap:4px;flex-wrap:wrap}
.igamodes button{
  -webkit-appearance:none;appearance:none;cursor:pointer;background:var(--bg);border:1px solid var(--line-2);
  color:var(--muted);font-family:var(--f-mono);font-size:.67rem;letter-spacing:.07em;
  padding:6px 11px;border-radius:var(--radius-ctl);transition:all .2s;
}
.igamodes button:hover{color:var(--limit);border-color:var(--limit-line)}
.igamodes button.is-on{background:var(--limit);border-color:var(--limit);color:#fff}

/* ---------- η κάρτα του Π1 στο hero ----------
   Το ζωντανό διάγραμμα ζει στο deliverable-1.html· εδώ στέκεται η στατική
   του εικόνα και το κουμπί προς αυτό. Ίδιο κέλυφος με το .refiner, ώστε
   η αρχική να μη χάσει το βάρος της δεξιάς στήλης. */
.softcard{
  margin:0;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-md);
  overflow:hidden;
}
.softcard__head{
  display:flex;gap:.9em;align-items:baseline;margin:0;
  padding:13px 16px;border-bottom:1px solid var(--line);
  background:var(--bg-alt);
}
.softcard__code{color:var(--cage)}
.softcard__stage{padding:14px 8px 2px}
.softcard__stage svg{display:block;width:100%;max-width:430px;height:auto;margin-inline:auto}
.softcard__body{padding:4px 22px 24px}
.softcard__title{margin:0 0 9px}
.softcard__copy{color:var(--muted);font-size:.945rem;margin:0 0 20px;max-width:46ch}
.softcard__legend{
  display:flex;gap:18px;flex-wrap:wrap;margin:0;padding:11px 16px;border-top:1px solid var(--line);
  background:var(--bg-alt);
}

/* ---------- ticker ---------- */
.ticker{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  overflow:hidden;padding:11px 0;background:var(--bg-alt);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.ticker__track{
  display:flex;align-items:center;gap:0;width:max-content;
  animation:slide 48s linear infinite;
}
.ticker__track span{
  font-family:var(--f-mono);font-size:.665rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;
}
.ticker__track i{display:block;width:9px;height:9px;margin:0 26px;border:1px solid var(--cage-line);transform:rotate(45deg);flex:0 0 auto}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker__track{animation:none}}

/* ============================================================
   RUNS ON — τα εργαλεία που υλοποιούν τον κανόνα.
   Ονόματα σε τυπογραφία, όχι λογότυπα: δεν φιλοξενούμε σήματα τρίτων
   και δεν χρειάζεται ούτε ένα αρχείο εικόνας. Δεν είναι links, οπότε
   δεν έχουν και hover — δεν υπόσχονται κάτι που δεν κάνουν.
   ============================================================ */
.section.runson-band{padding-block:clamp(38px,4.6vw,60px);border-bottom:1px solid var(--line)}
.runson__label{text-align:center;margin:0 0 clamp(18px,2.2vw,28px)}
/* Grid και όχι flex-wrap: με flex, το πού σπάει η σειρά εξαρτάται από το
   μήκος των ονομάτων και βγάζει ορφανά (11 + 1). Το grid δίνει πάντα
   ισορροπημένες σειρές — δώδεκα ονόματα σε 6, 4 ή 3 στήλες. */
.runson{
  list-style:none;margin:0 auto;padding:0;max-width:1020px;
  display:grid;grid-template-columns:repeat(6,1fr);
  gap:clamp(14px,1.8vw,24px);
  text-align:center;
}
.runson li{
  font-family:var(--f-display);font-weight:620;
  font-size:clamp(.86rem,1.25vw,1.06rem);letter-spacing:-.015em;
  color:var(--limit);opacity:.55;white-space:nowrap;
}
.runson__note{
  text-align:center;color:var(--muted);font-size:.9rem;
  margin:clamp(18px,2.2vw,28px) auto 0;max-width:60ch;
}
.runson__note a{color:var(--limit);text-underline-offset:3px}

/* ============================================================
   BREADCRUMBS — η ιεραρχία φτάνει τρία επίπεδα (Παραδοτέα → Π2 → CAD)
   και μέχρι τώρα φαινόταν μόνο μέσα στο menu. Γραμμένα στατικά στο HTML
   και όχι από το app.js: η πλοήγηση είναι βασικό περιεχόμενο και πρέπει
   να υπάρχει και χωρίς JavaScript.
   ============================================================ */
.crumbs{border-bottom:1px solid var(--line);background:var(--bg-alt)}
.crumbs ol{
  list-style:none;margin:0;padding:13px 0;
  display:flex;flex-wrap:wrap;align-items:center;gap:.5em;
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;
}
.crumbs li{display:flex;align-items:center;gap:.5em;color:var(--dim)}
.crumbs li+li::before{content:"/";color:var(--line-2)}
.crumbs a{color:var(--muted);text-decoration:none;transition:color .2s}
.crumbs a:hover{color:var(--cage)}
.crumbs [aria-current="page"]{color:var(--limit);font-weight:600}

/* ============================================================
   NEXT UP — δύο ή τρεις σχετικές σελίδες στο τέλος. Το prev/next από
   κάτω είναι γραμμικό· αυτό είναι θεματικό.
   ============================================================ */
.nextup{padding-block:clamp(44px,5.4vw,72px);border-top:1px solid var(--line)}
.nextup__label{margin:0 0 clamp(18px,2.2vw,26px)}
.nextup .card{padding:22px 22px 24px}
.nextup .card .h3{margin-bottom:7px}
.nextup .card p{font-size:.9rem}

/* ============================================================
   SECTIONS
   ============================================================ */
.section{padding-block:var(--sec-pad)}
.section--alt{background:var(--bg-alt);border-block:1px solid var(--line)}
/* Το .section--alt έχει border και κάτω· ό,τι ακολουθεί με δικό του
   border-top έβγαζε διπλή γραμμή 2px σε άλλες σελίδες και 1px σε άλλες. */
.section--alt+.nextup{border-top:0}
/* Ο pager ΔΕΝ είναι αδελφός της ενότητας: το <div id="pager"> κάθεται έξω από
   το <main>, οπότε ένα `.section--alt + .pagerwrap` δεν τον έφτανε ποτέ και η
   διπλή γραμμή έμενε (deliverables.html). Το :has() κοιτάζει μέσα στο <main>
   για το τελευταίο του παιδί, άρα πιάνει και όποια σελίδα τελειώσει έτσι
   στο μέλλον. Όπου δεν υποστηρίζεται, η σελίδα δείχνει ό,τι έδειχνε πριν. */
main:has(>.section--alt:last-child)+.pagerwrap{border-top:0}

.shead{max-width:76ch;margin-bottom:clamp(34px,4.4vw,60px)}
.shead__tag{display:flex;gap:.9em;align-items:baseline;margin:0 0 16px;color:var(--cage)}
.shead__tag span[data-l]{color:var(--dim)}
/* the deliverable code (Π1 / D1) keeps the accent colour; only the word next
   to it is dimmed, which is what the plain numbered pages do too */
.shead__tag .shead__code span[data-l]{color:var(--cage)}
.shead__lede{color:var(--muted);font-size:1.03rem;max-width:64ch;margin:0}
.shead__cta{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 0}
.shead__lede strong{color:var(--text);font-weight:600}

/* reveal */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition-delay:0ms}
  .plan--lead::before{width:100%}}

/* ---------- cards ---------- */
.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.cards-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}

/* a card that is itself a link — used for the two deliverables */
.card--link{display:flex;flex-direction:column;text-decoration:none}
/* flex children stretch by default, which would blow the badge to full width */
.card--link .card__idx{align-self:flex-start}
.card--link .card__go{
  margin-top:auto;padding-top:18px;
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--cage);transition:transform .2s;
}
.card--link:hover .card__go{transform:translateX(3px)}
.card__meta{
  list-style:none;margin:16px 0 0;padding:16px 0 0;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:9px;font-size:.875rem;color:var(--muted);
}
.card__meta li{display:grid;grid-template-columns:14px 1fr;gap:10px;align-items:baseline}
.card__meta li::before{content:"";width:6px;height:6px;border:1px solid var(--cage);transform:rotate(45deg)}
.card{
  border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px 28px;
  background:var(--bg);
  position:relative;transition:border-color .3s,transform .3s,box-shadow .3s;
}
.card:hover{border-color:var(--limit-line);transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.card__idx{
  display:inline-block;margin-bottom:16px;color:#fff;background:var(--cage);
  border:1px solid var(--cage);width:24px;height:24px;line-height:22px;text-align:center;
  border-radius:2px;letter-spacing:0;font-size:.7rem;
}
/* two-character codes (Π1, Π2) do not fit the square badge */
.card__idx--wide{width:auto;min-width:24px;padding-inline:7px}
.card p{color:var(--muted);font-size:.955rem;margin:0}
.card em{color:var(--text);font-style:normal;font-weight:600}
/* Τίτλος δημοσιευμένου έργου: πλάγιο, όπως το θέλει η βιβλιογραφική
   σύμβαση. Το <em> μέσα σε κάρτα σημαίνει άλλο πράγμα εδώ — έμφαση σε
   όρο — και γι' αυτό είναι έντονο και όχι πλάγιο. */
.card cite{color:var(--text);font-style:italic;font-weight:500}

/* ---------- ο επιλογέας έκδοσης (software.html) ----------
   Είναι <details>/<summary> και όχι κουμπί με JavaScript: ανοίγει και όταν
   το app.js δεν έχει φορτώσει, και ο πληκτρολογιακός χειρισμός έρχεται
   δωρεάν από τον browser. Μένει ΜΕΣΑ στη ροή — δεν επιπλέει πάνω από τις
   κάρτες — γιατί από κάτω του υπάρχει περιεχόμενο που δεν πρέπει να κρύβεται
   σε μια οθόνη τηλεφώνου. */
.picker{max-width:470px;margin:0 0 clamp(26px,3vw,38px)}
.picker__btn{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 18px;cursor:pointer;list-style:none;
  border:1px solid var(--line-2);border-radius:var(--radius-ctl);background:var(--bg);
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text);transition:border-color .25s,color .25s;
}
.picker__btn::-webkit-details-marker{display:none}
.picker__btn:hover{border-color:var(--cage);color:var(--cage)}
.picker__caret{
  width:8px;height:8px;flex:none;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:translateY(-25%) rotate(45deg);transition:transform .25s;
}
.picker[open] .picker__caret{transform:translateY(15%) rotate(-135deg)}
.picker__list{
  list-style:none;margin:6px 0 0;padding:6px;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);
  box-shadow:var(--shadow-sm);
}
.picker__list a{
  display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:baseline;
  padding:11px 12px;border-radius:2px;text-decoration:none;color:var(--text);
  transition:background .2s,color .2s;
}
.picker__list a:hover{background:var(--panel-2);color:var(--limit)}
.picker__no{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.08em;color:var(--cage)}
.picker__name{font-family:var(--f-body);font-size:.95rem}

/* ---------- the 3-step loop ---------- */
.loopdiag{
  display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:start;gap:clamp(14px,2vw,30px);
  margin-top:clamp(34px,4vw,56px);padding:clamp(26px,3vw,40px) 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.loopdiag__step .mono-label{color:var(--cage);display:block;margin-bottom:10px}
.loopdiag__step h3{font-family:var(--f-display);font-weight:660;font-size:1.02rem;margin:0 0 8px;letter-spacing:-.01em;color:var(--limit)}
.loopdiag__step p{color:var(--muted);font-size:.9rem;margin:0}
.loopdiag__arrow{align-self:center;width:100%;min-width:26px;height:1px;background:linear-gradient(90deg,var(--line-2),var(--limit));position:relative}
.loopdiag__arrow::after{content:"";position:absolute;right:0;top:-3px;border:3.5px solid transparent;border-left-color:var(--limit)}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin:clamp(30px,3.6vw,50px) 0 0;background:var(--line);border:1px solid var(--line)}
.stat{background:var(--bg);padding:24px 20px}
.stat dt{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:10px}
.stat dd{margin:0;font-family:var(--f-display);font-weight:740;font-size:clamp(1.9rem,3.6vw,2.7rem);letter-spacing:-.035em;line-height:1;color:var(--limit)}

/* ---------- rules ---------- */
.rules{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.rule{display:grid;grid-template-columns:230px 1fr;gap:clamp(20px,3vw,44px);align-items:center;background:var(--bg);padding:clamp(24px,3vw,38px) clamp(20px,3vw,38px)}
.rule__diagram{background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--radius);padding:10px}
.rule__tag{display:block;color:var(--cage);margin-bottom:7px;text-transform:lowercase;letter-spacing:.13em}
.rule__body p{color:var(--muted);font-size:.965rem;max-width:62ch}
.rule__body em{color:var(--text);font-style:italic}
.rule__body strong{color:var(--text);font-weight:600}
p.formula{
  font-family:var(--f-mono);font-size:clamp(.9rem,1.25vw,1.06rem);color:var(--limit);
  background:var(--limit-soft);border-left:2px solid var(--cage);
  padding:11px 15px;margin:0 0 15px;display:inline-block;letter-spacing:.01em;
}

/* diagrams */
.dia{width:100%;height:auto}
.dia__cage{fill:none;stroke:var(--cage);stroke-width:1.5;stroke-linejoin:round}
.dia__cage-line{stroke:var(--cage);stroke-width:1.5}
.dia__ghost line,.dia__ghost rect,.dia__ghost path{fill:none;stroke:var(--line-2);stroke-width:1;stroke-dasharray:3 3.5}
.dia__pt--cage rect{fill:var(--bg);stroke:var(--cage);stroke-width:1.4}
.dia__pt--new{fill:var(--limit)}
.dia__pt--limit{fill:var(--limit)}
.dia__pt--new-g circle{fill:var(--limit)}
.dia__link{stroke:var(--limit);stroke-width:1;stroke-dasharray:2 3}
.dia__new path{fill:var(--limit-soft);stroke:var(--limit);stroke-width:1.2;stroke-linejoin:round}
.dia__label{font-family:var(--f-mono);font-size:10px;fill:var(--muted)}
.dia__label--limit{fill:var(--limit);font-weight:600}

/* ---------- split notes ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);margin-top:var(--gap)}
.note{border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;background:var(--bg)}
.note p{color:var(--muted);font-size:.955rem}
.note strong{color:var(--text);font-weight:600}
.note em{color:var(--limit);font-style:italic}
.note--accent{border-left:2px solid var(--cage)}

/* ---------- schemes ---------- */
.dias-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);margin-bottom:clamp(30px,3.4vw,48px)}
.diacard{margin:0;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);padding:14px;transition:border-color .3s,box-shadow .3s}
.diacard:hover{border-color:var(--cage-line);box-shadow:var(--shadow-sm)}
.diacard figcaption{display:flex;flex-direction:column;gap:5px;margin-top:10px;padding-top:11px;border-top:1px solid var(--line)}
.diacard b{font-family:var(--f-display);font-weight:640;font-size:.92rem;letter-spacing:-.01em;color:var(--limit)}
.diacard .mono-label{font-size:.575rem;letter-spacing:.11em}

.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg)}
.tbl{width:100%;border-collapse:collapse;min-width:860px;font-size:.9rem}
.tbl th,.tbl td{text-align:left;padding:15px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl thead th{
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--on-deep-mute);font-weight:500;background:var(--limit);white-space:nowrap;
}
.tbl tbody th{font-family:var(--f-display);font-weight:660;font-size:.96rem;white-space:nowrap;color:var(--limit)}
.tbl tbody th i{display:block;font-family:var(--f-mono);font-style:normal;font-weight:400;font-size:.63rem;letter-spacing:.06em;color:var(--dim);margin-top:5px;white-space:normal}
.tbl td{color:var(--muted)}
.tbl td:nth-child(2){white-space:nowrap;font-family:var(--f-mono);font-size:.82rem}
.tbl tbody tr:last-child th,.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr:hover{background:rgba(18,56,110,.035)}
.tbl__row--hero{background:linear-gradient(90deg,var(--cage-soft),transparent 55%);box-shadow:inset 3px 0 0 var(--cage)}
.tbl tbody tr.tbl__row--hero:hover{background:linear-gradient(90deg,var(--cage-soft),transparent 55%)}
.tbl__sub{display:block;font-family:var(--f-mono);font-size:.6rem;color:var(--dim);margin-top:3px}
.pill{
  display:inline-block;font-family:var(--f-mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 9px;border-radius:2px;white-space:nowrap;
}
.pill--approx{background:var(--limit-soft);color:var(--limit);border:1px solid var(--limit-line)}
.pill--interp{background:var(--cage-soft);color:var(--cage);border:1px solid var(--cage-line)}

/* ============================================================
   REFERENCE PAGE — sticky in-page index beside the body, the
   shape of an API documentation index. Additive only: it reuses
   the existing tokens and table styles.
   ============================================================ */
.doclayout{display:grid;grid-template-columns:214px 1fr;gap:clamp(28px,4vw,64px);align-items:start}

.docnav{position:sticky;top:88px}
.docnav__title{display:block;margin:0 0 12px;padding-left:13px}
.docnav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.docnav a{
  display:block;padding:8px 13px;font-size:.86rem;line-height:1.4;
  color:var(--muted);text-decoration:none;border-left:2px solid var(--line);
  transition:color .2s,border-color .2s,background .2s;
}
.docnav a:hover{color:var(--limit);border-left-color:var(--cage);background:var(--bg-alt)}
/* η σελίδα στην οποία βρίσκεσαι — μαρκάρεται στο HTML, όχι με JavaScript */
.docnav a.is-here{background:var(--limit);border-left-color:var(--limit);color:#fff;font-weight:600}

/* Μέσα σε ενότητα, η ετικέτα «Τεκμηρίωση» γίνεται ο δρόμος της επιστροφής
   στη λίστα με όλες τις ενότητες — γιατί εκεί κρύβονται οι υπόλοιπες. */
.docnav__title a{
  display:inline;padding:0;border-left:0;background:none;
  font:inherit;letter-spacing:inherit;color:var(--cage);
}
.docnav__title a:hover{color:var(--limit);background:none}

/* οι τρεις κατηγορίες, ένθετες κάτω από την ενότητα που διαβάζεις */
.docnav__sub{list-style:none;margin:0;padding:0}
.docnav__sub a{
  padding:7px 13px 7px 26px;font-size:.8rem;color:var(--dim);
  border-left-color:var(--line);
}
.docnav__sub a:hover{color:var(--limit);border-left-color:var(--cage);background:var(--bg-alt)}

/* η στήλη περιεχομένου δίπλα στην πλαϊνή λίστα· το min-width:0 εμποδίζει ένα
   φαρδύ παιδί (πίνακας, code block) να τεντώσει τη γραμμή του grid */
.docbody{min-width:0}

.docsec{margin-bottom:clamp(40px,5.2vw,68px)}
.docsec:last-child{margin-bottom:0}
.docsec>h2{
  font-family:var(--f-display);font-weight:720;font-size:clamp(1.3rem,2vw,1.66rem);
  letter-spacing:-.022em;color:var(--limit);margin:0 0 16px;
  padding-bottom:13px;border-bottom:1px solid var(--line);
}
.docsec__intro{color:var(--muted);font-size:.96rem;max-width:70ch;margin:0 0 26px}

/* Τα μπλοκ μέσα σε μια ενότητα τεκμηρίωσης μπαίνουν το ένα κάτω απ' το άλλο,
   και τα περισσότερα (κάρτες, λίστες, πίνακες) δεν φέρνουν δικό τους πάνω
   περιθώριο. Μόνο όταν ακολουθούν κάτι άλλο — γι' αυτό το «*+». */
.docsec>*+.cards-3,
.docsec>*+.featlist,
.docsec>*+.rules,
.docsec>*+.dias-4,
.docsec>*+.tablewrap,
.docsec>*+.note,
.docsec>*+p.mini,
.docsec>*+.docsec__intro{margin-top:var(--gap)}
/* …εκτός από την εισαγωγή αμέσως μετά τον τίτλο: εκεί το κενό το δίνει ο h2. */
.docsec>h2+.docsec__intro{margin-top:0}

/* Πίνακας χωρίς στήλη κειμένου — μόνο σύντομα πεδία. Χωράει στη στενή στήλη
   της τεκμηρίωσης, ενώ το σκέτο .tbl (860px) θα την ξεχείλιζε. */
.tbl--compact{min-width:620px}

/* function table: the name in mono on the left, prose on the right */
.tbl--fn{min-width:440px}
.tbl--fn th[scope="row"]{
  font-family:var(--f-mono);font-size:.85rem;font-weight:500;color:var(--cage);
  white-space:nowrap;width:1%;
}
.tbl--fn td,.tbl--fn td:nth-child(2){
  white-space:normal;font-family:var(--f-body);font-size:.92rem;
}


/* ---------- creases ---------- */
.creasegrid,.refinergrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3.4vw,52px);align-items:start}
.crease{
  margin:0;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--panel);overflow:hidden;box-shadow:var(--shadow-sm);
}
.crease__head{display:flex;justify-content:space-between;gap:12px;padding:13px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap;background:var(--bg-alt)}
.crease__head .mono-label{color:var(--limit)}
.crease__val{color:var(--cage) !important;letter-spacing:.09em}
.crease__val b{font-weight:600}
.crease__stage{padding:8px}
#creaseCanvas{width:100%;height:auto;aspect-ratio:1/.62;display:block}
.slider{display:block;padding:6px 16px 0}
.slider input{
  -webkit-appearance:none;appearance:none;width:100%;height:22px;background:transparent;cursor:pointer;
}
.slider input::-webkit-slider-runnable-track{height:2px;background:linear-gradient(90deg,var(--limit),var(--cage));border-radius:2px}
.slider input::-moz-range-track{height:2px;background:linear-gradient(90deg,var(--limit),var(--cage));border-radius:2px}
.slider input::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;background:var(--cage);border-radius:50%;margin-top:-5.5px;border:0}
.slider input::-moz-range-thumb{width:13px;height:13px;background:var(--cage);border-radius:50%;border:0}
.crease__scale{display:flex;justify-content:space-between;padding:2px 16px 15px;font-size:.575rem;letter-spacing:.1em}

.crease__copy,.refinergrid__copy{display:flex;flex-direction:column;gap:var(--gap)}
.featlist{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.featlist li{background:var(--bg);padding:15px 18px;display:grid;grid-template-columns:118px 1fr;gap:16px;align-items:baseline;font-size:.9rem;color:var(--muted)}
.featlist b{font-family:var(--f-mono);font-size:.63rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cage);font-weight:500}

/* ---------- versus ---------- */
.versus{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.vs{background:var(--bg);padding:clamp(26px,3vw,40px)}
.vs .h3{font-size:1.16rem;margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid var(--line);color:var(--limit)}
.vslist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.vslist li{position:relative;padding-left:22px;color:var(--muted);font-size:.945rem}
.vslist li::before{
  content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;
  border:1px solid var(--cage);transform:rotate(45deg);
}
.vslist strong{color:var(--text);font-weight:600}
.vslist em{color:var(--limit);font-style:italic}

/* ---------- uses ---------- */
.uses{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.use{background:var(--bg);padding:28px 24px 30px;transition:background .3s}
.use:hover{background:var(--panel-2)}
.use .h3{color:var(--limit);padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--line)}
.use p{color:var(--muted);font-size:.9rem;margin:0}
.use em{color:var(--text);font-style:italic}

/* ---------- stack ---------- */
.stackgrid{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:var(--gap);align-items:start}
.stackcard{border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px 30px;background:var(--bg)}
.stackcard--lead{border-top:2px solid var(--cage)}
.stackcard__kicker{display:block;margin-bottom:10px;color:var(--cage)}
.stackcard .h3{font-size:1.35rem;font-weight:720;letter-spacing:-.022em;margin-bottom:14px;color:var(--limit)}
.stackcard>p{color:var(--muted);font-size:.93rem}
.stackcard em{color:var(--text);font-style:italic}
.stackcard strong{color:var(--text);font-weight:600}

.layers{list-style:none;margin:20px 0;padding:0;display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.layers li{background:var(--bg-alt);padding:11px 14px;display:grid;grid-template-columns:48px 1fr;gap:12px;align-items:baseline;font-size:.85rem;color:var(--muted)}
.layers b{font-family:var(--f-mono);font-size:.78rem;color:var(--cage);font-weight:600}
p.perfnote{
  border-left:2px solid var(--limit);background:var(--limit-soft);
  padding:15px 17px;font-size:.895rem;color:var(--muted);margin:0;
}
.perfnote em{color:var(--cage);font-style:normal;font-weight:600}

.code{
  margin:18px 0 12px;padding:16px;overflow-x:auto;
  background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--radius);
  font-family:var(--f-mono);font-size:.735rem;line-height:1.8;color:#3A4A63;
}
.code .c-k{color:var(--cage)}
.code .c-t{color:var(--text);font-weight:600}
.code .c-s{color:var(--limit)}
.code .c-n{color:#8A5A00}
p.mini{font-size:.82rem;color:var(--dim);margin:0}

.tools{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:15px}
.tools li{display:flex;flex-direction:column;gap:5px;font-size:.875rem;color:var(--muted);padding-bottom:15px;border-bottom:1px solid var(--line)}
.tools li:last-child{border-bottom:0;padding-bottom:0}
.tools b{font-family:var(--f-display);font-weight:660;font-size:.94rem;color:var(--limit);letter-spacing:-.01em}

/* ============================================================
   ΠΕΛΑΤΕΣ — ονόματα σε τυπογραφία, όχι λογότυπα. Ίδια απόφαση με τη
   γραμμή εργαλείων της αρχικής: δεν φιλοξενούμε σήματα τρίτων και δεν
   χρειάζεται ούτε ένα αρχείο εικόνας.
   ============================================================ */
/* Τρεις στήλες: εννιά πελάτες = τρεις γεμάτες σειρές. Οι γραμμές του πλέγματος
   τις γράφουν τα ίδια τα κελιά (δεξιά + κάτω) και όχι ένα gap πάνω σε χρωματιστό
   φόντο — έτσι μια μισογεμάτη τελευταία σειρά δεν αφήνει γκρίζα κενά κουτιά όταν
   προστεθεί ή αφαιρεθεί πελάτης. */
.clients{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);border-left:1px solid var(--line);
  margin-bottom:var(--gap);
}
/* όταν το πλέγμα κλείνει την ενότητα, το κενό το δίνει το padding της section */
.clients:last-child{margin-bottom:0}
.client{
  background:var(--bg);padding:30px 24px 32px;transition:background .35s;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
}
.client:hover{background:var(--bg-alt)}
.client__no{margin:0 0 16px;color:var(--cage)}
.client__name{
  font-family:var(--f-display);font-weight:720;
  font-size:clamp(1.06rem,1.55vw,1.3rem);letter-spacing:-.022em;line-height:1.15;
  margin:0 0 11px;color:var(--limit);
  position:relative;display:inline-block;padding-bottom:9px;
}
/* η γραμμή γράφεται από αριστερά στο hover — μία κίνηση, καμία μετατόπιση */
.client__name::after{
  content:"";position:absolute;left:0;bottom:0;height:1.5px;width:0;
  background:var(--cage);transition:width .45s cubic-bezier(.2,.7,.3,1);
}
.client:hover .client__name::after{width:100%}
.client__alt{
  display:block;font-family:var(--f-mono);font-weight:400;font-size:.6rem;
  letter-spacing:.15em;text-transform:uppercase;color:var(--dim);margin-top:7px;
}
.client__sector{color:var(--muted);font-size:.885rem;margin:0}
.client__work{color:var(--muted);font-size:.875rem;margin:10px 0 0}

/* ============================================================
   ΚΟΣΤΟΣ — τρία κλιμακωτά πακέτα. Δεν υπάρχει τιμή, υπάρχει πρόσκληση:
   το «Κατόπιν προσφοράς» παίρνει τη θέση και το βάρος που θα είχε ο
   αριθμός, ώστε η κάρτα να διαβάζεται σαν κανονική κάρτα τιμολόγησης.
   ============================================================ */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);align-items:stretch}
.plan{
  position:relative;display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);
  padding:30px 26px 30px;overflow:hidden;
  transition:border-color .3s,transform .3s,box-shadow .3s;
}
.plan:hover{border-color:var(--limit-line);transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.plan--lead{border-color:var(--line-2);box-shadow:var(--shadow-sm)}
/* Η ταινία του πληρέστερου πακέτου γράφεται μόνη της όταν η κάρτα εμφανιστεί:
   κόκκινο (το πλέγμα που γράφεις) προς navy (η επιφάνεια που υπολογίζεται) —
   η ίδια αφήγηση χρώματος με τα διαγράμματα. */
.plan--lead::before{
  content:"";position:absolute;left:0;top:0;height:2px;width:0;
  background:linear-gradient(90deg,var(--cage),var(--limit));
  transition:width .9s cubic-bezier(.2,.7,.3,1) .35s;
}
.plan--lead.is-in::before{width:100%}
.plan__tier{margin:0 0 14px;color:var(--cage)}
.plan__name{
  font-family:var(--f-display);font-weight:720;font-size:1.4rem;
  letter-spacing:-.024em;line-height:1.1;margin:0 0 12px;color:var(--limit);
}
.plan__for{color:var(--muted);font-size:.925rem;margin:0 0 22px}
.plan__price{
  font-family:var(--f-display);font-weight:700;font-size:1.14rem;letter-spacing:-.016em;
  color:var(--cage);margin:0 0 6px;padding-top:20px;border-top:1px solid var(--line);
}
.plan__note{margin:0 0 22px}
.plan__inherit{
  font-size:.87rem;color:var(--dim);margin:0 0 13px;
  padding-top:18px;border-top:1px solid var(--line);
}
.plan__inherit em{color:var(--limit);font-style:normal;font-weight:600}
.plan__list{
  list-style:none;margin:0 0 26px;padding:0;
  display:flex;flex-direction:column;gap:11px;font-size:.9rem;color:var(--muted);
}
.plan__list li{display:grid;grid-template-columns:14px 1fr;gap:10px;align-items:baseline}
.plan__list li::before{content:"";width:6px;height:6px;border:1px solid var(--cage);transform:rotate(45deg)}
.plan__list a{color:var(--limit);text-underline-offset:3px}
/* margin-top:auto ευθυγραμμίζει τα τρία κουμπιά στον πάτο, όσο κι αν
   διαφέρουν σε ύψος οι λίστες από πάνω τους */
.plan__cta{margin-top:auto;align-self:flex-start}

/* ---------- σκαλωτή αποκάλυψη ----------
   Κάθε κάρτα μπαίνει λίγο μετά την προηγούμενη, ώστε η σειρά να διαβάζεται
   ως σειρά και όχι ως μπλοκ που πετάγεται. Καθυστερήσεις, όχι νέα κίνηση:
   δανείζεται το .reveal που ήδη υπάρχει. Μηδενίζονται στο reduced-motion. */
.plans>.reveal:nth-child(2){transition-delay:110ms}
.plans>.reveal:nth-child(3){transition-delay:220ms}
/* το κλιμάκωμα μηδενίζει σε κάθε σειρά των τριών, όσοι πελάτες κι αν μπουν */
.clients>.reveal:nth-child(3n+2){transition-delay:90ms}
.clients>.reveal:nth-child(3n+3){transition-delay:180ms}
.cards-3>.reveal:nth-child(2){transition-delay:90ms}
.cards-3>.reveal:nth-child(3){transition-delay:180ms}

/* ---------- timeline ---------- */
.tl{list-style:none;margin:0;padding:0;position:relative}
.tl::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:1px;background:linear-gradient(180deg,var(--cage),var(--limit))}
.tl__item{display:grid;grid-template-columns:132px 1fr;gap:clamp(18px,3vw,44px);padding:22px 0 22px 26px;border-bottom:1px solid var(--line);position:relative}
.tl__item::before{
  content:"";position:absolute;left:-4px;top:32px;width:9px;height:9px;
  background:var(--bg-alt);border:1px solid var(--cage);transform:rotate(45deg);
}
.tl__item--key::before{background:var(--cage);border-color:var(--cage)}
.tl__item:last-child{border-bottom:0}
.tl__yr{font-family:var(--f-mono);font-size:.9rem;letter-spacing:.06em;color:var(--muted);padding-top:2px}
.tl__item--key .tl__yr{color:var(--cage);font-weight:600}
.tl__item h2{font-family:var(--f-display);font-weight:660;font-size:1.06rem;margin:0 0 7px;letter-spacing:-.012em;color:var(--limit)}
.tl__item p{color:var(--muted);font-size:.93rem;margin:0;max-width:76ch}
.tl__item em{color:var(--text);font-style:italic}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line)}
.qa summary{
  cursor:pointer;list-style:none;padding:22px 40px 22px 0;position:relative;
  font-family:var(--f-display);font-weight:600;font-size:1.05rem;letter-spacing:-.012em;
  color:var(--limit);transition:color .2s;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--cage)}
.qa summary::after{
  content:"";position:absolute;right:6px;top:50%;width:10px;height:10px;
  border-right:1.5px solid var(--cage);border-bottom:1.5px solid var(--cage);
  transform:translateY(-70%) rotate(45deg);transition:transform .28s;
}
.qa[open] summary::after{transform:translateY(-20%) rotate(-135deg)}
.qa p{color:var(--muted);font-size:.965rem;padding:0 8% 26px 0;margin:0}

/* ---------- sources ---------- */
.srcgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,48px)}
.srcgroup h2{margin:0 0 16px;padding-bottom:11px;border-bottom:1px solid var(--line);color:var(--cage)}
.srclist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.srclist a{
  color:var(--muted);text-decoration:none;font-size:.885rem;line-height:1.55;
  display:block;padding-left:16px;position:relative;transition:color .2s;
}
.srclist a::before{content:"↗";position:absolute;left:0;top:0;color:var(--cage);font-size:.8em;transition:color .2s,transform .2s}
.srclist a:hover{color:var(--limit)}
.srclist a:hover::before{transform:translate(1px,-1px)}
.srclist i{color:var(--limit);font-style:italic}

/* ---------- cta ---------- */
.cta{
  padding-block:clamp(62px,7.5vw,110px);
  background:var(--deep);
  color:var(--on-deep);
  border-top:1px solid var(--deep);
}
.cta__inner{display:flex;justify-content:space-between;align-items:center;gap:clamp(24px,4vw,60px);flex-wrap:wrap}
.cta__title{margin-bottom:12px;color:#fff}
.cta__sub{color:var(--on-deep-mute);max-width:52ch;margin:0;font-size:1rem}
.cta .btn--solid{background:#fff;color:var(--deep)}
.cta .btn--solid:hover{background:var(--cage);color:#fff}

/* ---------- footer ---------- */
.foot{border-top:1px solid rgba(255,255,255,.14);padding-block:clamp(40px,5vw,58px);background:var(--deep);color:var(--on-deep-mute)}
.foot__map{display:grid;grid-template-columns:1.7fr repeat(4,1fr);gap:clamp(22px,3vw,44px);align-items:start}
.foot__about{max-width:40ch}
.foot__head{color:#fff;margin:0 0 13px}
.foot__col ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.foot__col a{color:var(--on-deep-mute);text-decoration:none;font-size:.875rem;transition:color .2s}
.foot__col a:hover{color:#fff}
/* Στο footer το logo έχει αέρα και μπορεί να είναι μεγαλύτερο απ' ό,τι στη
   μπάρα — εδώ δεν ανταγωνίζεται μενού. Η αρνητική εκδοχή είναι άλλο αρχείο,
   όχι φίλτρο: ένα invert() θα γύριζε και το κόκκινο σε γαλάζιο. */
.foot__logo{display:block;height:44px;width:auto;margin:0 0 14px}
.foot__note{color:var(--on-deep-mute);font-size:.85rem;margin:0}
/* Η οπτική ταυτότητα «Ελλάδα 2.0», μπλε εκδοχή, στη μόνιμη θέση της. Το ύψος
   είναι ΜΕΓΑΛΥΤΕΡΟ από το .foot__logo (48 > 44) γιατί ο Οδηγός Επικοινωνίας
   απαγορεύει τα λοιπά λογότυπα να την ξεπερνούν — δες το σχόλιο της .eubar. */
.foot__eu{display:block;line-height:0;margin:20px 0 0}
.foot__eu img{display:block;height:48px;width:auto}
.foot__note a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.foot__note a:hover{color:var(--cage)}
.foot__meta{margin:clamp(28px,3.6vw,44px) 0 0;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);line-height:1.9;color:var(--on-deep-mute)}

/* ============================================================
   Η ΜΠΑΡΑ ΤΗΣ ΕΞΑΓΩΓΗΣ — app.js §7μ
   Κάθεται αμέσως κάτω από τον πίνακα των σημείων, γιατί ό,τι κατεβαίνει
   είναι ακριβώς ό,τι μόλις γράφτηκε. Χωρίς πλαίσιο και χωρίς φόντο: δεν
   είναι δεύτερη ενότητα, είναι η κατάληξη της προηγούμενης.
   ============================================================ */
.expbar{margin-top:16px}
.expbar__btns{display:flex;gap:10px;flex-wrap:wrap}
/* ΓΕΜΑΤΑ ΚΟΚΚΙΝΑ, και όχι περιγράμματα. Ως εδώ η σελίδα κρατά το κόκκινο
   για ό,τι γράφει ο επισκέπτης — και το αρχείο ΕΙΝΑΙ ό,τι έγραψε, οπότε το
   κουμπί δεν δανείζεται χρώμα, το κληρονομεί. Δίπλα σε έναν πίνακα με
   δεκάδες γραμμές αριθμών, ένα κουμπί με λεπτό γκρι περίγραμμα χάνεται:
   ήταν σωστό όσο ήταν υποσημείωση, και έπαψε να είναι μόλις έγινε το πράγμα
   που ψάχνει ο επισκέπτης. Λευκό πάνω στο --cage δίνει 5.4:1, δηλαδή AA. */
.expbtn{
  -webkit-appearance:none;appearance:none;cursor:pointer;
  display:inline-flex;align-items:center;gap:9px;
  padding:0 20px;height:38px;
  background:var(--cage);border:1px solid var(--cage);color:#fff;
  font-family:var(--f-mono);font-size:.72rem;font-weight:600;letter-spacing:.1em;
  border-radius:var(--radius-ctl);box-shadow:var(--shadow-sm);
  transition:transform .18s,box-shadow .22s,background .22s,border-color .22s;
}
/* Το ίδιο σήκωμα με το .btn--solid: ένα κουμπί του site απαντά έτσι. */
.expbtn:hover{transform:translateY(-2px);box-shadow:0 0 0 3px var(--cage-soft),var(--shadow-sm)}
.expbtn:active{transform:translateY(0)}
@media (prefers-reduced-motion:reduce){.expbtn{transition:box-shadow .22s}.expbtn:hover{transform:none}}
/* Το βέλος είναι σύμβολο και όχι λέξη, άρα δεν θέλει δίγλωσσο ζευγάρι — ίδιος
   κανόνας με το ↺ των κουμπιών επαναφοράς. Ζει στο HTML και όχι σε ::before,
   για να μη γράφει η CSS περιεχόμενο που δεν διαβάζεται από πουθενά. */
.expbtn__i{font-size:1.05em;line-height:1;opacity:.85}
/* Το κουμπί του βίντεο γράφει την πρόοδο της εγγραφής πάνω στον εαυτό του
   («48%»), γι' αυτό η λέξη ζει σε δικό της span με σταθερό πλάτος: αλλιώς
   το κουμπί θα μίκραινε και θα μεγάλωνε δέκα φορές το δευτερόλεπτο. */
.expbtn__t{display:inline-block;min-width:13ch;text-align:left}
/* Όσο γράφεται το αρχείο δεν ξαναπατιέται, και φαίνεται ότι δεν ξαναπατιέται. */
.expbtn:disabled{cursor:not-allowed;opacity:.55}
.expbtn:disabled:hover{transform:none;box-shadow:var(--shadow-sm)}
/* Το `ch` σε monospace είναι το πλάτος του «0», δηλαδή κυριολεκτικά
   χαρακτήρες: 76 από αυτούς έσπαγαν τη σημείωση σε πέντε κοντές σειρές
   δίπλα σε έναν πίνακα 900 pixel. */
.expbar__note{
  margin:11px 0 0;font-family:var(--f-mono);font-size:.575rem;line-height:1.7;
  letter-spacing:.03em;color:var(--muted);max-width:132ch;
}
.expbar__note strong{color:var(--text);font-weight:600}
/* Το κατέβασμα δεν έχει τίποτα να δείξει: ο browser το κάνει σε άλλη
   γωνία της οθόνης, ή σε καμία. Ένα μισού δευτερολέπτου φλας πάνω στο
   κουμπί είναι η μόνη επιβεβαίωση που ελέγχει η σελίδα. */
.expbtn.is-done{animation:expflash .5s ease-out}
@keyframes expflash{
  from{background:var(--bg);color:var(--cage);box-shadow:0 0 0 5px var(--cage-soft)}
  to{background:var(--cage);color:#fff;box-shadow:var(--shadow-sm)}
}
@media (prefers-reduced-motion:reduce){.expbtn.is-done{animation:none}}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1180px){
  .uses{grid-template-columns:repeat(2,1fr)}
  .clients{grid-template-columns:repeat(2,1fr)}
  .dias-4{grid-template-columns:repeat(2,1fr)}
  .stackgrid{grid-template-columns:1fr 1fr}
  .stackcard--lead{grid-column:1/-1}
}

@media (max-width:1000px){
  /* Στη στενή στήλη οι καμβάδες θέλουν ύψος, αλλιώς οι συναρτήσεις πλακώνονται
     η μία πάνω στην άλλη και δεν διαβάζονται. Η ρωγμή και τα δύο σχήματα μένουν
     δίπλα-δίπλα: η σύγκριση είναι ολόκληρο το διάγραμμα, δεν στοιβάζεται. */
  #igaTopCanvas{aspect-ratio:1/.62}
  #igaBasisCanvas{aspect-ratio:1/.40}
  #cadCanvas{aspect-ratio:1/.58}
  #caeTopCanvas{aspect-ratio:1/.62}
  #caeErrCanvas{aspect-ratio:1/.34}
  #dsnBezCanvas,#dsnSplCanvas{aspect-ratio:1/.50}
  #dtlCanvas{aspect-ratio:1/.58}
  .diagpair{gap:5px 9px}
  .diagtrio{gap:0 9px}

  .doclayout{grid-template-columns:1fr;gap:30px}
  .docnav{position:static;background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--radius);padding:16px 14px}

  .hero__grid{grid-template-columns:1fr;gap:38px}
  .cards-3{grid-template-columns:1fr}
  .plans{grid-template-columns:1fr}
  .srcgrid{grid-template-columns:1fr;gap:32px}
  .runson{grid-template-columns:repeat(4,1fr)}
  .foot__map{grid-template-columns:repeat(2,1fr);gap:26px}
  .foot__about{grid-column:1/-1}
}

@media (max-width:1240px){
  .nav__links{
    position:absolute;top:66px;left:0;right:0;
    flex-direction:column;gap:0;
    /* the desktop rule centres its items — reset it, or the burger list
       comes out centred instead of left-aligned */
    align-items:stretch;align-self:auto;
    /* fully opaque: this panel sits on top of the page content, so a
       translucent background is a readability problem, not an effect */
    background:var(--bg);
    border-bottom:1px solid var(--line);
    box-shadow:0 18px 40px -34px rgba(11,17,28,.8);
    padding:8px clamp(20px,4.6vw,60px) 20px;
    display:none;
  }
  .nav__links.is-open{display:flex}
  .nav__links a{padding:13px 0;border-bottom:1px solid var(--line);font-size:.78rem}
  .nav__links a::after{display:none}
  .nav__links a.is-active{padding-left:10px;border-left:2px solid var(--cage)}

  /* inside the burger menu there is nothing to drop down onto — the
     sub-pages become a plain indented list, always visible */
  .nav__group{flex-direction:column;align-items:stretch;align-self:auto;gap:0}
  .nav__caret{display:none}
  .nav__sub{
    position:static;opacity:1;visibility:visible;transform:none;
    min-width:0;padding:0 0 0 14px;margin:0;
    background:transparent;border:0;border-left:2px solid var(--line);
    border-radius:0;box-shadow:none;
  }
  .nav__sub a{padding:11px 0 11px 12px;font-size:.78rem;border-bottom:1px solid var(--line)}
  .nav__sub li:last-child a{border-bottom:0}
  .nav__sub a.is-active{background:transparent;color:var(--cage);border-left:0;padding-left:12px}
  /* Χωρίς το navy pill, το ροζ #FF8A96 του badge έμενε σε λευκό: ~2.2:1 */
  .nav__sub a.is-active .nav__sub-no{color:var(--cage)}

  .burger{display:flex}
  .nav__tools{margin-left:auto}
}

@media (max-width:880px){
  .cards-2{grid-template-columns:1fr}
  .creasegrid,.refinergrid{grid-template-columns:1fr}
  /* Τα δύο κουμπιά μοιράζονται τη γραμμή αντί να στριμώχνονται αριστερά:
     σε οθόνη κινητού ένας στόχος 38px θέλει όλο το πλάτος που περισσεύει.
     Το justify-content χρειάζεται γιατί το κουμπί είναι πια inline-flex:
     τεντωμένο σε όλο το πλάτος, το κείμενο θα κολλούσε αριστερά. */
  .expbtn{flex:1 1 auto;min-width:132px;justify-content:center}
  /* Στοιβαγμένο, το πάνελ πάει από κάτω — αλλά ο καμβάς χαμηλώνει κιόλας,
     ώστε τα δύο μαζί να συνεχίζουν να χωράνε σε μία οθόνη κινητού. */
  .lab .lab__grid{grid-template-columns:1fr}
  .lab__panel{border-left:0;border-top:1px solid var(--line)}
  #beamCanvas,#roofCanvas{aspect-ratio:1/.62}
  /* Οι τρεις άξονες του §22 στοιβάζονται: σε τρίτο μιας οθόνης κινητού
     ένας άξονας βγαίνει ~105px και οι συναρτήσεις παύουν να ξεχωρίζουν.
     Ένας κάτω από τον άλλο, χαμηλότεροι, γιατί τώρα έχουν όλο το πλάτος. */
  .diagtrio{grid-template-columns:1fr}
  #cdvXiCanvas,#cdvEtaCanvas,#cdvZetaCanvas{aspect-ratio:1/.34}
  .versus{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .stackgrid{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .rule{grid-template-columns:1fr;gap:22px}
  .rule__diagram{max-width:230px}
  .loopdiag{grid-template-columns:1fr;gap:26px}
  .loopdiag__arrow{display:none}
  .tl__item{grid-template-columns:1fr;gap:8px}
  .cta__inner{flex-direction:column;align-items:flex-start}
}

@media (max-width:560px){
  /* Σε οθόνη κινητού η μπάρα χωράει logo + EL/EN + burger με 20px περιθώριο.
     Στα 28px το σλόγκαν είναι πια μια κόκκινη γραμμή και όχι κείμενο — αλλά
     εδώ διαβάζεται η σφαίρα και το «Geomiso», που είναι το ζητούμενο. */
  .brand__logo{height:28px}
  .foot__logo{height:38px}
  /* Στα 48px η ελληνική ταυτότητα πιάνει 282px και δεν χωράει στα 280px που
     αφήνει μια οθόνη 320px. Στα 44px πιάνει 258px και χωράει — και μένει πάνω
     από το 1 cm του Οδηγού. Το .foot__logo από πάνω είναι ήδη 38px, άρα η
     σχέση «κανένα άλλο logo μεγαλύτερο από την ταυτότητα» κρατάει. */
  .foot__eu img{height:44px}
  /* Ο πίνακας των σημείων χωράει ΟΛΟΚΛΗΡΟΣ σε οθόνη κινητού, γιατί εδώ ο
     οριζόντιος τζόγος κοστίζει διπλά: ο επισκέπτης γράφει σε ένα κελί ενώ
     κοιτάζει τον καμβά, και μια στήλη που κρύβεται είναι μια συντεταγμένη
     που δεν βρίσκεται. Πέντε στενές στήλες αντί για κύλιση. */
  .igaform{grid-template-columns:1fr;gap:14px}
  /* Έξι έδρες σε δύο στήλες πλάτους 150px είναι έξι κουμπιά που δεν
     διαβάζονται. Σε κινητό η μία στήλη κοστίζει ύψος και κερδίζει λέξεις. */
  .ig3faces{grid-template-columns:1fr}
  .tbl.tbl--net{min-width:0;font-size:.78rem}
  .tbl--net th,.tbl--net td{padding:4px 5px}
  .cellin{padding:0 4px;font-size:.68rem}
  .runson{grid-template-columns:repeat(3,1fr)}
  .clients{grid-template-columns:1fr}
  .foot__map{grid-template-columns:1fr;gap:24px}
  .uses{grid-template-columns:1fr}
  .featlist li{grid-template-columns:1fr;gap:6px}
  .refiner__ui,.avgs{flex-direction:column;align-items:flex-start;gap:14px}
  .readout{width:100%;justify-content:space-between}
  .h-display{font-size:clamp(2.15rem,10vw,3rem)}
  .qa p{padding-right:0}
  .pager{grid-template-columns:1fr}
  .pager__side--next{grid-column:1;text-align:left;align-items:flex-start;border-left:0;border-top:1px solid var(--line)}
}

/* ============================================================
   Η ΣΕΛΙΔΑ ΤΟΥ ΕΡΓΟΥ — project.html, το §1α του Οδηγού Επικοινωνίας
   του Ταμείου Ανάκαμψης. Προσθετικό μόνο: η σελίδα δανείζεται ό,τι
   υπάρχει ήδη (.shead, .stats, .featlist, .card, .note) και γράφει
   εδώ μόνο τα δύο πράγματα που δεν υπήρχαν πουθενά.
   ============================================================ */

/* Τα μπλοκ της σελίδας μπαίνουν το ένα κάτω απ' το άλλο και κανένα τους δεν
   φέρνει δικό του πάνω περιθώριο — ίδιο μοτίβο και ίδιος λόγος με το
   `.docsec>*+*` της τεκμηρίωσης. Το `.stats` έχει δικό του margin-top· ο
   κανόνας εδώ είναι πιο κάτω στο αρχείο και τον σκεπάζει, ώστε όλες οι
   αποστάσεις της σελίδας να είναι ΕΝΑΣ αριθμός και όχι δύο. */
.projsec>*+*{margin-top:var(--gap)}

/* Το τρίτο αντίτυπο της ταυτότητας, και το μεγαλύτερο: η .eubar τη δείχνει στα
   40px και το .foot__eu στα 48, αλλά εδώ ΕΙΝΑΙ το θέμα της σελίδας και όχι
   υποσημείωσή της. Το 1cm≈38px του Οδηγού είναι κατώφλι για την ταυτότητα και
   ταβάνι για τα υπόλοιπα λογότυπα — προς τα πάνω δεν υπάρχει όριο, και το
   .brand__logo (34px) μένει ούτως ή άλλως πιο κάτω.

   Η εικόνα μένει ΜΟΝΗ της μέσα στο πλαίσιο, με δική της γραμμή από κάτω: ο
   Οδηγός απαγορεύει τη ΣΥΓΧΩΝΕΥΣΗ με κείμενο ή άλλο γραφικό, όχι τη γειτνίαση —
   ακριβώς όπως κάνει και το footer. Το φόντο είναι λευκό (--bg) και όχι
   --bg-alt για τον ίδιο λόγο με τη .eubar: η επίσημη εικόνα κουβαλά το δικό της
   λευκό φόντο, που πάνω σε #F1F4FA θα φαινόταν λευκό ορθογώνιο γύρω από το
   έμβλημα. Και το line-height:0 στο <p> της εικόνας είναι το ίδιο κόλπο με τον
   .eubar__link: αλλιώς η γραμμή βάσης του inline <img> αφήνει κενό από κάτω. */
.eupanel{border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);padding:clamp(18px,3vw,34px)}
.eupanel__id{margin:0 0 20px;padding-bottom:20px;border-bottom:1px solid var(--line);line-height:0}
.eupanel__id img{display:block;height:64px;width:auto}
.eupanel__say{margin:0;color:var(--muted);font-size:.955rem}

/* Η ταυτότητα ΔΕΝ γίνεται clamp() — δεν είναι ρυθμός, είναι όριο. Κατεβαίνει σε
   δύο σκαλοπάτια, και τα δύο πάνω από το 1cm, ώστε τα 881×150 της ελληνικής
   εκδοχής να χωράνε ΜΕΣΑ στο πλαίσιο ακόμη και σε οθόνη 320px: στα 44px το
   πλάτος βγαίνει 258px, στα 40px 235px, και το πλαίσιο αφήνει 244px. */
@media (max-width:520px){.eupanel__id img{height:44px}}
@media (max-width:360px){.eupanel__id img{height:40px}}