/* ═══ THE BOOKING CALENDAR — ONE LOOK, BY THE MONTH OR BY THE WEEK (owner, 2026-11-03) ════════════════════════════════════════
   Owner: "the calendar design could be better. I like the tokanized schduling page design, maybe copy that? Maybe allow weekly
   view or monthly view and default to monthly." booking-calendar.js draws it; this is how it looks — the emailed page's calendar
   (cx-flow-appointments), moved here from its styles.css so the portal's two calendars wear it too.
   ⚠⚠ ONE FILE, TWO SITES: cx-portal/booking-calendar.css and cx-flow-appointments/booking-calendar.css are byte-identical
   (booking-calendar.test.js). Each page's own variables are read (--primary, --border-color, --text-main …), with the emailed
   page's colors behind them; the portal's dark theme (html.theme-dark) has its own lines at the end.
   Everything is under .bcal, so the portal's other calendar (Book Appointment's .date-cell) never mixes with it. */

/* The calendar is its own measuring stick (cqi): the title and the words in the squares grow a little on a wide calendar and
   never past what a phone's seventh of the width can hold. */
.bcal {
  container-type: inline-size;
  width: 100%;
  min-width: 0;
  color: var(--text-main, #0f172a);
}

/* ── Month | Week: two buttons in one pill, the one on show in brand green (aria-pressed) ── */
.bcal-bar {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 12px;
}
.bcal-views {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 12px;
  background: var(--bg-alt, #f8fafc);
}
.bcal-view {
  min-width: 84px;
  min-height: 44px;
  margin: 0;
  padding: 0 16px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text-muted, #334155);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.bcal-view:hover { color: var(--text-main, #0f172a); }
.bcal-view[aria-pressed="true"],
.bcal-view[aria-pressed="true"]:hover {
  background: var(--primary, #156407);
  color: #ffffff;
}

/* ── the month (or the week) and its arrows ── */
.bcal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 14px;
}
.bcal-title {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  font-size: 18px;
  font-size: clamp(15px, 6cqi, 18px);
  font-weight: 800;
  line-height: 1.25;
  color: var(--accent, #0f172a);
  overflow-wrap: anywhere;
}
.bcal-nav {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 10px;
  background: var(--bg-alt, #f8fafc);
  color: var(--accent, #0f172a);
  font: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.bcal-nav svg { width: 20px; height: 20px; }
.bcal-nav:hover:not(:disabled) {
  border-color: var(--primary, #156407);
  color: var(--primary-text, #166308);
}
.bcal-nav:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.bcal-view:focus-visible,
.bcal-nav:focus-visible {
  outline: 3px solid var(--primary, #156407);
  outline-offset: 2px;
}

/* ⚠⚠ `minmax(0, 1fr)`, NEVER `1fr` — `1fr` is `minmax(auto, 1fr)`, so a column's floor is its square's MIN-CONTENT, and one
   "CLOSED" (or, once, a holiday's name) sized all seven columns to itself and pushed the calendar past a phone's edge (318px of
   room became 444px; "Martin Luther King Jr. Day" made it 1120px). The same rule in Month and in Week, at every width.
   ⚠ No gap between the columns: the space between two squares is their own transparent edge (below), so a tap that lands
   between two days still lands on one of them. */
.bcal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0;
  text-align: center;
}
.bcal-dow { margin: 0 0 6px; }
.bcal-dow-name {
  min-width: 0;
  overflow: hidden;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-muted, #334155);
}

/* ═══ A DAY ════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   ⚠⚠ A COLUMN: the number, and one short word UNDER it. As a centred row the two rendered jammed together ("13CLOSED") and the
   square's min-content was their SUM; stacked it is the larger of the two. `min-width: 0` + `overflow: hidden` are the other
   half — the grid reads the SQUARE's own minimum, so capping the word alone does nothing.
   ⚠ `min-height`, never `aspect-ratio`: a square can't hold two rows in a ~40px column, and the ratio turned a width blow-out
   into a height one.
   ⚠⚠ THE WHOLE COLUMN IS THE BUTTON. The 3px transparent border is part of what can be tapped and is the space between two
   squares; the square you see is drawn inside it — its 2px edge and (today, a members-only day) its inner ring are inset
   shadows, and its fill stops at the edge (background-clip). A phone's seventh of the width is about 40px; the gaps no longer
   take any of it. The edge is VISIBLE on a day that can be booked too: the owner, "the days that are available on the booking
   calendar … should have a border around it too". */
.bcal .cal-date-cell {
  --bcal-edge: var(--border-color, #e2e8f0);
  --bcal-ring: transparent;
  box-sizing: border-box;
  position: relative;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 3px;
  margin: 0;
  padding: 7px 0 6px;
  min-height: 58px;
  border: 3px solid transparent;
  border-radius: 13px;
  background-color: transparent;
  background-clip: padding-box;
  box-shadow: inset 0 0 0 2px var(--bcal-edge), inset 0 0 0 3.5px var(--bcal-ring);
  color: var(--text-main, #0f172a);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}
.bcal .cal-cell-num {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}
.bcal .cal-date-cell:focus-visible {
  outline: 3px solid var(--primary, #156407);
  outline-offset: -1px;
}
/* ⚠ Not on the picked day: a hover (or the hover a tap leaves behind on a phone) would repaint its green to near-white under
   its white number. */
.bcal .cal-date-cell:hover:not(:disabled):not(.selected) {
  --bcal-edge: var(--primary, #156407);
  background-color: var(--bg-alt, #f8fafc);
}
.bcal .cal-date-cell.selected {
  --bcal-edge: var(--primary, #156407);
  background-color: var(--primary, #156407);
  color: #ffffff;
}
/* Can't be booked: past, too soon, Sundays, after the last day. */
.bcal .cal-date-cell.disabled {
  color: #cbd5e1;
  background-color: #f1f5f9;
  cursor: not-allowed;
}
/* ⚠ NO STRIKE-THROUGH: the owner, "instead of crossed out for full days, i want it to say FULL like the cx-portal". A struck
   number is ambiguous at a glance (unavailable? cancelled? past?); the word is not. */
.bcal .cal-date-cell.fully-booked {
  color: #a3a3a3;
  background-color: #f1f5f9;
  cursor: not-allowed;
  text-decoration: none;
}
/* ⚠⚠ A CLOSED DAY IS NOT A SOLD-OUT ONE, AND MUST NOT LOOK LIKE IT: the word AND the color — amber "Closed" against grey
   "Full" — at every width (on a narrow phone the word may be cut short; the tint is not). `text-decoration: none` stays
   explicit, the guard against a strike leaking in from a full day. */
.bcal .cal-date-cell.closed-day {
  color: #8a6100;
  background-color: #fdf6e7;
  cursor: not-allowed;
  text-decoration: none;
}
/* ⚠⚠ ONE SHORT WORD PER SQUARE — "Closed" / "Full" / "Today" — AND NEVER A HOLIDAY'S NAME (that is on the title and in the
   label). The square is ~40px on a phone; "CLOSED" fits at 7.5px, and on a wider calendar the word grows to 10px. */
.bcal .cal-cell-tag {
  display: block;
  max-width: 100%;
  padding: 0 1px;
  font-size: 7.5px;
  font-size: clamp(7.5px, 2.4cqi, 10px);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
  color: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bcal .cal-date-cell .cal-closed-tag { color: #8a6100; }
/* 2026-11-11 — a tap, hover or focus on a closed day says what it's closed for, under the days (booking-calendar.js sayClosed) */
.bcal .cal-date-cell.closed-day { cursor: help; }
.bcal .bcal-closed-note { margin: 10px 2px 0; padding: 9px 12px; border-radius: 10px; background: #fdf6e7; color: #6b4b00;
  border: 1px solid #f3dfb0; font-size: 14px; font-weight: 600; line-height: 1.4; }
.bcal .bcal-closed-note[hidden] { display: none; }
html.theme-dark .bcal .bcal-closed-note { background: rgba(251, 191, 36, 0.12); color: #fcd34d; border-color: rgba(251, 191, 36, 0.35); }
/* ❄ snow in the forecast near you — the ❄ takes a bookable day's word, a little larger so it reads as a mark, in the info
   blue; white on a picked day's green. */
.bcal .cal-date-cell .cal-snow-tag {
  font-size: 12px;
  line-height: 1;
  text-transform: none;
  color: var(--info-text, var(--status-info-text, #1d4ed8));
}
.bcal .cal-date-cell.selected .cal-snow-tag { color: #ffffff; }
.bcal .cal-date-cell.today .cal-cell-tag { color: var(--text-muted, #334155); }
/* The blank squares before the 1st: no height, no edge — a boxed blank reads as a day that exists and can't be booked. */
.bcal .cal-date-cell.empty {
  min-height: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
  background-color: transparent;
  cursor: default;
}
/* Today: a neutral ring inside the edge, so today is plain to see even when it is too soon to book (and greyed). */
.bcal .cal-date-cell.today {
  --bcal-ring: var(--text-muted, #334155);
  font-weight: 800;
}
/* A day a member could book but a non-member can't yet (the 24–48 hour band): a gold ring and a gold dot; a tap explains. */
.bcal .cal-date-cell.member-only {
  --bcal-ring: #c1971f;
  cursor: pointer;
}
.bcal .cal-date-cell.member-only::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #c1971f;
}
.bcal .cal-date-cell.member-only:hover { background-color: rgba(193, 151, 31, 0.12); }

/* ── the portal's dark theme (cx-portal: app.js puts html.theme-dark on); the emailed page never has it ── */
html.theme-dark .bcal .cal-date-cell.disabled { color: #475569; background-color: #0f172a; }
html.theme-dark .bcal .cal-date-cell.fully-booked { color: #7c8a9c; background-color: #0f172a; }
html.theme-dark .bcal .cal-date-cell.closed-day { color: #fcd34d; background-color: rgba(251, 191, 36, 0.12); }
html.theme-dark .bcal .cal-date-cell .cal-closed-tag { color: #fcd34d; }
html.theme-dark .bcal .cal-date-cell .cal-snow-tag { color: #93c5fd; }
html.theme-dark .bcal .cal-date-cell.selected .cal-snow-tag { color: #ffffff; }
html.theme-dark .bcal .cal-date-cell.member-only:hover { background-color: rgba(193, 151, 31, 0.2); }

/* ── the portal's Larger / Largest text (text-size.js zooms the page) on a phone: a word that could only be cut off goes — the
   colors say closed or full, the ring says today, and every day's label still says it in words. The ❄ stays. ── */
@media (max-width: 720px) {
  html.sc-text-lg .bcal .cal-cell-tag:not(.cal-snow-tag),
  html.sc-text-xl .bcal .cal-cell-tag:not(.cal-snow-tag) { display: none; }
  html.sc-text-lg .bcal-dow-name,
  html.sc-text-xl .bcal-dow-name { font-size: 12px; }
}