/* Ailyser /νέο — timeline.css (W-TIMELINE-UI, 30/09). Ίδιοι tokens με app.css (--accent, --agree,
 * --muted, --ink, --ink-2, --rule, --rule-2, --card, --card-2, --paper, --scrim, --shadow, --r, --r-s,
 * --gutter) — καμία δική της παλέτα, ΙΔΙΟ πνεύμα με atzenta.css/faseis.css. Σύμβολο: κλειστό=--agree
 * (ίδιο χρώμα με «πέρασε» στο .στάδια), ανοιχτό/τρέχον=--accent, εκκρεμές=--muted. */

/* όταν το /timeline απαντά 200, το body παίρνει αυτή την κλάση — κρύβει τη σημερινή διαδρομή ΜΕ
   !important, ανεξάρτητα από το πότε/πώς το app.js αλλάζει το δικό του hidden (βλ. σχόλιο timeline.js
   §ΠΩΣ ΚΡΥΒΕΤΑΙ). */
body.χγ-ενεργό #στάδια,body.χγ-ενεργό #απλήΚουβέντα{display:none!important}

/* ── ① η ράγα — ζει ΣΤΗ ΘΕΣΗ του #στάδια (ίδιο grid cell row2/col1 μέσα στο .κύριο, insertBefore στο
   timeline.js) — άμεσο παιδί του .κύριο ώστε το grid-row/column εδώ να ισχύει. ── */
#χγΜπάρα{grid-row:2;grid-column:1;min-width:0;display:flex;align-items:center;gap:8px;padding:10px var(--gutter,24px);border-bottom:1px solid var(--rule,#E1E6EB);background:var(--card-2,#F8FAFB);overflow:hidden}
.χγ-ράγα-περιτύλιγμα{flex:1;min-width:0;overflow:hidden}
/* Το scroll clipping (overflow-x:auto) ζει ΕΔΩ, σε στοιχείο ΧΩΡΙΣ display:flex — τα ίδια τα κουμπιά
   ζουν σε ξεχωριστό εσωτερικό flex row (.χγ-ράγα-σειρά, βλ. timeline.js §χγΑρχικοποίησε). Ένα ΜΟΝΟ
   στοιχείο με overflow-x:auto ΚΑΙ display:flex ταυτόχρονα αφήνει το scrollable περιεχόμενό του να
   μετράει μέσα στο document.documentElement.scrollWidth σε Chromium (μετρημένο: ~1700px «φάντασμα»
   πλάτος σε οθόνη 390px, ΧΩΡΙΣ αυτόν τον διαχωρισμό — γνωστή παγίδα flex+overflow-x:auto στο ίδιο
   στοιχείο, σπρώχνει τη σελίδα ακόμα κι όταν η ράγα φαίνεται σωστά κομμένη οπτικά). */
.χγ-ράγα{overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth;padding:2px 0}
.χγ-ράγα::-webkit-scrollbar{display:none}
.χγ-ράγα-σειρά{display:flex;align-items:center;gap:0;width:max-content}
.χγ-γύρος{flex:none;display:flex;align-items:center;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted,#66727E);white-space:nowrap;padding:0 10px}
.χγ-γύρος::before{content:"";width:1px;align-self:stretch;background:var(--rule,#E1E6EB);margin-right:10px}
.χγ-ορόσημο{flex:none;display:flex;align-items:center;gap:6px;border:0;background:transparent;padding:4px 8px;border-radius:999px;font-size:13px;color:var(--muted,#66727E);white-space:nowrap;cursor:pointer}
.χγ-ορόσημο:hover{background:var(--rule-2,#EEF1F4)}
.χγ-ορόσημο:not(:last-child)::after{content:"";width:16px;height:2px;margin-left:6px;border-radius:2px;background:var(--rule,#E1E6EB);flex:none}
.χγ-σύμβολο{width:16px;height:16px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:none;font-size:9px;line-height:1;border:2px solid var(--rule,#E1E6EB);color:transparent}
.χγ-κλειστό .χγ-σύμβολο{background:var(--agree,#126B4D);border-color:var(--agree,#126B4D);color:var(--on-solid,#fff)}
.χγ-ανοιχτό .χγ-σύμβολο{border-color:var(--accent,#2C5C86);color:var(--accent,#2C5C86);box-shadow:0 0 0 3px var(--accent-soft,#E4EEF7)}
.χγ-ανοιχτό,.χγ-ανοιχτό.χγ-τρέχον{color:var(--ink,#1B2430);font-weight:700}
.χγ-εκκρεμές .χγ-σύμβολο{color:var(--muted,#66727E)}
.χγ-τρέχον{background:var(--accent-soft,#E4EEF7)}
.χγ-όλα{flex:none;margin-top:0}

/* ── ② σκιά + φύλλο, κοινό σχήμα για κάρτα ορόσημου/συρτάρι «Όλα» — κάτω φύλλο σε κινητό, μικρό πάνελ
   πάνω-δεξιά σε πλατιά οθόνη (ΔΙΚΕΣ μας κλάσεις, ΔΕΝ αγγίζουν το .σκιά/.συρτάρι του app.css). ── */
.χγ-σκιά{position:fixed;inset:0;background:var(--scrim,rgba(20,28,36,.38));z-index:45;display:flex;align-items:flex-end;justify-content:center}
.χγ-φύλλο{position:relative;width:100%;max-width:480px;max-height:min(80vh,640px);background:var(--card,#fff);border:1px solid var(--rule,#E1E6EB);border-radius:16px 16px 0 0;box-shadow:var(--shadow,0 12px 32px rgba(20,28,36,.14));display:flex;flex-direction:column;overflow:hidden}
.χγ-φύλλο-κεφ{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 16px;border-bottom:1px solid var(--rule-2,#EEF1F4);flex:none}
.χγ-φύλλο-κεφ h3{margin:0;font-size:15px;font-weight:700;color:var(--ink,#1B2430)}
.χγ-φύλλο-σώμα{flex:1;min-height:0;overflow-y:auto;padding:14px 16px 20px}
.χγ-κάρτα-γραμμή{display:flex;gap:8px;font-size:13.5px;padding:5px 0}
.χγ-κάρτα-ετ{flex:none;color:var(--muted,#66727E);min-width:150px}
.χγ-κάρτα-τιμή{color:var(--ink-2,#3B4753);min-width:0;overflow-wrap:anywhere}
.χγ-κάρτα-σύνδεσμοι{display:flex;flex-wrap:wrap;gap:6px}
.χγ-κάρτα-σύνδεσμοι a,.χγ-κάρτα-σύνδεσμοι button,.χγ-ετικέτα-π{font:inherit;font-size:12.5px;color:var(--accent,#2C5C86);text-decoration:none;border:1px solid var(--accent-line,#B9D0E5);background:var(--accent-soft,#E4EEF7);border-radius:999px;padding:3px 10px;cursor:pointer}
.χγ-ετικέτα-π{color:var(--ink-2,#3B4753);border-color:var(--rule,#E1E6EB);background:var(--rule-2,#EEF1F4);cursor:default}
.χγ-κάρτα-κενό{color:var(--muted,#66727E);font-size:13.5px;margin:0}

/* ③ συρτάρι «Όλα» — λίστα ΟΛΩΝ των οροσήμων, όλων των γύρων, ΙΔΙΟ σύμβολο/χρώμα με τη ράγα. */
.χγ-όλα-λίστα{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.χγ-όλα-γύρος-τίτλος{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted,#66727E);padding:10px 4px 4px;border-top:1px solid var(--rule-2,#EEF1F4);margin-top:4px}
.χγ-όλα-λίστα>li:first-child.χγ-όλα-γύρος-τίτλος{border-top:0;margin-top:0}
.χγ-όλα-λίστα .χγ-ορόσημο{width:100%;justify-content:flex-start;padding:8px 6px;border-radius:8px;font-size:13.5px}
.χγ-όλα-λίστα .χγ-ορόσημο:not(:last-child)::after{content:none}

@media (min-width:768px){
  .χγ-σκιά{align-items:flex-start;justify-content:flex-end;padding:64px 24px 24px 0;background:transparent}
  .χγ-φύλλο{width:380px;border-radius:var(--r,10px)}
}
@media (max-width:767px){
  #χγΜπάρα{padding:8px var(--gutter,16px)}
  .χγ-όνομα{font-size:12px}
  .χγ-ορόσημο:not(:last-child)::after{width:10px;margin-left:5px}
  .χγ-ράγα-περιτύλιγμα{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent)}
}