/* Calendar preview: month grid, day detail and list. Uses the tokens in style.css.
   Event chips carry meaning through one rule: burgundy = will remind,
   warm neutral = display only. Category is told by icon and label, not colour. */
.event-category-tsok, .event-category-buddha, .event-category-masters, .event-category-practice,
.event-category-festivals, .event-category-nature, .event-category-eclipse, .event-category-other { --event-color: var(--gold); }
.cal-view { container: calendar / inline-size; min-width: 0; font-size: 16px; line-height: 1.6; }
.cal-view :where(button, select) { font: inherit; touch-action: manipulation; }
.cal-view :is(button, select):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Controls: month title, arrows, today; context line and view switch below. */
.cal-control-bar { display: grid; grid-template-columns: minmax(0,1fr) auto; grid-template-areas: "nav nav" "context switch"; align-items: center; gap: 6px 12px; margin: 0 0 12px; }
.cal-control-bar:has([data-cal-navigation][hidden]) { grid-template-areas: "switch switch"; justify-items: end; }
.cal-toolbar { grid-area: nav; display: grid; grid-template-columns: 44px minmax(0,1fr) 44px auto; align-items: center; gap: 2px; min-width: 0; }
.cal-arrow, .cal-today { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 8px; border: 1px solid transparent; border-radius: var(--r-sm); background: transparent; color: var(--ink); }
.cal-arrow .icon { width: 20px; height: 20px; }
.cal-today { margin-left: 6px; padding-inline: 14px; border-color: var(--line-2); color: var(--red); font-size: 14px; }
@media (hover: hover) { .cal-arrow:hover:not(:disabled), .cal-today:hover:not(:disabled) { background: var(--red-tint); } }
.cal-arrow:disabled { opacity: .35; }
.cal-month-picker { position: relative; min-width: 0; }
.cal-month-picker>.icon { position: absolute; top: calc(50% - 7px); right: 4px; width: 14px; height: 14px; color: var(--muted); pointer-events: none; }
.cal-month-picker select { appearance: none; -webkit-appearance: none; width: 100%; min-width: 0; height: 44px; margin: 0; padding: 6px 22px 6px 6px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink); font: 500 21px/1.3 var(--font-serif); letter-spacing: 1px; text-align: center; text-align-last: center; cursor: pointer; }
.cal-month-picker select:hover { background: var(--surface-2); }
.cal-month-context { grid-area: context; min-width: 0; color: var(--muted); font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.cal-view-switch { grid-area: switch; display: flex; padding: 3px; border-radius: 22px; background: var(--paper-2); }
.cal-view-switch button { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 4px 14px; border: 0; border-radius: 19px; background: transparent; color: var(--muted); font-size: 13px; white-space: nowrap; }
.cal-view-switch button:hover:not([aria-pressed=true]) { color: var(--ink); }
.cal-view-switch button[aria-pressed=true] { background: var(--surface); color: var(--red); font-weight: 600; box-shadow: 0 1px 2px #4a321a24; }
.cal-view-switch .icon { width: 16px; height: 16px; }

/* Grid: hairlines only, weekend headers in burgundy, 经页 calm. */
.cal-weekdays { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); background: var(--surface-2); }
.cal-weekdays span { padding: 6px 0; text-align: center; color: var(--muted); font-size: 13px; letter-spacing: 1px; }
.cal-weekdays span:nth-child(n+6) { color: var(--red); }
.cal-week { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); }
.cal-cell { display: flex; min-width: 0; border-bottom: 1px solid var(--line); }
.cal-cell+.cal-cell { border-left: 1px solid var(--line); }
.cal-day { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; min-width: 0; min-height: 86px; padding: 6px; border: 1px solid transparent; border-radius: 0; background: var(--surface); color: var(--ink); line-height: 1.4; }
.cal-day-date { display: flex; flex-direction: column; align-items: center; gap: 1px; width: 100%; min-width: 0; }
.cal-gregorian { display: grid; place-items: center; min-width: 28px; height: 28px; border-radius: 50%; font: 500 18px/28px var(--font-num); font-variant-numeric: lining-nums tabular-nums; text-align: center; }
.cal-tibetan { font-size: 12px; line-height: 17px; color: #66563f; white-space: nowrap; }
.cal-day.cal-adjacent { background: #f6efe3; color: #6f604e; }
.cal-day.cal-adjacent .cal-gregorian { font-weight: 400; }
.cal-day.cal-adjacent .cal-tibetan { color: #6f604e; }
.cal-day:hover:not(:disabled) { background: var(--surface-2); }
.cal-day.cal-adjacent:hover:not(:disabled) { background: #f1e8d9; }
/* Selected = a fine gold frame. Today = a burgundy disc. They never merge. */
.cal-day.cal-selected, .cal-day.cal-selected:hover:not(:disabled) { border-color: var(--gold); background: #fbf2df; box-shadow: inset 0 0 0 1px var(--gold); }
.cal-day.cal-is-today .cal-gregorian { background: var(--red); color: #fff6e6; font-weight: 600; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--gold-2); }
.cal-day.cal-selected.cal-is-today .cal-gregorian { box-shadow: 0 0 0 2px #fbf2df, 0 0 0 3px var(--gold-2); }
.cal-day.cal-is-today .cal-tibetan { color: var(--red); }
.cal-day:focus-visible { position: relative; z-index: 1; outline-offset: -2px; }
.cal-day:disabled { opacity: .45; }
.cal-marks { display: none; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1px 3px; min-height: 15px; max-width: 100%; color: var(--muted); font-size: 12px; line-height: 15px; }
.cal-marks:has(.cal-leap, .cal-repeat) { display: flex; gap: 1px 2px; }
.cal-leap, .cal-repeat { color: var(--teal); }
.cal-category-marks, .cal-event-count { display: none; }
.cal-category-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--gold); flex: none; }

/* Event chips */
.cal-day-events { display: none; width: 100%; min-width: 0; text-align: left; }
.cal-mini-event { display: block; max-width: 100%; padding: 1px 5px; border-left: 2px solid #bfa37a; border-radius: 0 3px 3px 0; background: #f2e9da; color: var(--ink-2); font-size: 13px; line-height: 19px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-mini-event.is-remind { border-left-color: var(--red); background: var(--red-tint); color: var(--red); }
.cal-mini-event+.cal-mini-event { margin-top: 2px; }
.cal-more-events { display: block; padding: 2px 3px 0; color: var(--muted); font-size: 12px; line-height: 18px; white-space: nowrap; }
.cal-mobile-events { display: block; width: 100%; min-width: 0; margin-top: 3px; text-align: center; }
.cal-mobile-event { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; padding: 2px 1px; border-radius: 3px; background: #f2e9da; color: var(--ink-2); font-size: 12px; line-height: 16px; overflow: hidden; overflow-wrap: anywhere; }
.cal-mobile-event.is-remind { background: var(--red-tint); color: var(--red); }
.cal-mobile-more { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; line-height: 16px; }
.cal-day.cal-adjacent :is(.cal-mini-event, .cal-mobile-event) { background: #eee6d8; color: #6f604e; border-left-color: #c4b193; }
.cal-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 12px 0 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.cal-legend-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--red); flex: none; }
.cal-legend>span:last-child { margin-left: auto; }

/* Day detail: an 经页 heading, then plain rows. */
.cal-day-detail { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.cal-detail-heading { position: relative; margin-bottom: 6px; }
.cal-detail-heading h3 { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; color: var(--teal); font: 500 21px/1.5 var(--font-serif); letter-spacing: 1px; }
.cal-detail-heading h3>span { color: var(--muted); font: 400 14px/1.5 var(--font-ui); letter-spacing: 0; }
.cal-detail-heading>p { margin-top: 2px; color: var(--muted); font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
.cal-event { min-width: 0; padding: 14px 0; border-bottom: 1px solid var(--line); }
.cal-event:last-child { border-bottom: 0; }
.cal-event-heading { display: grid; grid-template-columns: 32px minmax(0,1fr); align-items: start; gap: 12px; min-width: 0; }
.cal-event-icon { display: grid; place-items: center; width: 32px; height: 32px; color: var(--teal); }
.cal-event-icon .icon { width: 26px; height: 26px; stroke-width: 1.4; }
.cal-event-name { min-width: 0; }
.cal-event h4 { margin: 0; color: var(--ink); font: 500 16px/1.6 var(--font-ui); overflow-wrap: anywhere; }
.cal-event-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 2px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.cal-all-day { padding-left: 8px; border-left: 1px solid var(--line-2); color: var(--muted); font-size: 13px; }
.cal-reminder { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: 100%; min-height: 44px; margin-top: 4px; padding: 7px 10px; border: 1px solid transparent; border-radius: var(--r-sm); background: transparent; color: var(--muted); font-size: 13px; line-height: 1.6; text-align: left; }
.cal-reminder.is-active { color: var(--red); }
.cal-reminder>.icon { width: 16px; height: 16px; flex: none; }
.cal-reminder>span:not(.cal-edit) { flex: 1; min-width: 60px; overflow-wrap: anywhere; }
.cal-reminder:hover { border-color: var(--line); background: var(--surface-2); }
.cal-edit { margin-left: auto; color: var(--red); font-size: 13px; white-space: nowrap; }
.cal-device-time { margin: 2px 0 0 44px; color: var(--muted); font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
.cal-device-time>span { display: block; color: var(--ink); font-variant-numeric: tabular-nums; }
.cal-empty { padding: 18px 0; color: var(--muted); font-size: 14px; line-height: 1.9; }
.cal-daily-entry { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--teal); }
.cal-daily-entry>div { min-width: 0; }
.cal-daily-icon { display: inline-flex; flex: none; justify-content: center; align-items: center; width: 32px; height: 32px; color: var(--teal); }
.cal-daily-icon .icon { width: 22px; height: 22px; stroke-width: 1.4; }
.cal-daily-entry h4 { color: var(--ink); font: 500 16px/1.6 var(--font-serif); overflow-wrap: anywhere; }
.cal-daily-meta { display: flex; flex-wrap: wrap; gap: 2px 10px; color: var(--muted); font-size: 13px; line-height: 1.7; }
.cal-daily-source, .cal-daily-note { margin-top: 2px; color: var(--muted); font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
.cal-daily-source a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }
.cal-daily-note { color: var(--teal); }
.cal-list-content>.cal-daily-entry:only-of-type { padding-bottom: 0; border-bottom: 0; }
.cal-data-note { margin: 14px 0 0; padding: 10px 12px; border-left: 2px solid var(--gold); border-radius: 0 var(--r-sm) var(--r-sm) 0; background: var(--gold-tint); color: #56452d; font-size: 13px; line-height: 1.8; overflow-wrap: anywhere; }

/* List view */
.cal-list-caption { margin: 0 0 4px; color: var(--muted); font-size: 14px; }
.cal-list-day { display: grid; grid-template-columns: 52px minmax(0,1fr); gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.cal-list-date { display: flex; flex-direction: column; align-items: center; gap: 1px; padding-top: 2px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.cal-list-date strong { color: var(--red); font: 500 32px/1.15 var(--font-num); font-variant-numeric: lining-nums tabular-nums; }
.cal-list-content { min-width: 0; }
.cal-list-content>h3 { color: var(--ink); font: 600 15px/1.6 var(--font-serif); }
.cal-list-tibetan { margin-top: 2px; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.cal-today-label { margin-left: 8px; padding: 1px 8px; border-radius: 10px; background: var(--red); color: #fff6e6; font: 400 12px/1.6 var(--font-ui); }
.cal-more { display: block; width: 100%; min-height: 44px; margin-top: 18px; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: transparent; color: var(--red); font-size: 14px; }
.cal-more:hover { background: var(--red-tint); }

@container calendar (min-width: 560px) {
  .cal-control-bar { grid-template-areas: "nav switch" "context context"; }
  .cal-toolbar { grid-template-columns: 44px minmax(0, 220px) 44px auto; justify-content: start; }
  .cal-month-picker select { text-align: left; text-align-last: left; padding-left: 10px; }
}
@container calendar (min-width: 620px) {
  .cal-event { display: grid; grid-template-columns: minmax(0,1fr) minmax(190px,.7fr); align-items: center; column-gap: 16px; }
  .cal-reminder { margin-top: 0; }
  .cal-device-time { grid-column: 1/-1; }
}
@media (min-width: 1024px) {
  .cal-mobile-events { display: none; }
  .cal-day { align-items: stretch; min-height: 88px; }
  .cal-day-date { flex-direction: row; justify-content: space-between; align-items: center; gap: 2px; }
  .cal-day-events { display: block; margin-top: 4px; }
  .cal-marks:has(.cal-leap, .cal-repeat) { justify-content: flex-start; }
}
@media (max-width: 480px) {
  .cal-toolbar { grid-template-columns: 40px minmax(0,1fr) 40px auto; }
  .cal-arrow { min-width: 40px; }
  .cal-today { margin-left: 2px; padding-inline: 10px; }
  .cal-month-picker select { font-size: 19px; }
  .cal-view-switch button { padding-inline: 10px; }
  .cal-day { min-height: 84px; padding: 4px 1px; }
  .cal-gregorian { min-width: 26px; height: 26px; font-size: 17px; line-height: 26px; }
  .cal-weekdays span { letter-spacing: 0; }
  .cal-list-day { grid-template-columns: minmax(0,1fr); gap: 6px; padding: 18px 0; }
  .cal-list-date { flex-direction: row; align-items: baseline; gap: 6px; padding: 0; }
  .cal-list-date>span:last-child { order: -1; }
  .cal-legend>span:last-child { margin-left: 4px; }
  .cal-detail-heading h3 { font-size: 19px; }
  .cal-device-time { margin-left: 0; }
}
@media (max-width: 370px) {
  .cal-day { padding-inline: 0; }
  .cal-today { padding-inline: 7px; margin-left: 0; }
  .cal-view-switch button { gap: 4px; padding-inline: 8px; }
}