/* Flora CEO: the month view and the day list. */
.month-sheet .sheet-head { position: absolute; top: calc(var(--safe-t) + 4px); right: 4px; z-index: 3; padding: 8px 14px; pointer-events: none; }
.month-sheet .sheet-head .top-actions { pointer-events: auto; }
.month-sheet .sheet-head .icon-btn { background: var(--glass-2); border: 1px solid var(--glass-border); }
.month-sheet .sheet-body { padding-top: calc(var(--safe-t) + 12px); }
.mo-head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; padding-right: 50px; min-height: 40px; }
.mo-title { flex: 1; min-width: 0; font-size: 40px; line-height: 1; }
.mo-title small { font: 500 15px/1 var(--font-ui); color: var(--ink-3); }

.mo-score { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 16px; align-items: center; padding: 16px; }
.mo-ring { position: relative; width: 124px; height: 124px; }
.mo-ring svg { width: 100%; height: 100%; display: block; }
.mo-ring-in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.mo-ring-in b { font-size: 34px; line-height: 1; font-variant-numeric: tabular-nums; }
.mo-ring-in span { font: 500 10.5px/1 var(--font-ui); color: var(--ink-2); margin-top: 2px; }
.mo-sides { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.mo-side { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 4px 8px; }
.mo-side .eyebrow { font-size: 10px; letter-spacing: .1em; }
.mo-side b { font-size: 26px; font-variant-numeric: tabular-nums; line-height: 1; }
.mo-side .bar { grid-column: 1 / -1; }

/* ---------- the calendar ---------- */
.mo-cal { margin-top: 12px; padding: 14px 14px 12px; }
.cal-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; text-align: center; font: 800 10.5px/1 var(--font-ui); color: var(--ink-3); margin-bottom: 7px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.cal-day { aspect-ratio: 1; border-radius: 11px; display: grid; place-items: center; font: 600 13.5px/1 var(--font-ui); font-variant-numeric: tabular-nums; color: var(--ink-2); transition: transform .14s var(--ease); }
button.cal-day:active { transform: scale(.92); }
.cal-day.fut { color: var(--ink-3); opacity: .45; }
.cal-day.pre { color: var(--ink-3); opacity: .35; }
.cal-l0 { background: var(--fill); color: var(--ink-2); }
.cal-l1 { background: rgba(0, 226, 124, .14); color: var(--green-deep); }
.cal-l2 { background: rgba(0, 226, 124, .3); color: #C9FFE6; }
.cal-l3 { background: rgba(0, 226, 124, .52); color: #EAFFF5; }
.cal-l4 { background: rgba(0, 226, 124, .78); color: var(--on-green); }
.cal-l5 { background: var(--green); color: var(--on-green); box-shadow: var(--glow); }
.cal-day.today { box-shadow: 0 0 0 1.5px #E7F7EF; }
.cal-legend { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 11px; font: 600 11px/1 var(--font-ui); color: var(--ink-3); }
.cal-legend i { width: 13px; height: 13px; border-radius: 4px; }
.cal-legend span:first-child { margin-right: 3px; }
.cal-legend span:last-child { margin-left: 3px; }

/* ---------- did vs didn't rows ---------- */
.mr-card + .mr-card { margin-top: 10px; }
.mr { padding: 11px 16px 10px; border-top: 1px solid var(--line); }
.mr:first-child { border-top: 0; }
.mr-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.mr-label { font: 600 14.5px/1.25 var(--font-ui); min-width: 0; }
.mr-nums { flex: none; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mr-nums b { font-size: 24px; }
.mr-nums i { font: 500 12.5px/1 var(--font-ui); font-style: normal; color: var(--ink-3); margin-left: 1px; }
.mr-nums em { font: 600 12px/1 var(--font-ui); font-style: normal; color: var(--green-deep); margin-left: 5px; }
.mr-strip { display: flex; gap: 2px; margin-top: 7px; height: 9px; }
.mr-strip i { flex: 1; min-width: 0; border-radius: 2.5px; background: var(--fill); }
.mr-strip i.full { background: var(--green); }
.mr-strip i.part { background: rgba(0, 226, 124, .4); }
.mr-strip i.miss { background: rgba(255, 92, 80, .42); }
.mr-strip i.open { background: var(--fill); box-shadow: inset 0 0 0 1px #E7F7EF; }
.mr-strip i.bonus { background: var(--green); opacity: .7; }
.mr-strip i.none { background: transparent; box-shadow: inset 0 0 0 1px var(--line); opacity: .6; }
.mr-strip.wk { height: 12px; gap: 4px; }
.mr-sub { margin-top: 6px; font: 500 12px/1.2 var(--font-ui); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.mr-miss { color: var(--coral-deep); }
.mr-acc { display: flex; align-items: center; gap: 9px; padding: 11px 16px 10px; font: 600 13.5px/1.2 var(--font-ui); background: var(--fill); }
.mr-acc img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: #fff; }
.mo-tasks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.mo-tasks div { display: flex; flex-direction: column; gap: 3px; }
.mo-tasks b { font-size: 34px; line-height: 1; }
.mo-tasks span { font: 500 12.5px/1.2 var(--font-ui); color: var(--ink-2); }

/* ---------- one day ---------- */
.dl-score { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 4px; }
.dl-score > div { background: var(--glass); border: 1px solid var(--glass-border); box-shadow: var(--shadow-1); border-radius: 18px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.dl-score .eyebrow { font-size: 10.5px; }
.dl-score b { font-size: 36px; line-height: 1; font-variant-numeric: tabular-nums; }
.dl-of { font: 500 12px/1.2 var(--font-ui); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.dl-head { font: 400 27px/1.1 var(--font-display); margin: 22px 2px 6px; }
.dl-none { font-size: 14px; color: var(--ink-2); margin: 4px 2px; }
.dl-group { margin-top: 10px; }
.dl-name { font: 600 10.5px/1.2 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin: 0 2px 5px; }
.dl-row { display: flex; align-items: flex-start; gap: 9px; padding: 6px 2px; }
.dl-mark { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; flex: none; margin-top: 1px; }
.dl-mark svg { width: 12px; height: 12px; }
.dl-row.did .dl-mark { background: var(--green); color: var(--on-green); }
.dl-row.didnt .dl-mark { background: var(--coral-bg); color: var(--coral-deep); }
.dl-text { font: 500 14.5px/1.35 var(--font-ui); min-width: 0; }
.dl-text small { display: block; font: 400 12px/1.3 var(--font-ui); color: var(--ink-3); font-variant-numeric: tabular-nums; margin-top: 1px; }
.dl-row.didnt .dl-text { color: var(--ink-2); }