/* calendar.app + your_day.log (src/widgets/calendar.js, yourday.js) */

/* ---- your_day.log ---- */
#win-day { --max-w: 760px; }
.yd { gap: 10px; }
.yd-head, .cal-head { display: flex; align-items: center; gap: 6px; }
.yd-day, .cal-title { flex: 1; text-align: center; font-family: var(--display); font-size: 18px; }
.yd-day .mut { font-family: var(--mono, inherit); font-size: 12px; }
.yd-line { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; position: relative; max-height: 260px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } /* about 6 rows on the desk */
.win.max .yd-line { max-height: none; overflow: visible; }
.yd-line::before { content: ""; position: absolute; left: 64px; top: 6px; bottom: 6px; width: 2px; background: var(--rule); }
.yd-e, .yd-now { display: grid; grid-template-columns: 56px 16px minmax(0, 1fr) auto; gap: 0 6px; align-items: start; padding: 5px 4px 5px 0; position: relative; }
.yd-len { font-size: 12px; font-weight: 700; white-space: nowrap; padding-top: 1px; }
.yd-foot { margin: 0; font-size: 11px; }
.yd-t { font-size: 11px; font-weight: 700; text-align: right; display: flex; flex-direction: column; line-height: 1.25; padding-top: 2px; }
.yd-t .mut { font-weight: 400; }
.yd-dot { width: 12px; height: 12px; border: 2px solid var(--outline); background: var(--kc, var(--field)); margin: 3px 0 0 2px; z-index: 1; }
.yd-what { display: flex; flex-direction: column; min-width: 0; }
.yd-what b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yd-what .mut { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yd-e.planned .yd-dot { border-style: dashed; background: var(--field); }
.yd-e.planned .yd-what b { font-weight: 400; font-style: italic; }
.yd-focus { --kc: var(--purple); } .yd-timing { --kc: var(--yellow); } .yd-task { --kc: var(--orange-2); }
.yd-step, .yd-card { --kc: var(--orange); } .yd-media, .yd-checkin { --kc: var(--peach); } .yd-routine { --kc: var(--green); }
.yd-plan { --kc: var(--blue); }
.yd-now { align-items: center; }
.yd-now .yd-t { color: var(--accent); }
.yd-nowbar { grid-column: 2 / 5; height: 3px; background: var(--accent); }
.yd-nowlab { position: absolute; right: 0; top: -6px; font-size: 10px; font-weight: 700; text-transform: uppercase; background: var(--accent); color: var(--on-accent); padding: 0 5px; border: 1.5px solid var(--outline); }
.yd-empty { margin: 0; font-size: 13px; }
.win.max .yd-what b { font-size: 15px; white-space: normal; }
.win.max .yd-what .mut { font-size: 12px; white-space: normal; }

/* ---- calendar.app ---- */
#win-calendar { --max-w: 980px; }
.cal { gap: 8px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-wd { text-align: center; font-size: 11px; font-weight: 700; color: var(--mute); }
.cal-d { position: relative; aspect-ratio: 1; min-height: 34px; border: 1.5px solid var(--outline); background: var(--field); padding: 3px; display: flex; flex-direction: column; align-items: stretch; gap: 2px; cursor: pointer; font: inherit; text-align: left; }
.cal-d:hover { background: var(--hover); }
.cal-d.future { background: transparent; border-style: dashed; }
.cal-d.today { box-shadow: 2px 2px 0 var(--outline); border-width: 2px; }
.cal-d.today .cal-n { background: var(--accent); color: var(--on-accent); padding: 0 3px; }
.cal-d.sel { outline: 3px solid var(--accent); outline-offset: 1px; z-index: 1; }
.cal-n { font-size: 11px; font-weight: 700; align-self: flex-start; line-height: 1.3; }
.cal-evs { display: flex; flex-direction: column; gap: 2px; min-width: 0; } /* Google Calendar events (Phase 3) */
/* maximized: a big, clean month, then the picked day's panel */
.win.max .cal-grid { gap: 6px; }
.win.max .cal-d { aspect-ratio: auto; min-height: 84px; padding: 6px; }
.win.max .cal-n { font-size: 15px; }
.win.max .cal-wd { font-size: 13px; }
.win.max .cal-title { font-size: 26px; }
.cal-panel { border-top: var(--line) solid var(--outline); padding-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.cal-panel h3 { margin: 0; font-family: var(--display); font-size: 22px; }
.cal-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.cal-stat { border: var(--b); background: var(--field); padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cal-stat small { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--mute); }
.cal-stat b { font-family: var(--display); font-size: 26px; line-height: 1; }
.cal-stat span { display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.cal-stat i { font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-stat i.on { font-weight: 700; }
.cal-stat em { font-style: normal; color: var(--mute); font-size: 11px; }
.cal-evnote { margin: 0; font-size: 12px; }
@media (max-width: 860px) { .cal-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* the dots: what a day had, so the empty days stand out */
.cal-dots { display: flex; gap: 3px; margin-top: auto; flex-wrap: wrap; }
.dot { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--outline); display: inline-block; flex: none; }
.dot.hab { background: var(--heat, var(--green)); }
.dot.hab.part { background: var(--field); border-color: var(--heat, var(--green)); border-width: 2px; }
.dot.focus { background: var(--purple-deep, var(--purple)); }
.dot.done { background: var(--peach-deep, var(--peach)); }
.dot.due { background: var(--yellow-deep, var(--yellow)); }
.win.max .dot { width: 11px; height: 11px; }
.win.max .cal-dots { gap: 5px; }
.cal-key { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11px; }
.cal-key span { display: inline-flex; align-items: center; gap: 4px; }