/* ===== Root tokens (global) ===== */
/* Theme color variables (--bg, --ink, --brand, etc.) are set by global-theme.js */
/* DO NOT define them here - they need to be overridable by the theme system */
:root{
  /* Non-color design tokens only */
  --chip:#f5f7fb; --chip-border:#ccd7ee;
  --row-h: 40px;
  --grid-color:#eff2f7;
  --ui-gap: 16px;
  --ui-border: #e5e7eb;

  /* scalable sizing tokens */
  --tap: 40px;            /* base minimum touch target */
  --thumb: 16px;          /* slider thumb base */
  --row-h: 40px;          /* you already use this for timeline */

  /* typography scales */
  --fs-0: 12px; --fs-1: 14px; --fs-2: 16px; --fs-3: 18px;
}
/* Ensure the timeline is its own paint layer and isn't dimmed by parents */
.timeline, .day-timeline {
  position: relative;
  isolation: isolate;            /* prevents ancestor blend/opacity side-effects */
  opacity: 1 !important;
  filter: none !important;
}
/* Vertical spacing between Times card */
/* CONFLICT #2 - COMMENTED OUT: Duplicate #timesCard rule, conflicts with fixed positioning in desktop/mobile */
/* #timesCard { margin-top: var(--ui-gap); } */
/* #timesCard, #TimesCard { margin-top: var(--ui-gap); } */


/* (Optional) generic stack spacing if you also use a .right wrapper */
.right .card + .card { margin-top: var(--ui-gap); }

/* Single overlay shimmer for entire month grid */
/* Month grid = fixed 6 rows (42 cells) */
/* Month grid: 7 columns; each cell has a fixed row height. Container animates height. */
/* CONFLICT #1 - COMMENTED OUT: Desktop-specific .cal grid layout conflicts with mobile media queries */
/* Desktop has its own more-specific #monthCard .cal definition at line ~14898 */
/* Mobile media queries must use !important to override this, causing cascade issues */
/*
.cal{
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: var(--month-cell-h, 92px);
  transition: height 150ms ease;
}
*/


/* Day cell shell */
.cal .day .inner { padding: 6px 8px; }

/* Outside-month cells are lightly greyed, and their numbers are hidden */
.cal .day.muted { background: #f8fafc; opacity: 0.8; }
 .cal .day .num { 
   font-weight: 600;
   visibility: hidden;        /* default: hidden to avoid flash */
 }
 .cal .day.inmonth .num {     /* only in-month cells reveal the number */
   visibility: visible;
 }


/* touch-centric defaults */


/* mouse-centric defaults */
@media (hover: hover) and (pointer: fine){
  :root{
    --tap: 36px;
    --thumb: 16px;
    --row-h: 38px;
  }
}

/* REMOVED - Desktop base layout moved into @media (min-width: 1280px) media query below */




/* increase clickable areas to --tap on touch devices */


/* mouse devices keep hover affordances */
@media (hover: hover) and (pointer: fine){
  .time:hover{ transform: translateY(-1px); }
}

/* REMOVED - Desktop .times grid layout moved into @media (min-width: 1280px) media query below */

/* tablet */


/* phone landscape */


/* phone portrait */


/* ultra narrow */


.chip:focus-visible, .btn:focus-visible, .time:focus-visible, select:focus-visible{
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; animation: none !important; }
}


/* ===== Per-service themes (scoped by class on #ssm) ===== */
.ssm-wrap.type-studioA{
  --brand:#7e3af2;
  --brand2:#f3e8ff;
  --chip-active:#7e3af2;
  --chip-active-bg:#f3e8ff;
  --brand-border: rgba(126,58,242,.22);
  --accent-track:#e8d5ff;
  --accent-handle:#7e3af2;
}
.ssm-wrap.type-rehearsal{
  --brand:#16a34a;
  --brand2:#e8f8ef;
  --chip-active:#16a34a;
  --chip-active-bg:#e9f7ef;
  --brand-border: rgba(22,163,74,.22);
  --accent-track:#d6f5e2;
  --accent-handle:#16a34a;
}
.ssm-wrap.type-jam{
  --brand:#ec4899;
  --brand2:#fce7f3;
  --chip-active:#ec4899;
  --chip-active-bg:#fce7f3;
  --brand-border: rgba(236,72,153,.22);
  --accent-track:#fbcfe8;
  --accent-handle:#ec4899;
}
.ssm-wrap.type-practice{
  --brand:#991b1b;           /* Blood red (darker) */
  --brand2:#fef2f2;          /* Very light red background */
  --chip-active:#991b1b;     /* Blood red for active chips */
  --chip-active-bg:#fee2e2;  /* Light red chip backgrounds */
  --brand-border: rgba(153,27,27,.22); /* Semi-transparent blood red borders */
  --accent-track:#fca5a5;    /* Light red slider track */
  --accent-handle:#991b1b;   /* Blood red slider thumb */
}
.ssm-wrap.type-studioAB{
  /* mid blend for places that can’t do gradients (borders/outlines) */
  --brand:#2fa76f;
  --brand2:#eef4ff;               /* overridden on blocks by gradient */
  --chip-active:#2fa76f;
  --chip-active-bg:#eef7f1;
  --brand-border: rgba(47,167,111,.22);
  --accent-track:linear-gradient(90deg, #f3e8ff 0%, #e9f7ef 100%);
  --accent-handle:linear-gradient(90deg, #7e3af2 0%, #16a34a 100%);
}

/* REMOVED - Desktop base layout (grid/max-width) moved into @media (min-width: 1280px) media query below */
/* CONFLICT #3 - FIXED: Changed margin:0 auto → margin:0 (all media queries override the auto centering) */
.ssm-wrap{ font:14px/1.35 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; color:var(--ink,#111); margin:0; }
.card{ position:relative; background:var(--bg,#fff); border:1px solid var(--line,#e3e6ec); border-radius:12px; padding:14px; overflow: visible; /* v106.32: Allow submenus to extend beyond panel */ }
/* MOVED #monthCard min-height to desktop media query below (line ~14900) */

/* Desktop: No page scroll - everything is fixed positioned */
@media (min-width: 1280px) {
  /* ADJUSTABLE POSITIONING - Modify these in dev tools to get it right! */
  :root {
    /* Month card positioning & sizing */
    /* Note: --month-card-top is controlled by Squarespace footer.html injection (16px) */
    --month-card-bottom: calc(50vh + 16px); /* 16px above week card top */
    --month-card-width: 416px;       /* Fixed width (from log computed) */
    --month-card-max-width: 35vw;    /* Responsive max width */

  }

  html, body {
    overflow: hidden; /* Prevent page scroll on desktop */
    height: 100vh;
    margin: 0;
    padding: 0; /* Ensure no inherited padding pushes content down */
  }

  /* Grid container - left edge at 0, right edge at 416px from viewport right */
  .ssm-wrap {
    max-width: none; /* Remove centered constraint */
    margin: 0; /* Remove auto centering */
    width: calc(100vw - 416px); /* Full width minus month calendar */
    position: fixed;
    left: 0;
    top: 0; /* Will be adjusted by updateMonthCardHeight() JS to account for header */
    bottom: 50vh; /* Above week calendar which is at bottom 50vh */
    display: flex;
    align-items: center; /* Vertically center the grid within available space */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Expand ssm-wrap to full viewport when calendar is hidden */
  body.calendar-hidden .ssm-wrap {
    width: 100vw;
    height: 100vh;
    top: 0;
    bottom: 0;
    right: 0;
    align-items: flex-start; /* Override center alignment - align to top */
  }

  /* Grid fills the container width - 5 equal columns for desktop */
  .grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5 equal columns */
    gap: 18px;
  }

  /* Desktop-only: Times card 4-column grid layout */
  .times {
    grid-template-columns: repeat(4, minmax(130px,1fr));
  }

  /* Desktop-only: Week grid 7 columns Sun→Sat. JS widens the ACTIVE weekday's track. */
  .weekgrid {
    display:grid;
    grid-template-columns: repeat(7, minmax(120px, 1fr)); /* default; JS will override */
    gap: 10px;
    transition: grid-template-columns 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative; /* Positioning context for navigation arrows */
    overflow: visible;  /* Explicit: let parent (#weekCard) handle clipping boundary */
  }

  /* Filters card - centered in columns 2-4 */
  .grid > .card:first-child {
    grid-column: 2 / 5; /* span columns 2-4 (middle 3) */
    align-self: center; /* center vertically */
    overflow-y: auto; /* Allow scrolling if content is too tall */
    max-height: calc(100vh - 96px); /* Full height minus header and margins */
  }

  /* Month calendar - positioned at top right, 16px shorter than width */
  #monthCard {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    width: var(--month-card-width, 416px) !important;
    height: 400px !important; /* 16px shorter than width (416 - 16) */
    min-height: 0 !important; /* Override global min-height */
    z-index: 999999; /* Above header */
    background: #fff;
    padding: 12px !important;
    margin: 0 0 16px 0 !important; /* 16px bottom margin */
    border: 1px solid var(--line, #e3e6ec) !important;
    border-radius: 12px !important;
    box-shadow: -4px 0 12px rgba(0,0,0,0.1);
    overflow: visible; /* Let month arrows extend outside */
    display: flex;
    flex-direction: column;
  }

  /* Month title bar - fixed height */
  #monthCard .monthbar {
    flex-shrink: 0;
    height: 56px; /* Fixed height for title bar */
  }

  /* Calendar header (day names) - fixed height */
  #monthCard .cal-head {
    flex-shrink: 0;
    height: 32px; /* Fixed height */
    margin-bottom: 4px;
  }

  /* Month card min-height (moved from base CSS) */
  #monthCard {
    min-height: 420px;
  }

  /* Month calendar grid - FIXED height, adapts cells for 4-6 weeks */
  #monthCard .cal {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(var(--month-rows, 6), var(--month-cell-height, 44px));
    gap: 4px; /* Same spacing for rows AND columns */
    height: 288px; /* Fixed: 400 - 24 padding - 56 monthbar - 32 cal-head = 288px */
    align-content: start; /* Align to top if cells don't fill */
  }

  /* Timeslots card - positioned below month card with 16px gap */
  #timesCard {
    position: fixed !important;
    top: calc(var(--month-card-height, 400px) + 24px) !important; /* Below month + 16px gap */
    right: 0 !important;
    bottom: calc(var(--week-card-height, 50vh) + 10px); /* Fallback, overridden by JS */
    width: var(--month-card-width, 416px) !important;
    z-index: 999998; /* Below month, above week */
    background: #fff;
    padding: 12px !important;
    margin: 0 !important;
    border: 1px solid var(--line, #e3e6ec) !important;
    border-radius: 12px !important;
    box-shadow: -4px 0 12px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Contain timeslots grid */
  }

  /* Allow hover ghosts to extend outside timeslots card on hover */
  #timesCard:hover {
    overflow: visible !important;
  }

  /* Timeslots grid - 3 columns, rows scale between 32-64px */
  #timesCard .times {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    grid-auto-rows: minmax(32px, 64px) !important; /* Min 32px, max 64px per row */
    gap: 8px !important; /* Uniform spacing between slots */
    flex: 1 !important; /* Expand to fill timesCard */
    align-content: start !important; /* Align to top, no stretching */
    overflow: hidden !important; /* Never allow overflow */
    padding: 0 !important; /* No padding - card padding provides inset */
    margin: 0 !important; /* No margin */
  }

  /* Time slot buttons - fill grid cell */
  #timesCard .time {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    padding: 8px 6px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-height: 32px !important; /* Match grid min */
    max-height: 64px !important; /* Match grid max */
    height: 100% !important; /* Fill grid cell */
    box-sizing: border-box !important;
  }

  /* Position Book Now button between timeslots and week calendar */
  #continue.cta-float {
    position: fixed !important;
    bottom: calc(var(--week-card-height, 50vh) + 10px); /* Fallback, overridden by JS */
    right: calc(var(--month-card-width, 416px) + 36px); /* 36px left of month */
    z-index: 2000 !important; /* Above all cards */
    white-space: nowrap !important;
  }

  /* Hide in-card button container */
  #timesCard .cta-row {
    display: none !important;
  }

  /* === Previously orphaned CSS - now properly inside media query === */

  /* Remove padding-bottom from last child of month card */
  #monthCard > *:last-child {
    padding-bottom: 0px;
    margin-top: 0px;
  }

  /* CTA row and error message should not flex */
  #monthCard .cta-row,
  #monthCard .error {
    flex-shrink: 0;
  }

  /* Day cells fill grid cells defined by grid-template-rows/columns */
  #monthCard .day {
    width: 100%; /* Fill grid cell width */
    height: 100%; /* Fill grid cell height */
    min-width: 0; /* Allow shrinking */
    min-height: 0; /* Allow shrinking */
    padding: 4px; /* Smaller padding */
    font-size: 0.8rem; /* Smaller font for compact view */
    box-sizing: border-box;
  }

  /* Calendar header row */
  #monthCard .cal-head {
    gap: 4px;
    margin-bottom: 4px;
  }

  /* ========== MONTH NAVIGATION BUTTONS (DESKTOP ONLY) ========== */

  /* Base styling for both month navigation buttons */
  #prevMth,
  #nextMth {
    position: absolute;
    top: 4px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    font-size: 20px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--bg, #fff);
    cursor: pointer;
    z-index: 100; /* Above month card content */
    pointer-events: auto; /* Ensure clickable even if parent has pointer-events: none */
    transition: width 0.25s ease, border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease, border-radius 0.25s ease;
    overflow: visible;
    white-space: nowrap;
    padding: 0; /* Reset padding, will be set per button */
  }

  /* Left arrow button - expands to RIGHT */
  #prevMth {
    left: -8px;
    justify-content: flex-start;
    padding-left: 14px; /* Centers arrow in 48px button (14px + 20px icon + 14px = 48px) */
    transform-origin: left center; /* Expand from left */
  }

  /* Right arrow button - expands to LEFT */
  #nextMth {
    right: -8px;
    justify-content: flex-end;
    padding-right: 14px; /* Centers arrow in 48px button (14px + 20px icon + 14px = 48px) */
    transform-origin: right center; /* Expand from right */
  }

  /* Shimmer overlay - ::before for all buttons */
  #prevMth::before,
  #nextMth::before {
    content: "";
    position: absolute;
    inset: 0;
    left: -150%;
    width: 60%;
    height: 100%;
    background: linear-gradient(120deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,0.35) 100%);
    transform: skewX(-25deg);
    opacity: 0;
    pointer-events: none;
    z-index: 2;
  }

  /* Text labels - ::after for all buttons */
  #prevMth::after,
  #nextMth::after {
    content: attr(data-month-label);
    position: absolute;
    font-size: 13px;
    font-weight: 600;
    color: var(--brand);
    pointer-events: none;
    white-space: nowrap;
    top: 50%;
    transform: translateY(-50%);
    visibility: hidden;
    z-index: 1;
    text-align: center;
  }

  /* Left arrow: text centered in space between arrow and right edge */
  /* Arrow at 14px, ends ~34px, gap 14px = text from 48px to 78px (14px right padding) */
  #prevMth::after {
    left: 48px;
    right: 14px;
  }

  /* Right arrow: text centered in space between left edge and arrow */
  /* Arrow at 78px, starts ~58px, gap 14px = text from 14px to 44px */
  #nextMth::after {
    left: 14px;
    right: 48px;
  }

  /* HOVER STATE - enabled buttons only */
  #prevMth:hover:not([disabled]),
  #nextMth:hover:not([disabled]) {
    width: 92px;
    border-radius: 24px; /* Pill shape when expanded */
    border-color: var(--brand);
    background: var(--brand2);
    box-shadow: 0 0 24px var(--brand-glow, rgba(30, 102, 245, 0.4)),
                0 4px 12px rgba(0,0,0,0.15);
    opacity: 1 !important; /* Stay fully opaque on hover */
  }

  /* Show text on hover */
  #prevMth:hover:not([disabled])::after,
  #nextMth:hover:not([disabled])::after {
    visibility: visible;
  }

  /* Animate shimmer on hover */
  #prevMth:hover:not([disabled])::before,
  #nextMth:hover:not([disabled])::before {
    opacity: 1;
    animation: cta-shimmer 2s linear infinite;
  }

  /* Active state */
  #prevMth:active:not([disabled]),
  #nextMth:active:not([disabled]) {
    transform: scale(0.98);
  }

  /* DISABLED STATE - completely hidden */
  #prevMth[disabled],
  #nextMth[disabled] {
    display: none !important; /* Completely hide disabled arrows */
  }

  /* ========== TYPE-SPECIFIC GLOW COLORS ========== */

  /* Studio A - Purple glow */
  .ssm-wrap.type-studioA #prevMth:hover:not([disabled]),
  .ssm-wrap.type-studioA #nextMth:hover:not([disabled]) {
    --brand-glow: rgba(126, 58, 242, 0.5);
  }

  /* Rehearsal / Studio B - Green glow */
  .ssm-wrap.type-rehearsal #prevMth:hover:not([disabled]),
  .ssm-wrap.type-rehearsal #nextMth:hover:not([disabled]) {
    --brand-glow: rgba(22, 163, 74, 0.5);
  }

  /* Studio A+B - Gradient glow effect (teal blend) */
  .ssm-wrap.type-studioAB #prevMth:hover:not([disabled]),
  .ssm-wrap.type-studioAB #nextMth:hover:not([disabled]) {
    --brand-glow: rgba(47, 167, 111, 0.5);
    box-shadow: 0 0 24px rgba(126, 58, 242, 0.3),
                0 0 24px rgba(22, 163, 74, 0.3),
                0 4px 12px rgba(0,0,0,0.15);
  }

  /* ========== CTA ROW (DESKTOP ONLY) ========== */

  .cta-row {
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: flex-end; /* pushes button to the right */
    gap: 12px;
  }

  .cta-row #fitHint {
    margin-right: auto; /* hint on the left, button on the right */
  }

  /* ========== ALL WEEK CSS (DESKTOP ONLY) ========== */

  /* ===== Week (full-width, desktop only) ===== */

  /* Hide week on tablet/phone per spec */

  /* Make weekbar not affect layout but keep it in DOM so children render */
  .weekbar{
    height: 0;
    overflow: visible;
    pointer-events: none;
  }

  .week-title{
    display: none;
  }

  /* Round navigation arrows - positioned relative to weekgrid */
  .btn.week-nav{
    position: fixed; /* Fixed positioning to avoid affecting layout */
    width: 48px;
    height: 48px;
    border-radius: 50%; /* Start as circle, transition to pill on hover */
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    font-size: 20px;
    cursor: pointer;
    transition: width 0.25s ease, border-radius 0.25s ease, border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
    color: #374151;
    z-index: 10000; /* Very high to ensure visibility */
    pointer-events: auto; /* Re-enable clicks since parent has pointer-events: none */
    white-space: nowrap;
    overflow: visible; /* Allow text to extend outside */
    /* Position will be set by JavaScript */
  }

  /* ========== WEEK NAVIGATION BUTTONS - REBUILT ========== */

  /* Left arrow button - expands to RIGHT */
  #prevWeek {
    justify-content: flex-start;
    padding-left: 14px; /* Locks arrow at 14px from left edge - centers in 48px button */
    transform-origin: left center; /* Expand from left */
    transition: width 0.25s ease, border-radius 0.25s ease, border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
  }

  /* Right arrow button - expands to LEFT */
  #nextWeek {
    justify-content: flex-end;
    padding-right: 14px; /* Locks arrow at 14px from right edge - centers in 48px button */
    transform-origin: right center; /* Expand from right */
    transition: width 0.25s ease, border-radius 0.25s ease, border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
  }

  /* Shimmer overlay - ::before for all week buttons */
  #prevWeek::before,
  #nextWeek::before {
    content: "";
    position: absolute;
    inset: 0;
    left: -150%;
    width: 60%;
    height: 100%;
    background: linear-gradient(120deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,0.35) 100%);
    transform: skewX(-25deg);
    opacity: 0;
    pointer-events: none;
    z-index: 2;
  }

  /* Text labels - ::after for all week buttons */
  #prevWeek::after,
  #nextWeek::after {
    content: attr(data-week-label);
    position: absolute;
    font-size: 11px; /* Smaller for longer week range text */
    font-weight: 600;
    color: var(--brand);
    pointer-events: none;
    white-space: nowrap;
    top: 50%;
    transform: translateY(-50%);
    visibility: hidden;
    z-index: 1;
    text-align: center;
  }

  /* Left arrow: text centered in space between arrow and right edge */
  /* Arrow at 14px + 20px arrow + 14px gap = text from 48px to 166px (14px right padding) */
  #prevWeek::after {
    left: 48px;
    right: 14px;
  }

  /* Right arrow: text centered in space between left edge and arrow */
  /* 14px left padding to 180px - 14px arrow - 20px arrow - 14px gap = text from 14px to 132px */
  #nextWeek::after {
    left: 14px;
    right: 48px;
  }

  /* HOVER STATE - enabled buttons only */
  #prevWeek:hover:not([disabled]),
  #nextWeek:hover:not([disabled]) {
    width: 180px; /* Wider for week date range text */
    border-radius: 24px; /* Pill shape when expanded */
    border-color: var(--brand);
    background: var(--brand2);
    box-shadow: 0 0 24px var(--brand-glow, rgba(30, 102, 245, 0.4)),
                0 4px 12px rgba(0,0,0,0.15);
    opacity: 1 !important; /* Stay fully opaque on hover */
  }

  /* Show text on hover */
  #prevWeek:hover:not([disabled])::after,
  #nextWeek:hover:not([disabled])::after {
    visibility: visible;
  }

  /* Animate shimmer on hover */
  #prevWeek:hover:not([disabled])::before,
  #nextWeek:hover:not([disabled])::before {
    opacity: 1;
    animation: cta-shimmer 2s linear infinite;
  }

  /* Active state */
  #prevWeek:active:not([disabled]),
  #nextWeek:active:not([disabled]) {
    transform: scale(0.98);
  }

  /* DISABLED STATE - completely hidden */
  #prevWeek[disabled],
  #nextWeek[disabled] {
    display: none !important; /* Completely hide disabled arrows */
  }

  /* ========== TYPE-SPECIFIC GLOW COLORS (WEEK BUTTONS) ========== */

  /* Studio A - Purple glow */
  .type-studioA #prevWeek:hover:not([disabled]),
  .type-studioA #nextWeek:hover:not([disabled]) {
    --brand-glow: rgba(126, 58, 242, 0.5);
  }

  /* Rehearsal / Studio B - Green glow */
  .type-rehearsal #prevWeek:hover:not([disabled]),
  .type-rehearsal #nextWeek:hover:not([disabled]) {
    --brand-glow: rgba(22, 163, 74, 0.5);
  }

  /* Studio A+B - Gradient glow effect (teal blend) */
  .type-studioAB #prevWeek:hover:not([disabled]),
  .type-studioAB #nextWeek:hover:not([disabled]) {
    --brand-glow: rgba(47, 167, 111, 0.5);
    box-shadow: 0 0 24px rgba(126, 58, 242, 0.3),
                0 0 24px rgba(22, 163, 74, 0.3),
                0 4px 12px rgba(0,0,0,0.15);
  }

  /* Column shell */
  .weekcol{
    position:relative;
    border-radius:10px;
    background:#fcfdff;
    overflow:visible; /* Allow hover ghost and holidays to overflow */
    display:flex; flex-direction:column; /* Desktop has flex layout */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Day headers */
  .weekcol .weekday{
    font-weight:700; padding:8px 10px;
    background:#fff;
    text-align:center;
    white-space: nowrap;
    overflow: visible;
  }

  /* Holiday label - exact same style as day headers, positioned one line above */
  .weekday-holiday{
    position: absolute;
    top: -1.3em;
    left: 0;
    right: 0;
    font-weight:700;
    padding:8px 10px;
    background:transparent;
    text-align:center;
    white-space: nowrap;
    overflow: visible;
    pointer-events: none;
  }

  /* Active day: match the day title offset to center over timeline */
  .weekcol.active .weekday-holiday{
    padding-left: calc(10px + var(--hours-col-w, 40px) / 2); /* 10px base + 20px offset = 30px */
  }

  /* Day header with no availability - show not-allowed cursor */
  .weekcol .weekday.no-availability{
    cursor: not-allowed;
    color: #bbb;  /* Dim text like unavailable month days */
  }

  /* Active day: title centered over timeline (not including hour labels) */
  .weekcol.active .weekday{
    /* Offset by half the hour labels width to center over timeline only */
    padding-left: calc(10px + var(--hours-col-w, 40px) / 2); /* 10px base + 20px offset = 30px */
    transition: padding-left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Active day styling - no outline/ring */
  .weekcol.active{ background:var(--bg,#fff); }

  /* Mini "busy stripes" timeline for non-active days */
  .weekmini{
    position:relative; flex:1 1 auto; min-height: calc(var(--row-h) * 6);
    background-image:
      linear-gradient(to bottom, rgba(0,0,0,0) calc(var(--row-h) - 1px), var(--grid-color) calc(var(--row-h) - 1px), var(--grid-color) var(--row-h));
    background-size: 100% var(--row-h);
  }
  .weekmini .busy{
    position:absolute; left:0; right:0;
    background: repeating-linear-gradient(135deg,#6B7280 0px,#6B7280 8px,#E5E7EB 8px,#E5E7EB 16px);
  }

  /* Hover affordance for horizontal drags */
  .weekcol:not(.active){ cursor: ew-resize; }

  /* Full-bleed wrapper breaks out of centered layout to 100vw */
  .week-fullbleed{
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding: 0 16px;           /* optional gutter */
  }

  /* Per-day timelines inside each week column */
  .weekcol .wday{
    display: grid;
    grid-template-columns: var(--hours-col-w, 40px) minmax(120px, 1fr);
    gap: 6px;
    padding: 0px 0px 0px 0px;
    width: 100%;
    min-width: 0;
    overflow: visible; /* allow hover ghost to overflow horizontally */
    box-sizing: border-box;
    grid-auto-flow: row;     /* ensure children place across columns, not new rows */
    align-items: stretch;     /* let children fill track height */
    transition: grid-template-columns 0.4s cubic-bezier(0.4, 0, 0.2, 1), gap 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
  /* Explicit placement: column 1 = hours, column 2 = timeline */
  .weekcol .wday .w-hours   { grid-column: 1; }
  .weekcol .wday .w-timeline{ grid-column: 2; justify-self: stretch; align-self: stretch; }

  /* Only show hour labels on the ACTIVE day */
  .weekcol .wday.is-mini{
    grid-template-columns: 0 minmax(120px, 1fr); /* no hours column width */
    gap: 0;                                /* remove the gap */
  }

  /* Don't use display:none - let the width animation handle hiding */
  .weekcol .wday.is-mini .w-hours{
    opacity: 0;
    pointer-events: none;
  }

  .weekcol .w-hours{
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: visible;  /* Explicit: allow labels to extend for alignment, clipping handled by individual .hrow */
  }
  .weekcol .w-hours .hrow{
    height: var(--row-h);
    display: flex;
    align-items: flex-start; /* Align text to top of row to match timeline hour blocks */
    justify-content: flex-end;
    padding-right: 6px;
    color: var(--muted);
    font-size: clamp(8px, calc(var(--row-h) * 0.3), 13px); /* Scale font with row height */
    line-height: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: clip; /* Don't show ellipsis if text is too long */
  }
  .weekcol .w-timeline{
    position: relative;  /* Anchor for absolute children (.tl-block, .hover-ghost, .drag-preview-ghost) */
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fcfdff;
    overflow: visible;  /* CRITICAL: Allows ghost pulse animations (.hover-ghost::before, .drag-preview-ghost::before) to extend 4px beyond border */
    min-width: 0;
    height: var(--timeline-height, calc(var(--row-h, 44px) * 12)); /* Explicit height based on available space */
    box-sizing: border-box;
    background-image:
      linear-gradient(to bottom, rgba(0,0,0,0) calc(var(--row-h) - 1px),
                      var(--grid-color) calc(var(--row-h) - 1px),
                      var(--grid-color) var(--row-h));
    background-size: 100% var(--row-h);
  }

  /* Both active and mini days allow overflow for hover ghost */
  .weekcol{ overflow: visible; }
  .weekcol.active{ overflow: visible; }
  .weekcol .w-timeline .tl-hour{ height: var(--row-h); }

  /* Week nav disabled look */
  .weekbar .week-nav[disabled]{
    display: none; /* Hide disabled buttons completely */
  }

  /* Force weekday headers to render (protect against any global reset) */
  .weekcol .weekday{
    display:block !important;
    color:#000 !important;             /* titles should be black */
    font-weight:700;
    padding:8px 10px;
    background:#fff;
  }

  /* --- Ensure Week selection block matches Day style exactly --- */
  .weekcol .tl-block{
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 2px);
    background: var(--brand2);
    border: 1px solid var(--brand);
    border-radius: 8px;
    box-shadow:
      0 1px 2px rgba(0,0,0,.04),
      0 2px 4px rgba(0,0,0,.06),
      0 4px 8px rgba(0,0,0,.08),
      0 8px 16px rgba(0,0,0,.1),
      inset 0 1px 0 rgba(255,255,255,.4);  /* subtle inner highlight for 3D depth */
    background-clip: border-box;
  }
  .weekcol .tl-block{
    border:1px solid transparent;
    background:
      linear-gradient(90deg, var(--type-c1, #7e3af2) 0%, var(--type-c2, #16a34a) 100%) padding-box,
      linear-gradient(90deg, var(--type-c1, #7e3af2) 0%, var(--type-c2, #16a34a) 100%) border-box;
  }
  .weekcol .tl-label{
    border-bottom: 0 !important;
    box-shadow: none !important;
    margin-bottom: -1px;
    position:relative; z-index:2; pointer-events:auto;
    width:100%; font-weight:700; color:#173a72; font-size:13px;
    background:rgba(255,255,255,.96);
    border-bottom:1px solid var(--brand-border, rgba(30,102,245,.18));
    display:flex; align-items:center; gap:10px; padding:4px 8px; border-radius:8px 8px 0 0;
    box-sizing:border-box;
  }
  .weekcol .tl-handle{ position:absolute; left:0; right:0; height:8px; background:transparent; cursor:ns-resize; }
  .weekcol .tl-handle.bot{ bottom:-4px; }

  /* === Month-hover style applied to Day & Week blocks (opaque pastel fill + crisp gradient border) === */
  /* Pastel fill stops per type (opaque, "looks like alpha") */
  .ssm-wrap.type-studioA  { --fill1:#f3e8ff; --fill2:#eadcff; }  /* purple pastels */
  .ssm-wrap.type-rehearsal{ --fill1:#e8f8ef; --fill2:#def5e9; }  /* green pastels  */
  .ssm-wrap.type-jam      { --fill1:#fce7f3; --fill2:#fbcfe8; }  /* pink pastels   */
  .ssm-wrap.type-practice { --fill1:#fee2e2; --fill2:#fecaca; }  /* red pastels    */
  .ssm-wrap.type-studioAB { --fill1:#f3e8ff; --fill2:#e9f7ef; }  /* purple→green pastels (same as month hover) */

  /* Two-layer background for selection blocks in Day & Week */
  .ssm-wrap .tl-block,
  .ssm-wrap .weekcol .tl-block{
    border: 1px solid transparent !important;
    background:
      linear-gradient(90deg, var(--fill1) 0%, var(--fill2) 100%) padding-box,
      linear-gradient(90deg,
        var(--type-c1, #7e3af2) 0%,
        var(--type-c2, #16a34a) 100%
      ) border-box !important;
    background-clip: padding-box, border-box !important;
  }

  /* === WEEK select block — pastel fill + masked gradient ring border (metrics-safe) === */
  /* Ensure Week has the same pastel variables available, even if outside .ssm-wrap */
  /* v109.54: Disable text selection and mobile force press (long press) in week card */
  #weekCard,
  #weekCard * {
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    -webkit-touch-callout: none !important; /* Prevent iOS callout menu on long press */
  }

  #weekCard.type-studioA  { --fill1:#f3e8ff; --fill2:#eadcff; }
  #weekCard.type-rehearsal{ --fill1:#e8f8ef; --fill2:#def5e9; }
  #weekCard.type-jam      { --fill1:#fce7f3; --fill2:#fbcfe8; }
  #weekCard.type-practice { --fill1:#fee2e2; --fill2:#fecaca; }
  #weekCard.type-studioAB { --fill1:#f3e8ff; --fill2:#e9f7ef; }

  /* v106.19: Pastel body - removed !important to allow inline styles from test v8 */
  #weekCard .weekcol .tl-block{
    overflow: visible;  /* keep this for ring visibility */
    position: relative;                    /* anchor the ring */
    z-index: 1;                            /* above grid stripes */
  }

  /* Keep the label above the ring */
  #weekCard .weekcol .tl-label{ position:relative; z-index:3; }

  /* === WEEK mask border fix: keep absolute positioning and lift z-index for clickability === */

  /* v106.19: Removed !important flags to allow inline styles from test v8 */
  #weekCard .weekcol .tl-block{
    position: absolute !important;   /* DO NOT override to relative; week uses absolute for math */
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: calc(100% - 2px) !important;
    z-index: 150 !important;          /* above hover ghost and busy overlays */
    overflow: visible !important;  /* keep this for ring visibility */
    transition: none; /* disable transitions during drag for responsive feel */
  }

  /* When dragging across days, maintain active day size and float above */
  #weekCard .weekcol .tl-block.dragging-cross-day{
    position: fixed !important;
    z-index: 9999999 !important;      /* v109.48: MUST be above mainPanel, monthCard, everything */
    pointer-events: none !important;  /* let pointer events pass through to detect hovered column */
    opacity: 0.9;                     /* slight transparency to show underlying days */
    box-shadow: 0 8px 24px rgba(0,0,0,0.3); /* elevation effect */
    /* Override the calc(100% - 2px) width with explicit pixel width set via JS */
    width: var(--drag-width) !important;
    height: var(--drag-height) !important;
  }

  /* Disable pointer events on label and handle during drag so they don't block elementFromPoint */
  #weekCard .weekcol .tl-block.dragging-cross-day .tl-label,
  #weekCard .weekcol .tl-block.dragging-cross-day .tl-handle{
    pointer-events: none !important;
  }

  /* Position dragging block using CSS custom properties set by JS */
  #weekCard .weekcol .tl-block.dragging-cross-day{
    left: var(--drag-left) !important;
    top: var(--drag-top) !important;
    transform: none !important;
  }

  /* v109.47: Mobile keeps pointer-events:none during drag (touchend handles drop) */
  /* The touchend listener in v109.46 handles drop correctly, so block can stay pointer-events:none */

  /* Preview ghost showing where block will land during cross-day drag */
  /* Use same style as hover-ghost for consistency */
  #weekCard .weekcol .tl-block.drag-preview-ghost{
    z-index: 140 !important;          /* below dragging block but above other content */
    pointer-events: none !important;
    /* Inherit hover ghost styling */
    opacity: 1 !important;
    background: transparent !important;
  }

  #weekCard .weekcol .tl-block.drag-preview-ghost::before{
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 8px;
    background: linear-gradient(90deg, var(--ghost-c1, var(--type-c1)), var(--ghost-c2, var(--type-c2)));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    padding: 2px;
    pointer-events: none;
    animation: ghostPulse 1.5s ease-in-out infinite;
  }

  /* keep the masked ring above 3D gradient */
  #weekCard .weekcol .tl-block::before{
    z-index: 2; pointer-events:none;       /* above 3D gradient (::after has z-index: 1) */
  }

  /* === Remove white band: labels overlay transparent over gradient === */
  .tl-label,
  .weekcol .tl-label{
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* Keep label text readable and above the mask/border ring */
  .tl-label,
  .weekcol .tl-label{
    position: relative;
    z-index: 3;
  }

  /* Ensure the gradient ring runs around the top edge unobstructed */
  #weekCard .weekcol .tl-block::before{
    inset: 0;                 /* ring fully inside bounds */
    padding: 1px;             /* ring thickness */
  }

  /* === Day view: use Week block visual style (pastel fill + masked gradient ring) === */
  /* Keep Day layout math intact: only override visuals, no borders/box metrics */
  /* v106.19: Removed !important flags to allow inline styles from test v8 */
  .ssm-wrap .tl-block{
    overflow: visible !important; /* ensure ring isn't clipped */
  }

  /* Labels sit above the ring and fill */
  .ssm-wrap .tl-label{ position: relative; z-index: 3; }

  /* === Day Studio A+B: remove legacy label underline to kill mid-block seam === */
  .ssm-wrap.type-studioAB .tl-label::after{ display:none !important; content:none !important; }
  .ssm-wrap.type-studioAB .tl-label{ background:transparent !important; border:0 !important; }

  /* === Ensure in-block appointment text stays black (Day & Week) === */
  .ssm-wrap .tl-block .dt-line,
  .ssm-wrap .tl-block .tm-line,
  .ssm-wrap .tl-block .sum-line,
  #weekCard .weekcol .tl-block .dt-line,
  #weekCard .weekcol .tl-block .tm-line,
  #weekCard .weekcol .tl-block .sum-line{
    color:#000 !important;
  }
  /* === NORMALIZE TYPE SELECTOR BETWEEN DAY & WEEK === */
  :root{
    --label-fs: 12px;
    --label-lh: 1.2;
    --label-py: 4px;
    --label-px: 8px;
    --selector-handle-h: 6px;
    --selector-handle-radius: 4px;
  }
  .ssm-wrap .tl-label,
  #weekCard .weekcol .tl-label{
    font-size: var(--label-fs) !important;
    line-height: var(--label-lh) !important;
    padding: var(--label-py) var(--label-px) !important;
    height: auto !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    transform: none !important;
    color: #000 !important;
  }
  .ssm-wrap .tl-handle,
  #weekCard .weekcol .tl-handle{
    height: var(--selector-handle-h) !important;
    min-height: var(--selector-handle-h) !important;
    max-height: var(--selector-handle-h) !important;
    border-radius: var(--selector-handle-radius) !important;
  }

  /* v106.42: ONLY apply height constraint to handles in week view, NOT to selectors in block */
  #weekCard .weekcol .selector:not(.selector-filter){
    height: var(--selector-handle-h) !important;
    min-height: var(--selector-handle-h) !important;
    max-height: var(--selector-handle-h) !important;
    border-radius: var(--selector-handle-radius) !important;
  }

  /* v106.44: Override height constraint for block selectors - must come AFTER above rule */
  #weekCard .weekcol .selectors-scale-wrapper .selector {
    height: auto !important;
    min-height: fit-content !important;
    max-height: none !important;
  }

  #weekCard .weekcol .selectors-scale-wrapper > div,
  #weekCard .weekcol .selectors-scale-wrapper > button {
    height: auto !important;
    min-height: fit-content !important;
  }

  /* v106.42: Selector filter wrapper - exclude from timeline height constraints */
  .selector-filter {
    display: inline-block;
    position: relative;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
  }

  /* v106.41: Filter button specific alignment - match wrapper div offset */
  .filter-btn-panel,
  .filter-btn-block {
    align-self: center !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* v106.42: Removed conflicting overrides - using test v8 exact CSS only */
  #weekCard .weekcol .tl-label *{ transform:none !important; }

  /* === Squarespace-specific overrides (desktop only) === */

  /* Month card positioning - flush to top, above header */
  #monthCard {
    top: 0px !important; /* Flush to top of viewport */
  }

  /* Make Squarespace header sit behind month card */
  header,
  .header,
  #header,
  .site-header {
    z-index: 1 !important; /* Very low - behind month card (which is 999999) */
    position: relative !important;
    box-shadow: none !important; /* Hide shadow so it doesn't show through month card */
    padding-right: min(420px, 35vw) !important; /* Stop header before month card (416px width + gap) */
    box-sizing: border-box !important;
    transition: padding-right 0.3s ease !important;
  }

  /* Timeslots grid overrides for proper spacing */
  #monthCard .times {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    grid-auto-rows: minmax(32px, auto) !important; /* Minimum 32px, grow as needed */
    gap: 0.5rem !important;
    align-content: space-evenly !important; /* Evenly space rows vertically */
    height: var(--timeslots-max-height, 192px) !important; /* Use calculated height */
    min-height: 192px !important; /* Minimum: 5 rows × 32px + 4 gaps × 8px */
    padding-bottom: 0 !important; /* Remove bottom padding */
    overflow: visible !important; /* Allow visibility, no clipping */
  }

  #monthCard .time {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 32px !important; /* Minimum height for readability */
    min-width: 80px !important; /* Prevent text cutoff */
    font-size: 13px !important; /* Fixed readable size */
    padding: 0.5em 0.4em !important;
  }

  /* Hide Squarespace footer on booking page */
  footer,
  #footer,
  .site-footer,
  .Footer {
    display: none !important;
    visibility: hidden !important;
  }

  /* === Month card padding override (from Block 2) === */
  /* Remove padding-top, arrows positioned absolutely within monthbar */
  #monthCard {
    padding-top: 0 !important; /* Override mobile padding - arrows in monthbar */
  }

  /* === Week card desktop positioning (from Block 3) === */
  /* Fix week calendar to left, right, bottom */
  #weekCard {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    min-height: 40vh; /* Minimum 40% of viewport height */
    max-height: 60vh; /* Maximum 60% of viewport height */
    overflow: hidden; /* CLIPPING BOUNDARY: Hard edge prevents page scroll issues. Only fixed-position children (nav buttons, dragging block) escape this. */
    z-index: 1000;
    background: #fff;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.1);
    display: block !important; /* Ensure it renders immediately */
    visibility: visible !important;
  }

  /* Week navigation arrows - positioned at bottom corners of week card */
  #prevWeek {
    position: fixed !important;
    bottom: 6px !important; /* 6px from bottom of viewport */
    left: 4px !important; /* 4px from left edge */
    top: auto !important; /* Remove JS-set top value */
    z-index: 10000;
  }

  #nextWeek {
    position: fixed !important;
    bottom: 6px !important; /* 6px from bottom of viewport */
    left: auto !important; /* Remove JS-set left value */
    right: 4px !important; /* 4px from right edge */
    top: auto !important; /* Remove JS-set top value */
    z-index: 10000;
  }

  /* No special handling needed in compact mode */
}

/* v109.50: Hide mobile selectors on desktop by default */
#mobileSelectors {
  display: none !important;
}

/* ========================================
   MOBILE PORTRAIT CSS (<1280px width, portrait orientation)
   ======================================== */
@media (max-width: 1279px) and (orientation: portrait) {
  /* v109.55: Disable all text selection on mobile portrait */
  * {
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    -webkit-touch-callout: none !important;
  }

  html, body {
    overflow: hidden !important; /* Disable all scrolling */
    height: 100vh;
    margin: 0;
    padding: 0;
  }

  /* Layout container should not add any padding/margin */
  .layout-container {
    width: 100%;
    margin: 0;
    padding: 0;
  }

  /* View A: Selection panel (default) */
  .ssm-wrap {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 56px; /* Stop at book button top (matches button height) */
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: hidden; /* Prevent scroll on wrapper */
    box-sizing: border-box;
  }

  #mainPanel {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: auto !important;
    background: white;
    border: none;
    border-radius: 0;
    padding: 8px 6px !important; /* 8px top/bottom, 6px left/right */
    z-index: 100;
    box-sizing: border-box;
  }

  /* Remove left/right padding from week outer container */
  .weekouter,
  .week-fullbleed {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #monthCard {
    display: none !important; /* Hidden - accessible via modal */
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    flex-shrink: 0;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    background: white !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 16px !important;
    box-shadow: none !important;
  }

  #timesCard {
    display: none !important;
  }

  /* Week calendar - positioned between main panel and book button */
  #weekCard {
    position: fixed !important;
    top: var(--main-panel-height, 316px) !important; /* Set by JS based on mainPanel actual height */
    left: 0 !important;
    right: 0 !important;
    bottom: var(--book-button-height, 76px) !important; /* Dynamic button height, fallback to 76px (20px+20px+36px) */
    width: 100% !important;
    height: auto !important; /* Override any JS-set height */
    max-height: none !important; /* Override desktop maxHeight */
    min-height: 0 !important; /* Override any JS-set minHeight */
    background: white;
    border: none;
    border-radius: 0;
    padding: 0 6px !important; /* 6px left/right padding */
    display: flex !important;
    flex-direction: column;
    overflow: hidden !important; /* Scrolling happens within weekgrid */
    z-index: 50;
    box-sizing: border-box;
  }

  /* Hide back button, mini month icon, header, week header, and week title in inline view */
  #weekCard .back-button,
  #weekCard .mini-month-icon,
  #weekCard h3,
  #weekCard .weekday-header,
  #weekCard .weekbar,
  #weekCard .week-title,
  #weekCard #weekTitle {
    display: none !important;
  }

  #continue {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    z-index: 10000 !important;
    border-radius: 0 !important;
    padding: 20px 0 !important; /* No horizontal padding needed on full-width button */
    font-size: 26px !important; /* Slightly smaller font on mobile */
    white-space: nowrap !important; /* Keep text on one line */
  }

  .view-toggle {
    display: block !important;
    margin-top: 8px;
  }

  /* Month calendar - let square cells determine height */
  .cal {
    aspect-ratio: auto !important;
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
  }

  /* Keep cells square */
  .day {
    aspect-ratio: 1 !important;
  }

  /* Timeslots 2-column grid, take full height */
  .times {
    grid-template-columns: repeat(2, 1fr) !important;
    flex: 1;
    align-content: start;
    gap: 8px !important;
  }

  /* Week grid - single active day only in portrait */
  .weekgrid {
    grid-template-columns: 1fr !important; /* Override JS-set 7 columns */
    gap: 0 !important;
    flex: 1 !important; /* Fill available space in weekCard */
    overflow: hidden !important; /* No scroll - timeline should scale to fit */
    margin-top: 0 !important; /* Remove default margin */
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    min-height: 0 !important; /* Allow shrinking */
  }

  .weekcol {
    display: none; /* Hide all columns */
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
  }

  .weekcol.active {
    display: flex !important; /* Show only active day */
    flex-direction: column;
    flex: 1 !important;
    min-height: 0 !important;
    max-height: 100% !important; /* Don't exceed parent weekgrid */
    position: relative;
    border: none !important;
    outline: none !important;
    border-radius: 0 !important;
    padding: 0 0 12px 0 !important; /* Remove horizontal padding */
    background: white !important;
    box-shadow: none !important;
    width: 100% !important;
    box-sizing: border-box;
    overflow: hidden !important; /* Prevent content from extending past bounds */
  }

  .weekcol.active .weekday-header {
    flex-shrink: 0;
    padding: 18px 0;
    background: transparent;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .weekcol.active .weekday {
    color: #000 !important;
    font-weight: 700;
    font-size: 16px;
    text-align: center;
    padding: 0;
  }

  .weekcol.active .nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    color: #374151;
    transition: all 0.15s;
    padding: 0;
    line-height: 1;
    z-index: 10;
  }

  /* Month arrows (outermost) - closer to edges */
  .weekcol.active .month-prev {
    left: 4px;
  }

  .weekcol.active .week-prev {
    left: 44px; /* 4px + 36px button + 4px gap */
  }

  .weekcol.active .day-prev {
    left: 84px; /* 44px + 36px button + 4px gap */
  }

  .weekcol.active .day-next {
    right: 84px;
  }

  .weekcol.active .week-next {
    right: 44px;
  }

  .weekcol.active .month-next {
    right: 4px;
  }

  .weekcol.active .nav-arrow:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
    color: #111827;
  }

  .weekcol.active .nav-arrow:active {
    background: #e5e7eb;
  }

  /* Week arrows (middle) slightly less prominent */
  .weekcol.active .week-prev,
  .weekcol.active .week-next {
    font-size: 16px;
    opacity: 0.8;
    letter-spacing: -2px; /* Tighten spacing between chevrons */
  }

  .weekcol.active .week-prev:hover,
  .weekcol.active .week-next:hover {
    opacity: 1;
  }

  /* Month arrows (outermost) slightly less prominent */
  .weekcol.active .month-prev,
  .weekcol.active .month-next {
    font-size: 16px;
    opacity: 0.7;
    letter-spacing: -2px; /* Tighten spacing between chevrons */
  }

  .weekcol.active .month-prev:hover,
  .weekcol.active .month-next:hover {
    opacity: 1;
  }

  /* Apply landscape grid layout to portrait mode - timeline fills space with 15 equal rows */
  .weekcol.active .wday {
    flex: 1 !important; /* Fill available space - timeline stretches */
    max-height: 100% !important; /* Don't exceed parent weekcol */
    display: grid;
    grid-template-columns: max-content 1fr; /* Hour labels width = widest label text + timeline fills remaining */
    grid-template-rows: repeat(15, 1fr); /* 15 equal rows that scale proportionally */
    column-gap: 1px; /* Minimal gap between labels and timeline */
    row-gap: 0; /* No gap between rows */
    min-height: 0 !important;
    overflow: visible;
    align-items: stretch;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  .weekcol.active .w-hours {
    grid-column: 1;
    grid-row: 1 / -1; /* Span all 15 rows */
    display: grid;
    grid-template-rows: subgrid; /* Inherit parent's row sizing */
    overflow: visible;
    padding: 0;
    margin: 0;
    width: max-content; /* Column width = widest label */
  }

  .weekcol.active .hrow {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    color: #6b7280;
    font-size: 11px;
    line-height: 1;
    overflow: visible;
    white-space: nowrap;
    padding: 0;
    margin: 0;
  }

  .weekcol.active .w-timeline {
    grid-column: 2;
    grid-row: 1 / -1; /* Span all 15 rows */
    display: grid;
    grid-template-rows: subgrid; /* Inherit parent's row sizing */
    position: relative; /* Position context for blocks spanning multiple hours */
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fcfdff;
    overflow: visible; /* Allow ghosts to overflow */
    box-sizing: border-box;
  }

  .weekcol.active .tl-hour {
    border-top: 1px solid #e5e7eb;
  }

  .weekcol.active .tl-hour:first-child {
    border-top: none !important; /* Hide 10am line - redundant with timeline top */
  }

  /* Allow ghosts to overflow timeline */
  .weekcol.active .hover-ghost,
  .weekcol.active .drag-preview-ghost {
    overflow: visible !important;
  }

  /* Busy blocks - shift up to align with hour grid */
  .weekcol.active .tl-busy {
    /* No transform needed - border-top aligns properly */
  }

  /* Selection block positioning - prevent stretching rows */
  .weekcol.active .selection-block,
  .weekcol.active .tl-block {
    position: absolute !important; /* Remove from flow */
    display: block !important; /* Not inline */
    width: calc(100% - 2px) !important; /* Account for timeline border */
    left: 1px !important; /* Align with timeline left border */
    box-sizing: border-box;
    pointer-events: auto;
    z-index: 10 !important; /* Above timeline background */
  }

  /* === v109.13: NEW MOBILE PORTRAIT FEATURES === */

  /* v109.122: Service type label at top of block - centered in first hour */
  .tl-block-service-label {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--row-h, 40px); /* Fixed height = 1 hour row height */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem; /* Same as hover-ghost-time */
    font-weight: 600;
    color: #064e3b; /* Same as hover-ghost-time */
    text-align: center;
    white-space: nowrap;
    z-index: 5;
    pointer-events: none; /* Don't block interactions with block */
    padding: 0 8px;
    box-sizing: border-box;
  }

  /* Hide all inline selectors (main panel and block) - use native mobile selectors instead */
  #mainPanel #mainPanelSelectors,
  #mainPanel .main-panel-selectors,
  #mainPanel .block-selectors-container,
  .tl-block .block-selectors-container,
  .block-selectors-container {
    display: none !important;
  }

  /* Mobile Selectors Container - Show */
  #mobileSelectors {
    display: flex !important;
    flex-direction: column;
    gap: 4px;
    padding: 0; /* No padding since mainPanel already has padding */
  }

  /* Selector Group Container */
  .selector-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  /* Hide all labels/titles for mobile selectors (Service, Staff, Rooms, Start Time, End Time) */
  .selector-group label,
  #mobileSelectors label {
    display: none !important;
  }

  /* Hide week navigation arrows in mobile portrait */
  .nav-arrow,
  .week-prev,
  .week-next,
  .month-prev,
  .month-next,
  .day-prev,
  .day-next,
  .btn.nextweek,
  .btn.prevweek,
  .btn.week-nav {
    display: none !important;
  }

  /* Constrain block selectors (in selection block) to prevent overflow */
  .tl-block .block-selectors-container {
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
  }

  .tl-block .block-selectors-wrapper {
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
  }

  .tl-block .selector {
    max-width: 100%;
    min-width: 0;
    font-size: 11px !important;
  }

  .tl-block .selector-trigger {
    font-size: 11px !important;
    padding: 4px 8px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  .tl-block .selector-label {
    font-size: 11px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Native Select Styling - v109.52: Restore proper styling (iOS supports native picker with these styles) */
  .mobile-select,
  .native-select {
    width: 100%;
    padding: 4px 16px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: white;
    font-size: 16px; /* 16px minimum to prevent iOS zoom on focus */
    font-family: system-ui, -apple-system, sans-serif;
    cursor: pointer;
    /* iOS native picker works fine with these basic styles */
  }

  .mobile-select:focus {
    outline: none;
    border-color: #7e3af2;
    box-shadow: 0 0 0 3px rgba(126, 58, 242, 0.1);
  }

  /* v109.51: Wizard Trigger Button (same style as date-trigger) */
  .wizard-trigger {
    width: 100%;
    padding: 4px 16px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: white;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
  }

  .wizard-trigger:active {
    background: #f9fafb;
  }

  .wizard-value {
    flex: 1;
  }

  .wizard-icon {
    margin-left: 8px;
    opacity: 0.5;
  }

  /* Hide wizard step selectors by default - v109.52: Use visibility instead of pointer-events:none */
  .wizard-step-select {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    /* DO NOT use pointer-events:none - it prevents iOS native picker from working */
  }

  .wizard-step-select.active {
    visibility: visible;
    pointer-events: auto;
  }

  /* Date Trigger Button */
  .date-trigger {
    width: 100%;
    padding: 4px 16px; /* 4px top/bottom padding, no min-height */
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: white;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
  }

  .date-trigger:active {
    background: #f9fafb;
  }

  .date-value {
    color: #111827;
    font-weight: 500;
  }

  .date-icon {
    font-size: 20px;
  }

  /* Time Selectors Row - Side by Side */
  .time-selector-row,
  .time-selectors-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
  }

  .time-selector {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .time-selector label {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin: 0;
  }

  /* v109.120: Mobile time selectors - position dropdowns below triggers */
  #mobileTimeSelectorsContainer .selector {
    position: relative;
    width: 100%;
  }

  #mobileTimeSelectorsContainer .selector-trigger {
    width: 100%;
    justify-content: center; /* v109.122: Center text in mobile time triggers */
  }

  #mobileTimeSelectorsContainer .selector-option {
    justify-content: center; /* v109.122: Center text in mobile time dropdown options */
  }

  #mobileTimeSelectorsContainer .selector-dropdown {
    position: absolute;
    /* top is set by toggleDropdown() - mobile gets top: 100%, desktop gets offset */
    left: 0 !important; /* Override time-range-group positioning */
    right: auto !important;
    width: 100%;
    margin-top: 4px;
  }

  /* Calendar Modal Backdrop */
  .calendar-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99999;
    display: none; /* Hidden by default */
    align-items: center;
    justify-content: center;
    padding: 20px;
  }

  .calendar-modal-backdrop.active {
    display: flex !important;
  }

  .calendar-modal-backdrop #monthCard {
    display: block !important;
    position: relative !important;
    max-width: 400px;
    width: 100%;
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  }

  /* Mobile month calendar grid styling */
  .calendar-modal-backdrop #monthCard .cal {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
    width: 100%;
    max-width: 350px;
    margin: 0 auto;
  }

  .calendar-modal-backdrop #monthCard .day {
    aspect-ratio: 1;
    border: 0;
    border-right: 0.5px solid #e5e7eb;
    border-bottom: 0.5px solid #e5e7eb;
    border-radius: 0;
    min-height: unset;
  }

  /* Edge borders - thicker 1px for outer edges */
  .calendar-modal-backdrop #monthCard .day.edge-left {
    border-left: 1px solid #e5e7eb;
  }

  .calendar-modal-backdrop #monthCard .day.edge-top {
    border-top: 1px solid #e5e7eb;
  }

  .calendar-modal-backdrop #monthCard .day.edge-right {
    border-right: 1px solid #e5e7eb;
  }

  .calendar-modal-backdrop #monthCard .day.edge-bottom {
    border-bottom: 1px solid #e5e7eb;
  }

  /* Corner radius classes */
  .calendar-modal-backdrop #monthCard .day.corner-tl {
    border-top-left-radius: 10px;
  }

  .calendar-modal-backdrop #monthCard .day.corner-tr {
    border-top-right-radius: 10px;
  }

  .calendar-modal-backdrop #monthCard .day.corner-bl {
    border-bottom-left-radius: 10px;
  }

  .calendar-modal-backdrop #monthCard .day.corner-br {
    border-bottom-right-radius: 10px;
  }

  /* v109.61: Cascading Card Wizard */
  .wizard-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 100000;
    /* v109.70: Remove centering - container positioned via JS at trigger location */
  }

  .wizard-cards-container {
    /* v109.70: Position set dynamically via JS to match trigger button */
    position: fixed;
    min-height: 0; /* v109.70: Let cards determine height */
    /* v109.74: Container is positioning context for absolutely positioned cards */
  }

  .wizard-card {
    position: absolute; /* v109.74: Positioned by JS based on previous cards' heights */
    left: 0;
    width: 100%;
    background: var(--brand2, #e9f1ff);
    border: 2px solid var(--brand-border, var(--brand, #5b8ff6));
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    transition: opacity 0.3s ease; /* v109.74: Removed transform transition */
    box-sizing: border-box;
  }

  /* v109.69: Removed .wizard-card-title - no titles in cards */

  .wizard-card-options {
    display: flex;
    flex-direction: column;
    gap: 6px; /* v109.65: Reduced from 8px */
    max-height: 400px;
    overflow-y: auto;
    transition: gap 0.3s ease; /* v109.81: Animate gap when collapsing */
  }

  .wizard-option {
    background: linear-gradient(to bottom, var(--brand2, #e9f1ff), #fff 60%); /* v109.68: Gradient like desktop selects */
    border: 1px solid var(--brand-border, var(--brand, #5b8ff6));
    border-left: 4px solid transparent; /* v109.72: Color indicator on left like desktop */
    border-radius: 6px;
    padding: 12px;
    padding-left: 14px; /* v109.72: Extra padding for color bar */
    font-size: 16px;
    font-weight: 500; /* v109.68: Medium weight for better readability */
    color: var(--ink, #333);
    cursor: pointer;
    transition: height 0.3s ease, padding 0.3s ease, opacity 0.3s ease, border-width 0.3s ease, margin 0.3s ease; /* v109.94: Animate collapse/expand */
    text-align: left;
    position: relative;
  }

  .wizard-option:active {
    background: var(--brand2, #e9f1ff);
    transform: scale(0.98);
    box-shadow: 0 0 0 2px var(--brand2, #e9f1ff); /* v109.68: Focus ring on tap */
  }

  /* v109.71: Collapsed and selected option states */
  .wizard-option.collapsed {
    height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin: 0;
    opacity: 0;
    border-width: 0;
    overflow: hidden;
    transition: all 0.3s ease;
  }

  .wizard-option.selected {
    background: var(--brand, #5b8ff6);
    color: white;
    border-color: var(--brand, #5b8ff6);
    font-weight: 600;
  }

  /* v109.63: Removed .wizard-back-button and .wizard-close-button - click outside to go back/close */
}

/* ========================================
   MOBILE LANDSCAPE CSS (640-1279px width, landscape orientation)
   ======================================== */
@media (min-width: 640px) and (max-width: 1279px) and (orientation: landscape) {
  body {
    overflow: hidden !important;
    height: 100vh !important;
  }

  .layout-container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 0 !important;
  }

  .ssm-wrap {
    position: relative !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    height: 100vh !important;
    overflow: hidden !important;
    width: auto !important;
    top: auto !important;
    bottom: auto !important;
  }

  #mainPanel {
    display: none !important; /* Hidden - access via modal */
  }

  .details-column {
    display: none !important; /* Hidden in 2-column layout */
  }

  #weekCard {
    position: relative !important;
    flex: 1 1 auto;
    background: white;
    border: none; /* No border */
    border-radius: 0;
    padding: 0; /* No padding for flush layout */
    overflow: visible; /* Allow shadows from right column to show */
    display: flex !important; /* Always visible in landscape */
    flex-direction: column;
    top: auto !important;
    left: auto !important;
    z-index: 1;
    height: 100vh;
  }

  #weekCard h3 {
    display: none !important; /* Hide week header in landscape */
  }

  .right-column {
    position: relative;
    flex: 0 0 clamp(180px, 30vw, 280px); /* Narrower to give more room to week */
    display: flex !important;
    flex-direction: column;
    gap: 0; /* No gap - cards directly abut */
    overflow: visible; /* Allow shadows to extend beyond edges */
    padding: 0; /* No outer padding */
    background: #f9fafb;
    height: 100vh;
  }

  #monthCard {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    flex: 0 0 auto; /* Fixed size */
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    background: white;
    border: none !important; /* Remove all borders */
    outline: none !important; /* Remove outline */
    border-radius: 0; /* No rounded corners - flush against timeslots */
    padding: 12px 12px 12px 0; /* Keep top padding, no left padding */
    box-shadow: none;
  }

  #timesCard {
    position: relative !important;
    width: 100% !important;
    flex: 1 1 auto; /* Grow to fill remaining space */
    min-height: 0; /* Allow shrinking */
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    background: white;
    border: none !important; /* Remove all borders */
    outline: none !important; /* Remove outline */
    border-radius: 0; /* No rounded corners - flush against month */
    padding: 12px 12px 12px 0; /* No left padding */
    overflow: visible; /* Allow shadows to show */
    display: flex;
    flex-direction: column;
    box-shadow: none;
  }

  #continue {
    position: fixed !important; /* Fixed to viewport, outside all containers */
    bottom: 12px !important;
    right: 12px !important;
    width: clamp(168px, calc(30vw - 24px), 268px) !important; /* Match right column width minus margins */
    margin: 0 !important;
    padding: 12px 16px;
    z-index: 100; /* Above week card (z-index: 1) */
  }

  /* Placeholder to hold space for button inside #timesCard */
  #timesCard::after {
    content: '';
    display: block;
    height: 54.5px; /* Button height + margins (increased by 6.5px for balanced spacing) */
    flex-shrink: 0;
  }

  /* Month calendar - compact for landscape */
  .cal {
    aspect-ratio: auto; /* Remove aspect ratio constraint */
    max-height: none;
    font-size: clamp(9px, 1vw, 11px); /* Smaller font */
    width: 100% !important; /* Fill column width */
    max-width: none !important; /* Remove centering constraint */
    margin: -7px 0 0 0 !important; /* Pull up to align with timeline, remove side margins */
  }

  .day {
    font-size: clamp(9px, 1vw, 11px); /* Smaller font */
    padding: clamp(3px, 0.6vh, 6px) 2px; /* Less vertical padding */
    aspect-ratio: auto; /* Remove square constraint */
    min-height: 0; /* Allow shrinking */
  }

  .monthbar {
    font-size: clamp(12px, 1.4vw, 14px);
    margin-bottom: 0; /* Removed spacing */
  }

  .cal-head {
    font-size: clamp(9px, 1vw, 11px); /* Day headers (S M T W T F S) */
    margin-top: -8px; /* Move up to align with grid */
    margin-bottom: 0;
  }

  /* Timeslots 2 columns, fill available space proportionally */
  .times {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0 !important; /* No spacing between slots */
    grid-auto-rows: minmax(auto, 25%) !important; /* Max 25% of container height per row */
    width: 100%;
    overflow: hidden !important; /* Constrain grid size */
  }

  .time {
    font-size: clamp(10px, 1.3vw, 12px) !important; /* Responsive font size */
    padding: 3px 4px !important; /* Minimal padding - just enough for text */
    min-height: 0 !important; /* Override 44px base */
    max-height: 100%; /* Don't exceed grid cell */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3 !important; /* Tight but readable */
    display: flex !important; /* Use flex for centering */
    align-items: center !important; /* Center text vertically */
    justify-content: center !important; /* Center text horizontally */
  }

  /* Time slot borders - 2 column layout */
  /* Left edge - odd positions get 1px left border */
  .time:nth-child(odd) {
    border-left: 1px solid #d1d5db;
  }

  /* Top edge - first row (positions 1-2) gets 1px top border */
  .time:nth-child(-n+2) {
    border-top: 1px solid #d1d5db;
  }

  /* Right edge - even positions get 1px right border */
  .time:nth-child(even) {
    border-right: 1px solid #d1d5db;
  }

  /* Bottom edge - last row gets 1px bottom border (positions 11-12) */
  .time:nth-child(11),
  .time:nth-child(12) {
    border-bottom: 1px solid #d1d5db;
  }

  /* Selective border-radius for 2-column layout with 11 slots */
  /* Top-left corner: position 1 */
  .time:nth-child(1) {
    border-top-left-radius: 10px;
  }

  /* Top-right corner: position 2 */
  .time:nth-child(2) {
    border-top-right-radius: 10px;
  }

  /* Bottom-left corner: position 11 (7PM) */
  .time:nth-child(11) {
    border-bottom-left-radius: 10px;
  }

  /* Bottom-right corner: position 12 (8PM) */
  .time:nth-child(12) {
    border-bottom-right-radius: 10px;
  }

  .view-toggle {
    display: none !important;
  }

  /* Hide back button and mini month in landscape */
  .back-button,
  .mini-month-icon {
    display: none;
  }

  /* Week grid single column in landscape - fill height */
  .weekgrid {
    grid-template-columns: 1fr !important;
    gap: 0;
    flex: 1; /* Take all available height */
    display: flex !important;
    flex-direction: column;
  }

  .weekcol {
    display: none; /* Hide all columns */
  }

  .weekcol.active {
    display: flex !important; /* Show only active day */
    flex-direction: column;
    flex: 1; /* Fill parent height */
    min-height: 0; /* Allow shrinking */
    position: relative; /* Position context for arrows */
    /* Override base styles to match right column */
    border: none !important; /* No border */
    outline: none !important; /* Remove outline */
    border-radius: 0 !important; /* No rounded corners */
    padding: 12px !important; /* Match month card top padding */
    background: white !important;
    box-shadow: none !important; /* Remove purple shadow */
  }

  .weekcol.active .weekday-header {
    flex-shrink: 0;
    padding: 0 0 8px 0;
    background: transparent;
  }

  .weekcol.active .weekday {
    color: #000 !important;
    font-weight: 700;
    font-size: 16px;
    text-align: center;
    padding: 6px 0; /* Vertical padding to match arrow height */
  }

  .weekcol.active .nav-arrow {
    position: absolute;
    top: 2px; /* Fit within header height instead of extending above */
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 50%; /* Round buttons */
    width: 36px; /* Match month arrows */
    height: 36px; /* Match month arrows */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    color: #374151;
    transition: all 0.15s;
    padding: 0;
    line-height: 1;
    z-index: 10; /* Above content */
  }

  /* Left arrows - align with timeline left edge */
  /* Month arrows (outermost) */
  .weekcol.active .month-prev {
    left: 12px;
  }

  .weekcol.active .week-prev {
    left: 52px; /* 12px + 36px button + 4px gap */
  }

  .weekcol.active .day-prev {
    left: 92px; /* 52px + 36px button + 4px gap */
  }

  /* Right arrows */
  .weekcol.active .day-next {
    right: 92px;
  }

  .weekcol.active .week-next {
    right: 52px;
  }

  .weekcol.active .month-next {
    right: 12px;
  }

  .weekcol.active .nav-arrow:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
    color: #111827;
  }

  .weekcol.active .nav-arrow:active {
    background: #e5e7eb;
  }

  /* Week arrows (outer) slightly less prominent */
  /* Week arrows (middle) slightly less prominent */
  .weekcol.active .week-prev,
  .weekcol.active .week-next {
    font-size: 16px;
    opacity: 0.8;
    letter-spacing: -2px; /* Tighten spacing between chevrons */
  }

  .weekcol.active .week-prev:hover,
  .weekcol.active .week-next:hover {
    opacity: 1;
  }

  /* Month arrows (outermost) slightly less prominent */
  .weekcol.active .month-prev,
  .weekcol.active .month-next {
    font-size: 16px;
    opacity: 0.7;
    letter-spacing: -2px; /* Tighten spacing between chevrons */
  }

  .weekcol.active .month-prev:hover,
  .weekcol.active .month-next:hover {
    opacity: 1;
  }

  .weekcol.active .wday {
    flex: 1;
    display: grid;
    grid-template-columns: max-content minmax(120px, 1fr); /* Hour labels width = widest label text + timeline fills remaining */
    grid-template-rows: repeat(15, 1fr); /* 15 equal rows for 15 hours (10 AM - 1 AM) */
    column-gap: 1px; /* Minimal gap between labels and timeline */
    row-gap: 6px; /* Gap between rows */
    min-height: 0;
    overflow: visible; /* Allow shadows from right column to show */
    align-items: stretch;
  }

  .weekcol.active .w-hours {
    grid-column: 1;
    grid-row: 1 / -1; /* Span all 15 rows */
    display: grid;
    grid-template-rows: subgrid; /* Inherit parent's row sizing */
    overflow: visible;
    padding: 0;
    margin: 0;
    width: max-content; /* Column width = widest label */
  }

  .weekcol.active .hrow {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end; /* Right-align text */
    color: #6b7280;
    font-size: 11px;
    line-height: 1;
    overflow: hidden;
    white-space: nowrap;
    padding: 0;
    margin: 0;
  }

  .weekcol.active .w-timeline {
    grid-column: 2;
    grid-row: 1 / -1; /* Span all 15 rows */
    display: grid;
    grid-template-rows: subgrid; /* Inherit parent's row sizing */
    position: relative;
    border: 1px solid #e5e7eb;
    border-radius: 10px; /* Keep rounded corners on timeline */
    background: #fcfdff;
    overflow: visible;
    box-sizing: border-box;
  }

  .weekcol.active .tl-hour {
    /* Each hour is one grid row - no explicit height needed */
    border-top: 1px solid #e5e7eb;
  }

  .weekcol.active .tl-hour:first-child {
    border-top: none !important; /* No border on first hour - redundant with timeline top */
  }

  .weekcol.active .selection-block {
    /* Use grid positioning: 1 PM = row 4, spans 3 rows (1-4 PM) */
    grid-column: 1;
    grid-row: 4 / 7; /* Row 4 (1 PM) through row 7 (4 PM) */
    margin: 0 4px; /* Horizontal margins inside timeline */
    background: linear-gradient(135deg, #7e3af2 0%, #16a34a 100%);
    border-radius: 6px;
    color: white;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 8px;
    z-index: 10;
  }
}

/* ========================================
   NARROW LANDSCAPE CSS (<640px width, landscape orientation)
   Fallback to portrait CSS for very narrow landscape devices
   ======================================== */
@media (max-width: 639px) and (orientation: landscape) {
  /* Use same CSS as portrait mode for narrow landscape devices */
  html, body {
    overflow-x: hidden;
    height: 100vh;
  }

  .ssm-wrap {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    padding: 0;
    padding-bottom: 56px;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow-y: auto;
  }

  #mainPanel {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    flex-shrink: 0;
    background: white;
    border: none;
    border-radius: 0;
    padding: 16px 16px 0 16px;
  }

  #monthCard {
    display: none !important;
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    flex-shrink: 0;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    background: white !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 16px !important;
    box-shadow: none !important;
  }

  #timesCard {
    display: none !important;
  }

  #weekCard {
    position: relative !important;
    width: 100% !important;
    flex: 1 1 auto;
    background: white;
    border: none;
    border-radius: 0;
    padding: 0;
    display: flex !important;
    flex-direction: column;
    overflow-y: auto;
  }

  #weekCard .back-button,
  #weekCard .mini-month-icon,
  #weekCard h3 {
    display: none;
  }

  #continue {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    z-index: 10000 !important;
    border-radius: 0 !important;
    padding: 20px 0 !important; /* No horizontal padding needed on full-width button */
    font-size: 26px !important; /* Slightly smaller font on mobile */
    white-space: nowrap !important; /* Keep text on one line */
  }

  .view-toggle {
    display: block !important;
    margin-top: 8px;
  }

  .cal {
    aspect-ratio: auto !important;
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
  }

  .day {
    aspect-ratio: 1 !important;
  }

  .times {
    grid-template-columns: repeat(2, 1fr) !important;
    flex: 1;
    align-content: start;
    gap: 8px !important;
  }

  .weekgrid {
    grid-template-columns: 1fr !important;
    gap: 0;
    flex: 1;
    overflow-y: auto;
    margin-top: 0 !important;
  }

  .weekcol {
    display: none;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
  }

  .weekcol.active {
    display: flex !important;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    position: relative;
    border: none !important;
    outline: none !important;
    border-radius: 0 !important;
    padding: 0 12px 12px 12px !important;
    background: white !important;
    box-shadow: none !important;
  }

  .weekcol.active .weekday-header {
    flex-shrink: 0;
    padding: 18px 0;
    background: transparent;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .weekcol.active .weekday {
    color: #000 !important;
    font-weight: 700;
    font-size: 16px;
    text-align: center;
    padding: 0;
  }

  .weekcol.active .nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    color: #374151;
    transition: all 0.15s;
    padding: 0;
    line-height: 1;
    z-index: 10;
  }

  .weekcol.active .month-prev {
    left: 4px;
  }

  .weekcol.active .week-prev {
    left: 44px;
  }

  .weekcol.active .day-prev {
    left: 84px;
  }

  .weekcol.active .day-next {
    right: 84px;
  }

  .weekcol.active .week-next {
    right: 44px;
  }

  .weekcol.active .month-next {
    right: 4px;
  }

  .weekcol.active .nav-arrow:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
    color: #111827;
  }

  .weekcol.active .nav-arrow:active {
    background: #e5e7eb;
  }

  .weekcol.active .week-prev,
  .weekcol.active .week-next {
    font-size: 16px;
    opacity: 0.8;
    letter-spacing: -2px;
  }

  .weekcol.active .week-prev:hover,
  .weekcol.active .week-next:hover {
    opacity: 1;
  }

  .weekcol.active .month-prev,
  .weekcol.active .month-next {
    font-size: 16px;
    opacity: 0.7;
    letter-spacing: -2px;
  }

  .weekcol.active .month-prev:hover,
  .weekcol.active .month-next:hover {
    opacity: 1;
  }

  .weekcol.active .wday {
    flex: 1;
    display: grid;
    grid-template-columns: max-content minmax(120px, 1fr);
    grid-template-rows: repeat(15, 1fr);
    column-gap: 1px;
    row-gap: 6px;
    min-height: 0;
    overflow: visible;
    align-items: stretch;
  }

  .weekcol.active .w-hours {
    grid-column: 1;
    grid-row: 1 / -1;
    display: grid;
    grid-template-rows: subgrid;
    overflow: visible;
    padding: 0;
    margin: 0;
    width: max-content;
  }

  .weekcol.active .hrow {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    color: #6b7280;
    font-size: 11px;
    line-height: 1;
    overflow: visible;
    white-space: nowrap;
    padding: 0;
    margin: 0;
    width: max-content;
  }

  .weekcol.active .w-timeline {
    grid-column: 2;
    grid-row: 1 / -1;
    display: grid;
    grid-template-rows: subgrid;
    position: relative;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fcfdff;
    overflow: visible;
    box-sizing: border-box;
  }

  .weekcol.active .tl-hour {
    border-top: 1px solid #e5e7eb;
  }

  .weekcol.active .tl-hour:first-child {
    border-top: none !important;
  }

  .weekcol.active .selection-block,
  .weekcol.active .tl-block {
    position: absolute !important;
    display: block !important;
    width: calc(100% - 2px) !important;
    left: 1px !important;
    box-sizing: border-box;
    pointer-events: auto;
    z-index: 10 !important;
  }
}

/* === Left column should size to its contents (do not stretch to right column) === */
.main, .content, .cols, .wrap, .grid /* whichever container you use for the two columns */{
  align-items: flex-start !important;   /* for flex/grid parents: stop stretching items */
}

.left{
  height: auto !important;              /* never force full height */
  align-self: flex-start !important;    /* pin to its content height */
}

.right{
  align-self: stretch;                   /* right column can stay tall if needed */
}

/* if your two columns are a flex row, make sure it isn't equal-height */
.left, .right{
  /* remove any equal-height hacks */
  min-height: 0 !important;
}

  .h{ font-weight:700; margin:0 0 10px; }
  .row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
  label.sel{ display:flex; flex-direction:column; gap:6px; font-weight:600; width:100%; }
  select, input[type="range"]{ width:100%; }

/* Custom Dropdown Styles */
  :root {
    --filter-option-height: 40px; /* Height of each filter option (padding 10px*2 + line-height ~20px) */
    --filter-section-title-height: 44px; /* Height of filter column title */
    --filter-groups-count: 7; /* Number of group filters */
  }

  body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    padding: 40px;
    background: #f5f5f5;
  }

  body.modal-open {
    overflow: hidden;
  }

  h1 { margin-bottom: 10px; }
  h2 { margin-top: 30px; margin-bottom: 15px; color: #666; }

  .layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-top: 30px;
  }

  .test-section {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }

  /* Week Timeline Container - 15 hours (6am-9pm) */
  .w-timeline {
    position: relative;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    height: 600px; /* 40px per hour * 15 hours */
    display: flex;
  }

  /* Hour labels column */
  .timeline-hours {
    width: 60px;
    flex-shrink: 0;
    border-right: 1px solid #ddd;
    position: relative;
  }

  .hour-label {
    position: absolute;
    left: 0;
    width: 60px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #666;
    border-bottom: 1px solid #eee;
  }

  /* Timeline area where block lives */
  .timeline-area {
    flex: 1;
    position: relative;
    overflow: visible;
  }

  /* Mock Selection Block - absolutely positioned in timeline */
  .tl-block {
    position: absolute;
    left: 1px;
    width: calc(100% - 2px);
    border-radius: 8px;
    padding: 12px; /* Initial padding, will be overridden by JavaScript */
    cursor: move;
    user-select: none;
    box-sizing: border-box; /* Height includes padding */
    /* Gradient and outline will be applied dynamically */
    /* top and height set via JavaScript based on time */
    /* Padding dynamically set to min(10% of height, 12px) */
  }

  .tl-block.dragging {
    opacity: 0.8;
    z-index: 1000;
  }

  /* Resize handle at bottom of block */
  .resize-handle {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 12px;
    cursor: ns-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1; /* Below selectors */
  }

  /* Corner handles - subtle */
  .resize-handle::before {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 4px;
    width: 8px;
    height: 8px;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.2) 50%, transparent 70%);
    border-radius: 2px;
    pointer-events: none;
  }

  .resize-handle::after {
    content: '';
    position: absolute;
    bottom: 2px;
    right: 4px;
    width: 8px;
    height: 8px;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.2) 50%, transparent 70%);
    border-radius: 2px;
    pointer-events: none;
  }

  /* Middle extending tab - only for 1-hour blocks */
  .resize-handle-middle {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) translateY(0);
    width: 30px;
    height: 3px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 2px;
    pointer-events: none;
    opacity: 0;
    transition: transform 0.2s ease-out, opacity 0.2s ease-out, height 0.2s ease-out;
  }

  /* Extending tab for 1-hour blocks */
  .resize-handle.one-hour .resize-handle-middle {
    opacity: 1;
    transform: translateX(-50%) translateY(2px);
    height: 6px;
    border-radius: 3px;
  }

  /* Duration control buttons */
  .duration-btn {
    padding: 6px 12px;
    border: 2px solid #ddd;
    background: white;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: #666;
    transition: all 0.2s;
  }

  .duration-btn:hover {
    border-color: #3498db;
    color: #3498db;
  }

  .duration-btn.active {
    background: #3498db;
    border-color: #3498db;
    color: white;
  }

  .tl-block-label {
    font-weight: 600;
    margin-bottom: 12px;
    font-size: 14px;
    color: white;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
  }

  .tl-block-selectors {
    display: flex;
    flex-wrap: nowrap; /* Keep all selectors on one line */
    gap: 8px;
    position: relative;
    align-items: center;
    pointer-events: auto; /* Allow selectors to capture events */
    z-index: 10; /* Above resize handle */
  }

  /* Ensure all interactive elements block drag events */
  .tl-block-selectors *,
  .selector,
  .selector-trigger,
  .selector-dropdown,
  .selector-option,
  button,
  .tl-block-price {
    pointer-events: auto;
  }

  .selectors-scale-wrapper {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px; /* v106.38: Fallback value, overridden dynamically by applyDynamicBlockStyling() */
    align-items: center;
    transform-origin: top left;
    width: fit-content;
    height: fit-content;
  }

  /* v106.44: Higher specificity rules to override #weekCard .weekcol .selector constraint */
  #weekCard .weekcol .selectors-scale-wrapper > div,
  #weekCard .weekcol .selectors-scale-wrapper > button {
    display: inline-block !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    line-height: normal !important;
    vertical-align: middle !important;
    height: auto !important;
    min-height: fit-content !important;
  }

  #weekCard .weekcol .selectors-scale-wrapper .selector {
    height: auto !important;
    min-height: fit-content !important;
    max-height: none !important;
  }

  #weekCard .weekcol .selectors-scale-wrapper .category-room-group,
  #weekCard .weekcol .selectors-scale-wrapper .time-range-group {
    display: inline-flex !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
  }

  .tl-block-selectors > *:not(.tl-block-price) {
    flex: 0 1 auto;
    display: flex;
    align-items: center;
    min-width: 0; /* Allow flex items to shrink below content width */
  }

  .tl-block-price {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    font-size: 24px;
    font-weight: 600;
    color: #333;
    line-height: 1;
    background: transparent;
    border: 2px solid transparent;
    border-radius: inherit;
    pointer-events: none;
    z-index: 10;
  }

  /* Dynamic padding based on price width */
  .tl-block-selectors {
    padding-right: calc(var(--price-width, 0px) + 8px);
  }

  /* Time range group - keeps start/end time together */
  .time-range-group {
    position: relative;
    display: inline-flex;
    align-items: center;
    isolation: isolate;
  }

  /* Border gradient overlays are positioned on each selector child, not from container center */
  /* This ensures the gradient stays at the junction regardless of selector widths */
  .time-range-group .selector-startTime {
    position: relative;
  }

  .time-range-group .selector-startTime::before {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 20px;
    background: transparent;
    border-top: 2px solid;
    border-bottom: 2px solid;
    border-left: none;
    border-right: none;
    border-image: linear-gradient(to right,
      var(--start-border) 0%,
      color-mix(in srgb, var(--start-border) 50%, var(--end-border) 50%) 100%
    ) 1;
    z-index: 10;
    pointer-events: none;
  }

  .time-range-group .selector-endTime {
    position: relative;
  }

  .time-range-group .selector-endTime::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 20px;
    background: transparent;
    border-top: 2px solid;
    border-bottom: 2px solid;
    border-left: none;
    border-right: none;
    border-image: linear-gradient(to right,
      color-mix(in srgb, var(--start-border) 50%, var(--end-border) 50%) 0%,
      var(--end-border) 100%
    ) 1;
    z-index: 10;
    pointer-events: none;
  }

  /* Remove borders between start and end time */
  .time-range-group .selector-startTime .selector-trigger {
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .time-range-group .selector-endTime .selector-trigger {
    border-left: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  /* Gradient blending for unified time selectors */
  .time-range-group .selector-startTime .selector-trigger {
    background: var(--start-bg);
    border-color: var(--start-border);
    position: relative;
    overflow: hidden;
  }

  .time-range-group .selector-startTime .selector-trigger:hover {
    background: var(--selector-hover-bg);
  }

  .time-range-group .selector-startTime .selector-trigger::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(to right, var(--start-bg) 80%, color-mix(in srgb, var(--start-bg) 50%, var(--end-bg) 50%) 100%);
    border-radius: 4px 0 0 4px;
    box-shadow:
      inset 1px 0 0 rgba(255, 255, 255, 0.25),
      inset 0 1px 0 rgba(255, 255, 255, 0.25),
      inset 0 -1px 0 color-mix(in srgb, var(--start-border) 25%, transparent);
    pointer-events: none;
    z-index: 1;
    transition: background 0.2s, box-shadow 0.2s;
  }

  .time-range-group .selector-startTime .selector-trigger:hover::after {
    background: linear-gradient(to right, var(--start-hover-bg) 80%, color-mix(in srgb, var(--start-hover-bg) 50%, var(--end-bg) 50%) 100%);
    box-shadow: none;
  }

  .time-range-group .selector-endTime .selector-trigger {
    background: var(--end-bg);
    border-color: var(--end-border);
    position: relative;
    overflow: hidden;
  }

  .time-range-group .selector-endTime .selector-trigger:hover {
    background: var(--selector-hover-bg);
  }

  .time-range-group .selector-endTime .selector-trigger::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(to right, color-mix(in srgb, var(--start-bg) 50%, var(--end-bg) 50%) 0%, var(--end-bg) 20%);
    border-radius: 0 4px 4px 0;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.25),
      inset -1px 0 0 color-mix(in srgb, var(--end-border) 25%, transparent),
      inset 0 -1px 0 color-mix(in srgb, var(--end-border) 25%, transparent);
    pointer-events: none;
    z-index: 1;
    transition: background 0.2s, box-shadow 0.2s;
  }

  .time-range-group .selector-endTime .selector-trigger:hover::after {
    background: linear-gradient(to right, color-mix(in srgb, var(--start-bg) 50%, var(--end-hover-bg) 50%) 0%, var(--end-hover-bg) 20%);
    box-shadow: none;
  }

  .time-range-group .selector-trigger .selector-label {
    position: relative;
    z-index: 2;
  }

  /* Arrow centered at the meeting point between selectors */
  .time-range-group .selector-startTime::after {
    content: '→';
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    color: #666;
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    pointer-events: none;
    z-index: 100;
  }

  /* v106.57: Position dropdowns to meet at center where gradient/arrow are */
  .time-range-group .selector-startTime .selector-dropdown {
    left: auto;
    right: 0;
  }

  .time-range-group .selector-endTime .selector-dropdown {
    left: 0;
  }

  /* Category-Room group - unified selector */
  .category-room-group {
    position: relative;
    display: inline-flex;
    align-items: center;
  }

  /* Border gradient overlays are positioned on each selector child, not from container center */
  .category-room-group .selector-category {
    position: relative;
  }

  .category-room-group .selector-category::before {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 20px;
    background: transparent;
    border-top: 2px solid;
    border-bottom: 2px solid;
    border-left: none;
    border-right: none;
    border-image: linear-gradient(to right,
      var(--category-border) 0%,
      color-mix(in srgb, var(--category-border) 50%, var(--room-border) 50%) 100%
    ) 1;
    z-index: 10;
    pointer-events: none;
  }

  .category-room-group .selector-room {
    position: relative;
  }

  .category-room-group .selector-room::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 20px;
    background: transparent;
    border-top: 2px solid;
    border-bottom: 2px solid;
    border-left: none;
    border-right: none;
    border-image: linear-gradient(to right,
      color-mix(in srgb, var(--category-border) 50%, var(--room-border) 50%) 0%,
      var(--room-border) 100%
    ) 1;
    z-index: 10;
    pointer-events: none;
  }

  /* Remove borders between category and room */
  .category-room-group .selector-category .selector-trigger {
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .category-room-group .selector-room .selector-trigger {
    border-left: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  /* Gradient blending for unified category-room selectors */
  .category-room-group .selector-category .selector-trigger {
    background: var(--category-bg);
    border-color: var(--category-border);
    position: relative;
    overflow: hidden;
  }

  .category-room-group .selector-category .selector-trigger:hover {
    background: var(--selector-hover-bg);
  }

  .category-room-group .selector-category .selector-trigger::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(to right, var(--category-bg) 80%, color-mix(in srgb, var(--category-bg) 50%, var(--room-bg) 50%) 100%);
    border-radius: 4px 0 0 4px;
    box-shadow:
      inset 1px 0 0 rgba(255, 255, 255, 0.25),
      inset 0 1px 0 rgba(255, 255, 255, 0.25),
      inset 0 -1px 0 color-mix(in srgb, var(--category-border) 25%, transparent);
    pointer-events: none;
    z-index: 1;
    transition: background 0.2s, box-shadow 0.2s;
  }

  .category-room-group .selector-category .selector-trigger:hover::after {
    background: linear-gradient(to right, var(--category-hover-bg) 80%, color-mix(in srgb, var(--category-hover-bg) 50%, var(--room-bg) 50%) 100%);
    box-shadow: none;
  }

  .category-room-group .selector-room .selector-trigger {
    background: var(--room-bg);
    border-color: var(--room-border);
    position: relative;
    overflow: hidden;
  }

  .category-room-group .selector-room .selector-trigger:hover {
    background: var(--selector-hover-bg);
  }

  .category-room-group .selector-room .selector-trigger::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(to right, color-mix(in srgb, var(--category-bg) 50%, var(--room-bg) 50%) 0%, var(--room-bg) 20%);
    border-radius: 0 4px 4px 0;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.25),
      inset -1px 0 0 color-mix(in srgb, var(--room-border) 25%, transparent),
      inset 0 -1px 0 color-mix(in srgb, var(--room-border) 25%, transparent);
    pointer-events: none;
    z-index: 1;
    transition: background 0.2s, box-shadow 0.2s;
  }

  .category-room-group .selector-room .selector-trigger:hover::after {
    background: linear-gradient(to right, color-mix(in srgb, var(--category-bg) 50%, var(--room-hover-bg) 50%) 0%, var(--room-hover-bg) 20%);
    box-shadow: none;
  }

  .category-room-group .selector-trigger .selector-label {
    position: relative;
    z-index: 2;
  }

  /* Single room mode - separate selectors with no unified styling */
  .category-room-group.single-room {
    gap: 8px;
  }

  .category-room-group.single-room .selector-category::before,
  .category-room-group.single-room .selector-room::before {
    display: none;
  }

  .category-room-group.single-room .selector-category .selector-trigger {
    border-right: 2px solid;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
  }

  .category-room-group.single-room .selector-room .selector-trigger {
    border-left: 2px solid;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
  }

  .category-room-group.single-room .selector-category .selector-trigger::after,
  .category-room-group.single-room .selector-room .selector-trigger::after {
    display: none;
  }


  /* Selector Panel - styled like main panel */
  .selector-panel {
    background: white;
    border-radius: 8px;
    padding: 20px;
    border: 3px solid;
    /* Gradient and outline will be applied dynamically */
  }

  .selector-panel-title {
    font-weight: 600;
    margin-bottom: 16px;
    font-size: 16px;
  }

  /* Selector Components */
  .selector {
    position: relative;
    display: inline-block;
  }

  .selector-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: box-shadow 0.2s, background 0.2s;
    border: 2px solid;
    white-space: nowrap;
    box-sizing: border-box;
    background: var(--selector-bg, white);
    box-shadow:
      inset 1px 0 0 rgba(255, 255, 255, 0.25),
      inset 0 1px 0 rgba(255, 255, 255, 0.25),
      inset -1px 0 0 var(--selector-shadow-color),
      inset 0 -1px 0 var(--selector-shadow-color);
  }

  .selector-trigger:hover {
    background: var(--selector-hover-bg);
    box-shadow: 2px 2px 4px var(--selector-shadow-color);
  }

  /* v106.45: Allow clicks to pass through label to reach button */
  .selector-label {
    pointer-events: none;
  }

  /* Disabled selector styles - no hover effects, no shadows, move cursor to match block, pass-through clicks */
  .selector.disabled {
    cursor: move !important;
    pointer-events: none !important;
  }

  .selector.disabled .selector-trigger {
    box-shadow: none !important;
    cursor: move !important;
    pointer-events: none !important;
  }

  .selector.disabled button {
    pointer-events: none !important;
  }

  /* Ensure all children (text, spans, arrows, etc.) don't capture events */
  .selector.disabled * {
    pointer-events: none !important;
  }

  .selector.disabled .selector-trigger:hover {
    background: var(--selector-bg) !important;
    box-shadow: none !important;
  }

  .selector.disabled .selector-trigger::after {
    box-shadow: none !important;
  }

  /* Unified selector disabled hover overrides */
  .time-range-group .selector.disabled .selector-trigger:hover,
  .category-room-group .selector.disabled .selector-trigger:hover {
    background: var(--selector-bg) !important;
  }

  .time-range-group .selector.disabled .selector-trigger:hover::after,
  .category-room-group .selector.disabled .selector-trigger:hover::after {
    background: var(--selector-bg) !important;
    box-shadow: none !important;
  }

  /* Specific overrides for room selector in unified group */
  .category-room-group .selector-room.disabled .selector-trigger:hover {
    background: var(--room-bg) !important;
  }

  .category-room-group .selector-room.disabled .selector-trigger:hover::after {
    background: linear-gradient(to right, color-mix(in srgb, var(--category-bg) 50%, var(--room-bg) 50%) 0%, var(--room-bg) 20%) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.25),
      inset -1px 0 0 color-mix(in srgb, var(--room-border) 25%, transparent),
      inset 0 -1px 0 color-mix(in srgb, var(--room-border) 25%, transparent) !important;
  }

  .selector-arrow {
    font-size: 10px;
    opacity: 0.9;
  }

  .selector-dropdown {
    position: absolute;
    left: 0;
    background: white;
    border: 2px solid transparent;
    border-radius: 8px;
    z-index: 10001; /* v109.122: Above book button (10000) so dropdowns show in front */
    display: none;
    opacity: 0;
    box-shadow: none;
    box-sizing: border-box;
  }

  .selector.open .selector-dropdown {
    display: block;
    opacity: 1;
    overflow: visible;
    max-height: 600px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    transition: opacity 0.15s ease;
  }

  /* Scrollable container for dropdown options */
  .selector-dropdown-scroll {
    max-height: 600px;
    overflow-y: auto;
    overflow-x: visible;
  }

  /* Cascading submenu for categories with subtypes/rooms */
  .selector-submenu {
    position: fixed;
    background: white;
    border: 2px solid #ddd;
    border-radius: 8px;
    z-index: 9999;
    display: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 150px;
    padding: 0; /* v106.49: Removed padding to eliminate white space inside border */
    overflow: hidden; /* v106.49: Clip items to border-radius */
  }

  .selector-submenu.visible {
    display: block;
  }

  .selector-option.has-submenu::after {
    content: '›';
    margin-left: auto;
    padding-left: 12px;
    font-size: 18px;
    opacity: 0.6;
  }

  .selector-option {
    position: relative;
    padding: 8px 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.15s;
    border-left: 4px solid transparent;
    font-size: 14px;
    height: 40px;
    box-sizing: border-box;
    white-space: nowrap;
  }

  .selector-option:first-child {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
  }

  .selector-option:last-child {
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
  }

  .selector-checkmark {
    font-weight: bold;
    margin-left: 8px;
  }

  /* Panel mode */
  .panel-selector-row {
    margin-bottom: 14px;
  }

  .selector-label-text {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
  }

  .panel-selector-row .selector {
    width: 100%;
  }

  .panel-selector-row .selector-trigger {
    width: 100%;
    justify-content: space-between;
  }

  .panel-selector-row .selector-dropdown {
    width: 100%;
  }

  /* Panel groups - inline-styled like block selectors */
  #panelSelectors .category-room-group,
  #panelSelectors .time-range-group {
    display: inline-flex;
    width: auto;
    margin-bottom: 0;
  }

  #panelSelectors .category-room-group .selector,
  #panelSelectors .time-range-group .selector {
    width: auto;
    position: relative; /* Needed for ::before overlays */
  }

  #panelSelectors .category-room-group .selector-trigger,
  #panelSelectors .time-range-group .selector-trigger {
    width: auto;
  }

  /* Panel filter button - inline style */
  #panelSelectors > button.selector-trigger {
    width: auto;
    margin-bottom: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  /* Panel selectors container - single row with wrapping */
  #panelSelectors {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
  }

  /* Individual selector groups and person selector */
  #panelSelectors > div,
  #panelSelectors > button {
    margin-bottom: 0;
  }

  /* v106.44: Ensure main panel is above week outer to allow clicks */
  /* v106.47: Increased z-index to be above week calendar */
  #mainPanelSelectors {
    position: relative;
    z-index: 1001 !important;
  }

  /* Also ensure parent card has z-index for better browser compatibility */
  /* v106.45: Allow dropdowns to extend outside panel card */
  .grid > .card:first-child {
    position: relative;
    z-index: 100 !important;
    overflow: visible !important;
  }

  /* v106.42: EXACT MATCH to test v8 + defensive overrides for Squarespace */
  .main-panel-selectors,
  #mainPanelSelectors {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
    margin-bottom: 12px;
    line-height: normal !important;
  }

  #mainPanelSelectors > div,
  #mainPanelSelectors > button {
    display: inline-block !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    line-height: normal !important;
    vertical-align: middle !important;
    height: auto !important;
    min-height: fit-content !important;
  }

  #mainPanelSelectors .selector {
    height: auto !important;
    min-height: fit-content !important;
  }

  #mainPanelSelectors .category-room-group {
    display: inline-flex !important;
    width: auto;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
  }

  #mainPanelSelectors .time-range-group {
    display: inline-flex !important;
    width: auto;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
  }

  /* v106.57: Position panel dropdowns to meet at center */
  #mainPanelSelectors .time-range-group .selector-startTime .selector-dropdown {
    left: auto;
    right: 0;
  }

  #mainPanelSelectors .time-range-group .selector-endTime .selector-dropdown {
    left: 0;
  }

  #mainPanelSelectors .category-room-group .selector,
  #mainPanelSelectors .time-range-group .selector {
    width: auto;
    position: relative;
  }

  #mainPanelSelectors .category-room-group .selector-trigger,
  #mainPanelSelectors .time-range-group .selector-trigger {
    width: auto;
  }

  #mainPanelSelectors > button.selector-trigger {
    width: auto;
    margin-bottom: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px;
  }

  /* v106.37: Remove old conflicting styles - test v8 handles layout via inline styles */
  .main-panel-selectors .selector-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
  }

  /* v106.37: Don't force selectors to flex-grow - let them be auto-width */
  #mainPanelSelectors .selector {
    flex: 0 0 auto;
    width: auto;
  }

  .state-display {
    background: #f0f0f0;
    padding: 12px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 11px;
    margin-top: 15px;
    max-height: 300px;
    overflow-y: auto;
  }

  button.refresh-btn {
    margin-top: 10px;
    padding: 8px 16px;
    background: #3498db;
    color: white;
    border: none;
    border-radius: inherit;
    cursor: pointer;
    font-weight: 600;
  }

  button.refresh-btn:hover {
    background: #2980b9;
  }

  /* Floating Editor Panel */
  .editor-panel {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    border: 2px solid #ddd;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.15);
    z-index: 1000;
    max-width: 90vw;
    width: 900px;
  }

  .editor-panel.collapsed .editor-content {
    display: none;
  }

  .editor-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 15px;
    background: #f5f5f5;
    border-radius: 6px 6px 0 0;
    cursor: move;
    user-select: none;
  }

  .editor-panel-title {
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .editor-panel-controls {
    display: flex;
    gap: 8px;
  }

  .editor-btn {
    padding: 4px 10px;
    border: 1px solid #ccc;
    background: white;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s;
  }

  .editor-btn:hover {
    background: #e0e0e0;
  }

  .editor-content {
    padding: 15px;
    max-height: 60vh;
    overflow-y: auto;
  }

  .editor-tabs {
    display: flex;
    gap: 5px;
    border-bottom: 2px solid #ddd;
    margin-bottom: 15px;
  }

  .editor-tab {
    padding: 8px 16px;
    background: #f5f5f5;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s;
  }

  .editor-tab:hover {
    background: #e8e8e8;
  }

  .editor-tab.active {
    background: white;
    border-bottom-color: #3498db;
    color: #3498db;
  }

  .editor-tab-content {
    display: none;
  }

  .editor-tab-content.active {
    display: block;
  }

  /* Filter System Styles */
  .filter-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999999; /* v106.47: Increased to be above book button */
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
  }

  .filter-overlay.visible {
    display: flex;
    opacity: 1;
  }

  .filter-modal {
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    max-width: 1400px;
    width: 95%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
  }

  .filter-header {
    padding: 20px 24px;
    border-bottom: 2px solid #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .filter-title {
    font-size: 20px;
    font-weight: 600;
    color: #333;
  }

  .filter-close {
    background: none;
    border: none;
    font-size: 24px;
    color: #999;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s;
    position: absolute;
    right: 24px;
  }

  .filter-close:hover {
    background: #f5f5f5;
    color: #333;
  }

  .filter-body {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .filter-left {
    display: flex;
    gap: 0;
    border-bottom: 2px solid #eee;
    flex: 0 0 auto;
    align-items: flex-start; /* Align columns to top */
    overflow-x: hidden; /* No horizontal scroll - columns fill width */
    overflow-y: hidden;
    min-height: calc(var(--filter-section-title-height) + (var(--filter-groups-count) * var(--filter-option-height)));
    max-height: 50vh;
  }

  .filter-right {
    padding: 24px;
    overflow-y: auto;
    background: #f9f9f9;
    flex: 1;
    min-height: 0;
    max-height: 50vh;
  }

  .filter-section {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #ddd;
    min-width: fit-content; /* Size by content */
  }

  .filter-section:first-child {
    height: auto; /* Group column sets the height - grows with content */
  }

  .filter-section:first-child .filter-options {
    overflow-y: visible; /* No scroll for groups */
    flex: 0 0 auto;
  }

  .filter-section:not(:first-child) {
    height: calc(var(--filter-section-title-height) + (var(--filter-groups-count) * var(--filter-option-height))); /* Match group column height */
  }

  .filter-section:not(:first-child) .filter-options {
    overflow-y: auto; /* Scroll if content exceeds group column height */
    flex: 1 1 auto;
  }

  .filter-section:last-child {
    border-right: none;
  }

  .filter-section-title {
    font-size: 12px;
    font-weight: 600;
    color: #666;
    padding: 12px 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: #f5f5f5;
    border-bottom: 1px solid #ddd;
    flex-shrink: 0;
    min-height: 44px; /* Ensure all titles have same height */
    display: flex;
    align-items: center;
  }

  .filter-options {
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow-y: visible; /* No scroll - show all items */
    flex: 0 0 auto; /* Don't grow - size by content */
  }

  .filter-option {
    padding: 10px 16px;
    border: none;
    border-radius: 0;
    border-bottom: 1px solid #f0f0f0;
    background: white;
    cursor: pointer;
    font-size: 13px;
    font-weight: 400;
    transition: all 0.15s;
    user-select: none;
    text-align: left;
  }

  .filter-option:hover {
    background: #f8f9fa;
  }

  .filter-checkbox:checked + .filter-option {
    background: #e3f2fd;
    color: #1976d2;
    font-weight: 500;
  }

  .filter-checkbox {
    display: none;
  }

  .filter-results-header {
    margin-bottom: 16px;
  }

  .filter-results-count {
    font-size: 14px;
    color: #666;
    margin-bottom: 12px;
  }

  .filter-results-count strong {
    color: #333;
    font-size: 18px;
  }

  .appointment-type-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
  }

  .appointment-type-card {
    background: white;
    border: 2px solid #ddd;
    border-radius: 8px;
    padding: 0;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    position: relative;
  }

  .appointment-type-card:hover {
    border-color: #3498db;
    box-shadow: 0 2px 8px rgba(52, 152, 219, 0.2);
  }

  .appointment-type-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    background: linear-gradient(135deg, #e3f2fd 0%, #f5f5f5 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    border-bottom: 2px solid #eee;
    transition: opacity 0.2s;
  }

  .appointment-type-card:hover .appointment-type-image {
    opacity: 0;
  }

  .appointment-type-info {
    padding: 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }

  .appointment-type-title {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
    line-height: 1.3;
  }

  .appointment-type-subtitle {
    font-size: 11px;
    color: #666;
    line-height: 1.2;
  }

  .appointment-type-description {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    aspect-ratio: 4 / 3;
    background: white;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 12px;
    color: #333;
    line-height: 1.4;
    opacity: 0;
    transition: opacity 0.2s;
    border-bottom: 2px solid #eee;
  }

  .appointment-type-card:hover .appointment-type-description {
    opacity: 1;
  }

  .filter-footer {
    padding: 16px 24px;
    border-top: 2px solid #eee;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
  }

  .filter-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
  }

  .filter-btn-reset {
    background: #f5f5f5;
    color: #666;
  }

  .filter-btn-reset:hover {
    background: #e8e8e8;
  }

  .filter-btn-apply {
    background: #3498db;
    color: white;
  }

  .filter-btn-apply:hover {
    background: #2980b9;
  }

  /* Filter badge on funnel button */
  .filter-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #e74c3c;
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
    display: none;
  }

  .filter-badge.visible {
    display: block;
  }

  /* Funnel filled state */
  .selector-trigger .funnel-icon.filled {
    fill: #3498db;
  }

  /* Inline filter panel (for main panel) */
  .filter-panel-inline {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 2px solid #eee;
  }

  .filter-panel-inline .filter-section {
    margin-bottom: 20px;
  }

  .filter-panel-inline .filter-section-title {
    font-size: 13px;
    margin-bottom: 10px;
  }

  .filter-panel-inline .filter-option {
    font-size: 12px;
    padding: 6px 12px;
  }

  .confirmation-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    z-index: 10001;
    display: none;
    min-width: 320px;
  }

  .confirmation-dialog.visible {
    display: block;
  }

  .confirmation-dialog-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 16px;
    color: #333;
  }

  .confirmation-dialog-buttons {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
  }

  .confirmation-dialog-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
  }

  .confirmation-dialog-btn-cancel {
    background: #f5f5f5;
    color: #666;
  }

  .confirmation-dialog-btn-cancel:hover {
    background: #e8e8e8;
  }

  .confirmation-dialog-btn-confirm {
    background: #3498db;
    color: white;
  }

  .confirmation-dialog-btn-confirm:hover {
    background: #2980b9;
  }
/* Themed slider with visible filled track portion */
input[type="range"]{
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 24px;
  background: transparent;
  outline: none;
}

/* WebKit: draw filled portion using gradient size */
input[type="range"]::-webkit-slider-runnable-track{
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(var(--brand), var(--brand)) 0/var(--sx,0%) 100% no-repeat,
              var(--accent-track);
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: none;
  background: var(--accent-handle);
  margin-top: calc((6px - 16px)/2);
  cursor: pointer;
}

/* Firefox: use ::-moz-range-progress for filled part */
input[type="range"]::-moz-range-track{
  height: 6px;
  border-radius: 3px;
  background: var(--accent-track);
}
input[type="range"]::-moz-range-progress{
  height: 6px;
  border-radius: 3px;
  background: var(--brand);
}
input[type="range"]::-moz-range-thumb{
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: none;
  background: var(--accent-handle);
  cursor: pointer;
}


  .chips{ display:flex; gap:8px; flex-wrap:wrap; }
  .chip{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border:1px solid var(--chip-border); background:var(--chip); border-radius:999px; cursor:pointer; user-select:none; }
  .chip input{ accent-color:var(--brand); }
  .hint{ color:var(--muted); font-size:12px; }
.chip:hover{
  border-color: var(--brand);
  background: var(--brand2);
}
/* === Unified hover: match checkbox chip hover === */
.day:hover:not(.na):not(.off),      /* month cell (only if selectable) */
.time:hover,                        /* timeslot button */
.btn:hover {                        /* Continue + month arrows */
  border-color: var(--brand);
  background: var(--brand2);
}

  /* Month calendar */
.monthbar{
  height: 48px; /* Reserve space for arrows and title */
  overflow: visible;
  pointer-events: none;
  position: relative; /* Positioning context for arrows and title */
  flex-shrink: 0; /* Don't shrink in flex layout */
}

/* Show month title centered between arrows - match day header styling */
#mTitle{
  position: absolute;
  top: 6px; /* Vertically centered: (48px monthbar - 36px height) / 2 = 6px */
  left: 72px; /* Arrow width (48px) + spacing (24px) */
  right: 72px; /* Arrow width (48px) + spacing (24px) */
  height: 36px; /* Reduced height */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 700; /* Match day header weight */
  font-size: 18px; /* Match day header size */
  margin: 0;
  pointer-events: none; /* Allow clicks to pass through to arrows */
}

/* ========== MONTH NAVIGATION BUTTONS - MOVED TO DESKTOP MEDIA QUERY ========== */
/* This entire block (143 lines) has been moved into the @media (min-width: 1280px) media query */
/* See desktop media query section (~line 14990) for the month navigation CSS */
/* Month navigation arrows are desktop-only - they use position:absolute with left/right positioning */

.monthcenter{ display:flex; align-items:center;  justify-content: center;   gap:8px; }  .btn{ padding:8px 12px; border:1px solid #333; border-radius:8px; background:#fff; cursor:pointer; }
  .btn[disabled]{ opacity:.5; cursor:not-allowed; }
  .cal-head,.cal{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
  .cal-head{ margin-bottom:6px; color:var(--muted); font-weight:600; }
  .day{ border:1px solid var(--line); border-radius:10px; padding:8px; text-align:right; aspect-ratio:16/9; position:relative; cursor:pointer; }
  .day.off{ color:#bbb; cursor:not-allowed; background:#fafafa; }
  .day.na{ color:#bbb; background:#f7f7f7; cursor:not-allowed; }

/* While loading, make every day look unavailable (like .day.na) */
.cal.loading .day{
  color:#bbb;
  background:#f7f7f7;
  cursor:not-allowed;
  pointer-events:none;
}
.cal.loading .day.sel{ outline:none; }
.cal.loading .day .dot{ display:none; }

  .day.sel{ outline:2px solid var(--brand); }
  .day .dot{ position:absolute; left:8px; bottom:6px; width:8px; height:8px; border-radius:50%; background:var(--brand); opacity:.6; }
/* mTitle fixed width */

.mTitleBox{
  display: block;
  white-space: nowrap;
  text-align: center;         /* <-- centers the month text inside the fixed box */
  flex: 0 0 auto;             /* don’t stretch; JS sets an explicit width */
}
#mTitle.mTitleBox {text-align:center;}
.monthbar .btn{ min-width:36px;  text-align: center;
 } /* keeps arrow widths consistent */



  .timeline{
    position:relative; border:1px solid var(--line); border-radius:10px; background:#fcfdff; overflow:hidden;
    background-image:
      linear-gradient(to bottom, rgba(0,0,0,0) calc(var(--row-h) - 1px), var(--grid-color) calc(var(--row-h) - 1px), var(--grid-color) var(--row-h));
    background-size: 100% var(--row-h);
    touch-action: none;
  }
  .tl-hour{ height:var(--row-h); }

/* Grey busy blocks = crisp diagonal stripes (no chain-link artifacts) */
/* Clean 45° grey stripes — no squares, no pills */
/* --- Unified busy-block styling --- */

/* Base: neutral — all busy divs start from this */
.tl-busy{
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 1;
  background: none !important;  /* no background, prevents overlap tinting */
  overflow: hidden;  /* Clip content inside busy block */
  /* Square corners by default - rounded corners added conditionally below */
}

/* Round top corners ONLY for blocks at timeline top (10am) */
.tl-busy.at-timeline-top {
  border-top-left-radius: 9px;
  border-top-right-radius: 9px;
}

/* Round bottom corners ONLY for blocks at timeline bottom (1am) */
.tl-busy.at-timeline-bottom {
  border-bottom-left-radius: 9px;
  border-bottom-right-radius: 9px;
}

/* --- Stable grey stripes for all padding/iCal/morning blocks --- */
.tl-busy.busy-grey {
  background: repeating-linear-gradient(
    135deg,
    #9CA3AF 0px,   /* medium grey - subtle but visible */
    #9CA3AF 8px,
    #D1D5DB 8px,   /* lighter grey */
    #D1D5DB 16px
  ) !important;
  background-attachment: fixed !important;  /* Keep pattern fixed during transitions */
  mix-blend-mode: normal !important;
  opacity: 1 !important;
  filter: none !important;
  overflow: hidden;  /* Clip at timeline border - ghosts are siblings, not children */
  pointer-events: auto !important;  /* Enable hover cursor feedback */
  cursor: not-allowed;  /* Show unavailable cursor like month calendar */
}

/* ONE unified rainbow gradient overlay for entire week grid */
.weekgrid {
  position: relative;
  isolation: isolate;
  background: white; /* White background shows in gaps between day columns */
}

.week-rainbow-gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(124deg, rgb(255, 0, 0), rgb(255, 127, 0), rgb(255, 255, 0), rgb(0, 255, 0), rgb(0, 0, 255), rgb(75, 0, 130), rgb(148, 0, 211));
  mix-blend-mode: soft-light;
  opacity: 0.31;
  pointer-events: none;
  z-index: 11; /* Above busy blocks (z-index 10) but below selection block (z-index 150) */
}

/* Busy blocks provide the shape - gradient blends with them */
.tl-busy.busy-grey {
  background: #9ca3af; /* Keep grey background for gradient to blend with */
}

/* Round top corners for busy blocks */
.tl-busy.busy-grey.at-timeline-top {
  border-top-left-radius: 9px;
  border-top-right-radius: 9px;
}

/* Round bottom corners for gradient overlay when block is at timeline bottom */
.tl-busy.busy-grey.at-timeline-bottom::after {
  border-bottom-left-radius: 9px;
  border-bottom-right-radius: 9px;
}




/* Busy blocks with metadata (label + color) */
.tl-busy.has-meta{
  display:flex; align-items:center; gap:6px;
  padding:2px 6px;
  border-radius:0;
  border:1px solid transparent;
  pointer-events:none;
  box-shadow:none;
  background: rgba(0,0,0,.08); /* will be overridden by provided color */
  color:#0b1320;
  font-size:12px; line-height:1.2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Second Street Events emphasis */
.tl-busy.ssevents{
  border: none !important;  /* No border */
  z-index: 10;
  position: absolute;
  left: 0 !important;  /* Full width - flush to timeline edge like grey blocks */
  right: 0 !important;  /* Full width - flush to timeline edge like grey blocks */
  padding: 0 !important;  /* Remove any inherited padding */
  background: transparent !important;
  overflow: hidden;
  /* Square corners by default - rounded corners added via .at-timeline-top/.at-timeline-bottom classes */

  /* center title both ways */
  display: flex !important;      /* ← was block */
  align-items: center;           /* vertical center */
  justify-content: center;       /* horizontal center */
  text-align: center;            /* center multiline text */
}

/* Opaque mask to hide grey behind the event */
.tl-busy.ssevents::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #fcfdff;  /* Match timeline background exactly */
  border-radius: inherit;  /* Inherit conditional rounded corners from parent */
}
/* Centered event title */
.tl-busy.ssevents .event-title{
  position: relative;   /* above ::before/::after */
  z-index: 1;
  font-size: 1.1rem;
  font-weight: 600;
  color: #064e3b;
  line-height: 1.3;
  padding: 6px 8px;
  margin: 0;            /* no auto margins needed in flex */
  white-space: normal;
  text-align: center;
}



/* 3D gradient for events - lighter at top, darker at bottom */
/* v25.57: Uses --event-gradient CSS var from Acuity calendar color, falls back to green */
.tl-busy.ssevents::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--event-gradient, linear-gradient(
    to bottom,
    rgba(134, 239, 172, 0.25),   /* lighter green at top */
    rgba(22, 163, 74, 0.18),     /* mid green */
    rgba(21, 128, 61, 0.22)      /* darker green at bottom */
  ));
  border-radius: inherit;  /* Inherit conditional rounded corners from parent */
}

/* Keep labels/dot above the mask/tint */
.tl-busy.ssevents .dot,
.tl-busy.ssevents span {
  position: relative;
  z-index: 1;
}

.tl-block {
  position: absolute;
  left: 6%;
  width: 88%;
  /* v106.19: background and border removed - now set via inline styles from test v8 */
  /* background: var(--brand2); */
  /* border: 1px solid var(--brand); */
  border-radius: 8px;
  cursor: grab;
  /* v106.19: box-shadow removed - now set via inline styles from test v8 */
  /* box-shadow:
    0 1px 2px rgba(0,0,0,.04),
    0 2px 4px rgba(0,0,0,.06),
    0 4px 8px rgba(0,0,0,.08),
    0 8px 16px rgba(0,0,0,.1),
    inset 0 1px 0 rgba(255,255,255,.4); */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: hidden;                        /* clips white band neatly */
  transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease;

  /* --- visual separation from striped grid --- */
  z-index: 15;                             /* above stripes/events */
  top: 0.5px;                              /* shift down slightly */
  height: calc(100% - 1px);                /* 1 px shorter overall */

  /* let the gradient and border flow together */
  background-clip: border-box;             /* restore gradient edge */
}

/* v106.41: Add ::after pseudo-element to display gradient overlay (like ssevents blocks) */
/* Uses CSS variables set via JavaScript: --block-gradient, --block-border */
.tl-block::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--block-gradient, linear-gradient(135deg, #f3e5f5 0%, #f3e5f5 45%, #ede7f6 55%, #ede7f6 100%));
  border-radius: inherit;
  z-index: 1;  /* Below ::before ring (z-index: 2) but above background */
  pointer-events: none;
}

/* v106.41: Apply border and box-shadow to ::after instead of .tl-block itself */
.tl-block::after {
  border: var(--block-border, 3px solid #9c27b0);
  box-shadow: var(--block-shadow,
    inset 0 2px 4px rgba(255, 255, 255, 0.4),
    inset 0 -2px 4px rgba(156, 39, 176, 0.15),
    inset 0 0 0 1px rgba(0, 0, 0, 0.1)
  );
}

/* Remove gradient from hover ghosts and drag preview ghosts (they should only have border ring) */
.hover-ghost::after,
.drag-preview-ghost::after {
  display: none !important;
}

/* --- Remove the 1px seam between white band and gradient body --- */
.tl-label {
  border-bottom: 0 !important;
  box-shadow: none !important;
  margin-bottom: -1px;     /* overlaps body by 1px to hide the line */
}

  .tl-block.dragging{ cursor:grabbing; z-index: 9999 !important; }

  /* v106.19: Block selectors container (direct child of .tl-block) */
  /* v106.38: Removed static padding - now set dynamically by applyDynamicBlockStyling() */
  .tl-block .block-selectors-container {
    position: relative;
    z-index: 3;
    /* padding: 8px; — removed in v106.38, set dynamically as padding on .tl-block itself */
    pointer-events: none; /* Container doesn't capture events - only children do */
    display: flex;
    flex-direction: row;
    gap: 4px;
    align-items: center;
    flex-wrap: wrap;
  }

  /* v106.19: Individual selectors capture pointer events */
  .tl-block .block-selectors-container .selector {
    pointer-events: auto;
  }

  /* v106.38: REMOVED transparent !important rules - breaks CSS variables */
  /* Selectors in block now use CSS variables from renderBlockSelectors() */
  .tl-block .selector-trigger {
    border: 2px solid;
    /* background uses CSS variable --selector-bg from inline styles */
  }

  /* v106.38: Hover styling for block selectors - use CSS variable */
  .tl-block .selector-trigger:hover {
    /* background uses CSS variable --selector-hover-bg from inline styles */
  }

  .tl-label{
    position:relative; z-index:2; pointer-events:auto;
    width:100%; font-weight:700; color:#173a72; font-size:13px;
background:rgba(255,255,255,.96); border-bottom:1px solid var(--brand-border, rgba(30,102,245,.18));
    display:flex; align-items:center; justify-content:center; gap:10px; padding:4px 8px; border-radius:0;
box-sizing:border-box; /* prevent horizontal overflow past the block edge */
  }

  .tl-handle{ position:absolute; left:0; right:0; height:8px; background:transparent; cursor:ns-resize; }
  .tl-handle.bot{ bottom:-4px; }

    /* Timeslot layout — uniform grid; last row left-aligned below columns */
  .times{
    display:grid;
    grid-auto-flow: row;
    grid-template-columns: repeat(4, minmax(130px, 1fr)); /* 4 uniform columns on desktop */
    gap: 0.5rem;               /* consistent spacing horizontally & vertically */
    margin-top:10px;
    justify-content: start;    /* keep last row left-aligned, not stretched */
    align-content: start;
  }
/* CTA ROW - MOVED TO DESKTOP MEDIA QUERY */
/* This block (8 lines) has been moved into the @media (min-width: 1280px) media query */
/* See desktop media query section (~line 15165) for the CTA row CSS */

  .time{
    width:100%;                /* fill the grid cell width uniformly */
    text-align:center;
    padding:0.6em 0.4em;
    border-radius:0.4em;
    border:1px solid var(--line, #ccc);
    background:#fff;
    cursor:pointer;
    transition: background 0.15s, transform 0.1s;
    white-space: nowrap;       /* keep uniform height by preventing line wrap */
    overflow: hidden;          /* protect height if label gets long */
    text-overflow: ellipsis;   /* show … instead of wrapping */
  }

  .time:hover{
    background:var(--chip-hover, #f0f0f0);
    transform: translateY(-1px);
  }

.times .time.sel{
  background: var(--chip-active-bg, #eef5ff) !important;
  border-color: var(--chip-active, var(--brand, #5b8ff6)) !important;
  color: #0b1320;  box-shadow: inset 0 0 0 2px var(--chip-active, var(--brand, #5b8ff6));
}

  /* Responsive column counts while preserving uniform grid alignment */

  .price{ font-weight:700; }
  .error{ color:var(--warn); margin-top:6px; display:none; }

/* A+B: pale gradient fill to match A/B cards, with a full gradient border */
.ssm-wrap.type-studioAB .tl-block{
  border:1px solid transparent;
  background:
    linear-gradient(90deg, var(--type-c1, #7e3af2) 0%, var(--type-c2, #16a34a) 100%) padding-box,
    linear-gradient(90deg, var(--type-c1, #7e3af2) 0%, var(--type-c2, #16a34a) 100%) border-box;
}
.ssm-wrap.type-studioAB .times .time.sel{
  border:1px solid transparent !important;
  background:
    linear-gradient(90deg, var(--brand2, #f3e8ff) 0%, #e8f8ef 100%) padding-box,
    linear-gradient(90deg, #7e3af2 0%, #16a34a 100%) border-box !important;
  color:#0b1320 !important;
}

.ssm-wrap.type-studioAB .time.sel{
  background: linear-gradient(45deg, #7e3af2 0%, #16a34a 100%);
  /* keep text dark (let the grid-specific rule set it) */
  color: inherit;
  border-color: #2fa76f; /* mid blend for a crisp border */
}
/* ===== Harmonized selected-day outlines for all room types ===== */

/* --- Studio A: purple ring --- */
.ssm-wrap.type-studioA .day.sel {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg, #fff);
}
.ssm-wrap.type-studioA .day.sel::after {
  content: "";
  position: absolute;
  inset: -2px;                           /* extend 2 px outside the box */
  border-radius: 12px;                   /* 10 px + 2 px ring thickness */
  background: #7e3af2;                   /* solid purple outline */
  pointer-events: none;
  z-index: 0;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  padding: 2px;
}
/* Force chip-like hover fill on timeslots for A and B */
.ssm-wrap.type-studioA .times .time:hover,
.ssm-wrap.type-studioB .times .time:hover {
  background: var(--brand2) !important;
  background-image: none !important;   /* defeats any hatch/grey bg */
  border-color: var(--brand) !important;
}

/* --- Rehearsal / Studio B: green ring --- */
.ssm-wrap.type-rehearsal .day.sel {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg, #fff);
}
.ssm-wrap.type-rehearsal .day.sel::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 12px;
  background: #16a34a;                   /* solid green outline */
  pointer-events: none;
  z-index: 0;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  padding: 2px;
}

/* --- Studio A + B: purple→green gradient ring --- */
.ssm-wrap.type-studioAB .day.sel {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg, #fff);
}
.ssm-wrap.type-studioAB .day.sel::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 12px;
  background: linear-gradient(90deg, #7e3af2 0%, #16a34a 100%);
  pointer-events: none;
  z-index: 0;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  padding: 2px;
}

/* Fallback: two-layer background draws a gradient “border” */
@supports not ((-webkit-mask: none) or (mask-composite: exclude)){
  .ssm-wrap.type-studioAB .day.sel{
    background:
      linear-gradient(var(--bg,#fff), var(--bg,#fff)) padding-box,
      linear-gradient(90deg,#7e3af2 0%,#16a34a 100%) border-box;
  }
}
/* A+B day block label: no base border, keep gradient underline */
.ssm-wrap.type-studioAB .tl-label{
  border-bottom: 0;                             /* hide the solid line */
  background: rgba(255,255,255,.96);            /* the white band */
  position: relative;
  z-index: 2;
  border-radius: 8px 8px 0 0;
}
.ssm-wrap.type-studioAB .tl-label::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:2px;
  background: linear-gradient(90deg, #7e3af2 0%, #16a34a 100%);
  pointer-events:none;
  border-bottom-left-radius:8px;
  border-bottom-right-radius:8px;
}
/* Studio A+B — gradient hover for month cells, timeslots, and buttons */
.ssm-wrap.type-studioAB .day:hover:not(.na):not(.off),
.ssm-wrap.type-studioAB .times .time:hover,
.ssm-wrap.type-studioAB .btn:hover {
  border: 1px solid transparent; /* needed for gradient border */
  background:
    linear-gradient(90deg, var(--brand2, #f3e8ff) 0%, #e9f7ef 100%) padding-box,
    linear-gradient(90deg, #7e3af2 0%, #16a34a 100%) border-box;
}

/* Studio A+B — apply the same gradient to checkbox chips (hover + selected) */
.ssm-wrap.type-studioAB .chip:hover,
.ssm-wrap.type-studioAB .chip.is-selected,
.ssm-wrap.type-studioAB .chip.selected,
.ssm-wrap.type-studioAB .chip[aria-pressed="true"],
/* common input/label patterns for “selected” chips — include what your markup uses */
.ssm-wrap.type-studioAB .chip input:checked + label,
.ssm-wrap.type-studioAB .chip input:checked + .face {
  border: 1px solid transparent;
  background:
    linear-gradient(90deg, var(--brand2, #f3e8ff) 0%, #e9f7ef 100%) padding-box,
    linear-gradient(90deg, #7e3af2 0%, #16a34a 100%) border-box;
}
/* === Studio A + B — Baseline outlines for idle states === */
.ssm-wrap.type-studioAB .cal .nav button,
.ssm-wrap.type-studioAB .monthbar .btn,
.ssm-wrap.type-studioAB .times .time,
.ssm-wrap.type-studioAB .btn {
  border: 1px solid var(--line, #d6d6d6) !important;
  border-radius: 8px;
  background: var(--surface, #fff);
  box-sizing: border-box;
}

/* === Studio A + B — Gradient hover/selected styles (retain existing look) === */
.ssm-wrap.type-studioAB .day:hover:not(.na):not(.off),
.ssm-wrap.type-studioAB .times .time:hover,
.ssm-wrap.type-studioAB .btn:hover,
.ssm-wrap.type-studioAB .monthbar .btn:hover {
  border: 1px solid transparent !important;
  background:
    linear-gradient(90deg, var(--brand2, #f3e8ff) 0%, #e9f7ef 100%) padding-box,
    linear-gradient(90deg, #7e3af2 0%, #16a34a 100%) border-box !important;
}

/* === Studio A + B — Consistent focus outline (keyboard/tab) === */
.ssm-wrap.type-studioAB .cal .nav button:focus-visible,
.ssm-wrap.type-studioAB .times .time:focus-visible,
.ssm-wrap.type-studioAB .btn:focus-visible {
  outline: 2px solid var(--brand, #7e3af2);
  outline-offset: 2px;
}

/* === Practice / Sauce Room - Red theme === */

/* Practice month arrows - Red glow */
.ssm-wrap.type-practice #prevMth:hover:not([disabled]),
.ssm-wrap.type-practice #nextMth:hover:not([disabled]) {
  --brand-glow: rgba(220, 38, 38, 0.5);
}

/* Practice week arrows - Red glow */
.type-practice #prevWeek:hover:not([disabled]),
.type-practice #nextWeek:hover:not([disabled]) {
  --brand-glow: rgba(220, 38, 38, 0.5);
}

/* Practice selected day - Red ring */
.ssm-wrap.type-practice .day.sel {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg, #fff);
}

.ssm-wrap.type-practice .day.sel::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 10px;
  border: 2px solid #dc2626;
  pointer-events: none;
  z-index: 1;
}

/* Practice day hover - Red gradient border */
.ssm-wrap.type-practice .day:hover:not(.na):not(.off) {
  border: 1px solid transparent;
  background:
    linear-gradient(90deg, #fee2e2 0%, #fecaca 100%) padding-box,
    linear-gradient(90deg, #dc2626 0%, #991b1b 100%) border-box;
}

/* Practice chips - Red border gradient */
.ssm-wrap.type-practice .chip:hover,
.ssm-wrap.type-practice .chip.is-selected,
.ssm-wrap.type-practice .chip.selected,
.ssm-wrap.type-practice .chip[aria-pressed="true"],
.ssm-wrap.type-practice .chip input:checked + label,
.ssm-wrap.type-practice .chip input:checked + .face {
  border: 1px solid transparent;
  background:
    linear-gradient(90deg, #fee2e2 0%, #fecaca 100%) padding-box,
    linear-gradient(90deg, #dc2626 0%, #991b1b 100%) border-box;
}

/* Practice time slots - Red gradient borders */
.ssm-wrap.type-practice .times .time {
  border: 1px solid var(--line, #d6d6d6) !important;
  border-radius: 8px;
  background: var(--surface, #fff);
  box-sizing: border-box;
}

.ssm-wrap.type-practice .times .time:hover {
  border: 1px solid transparent !important;
  background:
    linear-gradient(90deg, #fee2e2 0%, #fecaca 100%) padding-box,
    linear-gradient(90deg, #dc2626 0%, #991b1b 100%) border-box;
}

.ssm-wrap.type-practice .times .time.sel {
  border: 1px solid transparent !important;
  background:
    linear-gradient(90deg, #fee2e2 0%, #fecaca 100%) padding-box,
    linear-gradient(90deg, #dc2626 0%, #991b1b 100%) border-box !important;
  color: #0b1320 !important;
  box-shadow: inset 0 0 0 2px #dc2626 !important;
}

.ssm-wrap.type-practice .times .time:focus-visible {
  outline: 2px solid #dc2626;
  outline-offset: 2px;
}

/* Practice buttons - Red gradient borders */
.ssm-wrap.type-practice .btn {
  border: 1px solid var(--line, #d6d6d6) !important;
  border-radius: 8px;
  background: var(--surface, #fff);
  box-sizing: border-box;
}

.ssm-wrap.type-practice .btn:hover:not([disabled]) {
  border: 1px solid transparent !important;
  background:
    linear-gradient(90deg, #fee2e2 0%, #fecaca 100%) padding-box,
    linear-gradient(90deg, #dc2626 0%, #991b1b 100%) border-box;
}

.ssm-wrap.type-practice .btn:focus-visible {
  outline: 2px solid #dc2626;
  outline-offset: 2px;
}

/* Practice block inline selectors - Red gradient borders */
.ssm-wrap.type-practice .type-inline,
.ssm-wrap.type-practice .inline-room-config {
  border: 1px solid transparent !important;
  background:
    linear-gradient(90deg, #fee2e2 0%, #fecaca 100%) padding-box,
    linear-gradient(90deg, #dc2626 0%, #991b1b 100%) border-box !important;
}

/* Unified hover look (match checkbox chip hover) */
.day:hover:not(.na):not(.off),
.times .time:hover,
.btn:hover {
  border-color: var(--brand);
  background: var(--brand2);
}

/* Make elements compatible with gradient borders (don’t kill idle borders) */
.chip, .times .time, .btn, .day {
  background-clip: padding-box; /* keep; needed for gradient borders */
}

/* Only make borders transparent when we really use a gradient border */
.ssm-wrap.type-studioAB .chip,
.ssm-wrap.type-studioAB .times .time,
.ssm-wrap.type-studioAB .btn,
.ssm-wrap.type-studioAB .day.sel,
.ssm-wrap.type-studioAB .day:hover:not(.na):not(.off) {
  border-color: transparent;
}
/* Neutralize global hover fades for the CTA specifically */
.btn.cta-float:hover{ opacity: 1 !important; filter: none !important; mix-blend-mode: normal !important; }

/* ===== Solid Green CTA — NO transparency on hover, shimmer ok ===== */
#continue.cta-float{
  position: fixed !important;
  z-index: 2147483647 !important;

  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;                 /* prevent ancestor blending */
  contain: paint;                      /* isolate paint stack */

  /* Solid base */
  background-color: #16a34a !important;                     /* deep green base */
  background-image: linear-gradient(135deg,#22c55e,#16a34a) !important;
  background-clip: padding-box;
  color: #fff !important;

  border: none;
  font-weight: 900;
  font-size: 30px;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.5px;

  padding: 28px 64px;
  border-radius: 999px;
  box-shadow: 0 0 18px rgba(34,197,94,0.45), 0 10px 36px rgba(0,0,0,0.28);
  cursor: pointer;

  /* Kill any inherited fading effects */
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;

  transition: background .25s ease, transform .15s ease, box-shadow .15s ease;
}

/* Hover/focus: brighter, still FULLY opaque */
#continue.cta-float:hover,
#continue.cta-float:focus-visible{
  background-color: #1fd35a !important;
  background-image: linear-gradient(135deg,#31f070,#1fd35a) !important;
  color:#fff !important;

  opacity: 1 !important;              /* hard lock */
  filter: none !important;            /* hard lock */
  mix-blend-mode: normal !important;  /* hard lock */

  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 0 40px rgba(49,240,112,0.7), 0 16px 60px rgba(0,0,0,0.4);
  animation: cta-pulse 2.5s ease-in-out infinite;
}

/* Shimmer overlay — stays opaque, never reveals page behind */
#continue.cta-float::after{
  content:"";
  position:absolute; inset:0;
  left:-150%;
  width:60%;
  height:100%;
  /* NOTE: no 'transparent' stops — only opaque whites so base never shows through */
  background: linear-gradient(120deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,0.35) 100%);
  transform: skewX(-25deg);
  opacity:0;                          /* off until hover/focus */
  pointer-events:none;
}
#continue.cta-float:hover::after,
#continue.cta-float:focus-visible::after{
  opacity:1;
  animation: cta-shimmer 2s linear infinite;
}

/* Motion */
@keyframes cta-pulse{
  0%,100%{ transform: translateY(-3px) scale(1.03); }
  50%    { transform: translateY(-4px) scale(1.05); }
}

/* ===== Save Log Button (removed - use Cmd+Shift+9 keyboard shortcut) ===== */
@keyframes cta-shimmer{
  0%  { left:-150%; }
  100%{ left:150%; }
}

/* Apply shimmer effect to interactive elements on hover */
.time,
.day:not(.off):not(.na),
.chip {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Navigation buttons already have position set, just add overflow */
#prevMth,
#nextMth,
#prevWeek,
#nextWeek {
  overflow: hidden;
  isolation: isolate;
}

/* Shimmer pseudo-element for all interactive elements */
.time::after,
.day:not(.off):not(.na)::after,
.chip::after {
  content: "";
  position: absolute;
  inset: 0;
  left: -150%;
  width: 60%;
  height: 100%;
  background: linear-gradient(120deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,0.35) 100%);
  transform: skewX(-25deg);
  opacity: 0;
  pointer-events: none;
  border-radius: 0; /* No rounded corners for shimmer effect */
}

/* Day cells need slightly inset shimmer to avoid outline clash */
.day:not(.off):not(.na)::after {
  inset: 2px; /* Inset by 2px to avoid clashing with outline on selected days */
}

/* Trigger shimmer animation on hover */
.time:hover::after,
.day:not(.off):not(.na):hover::after,
.chip:hover::after {
  opacity: 1;
  animation: cta-shimmer 2s linear infinite;
}

/* Hide any duplicate in-card button */
#timesCard .cta-row{ display:none !important; }

/* ===== 1-column layouts ===== */



/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  #continue.cta-float,
  #continue.cta-float:hover,
  #continue.cta-float:focus-visible{ animation:none !important; }
  #continue.cta-float::after,
  #continue.cta-float:hover::after,
  #continue.cta-float:focus-visible::after{ animation:none !important; }
}

/* Brand-styled select (including arrow) */
select{
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  color-scheme: light !important; /* Force light mode, avoid OS dark mode override */

  /* Use type-specific brand colors */
  background-color: var(--brand2) !important;
  color: var(--ink) !important;

  /* Colored border outline */
  border: 1px solid var(--brand-border);
  border-radius: 6px;
  padding: 6px 36px 6px 10px; /* room for arrow */

  /* Layered backgrounds: gradient + custom dropdown arrow */
  background-image:
    linear-gradient(to bottom, var(--brand2), #fff 60%),
    /* CSS-drawn chevron using brand color */
    linear-gradient(45deg, transparent 50%, var(--brand) 50%),
    linear-gradient(-45deg, transparent 50%, var(--brand) 50%);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size:
    auto,
    8px 8px,
    8px 8px;
  background-position:
    0 0,
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-clip: padding-box !important;

  transition: border-color .15s, box-shadow .15s, background .15s;
  cursor: pointer;
}

select:focus{
  outline: none !important;
  border-color: var(--brand);
  box-shadow: 0 0 0 2px var(--brand2);
  background-color: var(--brand2) !important;
}

select:active {
  background-color: var(--brand2) !important;
}

/* Studio A+B gets gradient background */
.ssm-wrap.type-studioAB select {
  background-image:
    linear-gradient(90deg, #f3e8ff 0%, #e9f7ef 100%) padding-box,
    linear-gradient(90deg, #7e3af2 0%, #16a34a 100%) border-box,
    linear-gradient(45deg, transparent 50%, #7e3af2 50%),
    linear-gradient(-45deg, transparent 50%, #16a34a 50%);
}

/* Ensure dropdown options use light styling with type colors */
select option {
  background-color: #fff !important;
  color: #000 !important;
}

/* Day view title */
.day-title{
  display:grid; gap:4px; margin:6px 0 10px 0;
  font-weight:600; color:#0b1320;
}
.day-title .dt-line{ font-size:14px; opacity:.9; }
.day-title .tm-line{ font-size:16px; }
.day-title .sum-line{ font-size:14px; opacity:.85; }


.type-inline:focus{
  outline: none;
  border-color: var(--brand, #5b8ff6);
  box-shadow: 0 0 0 2px var(--brand2, #e9f1ff);
}

/* --- Seam killer: hides the divider under the white title band --- */
/* Apply to Studio A+B, and fall back to all views if needed */
.ssm-wrap.type-studioAB .tl-block .tl-label,
.ssm-wrap.type-studioAB .tl-block .title-band,
.ssm-wrap.type-studioAB .tl-block .hdr {
  position: relative;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* A 2px white overlay sits across the join to hide any hairline */
.ssm-wrap.type-studioAB .tl-block .tl-label::after,
.ssm-wrap.type-studioAB .tl-block .title-band::after,
.ssm-wrap.type-studioAB .tl-block .hdr::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -1px;               /* straddles the join */
  height: 2px;                /* wide enough to cover any AA seam */
  background: #fff;           /* match the title band’s white */
  pointer-events: none;
  z-index: 2;                 /* sits above the body fill */
}

/* keep the width constraint from your existing .type-inline */
.type-inline{ max-width:260px; white-space:nowrap; font:inherit; }


/* Small visual polish: quick background transition on chips */
.time{ transition: background 150ms ease, transform 100ms ease; }
/* --- Skeleton placeholders (no layout shift) --- */

@keyframes skel-sweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
/* === Spinner (spinning microphone) — fixed center, no reflow === */
@keyframes mic-spin { to { transform: rotate(360deg); } }

.spinner{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  width:56px;
  height:56px;
  display:none;                 /* toggled via JS */
  z-index:50;
  pointer-events:none;          /* never intercept clicks */
  background:rgba(255,255,255,.6);  /* keep dim; remove if you want no dim */
  will-change: transform;       /* smooth rotation */
}

.spinner svg{
  width:100%;
  height:100%;
  animation:mic-spin 1s linear infinite;
  color:#111;
  transform-origin:50% 50%;
}


/* Day timeline shell (hour rows) */
.day-timeline.skeleton .hour {
  height: var(--px-per-hour, 48px);
  border-bottom: 1px solid #e5e7eb;
}
.day-timeline.skeleton .hour .bar {
  height: 60%; margin: 10% 6%; border-radius: 8px;
}

/* ========== ALL WEEK CSS - MOVED TO DESKTOP MEDIA QUERY ========== */
/* This entire block (607 lines, lines 18945-19551) has been moved into the @media (min-width: 1280px) media query */
/* See desktop media query section (~line 15180) for all week-related CSS */
/* Week calendar is desktop-only - uses fixed positioning, 7-column grid layout, navigation arrows */

/* ORIGINAL WEEK CSS (COMMENTED OUT):
/* ===== Week (full-width, desktop only) ===== */

/* Hide week on tablet/phone per spec */

/* Make weekbar not affect layout but keep it in DOM so children render */
/*
.weekbar{
  height: 0;
  overflow: visible;
  pointer-events: none;
}

.week-title{
  display: none;
}
*/

/* REMOVED - Desktop 7-column grid layout moved into @media (min-width: 1280px) media query below */

/*
/ * Round navigation arrows - positioned relative to weekgrid * /
.btn.week-nav{
  position: fixed; / * Fixed positioning to avoid affecting layout * /
  width: 48px;
  height: 48px;
  border-radius: 50%; / * Start as circle, transition to pill on hover * /
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  font-size: 20px;
  cursor: pointer;
  transition: width 0.25s ease, border-radius 0.25s ease, border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
  color: #374151;
  z-index: 10000; / * Very high to ensure visibility * /
  pointer-events: auto; / * Re-enable clicks since parent has pointer-events: none * /
  white-space: nowrap;
  overflow: visible; / * Allow text to extend outside * /
  / * Position will be set by JavaScript * /
}
*/

/*
/ * ========== WEEK NAVIGATION BUTTONS - REBUILT ========== * /

/ * Left arrow button - expands to RIGHT * /
#prevWeek {
  justify-content: flex-start;
  padding-left: 14px; /* Locks arrow at 14px from left edge - centers in 48px button */
  transform-origin: left center; /* Expand from left */
  transition: width 0.25s ease, border-radius 0.25s ease, border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

/* Right arrow button - expands to LEFT */
#nextWeek {
  justify-content: flex-end;
  padding-right: 14px; /* Locks arrow at 14px from right edge - centers in 48px button */
  transform-origin: right center; /* Expand from right */
  transition: width 0.25s ease, border-radius 0.25s ease, border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

/* Shimmer overlay - ::before for all week buttons */
#prevWeek::before,
#nextWeek::before {
  content: "";
  position: absolute;
  inset: 0;
  left: -150%;
  width: 60%;
  height: 100%;
  background: linear-gradient(120deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,0.35) 100%);
  transform: skewX(-25deg);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}

/* Text labels - ::after for all week buttons */
#prevWeek::after,
#nextWeek::after {
  content: attr(data-week-label);
  position: absolute;
  font-size: 11px; /* Smaller for longer week range text */
  font-weight: 600;
  color: var(--brand);
  pointer-events: none;
  white-space: nowrap;
  top: 50%;
  transform: translateY(-50%);
  visibility: hidden;
  z-index: 1;
  text-align: center;
}

/* Left arrow: text centered in space between arrow and right edge */
/* Arrow at 14px + 20px arrow + 14px gap = text from 48px to 166px (14px right padding) */
#prevWeek::after {
  left: 48px;
  right: 14px;
}

/* Right arrow: text centered in space between left edge and arrow */
/* 14px left padding to 180px - 14px arrow - 20px arrow - 14px gap = text from 14px to 132px */
#nextWeek::after {
  left: 14px;
  right: 48px;
}

/* HOVER STATE - enabled buttons only */
#prevWeek:hover:not([disabled]),
#nextWeek:hover:not([disabled]) {
  width: 180px; /* Wider for week date range text */
  border-radius: 24px; /* Pill shape when expanded */
  border-color: var(--brand);
  background: var(--brand2);
  box-shadow: 0 0 24px var(--brand-glow, rgba(30, 102, 245, 0.4)),
              0 4px 12px rgba(0,0,0,0.15);
  opacity: 1 !important; /* Stay fully opaque on hover */
}

/* Show text on hover */
#prevWeek:hover:not([disabled])::after,
#nextWeek:hover:not([disabled])::after {
  visibility: visible;
}

/* Animate shimmer on hover */
#prevWeek:hover:not([disabled])::before,
#nextWeek:hover:not([disabled])::before {
  opacity: 1;
  animation: cta-shimmer 2s linear infinite;
}

/* Active state */
#prevWeek:active:not([disabled]),
#nextWeek:active:not([disabled]) {
  transform: scale(0.98);
}

/* DISABLED STATE - completely hidden */
#prevWeek[disabled],
#nextWeek[disabled] {
  display: none !important; /* Completely hide disabled arrows */
}

/* ========== TYPE-SPECIFIC GLOW COLORS (WEEK BUTTONS) ========== */

/* Studio A - Purple glow */
.type-studioA #prevWeek:hover:not([disabled]),
.type-studioA #nextWeek:hover:not([disabled]) {
  --brand-glow: rgba(126, 58, 242, 0.5);
}

/* Rehearsal / Studio B - Green glow */
.type-rehearsal #prevWeek:hover:not([disabled]),
.type-rehearsal #nextWeek:hover:not([disabled]) {
  --brand-glow: rgba(22, 163, 74, 0.5);
}

/* Studio A+B - Gradient glow effect (teal blend) */
.type-studioAB #prevWeek:hover:not([disabled]),
.type-studioAB #nextWeek:hover:not([disabled]) {
  --brand-glow: rgba(47, 167, 111, 0.5);
  box-shadow: 0 0 24px rgba(126, 58, 242, 0.3),
              0 0 24px rgba(22, 163, 74, 0.3),
              0 4px 12px rgba(0,0,0,0.15);
}

/* Column shell */
/* CONFLICT #4 - COMMENTED OUT: Base .weekcol display:flex was overriding landscape media query display:none */
/* Landscape media query (line 15665) correctly hides all non-active weekcols with display:none */
/* This base CSS runs AFTER the media query in source order, so it was overriding the hiding rule */
.weekcol{
  position:relative;
  border-radius:10px;
  background:#fcfdff;
  overflow:visible; /* Allow hover ghost and holidays to overflow */
  /* display:flex; flex-direction:column; */ /* COMMENTED OUT - conflicts with landscape MQ */
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Day headers */
.weekcol .weekday{
  font-weight:700; padding:8px 10px;
  background:#fff;
  text-align:center;
  white-space: nowrap;
  overflow: visible;
}

/* Holiday label - exact same style as day headers, positioned one line above */
.weekday-holiday{
  position: absolute;
  top: -1.3em;
  left: 0;
  right: 0;
  font-weight:700;
  padding:8px 10px;
  background:transparent;
  text-align:center;
  white-space: nowrap;
  overflow: visible;
  pointer-events: none;
}

/* Active day: match the day title offset to center over timeline */
.weekcol.active .weekday-holiday{
  padding-left: calc(10px + var(--hours-col-w, 40px) / 2); /* 10px base + 20px offset = 30px */
}

/* Day header with no availability - show not-allowed cursor */
.weekcol .weekday.no-availability{
  cursor: not-allowed;
  color: #bbb;  /* Dim text like unavailable month days */
}

/* Active day: title centered over timeline (not including hour labels) */
.weekcol.active .weekday{
  /* Offset by half the hour labels width to center over timeline only */
  padding-left: calc(10px + var(--hours-col-w, 40px) / 2); /* 10px base + 20px offset = 30px */
  transition: padding-left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Active day styling - no outline/ring */
.weekcol.active{ background:var(--bg,#fff); }

/* Mini “busy stripes” timeline for non-active days */
.weekmini{
  position:relative; flex:1 1 auto; min-height: calc(var(--row-h) * 6);
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0) calc(var(--row-h) - 1px), var(--grid-color) calc(var(--row-h) - 1px), var(--grid-color) var(--row-h));
  background-size: 100% var(--row-h);
}
.weekmini .busy{
  position:absolute; left:0; right:0;
  background: repeating-linear-gradient(135deg,#6B7280 0px,#6B7280 8px,#E5E7EB 8px,#E5E7EB 16px);
}

/* Entire day unavailable for current length */


/* Hover affordance for horizontal drags */
.weekcol:not(.active){ cursor: ew-resize; }

/* Removed: Arrow padding no longer needed - arrows moved to week title */
/* Full-bleed wrapper breaks out of centered layout to 100vw */
.week-fullbleed{
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  padding: 0 16px;           /* optional gutter */
}

/* Hide week on tablet/phone per spec (apply to outer too) */

/* Per-day timelines inside each week column */
.weekcol .wday{
  display: grid;
  grid-template-columns: var(--hours-col-w, 40px) minmax(120px, 1fr); /* ← reduced from 48px to 40px */
  gap: 6px; /* reduced from 10px to 6px */
  padding: 0px 0px 0px 0px;
  width: 100%;
  min-width: 0;
  overflow: visible; /* allow hover ghost to overflow horizontally */
  box-sizing: border-box; /* ← see §2 */
grid-auto-flow: row;     /* ensure children place across columns, not new rows */
align-items: stretch;     /* let children fill track height */
  transition: grid-template-columns 0.4s cubic-bezier(0.4, 0, 0.2, 1), gap 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Explicit placement: column 1 = hours, column 2 = timeline */
.weekcol .wday .w-hours   { grid-column: 1; }
.weekcol .wday .w-timeline{ grid-column: 2; justify-self: stretch; align-self: stretch; }

/* Only show hour labels on the ACTIVE day */
.weekcol .wday.is-mini{
  grid-template-columns: 0 minmax(120px, 1fr); /* no hours column width */
  gap: 0;                                /* remove the gap */
}

/* Don't use display:none - let the width animation handle hiding */
.weekcol .wday.is-mini .w-hours{
  opacity: 0;
  pointer-events: none;
}

.weekcol .w-hours{
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: visible;  /* Explicit: allow labels to extend for alignment, clipping handled by individual .hrow */
}
.weekcol .w-hours .hrow{
  height: var(--row-h);
  display: flex;
  align-items: flex-start; /* Align text to top of row to match timeline hour blocks */
  justify-content: flex-end;
  padding-right: 6px;
  color: var(--muted);
  font-size: clamp(8px, calc(var(--row-h) * 0.3), 13px); /* Scale font with row height */
  line-height: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: clip; /* Don't show ellipsis if text is too long */
}
.weekcol .w-timeline{
  position: relative;  /* Anchor for absolute children (.tl-block, .hover-ghost, .drag-preview-ghost) */
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fcfdff;
  overflow: visible;  /* CRITICAL: Allows ghost pulse animations (.hover-ghost::before, .drag-preview-ghost::before) to extend 4px beyond border */
  min-width: 0;
  height: var(--timeline-height, calc(var(--row-h, 44px) * 12)); /* Explicit height based on available space */
  box-sizing: border-box;
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0) calc(var(--row-h) - 1px),
                    var(--grid-color) calc(var(--row-h) - 1px),
                    var(--grid-color) var(--row-h));
  background-size: 100% var(--row-h);
}

/* Both active and mini days allow overflow for hover ghost */
.weekcol{ overflow: visible; }
.weekcol.active{ overflow: visible; }
.weekcol .w-timeline .tl-hour{ height: var(--row-h); }

/* Week nav disabled look */
.weekbar .week-nav[disabled]{
  display: none; /* Hide disabled buttons completely */
}

/* Force weekday headers to render (protect against any global reset) */
.weekcol .weekday{
  display:block !important;
  color:#000 !important;             /* titles should be black */
  font-weight:700;
  padding:8px 10px;
  background:#fff;
}




/* --- Ensure Week selection block matches Day style exactly --- */
.weekcol .tl-block{
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 2px);
  background: var(--brand2);
  border: 1px solid var(--brand);
  border-radius: 8px;
  box-shadow:
    0 1px 2px rgba(0,0,0,.04),
    0 2px 4px rgba(0,0,0,.06),
    0 4px 8px rgba(0,0,0,.08),
    0 8px 16px rgba(0,0,0,.1),
    inset 0 1px 0 rgba(255,255,255,.4);  /* subtle inner highlight for 3D depth */
  background-clip: border-box;
}
.weekcol .tl-block{
  border:1px solid transparent;
  background:
    linear-gradient(90deg, var(--type-c1, #7e3af2) 0%, var(--type-c2, #16a34a) 100%) padding-box,
    linear-gradient(90deg, var(--type-c1, #7e3af2) 0%, var(--type-c2, #16a34a) 100%) border-box;
}
.weekcol .tl-label{
  border-bottom: 0 !important;
  box-shadow: none !important;
  margin-bottom: -1px;
  position:relative; z-index:2; pointer-events:auto;
  width:100%; font-weight:700; color:#173a72; font-size:13px;
  background:rgba(255,255,255,.96);
  border-bottom:1px solid var(--brand-border, rgba(30,102,245,.18));
  display:flex; align-items:center; gap:10px; padding:4px 8px; border-radius:8px 8px 0 0;
  box-sizing:border-box;
}
.weekcol .tl-handle{ position:absolute; left:0; right:0; height:8px; background:transparent; cursor:ns-resize; }
.weekcol .tl-handle.bot{ bottom:-4px; }

/* === Month-hover style applied to Day & Week blocks (opaque pastel fill + crisp gradient border) === */
/* Pastel fill stops per type (opaque, "looks like alpha") */
.ssm-wrap.type-studioA  { --fill1:#f3e8ff; --fill2:#eadcff; }  /* purple pastels */
.ssm-wrap.type-rehearsal{ --fill1:#e8f8ef; --fill2:#def5e9; }  /* green pastels  */
.ssm-wrap.type-jam      { --fill1:#fce7f3; --fill2:#fbcfe8; }  /* pink pastels   */
.ssm-wrap.type-practice { --fill1:#fee2e2; --fill2:#fecaca; }  /* red pastels    */
.ssm-wrap.type-studioAB { --fill1:#f3e8ff; --fill2:#e9f7ef; }  /* purple→green pastels (same as month hover) */

/* Two-layer background for selection blocks in Day & Week */
.ssm-wrap .tl-block,
.ssm-wrap .weekcol .tl-block{
  border: 1px solid transparent !important;
  background:
    linear-gradient(90deg, var(--fill1) 0%, var(--fill2) 100%) padding-box,
    linear-gradient(90deg,
      var(--type-c1, #7e3af2) 0%,
      var(--type-c2, #16a34a) 100%
    ) border-box !important;
  background-clip: padding-box, border-box !important;
}

/* === WEEK select block — pastel fill + masked gradient ring border (metrics-safe) === */
/* Ensure Week has the same pastel variables available, even if outside .ssm-wrap */
#weekCard.type-studioA  { --fill1:#f3e8ff; --fill2:#eadcff; }
#weekCard.type-rehearsal{ --fill1:#e8f8ef; --fill2:#def5e9; }
#weekCard.type-jam      { --fill1:#fce7f3; --fill2:#fbcfe8; }
#weekCard.type-practice { --fill1:#fee2e2; --fill2:#fecaca; }
#weekCard.type-studioAB { --fill1:#f3e8ff; --fill2:#e9f7ef; }

/* v106.19: Pastel body - removed !important to allow inline styles from test v8 */
#weekCard .weekcol .tl-block{
  /* background: linear-gradient(90deg, var(--fill1) 0%, var(--fill2) 100%) !important; */
  /* border: 0 !important; */
  /* background-clip: padding-box !important; */
  overflow: visible;  /* keep this for ring visibility */
  position: relative;                    /* anchor the ring */
  z-index: 1;                            /* above grid stripes */
}

/* Keep the label above the ring */
#weekCard .weekcol .tl-label{ position:relative; z-index:3; }

/* === WEEK mask border fix: keep absolute positioning and lift z-index for clickability === */
/* NOTE: .w-timeline already has position:relative at line 1642, redundant declaration removed */

/* v106.19: Removed !important flags to allow inline styles from test v8 */
#weekCard .weekcol .tl-block{
  position: absolute !important;   /* DO NOT override to relative; week uses absolute for math */
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: calc(100% - 2px) !important;
  z-index: 150 !important;          /* above hover ghost and busy overlays */
  /* border: 0 !important; */
  /* background: linear-gradient(90deg, var(--fill1) 0%, var(--fill2) 100%) !important; */
  /* background-clip: padding-box !important; */
  overflow: visible !important;  /* keep this for ring visibility */
  transition: none; /* disable transitions during drag for responsive feel */
}

/* When dragging across days, maintain active day size and float above */
#weekCard .weekcol .tl-block.dragging-cross-day{
  position: fixed !important;
  z-index: 1000000 !important;      /* float above everything including month & timeslots during cross-day drag */
  pointer-events: none !important;  /* let pointer events pass through to detect hovered column */
  opacity: 0.9;                     /* slight transparency to show underlying days */
  box-shadow: 0 8px 24px rgba(0,0,0,0.3); /* elevation effect */
  /* Override the calc(100% - 2px) width with explicit pixel width set via JS */
  width: var(--drag-width) !important;
  height: var(--drag-height) !important;
}

/* Disable pointer events on label and handle during drag so they don't block elementFromPoint */
#weekCard .weekcol .tl-block.dragging-cross-day .tl-label,
#weekCard .weekcol .tl-block.dragging-cross-day .tl-handle{
  pointer-events: none !important;
}

/* Position dragging block using CSS custom properties set by JS */
#weekCard .weekcol .tl-block.dragging-cross-day{
  left: var(--drag-left) !important;
  top: var(--drag-top) !important;
  transform: none !important;
}

/* Preview ghost showing where block will land during cross-day drag */
/* Use same style as hover-ghost for consistency */
#weekCard .weekcol .tl-block.drag-preview-ghost{
  z-index: 140 !important;          /* below dragging block but above other content */
  pointer-events: none !important;
  /* Inherit hover ghost styling */
  opacity: 1 !important;
  background: transparent !important;
}

#weekCard .weekcol .tl-block.drag-preview-ghost::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--ghost-c1, var(--type-c1)), var(--ghost-c2, var(--type-c2)));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 2px;
  pointer-events: none;
  animation: ghostPulse 1.5s ease-in-out infinite;
}

/* keep the masked ring above 3D gradient */
#weekCard .weekcol .tl-block::before{
  z-index: 2; pointer-events:none;       /* above 3D gradient (::after has z-index: 1) */
}

/* === Remove white band: labels overlay transparent over gradient === */
.tl-label,
.weekcol .tl-label{
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Keep label text readable and above the mask/border ring */
.tl-label,
.weekcol .tl-label{
  position: relative;
  z-index: 3;
  /* optional: tiny text shadow for legibility; comment out if not desired */
  /* text-shadow: 0 1px 0 rgba(255,255,255,.5); */
}

/* Ensure the gradient ring runs around the top edge unobstructed */
#weekCard .weekcol .tl-block::before{
  inset: 0;                 /* ring fully inside bounds */
  padding: 1px;             /* ring thickness */
}

/* === Day view: use Week block visual style (pastel fill + masked gradient ring) === */
/* Keep Day layout math intact: only override visuals, no borders/box metrics */
/* v106.19: Removed !important flags to allow inline styles from test v8 */
.ssm-wrap .tl-block{
  /* border: 0 !important; */
  /* background: linear-gradient(90deg, var(--fill1) 0%, var(--fill2) 100%) !important; */
  /* background-clip: padding-box !important; */
  overflow: visible !important; /* ensure ring isn't clipped */
}

/* Labels sit above the ring and fill */
.ssm-wrap .tl-label{ position: relative; z-index: 3; }

/* === Day Studio A+B: remove legacy label underline to kill mid-block seam === */
.ssm-wrap.type-studioAB .tl-label::after{ display:none !important; content:none !important; }
.ssm-wrap.type-studioAB .tl-label{ background:transparent !important; border:0 !important; }

/* === Ensure in-block appointment text stays black (Day & Week) === */
.ssm-wrap .tl-block .dt-line,
.ssm-wrap .tl-block .tm-line,
.ssm-wrap .tl-block .sum-line,
#weekCard .weekcol .tl-block .dt-line,
#weekCard .weekcol .tl-block .tm-line,
#weekCard .weekcol .tl-block .sum-line{
  color:#000 !important;
}
/* === NORMALIZE TYPE SELECTOR BETWEEN DAY & WEEK === */
:root{
  --label-fs: 12px;
  --label-lh: 1.2;
  --label-py: 4px;
  --label-px: 8px;
  --selector-handle-h: 6px;
  --selector-handle-radius: 4px;
}
.ssm-wrap .tl-label,
#weekCard .weekcol .tl-label{
  font-size: var(--label-fs) !important;
  line-height: var(--label-lh) !important;
  padding: var(--label-py) var(--label-px) !important;
  height: auto !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  transform: none !important;
  color: #000 !important;
}
.ssm-wrap .tl-handle,
#weekCard .weekcol .tl-handle{
  height: var(--selector-handle-h) !important;
  min-height: var(--selector-handle-h) !important;
  max-height: var(--selector-handle-h) !important;
  border-radius: var(--selector-handle-radius) !important;
}

/* v106.42: ONLY apply height constraint to handles in week view, NOT to selectors in block */
#weekCard .weekcol .selector:not(.selector-filter){
  height: var(--selector-handle-h) !important;
  min-height: var(--selector-handle-h) !important;
  max-height: var(--selector-handle-h) !important;
  border-radius: var(--selector-handle-radius) !important;
}

/* v106.44: Override height constraint for block selectors - must come AFTER above rule */
#weekCard .weekcol .selectors-scale-wrapper .selector {
  height: auto !important;
  min-height: fit-content !important;
  max-height: none !important;
}

#weekCard .weekcol .selectors-scale-wrapper > div,
#weekCard .weekcol .selectors-scale-wrapper > button {
  height: auto !important;
  min-height: fit-content !important;
}

/* v106.42: Selector filter wrapper - exclude from timeline height constraints */
.selector-filter {
  display: inline-block;
  position: relative;
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
}

/* v106.41: Filter button specific alignment - match wrapper div offset */
.filter-btn-panel,
.filter-btn-block {
  align-self: center !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/ * v106.42: Removed conflicting overrides - using test v8 exact CSS only * /
#weekCard .weekcol .tl-label *{ transform:none !important; }
*/

/* END OF COMMENTED OUT WEEK CSS BLOCK */

/* === HOVER PREVIEW (border-only gradient ring, follows slider/selection) === */
:root{
  --ghost-ring: 2px;
  /* Colors come from existing type vars */
  --ghost-c1: var(--type-c1, #7e3af2);
  --ghost-c2: var(--type-c2, #16a34a);
}
/* One ghost per timeline; transparent center, gradient border only */
.hover-ghost{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:calc(100% - 2px);
  border-radius:8px;
  pointer-events:none;
  z-index:100;
  box-sizing:border-box;
  display:none;
}
/* Centered time label inside hover ghost - same styling as event calendar titles */
.hover-ghost-time{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.1rem;
  font-weight: 600;
  color: #064e3b;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  z-index: 10;
}
.hover-ghost::before{
  content:"";
  position:absolute;
  border-radius:8px;
  background:linear-gradient(90deg, var(--ghost-c1), var(--ghost-c2));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  padding:2px;
  pointer-events:none;
  animation: ghostPulse 1.5s ease-in-out infinite;
}
/* v109.122: Use bottom pulsing animation for end time resize preview */
.hover-ghost.resize-preview::before{
  animation: ghostPulseBottom 1.5s ease-in-out infinite !important;
}
@keyframes ghostPulse {
  0%, 100% {
    opacity: 0.3;
    inset: 0;
  }
  50% {
    opacity: 1.0;
    inset: 0 -4px 0 -4px;  /* Expand horizontally only (top right bottom left) */
  }
}

/* v109.122: Bottom pulsing animation for end time resize preview */
@keyframes ghostPulseBottom {
  0%, 100% {
    opacity: 0.3;
    inset: 0;
  }
  50% {
    opacity: 1.0;
    inset: 0 0 -4px 0;  /* Expand vertically at bottom only (top right bottom left) */
  }
}

/* v26.11: Preview hover - highlight timeslot button when hover ghost matches it */
button.preview-hover {
  background-color: var(--chip-active-bg, #fee2e2) !important;
  border-color: var(--brand, #991b1b) !important;
  transform: scale(1.02);
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

/* v108.02: Spinner (spinning microphone) - fixed center, no reflow */
@keyframes mic-spin { to { transform: rotate(360deg); } }

.spinner{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  width:56px;
  height:56px;
  display:none;                 /* toggled via JS */
  z-index:50;
  pointer-events:none;          /* never intercept clicks */
  background:rgba(255,255,255,.6);
  will-change: transform;
}

.spinner svg{
  width:100%;
  height:100%;
  animation:mic-spin 1s linear infinite;
  color:#111;
  transform-origin:50% 50%;
}

/* Layout container and right column for landscape mode */
.layout-container {
  display: contents; /* Transparent wrapper by default */
}

.right-column {
  display: none; /* Hidden by default, shown in landscape */
}

/* ===== SSOS Checkout Modal Styles ===== */

/* Modal overlay */
.checkout-modal-overlay {
  display: none; /* Hidden by default */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 100000;
  align-items: center;
  justify-content: center;
}

/* Modal container */
.checkout-modal {
  background: white;
  border-radius: 12px;
  max-width: 700px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Mobile: Full screen modal with fixed header/footer */
@media (max-width: 768px) and (orientation: portrait) {
  .checkout-modal {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
    overflow: hidden;
  }

  .checkout-modal-header {
    position: sticky;
    top: 0;
    background: white;
    z-index: 10;
    flex-shrink: 0;
  }

  .checkout-modal-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .checkout-modal-footer {
    position: sticky;
    bottom: 0;
    background: white;
    border-top: 1px solid #e0e0e0;
    padding: 16px 24px;
    flex-shrink: 0;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  }

  .checkout-modal-footer .checkout-submit-btn {
    width: 100%;
    margin: 0;
  }
}

/* Modal footer (desktop: normal flow) */
.checkout-modal-footer {
  padding: 16px 24px 24px;
}

/* Modal header */
.checkout-modal-header {
  padding: 24px 24px 0;
  border-bottom: 1px solid #e0e0e0;
}

.checkout-modal-header h2 {
  margin: 0 0 8px 0;
  font-size: 24px;
  color: #333;
}

/* Close button */
.checkout-modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  font-size: 28px;
  color: #999;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s;
}

.checkout-modal-close:hover {
  background: #f5f5f5;
  color: #333;
}

/* Modal body */
.checkout-modal-body {
  padding: 24px;
}

/* Booking summary */
.booking-summary {
  background: #f8f9fa;
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 24px;
}

.booking-summary-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.booking-summary-row:last-child {
  margin-bottom: 0;
  padding-top: 8px;
  border-top: 1px solid #dee2e6;
  font-weight: 600;
}

/* Form fields */
.checkout-form-group {
  margin-bottom: 16px;
}

.checkout-form-group label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  color: #333;
  font-size: 14px;
}

.checkout-form-group input:not([type="checkbox"]),
.checkout-form-group textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  box-sizing: border-box;
}

.checkout-form-group input:not([type="checkbox"]):focus,
.checkout-form-group textarea:focus {
  outline: none;
  border-color: #4a90e2;
  box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
}

.checkout-form-group textarea {
  resize: vertical;
  min-height: 80px;
}

/* Stripe Payment Element container */
#payment-element {
  margin: 20px 0;
}

/* Error messages */
#payment-errors,
#checkout-errors {
  color: #dc3545;
  font-size: 14px;
  margin-top: 12px;
  display: none;
}

/* Submit button */
.checkout-submit-btn {
  width: 100%;
  padding: 14px;
  background: #4a90e2;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  margin-top: 16px;
}

.checkout-submit-btn:hover:not(:disabled) {
  background: #357abd;
}

.checkout-submit-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
}

/* Loading spinner */
.checkout-spinner {
  display: none;
  width: 20px;
  height: 20px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #4a90e2;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 16px auto;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* YouTube opt-in section */
.youtube-opt-in {
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 16px;
}

.youtube-opt-in label {
  display: flex;
  align-items: center;
  cursor: pointer;
  margin: 0;
}

.youtube-opt-in input[type="checkbox"] {
  width: auto;
  margin-right: 8px;
}

/* Skip link */
.checkout-skip-link {
  display: block;
  text-align: center;
  color: #6c757d;
  text-decoration: underline;
  margin-top: 12px;
  cursor: pointer;
  font-size: 14px;
}

.checkout-skip-link:hover {
  color: #495057;
}