/* ============================================================
   VIA Jiu Jitsu Academy — Schedule Page Styles
   Inherits: variables, .section, .btn-primary, .reveal from main.css
   ============================================================ */

/* ============================================================
   SCHEDULE HEADER
   ============================================================ */
.sched-header {
  padding-top: 64px; /* nav height */
  background: var(--black);
  border-bottom: 1px solid rgba(168, 173, 139, 0.2);
  text-align: center;
}

.sched-header-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 28px 24px 24px;
}

.sched-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--olive);
  margin-bottom: 12px;
}

.sched-header h1 {
  font-size: clamp(32px, 7vw, 56px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--white);
  line-height: 1.1;
  margin-bottom: 12px;
}

.sched-address {
  font-size: 13px;
  color: var(--mid-gray);
  letter-spacing: 0.04em;
}

.sched-address a { color: var(--mid-gray); }
.sched-address a:hover { color: var(--olive); }

/* ============================================================
   SCHEDULE SECTION WRAPPER
   ============================================================ */
.sched-section {
  padding-top: 28px;
  padding-bottom: 40px;
  background: rgba(168,173,139,0.04);
  border-top: 1px solid rgba(168,173,139,0.18);
  border-bottom: 1px solid rgba(168,173,139,0.18);
}

/* ============================================================
   SCHEDULE SECTION HEAD — h2 + filter bar wrapper
   ============================================================ */
/* Mobile: transparent wrapper, existing stack unchanged */
.sched-section-head { margin-bottom: 14px; }
.sched-section-head .sched-filter-bar { margin-bottom: 0; }

/* Olive accent rule under schedule h2 — left-aligned
   (schedule.html uses sr-only span, not h2, so this only fires on index) */
.sched-section h2::after {
  content: '';
  display: block;
  width: 28px;
  height: 1.5px;
  background: var(--olive);
  margin: 10px 0 0;
}

/* Desktop: widen schedule columns beyond default section max-width */
@media (min-width: 769px) {
  .sched-section .section-inner {
    max-width: 1280px;
  }
}

/* ============================================================
   LEVEL LEGEND — tappable grid, always visible
   ============================================================ */
.sched-legend { margin-bottom: 20px; }

.sched-legend-title {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  margin: 0 0 10px;
  font-family: var(--font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mid-gray);
  cursor: pointer;
  text-align: left;
}

.sched-legend-toggle {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--mid-gray);
  border-bottom: 1.5px solid var(--mid-gray);
  transform: rotate(45deg);
  transition: transform 0.2s;
  flex-shrink: 0;
}
.sched-legend-title[aria-expanded="true"] .sched-legend-toggle {
  transform: rotate(-135deg);
}

.sched-legend-grid {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.sched-legend-grid.is-open { display: grid; }

.sched-legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 10px;
  background: rgba(239,241,241,0.04);
  border: 1px solid rgba(239,241,241,0.08);
  border-radius: 3px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  min-width: 0; /* allow flex children to shrink */
  overflow: hidden; /* clip any overflow */
  font-family: var(--font);
}
.sched-legend-row:hover,
.sched-legend-row:focus-visible {
  background: rgba(239,241,241,0.08);
  outline: none;
}

.sched-legend-name {
  flex: 1;
  min-width: 0; /* critical: allows text to wrap in flex context */
  font-size: 12px;
  font-weight: 600;
  color: var(--white);
  line-height: 1.3;
}

.sched-legend-chevron {
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--mid-gray);
  border-top: 1.5px solid var(--mid-gray);
  transform: rotate(45deg);
  flex-shrink: 0;
}

/* Mobile: box the toggle + stack badge above name */
@media (max-width: 768px) {
  /* Box treatment — accordion toggle on schedule.html only */
  .sched-legend:not(.sched-legend--home) .sched-legend-title {
    padding: 11px 12px;
    border: 1px solid rgba(168,173,139,0.2);
    background: rgba(168,173,139,0.04);
    border-radius: 3px;
    transition: border-color 0.2s, background 0.2s;
  }
  .sched-legend:not(.sched-legend--home) .sched-legend-title[aria-expanded="true"] {
    border-color: rgba(168,173,139,0.35);
    background: rgba(168,173,139,0.08);
  }

  /* Home legend — always-open panel with eyebrow title */
  .sched-legend--home {
    border: 1px solid rgba(168,173,139,0.15);
    border-radius: 3px;
    padding: 14px;
    background: rgba(168,173,139,0.03);
  }
  .sched-legend--home .sched-legend-title {
    color: var(--olive);
    font-size: 10px;
    letter-spacing: 0.14em;
    padding: 0;
    border: none;
    background: none;
    margin: 0 0 10px;
    cursor: default;
    pointer-events: none;
  }
  .sched-legend--home .sched-legend-toggle { display: none; }
  .sched-legend--home .sched-legend-grid   { display: grid; }

  .sched-legend-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    min-height: 60px;
    padding: 10px 28px 10px 10px;
    position: relative;
  }
  .sched-legend-chevron {
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -3px;
    transform: rotate(45deg);
  }
  .sched-legend-name {
    font-size: 13px;
  }
}

/* ============================================================
   LEVEL BADGE — base (legend + cards)
   ============================================================ */
.level-intro,
.level-intermediate,
.level-advanced,
.level-comp,
.level-kids,
.level-kickboxing,
.level-yoga,
.level-womens {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 2px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* White belt — intro, beginners welcome */
.level-intro        { border: 1px solid rgba(215,218,210,0.3);  color: rgba(215,218,210,0.6);  background: transparent; }
/* Blue belt — intermediate, consistent training */
.level-intermediate { border: 1px solid rgba(95,120,155,0.5);   color: rgba(115,145,185,0.9);  background: transparent; }
/* Purple belt — advanced, blue belt equiv */
.level-advanced     { border: 1px solid rgba(130,95,155,0.5);   color: rgba(155,115,185,0.9);  background: transparent; }
/* Brown belt — comp, invite/coach approval */
.level-comp         { border: 1px solid rgba(150,95,50,0.75);   color: var(--black);           background: rgba(150,95,50,0.85); }
/* Youth belt — kids, age-specific program */
.level-kids         { border: 1px solid rgba(175,140,55,0.5);   color: rgba(200,162,70,0.9);   background: transparent; }
/* Kickboxing — amber, unchanged */
.level-kickboxing   { border: 1px solid rgba(196,122,40,0.6);   color: rgba(196,122,40,0.9);   background: transparent; }
/* Yoga — sage teal */
.level-yoga         { border: 1px solid rgba(85,140,120,0.5);   color: rgba(100,160,140,0.9);  background: transparent; }
/* Women's Only — dusty rose */
.level-womens       { border: 1px solid rgba(175,95,115,0.5);   color: rgba(195,115,135,0.9);  background: transparent; }

/* Comp ★ indicator */
.sched-badge.level-comp .badge-full::before,
.sched-badge.level-comp .badge-short::before {
  content: '★ ';
  font-size: 0.9em;
}

/* ============================================================
   DAY TABS (mobile only)
   ============================================================ */
.sched-tabs {
  display: flex;
  border: 1px solid rgba(168, 173, 139, 0.2);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 16px;
}

.sched-tab {
  flex: 1;
  background: transparent;
  border: none;
  border-right: 1px solid rgba(168, 173, 139, 0.2);
  color: var(--mid-gray);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0;
  height: 44px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.sched-tab:last-child { border-right: none; }

.sched-tab:hover {
  background: rgba(168, 173, 139, 0.1);
  color: var(--white);
}

.sched-tab--active,
.sched-tab[aria-selected="true"] {
  background: var(--olive);
  color: var(--black);
}

/* ============================================================
   SCHEDULE GRID
   ============================================================ */
.sched-grid {
  display: flex;
  flex-direction: column;
}

.sched-day {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sched-day[hidden] { display: none; }

/* Day column label — <p> avoids main.css h2 size/counter overrides.
   Hidden on mobile (active tab = label). Shown on desktop. */
.sched-day-label {
  display: none;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--olive);
  margin: 0 0 6px;
  line-height: 1;
}

/* ============================================================
   CLASS CARD — MOBILE GRID LAYOUT
   Row 1: TIME | CLASS NAME | BADGE
   Row 2:  —   | INSTRUCTOR |  —
   display:contents on .sched-class-info promotes its children
   directly into the outer grid — reliable across all browsers.
   ============================================================ */
.sched-class {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "time name badge"
    ".    instr .    ";
  column-gap: 12px;
  row-gap: 3px;
  align-items: start;
  padding: 12px 14px;
  border-radius: 3px;
  border-left: 3px solid transparent;
  border-bottom: 1px solid rgba(168, 173, 139, 0.08);
  transition: background 0.1s;
}

.sched-class:active {
  background: rgba(168, 173, 139, 0.18) !important;
}

/* Level-based card tints + left-border colors — belt color progression */
.level-intro-bg        { border-left-color: rgba(215,218,210,0.18); background: rgba(215,218,210,0.02); }
.level-intermediate-bg { border-left-color: rgba(95,120,155,0.38);  background: rgba(95,120,155,0.04);  }
.level-advanced-bg     { border-left-color: rgba(130,95,155,0.38);  background: rgba(130,95,155,0.04);  }
.level-comp-bg         { border-left-color: rgba(150,95,50,0.55);   background: rgba(150,95,50,0.06);   }
.level-kids-bg         { border-left-color: rgba(175,140,55,0.42);  background: rgba(175,140,55,0.05);  }
.level-kickboxing-bg   { border-left-color: rgba(196,122,40,0.5);   background: rgba(196,122,40,0.04);  }
.level-yoga-bg         { border-left-color: rgba(85,140,120,0.4);   background: rgba(85,140,120,0.04);  }
.level-womens-bg       { border-left-color: rgba(175,95,115,0.4);   background: rgba(175,95,115,0.04);  }

.sched-time {
  grid-area: time;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--white);
  white-space: nowrap;
  font-style: normal;
  padding-top: 2px; /* optical align with class name */
}

/* display:contents removes the wrapper from layout;
   its children (.sched-class-name, .sched-instructor) participate
   directly in the parent grid and pick up their grid-area values. */
.sched-class-info {
  display: contents;
}

.sched-class-name {
  grid-area: name;
  font-size: 17px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.01em;
  line-height: 1.2;
}

.sched-instructor {
  grid-area: instr;
  font-size: 12px;
  color: var(--mid-gray);
  letter-spacing: 0.02em;
  line-height: 1.3;
}

/* Hidden when instructor is pending — grid row collapses automatically */
.sched-instructor[data-pending] {
  display: none;
}

.sched-badge {
  grid-area: badge;
  align-self: start;
  flex-shrink: 0;
}

/* ============================================================
   SCHEDULE NOTE
   ============================================================ */
.sched-note {
  margin-top: 20px;
  font-size: 12px;
  color: var(--mid-gray);
  text-align: center;
}

.sched-full-link {
  font-weight: 700;
  color: var(--olive);
  letter-spacing: 0.04em;
}
.sched-full-link:hover { text-decoration: underline; }

/* ============================================================
   CTA STRIP
   ============================================================ */
.sched-cta-strip {
  background: rgba(168, 173, 139, 0.06);
  border-top: 1px solid rgba(168, 173, 139, 0.15);
  border-bottom: 1px solid rgba(168, 173, 139, 0.15);
  padding: 40px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.sched-cta-text {
  font-size: 22px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.01em;
}

/* Badge spans: always show short label on cards; full label hidden */
.badge-full { display: none; }

/* Time-of-day period labels — hidden on mobile, shown on desktop */
.sched-period-label { display: none; }

/* ============================================================
   FILTER BAR
   ============================================================ */
.sched-filter-bar {
  display: flex;
  gap: 5px;
  margin-bottom: 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.sched-filter-bar::-webkit-scrollbar { display: none; }
.sched-filter-btn {
  flex-shrink: 0;
  padding: 0 10px;
  height: 32px;
  border-radius: 3px;
  border: 1px solid rgba(168,173,139,0.25);
  background: transparent;
  color: var(--mid-gray);
  font-family: var(--font);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.sched-filter-btn:hover { color: var(--white); border-color: rgba(168,173,139,0.5); }

/* Inactive belt-color hints — buttons whisper their identity at rest */
.sched-filter-btn[data-filter="intro"]    { border-color: rgba(215,218,210,0.2);  color: rgba(215,218,210,0.5);  }
.sched-filter-btn[data-filter="advanced"] { border-color: rgba(130,95,155,0.3);   color: rgba(155,115,185,0.55); }
.sched-filter-btn[data-filter="comp"]     { border-color: rgba(150,95,50,0.3);    color: rgba(175,115,65,0.55);  }
.sched-filter-btn[data-filter="kids"]     { border-color: rgba(175,140,55,0.3);   color: rgba(200,162,70,0.55);  }
.sched-filter-btn[data-filter="yoga"]     { border-color: rgba(85,140,120,0.4);   color: rgba(100,160,140,0.7);  }
.sched-filter-btn[data-filter="womens"]   { border-color: rgba(175,95,115,0.4);   color: rgba(195,115,135,0.7);  }

/* Active: All → olive (default); each level → full belt color */
.sched-filter-btn--active                             { background: var(--olive);            color: var(--black);           border-color: var(--olive);           }
.sched-filter-btn--active[data-filter="intro"]        { background: rgba(215,218,210,0.12);  color: rgba(215,218,210,0.95); border-color: rgba(215,218,210,0.45); }
.sched-filter-btn--active[data-filter="advanced"]     { background: rgba(130,95,155,0.18);   color: rgba(155,115,185,1);    border-color: rgba(130,95,155,0.6);   }
.sched-filter-btn--active[data-filter="comp"]         { background: rgba(150,95,50,0.85);    color: var(--black);           border-color: rgba(150,95,50,0.85);   }
.sched-filter-btn--active[data-filter="kids"]         { background: rgba(175,140,55,0.18);   color: rgba(200,162,70,1);     border-color: rgba(175,140,55,0.6);   }
.sched-filter-btn--active[data-filter="yoga"]         { background: rgba(85,140,120,0.15);   color: rgba(100,160,140,1);    border-color: rgba(85,140,120,0.6);   }
.sched-filter-btn--active[data-filter="womens"]       { background: rgba(175,95,115,0.15);   color: rgba(195,115,135,1);    border-color: rgba(175,95,115,0.6);   }

@media print { .sched-filter-bar { display: none !important; } }

/* ============================================================
   EMPTY DAY STATE
   ============================================================ */
.sched-empty-day {
  font-size: 12px;
  color: var(--mid-gray, #909090);
  font-style: italic;
  padding: 12px 0 4px;
  margin: 0;
  letter-spacing: 0.03em;
}

/* ============================================================
   FILTER — hidden cards collapse completely
   ============================================================ */
.sched-class--hidden {
  display: none !important;
}

/* Period label hidden state — display:none OK here (no cards showing below it) */
.sched-period-label--hidden {
  display: none;
}

/* ============================================================
   DESKTOP (≥769px) — 6 columns, tabs hidden, legend always open
   ============================================================ */
@media (min-width: 769px) {

  .sched-header-inner {
    padding: 48px 32px 40px;
  }

  .sched-legend-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
  .sched-legend-toggle { display: none; }
  .sched-legend-title { cursor: default; pointer-events: none; }

  .sched-filter-btn { flex: 1; min-width: 0; padding: 0 2px; font-size: 11px; }
  .sched-filter-btn:first-child { flex: 0.5; }

  /* Section head: heading left, filter bar right */
  .sched-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 20px;
  }
  .sched-section-head h2 { margin-bottom: 0; padding-bottom: 0; }
  .sched-section-head .sched-filter-bar {
    margin-bottom: 0;
    flex-shrink: 0;
    width: auto;
  }
  .sched-section-head .sched-filter-btn { min-width: 72px; flex: none; }

  /* Today column spotlight */
  .sched-day--today {
    background: rgba(168,173,139,0.08);
    border-radius: 4px;
    padding: 10px 8px 8px;
    margin: 0 -8px;
  }
  .sched-day--today .sched-day-label {
    color: var(--white);
    border-bottom-color: rgba(168,173,139,0.55);
    padding-left: 0;
  }

  /* Hide tab bar */
  .sched-tabs { display: none; }

  /* 6-column grid */
  .sched-grid {
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
  }

  .sched-day {
    flex: 1;
    min-width: 0;
    gap: 6px;
  }

  .sched-day[hidden] { display: flex !important; }

  .sched-day-label {
    display: block;
    font-size: 13px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(168, 173, 139, 0.2);
    margin-bottom: 2px;
  }

  /* Desktop cards: simple flex column (columns are narrow) */
  .sched-class {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    padding: 10px 10px;
    border-bottom-color: rgba(168, 173, 139, 0.12);
  }

  /* Restore wrapper — spans need explicit block to stack on desktop */
  .sched-class-info {
    display: block;
    width: 100%;
  }

  .sched-time {
    font-size: 11px;
    color: var(--mid-gray);
    padding-top: 0;
  }

  .sched-class-name {
    display: block;
    font-size: 14px;
    line-height: 1.3;
    white-space: normal;
  }

  /* Instructor shown only in detail sheet on desktop */
  .sched-instructor { display: none; }

  /* Badge: show short label, hide full label */
  .badge-full  { display: none; }
  .badge-short { display: inline; }

  .sched-badge {
    margin-top: 4px;
    align-self: auto;
  }

  .sched-cta-strip {
    flex-direction: row;
    justify-content: center;
    gap: 32px;
    padding: 48px 32px;
  }

  /* Period break labels within day columns */
  .sched-period-label {
    display: block;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(168, 173, 139, 0.45);
    padding: 12px 0 4px;
    border-top: 1px solid rgba(168, 173, 139, 0.1);
    margin-top: 6px;
  }
  .sched-period-label:first-child {
    padding-top: 0;
    border-top: none;
    margin-top: 0;
  }
}

/* ============================================================
   CLASS DETAIL SHEET
   ============================================================ */

/* Overlay */
.class-sheet-overlay {
  position: fixed; inset: 0;
  background: rgba(32, 36, 38, 0.75);
  z-index: 200;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
}
.class-sheet-overlay.is-open { opacity: 1; pointer-events: all; }

/* Sheet — mobile bottom drawer */
.class-sheet {
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 201;
  background: var(--black);
  border-top: 1px solid rgba(168, 173, 139, 0.25);
  border-radius: 12px 12px 0 0;
  max-height: 85vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}
.class-sheet.is-open { transform: translateY(0); }

/* Handle + Close */
.class-sheet-handle {
  width: 36px; height: 4px;
  background: rgba(168, 173, 139, 0.3); border-radius: 2px;
  margin: 12px auto 0;
}
.class-sheet-close {
  position: absolute; top: 12px; right: 16px;
  background: none; border: none; color: var(--mid-gray);
  font-size: 18px; cursor: pointer;
  min-width: 44px; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
}
.class-sheet-close:hover { color: var(--white); }

/* Body typography */
.class-sheet-body { padding: 12px 20px 32px; }

.class-sheet-badge {
  display: inline-block;
  font-size: 10px;
}

.class-sheet-title {
  font-size: 22px;
  font-weight: 900;
  color: var(--white);
  margin: 8px 0 4px;
  /* Reset main.css h2 counter */
  counter-increment: none;
}
.class-sheet-title::before { display: none !important; }

.class-sheet-meta {
  font-size: 13px;
  color: var(--mid-gray);
  margin-bottom: 16px;
}

.class-sheet-rule {
  border: none;
  border-top: 1px solid rgba(168, 173, 139, 0.15);
  margin: 0 0 16px;
}

.class-sheet-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--olive);
  margin-bottom: 4px;
  margin-top: 14px;
}

.class-sheet-value {
  font-size: 14px;
  color: #c0c0c0;
  line-height: 1.6;
  margin: 0;
}

.class-sheet-value--dim { opacity: 0.5; }


/* Card affordance */
.sched-class { position: relative; cursor: pointer; }
.sched-class-btn {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  background: none; border: none; cursor: pointer;
}
.sched-class:focus-within { outline: 2px solid var(--olive); outline-offset: 2px; }

/* Desktop popover (≥769px) */
@media (min-width: 769px) {
  .class-sheet-overlay { background: transparent; }
  .class-sheet-overlay.is-drawer-active { background: rgba(32, 36, 38, 0.75); }

  .class-sheet {
    position: fixed; bottom: auto; left: auto; right: auto;
    border-radius: 4px;
    border: 1px solid rgba(168, 173, 139, 0.25);
    border-top: 1px solid rgba(168, 173, 139, 0.25);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    max-width: 300px; width: 300px; max-height: 80vh;
    transform: none; opacity: 0; pointer-events: none;
    transition: opacity 0.18s ease;
  }
  .class-sheet.is-open { opacity: 1; pointer-events: all; }
  .class-sheet-handle { display: none; }

  /* Program legend sheets — centered modal on desktop */
  .class-sheet.is-drawer {
    bottom: auto; left: 50%; right: auto;
    top: 50%;
    transform: translate(-50%, -44%) scale(0.97);
    max-width: 480px;
    width: calc(100% - 48px);
    max-height: 85vh;
    border-radius: 6px;
    border: 1px solid rgba(168, 173, 139, 0.25);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  .class-sheet.is-drawer .class-sheet-handle { display: none; }
  .class-sheet.is-drawer.is-open {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    pointer-events: all;
  }
}

/* Print — exclude sheet */
@media print {
  .class-sheet, .class-sheet-overlay { display: none !important; }
}

/* Print header + print legend — hidden on screen, shown only in @media print below */
@media screen {
  .print-header { display: none !important; }
  .print-legend  { display: none; }
}

/* ============================================================
   PRINT / PDF — Branded premium document
   ============================================================ */
@media print {
  @page {
    size: landscape;
    margin: 0.5cm 0.75cm;
  }

  /* ── Page reset ─────────────────────────────────────────── */
  html, body {
    background: #fff !important;
    color: #111 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* ── Hide screen chrome ─────────────────────────────────── */
  nav, footer, .grain, .sched-header, .sched-tabs,
  .sched-cta-strip, .sched-note, .skip-link,
  .sched-legend, .sched-filter-bar { display: none !important; }

  /* ── Branded header ─────────────────────────────────────── */
  .print-header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12pt;
    padding-bottom: 7pt;
    margin-bottom: 5pt;
    border-bottom: 2.5pt solid #A8AD8B;
  }

  .print-logo {
    height: 18pt;
    width: auto;
    flex-shrink: 0;
  }

  .print-header-center {
    flex: 1;
    text-align: center;
  }

  .print-header-title {
    font-family: Arial, sans-serif;
    font-size: 14pt;
    font-weight: 900;
    color: #111;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
  }

  .print-header-season {
    font-family: Arial, sans-serif;
    font-size: 7pt;
    color: #A8AD8B;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-top: 3pt;
  }

  .print-header-contact {
    font-family: Arial, sans-serif;
    font-size: 7pt;
    color: #777;
    text-align: right;
    line-height: 1.6;
    letter-spacing: 0.03em;
    flex-shrink: 0;
  }

  /* ── Compact print color key ────────────────────────────── */
  .print-legend {
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 3pt 14pt;
    align-items: center;
    justify-content: center;
    padding: 4pt 0 5pt;
    border-bottom: 0.5pt solid #ddd;
    margin-bottom: 5pt;
  }
  .pl-item {
    display: inline-flex;
    align-items: center;
    gap: 4pt;
    font-family: Arial, sans-serif;
    font-size: 6pt;
    color: #666;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .pl-dot {
    width: 7pt;
    height: 7pt;
    border-radius: 1pt;
    display: inline-block;
    flex-shrink: 0;
  }
  .pl-intro      .pl-dot { background: #ccc; }
  .pl-advanced   .pl-dot { background: #82609B; }
  .pl-comp       .pl-dot { background: #965F32; }
  .pl-kids       .pl-dot { background: #AF8C37; }
  .pl-kickboxing .pl-dot { background: #c47a28; }
  .pl-yoga       .pl-dot { background: #3a7a62; }
  .pl-womens     .pl-dot { background: #8b3a52; }

  /* ── Layout ─────────────────────────────────────────────── */
  .sched-section {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .section-inner {
    max-width: 100% !important;
    padding: 0 !important;
  }

  .sched-grid {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 4pt !important;
  }

  .sched-day {
    display: flex !important;
    flex: 1 !important;
    min-width: 0 !important;
    flex-direction: column !important;
    gap: 2pt !important;
  }

  .sched-day[hidden] { display: flex !important; }

  /* Day column header */
  .sched-day-label {
    display: block !important;
    font-family: Arial, sans-serif;
    font-size: 7.5pt !important;
    font-weight: 900 !important;
    color: #111 !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    margin: 0 0 3pt !important;
    padding-bottom: 4pt !important;
    border-bottom: 2pt solid #A8AD8B !important;
  }

  /* ── Class cards ─────────────────────────────────────────── */
  .sched-class {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
    padding: 3pt 4pt 3pt 5pt !important;
    border-radius: 0 !important;
    border-bottom: none !important;
    break-inside: avoid;
  }

  /* Respect active filter in print */
  .sched-class--hidden          { display: none !important; }
  .sched-period-label--hidden   { display: none !important; }

  /* Restore wrapper — critical for name/instructor stacking */
  .sched-class-info {
    display: block !important;
    width: 100% !important;
  }

  /* FIX: spans must be block so instructor stacks below class name */
  .sched-class-name {
    display: block !important;
    font-family: Arial, sans-serif;
    font-size: 8pt !important;
    font-weight: 700 !important;
    color: #111 !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
    margin-bottom: 1.5pt !important;
  }

  .sched-instructor {
    display: block !important;
    font-family: Arial, sans-serif;
    font-size: 6.5pt !important;
    color: #777 !important;
    line-height: 1.3 !important;
    margin-bottom: 2pt !important;
  }

  .sched-instructor[data-pending] { display: none !important; }

  .sched-time {
    font-family: Arial, sans-serif;
    font-size: 6.5pt !important;
    font-weight: 700 !important;
    color: #A8AD8B !important;
    letter-spacing: 0.05em !important;
    padding-top: 0 !important;
    margin-bottom: 2pt !important;
  }

  /* Level card tints + left border accent — belt color progression */
  .level-intro-bg        { border-left: 2pt solid #ccc !important;    background: #fafafa !important; }
  .level-intermediate-bg { border-left: 2pt solid #5F7899 !important; background: #f0f3f7 !important; }
  .level-advanced-bg     { border-left: 2pt solid #82609B !important; background: #f4f0f7 !important; }
  .level-comp-bg         { border-left: 2pt solid #965F32 !important; background: #faf4ee !important; }
  .level-kids-bg         { border-left: 2pt solid #AF8C37 !important; background: #fdf9ee !important; }
  .level-yoga-bg         { border-left: 2pt solid #3a7a62 !important; background: #eef5f2 !important; }
  .level-womens-bg       { border-left: 2pt solid #8b3a52 !important; background: #f7eef1 !important; }

  /* Level badges */
  .level-intro,
  .level-intermediate,
  .level-advanced,
  .level-comp,
  .level-kids,
  .level-kickboxing,
  .level-yoga,
  .level-womens {
    font-family: Arial, sans-serif;
    font-size: 5.5pt !important;
    padding: 1pt 3pt !important;
    border-radius: 1pt !important;
    letter-spacing: 0.1em !important;
  }

  /* White belt */ .level-intro        { border-color: #ccc !important;    color: #999 !important;    background: transparent !important; }
  /* Blue belt  */ .level-intermediate { border-color: #5F7899 !important; color: #3a5575 !important; background: transparent !important; }
  /* Purple belt*/ .level-advanced     { border-color: #82609B !important; color: #5a3d75 !important; background: transparent !important; }
  /* Brown belt */ .level-comp         { border-color: #965F32 !important; color: #fff !important;    background: #965F32 !important; }
  /* Youth gold */ .level-kids         { border-color: #AF8C37 !important; color: #7a6018 !important; background: transparent !important; }
  /* Kickboxing */ .level-kickboxing   { border-color: #c47a28 !important; color: #7a4a10 !important; background: transparent !important; }
  /* Sage      */ .level-yoga         { border-color: #3a7a62 !important; color: #3a7a62 !important; background: transparent !important; }
  /* Rose      */ .level-womens       { border-color: #8b3a52 !important; color: #8b3a52 !important; background: transparent !important; }

  .sched-badge {
    margin-top: 0 !important;
    align-self: flex-start !important;
  }
}