/* Avui (views/today.js + ui/ring.js). DESIGN §2: the wheel is the one loud thing; the rest stays quiet. */

/* ---------- header ---------- */
.today-head { display: grid; gap: 0; container: today-head / inline-size; }
.today-date-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: var(--s-3); min-height: 36px; }
.today-date { color: var(--text-2); font-size: var(--fs-sm); }
.today-back { flex: none; }
.today-back[hidden] { display: inline-flex; visibility: hidden; }   /* keeps its room: nothing jumps while she drags */
/* large text: date and button no longer share a line, so the hidden button gives its room back to the date */
@container today-head (width < 19rem) {
  .today-back[hidden] { display: none; }
}
/* headings get focus from the router (tabIndex −1) for VoiceOver; they are not controls, no ring */
.today-day:focus, .today-empty-title:focus { outline: none; }
.today-day {
  font-size: var(--fs-3xl); margin-top: var(--s-1); font-variant-numeric: tabular-nums;
  /* same box for «Dia 20» and «Dia 3 de regla»: the wheel must not move while she drags */
  min-height: calc(var(--fs-3xl) * .92); display: flex; align-items: flex-end;
}
.today-day.is-long { font-size: clamp(var(--fs-lg), 8vw, var(--fs-2xl)); line-height: 1; text-wrap: balance; }
.today-phase-row { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--s-3); }
.today-phase {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 650;
  color: var(--p-ink);
}
.today-phase::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--p); }
.today-flags { color: var(--text-2); font-size: var(--fs-sm); }
.today-flags:empty { display: none; }

/* ---------- the wheel ---------- */
.wheel-wrap { width: clamp(220px, min(44dvh, 100dvh - 23rem), min(100%, 400px)); margin: calc(-1 * var(--s-2)) auto 0; border-radius: 50%; }   /* grows with height, shrinks with Dynamic Type, never below 220px (A1) */
.wheel-wrap:has(.ring-range:focus-visible) { outline: 3px solid var(--ovulation); outline-offset: 2px; }
.ring-wrap { position: relative; }
.ring { width: 100%; height: auto; display: block; overflow: visible; cursor: pointer; -webkit-user-select: none; user-select: none; }
.ring.is-dragging { cursor: grabbing; }

.ring-hit { fill: none; stroke: transparent; pointer-events: none; }
.ring-dot.is-predicted { stroke-dasharray: 3 2.6; }
.ring-mark { fill: var(--text-3); }
.ring-halo { fill: color-mix(in oklab, var(--halo, var(--ink)) 30%, transparent); }
.ring-thumb { fill: none; stroke: var(--ink); stroke-width: 2.5; pointer-events: none; }
.ring-band { fill: none; stroke-linecap: round; pointer-events: none; }
.ring-band.is-fertile { stroke: var(--fertile); stroke-width: 3; }
.ring-band.is-pms { stroke: var(--pms); stroke-width: 5; stroke-dasharray: .1 8; }

/* riso overprint: inks multiply on paper, add light on the night paper */
.riso { mix-blend-mode: multiply; }
@media (prefers-color-scheme: dark) { .riso { mix-blend-mode: screen; } }

/* drawn once, when the screen opens: the dots go round like a pen (DESIGN §2, principle 3) */
.ring-animate .ring-dot {
  transform-box: fill-box; transform-origin: center;
  animation: ring-dot-in 200ms var(--ease-out) both;
  animation-delay: calc(var(--i) * 220ms / var(--n));
}
.ring-animate .ring-band, .ring-animate .ring-mark, .ring-animate .ring-halo { animation: ring-fade-in 180ms 240ms both; }
@keyframes ring-dot-in { from { opacity: 0; transform: scale(.3); } }
@keyframes ring-fade-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .ring-animate .ring-dot, .ring-animate .ring-band, .ring-animate .ring-mark, .ring-animate .ring-halo { animation: none; }
}

/* short screens (iPhone SE): a smaller number and wheel, so the forecast stays above the button */
@media (max-height: 700px) {
  .today-day { font-size: calc(var(--fs-3xl) * .8); min-height: calc(var(--fs-3xl) * .8 * .92); }
  .wheel-wrap { width: clamp(220px, min(44dvh, 100dvh - 24rem), min(100%, 400px)); }
}

/* ---------- next period ---------- */
.today-next { display: grid; gap: 2px; margin-top: calc(-1 * var(--s-2)); }
.today-next-main { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; text-wrap: balance; }
.today-range { color: var(--text-2); text-wrap: balance; }
.today-fertile {
  display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-1);
  color: var(--ovulation-ink); font-size: var(--fs-sm); font-weight: 600;
}
.today-fertile::before { content: ""; flex: none; width: 16px; height: 4px; border-radius: 2px; background: var(--fertile); }   /* the arc of the wheel */

/* ---------- main action: always above the tab bar (IOS-REVIEW A1) ---------- */
.today-cta {
  position: sticky; z-index: 5;
  /* --today-tabbar = the measured bar (it grows with Dynamic Type); the token is the fallback */
  bottom: calc(var(--today-tabbar, calc(env(safe-area-inset-bottom) + var(--tabbar-h))) + var(--s-3));
  margin-top: calc(-1 * var(--s-4));
  padding-top: var(--s-4);
  background: linear-gradient(to bottom, transparent, var(--bg) var(--s-4));
}
.today-cta::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: var(--s-3); background: var(--bg); }

/* ---------- what she logged (read only) ---------- */
.today-logged { display: grid; gap: var(--s-2); }
.today-logged .section-title { font-size: var(--fs-md); }
.today-logged-btn {
  appearance: none; border: 0; cursor: pointer; width: 100%;
  display: flex; align-items: center; gap: var(--s-3);
  min-height: 56px; padding: var(--s-3) var(--s-3) var(--s-3) var(--s-4);
  border-radius: var(--r-lg); background: var(--surface-2);
  color: var(--ink); text-align: left;
  transition: transform var(--t-fast) var(--ease);
}
.today-logged-btn:active { transform: scale(.98); }
.today-logged-chev { flex: none; display: inline-flex; color: var(--text-3); margin-left: auto; }
.today-logged-empty { color: var(--text-2); }
.today-logged-slot, .today-logged { min-width: 0; }
.today-pills { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.today-pill {
  display: inline-flex; flex-wrap: wrap; align-items: center; column-gap: 6px; max-width: 100%;   /* very large text: a pill wraps inside, never widens the page */
  min-height: 1.9em; padding: 0 .75em;
  border-radius: var(--r-pill);
  background: var(--bg);
  box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--ink) 16%, transparent);
  font-size: var(--fs-sm); font-weight: 550; line-height: 1.1;
}
.today-pill.is-period { background: var(--menstrual-soft); box-shadow: inset 0 0 0 1.5px var(--menstrual); color: var(--menstrual-ink); }
.today-pill.is-more { background: none; box-shadow: none; color: var(--text-2); padding: 0 var(--s-1); }
.today-pill-cat { color: var(--text-2); font-weight: 500; }
.today-pill.is-period .today-pill-cat { color: inherit; }
.today-pill-glyph { display: inline-flex; color: var(--menstrual); }
.today-pill-ink { display: inline-flex; gap: 2px; align-items: flex-end; height: 11px; }
.today-pill-ink i { width: 3px; border-radius: 2px; background: currentColor; opacity: .25; }
.today-pill-ink i:nth-child(1) { height: 4px; }
.today-pill-ink i:nth-child(2) { height: 7px; }
.today-pill-ink i:nth-child(3) { height: 10px; }
.today-pill-ink i:nth-child(4) { height: 11px; }
.today-pill-ink i.on { opacity: 1; }

/* ---------- phase card ---------- */
.today-phase-card { gap: var(--s-2); }
.today-phase-card > h3 { margin-bottom: var(--s-1); }
.today-fold { border-top: 1px solid color-mix(in oklab, var(--tone, var(--ink)) 22%, transparent); }
.today-fold:first-of-type { margin-top: var(--s-2); }
.today-fold > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  min-height: 44px; font-weight: 650; color: var(--tone-ink, var(--ink));
}
.today-fold > summary::-webkit-details-marker { display: none; }
.today-fold-chev { display: inline-flex; transition: transform var(--t-fast) var(--ease-out); }
.today-fold[open] .today-fold-chev { transform: rotate(90deg); }
.today-fold-body { display: grid; gap: var(--s-3); padding-bottom: var(--s-3); }
.today-fold-body ul { margin: 0; padding-left: 1.1em; display: grid; gap: var(--s-2); }
.today-fold-body li::marker { color: var(--tone, var(--ink)); }

/* ---------- empty state ---------- */
.today-empty-title { margin-top: var(--s-2); }
.today-empty { display: grid; justify-items: start; gap: var(--s-4); color: var(--text-2); max-width: 34ch; }
.today-empty .mascot { margin-left: calc(-1 * var(--s-2)); }