/* ============================================================
   RECOVERY CHECK — μόνο ο μηχανισμός του ερωτηματολογίου.

   Χρώμα, γραμματοσειρά, χώρος, κουμπιά, κάρτες, header και footer
   έρχονται αυτούσια από tokens.css / base.css / layout.css /
   components.css. Εδώ δεν ορίζεται ΚΑΜΙΑ τιμή χρώματος και καμία
   γραμματοσειρά — μόνο tokens. Αν αλλάξει το site, αλλάζει και αυτό.

   Κάθε class έχει πρόθεμα .check- ώστε να μη συγκρούεται με το
   υπόλοιπο site (το αρχικό αρχείο έβαφε .card, .opt, h2, button,
   ul, li και footer καθολικά — θα έσπαγε header και footer).
   ============================================================ */

/* ---------- Μπάρα προόδου ---------- */

.check-progress {
  block-size: 3px;
  background: var(--line);
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin-block: var(--space-m) var(--space-xl);
}
.check-progress__fill {
  display: block;
  block-size: 100%;
  inline-size: 0;
  background: var(--clay);
  transition: inline-size var(--dur-base) var(--ease-out);
}

/* ---------- Βήματα ---------- */

.check-step { display: none; }
.check-step.is-on {
  display: block;
  animation: check-step-in var(--dur-base) var(--ease-out) both;
}
@keyframes check-step-in {
  from { opacity: 0; transform: translate3d(0, 0.75rem, 0); }
  to   { opacity: 1; transform: none; }
}

/* Το <h2> της ερώτησης: μικρότερο από το καθολικό step-4 — εδώ είναι
   ερώτηση φόρμας, όχι τίτλος ενότητας. */
.check-step h2 {
  font-size: var(--step-3);
  margin-block-start: var(--space-2xs);
}
.check-step > .muted { margin-block-start: var(--space-2xs); }

/* ---------- Επιλογές ---------- */

.check-opts {
  display: grid;
  gap: var(--space-2xs);
  margin-block-start: var(--space-m);
}
.check-opts--two { grid-template-columns: 1fr 1fr; }

@media (max-width: 30rem) {
  .check-opts--two { grid-template-columns: 1fr; }
}

.check-opt {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-s);
  min-block-size: 3.25rem;          /* άνετος στόχος αφής */
  background: var(--surface);
  border: 2px solid var(--line-firm);   /* 3.2:1 — απαίτηση WCAG για όρια ελέγχου */
  border-radius: var(--radius);
  cursor: pointer;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}
.check-opt:hover { border-color: var(--ink-muted); }

/* Ο τόνος γράφεται ρητά και δεν βγαίνει από color-mix με το --paper:
   το λευκό είναι oklch(1 0 0), δηλαδή απόχρωση 0, οπότε η ανάμειξη
   τραβούσε το 42° της τερακότας στο ~2° — ροζ αντί για ζεστό. */
.check-opt.is-sel {
  border-color: var(--clay);
  background: oklch(0.962 0.022 42);
}

.check-opt__text { line-height: var(--leading-snug); }
.check-opt__text small {
  display: block;
  font-size: var(--step--1);
  color: var(--ink-muted);
  margin-block-start: var(--space-3xs);
}
.check-opt.is-sel .check-opt__text small { color: var(--ink); }

/* Το πραγματικό input μένει στη ροή και απλώς ξαναβάφεται: έτσι το
   πληκτρολόγιο, τα βελάκια στα radio και το focus ring δουλεύουν
   μόνα τους, χωρίς ούτε μία γραμμή JavaScript. */
.check-opt input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  inline-size: 1.375rem;
  block-size: 1.375rem;
  margin: 0.2rem 0 0;
  display: grid;
  place-items: center;
  background: var(--surface);
  border: 2px solid var(--line-firm);
  border-radius: var(--radius);
  cursor: pointer;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}
.check-opt input[type="radio"] { border-radius: 50%; }
.check-opt input:checked { border-color: var(--clay); background: var(--clay); }

/* Το τικ και η κουκκίδα σχεδιάζονται με CSS. Κανένα γλυφικό, καμία
   εξάρτηση από γραμματοσειρά — το ✓ λείπει από πολλές. */
.check-opt input[type="checkbox"]:checked::after {
  content: "";
  inline-size: 0.3rem;
  block-size: 0.6rem;
  border: solid var(--ink-invert);
  border-width: 0 2px 2px 0;
  transform: translateY(-0.08rem) rotate(45deg);
}
.check-opt input[type="radio"]:checked::after {
  content: "";
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: 50%;
  background: var(--ink-invert);
}

/* ---------- Ένταση (slider) ---------- */

.check-slider {
  margin-block-start: var(--space-m);
  padding: var(--space-m);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.check-value {
  font-family: var(--font-display);
  font-size: var(--step-6);
  font-weight: 600;
  line-height: 1;
  text-align: center;
  color: var(--clay-deep);
  font-variant-numeric: tabular-nums;
}
.check-valuelabel {
  text-align: center;
  color: var(--ink-muted);
  font-size: var(--step--1);
  min-block-size: 3em;             /* δεν αναπηδά το layout όταν αλλάζει η ετικέτα */
  margin-block-start: var(--space-2xs);
  max-width: none;
}

.check-range {
  inline-size: 100%;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
  margin-block: var(--space-s) 0;
}
.check-range::-webkit-slider-runnable-track {
  block-size: 4px;
  background: var(--line);
  border-radius: var(--radius-pill);
}
.check-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  border-radius: 50%;
  background: var(--clay);
  border: 2px solid var(--paper);
  margin-block-start: -0.75rem;
}
.check-range::-moz-range-track {
  block-size: 4px;
  background: var(--line);
  border-radius: var(--radius-pill);
}
.check-range::-moz-range-thumb {
  inline-size: 1.75rem;
  block-size: 1.75rem;
  border: 2px solid var(--paper);
  border-radius: 50%;
  background: var(--clay);
}
.check-range:focus-visible { outline: 3px solid var(--clay); outline-offset: 4px; }

.check-ends {
  display: flex;
  justify-content: space-between;
  gap: var(--space-s);
  margin-block-start: var(--space-2xs);
  font-size: var(--step--1);
  color: var(--ink-muted);
}

/* ---------- Πλοήγηση βημάτων ---------- */

.check-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  margin-block-start: var(--space-l);
}
.check-nav .btn { justify-content: center; }
.check-nav .btn--accent { flex: 1 1 12rem; }

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.btn:disabled:hover { transform: none; }

/* ---------- Αποτέλεσμα ---------- */

.check-result { display: grid; gap: var(--space-m); }

/* Η .card του site ζητά block-size: 100% για ίσο ύψος μέσα σε grid.
   Εδώ οι κάρτες είναι στοιβαγμένες, οπότε παίρνει η καθεμιά το ύψος της. */
.check-result .card { block-size: auto; gap: var(--space-s); }

/* Γραμμένα ως .card .x και όχι .x: το components.css ορίζει ήδη
   `.card p { font-size: var(--step-0); color: var(--ink-muted) }`, που έχει
   μεγαλύτερη ειδικότητα από μία σκέτη class και τα κατάπινε και τα δύο. */
.card .check-big {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
}

/* Φόντο --clay-deep και όχι --clay: η ετικέτα είναι σε step--1, δηλαδή πολύ
   μικρό κείμενο, και το --clay δίνει μόλις 4.57:1 ακόμη και με καθαρό λευκό.
   Με το --clay-deep βγαίνει 8.71:1, και ταυτόχρονα ξεχωρίζει από τα
   κουμπιά .btn--accent: δεν πατιέται, δεν πρέπει να μοιάζει με κουμπί. */
.card .check-plan {
  align-self: start;
  background: var(--clay-deep);
  color: var(--ink-invert);
  font-weight: 600;
  font-size: var(--step--1);
  line-height: var(--leading-snug);
  padding: var(--space-3xs) var(--space-s);
  border-radius: var(--radius-pill);
}

/* Ίδιος λόγος: η ετικέτα της κάρτας είναι <p class="eyebrow">. */
.check-result .card .eyebrow { font-size: var(--step--1); }

.check-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-xs);
}
.check-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  color: var(--ink-muted);
  max-width: none;
}
.check-list li::before {
  content: "";
  flex: none;
  inline-size: 0.375rem;
  block-size: 0.375rem;
  border-radius: 50%;
  background: var(--clay);
  margin-block-start: 0.6em;
}

/* Προσοχή — ίδιο βάρος με τη .note του site, σε μορφή κάρτας. */
.check-card--warn {
  border-inline-start: 3px solid var(--clay);
  background: oklch(0.976 0.014 42);
}

/* Stop — δεν υπάρχει κόκκινο στην παλέτα και δεν προστίθεται εδώ.
   Η αναστροφή σε σκούρο φόντο είναι το δυνατότερο σήμα που έχει ήδη
   το site, και το χρησιμοποιεί για τα ίδια «σταμάτα και διάβασε». */
.check-card--stop {
  background: var(--deep);
  border-color: var(--deep);
  color: var(--ink-invert);
}
.check-card--stop .eyebrow { color: var(--ink-invert-muted); }
.check-card--stop .eyebrow::before { background: var(--clay-lift); }
.check-card--stop .check-big { color: var(--ink-invert); }
.check-card--stop p,
.check-card--stop .check-list li { color: var(--ink-invert-muted); }
.check-card--stop .check-list li::before { background: var(--clay-lift); }

/* ---------- Κουμπιά δράσης στο τέλος ---------- */

.check-cta {
  display: grid;
  gap: var(--space-xs);
  margin-block-start: var(--space-m);
}
.check-cta .btn { justify-content: center; }

.check-restart {
  justify-self: center;
  margin-block-start: var(--space-m);
  background: none;
  border: none;
  padding: var(--space-2xs);
  color: var(--ink-muted);
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.22em;
  cursor: pointer;
}
.check-restart:hover { color: var(--ink); }

.check-disclaimer { margin-block-start: var(--space-l); }