/* Rose quartz, soft paper and plum: a shared visual family for the cycle tools. */
body:has(.fertility-page) { background: radial-gradient(ellipse at 8% 8%, #f7e1e9, transparent 42%), radial-gradient(ellipse at 95% 25%, #f5e7e1, transparent 38%), #fcf7f8; color: #482c3c; }
.page-ovulation-calculator, .page-fertile-days-calculator { min-width: 0; padding-top: 0; grid-template-columns: minmax(0, 1fr); align-items: start; }
.fertility-page { --fc-ink: #482c3c; --fc-muted: #765466; --fc-accent: #a13d65; --fc-line: #ead5de; width: min(1080px, 100%); min-width: 0; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.fertility-page [hidden] { display: none !important; }
.fertility-heading { padding: 24px 12px 0; text-align: center; }
.fertility-heading h1 { font: 700 clamp(30px, 3.7vw, 48px)/1.1 Georgia, 'Times New Roman', serif; color: var(--fc-ink); letter-spacing: -.04em; max-width: 790px; margin: 16px auto 0; text-wrap: balance; }
.fertility-heading p { max-width: 640px; margin: 12px auto 0; line-height: 1.65; color: var(--fc-muted); font-size: 15px; text-wrap: pretty; }
.fertility-flower { display: inline-block; position: relative; width: 60px; height: 60px; }
.fertility-flower i { position: absolute; width: 22px; height: 32px; left: 19px; top: 1px; transform-origin: 11px 29px; background: linear-gradient(#f6d6e2, #c87597); border: 1px solid #d69bb1; border-radius: 60% 60% 45% 45%; }
.fertility-flower i:nth-child(2) { transform: rotate(60deg); }.fertility-flower i:nth-child(3) { transform: rotate(120deg); }.fertility-flower i:nth-child(4) { transform: rotate(180deg); }.fertility-flower i:nth-child(5) { transform: rotate(240deg); }.fertility-flower i:nth-child(6) { transform: rotate(300deg); }
.fertility-flower b { position: absolute; left: 24px; top: 24px; width: 12px; height: 12px; border-radius: 50%; background: #b07f46; border: 3px solid #f3e2be; }
.fertility-switch { display: flex; justify-self: center; padding: 5px; gap: 5px; border: 1px solid #ebd8e1; border-radius: 99px; background: #fffafc; box-shadow: 0 5px 14px #7d315b06; }
.fertility-switch a { padding: 11px 27px; border-radius: 99px; color: var(--fc-muted); font-size: 14px; font-weight: 700; min-height: 44px; }
.fertility-switch a[aria-current] { background: #a13d65; color: #fff; box-shadow: 0 3px 9px #a13d6520; }
.fertility-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 20px; align-items: stretch; }
.fertility-input-card, .fertility-result { min-width: 0; border: 1px solid var(--fc-line); border-radius: 28px; padding: 30px; background: #fffdfd; box-shadow: 0 18px 45px #7d315b08; }
.fertility-card-heading { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 26px; }
.fertility-card-heading > span { display: grid; place-items: center; width: 45px; height: 45px; border-radius: 14px; color: var(--fc-accent); background: #f9eaf0; flex: 0 0 auto; }
.fertility-card-heading svg { width: 22px; height: 22px; }
.fertility-card-heading h2 { margin: 0; font-size: 21px; line-height: 1.4; letter-spacing: -.03em; color: var(--fc-ink); }
.fertility-card-heading p { font-size: 13px; line-height: 1.6; color: var(--fc-muted); margin: 6px 0 0; }
.fertility-fields { min-width: 0; border: 0; padding: 0; margin: 0; }
.fertility-fields > label { display: block; color: #624153; font-size: 14px; font-weight: 600; margin: 22px 0 0; }
.fertility-fields > label:first-of-type { margin-top: 0; }
.fertility-fields input, .fertility-fields select { display: block; min-width: 0; width: 100%; max-width: 100%; min-height: 54px; margin-top: 9px; border: 1px solid #a77f92; border-radius: 13px; padding: 12px 14px; color: var(--fc-ink); background: #fff; font: inherit; font-size: 16px; font-weight: 600; }
.fertility-fields small { display: block; margin-top: 8px; color: var(--fc-muted); font-size: 12px; line-height: 1.65; font-weight: 400; }
.fertility-fields select { font-size: 14px; padding-right: 8px; }
.fertility-number { position: relative; }
.fertility-number input { padding-right: 66px; }
.fertility-number > span { position: absolute; right: 18px; top: 15px; color: var(--fc-muted); font-size: 14px; font-weight: 400; pointer-events: none; }
.fertility-presets { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 0; }
.fertility-presets button { min-height: 40px; padding: 7px 12px; border: 1px solid #ead5de; border-radius: 10px; background: #fffafc; color: #765466; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.fertility-presets button[aria-pressed="true"] { color: #8d3156; border-color: #b96c8a; background: #f9e5ed; }
.fertility-calculate { display: flex; align-items: center; justify-content: center; gap: 15px; width: 100%; min-height: 54px; padding: 14px 16px; margin-top: 27px; border: 1px solid #a13d65; border-radius: 14px; background: linear-gradient(110deg, #9b395f, #ad4c72); color: #fff; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; box-shadow: 0 6px 16px #a13d6519; }
.fertility-calculate svg { width: 18px; height: 18px; }
.fertility-calculate:hover { background: #8f3157; }
.fertility-page button:disabled { opacity: .55; cursor: not-allowed; }
.fertility-reset { display: block; margin: 6px auto 0; min-height: 44px; border: 0; background: transparent; color: var(--fc-muted); font: inherit; font-size: 12px; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.fertility-page :is(a, button, input, select):focus-visible { outline: 3px solid #9b395f; outline-offset: 3px; }
.fertility-fields [aria-invalid="true"] { border-color: #9e2929; background: #fff5f5; }
.fertility-error { padding: 12px 14px; margin: 18px 0 0; border: 1px solid #d998a2; border-radius: 11px; color: #862b3d; background: #fff0f1; font-size: 13px; line-height: 1.6; }
.fertility-privacy { display: flex; align-items: flex-start; gap: 8px; margin: 15px 0 0; color: var(--fc-muted); font-size: 12px; line-height: 1.65; }
.fertility-privacy svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 3px; }
.fertility-result { background: radial-gradient(ellipse at 100% 0, #f4d7e5 0, transparent 65%), linear-gradient(140deg, #fff5f8, #f9e9f0); display: flex; flex-direction: column; text-align: center; position: relative; scroll-margin-top: 20px; }
.fertility-result-label { display: flex; gap: 9px; justify-content: center; align-items: center; color: #80405b; }
.fertility-result-label h2 { margin: 0; font-size: 14px; font-weight: 600; color: inherit; }
.fertility-spark { font-size: 22px; }
.fertility-empty { display: grid; place-items: center; align-content: center; flex: 1; min-height: 330px; padding: 30px 0; }
.fertility-orbit { position: relative; display: grid; place-items: center; width: 130px; height: 130px; border: 1px solid #d4a5b9; border-radius: 50%; background: radial-gradient(circle, #fff9fc 35%, #f4dce7); margin-bottom: 24px; box-shadow: 0 0 0 12px #fff5f84f; }
.fertility-orbit > span { font: 46px/1 Georgia, serif; color: #a13d65; }
.fertility-orbit i { width: 12px; height: 12px; background: #af577a; border-radius: 50%; border: 3px solid #fcebf2; position: absolute; top: 12px; left: 18px; }
.fertility-orbit i:nth-of-type(2) { top: 85px; left: 111px; background: #b88b67; }.fertility-orbit i:nth-of-type(3) { top: 121px; left: 30px; width: 8px; height: 8px; border-width: 2px; }
.fertility-empty h3 { margin: 0; font: 700 29px/1.25 Georgia, 'Times New Roman', serif; letter-spacing: -.025em; color: #68354e; }
.fertility-empty p { color: var(--fc-muted); font-size: 13px; line-height: 1.8; max-width: 320px; margin: 16px 0 0; }
.fertility-primary { padding: 36px 0 24px; }
.fertility-primary > span { display: block; margin-bottom: 12px; color: #80405b; font-size: 11px; letter-spacing: .025em; }
.fertility-primary strong { display: block; font: 700 clamp(30px, 3.5vw, 44px)/1.16 Georgia, 'Times New Roman', serif; color: #803154; letter-spacing: -.025em; text-wrap: balance; }
.fertility-primary p { color: #765466; font-size: 12px; line-height: 1.75; margin: 14px auto 0; max-width: 370px; }
.fertility-page-window .fertility-primary strong { font-size: clamp(26px, 3vw, 36px); }
.fertility-summary { display: grid; gap: 0; margin: 0; border-top: 1px solid #dbb9c8; text-align: left; }
.fertility-summary > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 14px; padding: 16px 0; border-bottom: 1px solid #dfc6d1; align-items: center; }
.fertility-summary dt { font-size: 12px; line-height: 1.6; color: #765466; }
.fertility-summary dd { margin: 0; font-size: 13px; line-height: 1.6; color: #593346; font-weight: 700; text-align: right; }
.fertility-history { padding: 12px; border: 1px solid #dfbea0; border-radius: 12px; background: #fff5e9; color: #724e37; line-height: 1.6; font-size: 12px; text-align: left; }
.fertility-result-caution { color: #6d4559; margin: 24px 0 0; font-size: 12px; line-height: 1.7; }
.fertility-page > .share-panel { margin-top: -12px; border-color: #ead5de; background: #fffafb; box-shadow: none; }
.fertility-page > .share-panel .share-actions { flex-wrap: wrap; gap: 7px; }
.fertility-page > .share-panel .share-button { width: 42px; height: 42px; min-height: 42px; border-color: #d9b8c7; background: #fffafb; }
.fertility-page > .share-panel .share-button.primary { background: #a13d65; border-color: #a13d65; color: #fff; }
.fertility-safety { display: flex; align-items: flex-start; gap: 15px; padding: 18px 22px; border: 1px solid #e7d6cb; background: #fcf6f0; border-radius: 17px; color: #755440; }
.fertility-safety > span { display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid #b99170; border-radius: 50%; font: 700 15px/1 Georgia, serif; flex: 0 0 auto; margin-top: 3px; }
.fertility-safety p { margin: 0; font-size: 13px; line-height: 1.8; }
.fertility-safety strong { color: #62422f; }
.fertility-calendar-card, .fertility-guide, .fertility-sources { border: 1px solid var(--fc-line); border-radius: 24px; padding: 30px; background: #fffdfd; min-width: 0; }
.fertility-calendar-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.fertility-calendar-heading h2 { font: 700 27px/1.25 Georgia, serif; margin: 0; color: var(--fc-ink); letter-spacing: -.02em; }
.fertility-calendar-heading p { color: var(--fc-muted); font-size: 13px; line-height: 1.7; margin: 9px 0 0; }
.fertility-estimate-pill { padding: 7px 12px; border: 1px solid #e4c6d4; border-radius: 99px; background: #faf0f5; color: #8f3157; font-size: 11px; font-weight: 700; }
.fertility-calendar-legend { display: flex; flex-wrap: wrap; gap: 10px 20px; margin: 22px 0; color: var(--fc-muted); font-size: 12px; }
.fertility-calendar-legend > span { display: flex; gap: 7px; align-items: center; }
.fertility-calendar-legend i { width: 10px; height: 10px; border-radius: 50%; background: #a13d65; border: 1px solid #a13d65; }
.fertility-calendar-legend .fc-dot-fertile { background: #f1d4e2; border-color: #b57391; }.fertility-calendar-legend .fc-dot-period { background: #fff; border-color: #975476; }
.fertility-calendars { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 22px; }
.fertility-month { min-width: 0; padding: 16px; border: 1px solid #ecdce3; border-radius: 17px; background: #fffafb; }
.fertility-month h3 { margin: 0 0 16px; text-align: center; font-size: 16px; color: #643e52; text-transform: capitalize; }
.fertility-month table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 1px 4px; }
.fertility-month th { color: #765466; font-size: 11px; font-weight: 600; padding-bottom: 10px; text-align: center; }
.fertility-month td { text-align: center; height: 35px; padding: 0; }
.fertility-month td > span { display: flex; align-items: center; justify-content: center; min-height: 32px; border-radius: 9px; color: #765466; font-size: 12px; border: 1px solid transparent; position: relative; }
.fertility-month .is-fertile { color: #733350; background: #f5deea; font-weight: 700; }
.fertility-month .is-period { border-color: #a4718b; color: #733350; background: #fff; font-weight: 700; }
.fertility-month .is-ovulation { background: #a13d65; color: #fff; border-color: #a13d65; }
.fertility-month .is-ovulation i { position: absolute; right: 1px; top: -5px; font-size: 13px; font-style: normal; color: #fff; }
.fertility-guide { padding: 36px clamp(20px, 5vw, 56px); border-top: 3px solid #bc7493; }
.fertility-guide h2 { font: 700 28px/1.25 Georgia, 'Times New Roman', serif; color: var(--fc-ink); margin: 30px 0 13px; letter-spacing: -.025em; padding-top: 26px; border-top: 1px solid var(--fc-line); }
.fertility-guide h2:first-child { margin-top: 0; border: 0; padding-top: 0; }
.fertility-guide h3 { color: var(--fc-ink); font-size: 18px; margin: 24px 0 10px; }
.fertility-guide :is(p, li) { font-size: 15px; line-height: 1.85; color: var(--fc-muted); margin: 0 0 13px; }
.fertility-guide a { color: #91375c; text-decoration: underline; }
.fertility-sources { background: #f7eff3; padding: 24px 28px; }
.fertility-sources h2 { margin: 0 0 12px; color: #624153; font-size: 17px; }
.fertility-sources p { font-size: 13px; color: #765466; line-height: 1.8; margin: 0 0 12px; }
.fertility-sources a { display: inline-flex; gap: 6px; align-items: center; min-height: 44px; font-size: 12px; color: #91375c; text-decoration: underline; text-underline-offset: 4px; margin-right: 22px; }
.fertility-sources a svg { width: 13px; height: 13px; }
.fertility-sources small { display: block; margin-top: 8px; color: #765466; font-size: 11px; line-height: 1.7; }
@media (max-width: 800px) {
  .fertility-page { max-width: 620px; gap: 20px; }
  .fertility-workspace { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .fertility-heading { padding-top: 18px; }
  .fertility-input-card, .fertility-result { padding: 27px; }
  .fertility-empty { min-height: 310px; }
}
@media (max-width: 560px) {
  .fertility-heading { padding: 12px 4px 0; }
  .fertility-heading h1 { font-size: 28px; margin-top: 12px; }
  .fertility-heading p { font-size: 13px; margin-top: 10px; }
  .fertility-flower { width: 42px; height: 42px; }
  .fertility-flower i { width: 15.4px; height: 22.4px; left: 13.3px; top: .7px; transform-origin: 7.7px 20.3px; }
  .fertility-flower b { left: 16.8px; top: 16.8px; width: 8.4px; height: 8.4px; border-width: 2px; }
  .fertility-switch a { padding: 10px 20px; font-size: 13px; }
  .fertility-input-card, .fertility-result { padding: 23px 18px; border-radius: 23px; }
  .fertility-card-heading { gap: 10px; }
  .fertility-card-heading h2 { font-size: 19px; }
  .fertility-card-heading > span { width: 37px; height: 37px; border-radius: 12px; }
  .fertility-presets { gap: 5px; }
  .fertility-presets button { flex: 1; min-width: 0; padding: 7px; font-size: 11px; }
  .fertility-page > .share-panel .share-actions { gap: 4px; }
  .fertility-page > .share-panel .share-button { width: 40px; height: 40px; min-height: 40px; }
  .fertility-summary > div { gap: 10px; }
  .fertility-summary dd { font-size: 12px; }
  .fertility-safety { padding: 16px; gap: 10px; }
  .fertility-calendar-card, .fertility-guide { padding: 24px 18px; border-radius: 22px; }
  .fertility-calendar-heading { display: block; }
  .fertility-calendar-heading h2, .fertility-guide h2 { font-size: 25px; }
  .fertility-estimate-pill { display: inline-block; margin-top: 10px; }
  .fertility-month { padding: 12px; }
  .fertility-calendar-legend { font-size: 11px; gap: 10px; }
  .fertility-sources { padding: 23px 18px; }
}
@media (prefers-reduced-motion: reduce) { .fertility-page * { scroll-behavior: auto; transition: none; } }