/* To-do List — Today (tracker cards + rows), Upcoming (7-day), Tasks (manager +
   recurrence editor). Status is carried by fill/ring + text, never hue alone;
   the per-task colour is a decorative tag. */

.todo-page { display: flex; flex-direction: column; gap: var(--sp-5); }
.todo-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); }
.todo-head__title { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: var(--fw-bold); letter-spacing: -0.01em; color: var(--c-ink); }
.todo-head__sub { margin-top: 2px; font-size: var(--fs-sm); color: var(--c-ink-soft); }
.todo-head .btn-primary { display: inline-flex; align-items: center; gap: var(--sp-1); }
.todo-head .btn-primary svg { width: 1rem; height: 1rem; }
.todo-empty { color: var(--c-ink-faint); font-size: var(--fs-sm); padding: var(--sp-4) 0; }
.todo-empty a { color: var(--c-accent-ink); }

/* progress */
.todo-progress { display: flex; align-items: center; gap: var(--sp-2); min-width: 200px; }
.todo-progress__bar { flex: 1; height: 8px; background: var(--c-surface-2); border-radius: var(--r-full); overflow: hidden; }
.todo-progress__bar i { display: block; height: 100%; background: var(--c-accent); border-radius: var(--r-full); transition: width var(--dur) var(--ease); }
.todo-progress__lbl { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }

.todo-sec__title { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--c-ink-faint); font-weight: var(--fw-semibold); margin-bottom: var(--sp-2); }
.todo-list { display: flex; flex-direction: column; gap: var(--sp-2); }

/* single-time row */
.todo-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); background: var(--c-surface); border: 1px solid var(--c-border); border-left: 3px solid var(--tc, var(--c-border-strong)); border-radius: var(--r-md); }
.todo-check { flex: 0 0 auto; display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border: 2px solid var(--c-border-strong); border-radius: var(--r-full); color: #fff; }
.todo-check svg { width: 0.9rem; height: 0.9rem; }
.todo-row.is-done .todo-check { background: var(--c-accent); border-color: var(--c-accent); }
.todo-row__title { flex: 1; min-width: 0; font-size: var(--fs-sm); color: var(--c-ink); }
.todo-row.is-done .todo-row__title { text-decoration: line-through; color: var(--c-ink-faint); }
.todo-row__time { flex: 0 0 auto; font-size: var(--fs-sm); color: var(--c-ink-soft); font-variant-numeric: tabular-nums; }
.todo-row__time.is-overdue { color: #b42318; font-weight: var(--fw-semibold); }

/* multi-slot tracker card */
.todo-card { padding: var(--sp-3); background: var(--c-surface); border: 1px solid var(--c-border); border-left: 3px solid var(--tc, var(--c-border-strong)); border-radius: var(--r-md); }
.todo-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.todo-card__title { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-ink); }
.todo-card__count { font-size: var(--fs-xs); color: var(--c-ink-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.todo-dots { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.todo-dot { display: inline-grid; place-items: center; min-width: 2.1rem; height: 2.1rem; padding: 0 var(--sp-1); font-size: var(--fs-xs); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; color: var(--c-ink-soft); background: var(--c-surface); border: 1.5px solid var(--c-border-strong); border-radius: var(--r-md); }
.todo-dot:hover { border-color: var(--c-ink-faint); color: var(--c-ink); }
.todo-dot.is-done { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.todo-dot.is-done svg { width: 0.9rem; height: 0.9rem; }
.todo-dot.is-overdue { border-color: #d1453b; color: #b42318; border-style: dashed; }

/* ---- Upcoming ---- */
.up-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); }
@media (min-width: 720px) { .up-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .up-grid { grid-template-columns: 1fr 1fr 1fr; } }
.up-day { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--sp-3) var(--sp-4); }
.up-day.is-today { border-color: var(--c-accent); box-shadow: inset 0 0 0 1px var(--c-accent); }
.up-day__head { display: flex; align-items: baseline; gap: var(--sp-2); margin-bottom: var(--sp-2); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--c-border); }
.up-day__label { font-weight: var(--fw-semibold); font-size: var(--fs-sm); color: var(--c-ink); }
.up-day__date { font-size: var(--fs-xs); color: var(--c-ink-faint); }
.up-day__count { margin-left: auto; font-size: var(--fs-xs); color: var(--c-ink-faint); background: var(--c-surface-2); border-radius: var(--r-full); padding: 1px var(--sp-2); font-variant-numeric: tabular-nums; }
.up-list { display: flex; flex-direction: column; gap: 2px; }
.up-row { display: flex; align-items: center; gap: var(--sp-2); padding: 3px 0; font-size: var(--fs-sm); }
.up-row__dot { flex: 0 0 auto; width: 0.6rem; height: 0.6rem; border-radius: var(--r-full); }
.up-row__title { flex: 1; min-width: 0; color: var(--c-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-row__when { flex: 0 0 auto; font-size: var(--fs-xs); color: var(--c-ink-faint); font-variant-numeric: tabular-nums; }
.up-empty { color: var(--c-ink-faint); font-size: var(--fs-xs); padding: 2px 0; }

/* ---- Tasks manager ---- */
.todo-tasklist { display: flex; flex-direction: column; gap: var(--sp-2); }
.todo-task { display: flex; align-items: stretch; gap: var(--sp-1); background: var(--c-surface); border: 1px solid var(--c-border); border-left: 3px solid var(--tc, var(--c-border-strong)); border-radius: var(--r-md); }
.todo-task.is-archived { opacity: 0.6; }
.todo-task__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: left; padding: var(--sp-3); }
.todo-task__main:hover { background: var(--c-surface-2); }
.todo-task__title { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-ink); }
.todo-task__sum { font-size: var(--fs-xs); color: var(--c-ink-faint); }
.todo-task__act { flex: 0 0 auto; display: inline-grid; place-items: center; width: 2.4rem; color: var(--c-ink-faint); }
.todo-task__act:hover { background: var(--c-surface-2); color: var(--c-ink); }
.todo-task__act--danger:hover { background: #fdeceb; color: #b42318; }
.todo-task__act svg { width: 1rem; height: 1rem; }

/* editor modal (reuses .pw-scrim / .pw-modal__head / .pw-modal__x) */
.todo-modal { position: fixed; z-index: 56; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(600px, 94vw); max-height: 92vh; overflow-y: auto; background: var(--c-surface); border-radius: var(--r-lg); box-shadow: 0 24px 60px -20px rgba(20,21,26,0.5); }
.todo-form { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-5); }
.todo-form textarea { width: 100%; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--c-border-strong); border-radius: var(--r-md); font: inherit; font-size: var(--fs-sm); color: var(--c-ink); background: var(--c-surface); resize: vertical; }
.todo-form__actions { display: flex; align-items: center; gap: var(--sp-2); }
.todo-form__actions .pw-danger { display: inline-flex; align-items: center; gap: var(--sp-1); color: #b42318; }
.todo-form__actions .pw-danger:hover { background: #fdeceb; }
.todo-form__actions .pw-danger svg { width: 1rem; height: 1rem; }

.todo-colors { display: flex; gap: var(--sp-2); }
.todo-color { width: 1.6rem; height: 1.6rem; border-radius: var(--r-full); background: var(--c); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12); }
.todo-color.is-on { outline: 2px solid var(--c-ink); outline-offset: 2px; }

.todo-rules { display: flex; flex-direction: column; gap: var(--sp-3); }
.todo-rule { padding: var(--sp-3); border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface-2); display: flex; flex-direction: column; gap: var(--sp-2); }
.todo-rule__bar { display: flex; align-items: center; justify-content: space-between; }
.todo-rule__lbl { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--c-ink-faint); font-weight: var(--fw-semibold); }
.todo-rule__del { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: var(--r-sm); color: var(--c-ink-faint); }
.todo-rule__del:hover { background: #fdeceb; color: #b42318; }
.todo-rule__del svg { width: 0.9rem; height: 0.9rem; }
.todo-rule__sel, .todo-rule__time { margin-top: 2px; }

.todo-seg { display: flex; flex-wrap: wrap; gap: 2px; padding: 2px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md); }
.todo-seg__btn { padding: var(--sp-1) var(--sp-2); font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--c-ink-soft); border-radius: var(--r-sm); white-space: nowrap; }
.todo-seg__btn:hover { color: var(--c-ink); }
.todo-seg__btn.is-on { background: var(--c-accent-wash); color: var(--c-accent-ink); }

.todo-wd { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.todo-wd__btn { min-width: 2.4rem; padding: var(--sp-1) var(--sp-2); font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--c-ink-soft); border: 1px solid var(--c-border-strong); border-radius: var(--r-sm); }
.todo-wd__btn.is-on { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }

.todo-times { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.todo-timechip { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 2px var(--sp-1) 2px var(--sp-2); font-size: var(--fs-sm); background: var(--c-surface); border: 1px solid var(--c-border-strong); border-radius: var(--r-full); font-variant-numeric: tabular-nums; }
.todo-timechip button { display: inline-grid; place-items: center; width: 1.2rem; height: 1.2rem; color: var(--c-ink-faint); border-radius: var(--r-full); }
.todo-timechip button:hover { background: #fdeceb; color: #b42318; }
.todo-timechip svg { width: 0.75rem; height: 0.75rem; }
.todo-times__add { display: inline-flex; align-items: center; gap: var(--sp-1); }
.todo-times__inp { padding: var(--sp-1) var(--sp-2); border: 1px solid var(--c-border-strong); border-radius: var(--r-sm); font: inherit; font-size: var(--fs-sm); }
.todo-addrule { display: inline-flex; align-items: center; gap: var(--sp-1); align-self: flex-start; }
.todo-addrule svg { width: 1rem; height: 1rem; }
.form-grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-3); }

/* ---- Routine & Agenda: source filters + unified timeline ---- */
.ag-filters { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.ag-chip { display: inline-flex; align-items: center; gap: var(--sp-1); padding: var(--sp-1) var(--sp-3); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-ink-faint); border: 1px solid var(--c-border-strong); border-radius: var(--r-full); }
.ag-chip__dot { width: 0.7rem; height: 0.7rem; border-radius: var(--r-full); opacity: 0.4; }
.ag-chip:hover { color: var(--c-ink); }
.ag-chip.is-on { color: var(--c-ink); border-color: transparent; background: var(--c-surface-2); }
.ag-chip.is-on .ag-chip__dot { opacity: 1; }

.ag-timeline { display: flex; flex-direction: column; gap: var(--sp-2); }
.ag-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md); }
.ag-item.is-link { cursor: pointer; }
.ag-item.is-link:hover { border-color: var(--c-border-strong); background: var(--c-surface-2); }
.ag-item__dot { flex: 0 0 auto; width: 0.7rem; height: 0.7rem; border-radius: var(--r-full); }
.ag-item__time { flex: 0 0 auto; width: 4.5rem; font-size: var(--fs-sm); color: var(--c-ink-soft); font-variant-numeric: tabular-nums; }
.ag-item__title { flex: 1; min-width: 0; font-size: var(--fs-sm); color: var(--c-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-item.is-done .ag-item__title { text-decoration: line-through; color: var(--c-ink-faint); }
.ag-item__meta { flex: 0 0 auto; font-size: var(--fs-xs); color: var(--c-ink-soft); font-variant-numeric: tabular-nums; }
.ag-item__badge { flex: 0 0 auto; font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--c-ink-faint); text-transform: uppercase; letter-spacing: 0.03em; }
.ag-overview .todo-sec { margin-top: var(--sp-2); }

/* ---- Daily carousel toolbar ---- */
.daily-nav { flex-wrap: wrap; gap: var(--sp-3); }
.daily-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-left: auto; }
.daily-days { display: inline-flex; gap: 2px; padding: 2px; background: var(--c-surface-2); border-radius: var(--r-md); }
.daily-days__btn { min-width: 2rem; padding: var(--sp-1) var(--sp-2); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-ink-soft); border-radius: var(--r-sm); font-variant-numeric: tabular-nums; }
.daily-days__btn:hover { color: var(--c-ink); }
.daily-days__btn.is-on { background: var(--c-surface); color: var(--c-ink); box-shadow: 0 1px 2px rgba(20,21,26,0.1); }
.daily-date { padding: var(--sp-1) var(--sp-2); border: 1px solid var(--c-border-strong); border-radius: var(--r-md); font: inherit; font-size: var(--fs-sm); background: var(--c-surface); color: var(--c-ink); }
.daily-date:focus-visible { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 1px var(--c-accent); }
.daily-cols { align-items: start; }

/* ---- Routine & Agenda: Overview dashboard ---- */
.ag-dash { display: flex; flex-direction: column; gap: var(--sp-5); }
.ag-dash .dash-empty { padding: var(--sp-4); color: var(--c-ink-faint); font-size: var(--fs-sm); text-align: center; }

.ag-dcard { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); }
.ag-dcard__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.ag-dcard__eyebrow { display: block; font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-ink-faint); }
.ag-dcard__title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--c-ink); line-height: 1.2; }
.ag-dcard__sub { font-size: var(--fs-sm); color: var(--c-ink-soft); }
.ag-dcard__more { font-size: var(--fs-xs); color: var(--c-ink-faint); padding-top: var(--sp-1); }
.ag-dcard__link { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-accent); white-space: nowrap; }
.ag-dcard__link svg { width: 1rem; height: 1rem; }
.ag-dcard__tag { flex: 0 0 auto; padding: 2px var(--sp-2); font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--c-ink-soft); background: var(--c-surface-2); border-radius: var(--r-full); }

.ag-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-5); align-items: start; }

/* hero */
.ag-hero__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.ag-hero__title { font-size: var(--fs-2xl); font-weight: var(--fw-bold); color: var(--c-ink); line-height: 1.1; letter-spacing: -0.01em; }
.ag-hero__date { font-size: var(--fs-sm); color: var(--c-ink-soft); }
.ag-hero__sec { display: flex; flex-direction: column; gap: var(--sp-2); }
.ag-hero__sec + .ag-hero__sec { margin-top: var(--sp-3); }
.ag-hero__label { font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-ink-faint); }
.ag-hero .todo-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-2); align-items: start; }

/* progress ring — the % number carries the meaning (colour-independent) */
.ag-ring { position: relative; flex: 0 0 auto; width: 64px; height: 64px; display: grid; place-items: center; }
.ag-ring__track { stroke: var(--c-surface-2); }
.ag-ring__arc { stroke: var(--c-accent); transition: stroke-dashoffset 0.4s ease; }
.ag-ring__pct { position: absolute; font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--c-ink); font-variant-numeric: tabular-nums; }
.ag-ring__pct i { font-size: 0.6em; font-style: normal; color: var(--c-ink-soft); }

.ag-item__go { flex: 0 0 auto; display: inline-grid; place-items: center; color: var(--c-ink-faint); }
.ag-item__go svg { width: 1rem; height: 1rem; }
.todo-card__times { font-size: var(--fs-xs); color: var(--c-ink-soft); }

/* tomorrow preview */
.ag-preview { display: flex; flex-direction: column; gap: 2px; }
.ag-prow { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-1) 0; border-bottom: 1px solid var(--c-border); }
.ag-prow:last-child { border-bottom: 0; }
.ag-prow__time { flex: 0 0 auto; width: 3.5rem; font-size: var(--fs-xs); color: var(--c-ink-soft); font-variant-numeric: tabular-nums; }
.ag-prow__title { flex: 1; min-width: 0; font-size: var(--fs-sm); color: var(--c-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-prow__badge { flex: 0 0 auto; font-size: var(--fs-xs); color: var(--c-ink-faint); text-transform: uppercase; letter-spacing: 0.03em; }

/* still pending */
.ag-dcard--wide { }
.ag-pend-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--sp-3); }
.ag-pend { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3); background: var(--c-surface-2); border: 1px solid var(--c-border); border-left: 3px solid var(--tc, var(--c-border-strong)); border-radius: var(--r-md); }
.ag-pend__head { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; }
.ag-pend__day { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--c-ink-soft); font-variant-numeric: tabular-nums; }
.ag-pend__title { flex: 1; min-width: 0; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-ink); }
.ag-pend__count { font-size: var(--fs-xs); color: var(--c-ink-faint); }
.ag-pend__body { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.ag-pend__acts { display: inline-flex; gap: var(--sp-2); }
.ag-btn { display: inline-flex; align-items: center; gap: var(--sp-1); padding: var(--sp-1) var(--sp-2); font-size: var(--fs-xs); font-weight: var(--fw-medium); border: 1px solid var(--c-border-strong); border-radius: var(--r-sm); color: var(--c-ink-soft); background: var(--c-surface); }
.ag-btn svg { width: 0.9rem; height: 0.9rem; }
.ag-btn--done:hover { border-color: var(--c-accent); color: var(--c-accent); }
.ag-btn--skip:hover { border-color: var(--c-border-strong); color: var(--c-ink); background: var(--c-surface-2); }

/* quick add */
.ag-quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--sp-2); }
.ag-quick__btn { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-3); background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: var(--r-md); }
.ag-quick__btn:hover { border-color: var(--c-accent); background: var(--c-accent-wash); }
.ag-quick__ico { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; color: var(--c-accent); }
.ag-quick__ico svg { width: 1.1rem; height: 1.1rem; }
.ag-quick__lbl { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-ink); }
.ag-quick__hint { font-size: var(--fs-xs); color: var(--c-ink-faint); }

/* pending collapse toggle */
.ag-pend__toggle { align-self: flex-start; font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--c-accent); }
.ag-pend__toggle:hover { text-decoration: underline; }
.ag-pend--collapsed .ag-pend__body { align-items: center; }

/* success rate card */
.ag-succ__ctl { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.ag-succ__segs { display: inline-flex; gap: 2px; padding: 2px; background: var(--c-surface-2); border-radius: var(--r-md); }
.ag-succ__seg { min-width: 2.4rem; padding: var(--sp-1) var(--sp-2); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-ink-soft); border-radius: var(--r-sm); font-variant-numeric: tabular-nums; }
.ag-succ__seg:hover { color: var(--c-ink); }
.ag-succ__seg.is-on { background: var(--c-surface); color: var(--c-ink); box-shadow: 0 1px 2px rgba(20,21,26,0.1); }
.ag-succ__pick { padding: var(--sp-1) var(--sp-2); font: inherit; font-size: var(--fs-sm); color: var(--c-ink); background: var(--c-surface); border: 1px solid var(--c-border-strong); border-radius: var(--r-md); max-width: 15rem; }
.ag-succ__pick:focus-visible { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 1px var(--c-accent); }
.ag-succ__big { font-size: 3rem; font-weight: var(--fw-bold); color: var(--c-ink); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ag-succ__big i { font-size: 0.4em; font-style: normal; color: var(--c-ink-soft); margin-left: 2px; }
.ag-succ__sub { font-size: var(--fs-sm); color: var(--c-ink-soft); }
.ag-succ__empty { display: flex; flex-direction: column; gap: var(--sp-1); }
.ag-succ__empty .dash-empty { text-align: left; padding: 0; }
.ag-dcard__foot { font-size: var(--fs-xs); color: var(--c-ink-faint); padding-top: var(--sp-1); border-top: 1px solid var(--c-border); }

/* overall: per-routine breakdown rows */
.ag-succ__list { display: flex; flex-direction: column; gap: var(--sp-2); }
.ag-succ__row { display: grid; grid-template-columns: minmax(6rem, 12rem) 1fr auto auto; align-items: center; gap: var(--sp-3); }
.ag-succ__name { font-size: var(--fs-sm); color: var(--c-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-left: 3px solid var(--tc, var(--c-border-strong)); padding-left: var(--sp-2); }
.ag-succ__meter { height: 8px; background: var(--c-surface-2); border-radius: var(--r-full); overflow: hidden; }
.ag-succ__meter i { display: block; height: 100%; background: var(--c-accent); border-radius: var(--r-full); }
.ag-succ__pctsm { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-ink); font-variant-numeric: tabular-nums; min-width: 2.6rem; text-align: right; }
.ag-succ__days { font-size: var(--fs-xs); color: var(--c-ink-faint); font-variant-numeric: tabular-nums; min-width: 2rem; text-align: right; }

/* single routine: daily bars */
.ag-succ__bars { display: flex; align-items: flex-end; gap: 3px; height: 72px; padding-top: var(--sp-2); }
.ag-succ__bar { flex: 1; min-width: 6px; max-width: 22px; height: 100%; display: flex; align-items: flex-end; background: var(--c-surface-2); border-radius: var(--r-sm); overflow: hidden; }
.ag-succ__bar i { display: block; width: 100%; background: var(--c-accent); border-radius: var(--r-sm) var(--r-sm) 0 0; }

/* ==== Overview dashboard v2: tense-based layout, chips, preview modal ==== */
/* Today beside Shortcuts */
.ag-top { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(240px, 1fr); gap: var(--sp-5); align-items: start; }
.ag-shortcuts { align-self: start; }
@media (max-width: 900px) { .ag-top { grid-template-columns: 1fr; } }

/* Today: vertical list of routine sub-cards */
.ag-rlist { display: flex; flex-direction: column; gap: var(--sp-2); }
.ag-rcard { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3); background: var(--c-surface); border: 1px solid var(--c-border); border-left: 3px solid var(--tc, var(--c-border-strong)); border-radius: var(--r-md); }
.ag-rcard__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); width: 100%; text-align: left; cursor: pointer; }
.ag-rcard__title { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--c-ink); }
.ag-rcard__head:hover .ag-rcard__title { color: var(--c-accent); }
.ag-rcard__count { flex: 0 0 auto; font-size: var(--fs-xs); color: var(--c-ink-faint); font-variant-numeric: tabular-nums; }

/* full-time check chips (colour-independent state: fill=done ✓, dashed=overdue) */
.ag-tchips { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.todo-tchip { display: inline-flex; align-items: center; gap: 4px; padding: 3px var(--sp-2); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-ink-soft); background: var(--c-surface); border: 1px solid var(--c-border-strong); border-radius: var(--r-full); font-variant-numeric: tabular-nums; cursor: pointer; }
.todo-tchip svg { width: 0.85rem; height: 0.85rem; }
.todo-tchip:hover { border-color: var(--c-accent); color: var(--c-ink); }
.todo-tchip.is-done { background: var(--tc, var(--c-accent)); border-color: transparent; color: #fff; }
.todo-tchip.is-overdue { border-style: dashed; }

/* non-routine item is now a full-width button */
.ag-item { width: 100%; text-align: left; cursor: pointer; }
.ag-item:hover { border-color: var(--c-border-strong); background: var(--c-surface-2); }

/* tomorrow rows (buttons) + summarised routines */
.ag-prow { width: 100%; text-align: left; cursor: pointer; }
.ag-prow:hover .ag-prow__title { color: var(--c-accent); }
.ag-prow__dot { flex: 0 0 auto; width: 0.6rem; height: 0.6rem; border-radius: var(--r-full); }
.ag-prow__x { color: var(--c-ink-faint); font-variant-numeric: tabular-nums; }

/* still pending: compact one-line-per-day */
.ag-pend-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.ag-pend { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3); background: var(--c-surface-2); border: 1px solid var(--c-border); border-left: 3px solid var(--tc, var(--c-border-strong)); border-radius: var(--r-md); }
.ag-pend__line { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.ag-pend__day { flex: 0 0 auto; min-width: 5.5rem; font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--c-ink-soft); font-variant-numeric: tabular-nums; }
.ag-pend__title { flex: 1; min-width: 8rem; text-align: left; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-ink); cursor: pointer; }
.ag-pend__title:hover { color: var(--c-accent); }
.ag-pend__count { flex: 0 0 auto; font-size: var(--fs-xs); color: var(--c-ink-faint); font-variant-numeric: tabular-nums; }
.ag-pend__acts { flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--sp-2); margin-left: auto; }
.ag-pend__more { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--c-accent); }
.ag-pend__more:hover { text-decoration: underline; }
.ag-pend__times { display: flex; flex-wrap: wrap; gap: var(--sp-1); padding-top: 2px; }

/* preview modal (reuses .pw-scrim / .pw-modal__head / .pw-modal__x) */
.ag-pv { position: fixed; z-index: 56; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(440px, 94vw); max-height: 88vh; overflow-y: auto; background: var(--c-surface); border-radius: var(--r-lg); box-shadow: 0 24px 60px -20px rgba(20,21,26,0.5); }
.ag-pv__head { display: flex; flex-direction: column; gap: 2px; }
.ag-pv__badge { align-self: flex-start; padding: 1px var(--sp-2); font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.04em; color: #fff; background: var(--tc, var(--c-ink-soft)); border-radius: var(--r-full); }
.ag-pv__body { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4) var(--sp-5); }
.ag-pv__field { display: flex; justify-content: space-between; gap: var(--sp-4); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--c-border); }
.ag-pv__field:last-child { border-bottom: 0; padding-bottom: 0; }
.ag-pv__k { flex: 0 0 auto; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-ink-soft); }
.ag-pv__v { text-align: right; font-size: var(--fs-sm); color: var(--c-ink); }
.ag-pv__actions { display: flex; justify-content: flex-end; gap: var(--sp-2); padding: var(--sp-3) var(--sp-5) var(--sp-5); }
.ag-pv__actions .btn-primary { display: inline-flex; align-items: center; gap: var(--sp-1); }

/* Today: "Did all today" bulk on a routine sub-card */
.ag-rcard__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.ag-rcard__top .ag-rcard__head { flex: 1; min-width: 0; }
.ag-rcard__all { flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--sp-1); padding: 3px var(--sp-2); font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--c-ink-soft); border: 1px solid var(--c-border-strong); border-radius: var(--r-full); }
.ag-rcard__all svg { width: 0.85rem; height: 0.85rem; }
.ag-rcard__all:hover { border-color: var(--c-accent); color: var(--c-accent); }
.ag-rcard__all.is-on { background: var(--tc, var(--c-accent)); border-color: transparent; color: #fff; }

/* ================= Calendar (infinite month stack + day drawer) ================= */
.cal { display: flex; flex-direction: column; min-width: 0; }
.cal__bar { display: flex; flex-direction: column; gap: var(--sp-3); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--c-border); }
.cal__barrow { display: flex; align-items: center; gap: var(--sp-3); }
.cal__month { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--c-ink); }
.cal__thismonth { padding: var(--sp-1) var(--sp-3); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-accent); border: 1px solid var(--c-border-strong); border-radius: var(--r-full); }
.cal__thismonth:hover { background: var(--c-accent-wash); }
.cal__thismonth.is-hidden { display: none; }

.cal__scroll { overflow-y: auto; position: relative; }
.cal-month { padding-top: var(--sp-4); }
.cal-month__label { padding: var(--sp-2) 0; font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--c-ink-soft); }
.cgrid__head { display: grid; grid-template-columns: repeat(7, 1fr); }
.cgrid__wd { padding: var(--sp-1) var(--sp-2); font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--c-ink-faint); text-transform: uppercase; letter-spacing: 0.03em; }
.cgrid__body { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--c-border); border: 1px solid var(--c-border); border-radius: var(--r-md); overflow: hidden; }
.cday { min-height: 96px; display: flex; flex-direction: column; gap: 3px; padding: var(--sp-1) var(--sp-2) var(--sp-2); background: var(--c-surface); text-align: left; align-items: stretch; cursor: pointer; }
.cday.is-out { background: var(--c-surface-2); cursor: default; }
.cday:hover:not(.is-out) { background: var(--c-accent-wash); }
.cday__num { align-self: flex-start; display: inline-grid; place-items: center; min-width: 1.6rem; height: 1.6rem; padding: 0 5px; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-ink); border-radius: var(--r-full); font-variant-numeric: tabular-nums; }
.cday.is-today .cday__num { background: var(--c-accent); color: #fff; }
.cday__lines { display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.cday__line { display: flex; align-items: center; gap: 5px; min-width: 0; }
.cday__dot { flex: 0 0 auto; width: 6px; height: 6px; border-radius: var(--r-full); }
.cday__txt { min-width: 0; font-size: var(--fs-xs); color: var(--c-ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cday__txt b { font-weight: var(--fw-semibold); color: var(--c-ink-faint); }
.cday__more { font-size: var(--fs-xs); color: var(--c-ink-faint); padding-left: 11px; }

/* day drawer */
.cal-drawer__scrim { background: rgba(20,21,26,0.42); }
.cal-drawer { position: fixed; z-index: 56; top: 0; right: 0; height: 100dvh; max-width: 96vw; display: flex; flex-direction: column; background: var(--c-surface); box-shadow: -24px 0 60px -20px rgba(20,21,26,0.5); }
.cal-drawer__head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--c-border); background: var(--c-surface); }
.cal-drawer__eyebrow { display: block; font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-ink-faint); }
.cal-drawer__title strong { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--c-ink); }
.cal-drawer__ctl { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.cal-drawer__today { padding: var(--sp-1) var(--sp-3); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-ink-soft); border: 1px solid var(--c-border-strong); border-radius: var(--r-full); }
.cal-drawer__today:hover { color: var(--c-ink); background: var(--c-surface-2); }
.cal-drawer__x { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--r-sm); color: var(--c-ink-faint); border: 1px solid var(--c-border-strong); }
.cal-drawer__x:hover { background: var(--c-surface-2); color: var(--c-ink); }
.cal-drawer__x svg { width: 1.1rem; height: 1.1rem; }
.cal-drawer__cols { flex: 1; min-height: 0; display: grid; gap: var(--sp-4); padding: var(--sp-5); overflow: auto; align-items: start; }
.cal-drawer__col { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.cal-drawer__colhead { display: flex; align-items: center; gap: var(--sp-2); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--c-border); }
.cal-drawer__wd { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--c-ink-faint); font-weight: var(--fw-semibold); }
.cal-drawer__num { display: inline-grid; place-items: center; min-width: 1.6rem; height: 1.6rem; padding: 0 5px; font-weight: var(--fw-bold); color: var(--c-ink); font-variant-numeric: tabular-nums; }
.cal-drawer__num.is-today { background: var(--c-accent); color: #fff; border-radius: var(--r-full); }
.cal-drawer__prog { margin-left: auto; font-size: var(--fs-xs); color: var(--c-ink-faint); font-variant-numeric: tabular-nums; }
.cal-drawer__body { display: flex; flex-direction: column; gap: var(--sp-3); }
.cal-drawer__body .ag-rlist { display: flex; flex-direction: column; gap: var(--sp-2); }

/* preview modal must sit above the drawer */
.cal-pv__scrim { z-index: 65; }
.cal-pv { z-index: 66; }

/* ---- Calendar: one-month pager (overrides the old infinite-scroll model) ---- */
.cal__pane { position: relative; overflow: hidden; }
.cal__pane .cal-month { height: 100%; padding-top: var(--sp-4); display: flex; flex-direction: column; }
.cal__pane .cgrid { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.cal__pane .cgrid__body { flex: 1; grid-template-rows: repeat(6, minmax(0, 1fr)); }
.cal__pane .cday { min-height: 0; overflow: hidden; }
.cal-month.is-next { animation: calSlideUp 0.22s ease; }
.cal-month.is-prev { animation: calSlideDown 0.22s ease; }
@keyframes calSlideUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes calSlideDown { from { opacity: 0; transform: translateY(-26px); } to { opacity: 1; transform: none; } }

.cal__pager { display: inline-flex; gap: 2px; }
.cal__pg { display: inline-grid; place-items: center; width: 2rem; height: 2rem; color: var(--c-ink-soft); border: 1px solid var(--c-border-strong); border-radius: var(--r-sm); }
.cal__pg:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.cal__pg:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; }
.cal__pg:hover { background: var(--c-surface-2); color: var(--c-ink); }
.cal__pg svg { width: 1.05rem; height: 1.05rem; }

/* ---- Calendar bar: single row, controls pinned right ---- */
.cal__bar { flex-direction: row; align-items: center; flex-wrap: wrap; }
.cal__right { margin-left: auto; display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.cal__sep { flex: 0 0 auto; width: 1px; height: 1.5rem; background: var(--c-border-strong); }

/* Agenda item: wrap gracefully in narrow containers (drawer columns) instead of
   overflowing into the neighbour. Wide containers (Overview) still render one line. */
.ag-item { flex-wrap: wrap; row-gap: 3px; min-width: 0; overflow: hidden; }
.ag-item__meta, .ag-item__badge { min-width: 0; }
.cal-drawer__body .ag-item__time { width: auto; }
.cal-drawer__body .ag-item__title { flex: 1 1 8rem; }

/* Filter bar: leading "Filters" label + icon so the chips read as filters */
.ag-filters { align-items: center; }
.ag-filters__label { display: inline-flex; align-items: center; gap: var(--sp-1); padding-right: var(--sp-1); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-ink-faint); }
.ag-filters__label svg { width: 1rem; height: 1rem; }

/* day drawer: labelled column selector */
.cal-drawer__days { display: inline-flex; align-items: center; gap: var(--sp-2); }
.cal-drawer__dayslbl { font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--c-ink-faint); }
/* The multi-day columns picker is a desktop side-by-side feature; on a phone
   each column needs ~280px, so more than one overflows. Hide it and keep the
   drawer a single readable day, navigated with the ‹ › arrows. */
@media (max-width: 768px) { .cal-drawer__days { display: none; } }

/* ---- Routines: category column + management ---- */
.rot-layout { display: grid; grid-template-columns: 220px 1fr; gap: var(--sp-5); align-items: start; }
@media (max-width: 760px) { .rot-layout { grid-template-columns: 1fr; } }
.rot-cats { display: flex; flex-direction: column; gap: var(--sp-2); }
.rot-cats__head { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--sp-1); }
.rot-cats__title { font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--c-ink-faint); }
.rot-cats__manage { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: var(--r-sm); color: var(--c-ink-faint); }
.rot-cats__manage:hover { background: var(--c-surface-2); color: var(--c-ink); }
.rot-cats__manage svg { width: 1rem; height: 1rem; }
.rot-cats__list { display: flex; flex-direction: column; gap: 2px; }
.rot-cat { display: flex; align-items: center; gap: var(--sp-2); width: 100%; padding: var(--sp-2); border-radius: var(--r-md); text-align: left; color: var(--c-ink-soft); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.rot-cat:hover { background: var(--c-surface-2); color: var(--c-ink); }
.rot-cat.is-on { background: var(--c-accent-wash); color: var(--c-accent-ink); }
.rot-cat__dot { flex: 0 0 auto; width: 0.7rem; height: 0.7rem; border-radius: var(--r-full); background: var(--c-ink-faint); }
.rot-cat__dot--all { background: linear-gradient(135deg, var(--c-accent), #9c36b5); }
.rot-cat__dot--none { background: transparent; border: 1.5px dashed var(--c-border-strong); }
.rot-cat__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rot-cat__count { flex: 0 0 auto; font-size: var(--fs-xs); color: var(--c-ink-faint); font-variant-numeric: tabular-nums; }
.rot-cat.is-on .rot-cat__count { color: var(--c-accent-ink); }

.rot-catman { padding: var(--sp-4) var(--sp-5) var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); }
.rot-catman__hint { font-size: var(--fs-sm); color: var(--c-ink-soft); }
.rot-catman__list { display: flex; flex-direction: column; gap: var(--sp-2); }
.rot-catman__row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; padding-bottom: var(--sp-2); border-bottom: 1px solid var(--c-border); }
.rot-catman__row:last-child { border-bottom: 0; padding-bottom: 0; }
.rot-catman__colors { display: inline-flex; gap: 3px; flex: 0 0 auto; }
.rot-catman__name { flex: 1; min-width: 8rem; padding: var(--sp-1) var(--sp-2); border: 1px solid var(--c-border-strong); border-radius: var(--r-sm); font: inherit; font-size: var(--fs-sm); }
.rot-catman__count { flex: 0 0 auto; font-size: var(--fs-xs); color: var(--c-ink-faint); font-variant-numeric: tabular-nums; }
.rot-catman__del { flex: 0 0 auto; display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: var(--r-sm); color: var(--c-ink-faint); }
.rot-catman__del:hover { background: #fdeceb; color: #b42318; }
.rot-catman__del svg { width: 1rem; height: 1rem; }
.rot-catman__add { margin-top: var(--sp-1); }