/* =============================================================================
   Екран циклу
   ============================================================================= */

/* ── Поточний день і фаза ──────────────────────────────────────────────── */

.cyc-hero {
  display: flex;
  align-items: center;
  gap: 18px;
  background: linear-gradient(150deg, var(--pink-soft) 0%, var(--lilac-soft) 100%);
  border-radius: var(--radius-card);
  padding: 20px 22px;
  box-shadow: var(--shadow-card);
}

.cyc-hero__day { text-align: center; flex-shrink: 0; }

.cyc-hero__num {
  display: block;
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
}

.cyc-hero__label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 4px;
}

.cyc-hero__phase { border-left: 1px solid var(--hairline); padding-left: 18px; }

.cyc-hero__phase-name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--size-lg);
  margin: 0 0 3px;
}

.cyc-hero__phase-hint {
  font-size: var(--size-xs);
  color: var(--ink-muted);
  line-height: 1.4;
  margin: 0;
}

/* ── Прогноз ───────────────────────────────────────────────────────────── */

.predict {
  background: var(--surface);
  border-radius: var(--radius-card);
  padding: 16px 18px;
  margin-top: var(--gap);
  box-shadow: var(--shadow-card);
}

.predict__text { font-size: var(--size-sm); margin: 0 0 10px; line-height: 1.45; }

.predict__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: var(--ink-muted);
}

.predict__bar {
  flex: 1;
  height: 4px;
  background: rgba(46, 40, 35, 0.08);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

/* Смужка впевненості міняє колір: низька впевненість не має
   виглядати так само переконливо, як висока */
.predict__fill {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: var(--radius-pill);
  transition: width 0.6s ease;
}
.predict__fill.is-low { background: var(--card-butter); }

/* ── Календар ──────────────────────────────────────────────────────────── */

.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 26px 0 10px;
}

.cal-title {
  font-family: var(--font-display);
  font-size: var(--size-lg);
  font-weight: 500;
  margin: 0;
  text-transform: capitalize;
}

.cal-nav {
  width: 34px; height: 34px;
  border: none;
  background: var(--surface);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-card);
  font-size: 18px;
  color: var(--ink-muted);
  cursor: pointer;
  line-height: 1;
}

.cal-week, .cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}

.cal-week {
  margin-bottom: 6px;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-align: center;
}

.day {
  aspect-ratio: 1;
  border: none;
  background: transparent;
  border-radius: 14px;
  font-family: inherit;
  font-size: var(--size-sm);
  color: var(--ink);
  cursor: pointer;
  position: relative;
  display: grid;
  place-items: center;
  transition: background 0.15s ease, transform 0.1s ease;
}

.day:active { transform: scale(0.92); }
.day.is-empty { visibility: hidden; }
.day.is-future { color: var(--ink-muted); opacity: 0.45; cursor: default; }

/* Факт: кровотеча була */
.day.has-flow { background: var(--card-pink); font-weight: 500; }

/* Прогноз: пунктир, бо це очікування, а не факт.
   Візуально відрізняти обов'язково — інакше жінка сприйме прогноз як дані. */
.day.is-predicted {
  border: 1.5px dashed var(--accent);
  color: var(--accent);
}

.day.is-fertile { background: var(--lilac-soft); }

.day.is-today {
  box-shadow: inset 0 0 0 2px var(--ink);
  font-weight: 500;
}

/* Крапка симптомів */
.day.has-symptom::after {
  content: '';
  position: absolute;
  bottom: 5px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--ink-muted);
}

/* ── Легенда і дисклеймер ──────────────────────────────────────────────── */

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
  font-size: 11px;
  color: var(--ink-muted);
}
.legend span { display: flex; align-items: center; gap: 5px; }

.sw { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.sw--flow      { background: var(--card-pink); }
.sw--predicted { border: 1.5px dashed var(--accent); }
.sw--fertile   { background: var(--lilac-soft); }
.sw--symptom   { background: var(--ink-muted); border-radius: 50%; width: 6px; height: 6px; }

.disclaimer {
  margin-top: 18px;
  padding: 14px 16px;
  background: var(--butter-soft);
  border-radius: var(--radius-inner);
  font-size: 11px;
  line-height: 1.5;
  color: var(--ink-muted);
}


/* ── Овуляція ──────────────────────────────────────────────────────────── */

.ovu {
  background: var(--lilac-soft);
  border-radius: var(--radius-card);
  padding: 16px 18px;
  margin-top: var(--gap);
  box-shadow: var(--shadow-card);
}

.ovu__head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ovu__dot {
  width: 30px; height: 30px; flex-shrink: 0;
  border-radius: var(--radius-pill);
  background: var(--surface);
  display: grid; place-items: center;
}
.ovu__title {
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-muted); margin: 0;
}

.ovu__day {
  font-family: var(--font-display); font-style: italic;
  font-size: var(--size-lg); margin: 0 0 4px;
}
.ovu__window { font-size: var(--size-xs); color: var(--ink-muted); margin: 0; line-height: 1.45; }
.ovu__note {
  font-size: 11px; color: var(--ink-muted); line-height: 1.5;
  margin: 10px 0 0; padding-top: 10px;
  border-top: 1px solid rgba(46,40,35,.08);
}

/* День овуляції — окреме кільце, щоб не плутати з фертильним вікном */
.day.is-ovu {
  background: var(--card-lilac);
  box-shadow: inset 0 0 0 2px var(--accent);
  font-weight: 500;
}

.sw--ovu { background: var(--card-lilac); box-shadow: inset 0 0 0 2px var(--accent); }