/* Sunup report (js/report.js): "Your week with Pip". A full-height light sheet, with the jar as the main thing.
 * The survival card is a night sky (light text on dark); everything else is dark text on paper. */
.rp-ui { position: fixed; inset: 0; z-index: 76; display: flex; align-items: stretch; justify-content: center; background: rgba(30, 26, 66, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: fadein .3s ease; }
.rp-sheet { position: relative; width: min(480px, 100%); box-sizing: border-box; max-height: 100%; overflow-y: auto; background: var(--paper); color: var(--ink); animation: rp-up .4s cubic-bezier(.2, .9, .3, 1.1); }
.rp-card { min-height: 100%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; text-align: center; padding: calc(22px + env(safe-area-inset-top)) 22px calc(20px + env(safe-area-inset-bottom)); }
.rp-card .kicker { margin: 4px 0 6px; }
.rp-card .btn.big { width: 100%; margin-top: 14px; }
.rp-close { margin: 8px auto 0; font-weight: 800; color: var(--muted); }
.rp-big { margin: 4px 0 2px; font-size: var(--fs-4xl); font-weight: var(--fw-display); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.rp-sub { margin: 0; font-size: var(--fs-md); font-weight: 800; max-width: 30ch; }
.rp-sub.rp-lg { font-size: var(--fs-xl); }
.rp-small { margin: 8px 0 0; font-size: var(--fs-sm); color: var(--muted); max-width: 34ch; }
.rp-small.rp-md { font-size: var(--fs-md); }
.rp-small b { color: var(--ink); }
.rp-label { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 4px 12px; border-radius: 99px; background: #FFF1C9; color: #6B4700; font-size: var(--fs-xs); font-weight: 800; }
.rp-how { margin-top: 12px; max-width: 34ch; text-align: left; }
.rp-how summary { cursor: pointer; list-style: none; text-align: center; font-size: var(--fs-xs); font-weight: 800; color: var(--muted); }
.rp-how summary::-webkit-details-marker { display: none; }
.rp-how summary::before { content: '› '; }
.rp-how p { margin: 6px 0 0; font-size: var(--fs-sm); color: var(--muted); }
.rp-dots { position: absolute; top: calc(10px + env(safe-area-inset-top)); left: 0; right: 0; display: flex; justify-content: center; gap: 6px; z-index: 1; }
.rp-dots i { width: 26px; height: 4px; border-radius: 99px; background: rgba(58, 51, 80, .18); }
.rp-dots i.on { background: var(--ink); }

/* card 1: the jar */
.rp-jarsvg { width: min(230px, 62vw); height: auto; margin: 2px 0 0; }
.rp-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; width: 100%; max-width: 300px; margin-top: 12px; font-size: var(--fs-2xs); font-weight: 800; color: var(--muted); }
.rp-days span { display: grid; gap: 2px; justify-items: center; }
.rp-days i { font-style: normal; font-size: var(--fs-xs); color: var(--ink); min-height: 1.2em; }

/* card 2 pictures */
.rp-sea, .rp-sunsvg { width: 100%; max-width: 300px; height: auto; margin: 6px 0; }
.rp-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; max-width: 320px; margin: 4px 0 10px; }
.rp-pair div { background: #fff; border-radius: 16px; padding: 10px 8px; box-shadow: 0 2px 0 var(--line); font-size: var(--fs-xs); font-weight: 800; color: var(--muted); }
.rp-pair b { display: block; font-size: var(--fs-xl); font-weight: var(--fw-display); color: var(--ink); }
.rp-waves, .rp-suns { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 30px 0 16px; max-width: 300px; }
.rp-waves i, .rp-suns i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #F1E9DD; color: #A79A8B; font-size: 24px; }
.rp-waves i.on { background: #DDEFF7; color: #2F6E95; }
.rp-suns i.on { background: #FFE9A8; color: #C77A12; }
.rp-factor { display: grid; place-items: center; width: 120px; height: 120px; margin: 30px 0 14px; border-radius: 36px; background: #fff; color: #B2741E; box-shadow: 0 4px 0 var(--line), var(--shadow); }

/* the night-sky card (survival): light text on dark */
.rp-card.rp-dark { background: linear-gradient(180deg, #1E1C4A, #3A2E6E 60%, #5A447E); color: #F3EFFC; }
.rp-dark .kicker, .rp-dark .rp-small, .rp-dark .rp-how summary, .rp-dark .rp-how p, .rp-dark .rp-close { color: #D3CCEA; }
.rp-dark .rp-label { background: rgba(255, 241, 201, .16); color: #FFE39A; }
.rp-sheet:has(.rp-dark) .rp-dots i { background: rgba(255, 255, 255, .3); }
.rp-sheet:has(.rp-dark) .rp-dots i.on { background: #fff; }

/* Progress: the jar, always there, never pushed */
.rp-tile { display: flex; align-items: center; gap: 14px; width: 100%; margin: 12px 0; padding: 14px 16px; border: 0; border-radius: 20px; background: linear-gradient(180deg, #FFF6DD, #FFEBB8); color: var(--ink); box-shadow: 0 3px 0 #EBCB82, var(--shadow); font: inherit; text-align: left; cursor: pointer; }
.rp-tile svg { flex: none; }
.rp-tile b { display: block; font-size: var(--fs-lg); }
.rp-tile small { display: block; color: #5E4A2A; font-weight: 700; font-size: var(--fs-sm); }

/* Today: the one-tap question about a morning without a check-in */
.rp-ask { margin: 10px 0 14px; padding: 12px 14px; }
.rp-ask p { margin: 0 0 8px; font-weight: 800; }
.rp-ask .chips-row { justify-content: flex-start; margin: 0; }
.rp-ask .tiny { margin: 8px 0 0 !important; }

@keyframes rp-up { from { transform: translateY(30px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .rp-sheet { animation: none; } }