/* [chores-cal] Chores, the reward chart and the family calendar (public/chores.js, public/calendar.js).
   Tokens from public/ui/tokens.css; the age skins come from [data-skin] on the page. */

.ch-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ch-art { display: block; flex: none; border-radius: 22%; }

/* ---------- the kid home slot ---------- */
.ch-slot:empty, .cal-slot:empty { display: none; }
.ch-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); } /* [a11y2] minmax(0, 1fr) here, in .ch-rows and .ch-reward: nothing pushes the page wider at 200% zoom */
.ch-none { margin: 0; }
.ch-slot-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); font-size: var(--text-sm); }
.ch-slot-foot .ui-btn { margin-left: auto; }

/* ---------- little ones: big picture buttons ---------- */
.ch-bigs { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: var(--space-3); }
.ch-big { position: relative; display: grid; place-items: center; min-height: 132px; padding: var(--space-3); border: 3px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); cursor: pointer; transition: transform var(--dur-fast) var(--ease-play), border-color var(--dur-fast); }
.ch-big:active { transform: scale(var(--press-scale, 0.96)); }
.ch-big .ch-art { width: 96px; height: 96px; }
.ch-big-mark { position: absolute; right: 8px; bottom: 8px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-sunken); color: var(--ink-faint); border: 2px solid var(--line); }
.ch-big-mark .ui-icon { width: 26px; height: 26px; }
.ch-big.is-done { border-color: var(--success); background: var(--success-soft); }
.ch-big.is-done .ch-big-mark { background: var(--success); color: #fff; border-color: var(--success); }
.ch-big.is-done .ch-art { opacity: 0.75; }
.ch-big.is-waiting { border-color: var(--accent); background: var(--accent-soft); }
.ch-big.is-waiting .ch-big-mark { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* ---------- kids and teens: rows with a big tick ---------- */
.ch-rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
.ch-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3) var(--space-2) var(--space-2); border-radius: var(--radius-md); background: var(--surface-sunken); min-height: 64px; }
.ui-card .ch-row { background: var(--surface-sunken); }
.ch-row-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ch-row-title { margin: 0; font-weight: var(--weight-strong); overflow-wrap: anywhere; }
.ch-row-sub { margin: 0; color: var(--ink-muted); font-size: var(--text-sm); }
.ch-tick { flex: none; width: 56px; height: 56px; border-radius: 50%; border: 3px solid var(--line-strong); background: var(--surface); color: var(--ink-faint); display: grid; place-items: center; cursor: pointer; transition: transform var(--dur-fast) var(--ease-play), background var(--dur-fast); }
.ch-tick:active { transform: scale(var(--press-scale, 0.94)); }
.ch-tick:hover { border-color: var(--success); color: var(--success); }
.ch-row.is-done { background: var(--success-soft); }
.ch-row.is-done .ch-tick { background: var(--success); border-color: var(--success); color: #fff; }
.ch-row.is-done .ch-row-title { color: var(--ink-muted); }
.ch-row.is-waiting .ch-tick { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); }
.ch-row--teen { min-height: 52px; padding-block: var(--space-1); }
.ch-row--teen .ch-tick { width: 44px; height: 44px; border-width: 2px; border-radius: var(--radius-sm); }

/* ---------- points and rewards ---------- */
.ch-points { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--accent-soft); margin-bottom: var(--space-3); }
.ch-points p { margin: 0; }
.ch-points-icon { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--accent-text); }
.ch-lead { margin: 0 0 var(--space-2); }
.ch-day { display: grid; gap: var(--space-2); margin-bottom: var(--space-3); }
.ch-day-title { margin: 0; font-size: var(--text-md); color: var(--ink-muted); }
.ch-rewards { display: grid; gap: var(--space-3); }
.ch-reward { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--surface); justify-items: start; }
.ch-card .ch-reward { background: var(--surface-sunken); border-color: transparent; }
.ch-reward.is-ready { border-color: var(--accent); background: var(--accent-soft); }
.ch-reward-head { display: flex; align-items: center; gap: var(--space-2); width: 100%; }
.ch-reward-icon { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); }
.ch-reward-title { margin: 0; font-weight: var(--weight-strong); flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ch-reward-pts { color: var(--ink-muted); font-size: var(--text-sm); white-space: nowrap; }
.ch-reward-sub { margin: 0; color: var(--ink-muted); font-size: var(--text-sm); }
.ch-answer { display: flex; align-items: center; gap: var(--space-2); margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--surface-sunken); font-weight: var(--weight-strong); }
.ch-answer.is-yes { background: var(--success-soft); }
.ch-answer .ui-icon { flex: none; }

/* fireflies (little ones) */
.ch-flies { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 12px; border-radius: 999px; background: var(--dusk, #243152); }
.ch-fly { width: 14px; height: 14px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); }
.ch-fly.is-lit { background: #FFE29A; box-shadow: 0 0 10px 3px rgba(255, 214, 110, 0.6); animation: ch-glow 2.4s ease-in-out infinite; }
.ch-fly.is-lit:nth-child(2n) { animation-delay: -1.1s; }
@keyframes ch-glow { 50% { box-shadow: 0 0 4px 1px rgba(255, 214, 110, 0.35); } }
/* the calm bar (teens) */
.ch-bar { width: 100%; height: 8px; border-radius: 999px; background: var(--surface-sunken); overflow: hidden; }
.ch-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }

/* ---------- guardians ---------- */
.ch-waits { display: grid; gap: var(--space-2); }
.ch-wait { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-2); border-radius: var(--radius-md); background: var(--surface-sunken); }
.ch-wait .ch-row-main { min-width: 140px; }
.ch-wait-acts { display: flex; gap: var(--space-2); margin-left: auto; }
.ch-mark { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ch-pics { display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: var(--space-2); }
.ch-pic { display: grid; place-items: center; padding: 4px; min-height: var(--tap); border: 2px solid transparent; border-radius: var(--radius-md); background: var(--surface-sunken); cursor: pointer; }
.ch-pic[aria-checked="true"] { border-color: var(--accent); background: var(--accent-soft); }

/* ---------- the calendar ---------- */
.cal-top { display: grid; gap: var(--space-3); margin-bottom: var(--space-3); }
.cal-top-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin: var(--space-2) 0; }
.cal-month { margin: 0; font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--text-xl); text-align: center; flex: 1; }
.cal-card { padding: var(--space-2); }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-wd { text-align: center; font-size: var(--text-xs); color: var(--ink-muted); font-weight: var(--weight-strong); padding-block: 4px; }
.cal-cell { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 2px; min-height: 64px; padding: 4px; border: 1px solid transparent; border-radius: var(--radius-sm); background: var(--surface-sunken); color: var(--ink); font: inherit; text-align: left; cursor: pointer; overflow: hidden; }
.cal-cell.is-out { background: transparent; border-color: var(--line); color: var(--ink-muted); } /* [a11y2] was opacity 0.45: its day numbers fell under 4.5:1 */
.cal-cell.is-today { border-color: var(--accent); }
.cal-cell.is-today .cal-num { background: var(--accent); color: var(--accent-ink); }
.cal-cell.is-selected { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.cal-num { align-self: flex-start; min-width: 24px; height: 24px; padding: 0 4px; border-radius: 999px; display: grid; place-items: center; font-size: var(--text-sm); font-weight: var(--weight-strong); }
.cal-marks { display: flex; flex-wrap: wrap; gap: 3px; min-width: 0; }
.cal-chip { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; line-height: 1.35; padding: 0 4px; border-radius: 4px; background: var(--info-soft); color: var(--ink); }
.cal-chip.is-bday { background: var(--accent-soft); }
.cal-chip.is-idea { background: transparent; border: 1px dashed var(--line-strong); }
.cal-more { font-size: 11px; color: var(--ink-muted); }
.cal-fly { width: 10px; height: 10px; border-radius: 50%; background: var(--firefly); box-shadow: 0 0 6px 2px var(--firefly-glow); }
.cal-fly.is-bday { background: var(--coral, #E0654F); box-shadow: none; }
.cal-card--little .cal-cell { min-height: 56px; }
.cal-card--little .cal-num { font-size: var(--text-md); }
.cal-card--little .cal-fly { width: 12px; height: 12px; }
.cal-none { text-align: center; padding: var(--space-4) 0; margin: 0; }
.cal-dot { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--info-soft); color: var(--info-text, var(--ink)); }
.cal-dot--bday { background: var(--accent-soft); color: var(--accent-text); }
.cal-dot--idea { background: transparent; border: 2px dashed var(--line-strong); color: var(--ink-muted); }
.cal-bday { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-3); border-radius: var(--radius-lg); background: var(--dusk, #243152); color: #FBF7EC; overflow: hidden; }
.cal-bday.is-calm { background: var(--accent-soft); color: var(--ink); }
.cal-bday-sky { position: absolute; inset: 0; pointer-events: none; }
.cal-bday-text { font-weight: var(--weight-strong); position: relative; }
.cal-bday > .ui-icon { position: relative; }
.cal-bday-acts { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-left: auto; position: relative; }
.cal-bday:not(.is-calm) .cal-bday-acts .ui-btn { color: #FBF7EC; }
.cal-idea-acts { display: flex; gap: var(--space-2); }
.cal-when { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-weight: var(--weight-strong); }
.cal-times { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.cal-times[hidden] { display: none; }
.cal-agenda--little .ui-row-title { font-size: var(--text-lg); }
.cal-agenda--little .cal-dot { width: 48px; height: 48px; }

@media (max-width: 420px) {
  .cal-cell { min-height: 52px; padding: 2px; }
  .cal-chip { font-size: 10px; padding: 0 2px; }
  .ch-wait-acts { margin-left: 0; width: 100%; }
  .ch-wait-acts .ui-btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .ch-fly.is-lit { animation: none; }
  .ch-big, .ch-tick { transition: none; }
}
:root[data-motion="reduce"] .ch-fly.is-lit { animation: none; }
:root[data-motion="reduce"] :is(.ch-big, .ch-tick) { transition: none; }

/* ---------- [relations] colors on the family calendar (public/relations-data.js CAL_COLORS) ----------
   Each color is dark enough on the day look's white and light enough on the evening look's night
   surface (3:1 or more for marks next to text). */
.cal-c-sky { --cal-c: #1F6FB2; } .cal-c-leaf { --cal-c: #2E7D32; } .cal-c-sun { --cal-c: #A86A00; } .cal-c-berry { --cal-c: #8E3B9E; } .cal-c-grape { --cal-c: #5B4BC4; }
.cal-c-coral { --cal-c: #C0452B; } .cal-c-teal { --cal-c: #00796B; } .cal-c-rose { --cal-c: #B8336A; } .cal-c-cocoa { --cal-c: #7A4E2D; } .cal-c-slate { --cal-c: #4A5A70; }
@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="light"])) .cal-c-sky { --cal-c: #6CB6F0; }
  :where(:root:not([data-theme="light"])) .cal-c-leaf { --cal-c: #7BCB80; }
  :where(:root:not([data-theme="light"])) .cal-c-sun { --cal-c: #F2C14E; }
  :where(:root:not([data-theme="light"])) .cal-c-berry { --cal-c: #D59BE0; }
  :where(:root:not([data-theme="light"])) .cal-c-grape { --cal-c: #A99CF5; }
  :where(:root:not([data-theme="light"])) .cal-c-coral { --cal-c: #FF9A80; }
  :where(:root:not([data-theme="light"])) .cal-c-teal { --cal-c: #5FD0C0; }
  :where(:root:not([data-theme="light"])) .cal-c-rose { --cal-c: #F48FB8; }
  :where(:root:not([data-theme="light"])) .cal-c-cocoa { --cal-c: #D2A57E; }
  :where(:root:not([data-theme="light"])) .cal-c-slate { --cal-c: #A9B7CC; }
}
:root[data-theme="dark"] .cal-c-sky { --cal-c: #6CB6F0; }
:root[data-theme="dark"] .cal-c-leaf { --cal-c: #7BCB80; }
:root[data-theme="dark"] .cal-c-sun { --cal-c: #F2C14E; }
:root[data-theme="dark"] .cal-c-berry { --cal-c: #D59BE0; }
:root[data-theme="dark"] .cal-c-grape { --cal-c: #A99CF5; }
:root[data-theme="dark"] .cal-c-coral { --cal-c: #FF9A80; }
:root[data-theme="dark"] .cal-c-teal { --cal-c: #5FD0C0; }
:root[data-theme="dark"] .cal-c-rose { --cal-c: #F48FB8; }
:root[data-theme="dark"] .cal-c-cocoa { --cal-c: #D2A57E; }
:root[data-theme="dark"] .cal-c-slate { --cal-c: #A9B7CC; }
.cal-dot[class*="cal-c-"] { position: relative; box-shadow: inset 0 0 0 3px var(--cal-c); }
.cal-dot--other { background: transparent; border: 2px dashed var(--cal-c, var(--line-strong)); box-shadow: none !important; color: var(--ink); }
.cal-colors { position: absolute; right: -4px; bottom: -4px; display: flex; gap: 1px; padding: 1px; border-radius: 999px; background: var(--surface); }
.cal-swatch { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--cal-c, var(--line-strong)); }
.cal-swatch--lg { width: 28px; height: 28px; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--line); }
.cal-chip[class*="cal-c-"] { border-left: 3px solid var(--cal-c); }
.cal-chip.is-other { background: transparent; border: 1px dashed var(--cal-c, var(--line-strong)); border-left-width: 3px; font-style: italic; }
.cal-fly[class*="cal-c-"]:not(.is-bday) { background: var(--cal-c); box-shadow: 0 0 5px 1px var(--cal-c); }
.cal-from { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; }
.cal-now { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; font-weight: var(--weight-strong); overflow-wrap: anywhere; }
.cal-person { display: grid; gap: var(--space-2); padding: var(--space-2) 0; border-bottom: 1px solid var(--line); }
.cal-palette { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--space-2); }
.cal-pick { display: flex; align-items: center; gap: var(--space-2); min-height: 48px; padding: var(--space-2); border: 2px solid var(--line); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); cursor: pointer; font: inherit; }
.cal-pick .cal-swatch { background: var(--cal-c); }
.cal-pick.is-on { border-color: var(--cal-c); box-shadow: inset 0 0 0 1px var(--cal-c); font-weight: var(--weight-strong); }