/* The Fertility Protocol - app styles, from the approved prototype */
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; margin:0; padding:0; }
:root {
  --bg:#FAF7F4; --surface:#FFFFFF; --ink:#1A2B2C; --muted:#77817E;
  --teal:#2F6F73; --tealdark:#1C4A4D; --mauve:#9B7FA6; --rose:#D99694; --sage:#7A9E8E;
  --hair:#E4E1DB;
}
html, body { background:#EFEAE5; }
body { font-family:'Lora', Georgia, 'Times New Roman', serif; color:var(--ink); }
.fp { background:var(--bg); min-height:100vh; max-width:430px; margin:0 auto; position:relative; padding-bottom:106px; }
.disp { font-family:'Cormorant Garamond', Georgia, serif; font-weight:400; letter-spacing:.01em; }
.dm { font-family:'DM Sans', -apple-system, 'Segoe UI', sans-serif; }
.lab { font-family:'DM Sans', -apple-system, sans-serif; text-transform:uppercase; letter-spacing:.14em; font-weight:600; font-size:11px; }
.card { background:var(--surface); border:1px solid var(--hair); border-radius:18px; padding:18px; }
.clab { font-family:'DM Sans', -apple-system, sans-serif; text-transform:uppercase; letter-spacing:.13em; font-weight:600; font-size:11px; color:var(--muted); display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.pill { font-family:'DM Sans', -apple-system, sans-serif; border:1px solid var(--hair); background:transparent; color:var(--muted); border-radius:999px; padding:9px 12px; font-size:12.5px; font-weight:500; cursor:pointer; transition:.16s; flex:1; min-width:0; }
.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:8px; border:1px solid var(--teal); color:var(--teal); background:transparent; border-radius:12px; padding:11px; font-weight:500; font-size:13px; cursor:pointer; width:100%; }
input, textarea { width:100%; border:1px solid var(--hair); background:#fff; border-radius:12px; padding:12px 14px; font-family:'Lora', Georgia, serif; font-size:15px; color:var(--ink); outline:none; }
input:focus, textarea:focus { border-color:var(--teal); }
.save { font-family:'DM Sans', -apple-system, sans-serif; width:100%; background:var(--teal); color:#fff; border:none; border-radius:14px; padding:15px; font-weight:600; font-size:14px; cursor:pointer; letter-spacing:.03em; }
.save:active { opacity:.9; }
.ghost { font-family:'DM Sans', -apple-system, sans-serif; width:100%; background:none; border:none; color:var(--muted); font-size:13px; padding:14px 0 2px; cursor:pointer; }
.navbtn { background:#fff; border:1px solid var(--hair); border-radius:11px; width:38px; height:38px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink); font-size:17px; }
.tabbar { position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:430px; background:rgba(255,255,255,0.95); backdrop-filter:blur(12px); border-top:1px solid var(--hair); display:flex; padding:9px 6px 22px; z-index:20; }
.tab { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; background:none; border:none; cursor:pointer; color:var(--muted); font-family:'DM Sans', -apple-system, sans-serif; font-size:10px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; }
.tab.on { color:var(--teal); }
.tab svg { display:block; }
.fade { animation:fade .35s ease both; }
@keyframes fade { from { opacity:0; transform:translateY(8px); } 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.45); z-index:40; display:flex; align-items:flex-end; justify-content:center; }
.sheet { width:100%; max-width:430px; background:var(--bg); border-radius:22px 22px 0 0; padding:10px 18px 30px; max-height:88vh; overflow-y:auto; }
.grab { width:40px; height:4px; border-radius:99px; background:var(--hair); margin:8px auto 14px; }
.toast { position:fixed; top:14px; left:50%; transform:translateX(-50%); background:var(--tealdark); color:#fff; font-family:'DM Sans', -apple-system, sans-serif; font-size:13px; padding:11px 18px; border-radius:999px; z-index:60; box-shadow:0 8px 22px -8px rgba(28,74,77,0.5); animation:fade .3s ease both; max-width:88%; text-align:center; }
.chip { background:var(--surface); border:1px solid var(--hair); border-radius:999px; padding:9px 13px; font-size:12.5px; color:var(--teal); cursor:pointer; font-family:'DM Sans', -apple-system, sans-serif; }