/* Streak card of Avui (features/streak-card.js) and Lluna Wrapped (views/wrapped.js). DESIGN v2 «Riso de butxaca». */

/* ================================================================ streak card */
.streak-card { position: relative; gap: var(--s-2); }
.streak-card > h3, .streak-count, .streak-status.is-fresh { padding-right: 76px; }   /* room for the moon */
.streak-main { display: grid; }
.streak-text { min-width: 0; display: grid; gap: var(--s-2); }
/* the moon sits by the title, in the corner of the band */
.streak-moon { position: absolute; top: var(--s-3); right: var(--s-3); }
.streak-moon .mascot { display: block; }
.streak-count { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--s-2); }
.streak-n { font-size: var(--fs-2xl); color: var(--ink); font-variant-numeric: tabular-nums; }
.streak-unit { font-weight: 600; color: var(--text-2); }
.streak-status { text-wrap: pretty; }
.streak-goal { display: grid; gap: var(--s-1); margin-top: var(--s-1); }
.streak-bar {
  height: 8px; border-radius: var(--r-pill); overflow: hidden;
  background: color-mix(in oklab, var(--ink) 10%, transparent);
}
.streak-bar-fill {
  display: block; height: 100%; min-width: 8px; border-radius: inherit;
  width: calc(var(--ratio, 0) * 100%);
  background: var(--follicular);
  box-shadow: 2px 1px 0 color-mix(in oklab, var(--accent) 55%, transparent);   /* the second pass, off register */
}
.streak-next { font-size: var(--fs-sm); color: var(--text-2); }
.streak-freezes { display: flex; align-items: baseline; gap: var(--s-2); }
.streak-freeze-dots { translate: 0 1px; }
.streak-freeze-dots { flex: none; display: inline-flex; gap: 4px; }
.streak-freeze-dots i { width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ovulation); }
.streak-freeze-dots i.on { background: var(--ovulation); }

.streak-invite {
  display: flex; align-items: center; gap: var(--s-3);
  min-height: 56px; margin-top: var(--s-2); padding: var(--s-3) var(--s-3) var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background: var(--menstrual-soft); color: var(--menstrual-ink);
  text-decoration: none;
  transition: transform var(--t-fast) var(--ease);
}
.streak-invite:active { transform: scale(.98); }
.streak-invite-ink { flex: none; display: inline-flex; color: var(--menstrual-ink); --icon-ink: var(--menstrual); --icon-ink-opacity: .6; }
.streak-invite-text { flex: 1; min-width: 0; display: grid; }
.streak-invite-title { font-family: var(--font-display); font-weight: 750; font-size: var(--fs-md); letter-spacing: -.01em; }
.streak-invite-sub { font-size: var(--fs-sm); color: var(--ink); }
.streak-invite-chev { flex: none; display: inline-flex; margin-left: auto; }

/* ================================================================ Wrapped */
#view[data-view="wrapped"] ~ .tabbar { display: none; }
#view[data-view="wrapped"] { padding: 0; }

.wr {
  --dur: 6500ms;
  position: fixed; inset: 0; z-index: 30;
  width: 100%; max-width: 560px; margin-inline: auto;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr);
  background: var(--bg); color: var(--ink);
  overflow: hidden;
}
.wr::after {   /* paper grain, over the paper and under nothing that matters */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--grain); opacity: var(--grain-opacity);
}

/* ---------- top: progress and controls ---------- */
.wr-top { position: relative; z-index: 2; padding: calc(env(safe-area-inset-top) + var(--s-2)) calc(env(safe-area-inset-right) + var(--s-4)) 0 calc(env(safe-area-inset-left) + var(--s-4)); }
.wr-progress { display: flex; gap: 4px; }
.wr-seg { flex: 1; height: 4px; border-radius: var(--r-pill); overflow: hidden; background: color-mix(in oklab, var(--ink) 16%, transparent); }
.wr-seg i { display: block; height: 100%; background: var(--ink); transform: scaleX(0); transform-origin: left center; }
.wr-seg.is-done i { transform: scaleX(1); }
.wr-seg.is-now i { animation: wr-fill var(--dur) linear forwards; }
.wr.is-paused .wr-seg.is-now i { animation-play-state: paused; }
.wr.is-static .wr-seg.is-now i { animation: none; transform: scaleX(1); }
@keyframes wr-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.wr-bar { display: flex; align-items: center; gap: var(--s-1); min-height: 48px; }
.wr-brand { flex: 1; font-size: var(--fs-lg); color: var(--accent); letter-spacing: -.03em; }
.wr-icon {
  appearance: none; border: 0; cursor: pointer; flex: none;
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-grid; place-items: center;
  background: transparent; color: var(--ink);
}
.wr-icon:active { background: var(--surface-2); }

/* ---------- the stage: one card at a time ---------- */
.wr-stage { position: relative; z-index: 1; min-height: 0; cursor: pointer; }
.wr-slide {
  position: absolute; inset: 0;
  display: grid; align-content: start;
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  touch-action: pinch-zoom;   /* vertical drags are swipe-to-close… */
  padding: 0 calc(env(safe-area-inset-right) + var(--s-5)) var(--s-6) calc(env(safe-area-inset-left) + var(--s-5));
  -webkit-user-select: none; user-select: none;
}
.wr-slide.can-scroll { touch-action: pan-y pinch-zoom; }   /* …unless the card has more to read */
.wr-plate { position: relative; height: clamp(170px, 42dvh, 400px); display: grid; place-items: center; margin-inline: calc(-1 * var(--s-2)); }
.wr-disc {
  position: absolute; left: 50%; top: 50%; height: 94%; aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%; background: var(--tone-soft);
}
.wr-disc::before {   /* the second ink, printed a little off register */
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: inset 0 0 0 3px var(--tone);
  transform: translate(5px, 4px);
  mix-blend-mode: multiply;
}
.wr-art { position: absolute; top: 4%; bottom: 4%; left: 50%; translate: -50% 0; aspect-ratio: 1; }
.wr-art svg { width: 100%; height: 100%; overflow: visible; }
/* charts sit on the paper, full width, without the disc */
.wr-plate.is-chart { height: auto; margin-inline: 0; padding-top: var(--s-6); }
.wr-plate.is-chart .wr-art { position: relative; inset: auto; translate: none; width: 100%; aspect-ratio: auto; }
.wr-plate.is-chart .wr-art svg { height: auto; max-height: 42dvh; }

.wr-copy { position: relative; display: grid; gap: var(--s-2); align-content: start; padding-top: var(--s-3); }
.wr-kicker { font-size: var(--fs-lg); font-weight: 700; color: var(--tone-ink); }
.wr-kicker:focus { outline: none; }
.wr-chip {
  justify-self: start; padding: 2px var(--s-3); border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1.5px var(--tone); color: var(--tone-ink);
  font-size: var(--fs-sm); font-weight: 600;
}
.wr-big { font-size: clamp(2.6rem, 13vw, var(--fs-3xl)); color: var(--ink); text-wrap: balance; overflow-wrap: break-word; hyphens: auto; padding-bottom: .06em; }
.wr-big.is-long { font-size: clamp(2rem, 9.5vw, 3.2rem); }
.wr-big.is-xlong { font-size: clamp(1.8rem, 8.2vw, 2.7rem); }
.wr-big.is-huge { font-size: clamp(5rem, 30vw, 9rem); letter-spacing: -.05em; }
.wr-line { max-width: 36ch; text-wrap: pretty; }
.wr-line + .wr-line { margin-top: calc(-1 * var(--s-1)); }
.wr-note { color: var(--text-2); font-size: var(--fs-sm); max-width: 38ch; margin-top: var(--s-1); }

.wr-facts { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: grid; gap: var(--s-4); }
.wr-facts li { display: grid; gap: 2px; padding-left: var(--s-4); box-shadow: inset 4px 0 0 var(--tone); }
.wr-facts li:nth-child(2) { --tone: var(--menstrual); }
.wr-facts li:nth-child(3) { --tone: var(--ovulation); }
.wr-facts li:nth-child(4) { --tone: var(--luteal); }
.wr-fact-n { font-size: var(--fs-2xl); color: var(--ink); font-variant-numeric: tabular-nums; }
.wr-fact-t { color: var(--text-2); max-width: 34ch; }

/* cards without art: a big tone disc bleeds off the top corner instead */
.wr-slide.no-art::before {
  content: ""; position: absolute; right: -20%; top: -16%; width: 66%; aspect-ratio: 1; border-radius: 50%;
  background: var(--tone-soft); box-shadow: 5px 4px 0 0 color-mix(in oklab, var(--tone) 60%, transparent);
  pointer-events: none;
}
.wr-slide.no-art .wr-copy { padding-top: clamp(140px, 26dvh, 240px); }

.wr-end { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.wr-end .btn { flex: 1 1 12rem; }

.wr-hint {
  position: absolute; z-index: 1; left: var(--s-5); right: var(--s-5);
  bottom: calc(env(safe-area-inset-bottom) + 76px);
  color: var(--text-2); font-size: var(--fs-xs); pointer-events: none;
  display: none;
}
.wr[data-index="0"]:not(.is-static) .wr-hint { display: block; }

/* ---------- bottom: back, save, forward (also what VoiceOver uses) ---------- */
.wr-foot {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  padding: var(--s-2) calc(env(safe-area-inset-right) + var(--s-3)) calc(env(safe-area-inset-bottom) + var(--s-3)) calc(env(safe-area-inset-left) + var(--s-3));
  background: linear-gradient(to bottom, transparent, var(--bg) 30%);
}
.wr-nav {
  appearance: none; border: 0; cursor: pointer; flex: none;
  width: 48px; height: 48px; border-radius: 50%;
  display: inline-grid; place-items: center;
  background: var(--surface-2); color: var(--ink);
  transition: transform var(--t-fast) var(--ease), opacity var(--t-fast);
}
.wr-nav:active { transform: scale(.94); }
.wr-nav:disabled { opacity: .3; cursor: default; }
.wr-save { min-width: 0; flex: 0 1 auto; }
.wr-save-label { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* more words below the fold: fade the card out and point down */
.wr-slide.has-more { -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 64px), transparent); mask-image: linear-gradient(to bottom, black calc(100% - 64px), transparent); }
.wr-more {
  position: absolute; z-index: 2; left: 50%; bottom: var(--s-1); translate: -50% 0;
  width: 32px; height: 32px; border-radius: 50%; display: none; place-items: center;
  background: var(--surface-2); color: var(--ink); pointer-events: none;
}
.wr-more svg { rotate: 90deg; }
.wr-stage.has-more .wr-more { display: inline-grid; }
.wr-save[aria-busy="true"] { opacity: .6; }

/* ---------- the one orchestrated moment of each card: the inks register ---------- */
.wr-slide.is-in .wr-disc { animation: wr-print 620ms var(--ease-out) both; }
.wr-slide.is-in .wr-disc::before { animation: wr-register 820ms 80ms var(--ease-out) both; }
.wr-slide.is-in .wr-art { animation: wr-art 560ms 120ms var(--ease-out) both; }
.wr-slide.is-in .wr-copy { animation: wr-type 520ms 220ms var(--ease-out) both; }
.wr-slide.is-in.no-art::before { animation: wr-register 820ms var(--ease-out) both; }
@keyframes wr-print { from { scale: .84; opacity: 0; } }
@keyframes wr-register { from { transform: translate(26px, 18px); opacity: 0; } }
@keyframes wr-art { from { transform: translateY(12px) scale(.95); opacity: 0; } }
@keyframes wr-type { from { transform: translateY(10px); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .wr-slide.is-in .wr-disc, .wr-slide.is-in .wr-disc::before, .wr-slide.is-in .wr-art,
  .wr-slide.is-in .wr-copy, .wr-slide.is-in.no-art::before { animation: none; }
}
@media (prefers-color-scheme: dark) {
  .wr-disc::before { mix-blend-mode: screen; }
}

/* short screens (iPhone SE): a smaller plate leaves room for the words */
@media (max-height: 700px) {
  .wr-plate { height: clamp(150px, 31dvh, 260px); }
  .wr-big { font-size: clamp(2.2rem, 11vw, 3.4rem); }
  .wr-big.is-huge { font-size: clamp(4rem, 24vw, 7rem); }
}

/* ---------- nothing to show yet ---------- */
.wr-empty {
  min-height: 100dvh; display: grid; align-content: center; justify-items: start; gap: var(--s-4);
  padding: calc(env(safe-area-inset-top) + var(--s-6)) var(--s-5) calc(env(safe-area-inset-bottom) + var(--s-6));
  max-width: 34rem; margin-inline: auto;
}
.wr-empty p { max-width: 34ch; }