@import url('/marketing.css');

.dark { --ink: #edf9f8; --muted: #b7d1d1; --paper: #142425; --panel: #1d3031; --aqua: #28595b; --aqua-strong: #3f7678; --rose: #744a4e; --rose-strong: #a86268; --line: #3a5556; }
.app-shell { max-width: 760px; margin: auto; padding: 24px 16px 126px; }
.app-shell button, .app-shell input { font: inherit; }
.app-shell button { cursor: pointer; }
.app-shell button:focus-visible, .app-shell input:focus-visible, .app-shell a:focus-visible { outline: 3px solid var(--rose-strong); outline-offset: 3px; }
.app-shell h1, .app-shell h2, .app-shell h3 { margin: 0; }
.app-shell h1 { font: 1.25rem 'Special Gothic Expanded One', sans-serif; letter-spacing: -.04em; }
.app-shell h2 { font: 1rem 'Special Gothic Expanded One', sans-serif; letter-spacing: -.04em; }
.app-shell h3 { font: .94rem 'Special Gothic Expanded One', sans-serif; letter-spacing: -.035em; }
.topbar, .section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.app-header { margin-bottom: 14px; }
.app-header .topbar, .settings-header { padding: 8px 10px 8px 14px; border: 1px solid color-mix(in srgb, var(--line) 56%, transparent); border-radius: 20px; background: color-mix(in srgb, var(--panel) 72%, transparent); box-shadow: 0 .45rem 1.35rem rgb(32 54 55 / .1), inset 0 1px 0 color-mix(in srgb, white 62%, transparent); backdrop-filter: blur(18px) saturate(130%); -webkit-backdrop-filter: blur(18px) saturate(130%); }
.app-header .topbar .icon-button { border-color: color-mix(in srgb, var(--line) 62%, transparent); background: color-mix(in srgb, var(--paper) 58%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, white 58%, transparent); }
.settings-header .wordmark { flex: 0 1 112px; min-width: 0; margin: 0; }
.settings-header .brand-wordmark { display: block; width: 100%; }
.settings-header .brand-wordmark img { display: block; width: 100%; height: auto; }
.settings-header .brand-wordmark img.brand-wordmark__dark { display: none; }
.dark .settings-header .brand-wordmark img.brand-wordmark__light { display: none; }
.dark .settings-header .brand-wordmark img.brand-wordmark__dark { display: block; }
.settings-header .settings-nav { flex: none; }
.settings-header .settings-nav a[aria-current="page"] { border: 1px solid color-mix(in srgb, var(--line) 78%, transparent); background: color-mix(in srgb, var(--paper) 54%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, white 72%, transparent), 0 3px 10px rgb(32 54 55 / .1); }
.wordmark { display: inline-block; margin-bottom: 7px; font: .72rem 'Special Gothic Expanded One', sans-serif; color: var(--ink); letter-spacing: .03em; text-decoration: none; }
.brand-wordmark { display: block; }
.brand-wordmark img { display: block; width: 100%; height: auto; }
.brand-wordmark__dark { display: none !important; }
.dark .brand-wordmark__light { display: none; }
.dark .brand-wordmark__dark { display: block !important; }
.auth-page { min-height: 100vh; max-width: 490px; margin: auto; padding: 28px 20px; }
.auth-card { margin-top: 12vh; padding: 28px; border: 1px solid var(--line); border-radius: 20px; background: var(--panel); }
.auth-card h1 { font-size: 1.7rem; }
.auth-card h2 { margin-top: 34px; font: 1.1rem 'Special Gothic Expanded One', sans-serif; }
.auth-card p { color: var(--muted); line-height: 1.55; }
.auth-card form { display: grid; gap: 18px; margin: 24px 0; }
.auth-card label { display: grid; gap: 7px; font-size: .9rem; font-weight: 600; }
.auth-card label span { color: var(--muted); font-size: .82rem; font-weight: 400; }
.auth-card input { min-height: 48px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: var(--paper); }
.auth-divider { display: flex; align-items: center; gap: 10px; margin: 18px 0 !important; font-size: .82rem; text-align: center; }
.auth-divider::before, .auth-divider::after { flex: 1; border-top: 1px solid var(--line); content: ""; }
.google-button { width: 100%; min-height: 50px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: var(--panel); font-weight: 700; }
.notice { padding: 14px; border-radius: 10px; color: var(--ink) !important; background: var(--aqua); }
.form-error { color: #7e252b !important; font-weight: 700; }
.icon-button, .close { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); background: var(--panel); }
.baby-summary { margin: 0; color: var(--muted); font-size: .9rem; }
.setup-card { margin: 24px 0; padding: 22px; border: 1px solid var(--line); border-radius: 20px; background: var(--panel); }
.setup-card p { color: var(--muted); line-height: 1.5; }
.setup-card > div { display: flex; flex-wrap: wrap; gap: 10px; }
.secondary-button { min-height: 48px; padding: 0 18px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: var(--panel); font-weight: 700; }
.milk-totals { margin: 18px 0 22px; padding: 16px; border: 1px solid var(--aqua-strong); border-radius: 18px; background: var(--aqua); }
.milk-totals > h2 { margin-bottom: 12px; font-size: 1rem; }
.milk-totals > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.milk-totals article { display: grid; gap: 5px; min-height: 82px; padding: 12px; border: 1px solid color-mix(in srgb, var(--aqua-strong) 74%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--panel) 42%, transparent); }
.milk-totals article > span { color: var(--muted); font-size: .76rem; font-weight: 700; }
.milk-totals strong { font: 1.6rem 'Special Gothic Expanded One', sans-serif; letter-spacing: -.06em; line-height: 1; }
.milk-totals strong small { font: .74rem Inter, sans-serif; letter-spacing: 0; }
.milk-totals > p { margin: 12px 0 0; color: var(--muted); font-size: .78rem; line-height: 1.35; }
.tracking-cards { display: grid; gap: 12px; margin: 18px 0 22px; }
.tracking-card { padding: 16px; border: 1px solid var(--aqua-strong); border-radius: 18px; background: var(--aqua); }
.pump-card { border-color: var(--rose-strong); background: #fff4f3; }
.dark .pump-card { background: #3a3031; }
.tracking-card-heading { display: flex; align-items: center; gap: 9px; }
.tracking-card-heading h2 { font-size: 1.04rem; }
.card-status { display: grid; gap: 4px; min-height: 48px; margin: 14px 0; color: var(--muted); font-size: .9rem; line-height: 1.35; }
.card-status strong { color: var(--ink); }
.latest-record { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; min-height: 80px; gap: 12px; margin: 8px 0 14px; }
.latest-record > div { display: grid; gap: 3px; }
.latest-label { color: var(--muted); font-size: .78rem; font-weight: 700; }
.latest-record .latest-detail { margin: 0; color: var(--muted); font-size: .84rem; }
.primary-amount { display: flex; align-items: baseline; gap: 3px; margin: 0; color: var(--ink); font-family: 'Special Gothic Expanded One', sans-serif; line-height: .85; letter-spacing: -.07em; }
.primary-amount > span { font-size: 2.7rem; }
.primary-amount small { font-family: Inter, sans-serif; font-size: .82rem; font-weight: 700; letter-spacing: 0; }
.card-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.card-action { display: flex; align-items: center; justify-content: center; min-height: 58px; gap: 8px; border: 1px solid transparent; border-radius: 13px; color: var(--ink); font-weight: 700; }
.card-action:disabled { cursor: not-allowed; opacity: .52; }
.recent-activity, .history-list { margin-top: 22px; }
.latest-overview { margin: 25px 0 24px; }
.latest-overview > h2 { margin-bottom: 11px; }
.latest-grid { display: grid; gap: 10px; }
.latest { min-height: 170px; padding: 18px; border: 1px solid var(--aqua-strong); border-radius: 19px; background: var(--aqua); }
.latest-pump { border-color: var(--rose-strong); background: #fff4f3; }
.dark .latest-pump { background: #3a3031; }
.latest-title { display: flex; align-items: center; gap: 8px; margin-bottom: 17px; font-size: .84rem; font-weight: 700; }
.latest-title svg { color: var(--ink); }
.latest-detail { margin: 8px 0 12px; color: var(--muted); font-size: .93rem; line-height: 1.4; }
.elapsed { margin: 0; font-size: .9rem; font-weight: 700; }
.record-actions { margin-top: 26px; }
.section-heading { margin-bottom: 10px; }
.section-heading > span { color: var(--muted); font-size: .82rem; }
.section-heading > a { min-height: 44px; display: inline-flex; align-items: center; color: var(--ink); font-size: .84rem; font-weight: 700; }
.actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.action { display: grid; min-height: 96px; place-content: center; gap: 7px; border: 1px solid transparent; border-radius: 16px; color: var(--ink); font-weight: 700; }
.action svg { margin: auto; }
.bottle { background: var(--aqua-strong); }
.breastfeed { background: var(--rose); }
.pump { background: #e6f3f3; }
.dark .pump { background: #315154; }
.action:disabled { cursor: not-allowed; opacity: .52; }
.activity-panel { margin-top: 28px; }
.activity-panel .section-heading { margin-bottom: 8px; }
.activity-list { margin: 0; padding: 0; list-style: none; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.activity-list li { display: block; padding: 0; border: 0; }
.activity-list li + li { border-top: 1px solid var(--line); }
.entry-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto 20px; width: 100%; gap: 9px; align-items: center; padding: 10px 12px; border: 0; color: var(--ink); background: transparent; text-align: left; }
.entry-row:hover { background: var(--paper); }
.entry-row:disabled { cursor: wait; }
.event-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; background: var(--aqua); }
.event-icon.breastfeed { background: var(--rose); }
.event-icon.pump { background: #f4c7c5; }
.event-icon.solids { background: #e8ddb2; }
.event-icon.combo { background: #c9dcdd; }
.dark .event-icon.pump { background: #75494d; }
.dark .event-icon.solids { background: #665d38; }
.dark .event-icon.combo { background: #416468; }
.entry-row strong, .entry-detail { display: block; }
.entry-row strong { font-size: .87rem; }
.entry-detail { margin-top: 2px; color: var(--muted); font-size: .74rem; line-height: 1.35; }
.entry-value { display: flex; align-items: baseline; gap: 2px; color: var(--ink); font-size: 1.04rem; font-weight: 700; white-space: nowrap; }
.entry-value small { color: var(--muted); font-size: .68rem; font-weight: 700; }
.entry-chevron { color: var(--muted); }
.empty-activity { margin: 0; padding: 18px; border: 1px dashed var(--line); border-radius: 16px; color: var(--muted); line-height: 1.45; }
.all-activity { margin-top: 34px; scroll-margin-top: 16px; }
.day-group + .day-group { margin-top: 20px; }
.day-group > h3 { margin: 0 0 8px; font-size: .95rem; }
.sync { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 22px 0; color: var(--muted); font-size: .8rem; text-align: center; }
.status-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #157172; }
.app-footer { display: flex; justify-content: flex-end; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: .78rem; }
.app-footer nav { display: flex; flex-wrap: wrap; gap: 14px; }
.app-footer a { color: var(--ink); }
.overlay { position: fixed; z-index: 20; inset: 0; display: flex; align-items: end; justify-content: center; padding: 12px; background: rgb(18 39 40 / .5); }
.dialog { position: relative; width: min(100%, 540px); max-height: 92vh; overflow: auto; padding: 27px 20px 24px; border-radius: 22px; background: var(--panel); }
.dialog > svg { margin-bottom: 12px; color: var(--ink); }
.dialog > p { color: var(--muted); line-height: 1.5; }
.close { position: absolute; top: 13px; right: 13px; border: 0; font-size: 25px; }
.back-button { min-height: 44px; margin: -7px 0 18px; padding: 0; border: 0; color: var(--ink); background: transparent; font-weight: 700; text-decoration: underline; }
.dialog form { display: grid; gap: 18px; margin-top: 20px; }
.dialog label { display: grid; gap: 7px; font-size: .9rem; font-weight: 600; }
.dialog label span { color: var(--muted); font-weight: 400; }
.dialog input[type="number"], .dialog input[type="datetime-local"], .dialog input:not([type]) { min-height: 48px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: var(--paper); }
.dialog fieldset { margin: 0; padding: 0; border: 0; }
.dialog legend { margin-bottom: 8px; font-size: .9rem; font-weight: 600; }
.choice-row { display: flex; flex-wrap: wrap; gap: 8px; }
.choice-row label, .theme-toggle { display: flex !important; align-items: center; min-height: 44px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 10px; text-transform: capitalize; }
.last-amount { justify-self: start; min-height: 44px; padding: 0; border: 0; color: var(--ink); background: transparent; font-weight: 700; text-decoration: underline; }
.amount-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.amount-options button { min-height: 48px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: var(--paper); font-weight: 700; }
.amount-options button.selected { border-color: var(--aqua-strong); background: var(--aqua); }
.exact-amount { margin-top: 10px; }
.change-time { min-height: 44px; justify-self: start; padding: 0; border: 0; color: var(--ink); background: transparent; font-weight: 700; text-decoration: underline; }
.entry-dialog .form-error { margin: 0; }
.save { display: flex; align-items: center; justify-content: center; min-height: 50px; gap: 7px; border: 0; border-radius: 12px; color: #172a2b; background: var(--aqua-strong); font-weight: 700; }
.remove-entry { min-height: 44px; border: 0; color: #7e252b; background: transparent; font-weight: 700; text-decoration: underline; }
.dark .remove-entry { color: #ffb7bb; }
.invite-code { margin: 18px 0 12px; padding: 16px; border-radius: 12px; background: var(--aqua); font: 1.35rem 'Special Gothic Expanded One', sans-serif; letter-spacing: .08em; text-align: center; }
.theme-toggle { margin-top: 16px; }
.settings-information { margin: 30px 0; }
.settings-information h2 { margin-top: 0; }
.settings-information nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.settings-information a { display: grid; min-height: 48px; place-items: center; padding: 8px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: var(--paper); font-size: .82rem; font-weight: 700; text-align: center; text-decoration: none; }
.settings-information a:hover { background: var(--aqua); }
.settings-information a:focus-visible, .settings-header a:focus-visible { outline: 3px solid var(--rose-strong); outline-offset: 3px; }
.entry-picker h2 { margin-right: 44px; }
.picker-actions { display: grid; gap: 10px; margin-top: 22px; }
.picker-choice { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 10px; align-items: center; min-height: 86px; padding: 16px; border: 1px solid transparent; border-radius: 16px; color: var(--ink); text-align: left; }
.picker-choice svg { grid-row: span 2; }
.picker-choice span { font-weight: 700; }
.picker-choice small { color: color-mix(in srgb, var(--ink) 70%, transparent); font-size: .82rem; }
.feed-choice { background: var(--aqua); border-color: var(--aqua-strong); }
.picker-choice.pump { background: #fff4f3; border-color: var(--rose-strong); }
.picker-choice.solid { border-color: #d0be74; background: #fff9df; }
.picker-choice.combo { border-color: #78a2a5; background: #e3f0f0; }
.dark .picker-choice.pump { background: #3a3031; }
.dark .picker-choice.solid { background: #463f28; }
.dark .picker-choice.combo { background: #29494c; }
.bottom-nav { position: fixed; z-index: 10; right: max(8px, env(safe-area-inset-right)); bottom: max(8px, env(safe-area-inset-bottom)); left: max(8px, env(safe-area-inset-left)); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center; min-height: 68px; padding: 6px 7px; border: 1px solid color-mix(in srgb, var(--line) 64%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--panel) 72%, transparent); box-shadow: 0 .7rem 1.8rem rgb(32 54 55 / .16), inset 0 1px 0 color-mix(in srgb, white 66%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--ink) 9%, transparent); isolation: isolate; backdrop-filter: blur(22px) saturate(145%); -webkit-backdrop-filter: blur(22px) saturate(145%); }
.bottom-nav::before { position: absolute; z-index: 0; top: -27px; left: 50%; width: 84px; height: 84px; border: 1px solid color-mix(in srgb, var(--line) 64%, transparent); border-radius: 50%; background: color-mix(in srgb, var(--panel) 78%, transparent); box-shadow: 0 .6rem 1.4rem rgb(32 54 55 / .15), inset 0 1px 0 color-mix(in srgb, white 72%, transparent); content: ""; transform: translateX(-50%); backdrop-filter: blur(22px) saturate(145%); -webkit-backdrop-filter: blur(22px) saturate(145%); }
.bottom-nav a, .bottom-nav button { position: relative; z-index: 1; display: grid; min-height: 56px; place-items: center; gap: 3px; padding: 5px 2px; border: 1px solid transparent; border-radius: 999px; color: var(--muted); background: transparent; font-size: .75rem; font-weight: 700; line-height: 1; text-decoration: none; transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, color 160ms ease; }
.bottom-nav span { font-family: 'Special Gothic Expanded One', sans-serif; font-size: .67rem; letter-spacing: -.06em; white-space: nowrap; }
.bottom-nav a[aria-current="page"] { border-color: color-mix(in srgb, var(--line) 78%, transparent); color: var(--ink); background: color-mix(in srgb, var(--paper) 54%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, white 72%, transparent), 0 3px 10px rgb(32 54 55 / .1); }
.bottom-nav a[aria-current="page"] svg { stroke-width: 2.5; }
.bottom-nav .add-activity { z-index: 2; width: 78px; min-height: 78px; margin: -34px auto 0; border: 0; border-radius: 50%; color: var(--muted); background: transparent; box-shadow: none; }
.bottom-nav .add-activity:hover { color: var(--ink); }
.bottom-nav .add-activity span { margin-top: -2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }

@media (min-width: 560px) {
  .app-shell { padding-top: 36px; }
  .latest-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tracking-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bottom-nav { right: max(16px, calc((100vw - 730px) / 2)); bottom: 16px; left: max(16px, calc((100vw - 730px) / 2)); }
}

@media (min-width: 700px) {
  .app-shell { padding-top: 44px; }
  .actions { gap: 14px; }
  .action { min-height: 110px; }
  .overlay { align-items: center; }
}

@media (max-width: 360px) {
  .app-footer { flex-direction: column; align-items: flex-start; }
  .app-footer nav { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .bottom-nav a, .bottom-nav button { transition: none; }
}

@media (forced-colors: active) {
  .app-header .topbar, .settings-header, .bottom-nav, .bottom-nav::before, .bottom-nav a[aria-current="page"] { background: Canvas; border-color: CanvasText; box-shadow: none; }
  .bottom-nav a, .bottom-nav button { color: CanvasText; }
}