.today-section { margin-block: 1.5rem; }
.today-section > h2 { margin-block: 0 1rem; font-size: 1.25rem; }
.today-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.today-heading h1 { margin-block-end: 0; }
.add-today-button { min-height: 48px; padding-inline: 1.25rem; border-radius: 999px; }
.day-picker { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-block: .5rem; }
.date-button { min-height: 48px; padding-inline: .75rem; border-radius: .75rem; background: transparent; color: var(--foreground); border: 1px solid currentColor; text-decoration: none; }
.date-button::after { content: " ▾"; }
#day-input { position: absolute; inset-inline-start: 0; inset-block-end: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0; }
#activities li.now-line { grid-column: 1 / -1; border: 0; border-radius: 0; padding: 0; background: none; list-style: none; display: flex; align-items: center; gap: .5rem; margin-block: .25rem; color: var(--primary); font-weight: 650; }
.now-line::after { content: ""; flex: 1; border-block-start: 2px solid currentColor; }
/* The caregiver's overview (#351): tabs per person, cards that open, and a mark for what is done. */
.overview-tabs { display: flex; gap: .5rem; overflow-x: auto; padding-block: .25rem; scrollbar-width: thin; }
.overview-tabs .overview-tab { flex: none; background: transparent; color: inherit; border: 1px solid var(--outline); border-radius: 999px; min-height: 44px; padding-inline: 1rem; }
.overview-tabs .overview-tab[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.overview-list { list-style: none; padding: 0; display: grid; gap: .75rem; }
.overview-card { list-style: none; }
.overview-card .overview-open { display: flex; gap: 1rem; align-items: flex-start; width: 100%; text-align: start; background: var(--card); color: inherit; border: 1px solid var(--outline); border-radius: 1rem; padding: 1rem; }
.overview-routine .overview-open { display: block; }
.overview-card h3 { margin: 0; font-size: 1.125rem; }
.overview-card.finished .overview-open { opacity: .75; }
.overview-who { margin: .25rem 0; color: var(--muted); }
.overview-flag { display: inline-block; margin: .25rem .5rem 0 0; padding: .125rem .5rem; border-radius: 999px; border: 1px solid var(--primary); color: var(--primary); font-weight: 600; font-size: .875rem; }
.overview-mark { flex: none; display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; border: 2px solid var(--outline); font-weight: 700; }
.overview-mark.done { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
/* Under way: ringed in the accent colour with a play mark, and its line says so. */
.overview-mark.started { border-color: var(--primary); color: var(--primary); font-size: .75rem; }
.overview-who.started { color: var(--primary); font-weight: 650; }
.overview-steps { list-style: none; padding: 0; margin: .5rem 0 0; display: grid; gap: .5rem; }
.overview-steps li { display: flex; align-items: center; gap: .75rem; }
.overview-steps .overview-mark { width: 1.5rem; height: 1.5rem; }
/* The overview's card is its button; the Day's own row frame would draw a second one around it. */
#activities li.overview-card, #activities .overview-steps li { border: none; padding: 0; background: none; }
/* A member's checklist (#352): a mark big enough for a child's thumb, the chore, and "Need help". */
.check-row { display: flex; gap: 1rem; align-items: center; }
.check-card .check-mark { flex: none; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; min-height: 0; padding: 0; border-radius: 50%; border: 2px solid var(--control-outline, #737a6e); background: transparent; color: var(--on-primary); font-size: 1.75rem; font-weight: 800; }
.check-card .check-mark.done { background: var(--primary); border-color: var(--primary); }
.check-card .check-mark.started { border: 3px solid var(--primary); }
.check-card .check-mark:disabled { opacity: 1; }
.check-card .check-open { flex: 1; min-height: 48px; padding: .25rem 0; text-align: start; background: none; color: inherit; border: none; }
.check-card h3 { margin: 0; font-size: 1.25rem; line-height: 1.4; }
.check-note { margin: .25rem 0 0; opacity: .8; }
.check-note.review { opacity: 1; color: var(--primary); font-weight: 650; }
.check-card > button { width: 100%; margin-block-start: .75rem; }
.check-card > .check-help { background: transparent; color: var(--foreground); border-color: var(--outline); }
.check-card > .check-help.asked { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
#activities li.check-card.finished { opacity: .85; }