/* ==========================================================================
   Calendar — the member-facing schedule.

   Namespace `vxc-`, a peer of vxh- / vxf- / vxe- / vxm-.

   Colours come from the --vxl-* scale so the page follows the tenant's own
   palette rather than hardcoding a look; the four kind hues are the one
   exception, because a release, a pin and a live event have to be told apart
   at a glance and a single-colour calendar cannot do that.

   Logical properties throughout (inline-start / -end, margin-inline) so the
   RTL body needs no second stylesheet.
   ========================================================================== */

.vxc {
  --vxc-release: #38bdf8;
  --vxc-pin:     #a78bfa;
  --vxc-live:    #fb7185;
  --vxc-personal:#34d399;

  --vxc-gap: var(--vxl-space-3, 12px);
  color: var(--vxl-ink, #fff);
}

.vxc [v-cloak] { display: none; }

/* ---- header --------------------------------------------------------------- */

.vxc-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vxc-gap);
  margin-block-end: var(--vxl-space-4, 16px);
}

.vxc-nav { display: flex; align-items: center; gap: 8px; min-width: 0; }

/* Two classes, on purpose. The theme sizes every heading through
   `body[data-layout] :where(h1:not(.h1…))`, and that attribute selector
   outranks one class — so the month rendered at the theme's h1 size, 41px,
   with this rule silently losing. Same story for the day heading below. */
.vxc .vxc-title {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
  margin-inline-start: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vxc-actions { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }

.vxc-iconbtn,
.vxc-today,
.vxc-subbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding-inline: 12px;
  border: 1px solid var(--vxl-line, rgba(255,255,255,.12));
  border-radius: var(--vxl-radius-pill, 999px);
  background: transparent;
  color: inherit;
  font-size: .875rem;
  cursor: pointer;
  transition: background-color var(--vxl-dur-1, .15s) var(--vxl-ease, ease),
              border-color var(--vxl-dur-1, .15s) var(--vxl-ease, ease);
}
.vxc-iconbtn { inline-size: 36px; padding-inline: 0; }

.vxc-iconbtn:hover,
.vxc-today:hover,
.vxc-subbtn:hover { background: var(--vxl-surface-2, rgba(255,255,255,.08)); }

.vxc-ico { inline-size: 18px; block-size: 18px; }
[dir="rtl"] .vxc-nav .vxc-iconbtn .vxc-ico { transform: scaleX(-1); }

/* subscribe */
.vxc-sub { position: relative; }
.vxc-subpanel {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: calc(100% + 6px);
  z-index: 30;
  inline-size: 17rem;
  padding: 12px;
  border-radius: var(--vxl-radius-md, 12px);
  /* An opaque ground with the surface tint painted over it, not the tint
     alone. `--vxl-surface-3` is a 14% white OVERLAY, meant to lift a plane off
     the page background showing through it — but a popover floats over
     arbitrary content, so on its own the month grid read straight through the
     panel. The `#1c1c1e` fallback never helped: the token IS defined, so the
     fallback never applied. `--vxl-scrim-solid` is the scale's opaque page
     colour and tracks `--vod-body-bg`, so a light tenant gets a light panel
     rather than a hardcoded dark one. */
  background-color: var(--vxl-scrim-solid, #121212);
  background-image: linear-gradient(var(--vxl-surface-3, rgba(255,255,255,.14)),
                                    var(--vxl-surface-3, rgba(255,255,255,.14)));
  border: 1px solid var(--vxl-line, rgba(255,255,255,.12));
  box-shadow: var(--vxl-shadow-2, 0 10px 30px rgba(0,0,0,.45));
}
.vxc-subhint {
  font-size: .75rem;
  color: var(--vxl-ink-faint, rgba(255,255,255,.55));
  margin-block-end: 8px;
}
.vxc-sublink {
  display: block;
  inline-size: 100%;
  text-align: start;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--vxl-radius-sm, 8px);
  background: transparent;
  color: inherit;
  font-size: .8125rem;
  cursor: pointer;
}
.vxc-sublink:hover { background: var(--vxl-surface-2, rgba(255,255,255,.08)); text-decoration: none; color: inherit; }

/* ---- layout: navigator beside the list -------------------------------------
   The list is the content and gets the room; the navigator is a fixed, narrow
   rail that stays put while the list scrolls. Below the desktop breakpoint the
   rail is removed entirely — see the note at .vxc-rail. */

.vxc-body {
  display: grid;
  grid-template-columns: 17rem minmax(0, 1fr);
  gap: var(--vxl-space-6, 24px);
  align-items: start;
}

.vxc-rail { position: sticky; inset-block-start: var(--vxl-space-4, 16px); }

.vxc-main { min-width: 0; }

/* ---- the navigator ---------------------------------------------------------
   A month at reading size, not editing size. The admin grid uses 136px cells
   because titles are dragged into them; nothing is dragged here, so a cell only
   has to carry a date and a hint that something is on. At 2.25rem the whole
   month is about a third of the height the full grid needed, which is what
   lets it sit beside the list instead of on top of it. */

.vxc-mini {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  padding: var(--vxl-space-3, 12px);
  border: 1px solid var(--vxl-line, rgba(255,255,255,.12));
  border-radius: var(--vxl-radius-lg, 16px);
  background: var(--vxl-surface-1, rgba(255,255,255,.04));
}

.vxc-mini-dow {
  text-align: center;
  font-size: .625rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--vxl-ink-faint, rgba(255,255,255,.55));
  padding-block-end: 4px;
  user-select: none;
}

.vxc-mini-day {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  block-size: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: var(--vxl-radius-sm, 8px);
  background: transparent;
  color: inherit;
  cursor: default;
  transition: background-color var(--vxl-dur-1, .15s) var(--vxl-ease, ease);
}

/* Only a day with something on it is worth clicking. An empty cell that
   highlights on hover promises a destination it does not have.
   Enforced with `disabled` on the button rather than `cursor: default`,
   because the theme sets `cursor: pointer` on every button and a cursor rule
   is a cosmetic fix for something that should genuinely not be actionable —
   this way assistive tech skips the cell too. */
.vxc-mini-day:disabled { cursor: default; }
.vxc-mini-day:not(:disabled) { cursor: pointer; }
.vxc-mini-day:not(:disabled):hover { background: var(--vxl-surface-2, rgba(255,255,255,.08)); }

.vxc-mini-day.is-out { opacity: .38; }
.vxc-mini-day.is-sel { background: var(--vxl-surface-3, rgba(255,255,255,.14)); }

/* Every day gets the same round box, whether or not it is today — today just
   fills it in. Sizing the circle only on `.is-today` made a 20px pill around
   12px digits, so "16" all but touched the edge, and it shifted the digit off
   the baseline its neighbours sat on. 1.5rem leaves even space around two
   tabular digits and still clears the 2.25rem cell with the dot row. */
.vxc-mini-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  border-radius: 999px;
  font-size: .75rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.vxc-mini-day.has-items .vxc-mini-num { font-weight: 600; }

.vxc-mini-day.is-today .vxc-mini-num {
  background: var(--vod-primary, #e50914);
  color: #fff;
  font-weight: 600;
}

/* Reserved whether or not there are dots, so rows never shift height. */
.vxc-mini-dots {
  display: flex;
  gap: 2px;
  block-size: 4px;
  align-items: center;
}

.vxc-dot {
  inline-size: 4px;
  block-size: 4px;
  border-radius: 999px;
  background: var(--vxc-release);
  flex: none;
}
.vxc-dot.is-pin { background: var(--vxc-pin); }
.vxc-dot.is-live { background: var(--vxc-live); }
.vxc-dot.is-personal { background: var(--vxc-personal); }

/* The dots say "something is on" but not what, so the key has to be visible —
   it is the one thing the list beside it cannot supply at a glance. */
.vxc-legend {
  list-style: none;
  margin: var(--vxl-space-3, 12px) 0 0;
  padding: 0 var(--vxl-space-1, 4px);
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: .75rem;
  color: var(--vxl-ink-faint, rgba(255,255,255,.55));
}
.vxc-legend li { display: flex; align-items: center; gap: 8px; }

/* ---- list ------------------------------------------------------------------ */

.vxc-list { display: flex; flex-direction: column; gap: var(--vxl-space-5, 20px); }

.vxc-listday { scroll-margin-block-start: var(--vxl-space-4, 16px); border-radius: var(--vxl-radius-md, 12px); }

/* Brief emphasis after the navigator jumps here, so the eye lands. */
.vxc-listday.is-sel > .vxc-listday-h { color: var(--vod-primary, #e50914); }

.vxc .vxc-listday-h {
  line-height: 1.3;
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: .9375rem;
  font-weight: 600;
  margin-block-end: 8px;
  padding-block-end: 6px;
  border-block-end: 1px solid var(--vxl-line, rgba(255,255,255,.12));
}
.vxc-listday-today {
  font-size: .6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--vod-primary, #e50914);
}

.vxc-row {
  display: flex;
  align-items: center;
  gap: var(--vxc-gap);
  padding: 8px;
  border-radius: var(--vxl-radius-md, 12px);
  transition: background-color var(--vxl-dur-1, .15s) var(--vxl-ease, ease);
}
.vxc-row:hover { background: var(--vxl-surface-1, rgba(255,255,255,.06)); }

.vxc-row-art {
  position: relative;
  flex: none;
  inline-size: 7.5rem;
  aspect-ratio: 16 / 9;
  border-radius: var(--vxl-radius-sm, 8px);
  overflow: hidden;
  background: var(--vxl-surface-2, rgba(255,255,255,.08));
}
.vxc-row-art img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }

.vxc-livepip {
  position: absolute;
  inset-block-start: 6px;
  inset-inline-start: 6px;
  inline-size: 8px;
  block-size: 8px;
  border-radius: 999px;
  background: var(--vxc-live);
  box-shadow: 0 0 0 2px rgba(0,0,0,.4);
}
@media (prefers-reduced-motion: no-preference) {
  .vxc-livepip { animation: vxc-pulse 1.8s ease-in-out infinite; }
}
@keyframes vxc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.vxc-row-body { min-width: 0; flex: 1; }
.vxc-row-top { display: flex; align-items: center; gap: 8px; margin-block-end: 2px; }

.vxc-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: .625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.vxc-badge.is-live      { background: var(--vxc-live); color: #1a0508; }
.vxc-badge.is-live-soon { background: color-mix(in srgb, var(--vxc-live) 22%, transparent); color: var(--vxc-live); }
.vxc-badge.is-soon      { background: color-mix(in srgb, var(--vxc-release) 22%, transparent); color: var(--vxc-release); }
.vxc-badge.is-new       { background: color-mix(in srgb, var(--vxc-personal) 22%, transparent); color: var(--vxc-personal); }

.vxc-row-time {
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
  color: var(--vxl-ink-faint, rgba(255,255,255,.55));
}

.vxc-row-title {
  display: block;
  font-size: .9375rem;
  font-weight: 500;
  color: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vxc-row-title:hover { color: inherit; text-decoration: underline; }

.vxc-row-sub {
  margin: 2px 0 0;
  font-size: .8125rem;
  color: var(--vxl-ink-faint, rgba(255,255,255,.55));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vxc-row-actions { display: flex; align-items: center; gap: 8px; flex: none; }

.vxc-bell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 36px;
  block-size: 36px;
  border-radius: 999px;
  border: 1px solid var(--vxl-line, rgba(255,255,255,.12));
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background-color var(--vxl-dur-1, .15s) var(--vxl-ease, ease),
              color var(--vxl-dur-1, .15s) var(--vxl-ease, ease);
}
.vxc-bell:hover { background: var(--vxl-surface-2, rgba(255,255,255,.08)); }
.vxc-bell.is-on {
  background: var(--vod-primary, #e50914);
  border-color: transparent;
  color: #fff;
}

.vxc-play {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-block-size: 36px;
  padding-inline: 14px;
  border-radius: 999px;
  background: var(--vxl-surface-3, rgba(255,255,255,.14));
  color: inherit;
  font-size: .8125rem;
  font-weight: 500;
}
.vxc-play:hover { background: var(--vxl-surface-2, rgba(255,255,255,.08)); color: inherit; text-decoration: none; }

.vxc-count { font-variant-numeric: tabular-nums; }

/* ---- empty / loading ------------------------------------------------------- */

.vxc-empty, .vxc-loading {
  padding: var(--vxl-space-8, 64px) var(--vxl-space-4, 16px);
  text-align: center;
  color: var(--vxl-ink-faint, rgba(255,255,255,.55));
}
.vxc-empty-title { font-size: 1rem; font-weight: 600; color: var(--vxl-ink, #fff); margin-block-end: 4px; }
.vxc-empty-sub { font-size: .875rem; margin: 0; }

/* ---- phones ---------------------------------------------------------------
   The navigator is removed rather than stacked. The list already groups under
   day headings, so a month above it repeats what is directly below; and the
   ‹ Today › header covers moving between months. Pure list is the whole
   screen doing one job. */

@media (max-width: 991.98px) {
  .vxc-body { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .vxc-rail { display: none; }

  /* The month is the page's one orienting label, and on a 390px screen it
     loses a fight for the row with three controls — "September 2026" came
     out as "September 2…". So it takes its own line above them rather than
     being abbreviated. */
  .vxc-head { gap: 8px; align-items: center; }
  .vxc .vxc-title { order: 1; font-size: 1.375rem; margin-inline-start: 0; }
  .vxc-sub   { order: 2; margin-inline-start: auto; }
  .vxc-nav   { order: 3; flex-basis: 100%; }

  .vxc-row-art { inline-size: 5.5rem; }
  .vxc-row-actions .vxc-play span { display: none; }
  .vxc-play { padding-inline: 10px; }
}