/* User-entered values share the phone field's typography on every screen. */ :root{--input-font-size:16px;--input-font-weight:500;--sheet-gutter:34px;--sheet-title-size:28px} :root[data-theme] .theme-selector{--theme-button-size:36px;--theme-gap:0px;--theme-padding:3px;height:44px} :root[data-theme] .privacy-button{width:44px;height:44px;min-width:44px;flex:none} .device-unlock{margin-bottom:14px} @media(max-width:350px){.auth-page>header{gap:8px}.auth-page .brand{font-size:22px}} :root[data-theme] :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea,.wheel-trigger){font-family:var(--font)!important;font-size:var(--input-font-size)!important;font-weight:var(--input-font-weight)!important;line-height:1.4!important;letter-spacing:normal!important;font-variant-numeric:tabular-nums} :root[data-theme] :is(input,textarea)::placeholder{font-family:var(--font);font-size:var(--input-font-size);font-weight:400;letter-spacing:normal} input::-webkit-datetime-edit,input::file-selector-button{font:inherit;letter-spacing:normal} :root[data-theme] select{appearance:none;-webkit-appearance:none;padding-right:34px;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat} .phone-country-picker{width:96px;gap:6px}.phone-country-picker>[data-country-dial]{font-size:16px;font-weight:500;line-height:1.4;color:var(--ink);font-variant-numeric:tabular-nums} @media(max-width:350px){.phone-country-picker{width:88px;margin-right:8px;gap:4px}} /* One header/content/footer grid for all sheets, including wheel pickers. */ .sheet-drag-zone{padding-inline:var(--sheet-gutter)} .sheet-content{padding-inline:var(--sheet-gutter)} .sheet-footer{padding-inline:var(--sheet-gutter)} .sheet-drag-zone h2{font-size:var(--sheet-title-size);line-height:1.2;letter-spacing:-.03em;margin:7px 0 26px} .sheet-origin{font-size:12px;line-height:1.4;letter-spacing:.02em} @media(max-width:900px){ :root{--sheet-gutter:22px;--sheet-title-size:26px} .sheet-drag-zone{padding:16px max(var(--sheet-gutter),env(safe-area-inset-right)) 0 max(var(--sheet-gutter),env(safe-area-inset-left))} .sheet-handle{display:block;width:100%;height:24px;margin:-9px 0 6px;padding:0} .sheet-close{top:23px;right:max(var(--sheet-gutter),env(safe-area-inset-right))} .sheet-content{padding-inline:max(var(--sheet-gutter),env(safe-area-inset-left)) max(var(--sheet-gutter),env(safe-area-inset-right))} .sheet-footer{padding-inline:max(var(--sheet-gutter),env(safe-area-inset-left)) max(var(--sheet-gutter),env(safe-area-inset-right))} } /* Transparent headers share one fixed-size circular glass control. */ :root[data-theme] .topbar,:root[data-theme] .auth-page>header{background:transparent;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;justify-content:flex-end} :root[data-theme] :is(.topbar .icon-button,.topbar .avatar,.page-info){width:44px;height:44px;min-width:44px;flex:none;display:grid;place-items:center;padding:0;border:1px solid var(--glass-border);border-radius:50%;background:var(--glass-control);box-shadow:inset 0 1px 0 var(--glass-highlight);color:var(--accent-dark);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)} .page-title-row{display:flex;align-items:center;gap:12px}.page-title-row h1{min-width:0} .avatar{overflow:hidden}.avatar img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit} .profile-photo-button{padding:0;border:1px solid var(--glass-border);flex:none}.photo-edit-link{margin:-8px 0 22px} :root[data-theme] .profile-photo-button{background:var(--glass-control);box-shadow:inset 0 1px 0 var(--glass-highlight)} /* Section titles share a top edge with their actions. */ :root[data-theme] .content{padding-top:16px} :root[data-theme] .page-heading{align-items:flex-start} :root[data-theme] .page-heading>.primary{align-self:flex-start;margin-top:0} :root[data-theme] .auth-page:not(.quiz-page)>header{justify-content:space-between} .quiz-page>header>.brand{visibility:hidden;pointer-events:none} /* Each main section owns the same header row as the bell and profile controls. */ :root[data-theme] .topbar{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;justify-content:initial;gap:24px;height:104px;box-sizing:border-box;padding:20px max(44px,calc((100% - 1390px)/2 + 44px));} .topbar .page-title-row{min-width:0;gap:12px} .topbar h1{font-size:36px;line-height:1.15;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere} .topbar .topbar-right{flex:none;gap:12px} .page-heading>div{min-width:0}.page-heading .muted{margin-top:0} @media(max-width:1250px){:root[data-theme] .topbar{padding-inline:28px}} @media(max-width:900px){ :root[data-theme] .topbar{height:calc(88px + env(safe-area-inset-top));padding:calc(12px + env(safe-area-inset-top)) 22px 12px;gap:14px} .topbar h1{font-size:28px;letter-spacing:-.8px}.topbar .wave{font-size:24px} :root[data-theme] .content{padding-top:8px} } @media(max-width:480px){:root[data-theme] .topbar{padding-inline:18px;gap:12px}.topbar h1{font-size:24px}.topbar .page-title-row{gap:8px}.topbar .wave{font-size:21px}} @media(max-width:350px){:root[data-theme] .topbar{padding-inline:13px;gap:10px}.topbar h1{font-size:22px}.topbar .topbar-right{gap:8px}} .page-heading{justify-content:flex-end} .topbar .settings-context{display:block;color:var(--muted);font-size:12px;line-height:1.4} .settings-topbar .page-title-row{gap:14px}.settings-topbar h1{margin-top:2px} .cycle-entry-action{margin:16px 0 4px} :root{--fertility-color:#37aeba;--fertility-surface:#def3f5;--fertility-ink:#205963;--fertility-line:#83c6ce;--ovulation-surface:#a9e0e5;--ovulation-ink:#163f48;--ovulation-line:#2a8793} :root[data-theme=dark]{--fertility-color:#7ed4df;--fertility-surface:#15343b;--fertility-ink:#bdeef4;--fertility-line:#387680;--ovulation-surface:#245661;--ovulation-ink:#e1fbff;--ovulation-line:#80d9e5} :root[data-theme] .calendar-day.fertile{background:var(--fertility-surface);color:var(--fertility-ink);border-color:var(--fertility-line)} :root[data-theme] .calendar-day.ovulation{border:2px solid var(--ovulation-line);background:var(--ovulation-surface);color:var(--ovulation-ink)} :root[data-theme] .ring-fertile{stroke:var(--fertility-color)} :root[data-theme] .week-mark.fertile{color:var(--fertility-color)} :root[data-theme] .dot.green{background:var(--fertility-color)} :root[data-theme] .fertility-tag{background:var(--fertility-surface);color:var(--fertility-ink);border-color:var(--fertility-line)} .calendar-day.ovulation>span{height:14px;line-height:14px}.calendar-day.ovulation svg{display:block} .notification-list{display:grid;gap:10px} .notification-empty{margin:0;padding:14px;border:1px dashed var(--line);border-radius:15px;color:var(--muted);font-size:14px;line-height:1.5} /* Menstruation has its own red palette, distinct from peach actions and cyan ovulation. */ :root{--period-color:#d9576b;--period-surface:#f5bdc7;--period-ink:#6b1b2e;--period-line:#d97b8d;--period-predicted:#fff0f3;--period-predicted-ink:#8e3447} :root[data-theme=dark]{--period-color:#f18498;--period-surface:#682c3c;--period-ink:#ffdde5;--period-line:#b9687d;--period-predicted:#311b24;--period-predicted-ink:#edb0bd} :root[data-theme] .calendar-day.period{background:var(--period-surface);color:var(--period-ink);border-color:var(--period-line)} :root[data-theme] .calendar-day.predicted{background:var(--period-predicted);color:var(--period-predicted-ink);border-color:var(--period-line)} :root[data-theme] :is(.ring-period,.ring-progress){stroke:var(--period-color)} :root[data-theme] .week-mark.period{color:var(--period-color)} :root[data-theme] .dot.orange,:root[data-theme] .cycle-bar-track i{background:var(--period-color)} :root[data-theme] .dot.pale{background:var(--period-predicted);border-color:var(--period-color)} :root[data-theme] :is(.period-icon,.menstruation-tag){background:var(--period-surface);color:var(--period-ink);border-color:var(--period-line)} .flow-options .choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .flow-options .choice>span{width:100%;min-height:46px;display:flex;align-items:center;justify-content:center} :root[data-theme] .flow-options .choice:has(input:checked)>span{background:var(--period-surface);border-color:var(--period-line);color:var(--period-ink)} .calendar-layout{grid-template-columns:minmax(0,1fr)} .cycle-only .metrics-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .cycle-only #preferences-form .form-row{grid-template-columns:minmax(0,1fr)} /* Three cycle metrics, with the optional journal count on its own row. */ .metrics-grid,.cycle-only .metrics-grid{grid-template-columns:repeat(3,minmax(0,1fr))} .metrics-grid>.metric[data-wellbeing]{grid-column:1/-1;flex-direction:row;align-items:center} /* Segmented cycle ring: phase colours are not covered by a progress arc. */ :root[data-theme] .cycle-ring{display:block;border:0;padding:0;background:transparent;isolation:isolate;border-radius:50%;cursor:pointer} :root[data-theme] .cycle-ring:hover{background:transparent} .ring-svg .ring-segment{fill:none;stroke-width:18;stroke-linecap:butt} :root[data-theme] .ring-neutral{stroke:var(--ring-neutral,#e5d9cc)} :root[data-theme=dark]{--ring-neutral:#3e3d35} .ring-current-layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none} :root[data-theme] .ring-current{fill:var(--accent);stroke:var(--panel);stroke-width:2.5} .ring-text{pointer-events:none} /* A footer remains structural for pinned actions, with no separate visual panel. */ :root[data-theme] .modal .sheet-footer{background:transparent;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none} /* Observed intensity: translucent red through scarlet; no inferred intensity. */ :root{--flow-red:201,35,56;--flow-ink:#651627} :root[data-theme=dark]{--flow-red:224,52,76;--flow-ink:#ffe5eb} [data-flow-level="1"]{--flow-alpha:.14} [data-flow-level="2"]{--flow-alpha:.32} [data-flow-level="3"]{--flow-alpha:.6} [data-flow-level="4"]{--flow-alpha:1} :root[data-theme] .calendar-day.has-flow:not(.fertile){background:rgba(var(--flow-red),var(--flow-alpha));color:var(--flow-ink);border-color:rgba(var(--flow-red),.65)} :root[data-theme] .calendar-day.has-flow[data-flow-level="4"]:not(.fertile){background:#c92338;color:#fff} :root[data-theme] .calendar-day.fertile.has-flow:before{content:'';position:absolute;bottom:3px;left:22%;right:22%;height:4px;border-radius:4px;background:rgba(var(--flow-red),var(--flow-alpha));pointer-events:none} .flow-options .choice>span{gap:7px} .flow-options .choice[data-flow-level]:not([data-flow-level="0"])>span>svg{color:rgba(var(--flow-red),var(--flow-alpha));fill:currentColor;stroke:var(--period-line)} :root[data-theme] .flow-options .choice[data-flow-level]:not([data-flow-level="0"]):has(input:checked)>span{background:rgba(var(--flow-red),var(--flow-alpha));border-color:var(--period-line);color:var(--flow-ink)} :root[data-theme] .flow-options .choice[data-flow-level="4"]:has(input:checked)>span{background:#c92338;color:#fff} .ring-ovulation-layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none} .ring-ovulation-layer circle{fill:var(--ovulation-surface);stroke:var(--ovulation-line);stroke-width:1} .ring-ovulation-layer svg{fill:none;stroke:var(--ovulation-ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} :root[data-theme] .ring-svg .ring-flow{stroke:rgba(var(--flow-red),var(--flow-alpha))} :root[data-theme] .ring-svg .ring-flow[data-flow-level="4"]{stroke:#c92338} :root[data-theme=light] .cycle-card{background:#fff0f0;border-color:#f1d1d5;--ring-neutral:#e8d4d6} :root[data-theme=light] .cycle-card :is(.card-heading>span,.card-heading .icon-button,.cycle-copy>p,.cycle-card-footer,.ring-text>span,.ring-text>small){color:#8c5963} :root[data-theme=light] .cycle-card .ring-text>strong{color:#50313a} :root[data-theme=light] .cycle-card-footer{border-color:#e9c5cc} :root[data-theme=light] .ring-track{stroke:#e8d4d6} :root[data-theme=light] .ring-inner{stroke:#e6b8c2} :root[data-theme=dark] .cycle-card{background:#432b26;border-color:#795047;--ring-neutral:#705047} :root[data-theme=dark] .cycle-card :is(.card-heading>span,.card-heading .icon-button,.cycle-copy>p,.cycle-card-footer,.ring-text>span,.ring-text>small){color:#f2c5b5} :root[data-theme=dark] .cycle-card-footer{border-color:#704653} :root[data-theme=dark] .ring-track{stroke:#705047} :root[data-theme=dark] .ring-inner{stroke:#805061} :root[data-theme] .ring-svg .ring-track{stroke-width:18} .ring-ovulation-layer.is-current circle{fill:var(--accent);stroke:var(--panel);stroke-width:2.5} .ring-ovulation-layer.is-current svg{stroke:#3b211d} :root[data-theme] .calendar-day.today>b{color:var(--accent);font-weight:700} :root[data-theme] .calendar-day.today:after{content:none} :root[data-theme] .insight-metrics .soft-label{background:transparent;border:0;box-shadow:none;border-radius:0;padding:0} :root[data-theme] .settings-topbar{position:sticky;top:0;z-index:30;background:var(--bg)} .intimacy-section{margin-top:26px}.intimacy-group{margin:0 0 26px;padding:0;border:0;min-width:0} .intimacy-group .choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .intimacy-group .choice>span{width:100%;min-height:46px;display:flex;gap:7px;align-items:center;justify-content:center;text-align:center} .intimacy-group svg{flex-shrink:0;color:var(--intimacy-icon)} [data-intimacy=sex]{--intimacy-icon:#ad486c;--intimacy-bg:#f9dce7;--intimacy-line:#d47b9c;--intimacy-ink:#702c46} [data-intimacy=masturbation]{--intimacy-icon:#8258ad;--intimacy-bg:#eee2f9;--intimacy-line:#b08ad5;--intimacy-ink:#563577} [data-intimacy=toys]{--intimacy-icon:#258896;--intimacy-bg:#def2f4;--intimacy-line:#70bbc4;--intimacy-ink:#225d65} [data-intimacy=protection]{--intimacy-icon:#8c7429;--intimacy-bg:#f5edce;--intimacy-line:#c8b467;--intimacy-ink:#66531e} :root[data-theme=dark] [data-intimacy=sex]{--intimacy-icon:#f2a7c3;--intimacy-bg:#562c3d;--intimacy-line:#a5607d;--intimacy-ink:#ffe3ee} :root[data-theme=dark] [data-intimacy=masturbation]{--intimacy-icon:#c5a5ee;--intimacy-bg:#423050;--intimacy-line:#8a69ae;--intimacy-ink:#efddff} :root[data-theme=dark] [data-intimacy=toys]{--intimacy-icon:#8ad5df;--intimacy-bg:#213e45;--intimacy-line:#4e929d;--intimacy-ink:#d4f7fb} :root[data-theme=dark] [data-intimacy=protection]{--intimacy-icon:#dec781;--intimacy-bg:#423b23;--intimacy-line:#9d8950;--intimacy-ink:#f6e9b8} :root[data-theme] .intimacy-group .choice:has(input:checked)>span{background:var(--intimacy-bg);border-color:var(--intimacy-line);color:var(--intimacy-ink)} .choice{position:relative}.choice>input{inset:0;width:100%;height:100%;margin:0;z-index:1;cursor:pointer} .choice:has(input:focus-visible)>span{outline:2px solid var(--accent-dark);outline-offset:2px} .intimacy-group .choice>span{overflow-wrap:anywhere;hyphens:auto} .calendar-day .calendar-day-marks{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:auto;min-height:8px;line-height:1;width:100%} .calendar-day .calendar-entry-marks{display:flex;justify-content:center;align-items:center;gap:2px;height:5px;line-height:1;max-width:100%} .calendar-record-mark{display:block;width:4px;height:4px;flex:0 0 4px;border-radius:50%;background:var(--intimacy-icon)} .calendar-record-mark.diary-mark{background:var(--ink)} .calendar-day.ovulation .calendar-day-marks{height:auto;min-height:14px}.calendar-day-marks>svg{flex:none} .calendar-day{display:block;padding:0}.calendar-day>b{position:absolute;top:15%;left:0;right:0;line-height:1;text-align:center} .calendar-day .calendar-day-marks,.calendar-day.ovulation .calendar-day-marks{position:absolute;left:1px;right:1px;bottom:10%;width:auto;height:12px;min-height:0;display:flex;justify-content:center;align-items:center} .calendar-day .calendar-entry-marks{height:12px} .calendar-record-mark{font-style:normal} .calendar-record-mark.has-count{width:auto;height:12px;min-width:12px;flex:0 0 auto;padding:0 2px;display:flex;align-items:center;justify-content:center;background:var(--intimacy-icon);color:#fff;font-size:8px;font-weight:700;line-height:1;border-radius:9px} :root[data-theme=dark] .calendar-record-mark.has-count{color:#21151b} .intimacy-count{margin-top:16px} @media(max-width:480px){.calendar-entry-marks{gap:1.5px!important}.calendar-record-mark:not(.has-count){width:3px;height:3px;flex-basis:3px}} .calendar-legend .calendar-record-mark:not(.has-count){width:7px;height:7px;flex-basis:7px}.calendar-legend .has-count{min-width:14px;height:14px;font-size:9px} .calendar-record-mark.has-count{width:12px;height:12px;min-width:12px;flex:0 0 12px;padding:0;border-radius:50%;display:grid;place-items:center} .calendar-record-mark.has-count>svg{display:block;width:100%;height:100%;overflow:visible;fill:currentColor;stroke:none} .calendar-record-mark.has-count text{font-family:inherit;font-size:8px;font-weight:700;font-style:normal;font-variant-numeric:tabular-nums;letter-spacing:0} .calendar-legend .has-count{width:14px;height:14px;min-width:14px;flex-basis:14px} /* Compact legend rows: items use their own width, without empty grid cells. */ .calendar-legend{display:flex;flex-direction:column;align-items:flex-start;gap:14px} .calendar-legend-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;width:100%;min-width:0} .calendar-legend-row>span,.calendar-sex-key>span{display:inline-flex;align-items:center;gap:6px;line-height:1.4;white-space:nowrap;flex:0 0 auto} .calendar-legend .calendar-sex-key{display:inline-flex;align-items:center;gap:14px;flex-wrap:nowrap} .calendar-sex-key .calendar-count-key{flex-basis:auto} .legend-ovulation-day{display:block;width:10px;height:10px;flex:0 0 10px;border-radius:4px;border:2px solid var(--ovulation-line);background:var(--ovulation-surface)} .profile-photo-button{position:relative}.profile-photo-label{position:absolute;bottom:0;left:0;right:0;display:block;padding:3px 0;background:var(--accent);color:#3b211d;font-size:9px;font-weight:700;line-height:1.2;text-align:center;letter-spacing:0} @media(max-width:900px){ :root[data-theme=light] .mobile-nav{background:rgba(255,255,255,.46);border-color:rgba(255,255,255,.8);box-shadow:0 8px 28px #372a201c,inset 0 1px 0 #fff,inset 0 -1px 0 #acb1ba29;backdrop-filter:blur(22px) saturate(1.65);-webkit-backdrop-filter:blur(22px) saturate(1.65)} :root[data-theme=light] .mobile-nav-indicator{background:linear-gradient(160deg,#ffffff94,#ffffff32);border-color:#ffffffbf;box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 #bfc4cf66,0 3px 12px #33333318;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)} .mobile-nav{touch-action:none;user-select:none;-webkit-user-select:none}.mobile-nav.is-pill-dragging .mobile-nav-indicator{transition:none;box-shadow:inset 0 1px 0 #fff9,0 6px 20px #0003}.mobile-nav.is-pill-dragging>button{color:var(--muted)}.mobile-nav.is-pill-dragging>button.is-drag-target{color:var(--accent-dark)} } @media(prefers-reduced-transparency:reduce){:root[data-theme] .mobile-nav{background:var(--panel);backdrop-filter:none;-webkit-backdrop-filter:none}:root[data-theme] .mobile-nav-indicator{background:var(--glass-control);backdrop-filter:none;-webkit-backdrop-filter:none}} .feeling-picker{text-align:center;--feeling-color:#5bb7c5;margin:12px auto 24px;padding:4px 18px 20px;border-radius:24px;background:radial-gradient(ellipse at 50% 40%,color-mix(in srgb,var(--feeling-color) 17%,transparent),transparent 72%);transition:background .25s;max-width:480px} .feeling-art{display:block;width:min(100%,300px);height:auto;margin:auto;overflow:visible;color:var(--feeling-color)} .feeling-art path{stroke:color-mix(in srgb,var(--feeling-color) 45%,white);stroke-width:1.1;transform-origin:120px 120px;animation:feeling-breathe 7s ease-in-out infinite alternate} .feeling-art path:nth-of-type(even){animation-delay:-3s}.feeling-art circle{fill:color-mix(in srgb,var(--feeling-color) 25%,white)} .feeling-label{display:block;min-height:28px;margin:4px 0 20px;color:var(--ink);font-size:20px;font-weight:650;line-height:1.3} :root[data-theme] .feeling-picker input[type=range]{display:block;appearance:none;-webkit-appearance:none;width:100%;height:30px;min-height:30px;padding:0;border:0;border-radius:99px;background:color-mix(in srgb,var(--feeling-color) 25%,var(--panel));cursor:ew-resize;touch-action:pan-y} .feeling-picker input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:28px;height:28px;border:1px solid #ffffff80;border-radius:50%;background:#fff;box-shadow:0 2px 6px #0002} .feeling-picker input::-moz-range-thumb{width:28px;height:28px;border:1px solid #ffffff80;border-radius:50%;background:#fff;box-shadow:0 2px 6px #0002} .feeling-scale{display:flex;justify-content:space-between;gap:10px;font-size:9px;color:var(--muted);margin-top:9px}.feeling-scale span:last-child{text-align:right}.feeling-clear{margin-top:14px} .feeling-field{min-width:0}.feeling-field .feeling-art{width:min(100%,230px)}.wellbeing .section-head h2{max-width:none} @keyframes feeling-breathe{from{transform:scale(.97) rotate(-2deg)}to{transform:scale(1.025) rotate(2deg)}} @media(prefers-reduced-motion:reduce){.feeling-art path{animation:none}} .diary-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px}.diary-toolbar .diary-intro{flex:1;min-width:0;display:block;padding:0;margin:0;border:0;background:transparent;box-shadow:none}.diary-toolbar .diary-intro p{margin:0;max-width:none}.diary-toolbar .count-label{display:none}.diary-toolbar>.primary{flex-shrink:0} .entry-sheet-form .entry-section{margin:24px 0 28px;padding:0;border:0;min-width:0}.entry-section .choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.entry-section .choice>span{width:100%;min-height:46px;display:flex;align-items:center;justify-content:center;gap:7px;overflow-wrap:anywhere;text-align:center}.entry-section .choice svg{flex-shrink:0} .entry-symptoms{--symptom-color:#8766ac}.entry-symptoms svg{color:var(--symptom-color)}:root[data-theme] .entry-symptoms .choice:has(input:checked)>span{background:#eee2f9;border-color:#b08ad5;color:#563577}:root[data-theme=dark] .entry-symptoms .choice:has(input:checked)>span{background:#423050;border-color:#8a69ae;color:#efddff}:root[data-theme=dark] .entry-symptoms{--symptom-color:#c5a5ee} .entry-score{min-width:0;padding:14px 12px;border:1px solid var(--line);border-radius:16px}.entry-score .toggle-row{padding:0;margin:0 0 12px;border:0;gap:6px}.entry-score .toggle-row>span{display:flex;gap:6px;align-items:center}.entry-score .switch{flex-shrink:0}.entry-score-value{display:flex;align-items:baseline;gap:5px;margin-bottom:8px;white-space:nowrap}.entry-score-value output{display:inline;font-weight:600}.pain-score .toggle-row svg{color:var(--period-color)}.energy-score .toggle-row svg{color:#a18b37}.entry-section .form-row>label>svg{vertical-align:middle;color:var(--accent-dark);margin-right:4px} @media(max-width:350px){.entry-scores{grid-template-columns:1fr}} .profile-photo-button{overflow:visible}.profile-photo-button>img{clip-path:circle(50%);border-radius:inherit}.profile-photo-button>.profile-photo-label{left:auto;right:-4px;bottom:-4px;width:24px;height:24px;padding:0;display:grid;place-items:center;border:2px solid var(--panel);border-radius:50%;background:var(--accent);color:#3b211d;box-sizing:border-box}.profile-photo-label svg{display:block;width:13px;height:13px} .feeling-art path{animation:none}.feeling-picker input[type=range]{transition:background-color 180ms linear}.feeling-label{transition:color 180ms}.wellbeing-footer:empty{display:none} :root[data-theme] .page-heading.diary-toolbar{align-items:center;justify-content:space-between}:root[data-theme] .page-heading.diary-toolbar>.primary{align-self:center} @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){:root[data-theme] .mobile-nav{background:var(--panel)}} @media(prefers-reduced-motion:reduce){.mobile-nav-indicator{transition:none}} .mobile-nav{-webkit-touch-callout:none} #preferences-form>.form-row{align-items:end} .entry-section .form-row{align-items:end} /* Keep the glow fully transparent at the picker edges, including its top edge. */ .feeling-picker{background:radial-gradient(ellipse closest-side at 50% 45%,color-mix(in srgb,var(--feeling-color) 17%,transparent) 0%,transparent 100%)} :root[data-theme] .mobile-nav.is-pill-dragging>button{color:var(--muted)} :root[data-theme] .mobile-nav.is-pill-dragging>button.is-drag-target{color:var(--accent-dark)} .feeling-track{position:relative}.feeling-detents{position:absolute;inset:0 14px;display:flex;justify-content:space-between;align-items:center;pointer-events:none}.feeling-detents i{display:block;width:4px;height:4px;border-radius:50%;background:color-mix(in srgb,var(--ink) 30%,transparent);transition:opacity .12s}.feeling-detents .is-under-thumb{opacity:0} :root[data-theme] .entry-score input[type=range]{display:block;appearance:none;-webkit-appearance:none;width:100%;height:26px;min-height:26px;padding:0;border:0;border-radius:99px;background:color-mix(in srgb,var(--score-color) 30%,var(--panel));cursor:ew-resize;touch-action:pan-y}.pain-score{--score-color:var(--period-color)}.energy-score{--score-color:#b69c42} .entry-score input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:24px;height:24px;background:#fff;border:1px solid #ffffff80;border-radius:50%;box-shadow:0 2px 5px #0002}.entry-score input::-moz-range-thumb{width:24px;height:24px;background:#fff;border:1px solid #ffffff80;border-radius:50%;box-shadow:0 2px 5px #0002}.entry-score input:disabled{opacity:.35;cursor:default} :root[data-theme] .diary-list .diary-entry{display:grid;grid-template-columns:44px minmax(0,1fr) 18px;align-items:center;gap:12px;padding:14px 16px;border-radius:20px;min-height:76px;text-align:left} .diary-list .diary-date{width:44px;height:52px;grid-column:1;grid-row:1;border-radius:12px}.diary-list .diary-date b{font-size:22px;line-height:1.1}.diary-list .diary-date span{font-size:10px} .diary-list .diary-body{grid-column:2;grid-row:1;min-width:0}.diary-list .diary-body .section-head{gap:4px 10px;flex-wrap:wrap;align-items:center;justify-content:space-between}.diary-list .diary-body h3{font-size:14px;line-height:1.35;letter-spacing:-.15px}.diary-list .diary-mood{font-size:10px;line-height:1.4;gap:4px}.diary-list .diary-summary{font-size:11px;line-height:1.5;margin:6px 0 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere} .diary-list .chip-list{margin-top:7px;gap:4px}.diary-list .chip{font-size:9px;padding:2px 6px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.diary-chevron{grid-column:3;grid-row:1;display:grid;place-items:center;align-self:center;justify-self:end;color:var(--muted)} /* One spacing rhythm for the diary sheet; actions remain within thumb reach. */ .entry-sheet-form{display:flex;flex-direction:column;gap:20px} .entry-sheet-form>label,.entry-sheet-form .entry-section{margin:0} .entry-sheet-form .feeling-picker{margin:8px auto 0;padding-bottom:0} .entry-sheet-form .feeling-clear{margin-top:12px;min-height:36px} .entry-sheet-form .form-row{margin:0} .entry-sheet-form textarea{min-height:80px;margin-bottom:0} .modal:has(.entry-sheet-form) .sheet-content{padding-bottom:8px} .modal:has(.entry-sheet-form) .sheet-footer{padding-top:12px} .sheet-footer .entry-actions{gap:12px} :root[data-theme] .sheet-footer .entry-delete{display:grid;place-items:center;flex:0 0 56px;width:56px;height:56px;min-height:56px;padding:0;margin:0;border:1px solid color-mix(in srgb,var(--period-color) 32%,var(--line));border-radius:50%;background:color-mix(in srgb,var(--period-color) 10%,var(--panel));color:var(--period-color)} .entry-delete svg{width:20px;height:20px} :root[data-theme] .page-heading.diary-toolbar>.diary-add{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;min-height:44px;max-width:44px;padding:0;border-radius:50%} .diary-add svg{width:22px;height:22px} .entry-score-heading{display:flex;align-items:center;gap:7px;margin-bottom:12px;font-size:13px;font-weight:600}.pain-score .entry-score-heading svg{color:var(--period-color)}.energy-score .entry-score-heading svg{color:#b69c42} .score-track{position:relative}.score-detents{position:absolute;inset:0 12px;display:flex;align-items:center;justify-content:space-between;pointer-events:none}.score-detents i{display:block;width:3px;height:3px;border-radius:50%;background:color-mix(in srgb,var(--ink) 35%,transparent);transition:opacity .12s}.score-detents .is-under-thumb{opacity:0} /* Calm editorial cards with explicit, reachable actions. */ :root[data-theme] .care-card{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:16px;padding:24px;min-height:0;background:linear-gradient(140deg,#eef2e4,#e1e8d3);border:1px solid #d5ddc7;border-radius:24px} :root[data-theme=dark] .care-card{background:linear-gradient(140deg,#293122,#20271c);border-color:#424e35} :root[data-theme] .care-card .tiny-label{font-size:10px;letter-spacing:1.2px;line-height:1.4} :root[data-theme] .care-card h2{font-size:28px;font-weight:600;line-height:1.15;letter-spacing:-.8px;margin:0;max-width:22ch} :root[data-theme] .care-card p{font-size:13px;line-height:1.65;margin:0;max-width:42ch} :root[data-theme] .care-action{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:46px;width:100%;padding:12px 16px;margin-top:4px;border:1px solid #64724e;border-radius:15px;background:#465735;color:#fff;font-size:13px;font-weight:650} :root[data-theme=dark] .care-action{background:#d7e6bd;color:#27351c;border-color:#d7e6bd} .care-action:hover{filter:brightness(1.06)}.care-action svg{flex:none} :root[data-theme] .next-card{display:grid;grid-template-columns:40px minmax(0,1fr);grid-template-rows:auto auto auto 1fr auto;align-items:start;gap:8px 12px;padding:24px;border-radius:24px} :root[data-theme] .next-card .small-icon{grid-column:1;grid-row:1/4;width:40px;height:40px;margin:0;border-radius:13px} :root[data-theme] .next-card>.tiny-label{grid-column:2;grid-row:1;font-size:9px;line-height:1.5;letter-spacing:.8px} :root[data-theme] .next-card h2{grid-column:2;grid-row:2;font-size:27px;line-height:1.15;margin:0;letter-spacing:-.7px} :root[data-theme] .next-card>p{grid-column:2;grid-row:3;font-size:12px;line-height:1.5;margin:0} :root[data-theme] .next-card .next-line,:root[data-theme] .next-card .next-info{display:none} :root[data-theme] .next-card .next-action{grid-column:1/-1;grid-row:5;display:flex;justify-content:space-between;align-items:center;width:100%;min-height:46px;padding:12px 16px;margin:12px 0 0;border-radius:15px;font-size:13px;font-weight:650} /* Identical rows keep all cycle values on one baseline despite wrapped labels. */ :root[data-theme] .metrics-grid>.metric{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:36px 64px 36px auto;align-items:start;gap:12px;padding:18px 14px;border-radius:22px} .metrics-grid>.metric>div{display:contents} .metrics-grid>.metric .metric-icon{grid-row:1;width:34px;height:34px;border-radius:11px} :root[data-theme] .metrics-grid>.metric>div>span:first-child{grid-row:2;font-size:11px;line-height:1.45} :root[data-theme] .metrics-grid>.metric b{grid-row:3;align-self:baseline;font-size:30px;line-height:36px;white-space:nowrap;font-variant-numeric:tabular-nums;letter-spacing:-.7px} .metrics-grid>.metric b small{font-size:10px;letter-spacing:0;font-weight:400} :root[data-theme] .metrics-grid .metric-note{grid-row:4;font-size:10px;line-height:1.4;color:var(--muted)} .metrics-grid .metric-tag{grid-row:4;position:static;justify-self:start} :root[data-theme] .metrics-grid>.metric[data-wellbeing]{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:36px 64px 36px;align-items:start} .metrics-grid>.metric[data-wellbeing] .metric-icon,.metrics-grid>.metric[data-wellbeing]>div>span,.metrics-grid>.metric[data-wellbeing] b{grid-column:1} .metrics-grid>.metric[data-wellbeing] .diary-metric-action{grid-column:2;grid-row:1/4;align-self:center;display:flex;align-items:center;gap:12px;font-size:13px} @media(max-width:350px){.metrics-grid>.metric[data-wellbeing] .diary-metric-action{font-size:11px;padding:10px;gap:6px}} :root[data-theme] .insight-metrics>.card{display:grid;grid-template-rows:38px 64px 38px auto;gap:12px;align-content:start;padding:20px 16px} :root[data-theme] .insight-metrics>.card>p{margin:0;font-size:11px;line-height:1.45;min-height:0} :root[data-theme] .insight-metrics>.card>h2{margin:0;font-size:30px;line-height:38px;white-space:nowrap;font-variant-numeric:tabular-nums} :root[data-theme] .insight-metrics>.card>.soft-label{font-size:10px;line-height:1.4} @media(max-width:350px){:root[data-theme] .metrics-grid>.metric{padding:16px 10px;grid-template-rows:36px 64px 36px auto;gap:10px}:root[data-theme] .insight-metrics>.card{padding:16px 10px;grid-template-rows:38px 64px 38px auto}} .metrics-grid>.metric>div>span:first-child,.insight-metrics>.card>p{overflow-wrap:anywhere;hyphens:auto} @media(max-width:350px){:root[data-theme] .metrics-grid>.metric>div>span:first-child,:root[data-theme] .insight-metrics>.card>p{font-size:10px}} .care-heading{display:flex;align-items:center;width:100%;min-height:14px;padding-right:74px}.care-diary-icon{position:absolute;right:28px;top:24px;display:grid;place-items:center;width:82px;height:82px;color:#52643c;transform:rotate(15deg);pointer-events:none}.care-diary-icon svg{width:78px;height:78px;stroke-width:1.35}:root[data-theme=dark] .care-diary-icon{color:#d7e6bd} .cycle-variation{position:relative}:root[data-theme] .cycle-variation>.variation-info{position:absolute;right:8px;top:10px;display:grid;place-items:center;width:36px;height:36px;min-width:36px;padding:0;color:var(--muted);border-radius:50%}.variation-info:hover{background:color-mix(in srgb,var(--ink) 7%,transparent);color:var(--ink)} :root[data-theme] .topbar{position:sticky;top:0;z-index:30;background:var(--bg)} :root[data-theme] .care-card{padding:22px;gap:10px}:root[data-theme] .care-card h2{width:100%;padding-right:80px;font-size:26px}.care-card .care-action{margin-top:4px} .cycle-count{display:inline-flex;align-items:center;flex:none;padding:4px 8px;border:1px solid var(--line);border-radius:8px;color:var(--muted);font-size:11px;line-height:1.3;font-variant-numeric:tabular-nums;white-space:nowrap} .cycle-timeline{padding:20px 0;border-top:1px solid var(--line)}.cycle-timeline:first-child{border-top:0}.cycle-timeline>header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.cycle-timeline h3{font-size:14px;line-height:1.5;font-weight:600}.cycle-timeline header p{margin:3px 0 0;font-size:11px;color:var(--muted)}.cycle-timeline header .icon-button{width:36px;height:36px;flex:none;border:1px solid var(--line);border-radius:50%;color:var(--accent-dark)} .cycle-timeline-scroll{overflow:auto;max-width:100%;overscroll-behavior-x:contain;padding-bottom:8px}.cycle-timeline-grid{min-width:calc(108px + var(--cycle-days)*26px)}.timeline-row{display:grid;grid-template-columns:108px repeat(var(--cycle-days),minmax(26px,1fr));align-items:center;min-height:30px;gap:0}.timeline-label{position:sticky;left:0;z-index:2;display:flex;align-items:center;gap:5px;background:var(--panel);height:100%;font-size:10px;color:var(--muted);padding-right:8px}.timeline-label svg{flex:none}.timeline-axis>span:not(.timeline-label),.timeline-dates>span:not(.timeline-label){text-align:center;font-size:9px;color:var(--muted);font-variant-numeric:tabular-nums} .timeline-phases{min-height:32px;margin:5px 0}.timeline-day{height:28px;display:grid;place-items:center;background:color-mix(in srgb,var(--ink) 7%,var(--panel));border-right:1px solid var(--panel);color:var(--ovulation-line);padding:0}.timeline-day.is-period{background:linear-gradient(90deg,color-mix(in srgb,#e25578 calc(var(--period-fade)*100%),var(--panel)),color-mix(in srgb,#e25578 calc(var(--period-fade)*85%),var(--panel)))}.timeline-day[data-flow-level="1"]{background:#a95d73}.timeline-day[data-flow-level="2"]{background:#d16b8b}.timeline-day[data-flow-level="3"]{background:#ce4369}.timeline-day[data-flow-level="4"]{background:#b9204b}.timeline-day.is-fertile{background:var(--ovulation-surface)}.timeline-day svg{color:var(--ovulation-line);background:var(--panel);border-radius:50%;width:22px;height:22px;padding:2px} .timeline-event{height:30px;display:grid;place-items:center;border:0;border-right:1px solid color-mix(in srgb,var(--line) 35%,transparent);padding:0}.timeline-events{--event-color:#e397b5}.timeline-events[data-category=masturbation]{--event-color:#bd9be2}.timeline-events[data-category=toys]{--event-color:#67bec9}.timeline-events[data-category=protection]{--event-color:#d0b759}.timeline-events[data-category=diary]{--event-color:#9aaa81}.timeline-event i{display:grid;place-items:center;font-style:normal;width:22px;height:22px;border-radius:50%;background:color-mix(in srgb,var(--event-color) 22%,var(--panel));color:var(--event-color);font-size:11px;font-weight:700}.timeline-event:hover,.timeline-day:hover{outline:1px solid var(--accent);outline-offset:-1px} .timeline-legend{display:flex;flex-wrap:wrap;gap:10px 16px;font-size:10px;line-height:1.5;color:var(--muted);margin:14px 0 20px}.timeline-legend span{display:inline-flex;align-items:center;gap:5px}.timeline-legend .period-key:before,.timeline-legend .fertile-key:before{content:'';width:10px;height:10px;border-radius:3px;background:#d16b8b}.timeline-legend .fertile-key:before{background:var(--ovulation-surface);border:1px solid var(--ovulation-line)} .metric-explained{position:relative}:root[data-theme] .metric-explained>.variation-info{position:absolute;right:8px;top:10px;display:grid;place-items:center;width:36px;height:36px;min-width:36px;padding:0;color:var(--muted);border-radius:50%} .demo-history-button{margin:16px 0;font-size:12px;min-height:44px} /* Shared linear scale: equal day widths in every dated cycle block. */ .cycle-timelines{display:grid;gap:14px;margin-top:16px;min-width:0} .cycle-timelines .cycle-timeline,.cycle-timelines .cycle-timeline:first-child{min-width:0;padding:16px;border:1px solid var(--line);border-radius:18px;background:color-mix(in srgb,var(--ink) 2%,var(--panel))} .cycle-timeline>header{margin-bottom:12px}.cycle-timeline h3{font-size:12px}.cycle-timeline header p{font-size:10px} .cycle-timeline-grid{min-width:calc(64px + var(--history-days)*6px);width:100%} .timeline-row{grid-template-columns:64px repeat(var(--history-days),minmax(6px,1fr));min-height:28px} .timeline-label{font-size:8px;gap:3px;background:var(--panel);padding-right:4px}.timeline-label svg{width:11px;height:11px} .timeline-axis>span:not(.timeline-label),.timeline-dates>span:not(.timeline-label){font-size:8px} .timeline-phases{min-height:28px;margin:4px 0}.timeline-day{height:12px;min-height:12px;border:0;border-radius:0;background:color-mix(in srgb,var(--ink) 6%,var(--panel));position:relative;overflow:visible} .timeline-phases .timeline-day:nth-child(2){border-radius:8px 0 0 8px}.timeline-phases .timeline-day:last-child{border-radius:0 8px 8px 0} .timeline-day svg{position:absolute;z-index:1;width:18px;height:18px;padding:2px;box-shadow:0 0 0 2px var(--panel)} .timeline-day.is-fertile{background:color-mix(in srgb,var(--ovulation-line) 65%,var(--panel))} .timeline-event{height:26px;border:0}.timeline-event i{width:min(20px,100%);height:auto;aspect-ratio:1;border-radius:50%;font-size:9px;line-height:1}.timeline-event i svg{width:min(12px,100%);height:auto} @media(max-width:480px){.cycle-timelines .cycle-timeline,.cycle-timelines .cycle-timeline:first-child{padding:12px}.history-card:has(.cycle-timelines){padding-inline:14px}.timeline-label{font-size:8px}} .cycle-timeline h3{font-size:16px;line-height:1.4;letter-spacing:-.25px;font-weight:650}.cycle-length-badge{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:0 0 54px;width:54px;height:54px;border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line));border-radius:50%;background:color-mix(in srgb,var(--accent) 9%,var(--panel));color:var(--ink);font-variant-numeric:tabular-nums}.cycle-length-badge b{font-size:24px;font-weight:650;line-height:1.05}.cycle-length-badge small{font-size:9px;line-height:1.4;color:var(--muted)} .timeline-event-key,.timeline-count-key{--event-color:#e397b5}.timeline-event-key[data-category=masturbation]{--event-color:#bd9be2}.timeline-event-key[data-category=toys]{--event-color:#67bec9}.timeline-event-key[data-category=protection]{--event-color:#d0b759}.timeline-event-key[data-category=diary]{--event-color:#9aaa81}.timeline-event-key i,.timeline-count-key i{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;font-style:normal;font-weight:650;color:var(--event-color);background:color-mix(in srgb,var(--event-color) 22%,var(--panel))} .cycle-length-badge{flex-basis:44px;width:44px;height:44px}.cycle-length-badge b{font-size:20px}.cycle-length-badge small{font-size:8px}:root[data-theme] .history-card .cycle-count{display:grid;place-items:center;width:44px;height:44px;min-width:44px;padding:0;border-radius:50%;border:1px solid var(--glass-border);background:var(--glass-control);color:var(--accent-dark);font-size:18px;font-weight:600}.current-cycle-section{padding:18px 0 22px;margin:0 0 20px;border-bottom:1px solid var(--line)}.cycle-section-title{font-size:14px;font-weight:600;margin:0 0 12px}.current-cycle-section .cycle-timeline{border:1px solid var(--line);border-radius:18px;padding:12px 16px}.current-cycle-note{font-size:10px;color:var(--muted);line-height:1.5;margin-top:10px}.timeline-day.is-future{opacity:.35}.timeline-day.is-today:after{content:'';position:absolute;z-index:2;width:6px;height:6px;border-radius:50%;background:var(--ink);outline:2px solid var(--panel)} /* Diagram labels are supplied once by the shared legend. */ .timeline-row>.timeline-label{display:none}.timeline-row{grid-template-columns:repeat(var(--history-days),minmax(6px,1fr))}.cycle-timeline-grid{min-width:calc(var(--history-days)*6px)} :root[data-theme] .cycle-shared-legend{font-size:10px;line-height:1.5;gap:12px;margin-top:20px}.cycle-shared-legend .calendar-legend-row{gap:10px 16px}.cycle-shared-legend .dot,.cycle-shared-legend .calendar-record-mark{width:9px;height:9px;min-width:9px;flex-basis:9px}.cycle-shared-legend .has-count{display:grid;place-items:center;width:18px;height:18px;min-width:18px;flex-basis:18px;font-size:11px;font-style:normal}.cycle-shared-legend .calendar-sex-key{gap:14px}.cycle-shared-legend .dot.orange{background:var(--period-color)}.cycle-shared-legend .dot.green{background:var(--ovulation-line)} .timeline-events[data-intimacy]{--event-color:var(--intimacy-icon)}.timeline-event i{background:var(--event-color);color:var(--panel)}.timeline-events[data-category=diary]{--event-color:#9aaa81}.calendar-record-mark.diary-mark{background:#9aaa81} .current-cycle-section{margin:20px 0;padding:22px;border:1px solid var(--line);border-radius:24px}.current-cycle-section .cycle-timeline{padding:12px;border:0;border-radius:0}.current-cycle-section .cycle-section-title{font-size:20px}.current-cycle-section .current-cycle-note{margin-bottom:0} @media(max-width:480px){.current-cycle-section{padding:18px 14px}} .timeline-day.is-fertile{background:var(--ovulation-line)} .current-cycle-heading{display:flex;align-items:center;gap:10px;margin-bottom:12px}.current-cycle-heading .cycle-section-title{margin:0}.current-cycle-info{display:grid;place-items:center;width:36px;height:36px;min-width:36px;padding:0;border-radius:50%;color:var(--muted)} .history-card>.section-head{display:grid;grid-template-columns:minmax(0,1fr) 44px;align-items:center;gap:12px}.history-card>.section-head>h2{margin:0;line-height:1.2}.history-card>.section-head>.cycle-count{align-self:center;justify-self:end;margin:0} :root[data-theme] .history-card,:root[data-theme] .current-cycle-section{border:0;box-shadow:none} :root[data-theme] .current-cycle-section{padding:0;background:transparent;border:0;border-radius:0;box-shadow:none}.current-cycle-section .current-cycle-heading{margin:0 0 14px;padding-inline:2px}.current-cycle-section .cycle-timeline{padding:22px;border:0;border-radius:24px;background:var(--panel)}@media(max-width:480px){.current-cycle-section .cycle-timeline{padding:18px 14px}} :root[data-theme] .history-card{padding:0;background:transparent;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}:root[data-theme] .history-card:has(.cycle-timelines){padding:0}.history-card>.section-head{margin:0 0 16px;padding-inline:2px}.history-card .cycle-timelines{margin-top:0} /* Match calendar flow colours; unknown intensity is never inferred. */ .timeline-day.is-period[data-flow-level="0"]{background:var(--period-surface)} .timeline-day[data-flow-level="1"],.timeline-day[data-flow-level="2"],.timeline-day[data-flow-level="3"]{background:rgba(var(--flow-red),var(--flow-alpha))} .timeline-day[data-flow-level="4"]{background:#c92338} .current-cycle-section .cycle-timeline,.cycle-timelines .cycle-timeline,.cycle-timelines .cycle-timeline:first-child{border:1px solid var(--line);border-radius:24px;background:var(--panel)} .timeline-day[data-flow-level="1"],.timeline-day[data-flow-level="2"],.timeline-day[data-flow-level="3"],.timeline-day[data-flow-level="4"]{background:linear-gradient(90deg,var(--timeline-flow),var(--timeline-next-flow))} .cycle-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:20px}.cycle-fact{min-width:0;padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--panel);display:flex;flex-direction:column;gap:8px}.cycle-fact>span{font-size:12px;line-height:1.4;color:var(--muted)}.cycle-fact>b{font-size:28px;font-weight:650;line-height:1.2;color:var(--ink);font-variant-numeric:tabular-nums}.cycle-fact small{font-size:12px;font-weight:400;color:var(--muted)}.cycle-facts .fact-total{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between}.cycle-facts .fact-dates{grid-column:1/-1}.cycle-facts .fact-dates b{font-size:15px;line-height:1.5} /* Each date is a solid observation, using the calendar's intensity palette. */ .timeline-day[data-flow-level="1"],.timeline-day[data-flow-level="2"],.timeline-day[data-flow-level="3"]{background:rgba(var(--flow-red),var(--flow-alpha));background-image:none}.timeline-day[data-flow-level="4"]{background:#c92338;background-image:none}.timeline-day.is-period[data-flow-level="0"]{background:var(--period-surface);background-image:none} /* Round markers must not inherit the smaller calendar-cell dimensions. */ :root[data-theme] .cycle-shared-legend .calendar-record-mark:not(.has-count),:root[data-theme] .cycle-shared-legend .dot{display:block;box-sizing:border-box;flex:0 0 9px;width:9px;min-width:9px;max-width:9px;height:9px;min-height:9px;max-height:9px;padding:0;border-radius:50%;aspect-ratio:1} :root[data-theme] .cycle-shared-legend .legend-ovulation-day{box-sizing:border-box;flex:0 0 10px;width:10px;height:10px;min-width:10px;min-height:10px;padding:0;border-radius:50%} :root[data-theme] .cycle-shared-legend .has-count{box-sizing:border-box;flex:0 0 18px;width:18px;height:18px;min-width:18px;min-height:18px;max-width:18px;max-height:18px;padding:0;border-radius:50%;aspect-ratio:1;line-height:1} .timeline-event i{box-sizing:border-box;display:grid;place-items:center;width:min(18px,100%);height:auto;min-width:0;min-height:0;aspect-ratio:1;border-radius:50%;padding:0;overflow:hidden;font-size:8px;line-height:1;flex:none} .timeline-event i svg{display:block;width:66%;height:66%;max-width:66%;max-height:66%;padding:0;margin:0;stroke-width:1.7;overflow:hidden} .timeline-event:focus-visible{outline:2px solid var(--accent-dark);outline-offset:1px;border-radius:50%} /* Explicit absence of flow is neutral, rather than the unknown period tint. */ :root[data-theme] .calendar-day.period.has-no-flow{background:var(--panel);color:var(--ink);border-color:var(--line)} :root[data-theme] .flow-options .choice:has(input[name="flow"][value="Нет"]:checked)>span{background:var(--panel);color:var(--ink);border-color:var(--accent-dark);box-shadow:inset 0 0 0 1px var(--accent-dark)} :root[data-theme] .timeline-day.has-no-flow{background:color-mix(in srgb,var(--ink) 6%,var(--panel));background-image:none} .timeline-day.is-today:after{background:var(--accent)} /* Ovulation is highlighted only in its phase-bar cell. */ .timeline-day.is-ovulation-day{box-shadow:inset 0 0 0 1px var(--ovulation-line);border-radius:0;background:var(--ovulation-line)} .timeline-day.is-ovulation-day svg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:block;box-sizing:border-box;width:14px;height:14px;padding:0;background:transparent;border-radius:0;box-shadow:none;color:var(--panel);overflow:visible;stroke-width:1.8} .timeline-day.is-today:after{left:50%;top:50%;transform:translate(-50%,-50%)} .timeline-day.is-today.is-ovulation-day:after{top:calc(100% + 5px)} /* Keep the phase rows in their own stacking context. */ .cycle-timeline-grid{position:relative;isolation:isolate} .cycle-timeline-grid>.timeline-row{position:relative;z-index:1} .timeline-day.is-ovulation-day{background:color-mix(in srgb,var(--ovulation-line) 72%,#102f33);box-shadow:none} .timeline-day.is-fertile:not(.is-ovulation-day)[data-flow-level="0"]{background:var(--ovulation-surface)}.cycle-shared-legend .dot.green{background:var(--ovulation-surface);border:1px solid var(--ovulation-line)} /* One ovulation palette shared by calendar, timeline and legend. */ .timeline-day.is-fertile:not(.is-ovulation-day)[data-flow-level="0"]{background:var(--fertility-surface)} .timeline-day.is-ovulation-day{background:var(--ovulation-surface);box-shadow:inset 0 0 0 1px var(--ovulation-line)} :root[data-theme] .cycle-shared-legend .dot.green{background:var(--fertility-surface);border:1px solid var(--fertility-line)} :root[data-theme] .cycle-shared-legend .legend-ovulation-day{background:var(--ovulation-surface);border:2px solid var(--ovulation-line)} /* Compact detail metrics follow Безумно.Команда's taskDetailStats grid. */ .cycle-facts{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:stretch;margin-bottom:24px}.cycle-facts .cycle-fact,.cycle-facts .fact-total{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:24px 36px minmax(26px,auto);align-content:start;align-items:start;justify-content:initial;grid-column:auto;gap:7px;min-height:126px;padding:15px;border:1px solid var(--line);border-radius:17px;background:color-mix(in srgb,var(--ink) 3%,var(--panel))}.cycle-fact>svg{display:block;width:23px;height:23px;color:var(--accent-dark)}.cycle-fact>span{font-size:12px;line-height:18px}.cycle-fact>b{font-size:22px;line-height:1.25;overflow-wrap:anywhere}.cycle-fact small{font-size:11px}.cycle-facts .fact-dates{grid-column:1/-1;grid-template-rows:24px 18px auto;min-height:112px}.cycle-facts .fact-dates b{font-size:15px;line-height:1.4}@media(max-width:350px){.cycle-facts{gap:8px}.cycle-facts .cycle-fact{padding:12px}.cycle-fact>span{font-size:11px}.cycle-fact>b{font-size:20px}} /* Solid ring segments match the calendar surfaces, not the card behind the SVG. */ :root[data-theme] .ring-svg .ring-fertile{stroke:var(--fertility-surface)} :root[data-theme] .ring-svg .ring-period{stroke:var(--period-surface)} :root[data-theme] .ring-svg .ring-flow{stroke:color-mix(in srgb,rgb(var(--flow-red)) calc(var(--flow-alpha)*100%),var(--panel))} :root[data-theme] .ring-svg .ring-flow[data-flow-level="4"]{stroke:#c92338} :root[data-theme] .ring-svg .ring-ovulation-day{stroke:var(--ovulation-surface)} :root[data-theme] .ring-svg .ring-no-flow{stroke:var(--panel)} :root[data-theme] .next-card .next-action{background:linear-gradient(160deg,#f3b1bd,#eb95a6);border-color:#ef9fae;color:#45212a;box-shadow:inset 0 1px 0 #ffffff80,0 5px 14px #c5688220} :root[data-theme=dark] .next-card .next-action{background:linear-gradient(160deg,#e8a0b0,#d8899d);border-color:#e5a3b1;color:#351b23} /* Unified primary action palette; peach remains reserved for chart accents. */ :root{--action-fill:linear-gradient(160deg,#f3b1bd,#eb95a6);--action-border:#ef9fae;--action-ink:#45212a;--action-shadow:inset 0 1px 0 #ffffff80,0 5px 14px #c5688220} :root[data-theme=dark]{--action-fill:linear-gradient(160deg,#e8a0b0,#d8899d);--action-border:#e5a3b1;--action-ink:#351b23;--action-shadow:inset 0 1px 0 #ffffff38,0 5px 14px #0002} :root[data-theme] :is(.primary,.dark-button),:root[data-theme] .next-card .next-action,:root[data-theme] #pwa-update .primary{background:var(--action-fill);border:1px solid var(--action-border);color:var(--action-ink);box-shadow:var(--action-shadow)} :root[data-theme] :is(.primary,.dark-button):hover,:root[data-theme] .next-card .next-action:hover,:root[data-theme] #pwa-update .primary:hover{background:var(--action-fill);color:var(--action-ink);border-color:var(--action-border)} /* Dark ring: muted rose surface and legible, ordered intensity steps. */ :root[data-theme=dark] .cycle-card{background:#2b2429;border-color:#4c3943;--ring-neutral:#51434c} :root[data-theme=dark] .cycle-card :is(.card-heading>span,.card-heading .icon-button,.cycle-copy>p,.cycle-card-footer,.ring-text>span,.ring-text>small){color:#d3b7c3} :root[data-theme=dark] .cycle-card .ring-text>strong{color:#fae7ef} :root[data-theme=dark] .ring-track{stroke:#352b32} :root[data-theme=dark] .ring-svg .ring-neutral{stroke:#51434c} :root[data-theme=dark] .ring-svg .ring-period{stroke:#765162} :root[data-theme=dark] .ring-svg .ring-flow[data-flow-level="1"]{stroke:#785363} :root[data-theme=dark] .ring-svg .ring-flow[data-flow-level="2"]{stroke:#a4627c} :root[data-theme=dark] .ring-svg .ring-flow[data-flow-level="3"]{stroke:#cc7894} :root[data-theme=dark] .ring-svg .ring-flow[data-flow-level="4"]{stroke:#ed91ab} :root[data-theme=dark] .ring-svg .ring-fertile{stroke:#315e68} :root[data-theme=dark] .ring-svg .ring-ovulation-day{stroke:#80cbd6} :root[data-theme=dark] .ring-svg .ring-no-flow{stroke:#51434c} /* Keep metric numbers and units on the same baseline. */ :root[data-theme] .insight-metrics>.card>h2,:root[data-theme] .metrics-grid .metric b{display:inline-flex;align-items:baseline;gap:5px;white-space:nowrap} :root[data-theme] .insight-metrics>.card>h2 small,:root[data-theme] .metrics-grid .metric b small{display:inline;flex:none;margin:0;white-space:nowrap;width:auto} :root[data-theme] input.switch:checked{background:var(--action-fill);border-color:var(--action-border)} :root[data-theme] .profile-photo-button>.profile-photo-label{background:var(--action-fill);color:var(--action-ink)} :root[data-theme] .auth-story .auth-plaques>span:nth-child(2){background:var(--action-fill);border-color:var(--action-border);color:var(--action-ink);box-shadow:var(--action-shadow)} :root[data-theme] .brand-dot{color:#df8197} :root[data-theme] .auth-story .auth-illustration>img{background:var(--action-fill);border-color:var(--action-border);box-shadow:var(--action-shadow)} :root[data-theme] .auth-story .auth-illustration .orbit{border-color:color-mix(in srgb,var(--action-border) 45%,transparent)} :root{--rose-accent-ink:#ac4b68;--focus-ring:#c26783}:root[data-theme=dark]{--rose-accent-ink:#f2adbf;--focus-ring:#f0a5b9} :root[data-theme] .quiz-progress i:before{background:var(--action-fill)} :root[data-theme] .quiz-count,:root[data-theme] .privacy-button,:root[data-theme] .theme-selector button[aria-pressed="true"],:root[data-theme] .auth-panel .forgot-password{color:var(--rose-accent-ink)} .auth-login-wrap{position:relative;align-self:center;min-width:0;isolation:isolate}.auth-login-wrap>.auth-panel{position:relative;z-index:1;background:var(--panel)} :root[data-theme] .auth-login-wrap>.auth-illustration{display:grid;place-items:center;position:absolute;z-index:0;right:12px;top:-164px;width:180px;height:180px;margin:0;pointer-events:none} :root[data-theme] .auth-login-wrap>.auth-illustration>img{display:block;width:180px;height:180px;transform:rotate(-10deg);border-radius:48px;background:var(--action-fill);border:1px solid var(--action-border);box-shadow:var(--action-shadow)} .auth-login-wrap>.auth-illustration .orbit{position:absolute;width:190px;height:170px;border-color:var(--action-border)}.auth-login-wrap>.auth-illustration .orbit-two{width:200px;height:175px} @media(max-width:900px){:root[data-theme] .auth-login-wrap>.auth-illustration{width:148px;height:148px;right:10px;top:-144px}:root[data-theme] .auth-login-wrap>.auth-illustration>img{width:148px;height:148px;border-radius:40px}.auth-login-wrap>.auth-illustration .orbit{width:156px;height:140px}.auth-login-wrap>.auth-illustration .orbit-two{width:164px;height:144px}.auth-story.auth-story>p{font-size:12px;line-height:1.4;margin-top:-10px;padding-right:0}} @media(max-height:600px){:root[data-theme] .auth-login-wrap>.auth-illustration{display:none}} .modal.is-measuring{animation:none!important;transition:none!important} /* One solid intensity scale in the calendar, sheets and every cycle diagram. */ :root{--flow-spotting:#f8d6df;--flow-light:#f29aaa;--flow-moderate:#ed334c;--flow-heavy:#8f173b} [data-flow-level="1"]{--flow-fill:var(--flow-spotting);--flow-text:#642238;--flow-edge:#d88aa0} [data-flow-level="2"]{--flow-fill:var(--flow-light);--flow-text:#571326;--flow-edge:#d16580} [data-flow-level="3"]{--flow-fill:var(--flow-moderate);--flow-text:#350612;--flow-edge:#ed334c} [data-flow-level="4"]{--flow-fill:var(--flow-heavy);--flow-text:#fff;--flow-edge:#bb526f} :root[data-theme] .calendar-day.has-flow[data-flow-level]:not(.fertile){background:var(--flow-fill);color:var(--flow-text);border-color:var(--flow-edge)} :root[data-theme] .calendar-day.fertile.has-flow:before{background:var(--flow-fill)} :root[data-theme] .timeline-day:not([data-flow-level="0"]){background:var(--flow-fill);background-image:none} :root[data-theme] .ring-svg .ring-flow[data-flow-level]{stroke:var(--flow-fill)} :root[data-theme] .flow-options .choice:not([data-flow-level="0"])[data-flow-level]>span>svg{color:var(--flow-fill);fill:currentColor;stroke:var(--flow-edge)} :root[data-theme] .flow-options .choice:not([data-flow-level="0"])[data-flow-level]:has(input:checked)>span{background:var(--flow-fill);border-color:var(--flow-edge);color:var(--flow-text)} :root[data-theme] .flow-options .choice:not([data-flow-level="0"])[data-flow-level]:has(input:checked)>span>svg{color:var(--flow-text);stroke:currentColor} :root[data-theme] .cycle-overview-legend .cycle-shared-legend{margin:0 0 24px;padding:0} .cycle-forecast-note{font-size:11px;line-height:1.55;color:var(--muted);margin:12px 0 14px;max-width:65ch}.cycle-forecast-note p{margin:0}.cycle-forecast-note p+p{margin-top:5px} /* Bright category colors, with readable icon/count ink in each theme. */ :root[data-theme] [data-intimacy=sex]{--intimacy-icon:#c82363;--intimacy-bg:#ffe0ec;--intimacy-line:#d34b7d;--intimacy-ink:#80123c;--intimacy-mark-ink:#fff} :root[data-theme] [data-intimacy=masturbation]{--intimacy-icon:#7031d9;--intimacy-bg:#ede2ff;--intimacy-line:#9054e4;--intimacy-ink:#4f1b9e;--intimacy-mark-ink:#fff} :root[data-theme] [data-intimacy=toys]{--intimacy-icon:#165bd7;--intimacy-bg:#e0ebff;--intimacy-line:#5289eb;--intimacy-ink:#153f8d;--intimacy-mark-ink:#fff} :root[data-theme] [data-intimacy=protection]{--intimacy-icon:#f0bd00;--intimacy-bg:#fff2b8;--intimacy-line:#ba8d00;--intimacy-ink:#665000;--intimacy-mark-ink:#362800} :root[data-theme=dark] [data-intimacy=sex]{--intimacy-icon:#ff6b9d;--intimacy-bg:#592039;--intimacy-line:#e34b82;--intimacy-ink:#ffd9e7;--intimacy-mark-ink:#3d0920} :root[data-theme=dark] [data-intimacy=masturbation]{--intimacy-icon:#a97aff;--intimacy-bg:#3e2467;--intimacy-line:#a16af0;--intimacy-ink:#ecdcff;--intimacy-mark-ink:#1d073f} :root[data-theme=dark] [data-intimacy=toys]{--intimacy-icon:#6ba4ff;--intimacy-bg:#173866;--intimacy-line:#568fe6;--intimacy-ink:#dbeaff;--intimacy-mark-ink:#081e40} :root[data-theme=dark] [data-intimacy=protection]{--intimacy-icon:#ffda32;--intimacy-bg:#493c0c;--intimacy-line:#d7b224;--intimacy-ink:#fff0ab;--intimacy-mark-ink:#332900} :root[data-theme] .calendar-record-mark.has-count{color:var(--intimacy-mark-ink,#fff)} :root[data-theme] .timeline-events[data-intimacy] .timeline-event i{color:var(--intimacy-mark-ink,#fff)} :root{--period-color:#e6294d;--period-surface:#f49cae;--period-line:#d62950;--fertility-color:#118aaf;--fertility-surface:#c5e8f1;--fertility-line:#1689a5;--fertility-ink:#075569;--ovulation-surface:#57c3dc;--ovulation-line:#066f87;--ovulation-ink:#073f4c} :root[data-theme=dark]{--period-color:#ff5073;--period-surface:#b23457;--period-line:#fa6384;--fertility-color:#54cce9;--fertility-surface:#155366;--fertility-line:#46bbd6;--fertility-ink:#ccf5ff;--ovulation-surface:#259cbb;--ovulation-line:#8fe8ff;--ovulation-ink:#effcff;--flow-spotting:#f5bdcf;--flow-light:#f17b99;--flow-moderate:#ff405c;--flow-heavy:#b52a50} :root[data-theme] .ring-svg .ring-period{stroke:var(--period-surface)} :root[data-theme] .ring-svg .ring-fertile{stroke:var(--fertility-surface)} :root[data-theme] .ring-svg .ring-ovulation-day{stroke:var(--ovulation-surface)} :root[data-theme] .cycle-shared-legend .dot.orange{background:linear-gradient(135deg,var(--flow-spotting),var(--flow-moderate) 55%,var(--flow-heavy));border:1px solid var(--period-line)} .cycle-shared-legend .legend-intensity-note{font-size:10px;line-height:1.5;color:var(--muted);margin:0} /* Stronger small pictograms, rather than thin lines lost inside colored badges. */ :root[data-theme] .timeline-event i{width:min(22px,100%);font-weight:750;opacity:1} :root[data-theme] .timeline-event i svg{width:76%;height:76%;max-width:76%;max-height:76%;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;opacity:1;shape-rendering:geometricPrecision} :root[data-theme] .timeline-events[data-intimacy] .timeline-event i svg{color:var(--intimacy-mark-ink,#fff)} :root[data-theme] .ring-svg .ring-no-flow{stroke:var(--ring-neutral,#e8d4d6)} :root[data-theme=light] .calendar-record-mark[data-intimacy=protection],:root[data-theme=light] .timeline-events[data-intimacy=protection] .timeline-event i{box-shadow:inset 0 0 0 1px #927000} /* Readable neutral track and a stronger fertility band in the light theme. */ :root[data-theme=light] .cycle-card{--ring-neutral:#f0e5e7} :root[data-theme=light] .ring-svg .ring-fertile{stroke:#4cacc4} :root[data-theme=light] .ring-track{stroke:#f0e5e7} .forecast-summary{display:block;font-size:11px;line-height:1.6;color:var(--muted)}.forecast-summary p{margin:0 0 9px}.insights-forecast-summary{margin:0 0 24px}.physiology-fields{margin:20px 0;padding:14px;border:1px solid var(--line);border-radius:14px}.physiology-fields summary{cursor:pointer;font-size:13px;font-weight:600}.physiology-fields[open] summary{margin-bottom:14px} :root[data-theme=light]{--fertility-surface:#8acbd9;--fertility-ink:#064556;--ovulation-surface:#359bb7;--ovulation-ink:#002631} :root[data-theme=light] .ring-svg .ring-fertile{stroke:var(--fertility-surface)} /* Calendar cells retain their gentle surfaces; ring segments have their own contrast. */ :root[data-theme=light] .calendar-day.fertile{background:#def3f5;border-color:#83c6ce;color:#205963} :root[data-theme=light] .calendar-day.ovulation{background:#a9e0e5;border-color:#2a8793;color:#163f48} :root[data-theme=dark] .calendar-day.fertile{background:#15343b;border-color:#387680;color:#bdeef4} :root[data-theme=dark] .calendar-day.ovulation{background:#245661;border-color:#80d9e5;color:#e1fbff} :root[data-theme] .ring-svg .ring-ovulation-day[data-flow-level="0"]:not(.ring-no-flow){stroke:var(--ovulation-surface)} /* An explicit absence of bleeding is data, not a calendar highlight. */ :root[data-theme] .calendar-day.has-no-flow:not(.fertile):not(.predicted){background:transparent;color:var(--ink);border-color:transparent} .visual-test-tools{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:24px} .forecast-context-select{display:block;position:relative;width:100%;min-width:0} :root[data-theme] .forecast-context-select select{padding-right:46px;background-image:none} .forecast-context-select::after{content:'';position:absolute;right:19px;top:50%;width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:translateY(-70%) rotate(45deg);pointer-events:none} /* Photo editor uses a fixed header/footer and an adaptive square stage. */ .modal:has(#profile-photo-form){height:min(740px,calc(100dvh - 16px))!important;max-height:min(740px,calc(100dvh - 16px))} .modal:has(#profile-photo-form) .sheet-content{display:flex;flex:1 1 0;min-height:0;overflow:hidden;padding-bottom:8px} #profile-photo-form{display:flex;flex-direction:column;flex:1;min-height:0;gap:8px;margin:0} #profile-photo-form>.muted{flex:none;margin:0;font-size:13px;line-height:1.4} #profile-photo-form>.text-button{flex:none;align-self:flex-start;margin:0;padding:4px 0;min-height:28px} #profile-photo-form>[role=status]{flex:none;margin:0} #profile-photo-form>[role=status]:empty{display:none} .photo-crop-stage{display:flex;flex:1 1 0;align-items:center;justify-content:center;min-height:0;min-width:0;padding:3px} .photo-crop-viewport{position:relative;display:block;flex:none;max-width:100%;max-height:100%;overflow:hidden;border-radius:18px;background:#211b20;touch-action:none;cursor:grab;user-select:none;outline:2px solid var(--focus-ring)} .photo-crop-viewport:active{cursor:grabbing} .photo-crop-viewport img{position:absolute;left:50%;top:50%;max-width:none;object-fit:fill;pointer-events:none;user-select:none} .photo-crop-grid{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to right,transparent 33.1%,#ffffff60 33.1%,#ffffff60 33.5%,transparent 33.5%,transparent 66.4%,#ffffff60 66.4%,#ffffff60 66.8%,transparent 66.8%),linear-gradient(to bottom,transparent 33.1%,#ffffff60 33.1%,#ffffff60 33.5%,transparent 33.5%,transparent 66.4%,#ffffff60 66.4%,#ffffff60 66.8%,transparent 66.8%)} #profile-photo-form .photo-crop-scale{flex:none;margin:0} .photo-crop-zoom{display:flex;align-items:center;gap:14px;color:var(--muted);font-size:22px} :root[data-theme] #profile-photo-form .photo-crop-zoom input[type=range]{appearance:none;-webkit-appearance:none;flex:1;min-width:0;width:100%;height:6px;min-height:6px;margin:16px 0;box-sizing:border-box;padding:0;border:0;border-radius:99px;background:#edb4c8;cursor:pointer;touch-action:pan-y} :root[data-theme=dark] #profile-photo-form .photo-crop-zoom input[type=range]{background:#754658} .photo-crop-zoom input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:24px;height:24px;border:2px solid var(--panel);border-radius:50%;background:#c45f88;box-shadow:0 1px 5px #0003} :root[data-theme=dark] .photo-crop-zoom input::-webkit-slider-thumb{background:#e895b5} .photo-crop-zoom input::-moz-range-thumb{width:20px;height:20px;border:2px solid var(--panel);border-radius:50%;background:#c45f88} :root[data-theme=dark] .photo-crop-zoom input::-moz-range-thumb{background:#e895b5} @media(max-height:600px){ .modal:has(#profile-photo-form) .sheet-drag-zone{padding-top:8px} .modal:has(#profile-photo-form) .sheet-origin{font-size:10px} .modal:has(#profile-photo-form) .sheet-drag-zone h2{font-size:20px;margin:4px 0 8px} .modal:has(#profile-photo-form) .sheet-footer{padding-top:8px;padding-bottom:8px} .modal:has(#profile-photo-form) .sheet-footer .primary{min-height:44px} #profile-photo-form>.muted{font-size:12px} } /* Continuous cycle dial, daily dots and a separate current-day badge. */ .cycle-card .cycle-card-body{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;padding:8px 0 12px} .cycle-card .cycle-copy{display:none} :root[data-theme] .cycle-ring-reference{position:relative;width:min(100%,420px);height:auto;aspect-ratio:1;max-width:100%;overflow:visible} :root[data-theme] .cycle-ring-reference .ring-svg{position:static;display:block;width:100%;height:auto;overflow:visible;transform:none} :root[data-theme] .cycle-ring-reference .ring-track{fill:none;stroke:var(--ring-neutral);stroke-width:22;stroke-linecap:round} :root[data-theme] .cycle-ring-reference .ring-segment{stroke-width:22;stroke-linecap:butt;fill:none} :root[data-theme] .cycle-ring-reference .ring-neutral{stroke:var(--ring-neutral)} .cycle-ring-center{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;width:62%;text-align:center;pointer-events:none;line-height:1.25;color:var(--ink)} .cycle-ring-date{font-size:clamp(11px,1.1vw,14px);margin-bottom:14px;color:var(--muted)} .cycle-ring-center strong{font-size:clamp(22px,2.6vw,34px);font-weight:800;line-height:1.12;letter-spacing:-.035em} .cycle-ring-description{font-size:clamp(19px,2.1vw,28px);font-weight:750;letter-spacing:-.025em;margin-top:3px} .cycle-ring-center small{font-size:clamp(10px,1.1vw,14px);line-height:1.4;color:var(--fertility-ink);margin-top:14px;font-weight:500} .cycle-day-dot{fill:var(--ring-neutral);stroke:none} .cycle-day-dot.dot-flow{fill:var(--flow-fill)} .cycle-day-dot.dot-fertile{fill:var(--fertility-line)} .cycle-day-dot.dot-ovulation{fill:var(--ovulation-line)} .cycle-direction-arrow{stroke:var(--muted);stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:.5} .cycle-start-symbol{color:var(--period-color)} :root[data-theme] .cycle-ring-reference .ring-ovulation-layer{position:static;width:auto;height:auto} :root[data-theme] .cycle-ring-reference .ring-ovulation-layer .ovulation-marker-disc{fill:#9ce1ee;stroke:none} :root[data-theme] .cycle-ring-reference .ring-ovulation-layer .ovulation-marker-dot{fill:#347a91;stroke:none} :root[data-theme=dark] .cycle-ring-reference .ring-ovulation-layer .ovulation-marker-disc{fill:#85d7e6} :root[data-theme=dark] .cycle-ring-reference .ring-ovulation-layer .ovulation-marker-dot{fill:#245e75} :root[data-theme] .cycle-ring-reference .ring-ovulation-layer svg{color:var(--ovulation-ink)} :root[data-theme] .cycle-ring-reference .ring-current{fill:var(--panel);stroke:var(--line);stroke-width:1.5;filter:drop-shadow(0 1px 2px #0002)} .cycle-current-badge text{fill:var(--ink);stroke:none;font-family:var(--font);letter-spacing:0} .cycle-current-badge .ring-day-label{font-size:6px;font-weight:600} .cycle-current-badge .ring-day-value{font-size:14px;font-weight:800} @media(max-width:600px){.cycle-ring-center strong{font-size:clamp(22px,6.5vw,30px)}.cycle-ring-description{font-size:clamp(17px,5vw,23px)}.cycle-ring-date{font-size:11px}.cycle-ring-center small{font-size:11px}} @media(max-width:350px){.cycle-ring-date{margin-bottom:8px;font-size:10px}.cycle-ring-center small{margin-top:8px;font-size:10px}.cycle-ring-center strong{font-size:21px}.cycle-ring-description{font-size:17px}} .cycle-band-base{fill:none;stroke-width:22;stroke-linecap:butt} .cycle-band-fertile{stroke:var(--fertility-surface)} .cycle-band-flow{stroke:var(--flow-fill)} .cycle-start-symbol svg{fill:var(--period-color);stroke:none} .cycle-day-dot{fill:#b7a5ac} :root[data-theme=dark] .cycle-day-dot:not(.dot-flow):not(.dot-fertile):not(.dot-ovulation){fill:#ad9ca6} .cycle-start-badge>circle{fill:var(--panel);stroke:var(--line);stroke-width:1} .cycle-start-badge>text{fill:var(--ink);font:600 6px var(--font);letter-spacing:-.1px} .cycle-direction-arrow{opacity:.8} :root[data-theme] .cycle-ring-reference .cycle-ovulation-arc{fill:none;stroke:var(--ovulation-surface);stroke-width:22;stroke-linecap:round} .dashboard-grid.cycle-dashboard{display:block} :root[data-theme] .cycle-combined-card .cycle-ring-reference{width:min(100%,360px)} :root[data-theme] .cycle-combined-card .next-card{padding:18px 0 0;margin-top:4px;border:0;border-top:1px solid var(--line);border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;grid-template-rows:auto auto auto auto} :root[data-theme] .cycle-combined-card .next-card .next-action{grid-row:4} @media(min-width:901px){.cycle-combined-card .cycle-card-body{padding-block:0 8px}.cycle-combined-card .next-card{max-width:560px;margin-inline:auto}} .next-date-row{grid-column:2;grid-row:2;display:flex;align-items:baseline;justify-content:space-between;gap:8px 16px;min-width:0} :root[data-theme] .next-card .next-date-row h2{margin:0;font-size:27px;line-height:1.15;white-space:nowrap} .next-date-row>p{margin:0;font-size:12px;line-height:1.4;color:var(--muted)} @media(max-width:480px){.next-date-row{gap:8px}.next-date-row>p{font-size:11px}.next-card .next-date-row h2{font-size:24px}} @media(max-width:350px){.next-date-row{flex-wrap:wrap}} :root[data-theme] .cycle-combined-card .next-card{grid-template-columns:minmax(0,1fr)} :root[data-theme] .cycle-combined-card .next-card>.tiny-label,.cycle-combined-card .next-date-row{grid-column:1} :root[data-theme] .cycle-combined-card .next-date-row>p{font-size:14px;font-weight:600;line-height:1.45;color:var(--ink)} @media(max-width:480px){:root[data-theme] .cycle-combined-card .next-date-row>p{font-size:13px}} :root[data-theme] .metrics-grid>.metric[data-wellbeing]{grid-template-rows:34px 36px;gap:8px 16px;grid-template-columns:34px minmax(0,1fr) auto;padding:16px 18px;align-items:center} .metrics-grid>.metric[data-wellbeing] .metric-icon{grid-column:1;grid-row:1/3} :root[data-theme] .metrics-grid>.metric[data-wellbeing]>div>span:first-child{grid-column:2;grid-row:1;align-self:end} :root[data-theme] .metrics-grid>.metric[data-wellbeing] b{grid-column:2;grid-row:2} .metrics-grid>.metric[data-wellbeing] .diary-metric-action{grid-column:3;grid-row:1/3} @media(max-width:480px){:root[data-theme] .metrics-grid>.metric[data-wellbeing]{grid-template-columns:34px minmax(0,1fr);gap:6px 12px}.metrics-grid>.metric[data-wellbeing] .diary-metric-action{grid-column:1/-1;grid-row:3;justify-content:space-between;margin-top:8px}} .flow-picker{text-align:center;--drop-color:#b3a5ac} .flow-picker legend{text-align:left} .flow-drop{display:block;width:140px;height:166px;margin:8px auto 12px;overflow:visible} .flow-drop path{fill:url(#flow-drop-fill);stroke:var(--drop-color);stroke-width:1.3;fill-opacity:1;transition:fill-opacity 450ms ease,stroke 450ms ease} .flow-drop-inner{opacity:.55} .flow-picker[data-empty=true] .flow-drop{opacity:.35} .flow-picker-value{display:block;font-size:20px;font-weight:650;color:var(--ink);margin:12px 0 20px} .flow-slider-track{position:relative;margin:0 16px} :root[data-theme] .flow-slider-track input[type=range]{display:block;appearance:none;-webkit-appearance:none;width:100%;height:28px;min-height:28px;margin:0;padding:0;border:0;border-radius:99px;background:color-mix(in srgb,var(--drop-color) 35%,var(--panel));touch-action:pan-y;cursor:ew-resize} .flow-slider-track input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:28px;height:28px;border:1px solid #ffffff80;border-radius:50%;background:white;box-shadow:0 1px 4px #0003} .flow-slider-track input::-moz-range-thumb{width:26px;height:26px;border:1px solid #ffffff80;border-radius:50%;background:white} .flow-slider-dots{position:absolute;inset:0 14px;display:flex;justify-content:space-between;align-items:center;pointer-events:none} .flow-slider-dots i{display:block;width:4px;height:4px;background:var(--ink);opacity:.35;border-radius:50%}.flow-slider-dots .is-under-thumb{opacity:0} .flow-point-labels{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:8px 0 0;gap:2px} .flow-point-labels button{font-size:10px;color:var(--muted);padding:8px 0;min-width:0;overflow-wrap:anywhere} .flow-point-labels button[aria-pressed=true]{color:var(--ink);font-weight:700} .flow-picker-clear{font-size:11px;margin-top:8px} .flow-picker[data-flow-index="0"] .flow-drop path,.flow-picker[data-empty=true] .flow-drop path{fill-opacity:0} /* Interpolated colour and independent, soft motion inside the fixed drop outline. */ @property --drop-color{syntax:'';inherits:true;initial-value:#b3a5ac} .flow-picker{transition:--drop-color 450ms ease} .flow-drop-middle,.flow-drop-inner{transform-box:fill-box;transform-origin:50% 65%;will-change:transform} .flow-drop-middle{opacity:.35;animation:flow-drop-middle-motion 5.6s ease-in-out infinite alternate} .flow-drop-inner{animation:flow-drop-inner-motion 4.2s ease-in-out infinite alternate} .flow-picker[data-empty=true] .flow-drop path,.flow-picker[data-flow-index="0"] .flow-drop path{animation:none;transform:none} @keyframes flow-drop-middle-motion{from{transform:translate(-1px,1px) scale(.96,1.01) rotate(-1.5deg)}to{transform:translate(1px,-1px) scale(1.025,.97) rotate(1.5deg)}} @keyframes flow-drop-inner-motion{0%{transform:translate(-2px,2px) scale(.94,1.02) rotate(-2deg)}100%{transform:translate(2px,-2px) scale(1.04,.96) rotate(2deg)}} @media(prefers-reduced-motion:reduce){.flow-picker{transition:none}.flow-drop-middle,.flow-drop-inner{animation:none!important;transform:none;will-change:auto}} .physiology-fields{border:0;border-radius:0;padding:16px 0 0;margin:20px 0 24px} .physiology-fields summary{font-size:14px;font-weight:600;color:var(--ink);line-height:1.5} .physiology-fields .micro{font-size:12px;line-height:1.6;margin:0 0 18px} .physiology-fields label:not(.choice){margin-bottom:16px} :root[data-theme] .physiology-fields select{background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:36px} :root[data-theme] .calendar-day.fertile.fertile-forecast{background:color-mix(in srgb,var(--fertility-surface) 28%,var(--panel));border:1px dashed var(--fertility-line);color:var(--fertility-ink)} :root[data-theme] .calendar-day.fertile.fertile-forecast.ovulation{background:color-mix(in srgb,var(--ovulation-surface) 32%,var(--panel));border:2px dashed var(--ovulation-line);color:var(--ovulation-ink)} .month-heading .icon-button:disabled{opacity:.25;cursor:default} :root[data-theme] .dot.ovulation-forecast-key{background:color-mix(in srgb,var(--fertility-surface) 28%,var(--panel));border:1px dashed var(--fertility-line);box-sizing:border-box} @media(prefers-reduced-motion:reduce){.flow-drop path{transition:none}} :root[data-theme] .dot.legend-today,:root[data-theme] .timeline-day.is-today:after{background:#f4937e} :root[data-theme] .dot.legend-today{border:2px solid var(--panel);box-shadow:0 0 0 1px color-mix(in srgb,#f4937e 35%,var(--panel));box-sizing:border-box} .cycle-ring-center{gap:0;top:50%} .cycle-ring-date{margin-bottom:12px} .cycle-ring-description{font-size:clamp(16px,1.8vw,23px);font-weight:550;line-height:1.3;margin-top:7px} @media(max-width:600px){.cycle-ring-description{font-size:clamp(16px,4.5vw,21px)}} :root[data-theme] .diary-intro p,:root[data-theme] .diary-intro p .muted{font-family:Arial,sans-serif;font-size:15px;font-weight:400;line-height:1.65;letter-spacing:normal;color:var(--ink)} .diary-empty-state>p{max-width:none;white-space:nowrap;font-size:clamp(10px,2.7vw,14px);line-height:1.5;letter-spacing:normal} .diary-empty-state>.sage{color:#637f39;background:#e8efdd} :root[data-theme=dark] .diary-empty-state>.sage{color:#b8d98d;background:#29351f} .entry-field-caption{display:flex;align-items:center;gap:7px;line-height:1.4;min-height:23px} .entry-field-caption svg{flex:none;color:var(--accent-dark)} .care-diary-summary{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;margin-top:20px;padding-top:18px;border-top:1px solid color-mix(in srgb,currentColor 18%,transparent)} .care-diary-summary>div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap} .care-diary-summary>div>span{font-size:13px;font-weight:500} .care-diary-summary b{font-size:28px;line-height:1.2;white-space:nowrap} .care-diary-summary b small{font-size:12px;font-weight:400} :root[data-theme] .care-card .diary-metric-action{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:46px;padding:12px 16px;margin:0;border:1px solid #c0d5a0;border-radius:15px;background:#d7e7bb;color:#283b1b;font-size:14px;font-weight:650;box-shadow:inset 0 1px 0 #ffffff70} :root[data-theme=dark] .care-card .diary-metric-action{background:#d7e7bb;color:#263619;border-color:#c5d7aa} .care-card .care-about{display:block;margin:12px 0 0;font-size:12px;color:inherit;opacity:.85} /* Compact diary card, independent of the neighbouring wellbeing panel height. */ :root[data-theme] .care-card{align-self:start;width:100%;padding:20px;gap:10px} .care-heading{padding-right:44px;min-height:18px} .care-diary-icon{right:20px;top:18px;width:36px;height:36px;transform:rotate(10deg)} .care-diary-icon svg{width:34px;height:34px} :root[data-theme] .care-card h2{max-width:none;padding-right:42px;font-size:23px;line-height:1.2;letter-spacing:-.5px} :root[data-theme] .care-card>p{max-width:none;width:100%;font-size:13px;line-height:1.5} .care-diary-summary{width:100%;gap:12px;margin-top:4px;padding-top:12px} .care-diary-summary>div{justify-content:flex-start;gap:10px} .care-diary-summary b{font-size:24px} :root[data-theme] .care-card .diary-metric-action{min-height:44px;padding:10px 14px;font-size:13px} @media(min-width:600px){.care-diary-summary{grid-template-columns:minmax(0,1fr) auto;align-items:center}.care-diary-summary>div{gap:6px;flex-wrap:wrap}:root[data-theme] .care-card .diary-metric-action{width:auto}} :root[data-theme] .diary-add{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;min-width:44px;min-height:44px;max-width:44px;padding:0;border-radius:50%;aspect-ratio:1} .cycle-history-empty{padding:22px;border:1px solid var(--line);border-radius:24px;background:var(--panel)} .cycle-history-empty:first-child{border:1px solid var(--line)} .cycle-history-empty p{margin:0;font-size:13px;line-height:1.6} @media(max-width:480px){.cycle-history-empty{padding:18px 14px}} [data-flow-level="5"]{--flow-fill:#650d2d;--flow-text:#fff;--flow-edge:#a84c70;--flow-alpha:1} :root[data-theme=dark] [data-flow-level="5"]{--flow-fill:#731333;--flow-text:#fff;--flow-edge:#c47b96} .spotting-options{margin:20px 0 24px;padding:0;border:0} .spotting-options .micro{font-size:12px;line-height:1.5;margin:0 0 12px;color:var(--muted)} .spotting-options .choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .spotting-options .choice>span{display:block;width:100%;text-align:center} :root[data-theme] .spotting-options .choice input:checked+span{background:var(--period-surface);border-color:var(--period-line);color:var(--period-ink)} :root[data-theme] .calendar-day.today.has-observation>b{width:max-content;min-width:24px;margin-inline:auto;padding:2px 4px;border-radius:7px;background:#202443;color:#fff0bd;line-height:1.1;box-shadow:0 0 0 1px #fff0bd60} .spotting-options [data-spot-color=pink]{--spot-color:#bd416e;--spot-bg:#fce6ed;--spot-border:#d38aa3;--spot-selected:#f6c2d3;--spot-ink:#631d39} .spotting-options [data-spot-color=red]{--spot-color:#d92948;--spot-bg:#ffe6e9;--spot-border:#db8797;--spot-selected:#f7b0bc;--spot-ink:#79132b} .spotting-options [data-spot-color=brown]{--spot-color:#8b532f;--spot-bg:#f3e8de;--spot-border:#ba9b81;--spot-selected:#dbc0a8;--spot-ink:#53331e} .spotting-options [data-spot-color=neutral]{--spot-color:#686970;--spot-bg:#eeeef0;--spot-border:#adadb4;--spot-selected:#d7d7dd;--spot-ink:#363640} :root[data-theme=dark] .spotting-options [data-spot-color=pink]{--spot-color:#f3a7c3;--spot-bg:#35242c;--spot-border:#986177;--spot-selected:#633348;--spot-ink:#ffe1ec} :root[data-theme=dark] .spotting-options [data-spot-color=red]{--spot-color:#ff8f9f;--spot-bg:#382326;--spot-border:#a15d69;--spot-selected:#6b2939;--spot-ink:#ffe1e6} :root[data-theme=dark] .spotting-options [data-spot-color=brown]{--spot-color:#d6ac83;--spot-bg:#302720;--spot-border:#907053;--spot-selected:#57402e;--spot-ink:#ffe9d4} :root[data-theme=dark] .spotting-options [data-spot-color=neutral]{--spot-color:#c0c1cc;--spot-bg:#292a2e;--spot-border:#6e707b;--spot-selected:#444650;--spot-ink:#f0f0f8} :root[data-theme] .spotting-options .choice>span{position:relative;display:flex;align-items:center;justify-content:center;min-height:46px;padding:10px 28px;border:1px solid var(--spot-border);background:var(--spot-bg);color:var(--spot-ink);text-align:center} .spotting-options .choice>span>svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--spot-color);fill:var(--spot-color);stroke:var(--spot-color);flex:none} .spotting-options [data-spot-color=neutral]>span>svg{fill:none} :root[data-theme] .spotting-options .choice input:checked+span{background:var(--spot-selected);border-color:var(--spot-color);box-shadow:inset 0 0 0 1px var(--spot-color);color:var(--spot-ink)} /* Day editor: one persistent sheet, independent recording sections. */ .day-record-sheet .sheet-drag-zone header{padding-bottom:0} .day-record-sheet .sheet-drag-zone h2{display:none} .day-record-sheet .sheet-drag-zone header{margin-bottom:14px} .day-sheet-tools{display:grid;gap:12px;padding:0 0 16px;width:100%} .day-sheet-dates{display:grid;grid-template-columns:36px minmax(0,1fr) 36px;align-items:center;gap:12px} .day-sheet-dates>span{display:grid;gap:2px;text-align:center;color:var(--ink)} .day-sheet-dates b{font-size:14px;font-weight:600} .day-sheet-dates small{font-size:11px;color:var(--muted);text-transform:capitalize} .day-sheet-dates .icon-button{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);color:var(--ink);display:grid;place-items:center} .day-sheet-dates .icon-button:disabled{opacity:.3;cursor:default} .day-sheet-tabs{display:flex;gap:8px} .day-sheet-tabs button{display:flex;align-items:center;justify-content:center;gap:7px;flex:1;min-height:40px;padding:9px 16px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--muted);font-size:14px;font-weight:600} .day-sheet-tabs [aria-selected=true]{background:var(--period-surface);border-color:var(--period-line);color:var(--period-ink)} .day-sheet-tabs [data-section=diary][aria-selected=true]{background:#d9e8be;border-color:#b8cc94;color:#293720} :root[data-theme=dark] .day-sheet-tabs [data-section=diary][aria-selected=true]{background:#334029;border-color:#7e9560;color:#d9e8be} .day-record-sheet:has([data-section=diary][aria-selected=true]) .sheet-footer .primary{background:#d9e8be;color:#293720;border-color:#b8cc94} .day-record-sheet .sheet-content{overscroll-behavior-x:contain} @media(max-width:600px){.day-sheet-tools{gap:10px}.day-record-sheet .sheet-drag-zone header{padding-bottom:0}.day-sheet-tabs button{font-size:13px}} /* Own horizontal gestures before native scrolling can cancel the pointer. */ .day-record-sheet .sheet-content,.day-record-sheet .sheet-footer{touch-action:pan-y} .day-record-sheet .choice,.day-record-sheet .day-sheet-tools,.day-record-sheet .flow-point-labels{user-select:none;-webkit-user-select:none} .day-record-sheet .choice>span,.day-record-sheet .sheet-content button,.day-record-sheet .sheet-footer button{touch-action:pan-y} @media(max-width:900px){.day-record-sheet:not(.expanded):not(.is-resizing){max-height:min(calc(var(--sheet-viewport-height,100dvh)*.82),calc(var(--sheet-viewport-height,100dvh) - max(8px,env(safe-area-inset-top))))}} .flow-drop-halo{position:relative;isolation:isolate;width:140px;height:166px;margin:8px auto 12px;pointer-events:none} .day-record-sheet .choice input{touch-action:pan-y} /* Fade entirely inside the field so the scrolling viewport never clips a halo edge. */ .flow-picker{background:radial-gradient(ellipse closest-side at 50% 32%,color-mix(in srgb,var(--drop-color) 18%,transparent) 0%,color-mix(in srgb,var(--drop-color) 13%,transparent) 22%,color-mix(in srgb,var(--drop-color) 7%,transparent) 42%,color-mix(in srgb,var(--drop-color) 2.5%,transparent) 62%,color-mix(in srgb,var(--drop-color) .5%,transparent) 80%,transparent 100%)} .flow-picker[data-empty=true],.flow-picker[data-flow-index="0"]{background:none} .flow-drop-halo .flow-drop{margin:0} .day-record-sheet .feeling-picker{width:100%;max-width:none;padding-inline:16px} /* Identical visual rhythm when switching between the two day sections. */ .day-record-sheet .flow-point-labels{min-height:46px} .day-record-sheet .feeling-field .feeling-picker{padding-top:0;background:radial-gradient(ellipse closest-side at 50% 24%,color-mix(in srgb,var(--feeling-color) 17%,transparent),transparent 100%)} .day-record-sheet .feeling-field .feeling-art{width:166px;height:166px} .day-record-sheet .feeling-label{min-height:30px;line-height:1.5;margin:12px 0 20px} :root[data-theme] .day-record-sheet .feeling-picker input[type=range]{height:28px;min-height:28px} .day-record-sheet .feeling-scale{min-height:46px;margin-top:8px;align-items:center} .day-record-sheet .feeling-field .feeling-clear{min-height:32.5px;margin-top:8px} .day-record-sheet .flow-picker-clear,.day-record-sheet .feeling-field .feeling-clear{font-size:14px;line-height:1.5;min-height:37px} .lower-grid.diary-complete{grid-template-columns:1fr} .wellbeing .feeling-picker{width:100%;max-width:none;padding-inline:0} .wellbeing [data-feeling-slider]{margin-inline:0} /* The keyboard viewport already excludes the keyboard and Safari input bar. */ @media(max-width:900px){ .modal-backdrop.keyboard-open{inset:var(--sheet-viewport-top,0px) 0 auto;height:var(--sheet-viewport-height,100dvh)} .modal-backdrop.is-viewport-changing .modal{transition:none!important} .modal-backdrop.keyboard-open .modal:not(.is-dragging){max-height:calc(var(--sheet-viewport-height,100dvh) - 8px);transition:none!important;animation:none!important} .modal-backdrop.keyboard-open .modal:not(.expanded):not(.is-dragging){height:auto} .modal-backdrop.keyboard-open .sheet-content{flex:1 1 auto;scroll-behavior:auto} .modal-backdrop.keyboard-open .sheet-footer{padding-bottom:12px} .modal-backdrop.keyboard-open .sheet-drag-zone{padding-top:32px} .modal-backdrop.keyboard-open .sheet-drag-zone h2{margin-bottom:16px} } /* Home Screen sheets use the browser's top layer, outside the scrolling body. */ @media(max-width:900px){ dialog.modal-backdrop{margin:0;border:0;width:100%;max-width:none;max-height:none;height:var(--sheet-viewport-height,100dvh);inset:0 auto auto 0;overflow:clip;color:inherit} dialog.modal-backdrop::backdrop{background:transparent} .modal:has(.sheet-footer) .sheet-content{flex:1 1 auto;min-height:0;padding-bottom:12px} .modal .sheet-footer{flex:0 0 auto;margin:0;padding-top:10px;padding-bottom:max(10px,min(34px,env(safe-area-inset-bottom)))} .modal.is-resizing{max-height:none!important;transition:none!important;will-change:auto!important} .modal .sheet-content{contain:layout style} } /* An entering panel must not become a native dialog's autofocus scroll target. */ .modal-backdrop.is-preparing{opacity:0;pointer-events:none} .modal-backdrop.is-preparing>.modal{animation:none!important;transition:none!important;transform:none!important} /* Resizing uses a fixed layout and compositor movement rather than height frames. */ .modal.is-layer-animating{will-change:transform!important} .modal.is-layer-animating .sheet-content{flex:1 1 auto;will-change:clip-path} .modal.is-layer-animating .sheet-footer{will-change:transform}