/*
 * The Schedule changes card (`changesCard` in schedule-week-view.js): staff's cancelled class dates and closed days.
 * Drawn on the website's /schedule and home page (`ScheduleChanges.astro`) and in the member app's Schedule tab, so its
 * styles live here, apart from the week grid's (schedule-web.css). Phone first: each date answers a 44px tap, and a
 * page as wide as the window drops that floor from 1024px (the member app is a phone frame: `data-phone-frame`).
 *
 * Owned by TMV-Members (`public/css/`). TMV-Web's `src/styles/` holds a verbatim copy, pinned by TMV-Members
 * `tests/unit/tmv-web-lib-mirror.test.js`: change the Members file, then copy it.
 */
/* ── Schedule changes: a price list card with the red (private) category rule ── */
.wk-changes {
  max-width: 760px; margin: 0 auto 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 16px 18px 12px; color: var(--ink);
}
.wk-changes-h {
  display: flex; align-items: center; gap: 8px; margin: 0 0 6px; padding-bottom: 10px; border-bottom: 2px solid var(--c-private);
  font: 800 17px/1.1 var(--font-display); letter-spacing: -.01em; color: var(--ink);
}
.wk-changes-h i { color: var(--c-private); }
.wk-changes ul { list-style: none; margin: 0; padding: 0; }
.wk-changes li { display: flex; gap: 14px; align-items: baseline; padding: 0; font: 500 14px/1.4 var(--font-body); }
.wk-changes li + li { border-top: 1px dashed var(--line); }
.wk-change-date {
  flex: none; min-width: 92px; text-align: left; background: none; border: 0; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; min-height: 44px;
  font: 800 14px/1.4 var(--font-display); color: var(--ink);
}
.wk-change-date:hover { text-decoration: underline; text-decoration-color: var(--brand); text-decoration-thickness: 2px; }

@media (min-width: 1024px) {
  :root:not([data-phone-frame]) .wk-changes li { padding: 6px 0; }
  :root:not([data-phone-frame]) .wk-change-date { display: inline-block; min-height: auto; }
}