/* Uma contagem circular guarda o lugar do corpo na rotina. */
.nav-inner {grid-template-columns:repeat(4,1fr);gap:2px;padding-inline:8px}
html {scroll-padding-bottom:calc(var(--nav-h) + 24px)}
button,input,textarea,select {scroll-margin-block:24px calc(var(--nav-h) + 24px)}
body:has(#sheet-root:not(:empty)) {overflow:hidden}
.sheet {overscroll-behavior:contain}
.nav-btn {font-size:15px}
.body-strip {display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--sand);padding:0 0 16px;margin:0 0 20px}
.body-strip-main {display:flex;align-items:center;gap:12px;text-align:left;flex:1;background:none;min-height:54px}
.body-strip-main strong {display:block;font-size:16px;font-weight:600}
.body-strip-main small {display:block;font-size:14px;color:var(--ink-soft);line-height:1.4;margin-top:4px}
.body-dot {width:10px;height:10px;border-radius:50%;background:var(--sage-500);flex:none}
.body-dot.is-bleeding {background:var(--clay)}
.body-strip-check {width:48px;height:48px;border-radius:50%;background:var(--sage-100);display:grid;place-items:center;color:var(--sage-900);flex:none}
.moment-note {display:flex;align-items:center;justify-content:space-between;gap:10px;margin:20px 0 12px}
.section-label {font-size:14px;color:var(--ink-soft)}
.moment-note p {font-size:16px;line-height:1.45;margin-top:3px}
.moment-note .text-btn,.section-heading .text-btn {flex:none;min-height:48px}
.adjust-note {background:var(--sage-50);padding:14px 16px;border-radius:18px;margin-bottom:18px}
.adjust-note>span {display:flex;gap:10px;align-items:center;font-size:16px;line-height:1.4}
.adjust-note .text-btn {margin:6px 0 0 34px;min-height:44px}
.wellbeing-form fieldset {border:0;padding:0;margin:0 0 22px;min-width:0}
.wellbeing-form legend {font-size:17px;font-weight:600;margin-bottom:10px;padding:0}
.feeling-choices {display:flex;flex-wrap:wrap;gap:8px}
.feeling-choice {position:relative;flex:1 1 auto;cursor:pointer}
.feeling-choice input {position:absolute;width:1px;height:1px;opacity:0}
.feeling-choice span {display:flex;align-items:center;justify-content:center;min-height:52px;padding:10px 14px;border:1px solid var(--sand);border-radius:14px;background:var(--white);font-size:16px;text-align:center;transition:background .15s}
.feeling-choice input:checked+span {background:var(--sage-700);color:white;border-color:var(--sage-700)}
.feeling-choice input:focus-visible+span {outline:3px solid var(--clay);outline-offset:3px}
.wellbeing-form .field small {font-size:14px;font-weight:400;color:var(--ink-soft)}
.form-error {color:var(--error);font-size:16px;line-height:1.5;background:#f4e9e3;padding:12px 14px;border-radius:12px;margin:12px 0}
.form-error[hidden] {display:none}
.suggestion-comparison {display:grid;gap:10px;margin-bottom:16px}
.suggestion-comparison>div {background:var(--cream-soft);padding:18px;border-radius:18px}
.suggestion-comparison>div:last-child {background:var(--sage-100)}
.suggestion-comparison span {display:block;font-size:14px;color:var(--ink-soft);margin-bottom:8px}
.suggestion-comparison strong {font-family:var(--serif);font-size:24px;line-height:1.2;font-weight:500;display:block}
.suggestion-comparison p {font-size:16px;margin-top:10px}
.page-cycle .page-head {margin-bottom:12px}
.cycle-overview {text-align:center}
.cycle-dial {width:248px;height:248px;position:relative;margin:4px auto 12px}
.cycle-dial>svg {width:100%;height:100%;overflow:visible}
.dial-track {fill:none;stroke:var(--sand);stroke-width:1.5}
.cycle-dial circle:not(.dial-track) {fill:var(--sand)}
.cycle-dial circle.is-counted {fill:var(--sage-300)}
.cycle-dial circle.is-current {fill:var(--sage-700);stroke:var(--cream);stroke-width:3}
.dial-leaf {fill:var(--sage-200);stroke:var(--sage-500);stroke-width:.6}
.dial-center {position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.dial-center>span,.dial-center small {font-size:14px;color:var(--ink-soft)}
.dial-center strong {font-family:var(--serif);font-weight:450;font-size:76px;line-height:1.05;color:var(--sage-900);margin:7px 0}
.dial-lotus {width:60px;height:60px}
.cycle-caption p {font-size:18px;margin:3px 0 22px}
.next-period {display:flex;align-items:flex-start;text-align:left;background:var(--cream-soft);border-radius:18px;padding:16px;gap:12px;margin:0 0 18px}
.next-period .body-dot {background:var(--clay);margin-top:6px}
.next-period strong {font-weight:600;font-size:16px;display:block}
.next-period p {font-size:20px;font-family:var(--serif);margin:2px 0}
.next-period small {font-size:14px;color:var(--ink-soft)}
.cycle-uncertain {font-size:16px;color:var(--ink-soft);margin:0 0 18px;line-height:1.55;text-align:left;padding:14px 16px;background:var(--cream-soft);border-radius:16px}
.cycle-invite {text-align:center;padding:18px 0 10px}
.cycle-invite-lotus {width:70px;height:70px;color:var(--sage-600)}
.cycle-invite h2 {font-family:var(--serif);font-size:32px;font-weight:450;line-height:1.15;margin:14px 0}
.cycle-invite p:not(.fine) {color:var(--ink-soft);font-size:17px;line-height:1.5;margin:0 12px 22px}
.cycle-invite .fine {margin:12px 8px}
.rhythm-week,.rhythm-insights,.rhythm-history {border-top:1px solid var(--sand);padding-top:22px;margin-top:22px}
.section-heading {display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
.page-cycle h2 {font-family:var(--serif);font-weight:500;font-size:24px;line-height:1.2}
.section-heading h2 {font-size:23px}
.rhythm-days {display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin:12px 0}
.rhythm-day {background:none;display:flex;flex-direction:column;align-items:center;gap:8px;min-height:92px;padding:4px 0;color:var(--ink-soft)}
.rhythm-day small {font-size:13px}
.rhythm-day>span:last-child {font-size:12px;min-height:18px}
.energy-dot {display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--sand);border-radius:50%;font-size:15px;color:var(--ink)}
.energy-dot.has-log {background:var(--sage-100);border-color:var(--sage-200)}
.energy-dot.has-bleeding {border-color:var(--clay);border-width:2px}
.rhythm-day.is-today .energy-dot {outline:2px solid var(--sage-700);outline-offset:3px}
.rhythm-insights>p,.empty-diary {font-size:16px;line-height:1.6;color:var(--ink-soft);margin-top:12px}
.rhythm-insights article {margin-top:14px;background:var(--sage-50);padding:16px;border-radius:16px}
.rhythm-insights h3 {font-size:17px;font-weight:600}
.rhythm-insights article p {font-size:16px;margin-top:8px;color:var(--ink-soft)}
.rhythm-history ul {list-style:none;padding:0;margin:12px 0 0}
.history-entry {width:100%;display:flex;text-align:left;gap:12px;padding:16px 0;border-bottom:1px solid var(--sand);background:none;align-items:flex-start;min-height:68px}
.history-date {font-size:14px;width:56px;flex:none;color:var(--ink-soft);padding-top:2px}
.history-entry>span:nth-child(2) {flex:1;min-width:0}
.history-entry strong {font-size:16px;font-weight:500;display:block;line-height:1.45}
.history-entry small {font-size:15px;display:block;color:var(--ink-soft);line-height:1.5;margin-top:6px;overflow-wrap:anywhere}
.history-entry .icon {margin-top:2px;flex:none}
.cycle-starts,.cycle-explainer {border-top:1px solid var(--sand);margin-top:24px;padding-top:8px}
.cycle-starts summary,.cycle-explainer summary {cursor:pointer;font-size:16px;font-weight:500;min-height:56px;padding:16px 0}
.cycle-explainer p {font-size:16px;color:var(--ink-soft);margin-bottom:12px}
.cycle-footnote {margin:24px 0 12px}
.sheet .is-danger {color:var(--error)}
.sheet .field>small {font-size:14px;color:var(--ink-soft)}
.hero-checkin .hero-title {font-size:36px}
@media(max-width:360px){.cycle-dial{width:224px;height:224px}.section-heading{align-items:flex-start}.section-heading h2{max-width:160px}.energy-dot{width:34px;height:34px}.feeling-choice span{padding-inline:10px}}
@media(prefers-reduced-motion:reduce){.feeling-choice span{transition:none}}

/* Cor situa o dia. Texto e contorno mostram de onde veio a informação. */
.tone-neutral {--cycle-fill:var(--cream-soft);--cycle-line:var(--sand);--cycle-ink:var(--ink-soft)}
.tone-menstrual {--cycle-fill:#f4ded7;--cycle-line:#bd715e;--cycle-ink:#704637}
.tone-follicular {--cycle-fill:#e2ebdd;--cycle-line:#869777;--cycle-ink:#415735}
.tone-midcycle {--cycle-fill:#f5ebcf;--cycle-line:#b49a59;--cycle-ink:#66562a}
.tone-luteal {--cycle-fill:#e9e3ee;--cycle-line:#aa94ba;--cycle-ink:#645474}
.cycle-calendar {margin:4px 0 28px}
.cycle-calendar-head {display:flex;align-items:center;justify-content:space-between;gap:8px}
.cycle-calendar-head h2 {font-size:23px;text-align:center}
.cycle-calendar-head .icon-btn {min-width:44px;min-height:44px}
.cycle-calendar-weekdays,.cycle-calendar-grid {display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.cycle-calendar-weekdays {margin:10px 0 8px;text-align:center;font-size:13px;color:var(--ink-soft)}
.cycle-calendar-day {position:relative;display:grid;place-items:center;min-height:44px;border-radius:13px;border:1px solid transparent;background:var(--cycle-fill);color:var(--cycle-ink);font-size:16px;font-weight:500;padding:2px}
.cycle-calendar-day.tone-neutral {background:none;color:var(--ink-soft)}
.cycle-calendar-day.is-estimated {border:1px dashed var(--cycle-line)}
.cycle-calendar-day.is-reported {background:#925643;color:white;border-color:#925643}
.cycle-calendar-day.is-selected {outline:2px solid var(--sage-900);outline-offset:1px}
.cycle-calendar-day:focus-visible {outline:3px solid var(--sage-900);outline-offset:2px}
.cycle-calendar-day.is-today i {position:absolute;width:4px;height:4px;border-radius:50%;background:currentColor;bottom:5px}
.cycle-calendar-bottom {display:flex;align-items:center;justify-content:space-between;gap:8px;margin:5px 0 12px}
.cycle-calendar-bottom p {font-size:13px;color:var(--ink-soft)}
.cycle-calendar-bottom .text-btn {font-size:14px;min-height:44px;padding:4px 9px}
.cycle-day-note {text-align:left;padding:16px 18px;background:var(--cycle-fill);border-radius:18px;border:1px solid transparent;margin:0 0 16px}
.cycle-note-date {font-size:13px;color:var(--cycle-ink);margin:0 0 9px}
.cycle-note-heading {display:flex;align-items:center;gap:9px}
.cycle-note-heading h3 {font-size:17px;font-weight:600;color:var(--cycle-ink);line-height:1.4}
.cycle-note-dot,.cycle-tone-dot {background:var(--cycle-line);border:1px solid var(--cycle-line);width:10px;height:10px;border-radius:50%;flex:none}
.cycle-note-dot.is-estimated,.cycle-tone-dot.is-estimated {background:transparent;border-style:dashed;width:12px;height:12px}
.cycle-note-origin {font-size:13px;display:block;color:var(--cycle-ink);margin:3px 0 9px 19px}
.cycle-note-phrase {font-family:var(--serif);font-size:23px;line-height:1.28;color:var(--ink);margin:0 0 10px}
.cycle-note-detail,.cycle-note-log,.cycle-note-hint {font-size:14px;line-height:1.5;color:var(--cycle-ink);margin:6px 0 0}
.cycle-day-note .text-btn {font-size:15px;min-height:44px;margin:4px 0 -7px;padding:4px 0;color:var(--cycle-ink)}
.cycle-color-legend {display:grid;grid-template-columns:1fr 1fr;gap:10px 8px;margin:18px 0 12px;text-align:left}
.cycle-color-legend>span {display:flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-soft);line-height:1.3}
.cycle-color-legend i {width:12px;height:12px;border-radius:4px;background:var(--cycle-fill);border:1px solid var(--cycle-line);flex:none}
.cycle-color-key {font-size:12px;line-height:1.65;color:var(--ink-soft);text-align:left}
.sample-reported,.sample-estimated {display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:4px;vertical-align:middle}
.sample-reported {background:#925643}
.sample-estimated {border:1px dashed var(--ink-soft);margin-left:5px}
.body-strip .cycle-tone-dot {background:var(--cycle-line)}
.body-strip .cycle-tone-dot.is-estimated {background:transparent}
.body-strip-phrase {display:block;font-style:normal;font-size:15px;line-height:1.4;margin-top:8px;color:var(--cycle-ink)}
.week-cycle-legend {margin:0 0 18px}
.week-cycle-legend .cycle-color-legend {margin-top:0}
.week-main .week-cycle-label {font-size:13px;margin-top:5px;color:var(--ink-soft);line-height:1.3}
.week-row .week-date[class*="tone-"] {background:var(--cycle-fill);color:var(--cycle-ink);border:1px solid var(--cycle-line)}
.week-row .week-date.is-estimated {border-style:dashed}
.week-row .week-date.is-reported {background:#925643;color:white;border-color:#925643}
.week-row .week-date[class*="tone-"] small {color:inherit}
.week-row.is-today .week-date[class*="tone-"] {outline:2px solid var(--sage-700);outline-offset:2px}
.cycle-dial circle[class*="tone-"]:not(.dial-track) {fill:var(--cycle-line)}
.cycle-dial circle.tone-neutral:not(.dial-track) {fill:var(--sand)}
.cycle-dial circle.is-current {stroke:var(--sage-900);stroke-width:2.5}
.cycle-today-label {font-size:14px;color:var(--ink-soft);border-top:1px solid var(--sand);padding-top:20px}