/* The Fertility Protocol - app styles
   v3 polish: warmer depth, springier motion, calmer rhythm,
   bigger touch targets, ADHD-friendly clarity. Visual language
   still pulled from thefertilityprotocol.com: Cormorant at size,
   dash kickers, deep teal feature panels, hairlines, whitespace. */
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; margin:0; padding:0; }
:root {
  --bg:#FAF7F4; --surface:#FFFFFF; --ink:#1A2B2C; --muted:#5D6866;
  --teal:#2F6F73; --tealdark:#1C4A4D; --tealmist:#C9D6D6;
  --mauve:#9B7FA6; --rose:#D99694; --rosedark:#A05672; --sage:#7A9E8E; --sagetext:#5C7F70;
  --sageband:#E9F0ED; --hair:#E7E3DD; --cream:#F7F3ED;
  --shadow:0 2px 10px -6px rgba(26,43,44,0.12);
  --shadow-lift:0 10px 26px -14px rgba(26,43,44,0.22);
  --r:18px; --spring:cubic-bezier(.2,.8,.3,1);
}
html, body { background:#EFEAE5; }
body { font-family:'Lora', Georgia, 'Times New Roman', serif; color:var(--ink); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
.fp { background:var(--bg); min-height:100vh; max-width:430px; margin:0 auto; position:relative; padding-bottom:112px; }

/* type */
.disp { font-family:'Cormorant Garamond', Georgia, serif; font-weight:400; letter-spacing:.01em; }
.dispb { font-family:'Cormorant Garamond', Georgia, serif; font-weight:600; letter-spacing:.005em; }
.dm { font-family:'DM Sans', -apple-system, 'Segoe UI', sans-serif; }
.stop { color:var(--rose); }
.lab { font-family:'DM Sans', -apple-system, sans-serif; text-transform:uppercase; letter-spacing:.16em; font-weight:600; font-size:10.5px; }
.kick { font-family:'DM Sans', -apple-system, sans-serif; text-transform:uppercase; letter-spacing:.17em; font-weight:700; font-size:10.5px; display:flex; align-items:center; gap:9px; }
.kick::before { content:""; width:18px; height:1px; background:currentColor; flex-shrink:0; opacity:.8; }

/* surfaces */
.card { background:var(--surface); border:1px solid var(--hair); border-radius:var(--r); padding:20px 18px; box-shadow:var(--shadow); }
.tap { cursor:pointer; transition:transform .16s var(--spring), box-shadow .16s ease; }
.tap:active { transform:scale(.99); box-shadow:var(--shadow-lift); }
.panel { background:var(--tealdark); border:1px solid var(--tealdark); border-radius:20px; padding:22px 20px; color:var(--tealmist); box-shadow:var(--shadow-lift); }
.panel .hairline { height:1px; background:rgba(255,255,255,0.14); border:none; }

/* controls */
.pill { font-family:'DM Sans', -apple-system, sans-serif; border:1px solid var(--hair); background:transparent; color:var(--muted); border-radius:999px; padding:11px 12px; min-height:44px; font-size:12.5px; font-weight:600; cursor:pointer; transition:transform .12s var(--spring), background .16s, color .16s, border-color .16s; flex:1; min-width:0; }
.pill:active { transform:scale(.95); }
.pill.on { color:#fff; border-color:transparent; }
.icobtn { font-family:'DM Sans', -apple-system, sans-serif; display:flex; align-items:center; justify-content:center; gap:9px; border:1px solid var(--teal); color:var(--teal); background:transparent; border-radius:12px; padding:13px; min-height:48px; font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.13em; cursor:pointer; width:100%; transition:background .15s, transform .12s var(--spring); }
.icobtn:active { background:rgba(47,111,115,0.07); transform:scale(.99); }
input, textarea { width:100%; border:1px solid var(--hair); background:#fff; border-radius:12px; padding:13px 15px; font-family:'Lora', Georgia, serif; font-size:16px; color:var(--ink); outline:none; transition:border-color .16s, box-shadow .16s; }
input:focus, textarea:focus { border-color:var(--teal); box-shadow:0 0 0 3px rgba(47,111,115,0.10); }
.save { font-family:'DM Sans', -apple-system, sans-serif; width:100%; background:var(--teal); color:#fff; border:none; border-radius:13px; padding:17px; min-height:52px; font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.13em; cursor:pointer; transition:transform .12s var(--spring), opacity .12s, box-shadow .16s; box-shadow:0 6px 16px -8px rgba(47,111,115,0.5); }
.save:active { transform:scale(.985); opacity:.94; }
.save[disabled] { box-shadow:none; }
.ghost { font-family:'DM Sans', -apple-system, sans-serif; width:100%; background:none; border:none; color:var(--muted); font-size:13px; padding:15px 0 2px; cursor:pointer; transition:color .16s; }
.ghost:active { color:var(--teal); }
.navbtn { background:#fff; border:1px solid var(--hair); border-radius:12px; width:42px; height:42px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink); font-size:17px; box-shadow:var(--shadow); transition:transform .12s var(--spring); }
.navbtn:active { transform:scale(.92); }

/* tab bar */
.tabbar { position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:430px; background:rgba(255,255,255,0.94); backdrop-filter:blur(16px) saturate(1.4); border-top:1px solid var(--hair); display:flex; padding:11px 6px 26px; z-index:20; box-shadow:0 -6px 20px -14px rgba(26,43,44,0.18); }
.tab { flex:1; display:flex; flex-direction:column; align-items:center; gap:5px; background:none; border:none; cursor:pointer; color:#8A938F; font-family:'DM Sans', -apple-system, sans-serif; font-size:9.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; position:relative; padding-top:6px; transition:color .16s; }
.tab.on { color:var(--tealdark); }
.tab.on::before { content:""; position:absolute; top:-11px; left:50%; transform:translateX(-50%); width:22px; height:3px; background:var(--rose); border-radius:3px; }
.tab svg { display:block; transition:transform .16s var(--spring); }
.tab.on svg { transform:translateY(-1px); }
.plusbtn { flex:none; width:56px; height:56px; border-radius:999px; background:var(--tealdark); color:#fff; border:none; font-size:28px; font-weight:300; line-height:1; margin:-24px 6px 0; box-shadow:0 10px 24px -8px rgba(28,74,77,0.6); cursor:pointer; display:flex; align-items:center; justify-content:center; font-family:'DM Sans', -apple-system, sans-serif; transition:transform .16s var(--spring); }
.plusbtn:active { transform:scale(.92); }

/* accordions */
.acc { background:var(--surface); border:1px solid var(--hair); border-radius:16px; margin-bottom:11px; overflow:hidden; box-shadow:var(--shadow); transition:box-shadow .16s; }
.acc:active { box-shadow:var(--shadow-lift); }
.acchead { display:flex; align-items:center; gap:13px; padding:16px; cursor:pointer; }
.accbody { padding:0 16px 17px 73px; font-size:13.5px; line-height:1.62; }
.chev { margin-left:auto; color:var(--muted); transition:transform .22s var(--spring); font-size:15px; }
.chev.open { transform:rotate(90deg); }

/* motion + overlays */
.fade { animation:fade .34s var(--spring) both; }
@keyframes fade { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.spin { display:inline-block; animation:sp 1s linear infinite; }
@keyframes sp { to { transform:rotate(360deg); } }
.sheetwrap { position:fixed; inset:0; background:rgba(26,43,44,0.5); z-index:66; display:flex; align-items:flex-end; justify-content:center; animation:dim .2s ease both; }
@keyframes dim { from { background:rgba(26,43,44,0); } to { background:rgba(26,43,44,0.5); } }
.sheet { width:100%; max-width:430px; background:var(--bg); border-radius:26px 26px 0 0; padding:10px 20px 34px; max-height:88vh; overflow-y:auto; animation:sheetup .3s var(--spring) both; box-shadow:0 -12px 40px -16px rgba(26,43,44,0.4); }
@keyframes sheetup { from { transform:translateY(46px); opacity:.5; } to { transform:none; opacity:1; } }
.grab { width:40px; height:4px; border-radius:99px; background:var(--hair); margin:8px auto 16px; }
.toast { position:fixed; top:16px; left:50%; transform:translateX(-50%); background:var(--tealdark); color:#fff; font-family:'DM Sans', -apple-system, sans-serif; font-size:13px; padding:12px 20px; border-radius:999px; z-index:60; box-shadow:0 10px 26px -10px rgba(28,74,77,0.55); animation:toastin .34s var(--spring) both; max-width:88%; text-align:center; line-height:1.4; }
@keyframes toastin { from { opacity:0; transform:translateX(-50%) translateY(-10px); } to { opacity:1; transform:translateX(-50%) translateY(0); } }
.chip { background:var(--surface); border:1px solid var(--hair); border-radius:999px; padding:10px 14px; font-size:12.5px; color:var(--teal); cursor:pointer; font-family:'DM Sans', -apple-system, sans-serif; transition:transform .12s var(--spring); }
.chip:active { transform:scale(.95); }

button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [role="button"]:focus-visible { outline:2px solid var(--teal); outline-offset:2px; }
select { min-height:50px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}