/* ============================================================================
 * The schedule: the dated week in the website's look (signed off 2026-10-22), on the website's /schedule at every
 * width and in the member app's Schedule tab.
 *
 * The markup is drawn at runtime (schedule-week-view.js, schedule-page.js), which Astro's scoped styles cannot reach,
 * so these rules are global and every name is schedule-prefixed: wk-* for the week bar and the Schedule changes card,
 * ws-* for the week, the filters and the popup. The website's camp week tile (camp-week-tile.css) is wk-* too: a name
 * is never in both (TMV-Web tests/schedule-weeks.test.mjs).
 *
 * One markup, three layouts, written phone first: the phone's card per day from today on (each hour down its left)
 * is the base; two days side by side from 768px; from 1024px the printed sheet's hour grid (hours down, days across).
 * The wider layouts are for a page as wide as the window. The member app is a phone frame at every window width
 * (`<html data-phone-frame>`), so it keeps the phone layout: every wider rule is under `:root:not([data-phone-frame])`.
 *
 * Every rule mirrors a part the website already ships: the price list card (price-list-web.css .pw-*), the .eyebrow
 * kicker (global.css), and the ink pills of the price list's category nav (.pl-cats-nav).
 *
 * 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.
 * ========================================================================== */

/* ── Filters: the price list's pills; the chosen one is ink. The phone's short names sit in one row that scrolls
      sideways, edge to edge; each takes a 44px tap. ── */
.ws-filters {
  display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 8px; overflow-x: auto; scrollbar-width: none;
  margin: 0 calc(-1 * var(--gutter)) 16px; padding: 0 var(--gutter);
}
.ws-filters::-webkit-scrollbar { display: none; }
.ws-filter {
  flex: none; white-space: nowrap; min-height: 44px;
  padding: 10px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink);
  font: 700 12px/1.2 var(--font-display); cursor: pointer;
}
.ws-filter:hover { background: var(--line-soft); }
.ws-filter.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ── Week bar: eyebrow + Archivo title, as every section head on the site. The phone's is one row, the arrows at its
      ends; the eyebrow already says where the week sits. ── */
.wk-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 14px; flex-wrap: nowrap; }
.wk-arrow {
  width: 44px; height: 44px; flex: none; border-radius: 999px; border: 1px solid var(--line); background: var(--card);
  color: var(--ink); box-shadow: var(--shadow-sm); display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 16px;
}
.wk-arrow:hover:not(:disabled) { background: var(--line-soft); }
.wk-arrow:disabled { opacity: .3; cursor: default; }
.wk-bar-label { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.wk-eyebrow { font: 700 11px/1.2 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.wk-range { font: 800 22px/1.15 var(--font-display); letter-spacing: -.01em; color: var(--ink); }
.wk-today {
  display: none; position: relative;
  font: 800 12.5px/1.2 var(--font-display); letter-spacing: .03em; text-transform: uppercase; color: var(--ink);
  background: none; border: 0; border-bottom: 2px solid var(--brand); padding: 4px 0; cursor: pointer;
}
.wk-today::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }

/* ── The week: price-list cards. The phone's card per day first (a day with nothing in this filter, or already past,
      is left out), each hour down its left as the sheet's hour column is. ── */
.ws-week { --c: var(--c-classes); }
.ws-week[data-section="athletic"] { --c: var(--c-athletic); }
.ws-week[data-section="open_gym"] { --c: var(--c-opengym); }
.ws-grid { display: flex; flex-direction: column; gap: 14px; }
.ws-corner, .ws-hour, .ws-day.is-past, .ws-day.is-empty, .ws-cell.is-empty { display: none; }
.ws-day {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.ws-head { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 10px; border-bottom: 2px solid var(--c); }
.ws-head.is-today { border-bottom-color: var(--brand); }
.ws-head.is-closed { border-bottom-color: var(--c-private); }
.ws-kicker { display: inline-flex; align-items: center; gap: 7px; font: 700 11px/1.2 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.ws-kicker .rule { width: 14px; height: 2px; border-radius: 2px; background: var(--brand); }
.ws-head.is-today .ws-kicker { color: var(--ink); }
.ws-title { font: 800 18px/1.1 var(--font-display); letter-spacing: -.01em; color: var(--ink); }
.ws-head.is-past .ws-title { color: var(--muted-3); }
.ws-closed { font: 800 12px/1.3 var(--font-display); color: var(--c-private); }
.ws-hour, .ws-at { text-align: right; font: 800 12.5px/1.2 var(--font-display); color: var(--text-2); font-variant-numeric: tabular-nums; }
.ws-at { padding-top: 7px; }
.ws-cell {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: start; column-gap: 8px;
  padding: 6px 10px 6px 0; min-width: 0;
}
.ws-cell:not(.is-empty) ~ .ws-cell { border-top: 1px solid var(--line); }
.ws-slot { display: flex; flex-direction: column; gap: 2px; }
.ws-cell.is-past { opacity: .5; }
.ws-item {
  display: grid; gap: 1px; width: 100%; text-align: left; padding: 5px 6px 5px 12px; border: 0; background: none;
  font: inherit; color: var(--ink); border-radius: 0 8px 8px 0; box-shadow: inset 4px 0 0 var(--k);
  transition: opacity .15s ease, background .15s ease;
}
button.ws-item { cursor: pointer; }
/* A pointer that hovers: a touch has no hover, and a tap would leave the week dimmed behind it. */
@media (hover: hover) {
  button.ws-item:hover:not(.is-off) { background: var(--line-soft); }
  .ws-grid.has-focus .ws-item:not(.is-match) { opacity: .28; }
  .ws-grid.has-focus .ws-item.is-match { background: color-mix(in srgb, var(--k) 10%, #fff); }
}
.ws-name { font: 700 14px/1.3 var(--font-body); }
.ws-age { font: 500 12px/1.4 var(--font-body); color: var(--muted); }
.ws-when { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; font: 500 12px/1.4 var(--font-body); color: var(--muted-3); white-space: nowrap; }
.ws-tag {
  padding: 3px 7px; border-radius: 6px; background: var(--ink); color: #fff;
  font: 700 10px/1.2 var(--font-display); letter-spacing: .1em; text-transform: uppercase;
}
.ws-tag.is-new { background: var(--c-opengym); }
.ws-tag.is-off { background: var(--c-private); }
.ws-item.is-off .ws-name { color: var(--muted-3); text-decoration: line-through; }
.ws-item.is-off { box-shadow: inset 4px 0 0 color-mix(in srgb, var(--k) 35%, #fff); }
.ws-note { margin: 24px 0; text-align: center; font: 500 14px/1.45 var(--font-body); color: var(--muted-3); }
.ws-note.is-error { color: var(--c-private); }
.ws-foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 22px; margin-top: 18px; padding-top: 12px;
  border-top: 1px solid var(--line); font: 500 12.5px/1.5 var(--font-body); color: var(--muted);
}
.ws-hint-touch { display: none; }
@media (hover: none) { .ws-hint-point { display: none; } .ws-hint-touch { display: inline; } }

/* From 768px (a page as wide as the window): the filters wrap, centred; the week bar centres its title over the
   Today link; below 1024, two days side by side under a changes card as wide as the two. */
@media (min-width: 768px) {
  :root:not([data-phone-frame]) .ws-filters {
    flex-wrap: wrap; justify-content: center; overflow-x: visible; scrollbar-width: auto; margin: 0 0 22px; padding: 0;
  }
  :root:not([data-phone-frame]) .ws-filter { flex: 0 1 auto; white-space: normal; }
  :root:not([data-phone-frame]) .wk-bar { justify-content: center; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
  :root:not([data-phone-frame]) .wk-bar-label { min-width: 170px; }
  :root:not([data-phone-frame]) .wk-range { font-size: 26px; }
  :root:not([data-phone-frame]) .wk-today { display: inline-block; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  :root:not([data-phone-frame]) .ws-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  :root:not([data-phone-frame]) .sched-main .wk-changes { max-width: none; }
}

/* From 1024px, the printed sheet: one card, hours down the left, days across. The markup is day by day; each part
   takes its column (`--col`, the day) and row (`--row`, the hour) here. A pointer is precise: no 44px floor. */
@media (min-width: 1024px) {
  :root:not([data-phone-frame]) .ws-filter { min-height: auto; }
  :root:not([data-phone-frame]) .wk-arrow { width: 40px; height: 40px; flex: 0 1 auto; }
  :root:not([data-phone-frame]) .wk-today { position: static; }
  :root:not([data-phone-frame]) .wk-today::after { content: none; }
  :root:not([data-phone-frame]) .ws-card {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm);
    overflow: hidden;
  }
  :root:not([data-phone-frame]) .ws-scroll { overflow-x: auto; }
  :root:not([data-phone-frame]) .ws-grid { display: grid; grid-template-columns: 64px repeat(7, minmax(120px, 1fr)); min-width: 940px; gap: 0; }
  :root:not([data-phone-frame]) .ws-day { display: contents; }
  :root:not([data-phone-frame]) .ws-corner { display: block; grid-row: 1; grid-column: 1; border-bottom: 1px solid var(--line); }
  :root:not([data-phone-frame]) .ws-head { grid-row: 1; grid-column: var(--col); padding: 16px 12px 10px; border-left: 1px solid var(--line-soft); }
  :root:not([data-phone-frame]) .ws-hour { display: block; grid-row: var(--row); grid-column: 1; padding: 12px 10px 0 0; border-top: 1px solid var(--line); }
  :root:not([data-phone-frame]) .ws-grid > .ws-hour:nth-child(2) { border-top: 0; }
  :root:not([data-phone-frame]) .ws-cell {
    display: block; grid-row: var(--row); grid-column: var(--col); padding: 6px 6px 8px;
    border-top: 1px solid var(--line); border-left: 1px solid var(--line-soft);
  }
  :root:not([data-phone-frame]) .ws-at, :root:not([data-phone-frame]) .ws-note-days { display: none; }
}

/* ── Full screen (schedule-fullscreen.js): the week alone fills the screen and is zoomed down until it all fits,
      so a hovered class lights every repeat with none off screen. It is for the hour grid; a window made narrow
      while full keeps its way back. `main.` outranks the page's scoped padding. ── */
.ws-top { position: relative; }
.ws-full { position: absolute; top: 2px; right: 0; display: none; align-items: center; gap: 8px; }
.sched-main.is-full .ws-full { display: inline-flex; }
@media (min-width: 1024px) { :root:not([data-phone-frame]) .ws-full { display: inline-flex; } }
html.sched-full, html.sched-full body { overflow: hidden; }
main.sched-main.is-full {
  position: fixed; inset: 0; z-index: 9000; display: flex; flex-direction: column; max-width: none; margin: 0;
  padding: 12px 16px; overflow: auto; background: var(--bg);
}
.sched-main.is-full > .sched-foot, .sched-main.is-full > .sched-next, .sched-main.is-full .ws-foot { display: none; }
.sched-main.is-full .ws-filters { margin-bottom: 8px; }
.sched-main.is-full .wk-bar { margin-bottom: 8px; }
.sched-main.is-full > [data-sched-week] { flex: 1 1 0; min-height: 0; }
.sched-main.is-full .ws-head { padding: 8px 10px 6px; gap: 2px; }
.sched-main.is-full .ws-hour { padding-top: 6px; }
.sched-main.is-full .ws-cell { padding: 3px 4px 4px; }
.sched-main.is-full .ws-item { padding: 3px 6px 3px 10px; gap: 0; }
.sched-main.is-full .ws-name { line-height: 1.2; }
.sched-main.is-full .ws-age, .sched-main.is-full .ws-when { line-height: 1.25; }

/* ── Class popup: a site card. Archivo title over the class's colour rule, rows in the price list's
      label/value style, the close button as the card's round button with a 44px tap. ── */
.ws-pop-overlay {
  position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center;
  padding: var(--gutter); background: rgba(28, 25, 23, .5);
}
.ws-pop {
  position: relative; box-sizing: border-box; width: 100%; max-width: 460px; max-height: 100%; overflow: auto;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: 22px 24px 20px; color: var(--ink); font-family: var(--font-body);
}
.ws-pop-close {
  position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; background: var(--line-soft); color: var(--ink);
  font-size: 14px; cursor: pointer;
}
.ws-pop-close::after { content: ''; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
.ws-pop-close:hover { background: var(--ink); color: #fff; }
.ws-pop-title {
  margin: 0 44px 12px 0; padding-bottom: 12px; border-bottom: 2px solid var(--pc, var(--ink));
  font: 800 24px/1.1 var(--font-display); letter-spacing: -.01em; color: var(--ink);
}
.ws-pop-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; }
.ws-pop-row + .ws-pop-row { border-top: 1px dashed var(--line); }
.ws-pop-label { font: 500 14px/1.35 var(--font-body); color: var(--muted); }
.ws-pop-value { font: 800 14.5px/1.35 var(--font-display); color: var(--ink); text-align: right; }
.ws-pop-off {
  display: flex; flex-direction: column; gap: 2px; margin: 0 0 10px; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--line); border-left: 3px solid var(--c-private); background: var(--card);
  font: 500 13.5px/1.45 var(--font-body); color: var(--ink);
}
.ws-pop-off strong { font: 800 14px/1.3 var(--font-display); color: var(--c-private); }
.ws-pop-next { color: var(--muted); }
.ws-pop-desc { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line); font: 400 14px/1.55 var(--font-body); color: var(--text-3); }
.ws-pop-desc a { color: var(--ink); text-decoration-color: var(--brand); text-decoration-thickness: 2px; }
.ws-pop-desc ul { margin: 6px 0 6px 18px; padding: 0; }
/* The popup's parts that set a display keep `hidden` themselves: a host need not have a global `[hidden]` rule. */
.ws-pop-overlay[hidden], .ws-pop-off[hidden] { display: none; }
@media (min-width: 1024px) {
  :root:not([data-phone-frame]) .ws-pop-overlay { padding: 24px; }
  :root:not([data-phone-frame]) .ws-pop { max-height: calc(100vh - 48px); }
  :root:not([data-phone-frame]) .ws-pop-close::after { content: none; }
}