/* Daily notes: dark green, green, white. Uses the variables from style.css */
.upage{background:var(--forest);color:#fff;min-height:100svh}
.upage::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 115%,rgba(53,85,63,.6),transparent 62%)}
.u-wrap{
  max-width:560px;margin:0 auto;
  padding:max(1.5rem,env(safe-area-inset-top)) clamp(1rem,5vw,1.5rem) max(4rem,env(safe-area-inset-bottom));
}
.u-back{display:inline-block;color:var(--sage);text-decoration:none;font-size:.95rem;padding:.5rem 0;margin-bottom:clamp(1.5rem,6vw,2.5rem)}
.u-back:hover,.u-back:focus-visible{color:#fff;outline:none}
.u-wrap h1{font-family:var(--serif);font-weight:300;font-size:clamp(2.4rem,11vw,3.6rem);line-height:1.1;text-align:center}
.u-sub{text-align:center;color:var(--sage);margin:.6rem 0 clamp(2rem,7vw,2.8rem)}

/* Calendar */
.cal-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:1.2rem}
.cal-head h2{font-family:var(--serif);font-weight:500;font-size:clamp(1.3rem,5vw,1.7rem);text-align:center}
.cal-nav{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--moss);background:transparent;color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;transition:background .3s}
.cal-nav:hover:not(:disabled),.cal-nav:focus-visible{background:var(--pine);outline:none}
.cal-nav:disabled{opacity:.25;cursor:default}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(.2rem,1.5vw,.45rem)}
.cal-dow{margin-bottom:.5rem}
.cal-dow span{text-align:center;color:var(--moss);font-size:.78rem;letter-spacing:.08em}
.day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:clamp(.8rem,3.4vw,.98rem);color:var(--moss);text-decoration:none;border:1px solid transparent;-webkit-tap-highlight-color:transparent}
.day.has{background:var(--moss);color:#fff;cursor:pointer;transition:background .3s,transform .3s}
.day.has:focus-visible{background:var(--sage);color:var(--forest);outline:none}
@media (hover:hover){.day.has:hover{background:var(--sage);color:var(--forest);transform:scale(1.08)}}
.day.today{border-color:var(--sage);color:#fff}
.u-latest{display:block;text-align:center;margin-top:clamp(2rem,7vw,2.8rem);color:var(--sage);text-decoration:none;font-family:var(--serif);font-style:italic;font-size:clamp(1.15rem,4vw,1.3rem);padding:.5rem}
.u-latest:hover,.u-latest:focus-visible{color:#fff;outline:none}

/* Single day: date */
.upage .note{text-align:center}
.upage .note .date{font-family:var(--serif);font-weight:300;font-size:clamp(1.7rem,6.5vw,2.3rem);line-height:1.2;color:var(--mist);margin:0 0 clamp(2rem,7vw,2.8rem)}

/* Single day: one polaroid, swipe through the pictures */
.p-stack{display:flex;justify-content:center;margin-bottom:clamp(2.4rem,8vw,3.2rem)}
.polaroid{--r:-1.5deg;position:relative;width:min(88%,360px);padding:.9rem .9rem 0;background:var(--paper);border-radius:3px;box-shadow:0 18px 40px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.3);transform:translateY(26px) rotate(var(--r));opacity:0;transition:opacity .9s ease,transform .9s ease}
.polaroid.in{opacity:1;transform:translateY(0) rotate(var(--r))}
@media (hover:hover){.polaroid.in:hover{transform:translateY(0) rotate(0deg) scale(1.01);transition:transform .4s ease}}
.polaroid .tape{position:absolute;top:-13px;left:50%;width:92px;height:26px;transform:translateX(-50%) rotate(-3deg);background:rgba(143,174,150,.78);border-left:2px dotted rgba(255,255,255,.45);border-right:2px dotted rgba(255,255,255,.45);z-index:2}
.p-win{position:relative;aspect-ratio:4/5;background:var(--mist);overflow:hidden;border-radius:2px;color:var(--moss)}
.p-track{display:flex;width:100%;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.p-track::-webkit-scrollbar{display:none}
.p-slide{flex:0 0 100%;height:100%;scroll-snap-align:center;scroll-snap-stop:always;display:flex;align-items:center;justify-content:center;cursor:zoom-in;-webkit-tap-highlight-color:transparent}
.p-slide img{width:100%;height:100%;object-fit:cover;display:block}
.p-slide img.fit{object-fit:contain}
.p-slide .empty{font-size:.8rem;text-align:center;padding:1rem;border:1px dashed var(--sage);border-radius:6px;margin:1.2rem;overflow-wrap:anywhere}
.p-arrow,.p-hint{position:absolute;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;border:0;background:rgba(14,29,21,.55);color:var(--mist);font-size:1.4rem;line-height:1;cursor:pointer;align-items:center;justify-content:center;transition:opacity .4s}
.p-arrow{display:none}
.p-arrow.l{left:.6rem}.p-arrow.r{right:.6rem}
.p-hint{display:flex;right:.6rem;animation:pnudge 1.8s ease-in-out 3}
.p-hint.hide{opacity:0;pointer-events:none}
@keyframes pnudge{0%,100%{transform:translate(0,-50%)}50%{transform:translate(-6px,-50%)}}
@media (hover:hover) and (pointer:fine){.p-win:hover .p-arrow{display:flex}.p-hint{display:none}}
.p-dots{display:flex;justify-content:center;gap:.4rem;padding-top:.8rem;pointer-events:none}
.p-dots i{width:6px;height:6px;border-radius:50%;background:var(--sage);opacity:.55;transition:all .3s}
.p-dots i.on{width:18px;border-radius:4px;background:var(--pine);opacity:1}
.polaroid figcaption{text-align:center;padding:.8rem 0 1.2rem;font-family:var(--serif);font-style:italic;font-size:1.3rem;line-height:1.3;color:var(--moss);min-height:3.2rem}
@media (prefers-reduced-motion:reduce){.polaroid{opacity:1;transform:rotate(var(--r));transition:none}.p-hint{animation:none}}

/* Single day: message */
.upage .note p{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(1.2rem,4.2vw,1.45rem);line-height:1.75;color:#fff;white-space:pre-line;overflow-wrap:anywhere}
.upage .note p::before{content:"";display:block;width:36px;height:1px;background:var(--moss);margin:0 auto 1.8rem}
.d-nav{display:flex;justify-content:space-between;gap:1rem;margin-top:3rem}
.d-nav a{color:var(--sage);text-decoration:none;font-family:var(--serif);font-style:italic;font-size:clamp(1.05rem,3.8vw,1.2rem);padding:.5rem 0}
.d-nav a:hover,.d-nav a:focus-visible{color:#fff;outline:none}

/* Floating button on the main page (music button stays bottom-right) */
.fab{position:fixed;left:max(1rem,env(safe-area-inset-left));bottom:max(1rem,env(safe-area-inset-bottom));z-index:40;display:flex;align-items:center;gap:.55rem;height:44px;padding:0 1.1rem 0 .95rem;border-radius:999px;border:1px solid var(--sage);background:rgba(14,29,21,.78);color:var(--mist);text-decoration:none;font-size:.92rem;letter-spacing:.03em;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);-webkit-tap-highlight-color:transparent;transition:background .3s,transform .3s}
.fab:hover,.fab:focus-visible{background:var(--pine);outline:none}
.fab:active{transform:scale(.96)}
@media (max-width:360px){.fab{padding:0 .9rem 0 .8rem;font-size:.85rem}}

/* Music button on the updates pages */
.u-music{position:fixed;right:max(1rem,env(safe-area-inset-right));bottom:max(1rem,env(safe-area-inset-bottom));z-index:40;width:44px;height:44px;border-radius:50%;border:1px solid var(--sage);background:rgba(14,29,21,.78);color:var(--mist);font-size:1.2rem;cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:background .3s,opacity .3s}
.u-music:hover,.u-music:focus-visible{background:var(--pine);outline:none}
.u-music.off{opacity:.55;text-decoration:line-through}