/* trochos-kylisi.css — βιβλιοθήκη #31. Φορτώνει μετά το CSS του ιστότοπου· τα ειδικά του ιστότοπου
   (π.χ. σβήσιμο παλιών ατέρμονων κινήσεων του δακτυλίου) μπαίνουν στο δικό του αρχείο, κάτω από html.tk-on. */

/* τα μέρη του τροχού: μόνο το σενάριο τα κινεί */
html.tk-on [data-trochos] [data-tk-meros] {
    animation: none !important;
    transition: none !important;
    transform-origin: 50% 50%;
    will-change: transform;
}

/* πριν τρέξει το σενάριο: έξω από το κάδρο — μόνο αν η κλάση μπήκε από τη <head>·
   αν το σενάριο δεν φορτώσει, ο τροχός επιστρέφει μόνος του σε 2,5 s (ΜΗ-01) */
html.tk-pre [data-trochos] [data-tk-meros] {
    transform: translateX(-300vw);
    animation: tkFail 0s 2.5s forwards !important;
}
@keyframes tkFail { to { transform: none; } }

/* σύρσιμο: οριζόντιο· η κατακόρυφη κύλιση της σελίδας μένει ελεύθερη στην αφή */
[data-trochos].tk-syrsimo { cursor: grab; touch-action: pan-y; }
[data-trochos].tk-syrsimo.is-grab { cursor: grabbing; }

/* σήμα έγκρισης στο πλευρικό τοίχωμα */
.tk-sima { opacity: 0; }
.tk-sima.is-on { opacity: 1; }
.tk-sima-in { transform-box: fill-box; transform-origin: center; }
.tk-sima-c { fill: rgba(56,161,105,.14); stroke: var(--tk-sima, #48bb78); stroke-width: 1.8; }
.tk-sima-t { font-family: var(--tk-sima-font, 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif); font-size-adjust: cap-height 0.66; font-weight: 700;  /* μέγεθος: μονάδες viewBox */
             letter-spacing: .6px; fill: var(--tk-sima, #48bb78); }

/* ενδείξεις τεχνικού σχεδίου κάτω από τον τροχό (υπολογιστής) */
.tk-endeixeis {
    position: absolute; left: 50%; top: var(--tk-endeixeis-top, calc(100% + 8px));
    transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    font: 500 12px/1.5 var(--tk-mono, 'IBM Plex Mono', ui-monospace, monospace);
    letter-spacing: .6px; white-space: nowrap;
    color: var(--tk-endeixeis-1, rgba(255,255,255,.58));
    pointer-events: none;
    visibility: hidden;                                   /* όχι opacity:0 (ΜΗ-03) */
}
.tk-endeixeis.is-on { visibility: visible; }
.tk-endeixeis .tk-e2 { color: var(--tk-endeixeis-2, rgba(255,255,255,.78)); }
.tk-endeixeis .tk-e3 { color: var(--tk-sima, #48bb78); }
@media (max-width: 768px) { .tk-endeixeis { display: none; } }