* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
:root {
  --bg: #FFF6E9; --card: #FFFFFF; --ink: #2C3251; --muted: #8B8FA8;
  --coral: #FF6B5E; --rose: #F5C7C1; --rose-ink: #BE5A4F; --rose-lite: #FDF3F1; --rose-dash: #EBBFB8;
  --sun: #FFC94D; --sun-soft: #FFF1D2; --purple-soft: #EAE6FF; --purple-ink: #6A5AE0;
  --line: #F0EADD;
}
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body { font-family: Nunito, system-ui, sans-serif; color: var(--ink); min-height: 100vh; min-height: 100dvh; }
.phone { min-height: 100vh; min-height: 100dvh; background: var(--bg); position: relative; overflow: hidden; max-width: 480px; margin: 0 auto; }
.inner { padding: calc(14px + env(safe-area-inset-top)) 18px calc(30px + env(safe-area-inset-bottom)); }

/* install nudge (iOS only) */
.nudge { display: flex; gap: 10px; align-items: flex-start; background: var(--sun-soft); border: 2px solid #F6DFAE;
  border-radius: 18px; padding: 12px 12px 12px 14px; margin-bottom: 14px; }
.nudge[hidden] { display: none; }
.nudge b { font: 800 .85rem Nunito; display: block; }
.nudge p { font: 700 .78rem Nunito; color: #7A6437; line-height: 1.45; margin-top: 3px; }
.nudge .ios-share { display: inline-block; transform: translateY(1px); }
.nudge-x { margin-left: auto; border: 0; background: none; font-size: 1.3rem; line-height: 1; color: #B29357; cursor: pointer; padding: 0 4px; }

header { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; min-height: 44px; }
.head-txt { flex: 1; min-width: 0; }
.markbox { width: 36px; height: 36px; display: grid; place-items: center; position: relative; flex: none; }
.mk-moon { width: 32px; height: 32px; display: block; position: relative; border-radius: 50%; background: var(--coral); overflow: hidden; }
.mk-moon::after { content: ''; position: absolute; top: -4px; left: 10px; width: 30px; height: 30px; border-radius: 50%; background: var(--bg); }
.mk-moon.big { width: 56px; height: 56px; margin: 0 auto 10px; }
.mk-moon.big::after { top: -7px; left: 18px; width: 52px; height: 52px; background: #fff; }
.mk-storm { width: 36px; height: 36px; display: none; }
.phone.period .mk-moon:not(.big) { display: none; }
.phone.period .mk-storm { display: block; }
.logo { font-family: 'Baloo 2', Nunito, sans-serif; font-weight: 800; font-size: 1.65rem; line-height: 1; }
.logo .b { color: var(--coral); }
.sub { font-size: .76rem; color: var(--muted); font-weight: 700; }
.gear { border: 0; background: none; font-size: 1.25rem; color: var(--muted); cursor: pointer; padding: 8px; line-height: 1; }

.hero { border-radius: 24px; padding: 18px 20px; margin-bottom: 12px; color: #fff; position: relative; transition: background .4s;
  background: linear-gradient(135deg, #FFB25E, var(--sun)); box-shadow: 0 14px 30px -18px rgba(255,178,94,.8); }
.period .hero { background: linear-gradient(135deg, #FF8A7B, #FFAD8F); box-shadow: 0 14px 30px -18px rgba(255,138,123,.8); }
.bday .hero { background: linear-gradient(135deg, #9B8CFF, #FF8FB1 55%, var(--sun)); box-shadow: 0 14px 30px -18px rgba(155,140,255,.8); }
.hero .tag { font: 800 .7rem Nunito; letter-spacing: .1em; text-transform: uppercase; opacity: .95; }
.hero h2 { font-family: 'Baloo 2', Nunito, sans-serif; font-weight: 800; font-size: 1.4rem; margin: 3px 0 2px; }
.hero p { font-size: .87rem; font-weight: 700; opacity: .96; line-height: 1.45; padding-right: 62px; }
.hero .big { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); text-align: center; background: rgba(255,255,255,.24); border-radius: 18px; padding: 8px 12px; }
.hero .big b { font-family: 'Baloo 2', Nunito, sans-serif; font-size: 1.6rem; font-weight: 800; line-height: 1; display: block; }
.hero .big span { font: 800 .58rem Nunito; letter-spacing: .1em; text-transform: uppercase; opacity: .9; }
.hero .big.hide { display: none; }
.bday .hero p { padding-right: 0; }
.bday .hero .big { display: none; }

.startbtn { width: 100%; border: 0; background: var(--rose); color: var(--rose-ink); font: 800 .9rem Nunito; padding: 13px; border-radius: 16px; cursor: pointer; margin-bottom: 12px; }
.startbtn:active { transform: scale(.98); }
.startbtn[hidden] { display: none; }

.cal { background: var(--card); border-radius: 24px; padding: 16px 12px 12px; box-shadow: 0 12px 30px -22px rgba(44,50,81,.4); }
.cal-head { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 10px; }
.cal-head h3 { font-family: 'Baloo 2', Nunito, sans-serif; font-weight: 800; font-size: 1.1rem; }
.nav { border: 0; background: var(--bg); color: var(--ink); width: 36px; height: 36px; border-radius: 12px; font-size: 1.25rem; font-weight: 800; cursor: pointer; line-height: 1; }
.nav:active { transform: scale(.9); }
.dow { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 2px; }
.dow div { text-align: center; font: 800 .66rem Nunito; color: #C4BFAE; padding: 4px 0 6px; }
.days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.day { position: relative; height: 44px; display: grid; place-items: center; font: 700 .85rem Nunito; border-radius: 13px;
  cursor: pointer; transition: transform .12s; border: 0; background: none; color: var(--ink); padding: 0; font-family: Nunito, sans-serif; }
.day:active { transform: scale(.9); }
.day.dim { color: #DDD7C7; pointer-events: none; }
.day.p-day { background: var(--rose); color: var(--rose-ink); font-weight: 800; }
.day.e-day { background: var(--rose-lite); border: 1.5px dashed var(--rose-dash); color: var(--rose-ink); }
.day.t-day { background: var(--purple-soft); color: var(--purple-ink); }
/* inset box-shadow, not outline: Safari < 16.4 ignores border-radius on outlines */
.day.today { box-shadow: inset 0 0 0 3px var(--ink); font-weight: 800; }
.day .me { position: absolute; top: 2px; right: 3px; display: flex; align-items: center; gap: 1px; font-size: .58rem; line-height: 1; }
.day .me .pn { font: 800 .52rem Nunito; background: var(--ink); color: #fff; border-radius: 999px; padding: 1px 3.5px; }
.day .nd { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--ink); opacity: .55; }
.day.p-day .nd { background: var(--rose-ink); opacity: .8; }
.day .bd { position: absolute; bottom: 4px; left: 5px; font-size: .58rem; line-height: 1; }

.legend { display: flex; flex-wrap: wrap; gap: 7px 14px; padding: 12px 6px 2px; }
.legend span { font: 700 .7rem Nunito; color: var(--muted); display: flex; align-items: center; gap: 5px; }
.legend i { width: 12px; height: 12px; border-radius: 4px; flex: none; }
.l-per { background: var(--rose); } .l-exp { background: var(--rose-lite); border: 1.5px dashed var(--rose-dash); } .l-t { background: var(--purple-soft); }

.kcards { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.kcard { border-radius: 20px; padding: 14px 16px; display: flex; gap: 12px; align-items: flex-start; background: var(--card); box-shadow: 0 10px 24px -20px rgba(44,50,81,.5); }
.kcard .em { font-size: 1.25rem; }
.kcard b { font-family: 'Baloo 2', Nunito, sans-serif; font-weight: 700; font-size: .92rem; display: block; }
.kcard p { font-size: .8rem; font-weight: 600; color: #4A506E; line-height: 1.45; }

.syncline { text-align: center; font: 700 .7rem Nunito; color: #C0B69E; padding: 14px 0 0; }

.scrim { position: fixed; inset: 0; background: rgba(44,50,81,.4); opacity: 0; pointer-events: none; transition: .25s; z-index: 8; }
.scrim.on { opacity: 1; pointer-events: auto; }
.sheet { position: fixed; left: 50%; transform: translate(-50%, 110%); bottom: 0; width: 100%; max-width: 480px; background: var(--card);
  border-radius: 28px 28px 0 0; padding: 18px 22px calc(24px + env(safe-area-inset-bottom));
  transition: transform .32s cubic-bezier(.3,1.1,.4,1); z-index: 9;
  max-height: 92vh; max-height: 92dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.sheet.on { transform: translate(-50%, 0); }
.grab { width: 44px; height: 5px; border-radius: 3px; background: var(--line); margin: 0 auto 13px; }
.sheet h4 { font-family: 'Baloo 2', Nunito, sans-serif; font-weight: 800; font-size: 1.15rem; margin-bottom: 10px; }

/* day sheet header: date + a read-only phase chip (marking happens in Settings) */
.sheet-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 4px; }
.sheet-head h4 { margin-bottom: 0; }
.phasechip { font: 800 .66rem Nunito; letter-spacing: .04em; text-transform: uppercase; background: var(--rose-lite);
  color: var(--rose-ink); border: 1.5px solid #F7E0DC; padding: 3px 9px; border-radius: 999px; }
.phasechip[hidden] { display: none; }

/* Settings → Your periods */
.inline-add { display: flex; gap: 7px; align-items: flex-start; }
.inline-add .other { margin-bottom: 0; }
.addbtn { flex: none; border: 0; background: var(--ink); color: #fff; font: 800 .85rem Nunito; padding: 12px 16px;
  border-radius: 14px; cursor: pointer; }
.addbtn:active { transform: scale(.96); }
.plist { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }
.plist .empty { font: 700 .8rem Nunito; color: var(--muted); background: var(--bg); border-radius: 14px; padding: 12px 14px; }
.pitem { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: var(--bg);
  border: 2px solid var(--line); border-radius: 14px; padding: 10px 12px; cursor: pointer; font-family: Nunito, sans-serif; }
.pitem:active { transform: scale(.98); }
.pitem.current { background: var(--rose-lite); border-color: var(--rose); }
.pdot { width: 10px; height: 10px; border-radius: 50%; background: var(--rose); flex: none; }
.ptxt b { font: 800 .84rem Nunito; display: block; color: var(--ink); }
.ptxt span { font: 700 .7rem Nunito; color: var(--muted); }
.pbadge { margin-left: auto; font: 800 .62rem Nunito; background: var(--rose); color: var(--rose-ink); padding: 2px 8px; border-radius: 999px; }
.pchev { margin-left: auto; color: #C9BFA8; font-weight: 800; }
.lenrow { display: flex; gap: 6px; margin-bottom: 4px; }
.lenrow button { flex: 1; border: 2px solid var(--line); background: var(--bg); border-radius: 12px; padding: 11px 0;
  font: 800 .85rem Nunito; color: var(--ink); cursor: pointer; }
.lenrow button.on { background: var(--rose); border-color: var(--rose); color: var(--rose-ink); }
.save.danger { background: transparent; color: var(--rose-ink); border: 2px solid var(--rose); box-shadow: none; }
.save.danger:active { transform: scale(.98); box-shadow: none; }

/* Notion block */
.conn { display: flex; align-items: center; gap: 10px; background: #EAF6EF; border: 2px solid #BFE3CE; border-radius: 14px; padding: 10px 12px; margin-bottom: 8px; }
.conn[hidden] { display: none; }
.conn .tick { width: 22px; height: 22px; border-radius: 50%; background: #34A853; color: #fff; display: grid; place-items: center; font: 800 .72rem Nunito; flex: none; }
.conn b { font: 800 .82rem Nunito; display: block; }
.conn span { font: 700 .7rem Nunito; color: #5C7A68; }
.tog { display: flex; align-items: center; gap: 10px; background: var(--bg); border: 2px solid var(--line); border-radius: 14px;
  padding: 10px 12px; cursor: pointer; user-select: none; -webkit-user-select: none; }
.tog b { font: 800 .82rem Nunito; display: block; }
.tog small { font: 700 .7rem Nunito; color: var(--muted); }
.tog .sw { margin-left: auto; width: 44px; height: 26px; border-radius: 999px; background: #E4DCCB; position: relative; transition: .2s; flex: none; }
.tog .sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: .2s; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.tog.on .sw { background: var(--purple-ink); }
.tog.on .sw::after { left: 21px; }
.lastsync { text-align: center; font: 700 .7rem Nunito; color: #C0B69E; margin: 8px 0 2px; }
#nSetup[hidden] { display: none; }

.slbl { font: 800 .68rem Nunito; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 10px 0 7px; }
.slbl small { text-transform: none; letter-spacing: 0; font-weight: 700; }
.note-line { font: 700 .8rem Nunito; color: var(--muted); background: var(--bg); border-radius: 14px; padding: 11px 13px; line-height: 1.45; }
.moods { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-bottom: 11px; }
.mood { border: 2px solid var(--line); background: var(--bg); border-radius: 16px; padding: 8px 2px 6px; cursor: pointer; transition: .12s; text-align: center; position: relative; font-family: Nunito, sans-serif; }
.mood i { font-style: normal; font-size: 1.3rem; display: block; }
.mood b { font: 700 .62rem Nunito; color: var(--ink); }
.mood.sel { background: var(--sun-soft); border-color: var(--sun); transform: scale(1.05); }
.mood.sel::after { content: '✓'; position: absolute; top: -6px; right: -5px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink); color: #fff; font: 800 .6rem Nunito; display: grid; place-items: center; }
/* 16px minimum: anything smaller makes iOS Safari zoom the whole app on focus and never zoom back */
.other, .note { width: 100%; border: 2px solid var(--line); border-radius: 14px; background: var(--bg); padding: 11px 13px;
  font: 700 1rem Nunito; color: var(--ink); outline: none; margin-bottom: 9px; -webkit-appearance: none; appearance: none; }
.other:focus, .note:focus { border-color: var(--coral); }
.note { resize: none; height: 62px; font-family: Nunito, sans-serif; }
.save { width: 100%; border: 0; background: var(--coral); color: #fff; font: 800 .95rem Nunito; padding: 14px; border-radius: 999px; cursor: pointer; box-shadow: 0 4px 0 #E4544A; margin-top: 8px; }
.save:active { transform: translateY(3px); box-shadow: 0 1px 0 #E4544A; }
.save.alt { background: var(--ink); box-shadow: 0 4px 0 #1D2238; }
.save.alt:active { box-shadow: 0 1px 0 #1D2238; }
.save.ghost { background: transparent; color: var(--muted); box-shadow: none; border: 2px solid var(--line); }
.save.ghost:active { transform: scale(.98); box-shadow: none; }
.kinfo { background: var(--purple-soft); border-radius: 16px; padding: 13px 15px; font-weight: 700; font-size: .88rem; line-height: 1.5; }

/* Kibet's phone: cycle numbers are Joyce's to set */
.kibet-only { display: none; }
.sheet.kibet-view .joyce-only { display: none; }
.sheet.kibet-view .kibet-only { display: block; }

.rolerow { display: flex; gap: 8px; margin-bottom: 6px; }
.rolebtn { flex: 1; border: 2px solid var(--line); background: var(--bg); border-radius: 14px; padding: 12px; font: 800 .88rem Nunito; color: var(--ink); cursor: pointer; transition: .15s; }
.rolebtn.sel { background: var(--sun-soft); border-color: var(--sun); }

.onb { position: fixed; inset: 0; background: var(--bg); z-index: 20; display: flex; align-items: center; justify-content: center; padding: 24px; overflow-y: auto; }
.onb[hidden] { display: none; }
.onb-card { background: #fff; border-radius: 28px; padding: 26px 22px; width: 100%; max-width: 360px; text-align: center; box-shadow: 0 20px 50px -25px rgba(44,50,81,.5); }
.onb-p { color: var(--muted); font-weight: 700; font-size: .9rem; line-height: 1.5; margin: 8px 0 16px; }
.onb-card .slbl, .onb-card .other { text-align: left; }
.onb-card #onbJoyce { margin-top: 10px; }
.onb-install { background: var(--sun-soft); border-radius: 16px; padding: 12px 14px; margin-top: 12px; text-align: left; }
.onb-install[hidden] { display: none; }
.onb-install b { font: 800 .84rem Nunito; }
.onb-install p { font: 700 .78rem Nunito; color: #7A6437; line-height: 1.45; margin-top: 3px; }

.toast { position: fixed; left: 50%; bottom: calc(26px + env(safe-area-inset-bottom)); transform: translate(-50%, 90px); background: var(--ink); color: #fff;
  font: 700 .85rem Nunito; padding: 11px 20px; border-radius: 999px; transition: .3s; opacity: 0; z-index: 30; max-width: 90%; text-align: center; }
.toast.show { transform: translate(-50%, 0); opacity: 1; }

.hint { font: 700 .74rem Nunito; color: var(--muted); line-height: 1.5; margin: 9px 0 2px; }
.hint b { color: var(--ink); font-weight: 800; }