/* Monthly calendar beside individual milestone progress; existing palette is preserved. */
html[data-theme] :is(.am-view, .annual-dialog) {
  --am-empty: #f7f8f8;
  --am-future: #fafbfb;
  --am-lit: #d4f3e8;
  --am-today: #78dbc0;
  --am-accent: #32826b;
  --am-lit-ink: #244d40;
  --am-today-ink: #153d31;
  --am-muted: #818786;
  --am-line: #e9eceb;
  --am-surface: #fff;
  --am-track: #e5e8e7;
}
html[data-theme="dark"] :is(.am-view, .annual-dialog) {
  --am-empty: #292c2b;
  --am-future: #252827;
  --am-lit: #294d40;
  --am-today: #79cdb0;
  --am-accent: #8dd5b8;
  --am-lit-ink: #bee5d4;
  --am-today-ink: #14372a;
  --am-muted: #9aa49f;
  --am-line: #363c39;
  --am-surface: #202321;
  --am-track: #424b46;
}
html[data-theme] .am-view {
  background: var(--am-surface);
  border-color: var(--am-line);
  border-radius: 16px;
}
html[data-theme] .am-view .activity-map-header { padding: 24px 28px; background: transparent; border: 0; border-bottom: 1px solid var(--am-line); gap: 20px; }
.am-title h2 { font-size: 20px; }
.am-title-line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; }
html[data-theme] .am-view .am-title-line p { margin: 0; color: var(--am-muted); font-size: 12px; }
.am-body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 36px; padding: 24px 28px; align-items: stretch; }
html[data-theme] .am-view .map-header-actions { gap: 10px; }
html[data-theme] .am-view .map-checkin,
html[data-theme] .am-view .map-claim { background: var(--ink); border-color: var(--ink); color: var(--am-surface); box-shadow: none; }
html[data-theme] .am-view .map-checkin:hover:not(:disabled),
html[data-theme] .am-view .map-claim:hover:not(:disabled) { background: var(--ink); border-color: var(--ink); color: var(--am-surface); }
html[data-theme] .am-view .map-checkin:disabled { background: var(--am-lit); color: var(--am-lit-ink); border-color: transparent; opacity: 1; }
html[data-theme] .am-view .am-month-summary { margin-top: 12px; }
html[data-theme] .am-view .am-month-summary p { font-size: 14px; font-weight: 400; margin: 0; color: var(--muted); }
.am-month-summary strong { color: var(--am-accent); font-size: 18px; font-weight: 600; padding-inline: 3px; font-variant-numeric: tabular-nums; }
.am-month-summary > span { display: block; margin-top: 7px; font-size: 12px; color: var(--am-muted); }
html[data-theme] .am-view .am-text-button { border: 0; padding: 6px 0; min-height: 32px; min-width: 0; background: none; box-shadow: none; color: var(--muted); font-size: 12px; font-weight: 400; flex: none; }
html[data-theme] .am-view .am-text-button:hover:not(:disabled),
html[data-theme] .am-view .am-text-button:active { background: transparent; border: 0; box-shadow: none; }
.am-text-button .icon { width: 13px; height: 13px; }
html[data-theme] .am-view .map-calendar { width: 100%; padding: 0; max-width: none; }
html[data-theme] .am-view .calendar-heading { min-height: 36px; margin-bottom: 12px; }
html[data-theme] .am-view .month-control h3 { min-width: 123px; font-size: 15px; }
html[data-theme] .am-view .month-count { color: var(--am-muted); font-size: 12px; }
.am-view .month-count strong { font-weight: 500; color: var(--ink); }
html[data-theme] .am-view .calendar { gap: 6px; }
html[data-theme] .am-view .calendar .weekday { min-height: 28px; padding: 0 0 6px; font-size: 11px; color: var(--am-muted); }
html[data-theme] .am-view .calendar-day,
html[data-theme] .am-view .am-adjacent-day { display: flex; justify-content: center; align-items: center; height: 46px; min-height: 46px; max-height: 46px; min-width: 0; padding: 0; border: 0; border-radius: 8px; background: var(--am-empty); color: var(--ink); font-size: 12px; font-weight: 400; font-variant-numeric: tabular-nums; outline: none; transition: none; box-shadow: none; }
html[data-theme] .am-view .calendar-day.inactive { background: var(--am-empty); color: var(--ink); }
html[data-theme] .am-view .calendar-day.active { background: var(--am-lit); color: var(--am-lit-ink); }
html[data-theme] .am-view .calendar-day.future { background: var(--am-future); color: var(--am-muted); opacity: .65; cursor: default; }
html[data-theme] .am-view .am-adjacent-day { background: var(--am-future); color: var(--am-muted); opacity: .35; }
/* Explicitly cover the inactive state so today's label stays readable. */
html[data-theme] .am-view .calendar-day.today,
html[data-theme] .am-view .calendar-day.today:not(.active) { background: var(--am-today); color: var(--am-today-ink); border: 0; outline: none; font-weight: 500; }
html[data-theme] .am-view .calendar-day:hover:not(:disabled):not(.today) { background: var(--am-empty); border: 0; }
html[data-theme] .am-view .calendar-day.active:hover:not(:disabled):not(.today) { background: var(--am-lit); }
html[data-theme] .am-view .calendar-day.selected { box-shadow: inset 0 0 0 1px var(--am-accent); }
html[data-theme] .am-view .calendar-day:focus-visible { outline: 2px solid var(--am-accent); outline-offset: 2px; }
html[data-theme] .am-view .calendar-meta { border: 0; border-top: 1px solid var(--am-line); margin-top: 22px; padding: 16px 0 0; min-height: 22px; gap: 12px; flex-wrap: wrap; }
html[data-theme] .am-view .calendar-meta p { color: var(--am-muted); font-size: 11px; max-width: none; }
html[data-theme] .am-view .map-legend { color: var(--am-muted); font-size: 10px; gap: 5px; }
html[data-theme] .am-view .legend-square { width: 9px; height: 9px; border: 0; border-radius: 3px; background: var(--am-empty); }
html[data-theme] .am-view .legend-square.active { background: var(--am-lit); margin-left: 8px; }
html[data-theme] .am-view .legend-square.am-today { background: var(--am-today); margin-left: 8px; }
.am-rewards { min-width: 0; margin: 0; padding: 0 0 0 28px; border-left: 1px solid var(--am-line); }
.am-rewards-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; margin-bottom: 8px; }
.am-rewards-heading h3 { font-size: 15px; font-weight: 600; margin: 0; }
.am-rewards-grid { display: grid; grid-template-columns: 1fr; gap: 0; }
.am-reward { background: transparent; border-bottom: 1px solid var(--am-line); padding: 12px 0; min-width: 0; }
.am-reward:last-child { border-bottom: 0; }
.am-reward-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.am-reward-heading h4 { font-size: 14px; margin: 0; font-weight: 600; }
.am-reward-status { display: inline-flex; align-items: center; gap: 4px; }
.am-reward-status .icon { width: 12px; height: 12px; }
.am-reward.is-reached .am-reward-status { color: var(--am-accent); }
html[data-theme] .am-view .am-reward-details { width: auto; min-width: 0; min-height: 28px; border: 0; background: none; padding: 4px 0; flex: none; color: var(--muted); font-size: 11px; font-weight: 400; box-shadow: none; gap: 2px; }
.am-reward-details .icon { width: 12px; height: 12px; }
.am-reward-pet { display: flex; align-items: center; gap: 5px; margin: 8px 0; font-size: 12px; color: var(--muted); }
.am-reward-pet .icon { width: 13px; height: 13px; flex: none; }
.am-reward-track { height: 4px; border-radius: 4px; overflow: hidden; background: var(--am-track); }
.am-reward-track > span { display: block; height: 100%; background: var(--am-today); border-radius: inherit; }
.am-reward-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; min-height: 28px; margin-top: 4px; }
.am-reward-bottom > span { font-size: 11px; color: var(--am-muted); }
.am-reward-bottom i { font-style: normal; padding-inline: 4px; }
.am-rewards-note { display: flex; align-items: center; gap: 6px; background: var(--am-empty); border-radius: 6px; margin: 12px 0 0; padding: 8px 10px; font-size: 11px; color: var(--am-muted); }
.am-rewards-note .icon { width: 13px; height: 13px; flex: none; }
.am-pending { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; color: var(--am-accent); font-size: 12px; }

/* Annual cells and their legend share each state rule, including dark mode. */
html[data-theme] #dialog.annual-dialog :is(.annual-day, .annual-legend .legend-square) {
  background: var(--am-track);
  border: 0;
  border-radius: 2px;
  width: 9px;
  height: 9px;
  opacity: 1;
}
html[data-theme] #dialog.annual-dialog :is(.annual-day.active, .annual-legend .legend-square.active) {
  background: var(--am-today);
}
html[data-theme] #dialog.annual-dialog :is(.annual-day.future, .annual-legend .legend-square.future) {
  background: var(--am-empty);
}
html[data-theme] #dialog.annual-dialog .annual-day {
  transform: none;
  transition: none;
  box-shadow: none;
  outline: none;
}
html[data-theme] #dialog.annual-dialog .annual-day[aria-pressed="true"] {
  outline: 1px solid var(--am-accent);
  outline-offset: 1px;
}
html[data-theme] #dialog.annual-dialog .annual-day:focus-visible {
  outline: 2px solid var(--am-accent);
  outline-offset: 2px;
}
html[data-theme] #dialog.annual-dialog .annual-stats > span:nth-child(2) b { color: var(--am-accent); }
html[data-theme] #dialog.annual-dialog .annual-bottom { align-items: center; flex-wrap: wrap; gap: 12px; }
html[data-theme] #dialog.annual-dialog .annual-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 0; color: var(--muted); font-size: 11px; }
.annual-legend-item { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
html[data-theme] #dialog.annual-dialog .annual-note { text-align: left; line-height: 1.8; border-color: var(--am-line); }
@media (max-width: 900px) {
  .am-body { grid-template-columns: 1fr; gap: 22px; padding: 20px; }
  .am-rewards { border-left: 0; border-top: 1px solid var(--am-line); padding: 18px 0 0; }
}
@media (max-width: 760px) {
  html[data-theme] .am-view .activity-map-header { padding: 20px; align-items: flex-start; flex-wrap: wrap; }
}
@media (max-width: 480px) {
  html[data-theme] .am-view .activity-map-header { padding: 18px 16px 16px; gap: 14px; }
  html[data-theme] .am-view .map-header-actions { width: 100%; justify-content: space-between; }
  .am-body { padding: 20px 16px 18px; }
  .am-month-summary > span { font-size: 11px; }
  html[data-theme] .am-view .calendar { gap: 5px; }
  html[data-theme] .am-view .calendar-day,
  html[data-theme] .am-view .am-adjacent-day { height: 34px; min-height: 34px; max-height: 34px; font-size: 11px; border-radius: 6px; }
  html[data-theme] .am-view .calendar-meta { flex-direction: column; align-items: flex-start; gap: 8px; }
  .am-reward-heading { gap: 8px; }
  .am-reward-heading h4 { font-size: 13px; }
}