/* Ailyser /νέο — «Χωνί προόδου» (W-XONI-FABLE, mm Λ498, 01/10). ΜΟΝΟ ΠΡΟΤΑΣΗ ΑΠΕΙΚΟΝΙΣΗΣ —
 * αυτοτελές: xoni.js + xoni.css, ΔΕΝ συνδέεται ακόμη στην οθόνη Υλοποίησης.
 * Brief: ΤΑΜΠΛΟ/ΑΝΑΘΕΣΕΙΣ/2026-10-01_xoni-fable-brief.md
 *
 * ΣΧΕΔΙΟ: 4 ΙΣΕΣ τροχιές (ίδιο σύνολο M ➜ ίδια κλίμακα, τίμια σύγκριση) που γεμίζουν από αριστερά·
 * ανάμεσά τους μια λοξή «σύνδεση» από το γέμισμα της μιας στο γέμισμα της επόμενης — έτσι η
 * σιλουέτα των γεμισμάτων ΕΙΝΑΙ το χωνί (Παραδόθηκε ≥ Εγκρίθηκε ≥ Στο main ≥ Live), όπως στα
 * funnel charts, χωρίς παραμόρφωση κλίμακας. Δεξιά ένας δακτύλιος «Σύνολο» που γεμίζει.
 * Χρώματα ΜΟΝΟ από τα tokens του app.css (με εφεδρικές τιμές αν φορτωθεί μόνο του) — ανοιχτό/σκούρο
 * θέμα αυτόματα. Η κίνηση είναι CSS transition (πλάτος, clip-path, stroke-dashoffset) + μέτρημα
 * αριθμών στο xoni.js· @prefers-reduced-motion το app.css κόβει ήδη κάθε transition. */

.χωνί{
  --χ-ύψος:22px; --χ-σύνδεση:9px; --χ-δακτ:104px; --χ-καμπύλη:cubic-bezier(.2,.7,.2,1); --χ-χρόνος:.7s;
  display:flex;align-items:center;gap:26px;min-width:0;
  font:13px/1.35 var(--sans,"Segoe UI",system-ui,sans-serif);color:var(--ink,#1B2430);
  font-variant-numeric:tabular-nums;
}

/* ── οι 4 μπάρες: grid [τροχιά | μετα], με τη λοξή σύνδεση ανάμεσα στις γραμμές ── */
.χωνί-μπάρες{flex:1 1 auto;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:center}
.χωνί-τροχιά{grid-column:1;position:relative;height:var(--χ-ύψος);border-radius:6px;background:var(--rule-2,#EEF1F4);overflow:hidden}
.χωνί-γέμισμα{position:absolute;top:0;bottom:0;left:0;width:0%;border-radius:6px;background:var(--χ-χρώμα,var(--accent,#2C5C86));transition:width var(--χ-χρόνος) var(--χ-καμπύλη)}
/* κάθε στάδιο λίγο βαθύτερο από το προηγούμενο — προς το «Live», τον στόχο */
.χωνί-τροχιά[data-θέση="0"]{--χ-χρώμα:color-mix(in srgb,var(--accent,#2C5C86) 58%,var(--accent-soft,#E4EEF7))}
.χωνί-τροχιά[data-θέση="1"]{--χ-χρώμα:color-mix(in srgb,var(--accent,#2C5C86) 74%,var(--accent-soft,#E4EEF7))}
.χωνί-τροχιά[data-θέση="2"]{--χ-χρώμα:color-mix(in srgb,var(--accent,#2C5C86) 90%,var(--accent-soft,#E4EEF7))}
.χωνί-τροχιά[data-θέση="3"]{--χ-χρώμα:var(--accent,#2C5C86)}
/* null (π.χ. Live που δεν μετριέται ακόμη): κενή, διακεκομμένη τροχιά — ΟΧΙ μόνο χρώμα, και σχήμα */
.χωνί-τροχιά.κενή{background:transparent;border:1px dashed var(--rule,#E1E6EB)}
.χωνί-τροχιά.κενή .χωνί-γέμισμα{width:0!important}
/* η λοξή σύνδεση: από --α (γέμισμα πάνω) σε --β (γέμισμα κάτω) */
.χωνί-σύνδεση{grid-column:1;height:var(--χ-σύνδεση);background:color-mix(in srgb,var(--accent,#2C5C86) 26%,transparent);
  clip-path:polygon(0 0,var(--α,0%) 0,var(--β,0%) 100%,0 100%);transition:clip-path var(--χ-χρόνος) var(--χ-καμπύλη)}
.χωνί-σύνδεση.κενή{visibility:hidden}

/* μετα: ετικέτα + N/M + % στην ίδια γραμμή (σε πλατιά οθόνη) */
.χωνί-μετα{grid-column:2;display:flex;align-items:baseline;gap:8px;white-space:nowrap;min-width:150px}
.χωνί-ετικέτα{font-weight:600;color:var(--ink-2,#3B4753);flex:1 1 auto}
.χωνί-τιμή{display:inline-flex;align-items:baseline;gap:6px}
.χωνί-κλάσμα{font-weight:700;color:var(--ink,#1B2430)}
.χωνί-ποσοστό{font-size:12px;color:var(--muted,#66727E);min-width:3ch;text-align:right}
.χωνί-μετα.κενή .χωνί-ετικέτα{color:var(--muted,#66727E)}
.χωνί-μετα.κενή .χωνί-κλάσμα{color:var(--muted,#66727E);font-weight:600}

/* ── σύνολο: δακτύλιος που γεμίζει ── */
.χωνί-σύνολο{flex:none;display:flex;flex-direction:column;align-items:center;gap:4px;width:var(--χ-δακτ)}
.χωνί-δακτύλιος-κουτί{position:relative;width:var(--χ-δακτ);height:var(--χ-δακτ)}
.χωνί-δακτύλιος{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.χωνί-δ-τροχιά{fill:none;stroke:var(--rule-2,#EEF1F4);stroke-width:4.5}
.χωνί-δ-γέμισμα{fill:none;stroke:var(--agree,#126B4D);stroke-width:4.5;stroke-linecap:round;
  stroke-dasharray:119.38;stroke-dashoffset:119.38;transition:stroke-dashoffset var(--χ-χρόνος) var(--χ-καμπύλη)}
.χωνί-σύνολο-νούμερο{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:calc(var(--χ-δακτ) * .23);font-weight:800;letter-spacing:-.02em;color:var(--ink,#1B2430)}
.χωνί-σύνολο.κενή .χωνί-σύνολο-νούμερο{color:var(--muted,#66727E)}
.χωνί-σύνολο.πλήρες .χωνί-σύνολο-νούμερο{color:var(--agree,#126B4D)}
.χωνί-σύνολο-ετ{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted,#66727E)}

/* ── κινητό (390): ο δακτύλιος πάνω, μικρότερος, με την ετικέτα δίπλα του· τα μετα σε 2 γραμμές
   ώστε η τροχιά να κρατά πλάτος ── */
@media (max-width:767px){
  .χωνί{flex-direction:column;align-items:stretch;gap:14px;--χ-ύψος:26px;--χ-δακτ:64px}
  .χωνί-σύνολο{order:-1;flex-direction:row;width:auto;gap:12px}
  .χωνί-σύνολο-ετ{font-size:12px}
  .χωνί-μετα{flex-direction:column;align-items:flex-start;gap:0;min-width:96px;line-height:1.2}
  .χωνί-ετικέτα{font-size:12.5px}
  .χωνί-τιμή{gap:5px}
  .χωνί-ποσοστό{text-align:left;min-width:0}
}