/* Interactive calendar demo — see cal-demo.js. Category colours come from
   the app (app/src/lib/calendarEvents.ts); everything else from the site. */

.cd{
  --cd-line:#EEEBE2; --cd-ink:#2E332E; --cd-mute:#8A918A; --cd-red:#E0645A;
  position:relative; background:#fff; border:1px solid #E2E0D6; border-radius:28px;
  box-shadow:0 22px 60px rgba(46,51,46,.14), 0 4px 14px rgba(46,51,46,.06);
  overflow:hidden; font-family:inherit; color:var(--cd-ink); max-width:560px; margin:0 auto;
  -webkit-tap-highlight-color:transparent; text-align:left;
}
:where(.cd) button{font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer}
:where(.cd) button:focus-visible{outline:2px solid #6B8E6F; outline-offset:2px}

/* top bar */
.cd-top{padding:16px 16px 10px; border-bottom:1px solid var(--cd-line); background:linear-gradient(#FBFAF5,#fff)}
.cd-ttl{display:flex; align-items:center; justify-content:space-between; gap:10px}
.cd-ttl b{font-size:1.15rem; font-weight:700; letter-spacing:-.01em}
.cd-switch{display:flex; background:#F3F1E9; border-radius:999px; padding:3px; font-size:.78rem; font-weight:600}
.cd-switch span{padding:4px 11px; border-radius:999px; color:var(--cd-mute)}
.cd-switch span.on{background:#fff; color:var(--cd-ink); box-shadow:0 1px 3px rgba(46,51,46,.12)}
.cd-bar{display:flex; align-items:center; justify-content:space-between; margin-top:12px; gap:8px}
.cd-nav{display:flex; align-items:center; gap:4px; min-width:0}
.cd-arrow{width:28px; height:28px; border-radius:50%; font-size:1.2rem !important; line-height:1; color:var(--cd-mute) !important}
.cd-arrow:hover:not(:disabled){background:#F3F1E9}
.cd-arrow:disabled{opacity:.3; cursor:default !important}
.cd-label{font-weight:700; font-size:.92rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cd-seg{display:flex; border:1px solid #E2E0D6; border-radius:999px; padding:2px; flex:none}
.cd-seg button{padding:4px 12px; border-radius:999px; font-size:.8rem; font-weight:600; color:var(--cd-mute)}
.cd-seg button.on{background:#87A987; color:#fff}

/* legend — chips double as show/hide toggles, as in the app */
.cd-legend{display:flex; flex-wrap:wrap; gap:6px; margin-top:12px}
.cd-chip{display:inline-flex; align-items:center; gap:6px; padding:4px 10px 4px 8px; border-radius:999px;
  background:var(--s); color:var(--i) !important; font-size:.74rem !important; font-weight:600; transition:opacity .2s, filter .2s}
.cd-chip i{width:8px; height:8px; border-radius:50%; background:var(--c)}
.cd-chip[aria-pressed="false"]{opacity:.45; filter:grayscale(1)}
.cd-chip:hover{filter:brightness(.97)}

/* day header + all-day row */
.cd-head,.cd-allday{display:flex; border-bottom:1px solid var(--cd-line)}
.cd-gut{flex:0 0 34px; font-size:.54rem; line-height:1.1; text-align:center; color:var(--cd-mute); display:flex; align-items:center; justify-content:center; text-transform:uppercase; letter-spacing:.04em}
.cd-dh{flex:1; display:flex; flex-direction:column; align-items:center; padding:7px 0 6px; min-width:0}
.cd-dh small{font-size:.66rem; color:var(--cd-mute); font-weight:600; text-transform:uppercase; letter-spacing:.05em}
.cd-dh b{font-size:.95rem; width:26px; height:26px; line-height:26px; border-radius:50%; text-align:center; margin-top:1px}
.cd-dh.today b{background:#87A987; color:#fff}
.cd-dayv .cd-dh{flex-direction:row; justify-content:flex-start; gap:8px; padding-left:8px; cursor:default}
.cd-allday{min-height:30px}
.cd-adcol{flex:1; padding:4px 2px; min-width:0; display:flex; flex-direction:column; gap:3px}

/* the grid */
.cd-scroll{height:340px; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; position:relative}
.cd-grid{position:relative; display:flex; padding-left:34px;
  background-image:linear-gradient(var(--cd-line) 1px, transparent 1px);}
.cd-week .cd-grid{background-size:100% 15px}
.cd-dayv .cd-grid{background-size:100% 46px}
.cd-hours{position:absolute; left:0; top:0; bottom:0; width:34px; background:#fff}
.cd-hours span{position:absolute; right:6px; transform:translateY(-50%); font-size:.6rem; color:var(--cd-mute); font-weight:600}
.cd-col{flex:1; position:relative; border-left:1px solid var(--cd-line); min-width:0}
.cd-col.today{background:rgba(135,169,135,.06)}
.cd-col.future{background:repeating-linear-gradient(135deg, transparent 0 6px, rgba(46,51,46,.018) 6px 12px)}

/* events */
.cd-ev{position:absolute; transition:opacity .25s, transform .25s}
.cd-ev.span{left:2px; right:2px; border-radius:5px; background:var(--s); border-left:3px solid var(--c);
  overflow:hidden; text-align:left; transform-origin:top}
.cd-week .cd-ev.span{left:1px; right:1px; border-left-width:2px; border-radius:3px; background:var(--c); opacity:.88}
.cd-dayv .cd-ev.span{right:38%; padding:3px 7px; display:flex; flex-direction:column; justify-content:flex-start}
.cd-ev.span span{font-size:.74rem; font-weight:700; color:var(--i); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.25}
.cd-ev.span small{font-size:.66rem; color:var(--i); opacity:.8}
.cd-ev.pin{right:2px; width:8px; height:8px; margin-top:-4px; border-radius:50%; background:var(--c); box-shadow:0 0 0 2px #fff}
.cd-dayv .cd-ev.pin{left:63%; right:4px; width:auto; height:18px; margin-top:-9px; border-radius:9px; background:var(--s);
  box-shadow:none; display:flex; align-items:center; padding:0 7px; border-left:3px solid var(--c)}
.cd-dayv .cd-ev.pin span{font-size:.64rem; font-weight:700; color:var(--i); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cd-ev.ad{position:static; border-radius:4px; background:var(--s); border-left:3px solid var(--c); padding:1px 5px; text-align:left; overflow:hidden}
.cd-ev.ad span{display:block; font-size:.6rem; font-weight:700; color:var(--i); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cd-week .cd-ev.ad{height:10px; padding:0}
.cd-week .cd-ev.ad span{display:none}

/* planned (dashed) and running timers (dashed, shimmering) */
.cd-ev.plan{background:#fff !important; border:1.5px dashed var(--c) !important; opacity:1 !important}
.cd-ev.run{background:repeating-linear-gradient(135deg, var(--s) 0 6px, #fff 6px 12px) !important;
  background-size:34px 34px !important; border:1.5px dashed var(--c) !important; opacity:1 !important; animation:cd-march 1.2s linear infinite}
@keyframes cd-march{to{background-position:34px 0}}

.cd-ev:hover{filter:brightness(.96); z-index:2}
.cd-ev.sel{z-index:3; box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--c)}

/* legend filtering */
.cd-off-feed .cd-ev[data-c=feed], .cd-off-sleep .cd-ev[data-c=sleep], .cd-off-diaper .cd-ev[data-c=diaper],
.cd-off-solid .cd-ev[data-c=solid], .cd-off-med .cd-ev[data-c=med], .cd-off-symptom .cd-ev[data-c=symptom],
.cd-off-appointment .cd-ev[data-c=appointment], .cd-off-vaccine .cd-ev[data-c=vaccine]{
  opacity:0 !important; transform:scale(.85); pointer-events:none}

/* now line */
.cd-now{position:absolute; left:-1px; right:0; height:2px; background:var(--cd-red); z-index:4; pointer-events:none}
.cd-now::before{content:""; position:absolute; left:-4px; top:-3px; width:8px; height:8px; border-radius:50%; background:var(--cd-red)}

/* draw-in animation, played once the demo scrolls into view */
.cd:not(.cd-seen) .cd-ev{opacity:0}
.cd-play .cd-ev.span{animation:cd-grow .55s cubic-bezier(.2,.8,.2,1) both}
.cd-play .cd-ev.run{animation:cd-grow .55s cubic-bezier(.2,.8,.2,1) both, cd-march 1.2s linear .6s infinite}
.cd-play .cd-ev.pin,.cd-play .cd-ev.ad{animation:cd-pop .4s cubic-bezier(.2,.8,.2,1.4) both}
@keyframes cd-grow{from{opacity:0; transform:scaleY(.2)} to{transform:none}}
@keyframes cd-pop{from{opacity:0; transform:scale(.3)} to{transform:none}}

/* detail sheet */
.cd-sheet{border-top:1px solid var(--cd-line); padding:12px 16px 14px; min-height:92px; background:#FBFAF5}
.cd-sheet.idle{display:flex; align-items:center; justify-content:center; color:var(--cd-mute); font-size:.8rem; font-weight:600}
.cd-sh-h{display:flex; align-items:center; gap:10px}
.cd-sh-h i{flex:none; width:12px; height:12px; border-radius:4px; background:var(--c)}
.cd-sh-h div{flex:1; min-width:0}
.cd-sh-h b{display:block; font-size:.92rem; line-height:1.25}
.cd-sh-h span{font-size:.74rem; color:var(--cd-mute)}
.cd-sh-h em{font-style:normal; font-size:.68rem; font-weight:700; padding:2px 8px; border-radius:999px; background:var(--s); color:var(--cd-ink)}
.cd-sheet dl{display:grid; grid-template-columns:auto 1fr; gap:2px 14px; margin:8px 0 0 22px; font-size:.78rem}
.cd-sheet dt{color:var(--cd-mute)}
.cd-sheet dd{margin:0; font-weight:600}

@media (max-width:480px){
  .cd{border-radius:22px}
  .cd-top{padding:14px 12px 10px}
  .cd-switch{display:none}
  .cd-scroll{height:300px}
}
@media (prefers-reduced-motion:reduce){
  .cd-play .cd-ev,.cd-ev.run{animation:none !important}
}