/*
 * GroovaClass design system — daylight + mango gradient.
 * Tokens, base elements, components and the site chrome (header). Every page loads this
 * after main.css. design-book.html renders every piece here; add new components there first.
 *
 * Legacy page markup (inline styles, page <style> blocks, emoji icons) is mapped onto these
 * tokens by scripts/theme.js. Rules below that restyle legacy class names are prefixed with
 * `body` so they win over the page's own <style> block regardless of order.
 */
:root {
  /* Brand: ripe-mango gradient on ink. Text on mango is always ink (white fails contrast). */
  --gc-mango-1: #ffd84d;
  --gc-mango: #ffc220;
  --gc-mango-deep: #ff9f1c;
  --gc-grad: linear-gradient(135deg, #ffd84d 0%, #ffc220 45%, #ff9f1c 100%);
  --gc-grad-btn: linear-gradient(100deg, #ffd84d 0%, #ffbe22 55%, #ff9f1c 100%);
  --gc-mango-tint: #fff4d6;
  --gc-mango-line: #f3d27e;
  --gc-accent-ink: #8f5200;       /* mango-family text on light surfaces (6:1 on white) */

  /* Neutrals (warm) */
  --gc-ink: #141517;
  --gc-muted: #5a5e63;            /* secondary text, 6.6:1 on white */
  --gc-subtle: #6e7176;           /* tertiary text, 4.9:1 on white */
  --gc-control: #8a867e;          /* input and outline-button borders, 3.6:1 on white */
  --gc-line: #e6e2d9;             /* static dividers and card outlines */
  --gc-chip: #eeebe4;
  --gc-sunken: #f5f3ee;
  --gc-bg: #f7f5f0;
  --gc-surface: #ffffff;
  --gc-fill: #efece6;             /* quiet filled controls: secondary buttons, search, chips */
  --gc-fill-hover: #e6e2da;
  --gc-hair: #ebe7df;             /* hairlines between sections and around cards */

  /* Status (warnings are never yellow: yellow is the brand) */
  --gc-success: #1e7a46;
  --gc-success-tint: #e7f4ec;
  --gc-success-line: #a9d6ba;
  --gc-warn: #b4530a;
  --gc-warn-tint: #fdeedd;
  --gc-danger: #c4291c;
  --gc-danger-tint: #fcecea;
  --gc-danger-line: #f0b3ab;
  --gc-rose: #d6336c;             /* favourites */
  --gc-rose-tint: #fde8ef;

  /* Dance styles: small dots and tags only, never whole surfaces */
  --gc-style-kpop: #ff7ab8;
  --gc-style-house: #9b7bff;
  --gc-style-hiphop: #4f9dff;
  --gc-style-hardstyle: #8fd12f;
  --gc-style-freestyle: #22b8a6;
  --gc-style-fitcho: #f26a3d;     /* R-013: the dance-fitness series (D-82) */

  /* Shape, depth, type */
  --gc-r-sm: 8px;
  --gc-r: 12px;
  --gc-r-lg: 16px;
  --gc-shadow-1: 0 1px 2px rgba(20, 21, 23, 0.06), 0 2px 8px -2px rgba(20, 21, 23, 0.08);
  --gc-shadow-2: 0 14px 32px -14px rgba(20, 21, 23, 0.3);
  --gc-focus: rgba(255, 178, 30, 0.55);
  --gc-font: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gc-header-h: 56px;
  --gc-stage-h: min(72vh, 640px);   /* Class video stage height (vertical video) */
}
/* CR-36: on iPhone 1vh is the screen without Safari's toolbars; svh is what is actually visible */
@supports (height: 1svh) { :root { --gc-stage-h: min(72svh, 640px); } }

/* ---------- Base ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-color: var(--gc-control) transparent; }
body {
  font-family: var(--gc-font);
  background: var(--gc-bg);
  color: var(--gc-ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--gc-mango-tint); color: var(--gc-ink); }
:focus-visible { outline: 2px solid var(--gc-ink); outline-offset: 2px; }

h1, h2 { font-weight: 800; font-stretch: 75%; line-height: 1.1; letter-spacing: 0; color: var(--gc-ink); }
h3 { font-weight: 750; line-height: 1.25; color: var(--gc-ink); }
h4, h5 { font-weight: 700; line-height: 1.3; color: var(--gc-ink); }
strong, b { font-weight: 700; }

:where(a) { color: var(--gc-ink); text-decoration-color: var(--gc-mango-deep); text-underline-offset: 0.2em; }
:where(button, input, select, textarea) { font: inherit; }
:where(button) {
  min-height: 36px;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--gc-control);
  border-radius: var(--gc-r-sm);
  background: var(--gc-surface);
  color: var(--gc-ink);
  font-weight: 650;
  cursor: pointer;
}
:where(button:disabled) { opacity: 0.5; cursor: not-allowed; }
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]), select, textarea) {
  border: 1px solid var(--gc-control);
  border-radius: var(--gc-r-sm);
  background: var(--gc-surface);
  color: var(--gc-ink);
  padding: 0.5rem 0.75rem;
}
:where(input, select, textarea):focus-visible { outline: none; border-color: var(--gc-ink); box-shadow: 0 0 0 3px var(--gc-focus); }
::placeholder { color: var(--gc-subtle); opacity: 1; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--gc-ink); }
:where(table) { border-collapse: collapse; }
:where(th) { text-align: left; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gc-muted); }
:where(th, td) { padding: 0.5rem 0.625rem; border-bottom: 1px solid var(--gc-line); }
hr { border: 0; border-top: 1px solid var(--gc-line); }

/* Line icons (theme.js swaps emoji for these; site-header.js draws the header's) */
.gc-ic { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; }
.gc-ic[aria-hidden="true"] { margin-right: 0.4em; }
.gc-ic-dot { color: var(--gc-mango-deep); }
.gc-ic-heartFill { color: var(--gc-rose); }
/* Text kept for screen readers and scripts while its emoji glyph is replaced by an icon */
.gc-sr { position: absolute !important; left: 0; top: 0; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Components (use these in new markup) ---------- */
.gc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 44px; padding: 0 1.125rem; border: 0; border-radius: var(--gc-r-sm);
  font: 700 1rem/1 var(--gc-font); text-decoration: none; cursor: pointer;
  transition: filter 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.gc-btn:active { transform: translateY(1px); }
.gc-btn--primary { background: var(--gc-mango) var(--gc-grad-btn); color: var(--gc-ink); }
.gc-btn--primary:hover { filter: saturate(1.15) brightness(1.02); }
.gc-btn--secondary { background: var(--gc-surface); color: var(--gc-ink); box-shadow: inset 0 0 0 1px var(--gc-control); }
.gc-btn--secondary:hover { box-shadow: inset 0 0 0 1.5px var(--gc-ink); }
.gc-btn--ghost { background: transparent; color: var(--gc-ink); text-decoration: underline; text-decoration-color: var(--gc-mango-deep); text-decoration-thickness: 2px; text-underline-offset: 0.25em; padding: 0 0.25rem; }
.gc-btn--danger { background: var(--gc-surface); color: var(--gc-danger); box-shadow: inset 0 0 0 1px var(--gc-danger-line); }
.gc-btn--danger:hover { background: var(--gc-danger-tint); }
.gc-btn--block { width: 100%; }
.gc-btn:disabled { opacity: 0.5; cursor: not-allowed; filter: none; transform: none; }

.gc-card { background: var(--gc-surface); border-radius: var(--gc-r-lg); box-shadow: inset 0 0 0 1px var(--gc-line); padding: 1.25rem; }
.gc-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border: 0; border-radius: 999px;
  background: var(--gc-surface); box-shadow: inset 0 0 0 1px var(--gc-control); color: var(--gc-ink); font-weight: 650; font-size: 0.875rem;
}
.gc-chip.is-on, .gc-chip[aria-pressed="true"] { background: var(--gc-mango) var(--gc-grad); box-shadow: none; }
.gc-tag { display: inline-flex; align-items: center; gap: 5px; padding: 0.2rem 0.6rem; border-radius: 999px; background: var(--gc-chip); font-size: 0.6875rem; font-weight: 750; letter-spacing: 0.04em; text-transform: uppercase; }
.gc-status { display: inline-flex; align-items: center; gap: 6px; padding: 0.2rem 0.65rem; border-radius: 999px; font-size: 0.8125rem; font-weight: 700; }
.gc-status--ok { background: var(--gc-success-tint); color: var(--gc-success); }
.gc-status--warn { background: var(--gc-warn-tint); color: var(--gc-warn); }
.gc-status--bad { background: var(--gc-danger-tint); color: var(--gc-danger); }
.gc-status--muted { background: var(--gc-chip); color: var(--gc-muted); text-decoration: line-through; }
.gc-figure { font-weight: 800; font-stretch: 70%; line-height: 1; font-variant-numeric: tabular-nums; }
.gc-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gc-muted); }
.gc-empty { padding: 1rem 1.25rem; background: var(--gc-surface); border-radius: var(--gc-r); box-shadow: inset 0 0 0 1px var(--gc-line); color: var(--gc-muted); display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* ---------- Legacy components on the new look ---------- */
/* Cards and panels */
body .profile-card, body .venue-card, body .admin-card, body .auth-container {
  background: var(--gc-surface);
  border-radius: var(--gc-r-lg);
  box-shadow: inset 0 0 0 1px var(--gc-line);
}
body .profile-card h2, body .venue-card h2, body .admin-card h2 { font-size: 1.75rem; font-weight: 800; font-stretch: 75%; letter-spacing: 0; text-transform: none; }
body .profile-card h3, body .venue-card h3, body .admin-card h3 { font-size: 1.125rem; }
body .transaction-item, body .registration-item, body .notification-item, body .item-card, body .user-item, body .lot-item { border-radius: var(--gc-r); }
body .notification-item.unread .notification-title::before {
  content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%;
  background: var(--gc-mango-deep); vertical-align: 0.1em;
}
body .notification-type .gc-ic { width: 1.25rem; height: 1.25rem; color: var(--gc-muted); }

/* Profile header and balance */
body .profile-avatar { background: var(--gc-mango) var(--gc-grad); color: var(--gc-ink); font-weight: 800; }
body .fitcoins-display { background: var(--gc-mango-tint); border-radius: var(--gc-r); }
body .fitcoins-amount { color: var(--gc-ink); font-size: 2.5rem; font-weight: 800; font-stretch: 70%; line-height: 1; font-variant-numeric: tabular-nums; }
body .fitcoins-label { color: var(--gc-muted); }
body .earnings-box { background: var(--gc-mango-tint); border-radius: var(--gc-r); }
body .earnings-box .amount { color: var(--gc-ink); font-weight: 800; font-stretch: 70%; font-size: 1.75rem; }

/* Section tabs: underline */
body .tab-nav, body .admin-tab-nav, body .auth-tabs { border-bottom: 1px solid var(--gc-line); gap: 4px; scrollbar-width: none; }
body .tab-nav, body .admin-tab-nav { overflow-x: auto; }
body .tab-nav .tab-btn, body .admin-tab-btn, body .auth-tab {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.875rem; border: 0; border-bottom: 3px solid transparent;
  border-radius: 0; background: none; color: var(--gc-muted); font-weight: 650; margin-bottom: -1px; white-space: nowrap;
}
body .auth-tab { justify-content: center; }
body .tab-nav .tab-btn:hover, body .admin-tab-btn:hover, body .auth-tab:hover { color: var(--gc-ink); }
body .tab-nav .tab-btn.active, body .admin-tab-btn.active, body .auth-tab.active { color: var(--gc-ink); border-bottom-color: var(--gc-mango-deep); }

/* View chips: the home page's Class tabs and the admin's sub-tabs */
body #adminTabs .tab-btn, body #customerTabs .tab-btn, body .cancel-subtab-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px; margin: 0 6px 8px 0;
  border: 0; border-radius: 999px; background: var(--gc-surface); box-shadow: inset 0 0 0 1px var(--gc-control);
  color: var(--gc-ink); font-weight: 650; font-size: 0.9375rem;
}
body #adminTabs .tab-btn:hover, body #customerTabs .tab-btn:hover, body .cancel-subtab-btn:hover:not(.active) { box-shadow: inset 0 0 0 1.5px var(--gc-ink); background: var(--gc-surface); color: var(--gc-ink); }
body #adminTabs .tab-btn.active, body #customerTabs .tab-btn.active, body .cancel-subtab-btn.active { background: var(--gc-mango) var(--gc-grad); box-shadow: none; color: var(--gc-ink); }

/* Class cards: vertical photos. YouTube Shorts thumbnails (hqdefault, 4:3) carry the
   portrait frame in the middle with black bars; crop to that frame at 4:5. */
body .video-card > img {
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 5;
  object-fit: cover !important;
  background: var(--gc-sunken) !important;
}
body .video-card > img[src*="img.youtube.com"], body .video-card > img[src*="ytimg.com"] {
  width: 237% !important;
  max-width: none;
  aspect-ratio: 4 / 3;
  margin: -26.4% 0 -26.4% -68.5%;
}
body .video-card > img + div { aspect-ratio: 4 / 5; height: auto !important; }
/* Tag on its own line, title up to two lines (the card markup forces one line). */
body .video-card-content > div:first-child { flex-wrap: wrap !important; row-gap: 6px !important; }
body .video-card-content h3 {
  flex-basis: 100%;
  white-space: normal !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 1.0625rem !important;
  font-weight: 700;
  line-height: 1.25 !important;
}
body .video-card .category-badge { margin: 0 !important; }

/* Class modal: the video plays on an ink stage at vertical size. */
body #videoModal .modal-content { background: linear-gradient(var(--gc-ink) 0 var(--gc-stage-h), var(--gc-surface) 0); }
body #youtubeEmbed {
  display: block;
  height: var(--gc-stage-h) !important;
  width: auto !important;
  max-width: 100%;
  aspect-ratio: 9 / 16 !important;
  margin: 0 auto;
  border-radius: 0 !important;
}
body #modalMusicSection { margin: 1rem 1.5rem 0 !important; border-radius: var(--gc-r) !important; }
body #videoModal .live-events-section, body #videoModal .reviews-section { margin: 1rem 1.5rem 0; }
body #videoModal .modal-content > :last-child, body #videoModal .video-info > :last-child { margin-bottom: 1.5rem; }
@media (max-width: 768px) {
  body #modalMusicSection { margin: 1rem 1rem 0 !important; }
  body #videoModal .live-events-section, body #videoModal .reviews-section { margin: 1rem 0 0; }
}

/* ---------- Site header ---------- */
#site-header {
  position: sticky;
  top: 0;
  z-index: 900;
  padding: 0;
  background: var(--gc-surface);
  color: var(--gc-ink);
  box-shadow: none;
  border-bottom: 1px solid var(--gc-line);
  font-family: var(--gc-font);
  font-size: 1rem;
  line-height: 1.25;
}

#site-header a { text-decoration: none; }

#site-header :focus-visible {
  outline: 2px solid var(--gc-ink);
  outline-offset: 2px;
  border-radius: 6px;
}

#site-header .gch-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: 1200px;
  height: var(--gc-header-h);
  margin: 0 auto;
  padding: 0 2rem;
}

/* Brand: Hanson's G/C symbol in ink on a mango tile (interim cut from the concept art) */
#site-header .gch-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-right: 20px;
  color: var(--gc-ink);
  font-weight: 800;
  font-stretch: 75%;
  font-size: 1.375rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
#site-header .gch-mark {
  position: relative;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--gc-mango) var(--gc-grad);
}
#site-header .gch-mark::after {
  content: '';
  position: absolute;
  inset: 5px;
  background: var(--gc-ink);
  -webkit-mask: url(../images/gc-mark.svg) center / contain no-repeat;
  mask: url(../images/gc-mark.svg) center / contain no-repeat;
}

/* Menu wrapper: dissolves into the bar on wide screens, becomes the dropdown on phones */
#site-header .gch-menu { display: contents; }

#site-header .gch-links {
  display: flex;
  align-items: stretch;
  align-self: stretch;
  gap: 4px;
  margin: 0;
  padding: 0;
  max-width: none;
  order: 1;
}
#site-header .gch-links a,
#site-header .gch-account > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0 10px;
  border-radius: 0;
  background: none;
  color: var(--gc-muted);
  font-size: 0.9375rem;
  font-weight: 600;
  white-space: nowrap;
  transform: none;
  transition: color 0.15s ease;
}
/* Pages toggle these with element.style.display ('inline', 'none'); keep the layout either way. */
#site-header .gch-links a { display: inline-flex !important; box-shadow: inset 0 -3px 0 transparent; }
#site-header .gch-links a[style*="none"] { display: none !important; }
#site-header .gch-links a:hover,
#site-header .gch-account > a:hover { color: var(--gc-ink); background: none; transform: none; }
#site-header .gch-links a.active,
#site-header .gch-account > a.active { color: var(--gc-ink); }
#site-header .gch-links a.active { box-shadow: inset 0 -3px 0 var(--gc-mango-deep); }

#site-header .gch-tools {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  order: 2;
}

#site-header .gch-account {
  display: flex !important;
  align-items: center;
  gap: 4px;
  margin: 0 0 0 8px;
  order: 3;
  font-size: 0.9375rem;
  flex-wrap: nowrap;
  width: auto;
}
#site-header .gch-account[style*="none"] { display: none !important; }
#site-header #authSection > a { height: 40px; }

#site-header .gch-join {
  height: 40px;
  padding: 0 16px !important;
  border-radius: 8px !important;
  background: var(--gc-mango) var(--gc-grad-btn) !important;
  color: var(--gc-ink) !important;
  font-weight: 750 !important;
}
#site-header .gch-join:hover { filter: saturate(1.15) brightness(1.02); }

#site-header #userEmail {
  display: inline-block;
  max-width: 14ch;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
  font-weight: 600;
}
#site-header #userEmail:empty::after { content: 'Profile'; }
#site-header .gch-plabel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#site-header .gch-avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--gc-mango) var(--gc-grad); color: var(--gc-ink); font-weight: 800; font-size: 0.8125rem;
}
#site-header .gch-avatar:empty { background: var(--gc-fill); }

#site-header #signOutBtn {
  height: 36px;
  min-height: 0;
  margin: 0 0 0 4px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--gc-muted);
  font: 600 0.875rem var(--gc-font);
  cursor: pointer;
  transform: none;
  box-shadow: none;
}
#site-header #signOutBtn:hover { color: var(--gc-ink); background: var(--gc-fill); }

/* Balance pill (customers) and notification bell (signed-in) */
#site-header #fitcoinsBalance {
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px 0 10px;
  border-radius: 999px;
  background: var(--gc-mango-tint);
  color: var(--gc-ink);
  font-weight: 750;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
#site-header #fitcoinsBalance:not([style*="none"]) { display: inline-flex !important; }
#site-header #fitcoinsBalance::before {
  content: ''; width: 16px; height: 16px; flex: none; background: var(--gc-accent-ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='M18.09 10.37A6 6 0 1 1 10.34 18M7 6h1v4M16.71 13.88l.7.71-2.82 2.82'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='M18.09 10.37A6 6 0 1 1 10.34 18M7 6h1v4M16.71 13.88l.7.71-2.82 2.82'/%3E%3C/svg%3E") center / contain no-repeat;
}
#site-header #fitcoinsBalance:hover { background: #ffeab3; }

#site-header .gch-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--gc-ink);
  cursor: pointer;
}
@media (hover: hover) {
  #site-header .gch-icon-btn:hover { background: var(--gc-sunken); }
}
#site-header .gch-icon-btn svg { width: 22px; height: 22px; }

#site-header #notificationBadge {
  position: absolute;
  top: 6px;
  right: 5px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border: 2px solid var(--gc-surface);
  border-radius: 999px;
  background: var(--gc-mango) var(--gc-grad);
  color: var(--gc-ink);
  font: 800 0.6875rem/14px var(--gc-font);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

#site-header .gch-menu-btn { display: none; }
#site-header .gch-i-close,
#site-header.gch-open .gch-i-menu { display: none; }
#site-header.gch-open .gch-i-close { display: block; }

/* Phones and small tablets: logo, balance, bell, menu. Every entry lives in the menu. */
@media (max-width: 899px) {
  #site-header .gch-bar { padding: 0 8px 0 16px; gap: 2px; }
  #site-header .gch-brand { margin-right: auto; font-size: 1.25rem; }
  #site-header .gch-tools { margin-left: 0; order: 2; }
  #site-header .gch-menu-btn { display: inline-flex; order: 3; }

  #site-header .gch-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    padding: 8px 16px 16px;
    background: var(--gc-surface);
    border-bottom: 1px solid var(--gc-line);
    box-shadow: 0 12px 24px -12px rgba(20, 21, 23, 0.25);
  }
  #site-header.gch-open .gch-menu { display: block; }

  #site-header .gch-links { flex-direction: column; gap: 0; }
  #site-header .gch-links a,
  #site-header .gch-account > a {
    height: 48px;
    padding: 0 4px;
    border-bottom: 1px solid var(--gc-line);
    color: var(--gc-ink);
    font-size: 1rem;
  }
  #site-header .gch-links a.active { box-shadow: inset 3px 0 0 var(--gc-mango-deep); padding-left: 12px; }

  #site-header .gch-account {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
  }
  #site-header .gch-avatar { display: none; }
  #site-header .gch-plabel { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  #site-header #userEmail { max-width: 20ch; margin-left: auto; color: var(--gc-muted); font-weight: 500; }
  #site-header #userEmail:empty::after { content: none; }
  #site-header #authSection > a.gch-join,
  #site-header #signOutBtn {
    justify-content: center;
    height: 44px;
    margin: 12px 0 0;
    border-bottom: 0;
  }
  #site-header #signOutBtn { background: var(--gc-fill); color: var(--gc-ink); }
}

@media (max-width: 359px) {
  #site-header .gch-brand .gch-word { display: none; }
}

/* =====================================================================
   Polish v2 (10/3): calmer controls, borderless Class cards, two-column
   Class modal, tidier account pages. Filled quiet controls replace the
   outlined pills; mango stays for the one main action per view.
   ===================================================================== */

/* Buttons */
:where(button) { border: 0; border-radius: 10px; background: var(--gc-fill); font-weight: 600; }
:where(button):hover:not(:disabled) { background: var(--gc-fill-hover); }
.gc-btn { border-radius: 10px; font-weight: 650; }
.gc-btn--secondary, body .btn-secondary, body .btn-unregister { background: var(--gc-fill); box-shadow: none; }
.gc-btn--secondary:hover, body .btn-secondary:hover, body .btn-unregister:hover:not(:disabled) { background: var(--gc-fill-hover); box-shadow: none; }
body .btn-primary, body .btn-register { border-radius: 10px; font-weight: 700; }
body .btn-favorite { border: 0; background: var(--gc-fill); min-height: 36px; padding: 0 14px; font-weight: 600; }
body .btn-favorite:hover { background: var(--gc-fill-hover); }
body .btn-favorite.favorited { background: var(--gc-rose-tint); color: var(--gc-rose); }

/* Fields: lighter resting border, ink on focus */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]), select, textarea) { border-color: #c9c5bc; border-radius: 10px; }
:where(input, select, textarea):hover { border-color: var(--gc-control); }
body .form-group input, body .form-group select, body .form-group textarea { border-color: #c9c5bc; border-radius: 10px; }

/* Page heading */
.gc-pagehead { margin: 0.5rem 0 1.25rem; }
.gc-pagehead h1 { margin: 0; font-size: 2.25rem; font-weight: 800; font-stretch: 75%; line-height: 1.05; }
.gc-pagehead p { margin: 0.375rem 0 0; color: var(--gc-muted); font-size: 1rem; }

/* Home view switch: segmented control */
body #adminTabs, body #customerTabs {
  margin: 0 !important; padding: 4px; border-radius: 12px; background: var(--gc-fill); white-space: nowrap; overflow-x: auto; scrollbar-width: none;
}
body #adminTabs .tab-btn, body #customerTabs .tab-btn {
  height: 36px; margin: 0; padding: 0 14px; border-radius: 9px; background: transparent; box-shadow: none;
  color: var(--gc-muted); font-weight: 600; font-size: 0.9375rem;
}
body #adminTabs .tab-btn:hover, body #customerTabs .tab-btn:hover { background: rgba(255, 255, 255, 0.55); box-shadow: none; color: var(--gc-ink); }
body #adminTabs .tab-btn.active, body #customerTabs .tab-btn.active {
  background: var(--gc-surface); color: var(--gc-ink); box-shadow: 0 1px 2px rgba(20, 21, 23, 0.12), 0 0 0 1px rgba(20, 21, 23, 0.04);
}

/* Section tabs (profile, venue, admin, auth): quieter weight */
body .tab-nav .tab-btn, body .admin-tab-btn, body .auth-tab { font-weight: 600; }
body .cancel-subtab-btn { box-shadow: none; background: var(--gc-fill); }
body .cancel-subtab-btn.active { background: var(--gc-ink); color: var(--gc-surface); }

/* ---------- Class card (gc-cc): borderless, photo first ---------- */
body .gc-cc { background: transparent; box-shadow: none; border-radius: 0; overflow: visible; transform: none; outline-offset: 4px; }
body .gc-cc:hover { transform: none; box-shadow: none; }
body .gc-cc:focus-visible { outline: 2px solid var(--gc-ink); border-radius: 16px; }
.gc-cc-media { position: relative; aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; background: var(--gc-sunken); isolation: isolate; }
.gc-cc-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
/* The stored 4:3 YouTube frame (hqdefault, the fallback) has the portrait shot in the middle: zoom it to fill 4:5. */
.gc-cc-media > img[src*="hqdefault"] { transform: scale(1.4222); }
.gc-cc:hover .gc-cc-media > img { transform: scale(1.04); }
.gc-cc:hover .gc-cc-media > img[src*="hqdefault"] { transform: scale(1.48); }
.gc-cc-fallback {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: var(--gc-mango) var(--gc-grad); color: var(--gc-ink); font-weight: 750; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.8125rem;
}
.gc-cc-fallback .gc-ic { width: 36px; height: 36px; margin: 0; }
body .gc-cc .gc-cc-style {
  position: absolute; top: 10px; left: 10px; margin: 0; z-index: 1;
  background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.gc-cc-status {
  position: absolute; left: 10px; bottom: 10px; z-index: 1; display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 750; letter-spacing: 0.02em;
}
.gc-cc-status.is-booked { background: var(--gc-success); color: #fff; }
.gc-cc-status.is-live { background: var(--gc-ink); color: var(--gc-mango); }
.gc-cc-status.is-live::before, .gc-cc-live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--gc-mango-deep); animation: gc-pulse 1.4s ease-in-out infinite; }
@keyframes gc-pulse { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .gc-cc-media > img { transition: none; } .gc-cc-status.is-live::before, .gc-cc-live::before { animation: none; } }

body .gc-cc .gc-cc-body { padding: 12px 2px 0; background: transparent; }
body .gc-cc .gc-cc-title {
  margin: 0; font-size: 1.0625rem; font-weight: 650; line-height: 1.3; color: var(--gc-ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
body .gc-cc .choreographer-row { margin-top: 6px !important; gap: 7px !important; }
body .gc-cc .choreographer-row > img, body .gc-cc .choreographer-row > div { width: 22px !important; height: 22px !important; font-size: 11px !important; flex: none; }
body .gc-cc .choreographer-name { font-size: 0.875rem !important; color: var(--gc-muted); font-weight: 500; }
.gc-cc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 6px; font-size: 0.8125rem; color: var(--gc-muted); }
.gc-cc-meta > span { display: inline-flex; align-items: center; gap: 4px; }
.gc-cc-meta .gc-ic { width: 14px; height: 14px; margin: 0; }
.gc-cc-rating { color: var(--gc-ink); font-weight: 650; }
.gc-cc-rating span { color: var(--gc-muted); font-weight: 500; }
.gc-cc-rating .gc-ic { fill: var(--gc-mango); stroke: var(--gc-mango-deep); }
.gc-cc-sessions { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--gc-hair); display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.gc-cc-session { min-width: 0; }
.gc-cc-when { font-size: 0.9375rem; font-weight: 750; font-stretch: 88%; color: var(--gc-ink); line-height: 1.25; }
.gc-cc-live { display: inline-flex; align-items: center; gap: 5px; margin-right: 4px; color: var(--gc-accent-ink); font-weight: 750; }
.gc-cc-where { font-size: 0.8125rem; color: var(--gc-muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-cc-session.is-booked .gc-cc-where strong { color: var(--gc-success); font-weight: 700; }
.gc-cc-price { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; background: var(--gc-mango-tint); color: var(--gc-accent-ink); font-size: 0.75rem; font-weight: 750; white-space: nowrap; }
.gc-cc-pricerow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 6px; }
.gc-cc-pricerow .gc-tk-count { align-items: center; margin: 0; font-size: 0.75rem; }
.gc-cc-pricerow .gc-tk-count .gc-beats { margin-top: 0; }
.gc-cc-session > div[style*="display:flex"], .gc-cc-session > div[style*="display: flex"] { margin-top: 6px !important; }
.gc-cc-more { font-size: 0.8125rem; font-weight: 650; color: var(--gc-ink); text-decoration: underline; text-decoration-color: var(--gc-mango-deep); text-underline-offset: 0.2em; }
.gc-cc-desc { margin: 8px 0 0 !important; font-size: 0.875rem !important; color: var(--gc-muted) !important; line-height: 1.45 !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 559px) {
  .gc-pagehead h1 { font-size: 1.875rem; }
  .gc-pagehead p { font-size: 0.9375rem; }
  body .gc-cc .gc-cc-title { font-size: 0.9375rem; }
  .gc-cc-desc { display: none !important; }
  .gc-cc-when { font-size: 0.875rem; }
  body .gc-cc .gc-cc-style { top: 8px; left: 8px; }
}

/* ---------- Class modal: two columns on wide screens ---------- */
body #videoModal .modal-content > .live-events-section,
body #videoModal .modal-content > .reviews-section {
  background: transparent; border-radius: 0; border-top: 1px solid var(--gc-hair); padding: 1.5rem 0 1.25rem; margin: 0 1.5rem;
}
body #videoModal .live-events-section h3, body #videoModal .reviews-section h3 { font-size: 1.125rem; font-weight: 750; margin: 0 0 0.875rem; }
body #videoModal #choreographerProfileCard { margin: 0 1.5rem 1.25rem !important; border-radius: 14px !important; }
body #videoModal .event-card { border-radius: 14px; box-shadow: inset 0 0 0 1px var(--gc-hair); }
body #videoModal .event-header strong { font-weight: 750; font-stretch: 88%; font-size: 1.0625rem; display: inline-flex; align-items: center; gap: 6px; }
body #videoModal .event-details { font-size: 0.875rem; line-height: 1.6; }
body #videoModal .event-details > div { display: flex; align-items: center; gap: 6px; }
body #videoModal .event-details .gc-ic { width: 16px; height: 16px; margin: 0; color: var(--gc-subtle); flex: none; }
body #videoModal .video-info h2 { font-size: 2rem; }
body #videoModal .video-meta { margin-top: 0.75rem; }
body #videoModal #modalCategory { display: inline-flex; align-items: center; padding: 0.2rem 0.6rem; border-radius: 999px; background: var(--gc-chip); color: var(--gc-ink); font-size: 0.6875rem; font-weight: 750; letter-spacing: 0.04em; }
body #videoModal #modalCategory:empty { display: none; }
body #videoModal #ownerActions button, body #videoModal #editVideoForm button { min-height: 36px; padding: 0 14px !important; font-size: 0.875rem !important; border-radius: 10px !important; }
@media (min-width: 900px) {
  body #videoModal .modal-content {
    display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); align-items: start;
    max-width: 1080px; margin: 3vh auto;
    background: linear-gradient(90deg, var(--gc-ink) 0 380px, var(--gc-surface) 380px);
  }
  body #videoModal .modal-content > #youtubeEmbed,
  body #videoModal .modal-content > #modalVideo {
    grid-column: 1; grid-row: 1 / span 30; position: sticky; top: 0; align-self: start;
    width: 100% !important; height: min(88vh, 676px) !important; aspect-ratio: auto !important; background: var(--gc-ink); border-radius: 0 !important;
  }
  body #videoModal .modal-content > :not(#youtubeEmbed):not(#modalVideo):not(.close) { grid-column: 2; }
  body #videoModal .video-info { padding: 2rem 2rem 1.25rem; }
  body #videoModal #modalMusicSection { margin: 0 2rem 0.5rem !important; }
  body #videoModal #choreographerProfileCard { margin: 0 2rem 1.25rem !important; }
  body #videoModal .modal-content > .live-events-section,
  body #videoModal .modal-content > .reviews-section { margin: 0 2rem; }
  body #videoModal .close { top: 14px; right: 14px; background: var(--gc-fill); color: var(--gc-ink); }
  body #videoModal .close:hover { background: var(--gc-fill-hover); }
}
/* R-010: below 900px the whole sheet scrolls, so its close button stays on screen. No backdrop
   blur there (the sheet covers the screen): a filter would make the sheet the button's frame. */
@media (max-width: 899px) {
  body #videoModal { -webkit-backdrop-filter: none; backdrop-filter: none; }
  body #videoModal .close { position: fixed; top: 12px; right: 12px; box-shadow: 0 2px 10px rgba(20, 21, 23, 0.25); }
}

/* ---------- Account pages ---------- */
body .profile-card, body .venue-card, body .admin-card, body .auth-container { box-shadow: inset 0 0 0 1px var(--gc-hair); }
body .profile-header { align-items: flex-start; gap: 1.25rem; }
body .profile-avatar { width: 72px; height: 72px; font-size: 1.75rem; flex: none; }
body .profile-info { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
body .profile-info > h2 { flex-basis: 100%; margin: 0; font-size: 2rem; }
body .profile-info > #profileEmail { flex-basis: 100%; margin: 0; color: var(--gc-muted); }
/* Actions sit in one row; an opened form takes its own full-width row below them. */
body .profile-info > #nicknameEditSection:not([style*="none"]), body .profile-info > div:last-child { display: contents !important; }
body #editNicknameBtn { order: 5; margin-top: 4px; }
body #showChangePasswordBtn { order: 6; margin-top: 4px; }
body #nicknameForm, body #changePasswordForm { order: 10; flex-basis: 100%; margin-top: 10px !important; padding: 14px; border-radius: 12px; background: var(--gc-sunken); }
body #nicknameForm[style*="none"], body #changePasswordForm[style*="none"] { display: none !important; }
body #changePasswordForm > div { max-width: 380px !important; }
body #customBuyAmount { width: 170px !important; }
body #editNicknameBtn, body #showChangePasswordBtn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px !important; border: 0 !important;
  border-radius: 10px !important; background: var(--gc-fill) !important; color: var(--gc-ink) !important; font-size: 0.875rem !important; font-weight: 600;
}
body #editNicknameBtn:hover, body #showChangePasswordBtn:hover { background: var(--gc-fill-hover) !important; }
body .profile-role { border-radius: 999px; font-size: 0.6875rem; letter-spacing: 0.05em; padding: 0.2rem 0.6rem; }
body .fitcoins-display { padding: 1.25rem !important; align-items: center; }
body .tab-content .transaction-item, body .tab-content .registration-item, body .tab-content .notification-item {
  background: var(--gc-surface); box-shadow: inset 0 0 0 1px var(--gc-hair);
}
body .tab-content .notification-item.unread { background: var(--gc-mango-tint); box-shadow: none; }
body .buy-amount-btn { background: var(--gc-fill) !important; color: var(--gc-ink) !important; border-radius: 10px !important; min-height: 36px; }
body .buy-amount-btn:hover { background: var(--gc-fill-hover) !important; opacity: 1 !important; }
body .mark-all-read { border-radius: 10px; background: var(--gc-fill) !important; background-image: none !important; color: var(--gc-ink) !important; }
body .mark-all-read:hover { background: var(--gc-fill-hover) !important; }
body .item-card, body .user-item, body .lot-item { background: var(--gc-surface); box-shadow: inset 0 0 0 1px var(--gc-hair); }
/* Action roles set by theme.js from the button's label (whatever colour its page class gave it) */
body .gc-act-quiet { background: var(--gc-fill) !important; background-image: none !important; color: var(--gc-ink) !important; box-shadow: none !important; border-color: transparent !important; }
body .gc-act-quiet:hover:not(:disabled) { background: var(--gc-fill-hover) !important; }
body .gc-act-danger { background: var(--gc-surface) !important; background-image: none !important; color: var(--gc-danger) !important; box-shadow: inset 0 0 0 1px var(--gc-danger-line) !important; border-color: transparent !important; }
body .gc-act-danger:hover:not(:disabled) { background: var(--gc-danger-tint) !important; }
/* Item actions are compact, side by side, never stretched across the card */
body .item-actions > button, body .item-actions > a { flex: none !important; min-height: 36px; padding: 0 14px !important; font-size: 0.875rem !important; border-radius: 10px !important; }
body .auth-tabs { gap: 0; }
body .auth-form button[type="submit"] { width: 100%; }

/* Toasts (scripts/dialog.js): ink cards that float above any page, icon carries the colour */
body #groovaclass-toast-container { top: calc(var(--gc-header-h) + 12px); right: 16px; }
body .groovaclass-toast {
  background: var(--gc-ink) !important; color: #fff !important; border-radius: 12px; padding: 14px 14px 16px;
  box-shadow: 0 16px 36px -12px rgba(20, 21, 23, 0.45); font-size: 0.9375rem; font-weight: 500;
}
body .groovaclass-toast .groovaclass-toast-icon .gc-ic { width: 20px; height: 20px; margin: 0; }
body .groovaclass-toast-success .groovaclass-toast-icon { color: #7ad3a0; }
body .groovaclass-toast-error .groovaclass-toast-icon { color: #ff8f84; }
body .groovaclass-toast-warning .groovaclass-toast-icon { color: var(--gc-mango); }
body .groovaclass-toast-info .groovaclass-toast-icon { color: #b9bcc0; }
body .groovaclass-toast-close { min-height: 0; padding: 0 2px; background: none !important; color: #b9bcc0 !important; }
body .groovaclass-toast-progress { background: var(--gc-mango) !important; opacity: 0.7; }
/* Confirm dialog */
body .groovaclass-modal-overlay { background: rgba(20, 21, 23, 0.55) !important; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
body .groovaclass-modal { padding: 24px; border-radius: 20px; font-family: inherit; box-shadow: var(--gc-e4); }
body .groovaclass-modal-title { color: var(--gc-ink); font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em; }
body .groovaclass-modal-body { color: var(--gc-muted); font-size: 0.9375rem; }
body .groovaclass-modal-btn { min-height: 46px; padding: 0 20px; border-radius: 12px; font-family: inherit; font-size: 0.9375rem; font-weight: 750; }
body .groovaclass-modal-btn:hover { opacity: 1; }
body .groovaclass-modal-btn-cancel { background: var(--gc-fill); color: var(--gc-ink); }
body .groovaclass-modal-btn-cancel:hover { background: var(--gc-fill-hover); }
body .groovaclass-modal-btn-confirm { background: var(--gc-mango) var(--gc-grad-btn); color: var(--gc-ink); }
body .groovaclass-modal-btn-confirm:hover { filter: saturate(1.1) brightness(1.03); }
body .groovaclass-modal-btn-destructive { background: var(--gc-danger); color: #fff; }
@media (max-width: 479px) { body .groovaclass-modal-actions { display: grid; grid-template-columns: 1fr 1fr; } }
@media (max-width: 559px) {
  body #groovaclass-toast-container { left: 12px; right: 12px; max-width: none; }
  body .fitcoins-display { flex-wrap: wrap; }
  body #buyFitcoinsBtn { width: 100%; margin-left: 0 !important; justify-content: center; }
}

/* File pickers */
input[type="file"] { font: inherit; font-size: 0.875rem; color: var(--gc-muted); }
input[type="file"]::file-selector-button {
  margin-right: 12px; padding: 8px 14px; border: 0; border-radius: 10px; background: var(--gc-fill); color: var(--gc-ink);
  font: inherit; font-weight: 600; cursor: pointer;
}
input[type="file"]::file-selector-button:hover { background: var(--gc-fill-hover); }
@media (max-width: 559px) {
  body .profile-avatar { width: 56px; height: 56px; font-size: 1.375rem; }
  body .profile-info > h2 { font-size: 1.625rem; }
  body .profile-card, body .venue-card, body .admin-card { padding: 1.25rem !important; }
  /* R-011: on phones the page-level frame is the page itself, so its content gets the width and
     the cards inside it are not cards in a card. */
  body .venue-card, body .upload-section, body .auth-container { padding: 0 !important; background: transparent; box-shadow: none; border-radius: 0; }
  body .venue-container, body .profile-container { margin-top: 1.25rem; }
  body .upload-section, body .auth-container { margin-top: 0.5rem; }
}

/* =====================================================================
   R-006 (10/5): the mango mockup, finished. Meaning colours for icons
   and sections (wayfinding in the back office), the home page (hero,
   style chips, workshops nearby, role panels), one Class per row on
   phones, sharp Class pictures, and consistent dropdowns everywhere.
   ===================================================================== */
:root {
  /* Meaning colours. Not brand colours: they tell sections and facts apart (users, venues,
     dates…). Each pairs an ink (≥4.5:1 on white and on its tint) with a pale tint. */
  --gc-blue: #2257c0;      --gc-blue-tint: #e8effc;
  --gc-violet: #6a42d4;    --gc-violet-tint: #efeafd;
  --gc-teal: #0b766b;      --gc-teal-tint: #e0f2ef;
}
[data-hue="mango"]  { --hue: var(--gc-accent-ink); --hue-tint: var(--gc-mango-tint); }
[data-hue="violet"] { --hue: var(--gc-violet);     --hue-tint: var(--gc-violet-tint); }
[data-hue="green"]  { --hue: var(--gc-success);    --hue-tint: var(--gc-success-tint); }
[data-hue="rose"]   { --hue: var(--gc-rose);       --hue-tint: var(--gc-rose-tint); }
[data-hue="blue"]   { --hue: var(--gc-blue);       --hue-tint: var(--gc-blue-tint); }
[data-hue="teal"]   { --hue: var(--gc-teal);       --hue-tint: var(--gc-teal-tint); }
[data-hue="red"]    { --hue: var(--gc-danger);     --hue-tint: var(--gc-danger-tint); }
[data-hue="warn"]   { --hue: var(--gc-warn);       --hue-tint: var(--gc-warn-tint); }

/* Icons carry their meaning colour in running text and quiet controls… */
.gc-ic[data-hue] { color: var(--hue); }
body #videoModal .event-details .gc-ic[data-hue], body .notification-type .gc-ic[data-hue] { color: var(--hue); }
/* …but take the text colour on filled, inverted or status surfaces. */
:is(.gc-btn--primary, .btn-primary, .btn-register, .gc-act-danger, .gc-cc-status, .gc-datebox, .gc-chip, .gc-cc-fallback,
    .gc-cc-play, .groovaclass-toast, #searchToggle, .registered-badge, .gc-status) .gc-ic[data-hue] { color: inherit; }
/* Headings and tabs show the icon on a tinted tile, so each section is recognisable at a glance. */
:is(h1, h2, h3, h4, h5, legend, .tab-btn, .admin-tab-btn, .cancel-subtab-btn, .auth-tab) > .gc-ic[data-hue] {
  box-sizing: content-box; width: 1em; height: 1em; padding: 0.3em; margin-right: 0.5em;
  border-radius: 0.45em; background: var(--hue-tint); vertical-align: -0.42em;
}
:is(.tab-btn, .admin-tab-btn, .cancel-subtab-btn) > .gc-ic[data-hue] { width: 0.95em; height: 0.95em; }
body .cancel-subtab-btn.active > .gc-ic[data-hue] { background: rgba(255, 255, 255, 0.16); color: #fff; }
.gc-tile {
  flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  background: var(--hue-tint, var(--gc-mango-tint)); color: var(--hue, var(--gc-accent-ink));
}
.gc-tile .gc-ic { width: 20px; height: 20px; margin: 0; color: inherit; }
.gc-dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--gc-mango-deep); }
.gc-dot[data-gc-style="kpop"] { background: var(--gc-style-kpop); }
.gc-dot[data-gc-style="house"] { background: var(--gc-style-house); }
.gc-dot[data-gc-style="hiphop"] { background: var(--gc-style-hiphop); }
.gc-dot[data-gc-style="hardstyle"] { background: var(--gc-style-hardstyle); }
.gc-dot[data-gc-style="freestyle"] { background: var(--gc-style-freestyle); }
.gc-dot[data-gc-style="fitcho"] { background: var(--gc-style-fitcho); }

/* Text link */
.gc-link {
  color: var(--gc-ink); font-weight: 700; font-size: 0.9375rem; text-decoration: underline;
  text-decoration-color: var(--gc-mango-deep); text-decoration-thickness: 2px; text-underline-offset: 0.25em;
}
.gc-link:hover { text-decoration-color: var(--gc-ink); }
.gc-btn .gc-ic { width: 18px; height: 18px; margin: 0 0.4em 0 -0.1em; }

/* ---------- Header, as in the mockup: ink balance pill with mango figures; "Menu" in words ---------- */
#site-header #fitcoinsBalance { background: var(--gc-ink); color: var(--gc-mango); height: 30px; padding: 0 12px 0 10px; }
#site-header #fitcoinsBalance::before { background: var(--gc-mango); width: 15px; height: 15px; }
#site-header #fitcoinsBalance:hover { background: #2a2c30; }
#site-header .gch-menu-label { display: none; }
@media (max-width: 899px) {
  #site-header .gch-menu-btn { width: auto; padding: 0 10px; gap: 6px; font: 750 0.9375rem var(--gc-font); }
  #site-header .gch-menu-btn svg { width: 20px; height: 20px; }
  #site-header .gch-menu-label { display: inline; }
  #site-header .gch-tools { gap: 2px; }
}

/* ---------- Home (scripts/home.js) ---------- */
.gc-home { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.75rem; margin: 0.25rem 0 2.25rem; }
.gc-home > * { min-width: 0; }
.gc-home:empty { display: none; }
body .gc-home :is(h2, h3) { margin: 0; font-size: 1.25rem; font-weight: 780; font-stretch: 90%; letter-spacing: -0.005em; }

.gc-chips {
  display: flex; gap: 8px; margin: 1.125rem -16px 0; padding: 2px 16px; overflow-x: auto; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 24px), transparent);
}
.gc-chips::-webkit-scrollbar { display: none; }
.gc-chip {
  flex: none; display: inline-flex; align-items: center; gap: 7px; height: 38px; min-height: 0; padding: 0 15px;
  border: 0; border-radius: 999px; background: var(--gc-surface); box-shadow: inset 0 0 0 1px #d6d2c9;
  color: var(--gc-ink); font: 700 0.875rem var(--gc-font); cursor: pointer; transition: box-shadow 0.15s ease, background 0.15s ease;
}
.gc-chip:hover:not([aria-pressed="true"]) { box-shadow: inset 0 0 0 1.5px var(--gc-ink); background: var(--gc-surface); }
.gc-chip[aria-pressed="true"] { background: var(--gc-mango) var(--gc-grad); box-shadow: none; }
.gc-chip[aria-pressed="true"] .gc-dot { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.85); }
body.gc-has-chips #filterCategory { display: none; }
body.gc-has-chips #sortOrder { max-width: none; }
/* Portrait frames: keep the dancer's feet; the ceiling can go. */
.gc-cc-media > img:not([src*="hqdefault"]) { object-position: 50% 72%; }

.gc-sec { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.gc-sec .gc-count { color: var(--gc-muted); font-size: 0.875rem; font-weight: 600; }

/* Where "nearby" is: a pill that opens a short list */

@keyframes gc-pop { from { opacity: 0; transform: translateY(-4px); } }

.gc-near-note { margin: -4px 0 12px; color: var(--gc-muted); font-size: 0.875rem; }

/* Workshop row: date block, what and where, the picture */

.gc-datebox {
  display: grid; justify-items: center; align-content: center; gap: 2px; width: 54px; height: 60px; border-radius: 12px;
  background: var(--gc-mango) var(--gc-grad); color: var(--gc-ink); line-height: 1;
}
.gc-datebox span { font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.06em; }
.gc-datebox b { font-size: 1.625rem; font-weight: 850; font-stretch: 70%; }
.gc-datebox.is-live { background: var(--gc-ink); color: var(--gc-mango); }

.gc-home .is-ok { color: var(--gc-success); font-weight: 650; }
.gc-home .is-warn { color: var(--gc-warn); font-weight: 650; }
.gc-home .is-bad { color: var(--gc-danger); font-weight: 650; }

.gc-empty-card {
  display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 16px; background: var(--gc-surface);
  box-shadow: inset 0 0 0 1px var(--gc-hair);
}
.gc-empty-card b { display: block; font-size: 1rem; font-weight: 750; }
.gc-empty-card p { margin: 2px 0 0; color: var(--gc-muted); font-size: 0.875rem; line-height: 1.45; }

/* The customer's next booking */
.gc-next h2 { margin-bottom: 12px; }
.gc-next-card {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 0; padding: 12px 14px 12px 12px; border: 0;
  border-radius: 16px; background: var(--gc-surface); box-shadow: inset 0 0 0 1.5px var(--gc-mango-line); color: var(--gc-ink); font: inherit; font-weight: 400; text-align: left; cursor: pointer;
}
.gc-next-card:hover { background: var(--gc-mango-tint); }
.gc-next-card .gc-datebox { background: var(--gc-mango) var(--gc-grad); color: var(--gc-ink); }   /* R-010: daylight, like the tickets */
.gc-next-m .gc-tk-count { margin: 0; }
.gc-next-body { display: grid; gap: 3px; min-width: 0; flex: 1; }
.gc-next-t { font-weight: 750; font-size: 1.0625rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gc-next-m { color: var(--gc-muted); font-size: 0.875rem; }
.gc-next-m .gc-ic { width: 14px; height: 14px; margin: 0 2px 0 0; color: inherit; }
.gc-next-card > .gc-ic { width: 20px; height: 20px; margin: 0; color: var(--gc-accent-ink); }

/* Role panel: Your studio, Your venue, Admin */
.gc-panel { padding: 16px; border-radius: 18px; background: var(--gc-surface); box-shadow: inset 0 0 0 1px var(--gc-hair); }
.gc-panel-head { display: flex; align-items: center; gap: 12px; }
.gc-panel-head p { margin: 2px 0 0; color: var(--gc-muted); font-size: 0.875rem; }
.gc-prows { margin-top: 12px; }
.gc-prow {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 0; padding: 10px 0; border: 0; border-top: 1px solid var(--gc-hair);
  border-radius: 0; background: none; color: var(--gc-ink); font: inherit; font-weight: 400; text-align: left; cursor: pointer;
}
.gc-prow:hover { background: none; }
.gc-prow:hover .gc-prow-main b { text-decoration: underline; text-decoration-color: var(--gc-mango-deep); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.gc-prow .gc-datebox { width: 44px; height: 48px; border-radius: 10px; }
.gc-prow .gc-datebox b { font-size: 1.25rem; }
.gc-prow .gc-datebox span { font-size: 0.625rem; }
.gc-prow-main { display: grid; gap: 1px; min-width: 0; flex: 1; }
.gc-prow-main b { font-size: 0.9375rem; font-weight: 750; }
.gc-prow-main span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--gc-muted); font-size: 0.8125rem; }
.gc-prow-end { display: grid; justify-items: end; flex: none; font-size: 0.75rem; }
.gc-prow-end b { font-size: 1.125rem; font-weight: 850; font-stretch: 72%; }
.gc-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.gc-acts .gc-btn { height: 42px; padding: 0 14px; font-size: 0.9375rem; }
@media (max-width: 599px) {
  .gc-panel.is-wrap .gc-acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gc-panel.is-wrap .gc-acts .gc-btn { justify-content: center; height: 46px; padding: 0 10px; white-space: nowrap; }
  .gc-panel.is-wrap .gc-acts .gc-btn--primary, .gc-panel.is-wrap .gc-acts .gc-btn--primary ~ .gc-btn:last-child:nth-child(even) { grid-column: 1 / -1; }
}
@media (max-width: 559px) {
  .gc-panel:not(.is-wrap) .gc-acts .gc-btn { flex: 1 1 0; justify-content: center; padding: 0 8px; font-size: 0.875rem; white-space: nowrap; }
  .gc-panel:not(.is-wrap) .gc-acts .gc-btn--primary { flex-basis: 100%; font-size: 0.9375rem; }
}

/* Wide screens: the style chips wrap instead of scrolling */
@media (min-width: 900px) {
  .gc-chips { margin: 1.25rem 0 0; padding: 2px 0; -webkit-mask-image: none; mask-image: none; flex-wrap: wrap; }
}

/* ---------- Classes: the list under the home sections ---------- */
.gc-classes-head { margin-top: 0.25rem; padding-top: 1.5rem; border-top: 1px solid var(--gc-hair); scroll-margin-top: calc(var(--gc-header-h) + 8px); }
.gc-classes-head h2 { margin: 0; font-size: 1.75rem; font-weight: 850; font-stretch: 75%; line-height: 1; }
.gc-cc-play {
  position: absolute; right: 10px; bottom: 10px; z-index: 1; display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: 50%; background: rgba(20, 21, 23, 0.55); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background 0.18s ease, transform 0.18s ease;
}
.gc-cc-play .gc-ic { width: 15px; height: 15px; margin: 0 0 0 2px; fill: currentColor; }
.gc-cc:hover .gc-cc-play { background: var(--gc-mango); color: var(--gc-ink); transform: scale(1.06); }
.gc-cc-nodates { display: flex; align-items: center; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--gc-hair); color: var(--gc-muted); font-size: 0.8125rem; font-weight: 600; }
.gc-cc-nodates .gc-ic { width: 15px; height: 15px; margin: 0; }
@media (min-width: 1100px) {
  .video-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem 1.75rem; }
}
/* Phones: one Class per row, a big portrait picture and the full text under it */
@media (max-width: 599px) {
  .video-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 2rem !important; }
  .gc-cc-media { border-radius: 18px; }
  body .gc-cc .gc-cc-title { font-size: 1.25rem; font-weight: 750; letter-spacing: -0.005em; }
  .gc-cc-desc { display: -webkit-box !important; -webkit-line-clamp: 3 !important; font-size: 0.9375rem !important; }
  .gc-cc-when { font-size: 0.9375rem; }
  body .gc-cc .gc-cc-style { top: 12px; left: 12px; }
  .gc-cc-status { left: 12px; bottom: 12px; }
  .gc-cc-play { width: 44px; height: 44px; right: 12px; bottom: 12px; }
}

/* ---------- Dropdowns everywhere: one shape, one chevron ---------- */
body select:not([multiple]):not([size]) {
  -webkit-appearance: none; appearance: none; min-height: 42px; padding-right: 2.25rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141517' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.8rem center; background-size: 16px;
  color: var(--gc-ink); font-weight: 550;
}
body select:not([multiple]):not([size]):disabled { opacity: 0.55; cursor: not-allowed; }
body select option { font-weight: 500; }

/* ---------- Booking card in the Class modal (scripts/booking-card.js) ---------- */
body #videoModal .event-card.gc-book, .event-card.gc-book {
  padding: 16px; margin-bottom: 12px; border: 0; border-radius: 18px; background: var(--gc-surface);
  box-shadow: inset 0 0 0 1px var(--gc-hair);
}
body #videoModal .event-card.gc-book.registered { box-shadow: inset 0 0 0 1.5px var(--gc-success-line); background: var(--gc-surface); }
body #videoModal .event-card.gc-book.is-live { box-shadow: inset 0 0 0 1.5px var(--gc-ink); }
.gc-book-head { display: flex; align-items: center; gap: 14px; }
.gc-book-when { display: grid; gap: 3px; min-width: 0; }
.gc-book-when b { font-size: 1.0625rem; font-weight: 780; font-stretch: 88%; line-height: 1.2; }
.gc-book-when span { display: flex; align-items: flex-start; gap: 6px; color: var(--gc-muted); font-size: 0.875rem; line-height: 1.35; }
.gc-book-when .gc-ic { width: 15px; height: 15px; margin: 2px 0 0; flex: none; }
.gc-book-figs { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 16px 0 10px; }
.gc-book-price { display: flex; align-items: baseline; gap: 6px; line-height: 1; }
.gc-book-price b { font-size: 2.5rem; font-weight: 850; font-stretch: 70%; letter-spacing: -0.01em; }
.gc-book-price small { color: var(--gc-muted); font-size: 0.875rem; font-weight: 600; white-space: nowrap; }
.gc-book-count { text-align: right; color: var(--gc-muted); font-size: 0.875rem; line-height: 1.4; }
.gc-book-count b { color: var(--gc-ink); font-weight: 750; }
.gc-book-count .gc-ic { width: 14px; height: 14px; margin: 0 3px 0 0; vertical-align: -0.15em; }
.gc-book-run .gc-tk-count { margin: 0; font-size: 0.875rem; }
.gc-book-run:empty { display: none; }
.gc-book .is-ok { color: var(--gc-success); font-weight: 700; }
.gc-book .is-warn { color: var(--gc-warn); font-weight: 700; }
.gc-book .is-bad { color: var(--gc-danger); font-weight: 700; }
.gc-book-rules { margin: 12px 0 0; padding: 12px 0 0 18px; border-top: 1px solid var(--gc-hair); color: var(--gc-muted); font-size: 0.875rem; line-height: 1.5; }
.gc-book-rules li + li { margin-top: 4px; }
.gc-book-note { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--gc-sunken); color: var(--gc-ink); font-size: 0.875rem; }
.gc-book-off { margin-top: 10px; color: var(--gc-danger); font-weight: 650; font-size: 0.875rem; }
.gc-book-acts { margin-top: 14px; }
.gc-book-acts > button, .gc-book-acts > a.btn-register {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 50px; border-radius: 12px; font-size: 1rem; font-weight: 750;
}
body .gc-book-acts .btn-register:not(:disabled) { background: var(--gc-mango) var(--gc-grad-btn); color: var(--gc-ink); }
body .gc-book-acts a.btn-register { text-decoration: none; }
.gc-book-signin { margin: 10px 0 0; text-align: center; color: var(--gc-muted); font-size: 0.875rem; }
.gc-book-staff { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--gc-sunken); color: var(--gc-muted); font-size: 0.875rem; line-height: 1.45; }
.gc-book-staff .gc-ic { flex: none; width: 16px; height: 16px; margin: 2px 0 0; color: var(--gc-blue, #2f6fdb); }
.gc-book-signin .gc-link { font-size: 0.875rem; }
body #videoModal #customerEventsSection > h3 { display: flex; align-items: center; }

/* ---------- Back office: tabs, empty lists, small fixes ---------- */
/* Section tabs never fill on hover; the underline and the ink text carry the state. */
body .tab-nav .tab-btn:hover, body .admin-tab-btn:hover, body .auth-tab:hover { background: none; }
body .tab-nav .tab-btn, body .admin-tab-btn { display: inline-flex; align-items: center; }
/* Empty lists: a quiet tile with an inbox, then the words */
body .gc-is-empty { display: grid; justify-items: center; gap: 10px; padding: 2rem 1rem; color: var(--gc-muted); text-align: center; font-size: 0.9375rem; }
body .gc-is-empty::before {
  content: ''; width: 48px; height: 48px; border-radius: 14px;
  background: var(--gc-sunken) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a867e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E") center / 24px no-repeat;
}
/* ClassPoint lots: the status never breaks into two lines */
body .lot-item > :last-child { white-space: nowrap; flex: none; margin-left: 12px; }
@media (max-width: 559px) {
  body .tab-nav { margin-left: -4px; margin-right: -4px; }
  body .tab-nav .tab-btn, body .admin-tab-btn { padding: 0.7rem 0.75rem; font-size: 0.9375rem; }
  :is(.tab-btn, .admin-tab-btn) > .gc-ic[data-hue] { padding: 0.25em; margin-right: 0.4em; }
}

/* Admin: user-group counts are totals, not alerts (pending cancellation counts stay red) */
body .cancel-subtab-btn [id^="badge-user-"] { background: var(--gc-surface); color: var(--gc-ink); box-shadow: inset 0 0 0 1px var(--gc-line); }
body .cancel-subtab-btn.active [id^="badge-user-"] { background: rgba(255, 255, 255, 0.18); color: #fff; box-shadow: none; }
@media (max-width: 559px) {
  /* Sub-tabs and section tabs stay on one row and scroll, with a soft edge to say so */
  body .cancel-subtab-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -4px; margin-right: -4px; padding: 2px 4px; }
  body .cancel-subtab-nav::-webkit-scrollbar { display: none; }
  body .cancel-subtab-btn { flex: none; height: 40px; padding: 0 12px; font-size: 0.875rem; }
  body .tab-nav, body .admin-tab-nav, body .cancel-subtab-nav {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  }
}

/* Home: how instructors and studios join (visitors). The one ink block on the page. */
.gc-join {
  display: grid; gap: 18px; align-items: center; margin: 3rem 0 0.5rem; padding: 24px; border-radius: 22px;
  background: var(--gc-ink); color: #fff;
}
.gc-join[hidden] { display: none; }
.gc-join h2 { margin: 0; color: #fff; font-size: 1.625rem; font-weight: 850; font-stretch: 75%; line-height: 1.05; }
.gc-join p { margin: 8px 0 0; max-width: 52ch; color: #c9ccd1; font-size: 0.9375rem; line-height: 1.5; }
.gc-join-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.gc-join-acts .gc-btn { height: 46px; padding: 0 18px; font-size: 0.9375rem; background: rgba(255, 255, 255, 0.1); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28); }
.gc-join-acts .gc-btn:first-child { background: var(--gc-mango) var(--gc-grad-btn); color: var(--gc-ink); box-shadow: none; }
.gc-join-acts .gc-btn:hover { background-color: rgba(255, 255, 255, 0.18); }
@media (min-width: 900px) {
  .gc-join { grid-template-columns: 1fr auto; padding: 32px 36px; }
}
@media (max-width: 559px) {
  .gc-join-acts .gc-btn { flex: 1 1 100%; justify-content: center; }
}

/* Owner's workshop cards: the booking card plus the venue status, the projected share and one action */
.gc-book-fact { margin-top: 8px; color: var(--gc-muted); font-size: 0.875rem; line-height: 1.45; }
.gc-book-fact strong { color: var(--gc-success); }
.gc-book-fact .gc-ic { width: 15px; height: 15px; margin: 0 6px 0 0; vertical-align: -0.2em; }
.gc-book-acts--row { display: flex; justify-content: flex-end; gap: 8px; }
body .gc-book-acts--row > button, body .gc-book-acts--row > span { width: auto; min-height: 40px; padding: 0 16px !important; font-size: 0.875rem !important; border-radius: 10px !important; display: inline-flex; align-items: center; }

/* Create New Workshop: numbered steps as quiet panels, the calculator as a mango note */
body #videoModal .add-event { border: 0; padding: 1.25rem 0 0; margin-top: 0.5rem; border-top: 1px solid var(--gc-hair); background: none; }
body #videoModal .add-event > h4 { display: flex; align-items: center; margin: 0 0 14px; font-size: 1.125rem; font-weight: 780; }
.gc-step { margin-bottom: 12px; padding: 16px; border-radius: 16px; background: var(--gc-sunken); }
.gc-step > h5 { display: flex; align-items: center; margin: 0 0 12px; font-size: 1rem; font-weight: 750; color: var(--gc-ink); }
.gc-step .form-group { margin-bottom: 12px; }
.gc-step input:not([type="checkbox"]):not([type="radio"]), .gc-step select, .gc-step textarea { background-color: var(--gc-surface); }
.gc-step input[readonly] { background: var(--gc-chip) !important; color: var(--gc-muted); }
.gc-calc { margin-top: 12px; padding: 14px; border-radius: 12px; background: var(--gc-mango-tint); }
.gc-calc > h5 { display: flex; align-items: center; margin: 0 0 6px; font-size: 0.9375rem; font-weight: 750; }
.gc-calc p { margin: 4px 0 0; font-size: 0.875rem; }
body #videoModal #createEventBtn { width: 100%; min-height: 50px; border-radius: 12px; font-size: 1rem; }

/* Wide Class modal: clip the rounded corners without making a scroll box, so the video column stays put (sticky) */
@media (min-width: 900px) {
  body #videoModal .modal-content { overflow: clip; }
}

/* =====================================================================
   R-007 (10/5): end to end. Who-are-you sign-up, visibility, the phone
   booking bar, and a denser Class list (pictures sized like the
   category's: text-led rows on phones, four columns on desktop).
   ===================================================================== */

/* Sign-up: three equal choices (scripts/signup-roles.js) */
.gc-rolepick { margin: 4px 0 18px; }
.gc-rolepick[hidden] { display: none; }
.gc-rolepick-k { margin: 0 0 8px; color: var(--gc-muted); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.gc-rolepick-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.gc-role {
  display: grid; justify-items: start; align-content: start; gap: 6px; min-height: 0; padding: 12px; border: 0; border-radius: 14px;
  background: var(--gc-surface); box-shadow: inset 0 0 0 1px var(--gc-line); color: var(--gc-ink); font: inherit; text-align: left; cursor: pointer;
  transition: box-shadow 0.15s ease, background 0.15s ease;
}
.gc-role:hover { background: var(--gc-surface); box-shadow: inset 0 0 0 1.5px var(--gc-ink); }
.gc-role[aria-pressed="true"] { background: var(--gc-mango-tint); box-shadow: inset 0 0 0 2px var(--gc-mango-deep); }
.gc-role .gc-tile { width: 34px; height: 34px; border-radius: 10px; }
.gc-role .gc-tile .gc-ic { width: 18px; height: 18px; }
.gc-role b { font-size: 0.9375rem; font-weight: 750; }
.gc-role span:last-child { color: var(--gc-muted); font-size: 0.75rem; line-height: 1.35; }
body .gc-switch-links { display: none; }
@media (max-width: 400px) {
  .gc-rolepick-row { grid-template-columns: minmax(0, 1fr); }
  .gc-role { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 12px; }
  .gc-role .gc-tile { grid-row: 1 / span 2; }
}

/* Upload: Public as a clear switch */
.gc-switch { display: flex !important; align-items: flex-start; gap: 12px; cursor: pointer; font-weight: 500 !important; }
.gc-switch input, body .form-group .gc-switch input[type="checkbox"] {
  -webkit-appearance: none; appearance: none; flex: none; position: relative; width: 46px !important; min-width: 46px; height: 28px !important; min-height: 0 !important;
  margin: 1px 0 0 !important; padding: 0 !important; border: 0 !important; border-radius: 999px !important; background: var(--gc-control) !important;
  box-shadow: none !important; cursor: pointer; transition: background-color 0.15s ease;
}
.gc-switch input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(20, 21, 23, 0.25); transition: transform 0.15s ease; }
.gc-switch input:checked, body .form-group .gc-switch input[type="checkbox"]:checked { background: var(--gc-success) !important; }
.gc-switch input:checked::after { transform: translateX(18px); }
.gc-switch input:focus-visible { outline: 2px solid var(--gc-ink); outline-offset: 2px; }
.gc-switch span { color: var(--gc-muted); line-height: 1.4; }
.gc-switch span b { display: block; color: var(--gc-ink); }

/* Owner's view of a Class: who can see it */
.gc-vis-note { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; font-size: 0.875rem; line-height: 1.45; display: flex; gap: 8px; align-items: flex-start; }
.gc-vis-note[hidden] { display: none; }
.gc-vis-note.is-public { background: var(--gc-success-tint); color: var(--gc-success); }
.gc-vis-note.is-private { background: var(--gc-warn-tint); color: var(--gc-warn); font-weight: 600; }
.gc-vis-note .gc-ic { margin: 2px 0 0; color: inherit; flex: none; }

/* Phones: the booking bar at the bottom of a Class */
.gc-bookbar {
  position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--gc-surface);
  box-shadow: 0 -1px 0 var(--gc-hair), 0 -10px 24px -16px rgba(20, 21, 23, 0.4);
}
.gc-bookbar[hidden] { display: none; }
.gc-bookbar b { display: block; font-size: 1.0625rem; font-weight: 800; }
.gc-bookbar span { display: block; color: var(--gc-muted); font-size: 0.8125rem; }
.gc-bookbar > div { min-width: 0; }
.gc-bookbar b, .gc-bookbar span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-bookbar .gc-btn { flex: none; }
.gc-bookbar .gc-btn { height: 46px; padding: 0 18px; font-size: 0.9375rem; }
body #videoModal .modal-content { overflow: clip; }
body #videoModal .modal-content > .gc-bookbar:last-child { margin-bottom: 0; }
/* BUG-41: it steps aside while the dates are on screen (booking-card.js placeBookBar) */
.gc-bookbar { transition: transform 0.28s var(--gc-ease), opacity 0.2s ease, visibility 0s; }
.gc-bookbar.is-away { transform: translateY(100%); opacity: 0; visibility: hidden; transition: transform 0.28s var(--gc-ease), opacity 0.2s ease, visibility 0s 0.28s; }
body #videoModal #customerEventsSection { scroll-margin-top: 76px; }
/* CR-36: once the video has scrolled away, a title strip holds the close button (placeSheetTop) */
.gc-sheettop {
  position: sticky; top: 0; z-index: 6; height: 60px; margin-bottom: -60px; display: flex; align-items: center; padding: 0 68px 0 16px;
  background: var(--gc-surface); box-shadow: 0 1px 0 var(--gc-hair);
  transform: translateY(-100%); opacity: 0; visibility: hidden; transition: transform 0.28s var(--gc-ease), opacity 0.2s ease, visibility 0s 0.28s;
}
.gc-sheettop b { min-width: 0; font-size: 1.0625rem; font-weight: 750; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-sheettop.is-on { transform: none; opacity: 1; visibility: visible; transition: transform 0.28s var(--gc-ease), opacity 0.2s ease, visibility 0s; }
@media (max-width: 899px) {
  body #videoModal .close { transition: top 0.2s var(--gc-ease), background-color 0.2s, box-shadow 0.2s; }
  body #videoModal.gc-top-on .close { top: 8px; background: var(--gc-fill); color: var(--gc-ink); box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { .gc-bookbar, .gc-bookbar.is-away, .gc-sheettop, .gc-sheettop.is-on, body #videoModal .close { transition: none; } }
@media (min-width: 900px) { .gc-bookbar, .gc-sheettop { display: none !important; } }

/* Class list: four smaller cards on desktop */
@media (min-width: 1100px) {
  .video-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 2.25rem 1.25rem !important; }
  body .gc-cc .gc-cc-title { font-size: 1rem; }
}
@media (min-width: 600px) and (max-width: 1099px) {
  .video-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
/* Phones: text-led rows, a portrait thumbnail at the side (as Luma and ClassPass list) */
@media (max-width: 599px) {
  .video-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; }
  body .gc-cc {
    display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: start; padding: 10px;
    border-radius: 18px; background: var(--gc-surface); box-shadow: inset 0 0 0 1px var(--gc-hair);
  }
  body .gc-cc .gc-cc-media { aspect-ratio: 4 / 5; border-radius: 12px; }
  body .gc-cc .gc-cc-style { top: 6px; left: 6px; padding: 2px 7px; font-size: 0.5625rem; }
  body .gc-cc .gc-cc-status { left: 6px; bottom: 6px; padding: 2px 7px; font-size: 0.625rem; }
  body .gc-cc .gc-cc-play { width: 30px; height: 30px; right: 6px; bottom: 6px; }
  body .gc-cc .gc-cc-play .gc-ic { width: 12px; height: 12px; }
  body .gc-cc .gc-cc-body { padding: 2px 0 0; }
  body .gc-cc .gc-cc-title { font-size: 1.0625rem; font-weight: 750; }
  body .gc-cc .gc-cc-sessions, body .gc-cc .gc-cc-nodates { margin-top: 8px; padding-top: 8px; }
  body .gc-cc .gc-cc-session:nth-child(2) { display: none; }
  body .gc-cc .gc-cc-desc { -webkit-line-clamp: 2 !important; font-size: 0.875rem !important; margin-top: 6px !important; }
}

/* Class card: the style and instructor in words. On wide cards the tag sits on the picture and the
   signed-in instructor row shows the name, so the line only shows when it adds something. */
.gc-cc-by { display: flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--gc-muted); font-size: 0.8125rem; font-weight: 600; }
@media (min-width: 600px) { .gc-cc-by.has-row { display: none; } }
@media (max-width: 599px) {
  body .gc-cc .gc-cc-style { display: none; }
  body .gc-cc .choreographer-row { display: none !important; }
}

/* Home hero, wide screens: three Class pictures fanned at the right */

/* Notifications (profile): icon on its meaning tile, title and time on one line, unread outlined in mango */
body .tab-content .notification-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--gc-surface); box-shadow: inset 0 0 0 1px var(--gc-hair); }
body .tab-content .notification-item:hover { background: var(--gc-sunken); }
body .tab-content .notification-item.unread { background: var(--gc-surface); box-shadow: inset 0 0 0 1.5px var(--gc-mango-line); }
body .notification-type { margin: 0; line-height: 0; }
body .notification-type .gc-ic { box-sizing: content-box; width: 20px; height: 20px; margin: 0; padding: 10px; border-radius: 12px; background: var(--hue-tint, var(--gc-sunken)); }
body .notification-title { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--gc-ink); line-height: 1.3; }
/* R-011: unread shows as a dot on the icon tile (it floated between the tile and the title). */
body .notification-item.unread .notification-title::before { display: none; }
body .notification-type { position: relative; }
body .notification-item.unread .notification-type::after { content: ''; position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border-radius: 50%; background: var(--gc-mango-deep); box-shadow: 0 0 0 2px var(--gc-surface); }
body .notification-message { color: var(--gc-muted); font-size: 0.875rem; line-height: 1.5; margin-top: 4px; }
body .notification-time { padding-top: 2px; color: var(--gc-subtle); font-size: 0.75rem; }
@media (max-width: 559px) {
  body .tab-content .notification-item { grid-template-columns: auto minmax(0, 1fr); }
  body .notification-time { grid-column: 2; padding-top: 0; }
}

/* Empty lists stay compact when several sit on one page */
body .gc-is-empty { padding: 1.25rem 1rem; gap: 8px; font-size: 0.875rem; }
body .gc-is-empty::before { width: 40px; height: 40px; border-radius: 12px; background-size: 20px; }

/* =====================================================================
   R-008 (10/6): depth and a direct entry. One elevation scale used the
   same way everywhere (resting cards e1–e2, raised controls e3, overlays
   e4), the home page's search (What · Where · When), the workshop rail,
   the studio directory, the booking confirmation, the legal pages and
   a real footer. Mango stays the one action colour.
   ===================================================================== */
:root {
  --gc-e1: 0 1px 2px rgba(20, 21, 23, 0.05), 0 1px 1px rgba(20, 21, 23, 0.03);
  --gc-e2: 0 1px 2px rgba(20, 21, 23, 0.06), 0 6px 16px -6px rgba(20, 21, 23, 0.12);
  --gc-e3: 0 2px 6px rgba(20, 21, 23, 0.06), 0 14px 30px -10px rgba(20, 21, 23, 0.22);
  --gc-e4: 0 10px 28px rgba(20, 21, 23, 0.12), 0 28px 64px -18px rgba(20, 21, 23, 0.34);
  --gc-ring: 0 0 0 1px rgba(20, 21, 23, 0.07);
  --gc-mango-glow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 6px 16px -6px rgba(255, 150, 20, 0.7);
  --gc-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ---------- Buttons and controls: flat on the page, depth only for what floats ---------- */
.gc-btn { transition: transform 0.16s var(--gc-ease), box-shadow 0.16s var(--gc-ease), background-color 0.16s ease, filter 0.16s ease; }
.gc-btn--primary, body .btn-primary, body .btn-register:not(:disabled) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45); }
.gc-btn--primary:hover, body .btn-primary:hover, body .btn-register:not(:disabled):hover { filter: saturate(1.1) brightness(1.03); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 6px 14px -8px rgba(230, 130, 10, 0.75); }
.gc-btn--primary:active, body .btn-primary:active, body .btn-register:active { transform: scale(0.985); }
.gc-btn--secondary { background: var(--gc-surface); box-shadow: inset 0 0 0 1px rgba(20, 21, 23, 0.16); }
.gc-btn--secondary:hover { background: var(--gc-surface); box-shadow: inset 0 0 0 1.5px var(--gc-ink); }
.gc-btn:focus-visible, .gc-chip:focus-visible, .gc-opt:focus-visible, .gc-wcard:focus-visible, .gc-slot:focus-visible { outline: 2px solid var(--gc-ink); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .gc-btn, .gc-wcard, .gc-wcard-media, .gc-studio, .gc-slot { transition: none !important; } }

/* Header: white, lifts off the page once it scrolls */
#site-header { transition: box-shadow 0.2s ease; }
#site-header.gch-scrolled { box-shadow: 0 1px 0 rgba(20, 21, 23, 0.06), 0 8px 20px -14px rgba(20, 21, 23, 0.35); }
#site-header .gch-account > a.gch-host { color: var(--gc-ink); font-weight: 700; }
@media (min-width: 900px) { #site-header .gch-account > a.gch-host { padding: 0 12px; border-radius: 999px; } #site-header .gch-account > a.gch-host:hover { background: var(--gc-sunken); } }

/* ---------- Home layout ---------- */
.gc-home { display: flex !important; flex-direction: column; gap: 40px; margin: 0 0 3rem; }
.gc-home > * { min-width: 0; }
@media (max-width: 599px) { .gc-home { gap: 28px; } }

/* The deck: headline, the search, quick styles. Full-bleed band from white into the page. */
.gc-deck {
  position: relative; z-index: 20; margin: -1.5rem calc(50% - var(--gc-vw, 100vw) / 2) 0; padding: 2.75rem calc(var(--gc-vw, 100vw) / 2 - 50%) 2rem;
  background: linear-gradient(180deg, var(--gc-surface) 0%, var(--gc-surface) 55%, var(--gc-bg) 100%);
  text-align: center;
}
.gc-deck-title { margin: 0 auto; max-width: 18ch; font-size: clamp(2.125rem, 5.2vw, 3.5rem); font-weight: 850; font-stretch: 74%; line-height: 1; letter-spacing: -0.015em; text-wrap: balance; }
.gc-deck-title em { font-style: normal; padding: 0 0.05em; margin: 0 -0.05em; background: var(--gc-grad-btn) no-repeat 0 82% / 100% 36%; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.gc-deck-sub { margin: 0.875rem auto 1.75rem; max-width: 52ch; color: var(--gc-muted); font-size: 1.0625rem; line-height: 1.5; }
.gc-deck-join { margin: 1rem 0 0; color: var(--gc-muted); font-size: 0.9375rem; }
@media (min-width: 900px) { .gc-deck-join { display: none; } }   /* the header carries Sign in and Join from here up */
.gc-deck-join .gc-link { font-size: 0.9375rem; }
.gc-deck .gc-chips { justify-content: center; flex-wrap: wrap; margin: 1.25rem auto 0; padding: 2px; -webkit-mask-image: none; mask-image: none; }
@media (max-width: 719px) {
  .gc-deck { margin-top: -1rem; padding-top: 1.75rem; padding-bottom: 1.25rem; text-align: left; }
  .gc-deck-title { margin: 0; max-width: 14ch; font-size: clamp(2rem, 9.2vw, 2.5rem); }
  .gc-deck-sub { margin: 0.625rem 0 1.25rem; font-size: 0.9375rem; }
  .gc-deck .gc-chips { justify-content: flex-start; flex-wrap: nowrap; margin: 1rem calc(50% - var(--gc-vw, 100vw) / 2) 0; padding: 4px calc(var(--gc-vw, 100vw) / 2 - 50%) 6px; overflow-x: auto;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
}

/* The search pill (desktop): three parts and the action */

.gc-pop {
  position: absolute; top: calc(100% + 12px); z-index: 40; width: 360px; max-height: 60vh; overflow-y: auto; padding: 10px; border-radius: 26px;
  background: var(--gc-surface); box-shadow: var(--gc-ring), var(--gc-e4); animation: gc-pop 0.18s var(--gc-ease);
}

.gc-opt {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 58px; padding: 8px 12px; border: 0; border-radius: 16px; background: none;
  color: var(--gc-ink); font: inherit; text-align: left; cursor: pointer; transition: background-color 0.12s ease;
}
.gc-opt:hover { background: var(--gc-sunken); }
.gc-opt.is-on { background: var(--gc-mango-tint); }
.gc-opt > span:nth-child(2) { display: grid; gap: 1px; min-width: 0; flex: 1; }
.gc-opt b { font-size: 0.9375rem; font-weight: 700; }
.gc-opt small { color: var(--gc-muted); font-size: 0.8125rem; }
.gc-opt-ic { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--gc-surface); box-shadow: var(--gc-ring), var(--gc-e1); }
.gc-opt-ic .gc-ic { width: 20px; height: 20px; margin: 0; }
.gc-opt-ic .gc-dot { width: 12px; height: 12px; border-radius: 4px; }
.gc-opt > .gc-ic-check { flex: none; width: 20px; height: 20px; margin: 0; color: var(--gc-ink); }

/* Phones: one search pill opens a sheet */

.gc-sheet-scrim { position: fixed; inset: 0; z-index: 1000; background: rgba(20, 21, 23, 0.45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: gc-fade 0.18s ease; }
.gc-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1001; display: flex; flex-direction: column; max-height: 90vh; border-radius: 26px 26px 0 0;
  background: var(--gc-surface); box-shadow: var(--gc-e4); animation: gc-rise 0.26s var(--gc-ease); text-align: left;
}
.gc-sheet--center { left: 50%; right: auto; bottom: auto; top: 50%; width: min(520px, calc(100vw - 32px)); max-height: 82vh; border-radius: 26px; transform: translate(-50%, -50%); animation: gc-pop 0.2s var(--gc-ease); }
@media (max-width: 599px) { .gc-sheet--center { left: 0; right: 0; top: auto; bottom: 0; width: auto; transform: none; border-radius: 26px 26px 0 0; animation: gc-rise 0.26s var(--gc-ease); } }
@keyframes gc-fade { from { opacity: 0; } }
@keyframes gc-rise { from { transform: translateY(24px); opacity: 0; } }
.gc-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 10px; }
.gc-sheet-head b { font-size: 1.125rem; font-weight: 800; }
.gc-sheet-x { display: grid; place-items: center; width: 40px; height: 40px; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: var(--gc-sunken); color: var(--gc-ink); cursor: pointer; }
.gc-sheet-x .gc-ic { width: 18px; height: 18px; margin: 0; color: inherit; }
.gc-sheet-body { overflow-y: auto; padding: 4px 20px 16px; }
.gc-sheet-body h3 { margin: 16px 0 8px; font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gc-muted); }
.gc-sheet-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.gc-sheet-opts .gc-opt { min-height: 54px; padding: 8px 10px; border-radius: 14px; box-shadow: var(--gc-ring); gap: 10px; }
.gc-sheet-opts .gc-opt.is-on { box-shadow: 0 0 0 2px var(--gc-mango-deep); }
.gc-sheet-opts .gc-opt small, .gc-sheet-opts .gc-opt > .gc-ic-check { display: none; }
.gc-sheet-opts .gc-opt-ic { width: 32px; height: 32px; border-radius: 10px; box-shadow: none; background: var(--gc-sunken); }
.gc-sheet-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--gc-hair); }
.gc-sheet-foot .gc-btn { height: 50px; padding: 0 22px; font-size: 1rem; }
body.gc-sheet-open { overflow: hidden; }

/* R-012: the phone "Find a class" sheet in the site's own pieces, matching the search card: the
   warm page colour, styles and times as chips (lit in mango when chosen), the places as one
   grouped white list with a check, a grab handle, and a full-width button. */
.gc-sheet--find { background: var(--gc-bg); overflow: hidden; }
.gc-sheet-grab { flex: none; width: 40px; height: 5px; margin: 10px auto 0; border-radius: 999px; background: var(--gc-line); }
.gc-sheet--find .gc-sheet-head { padding: 8px 20px 4px; }
.gc-sheet--find .gc-sheet-head b { font-size: 1.5rem; font-weight: 850; font-stretch: 78%; letter-spacing: -0.01em; }
.gc-sheet--find .gc-sheet-x { background: var(--gc-surface); box-shadow: var(--gc-ring); }
.gc-sheet--find .gc-sheet-body { padding: 0 20px 22px; }
.gc-sgroup { margin-top: 18px; }
.gc-sheet--find .gc-sgroup h3 { margin: 0 0 10px 2px; color: var(--gc-ink); font-size: 0.9375rem; font-weight: 750; letter-spacing: 0; text-transform: none; }
.gc-schips { display: flex; flex-wrap: wrap; gap: 8px; }
.gc-schip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px;
  background: var(--gc-surface); box-shadow: var(--gc-ring); color: var(--gc-ink); font: inherit; font-size: 0.9375rem; font-weight: 650; cursor: pointer;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.gc-schip .gc-ic { width: 16px; height: 16px; margin: 0; color: var(--gc-accent-ink); }
.gc-schip .gc-dot { width: 9px; height: 9px; border-radius: 3px; }
.gc-schip[aria-pressed="true"] { background: var(--gc-mango) var(--gc-grad); box-shadow: none; font-weight: 750; }
.gc-schip[aria-pressed="true"] .gc-ic { color: inherit; }
.gc-schip:focus-visible, .gc-srow:focus-visible { outline: 2px solid var(--gc-ink); outline-offset: 2px; }
.gc-slist { display: grid; overflow: hidden; border-radius: 18px; background: var(--gc-surface); box-shadow: var(--gc-ring); }
.gc-srow {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; padding: 8px 16px 8px 12px; border: 0; border-radius: 0;
  background: none; color: var(--gc-ink); font: inherit; text-align: left; cursor: pointer; transition: background-color 0.12s ease;
}
.gc-srow + .gc-srow { box-shadow: inset 0 1px 0 var(--gc-hair); }
.gc-srow:active { background: var(--gc-sunken); }
.gc-srow-ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--gc-mango-tint); color: var(--gc-accent-ink); }
.gc-srow-ic .gc-ic, .gc-srow-ic .gc-ic[data-hue] { width: 18px; height: 18px; margin: 0; color: inherit; }
.gc-srow-t { display: grid; gap: 1px; flex: 1; min-width: 0; }
.gc-srow-t b { font-size: 1rem; font-weight: 650; }
.gc-srow-t small { color: var(--gc-muted); font-size: 0.8125rem; }
.gc-srow.is-on .gc-srow-t b { font-weight: 800; }
.gc-srow > .gc-ic { flex: none; width: 20px; height: 20px; margin: 0; color: var(--gc-mango-deep); }
.gc-sheet--find .gc-sheet-foot { gap: 16px; background: var(--gc-surface); }
.gc-sheet--find .gc-sheet-foot .gc-btn { flex: 1; justify-content: center; height: 54px; border-radius: 16px; font-weight: 800; }
.gc-sheet--find .gc-sheet-foot .gc-btn .gc-ic { width: 18px; height: 18px; margin: 0 0 0 4px; }
.gc-sheet--find .gc-sheet-foot .gc-link { flex: none; min-height: 44px; padding: 0 4px; border: 0; background: none; box-shadow: none; font-size: 0.9375rem; font-weight: 700; }

/* Quick style chips */
.gc-chip { height: 40px; padding: 0 16px; background: var(--gc-surface); box-shadow: inset 0 0 0 1px var(--gc-line); }
.gc-chip:hover:not([aria-pressed="true"]) { background: var(--gc-surface); box-shadow: inset 0 0 0 1.5px var(--gc-ink); }
.gc-chip[aria-pressed="true"] { background: var(--gc-ink); color: #fff; box-shadow: none; }
.gc-chip .gc-ic { width: 16px; height: 16px; margin: 0; }

/* Section heads with arrows */
.gc-near .gc-sec { margin-bottom: 16px; }
.gc-near h2 { font-size: 1.5rem !important; font-weight: 800 !important; font-stretch: 82% !important; }
.gc-rail-nav { display: flex; gap: 8px; }
.gc-round {
  display: grid; place-items: center; width: 38px; height: 38px; min-height: 0; padding: 0; border: 0; border-radius: 50%;
  background: var(--gc-surface); box-shadow: inset 0 0 0 1px var(--gc-line); color: var(--gc-ink); cursor: pointer; transition: box-shadow 0.16s ease, opacity 0.16s ease;
}
.gc-round:hover:not(:disabled) { box-shadow: inset 0 0 0 1.5px var(--gc-ink); }
.gc-round:disabled { opacity: 0.35; cursor: default; }
.gc-rail-nav[hidden] { display: none; }
.gc-round .gc-ic { width: 18px; height: 18px; margin: 0; color: inherit; }
.gc-round[data-act="prev"] .gc-ic { transform: rotate(180deg); }
@media (max-width: 719px) { .gc-rail-nav { display: none; } }

/* The workshop rail: frameless cards, the picture carries the depth */
.gc-rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 22px) / 4); gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory;
  margin: -8px -8px 0; padding: 8px 8px 14px; scrollbar-width: none; overscroll-behavior-x: contain;
}
.gc-rail::-webkit-scrollbar { display: none; }
@media (max-width: 1099px) { .gc-rail { grid-auto-columns: calc((100% - 2 * 20px) / 3); gap: 20px; } }
@media (max-width: 719px) {
  .gc-rail { grid-auto-columns: 74%; gap: 14px; margin: -8px calc(50% - var(--gc-vw, 100vw) / 2) 0; padding: 8px calc(var(--gc-vw, 100vw) / 2 - 50%) 14px; scroll-padding: 0 calc(var(--gc-vw, 100vw) / 2 - 50%); }
}
.gc-wcard {
  scroll-snap-align: start; display: grid; gap: 12px; align-content: start; min-width: 0; padding: 0; border: 0; border-radius: 0; background: none;
  color: var(--gc-ink); font: inherit; text-align: left; cursor: pointer;
}
.gc-wcard:hover { background: none; }
.gc-wcard-media {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 20px; background: var(--gc-chip);
  transition: filter 0.22s var(--gc-ease);
}
.gc-wcard:hover .gc-wcard-media { filter: brightness(0.97); }
.gc-wcard-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 72%; transition: transform 0.5s var(--gc-ease); }
.gc-wcard-media img[src*="hqdefault"] { transform: scale(1.42); }
.gc-wcard:hover .gc-wcard-media img:not([src*="hqdefault"]) { transform: scale(1.03); }
.gc-media-fb { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; background: var(--gc-grad); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.8125rem; }
.gc-media-fb .gc-dot { width: 14px; height: 14px; border-radius: 4px; }
.gc-wcard-when {
  position: absolute; left: 12px; display: inline-flex; align-items: center; gap: 6px; max-width: calc(100% - 24px); padding: 6px 11px; border-radius: 999px;
  font-size: 0.8125rem; font-weight: 750; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gc-wcard-when { top: 12px; background: rgba(255, 255, 255, 0.96); color: var(--gc-ink); box-shadow: var(--gc-e2); }

.gc-wcard-title { font-size: 1.0625rem; font-weight: 750; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gc-wcard-meta { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--gc-muted); font-size: 0.875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-wcard-meta .gc-ic { width: 14px; height: 14px; margin: 0; flex: none; }

.gc-wcard.is-skel { pointer-events: none; }
.gc-wcard.is-skel .gc-wcard-media { box-shadow: none; }

/* Panels and the empty state sit on the page: a hairline, no lift */
.gc-panel { padding: 20px; border-radius: 24px; box-shadow: var(--gc-ring); }
.gc-empty-card { padding: 18px 20px; border-radius: 20px; box-shadow: var(--gc-ring); }
.gc-empty-card .gc-btn { margin-left: auto; flex: none; }
@media (max-width: 599px) { .gc-empty-card { flex-wrap: wrap; } .gc-empty-card .gc-btn { margin-left: 54px; } }
.gc-next-card { box-shadow: var(--gc-e1); }

/* The Class list under it: pictures lift on hover */
body .gc-cc .gc-cc-media { box-shadow: var(--gc-e2); transition: box-shadow 0.22s var(--gc-ease), transform 0.22s var(--gc-ease); }
body .gc-cc:hover .gc-cc-media { box-shadow: var(--gc-e3); transform: translateY(-3px); }
.gc-classes-head { padding-top: 0; border-top: 0; }
@media (max-width: 599px) { body .gc-cc { box-shadow: var(--gc-ring), var(--gc-e1); } body .gc-cc .gc-cc-media { box-shadow: none; } body .gc-cc:hover .gc-cc-media { transform: none; } }

/* ---------- Studio directory (scripts/studios.js, index.html?view=studios) ---------- */
html.gc-view-studios #gcHome, html.gc-view-studios .gc-classes-head, html.gc-view-studios .search-section,
html.gc-view-studios #videoGrid, html.gc-view-studios #loadMoreContainer, html.gc-view-studios #gcJoinBand { display: none !important; }
.gc-studios-head { padding: 0.5rem 0 1.5rem; }
.gc-studios-head h1 { margin: 0.5rem 0 0; font-size: clamp(2.25rem, 6vw, 3.25rem); font-weight: 850; font-stretch: 74%; line-height: 1; }
.gc-studios-head p { margin: 0.75rem 0 0; max-width: 62ch; color: var(--gc-muted); font-size: 1.0625rem; line-height: 1.5; }
.gc-studios-head .gc-chips { margin: 1.25rem 0 0; padding: 2px; -webkit-mask-image: none; mask-image: none; flex-wrap: wrap; }
.gc-back { display: inline-flex; align-items: center; gap: 6px; color: var(--gc-muted); font-weight: 700; font-size: 0.875rem; text-decoration: none; }
.gc-back .gc-ic { width: 16px; height: 16px; margin: 0; transform: rotate(180deg); color: inherit; }
.gc-back:hover { color: var(--gc-ink); }
.gc-studio-count { margin: 0 0 14px; color: var(--gc-muted); font-weight: 600; }
.gc-studio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; }
@media (max-width: 599px) { .gc-studio-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; } }
.gc-studio { overflow: hidden; border-radius: 24px; background: var(--gc-surface); box-shadow: var(--gc-ring), var(--gc-e1); }
.gc-studio-media { position: relative; aspect-ratio: 16 / 10; background: var(--gc-mango-tint); }
.gc-studio-media img { width: 100%; height: 100%; object-fit: cover; }
.gc-studio-ph { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(120% 90% at 30% 20%, #fff7df 0%, var(--gc-mango-tint) 45%, #ffe2a6 100%); }
.gc-studio-ph .gc-ic { width: 52px; height: 52px; margin: 0; color: var(--gc-accent-ink); opacity: 0.65; }
.gc-studio-badge { position: absolute; left: 14px; top: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; background: rgba(255, 255, 255, 0.96); box-shadow: var(--gc-e2); font-size: 0.8125rem; font-weight: 750; }
.gc-studio-badge .gc-ic { width: 14px; height: 14px; margin: 0; }
.gc-studio-body { padding: 18px 20px 20px; }
.gc-studio-body h3 { margin: 0; font-size: 1.25rem; font-weight: 800; font-stretch: 85%; }
.gc-studio-where { margin: 4px 0 0; color: var(--gc-muted); font-size: 0.9375rem; }
.gc-studio-facts { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 12px 0 0; font-size: 0.875rem; font-weight: 600; }
.gc-studio-facts span { display: inline-flex; align-items: center; gap: 6px; }
.gc-studio-facts .gc-ic { width: 16px; height: 16px; margin: 0; }
.gc-studio-slots { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--gc-hair); }
.gc-studio-loading, .gc-studio-none { color: var(--gc-muted); font-size: 0.875rem; }
.gc-times-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.gc-times-head b { font-size: 0.9375rem; font-weight: 780; }
.gc-times-head span { color: var(--gc-subtle); font-size: 0.8125rem; font-weight: 600; }
.gc-days { display: flex; gap: 6px; margin: 0 -2px; padding: 2px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
.gc-days::-webkit-scrollbar { display: none; }
.gc-day {
  flex: none; display: grid; justify-items: center; gap: 1px; width: 52px; min-height: 0; padding: 8px 0 7px; border: 0; border-radius: 14px;
  background: var(--gc-surface); box-shadow: inset 0 0 0 1px var(--gc-line); color: var(--gc-ink); font: inherit; cursor: pointer; scroll-snap-align: start;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}
.gc-day small, .gc-day em { color: var(--gc-subtle); font-size: 0.6875rem; font-style: normal; font-weight: 650; letter-spacing: 0.02em; text-transform: uppercase; }
.gc-day b { font-size: 1.125rem; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }
.gc-day:hover { box-shadow: inset 0 0 0 1.5px var(--gc-ink); }
.gc-day[aria-pressed="true"] { background: var(--gc-ink); box-shadow: none; color: #fff; }
.gc-day[aria-pressed="true"] small, .gc-day[aria-pressed="true"] em { color: rgba(255, 255, 255, 0.72); }
.gc-day--nav { width: 36px; place-items: center; color: var(--gc-muted); }
.gc-day--nav .gc-ic { width: 18px; height: 18px; margin: 0; }
.gc-day--nav:first-child .gc-ic { transform: rotate(180deg); }
.gc-times-day { margin: 14px 0 8px; color: var(--gc-muted); font-size: 0.8125rem; font-weight: 650; }
.gc-slot-row { display: flex; flex-wrap: wrap; gap: 8px; }
.gc-slot {
  display: grid; gap: 1px; min-width: 96px; min-height: 0; padding: 9px 14px; border: 0; border-radius: 12px; background: var(--gc-surface); box-shadow: inset 0 0 0 1px var(--gc-line);
  color: var(--gc-ink); font: inherit; text-align: left; cursor: pointer; transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.gc-slot span { font-size: 0.875rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.gc-slot small { color: var(--gc-muted); font-size: 0.75rem; font-weight: 600; }
.gc-slot:hover { background: var(--gc-mango-tint); box-shadow: inset 0 0 0 1.5px var(--gc-mango-deep); }
.gc-day:focus-visible { outline: 2px solid var(--gc-ink); outline-offset: 2px; }
.gc-studio.is-skel .gc-studio-media { background: var(--gc-chip); }
.gc-studio.is-skel .gc-studio-body span { display: block; height: 0.8rem; width: 60%; margin: 8px 0; border-radius: 6px; background: var(--gc-chip); }
.gc-choose-slot { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; background: var(--gc-mango-tint); font-weight: 650; font-size: 0.875rem; }
.gc-choose-slot .gc-ic { margin: 0; }
.gc-choose-list { display: grid; gap: 8px; }
.gc-choose { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 0; padding: 8px; border: 0; border-radius: 16px; background: var(--gc-surface); box-shadow: var(--gc-ring); font: inherit; text-align: left; cursor: pointer; }
.gc-choose:hover { background: var(--gc-surface); box-shadow: 0 0 0 2px var(--gc-mango-deep), var(--gc-e2); }
.gc-choose-ph { flex: none; width: 48px; height: 60px; overflow: hidden; border-radius: 10px; background: var(--gc-chip); }
.gc-choose-ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 72%; }
.gc-choose > span:nth-child(2) { display: grid; flex: 1; min-width: 0; }
.gc-choose b { font-weight: 750; }
.gc-choose small { color: var(--gc-muted); font-size: 0.8125rem; }
.gc-choose > .gc-ic { flex: none; margin: 0; color: var(--gc-muted); }

/* ---------- Booking confirmation (booking-card.js gcBookingConfirmed) ---------- */
.gc-confirm-scrim { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; padding: 16px; background: rgba(20, 21, 23, 0.5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: gc-fade 0.2s ease; }
.gc-confirm { width: min(460px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; padding: 28px 26px 22px; border-radius: 28px; background: var(--gc-surface); box-shadow: var(--gc-e4); text-align: center; animation: gc-pop 0.24s var(--gc-ease); }
.gc-confirm-mark { display: grid; place-items: center; width: 68px; height: 68px; margin: 0 auto 14px; border-radius: 50%; background: var(--gc-mango) var(--gc-grad); box-shadow: var(--gc-mango-glow); }
.gc-confirm-mark .gc-ic { width: 32px; height: 32px; margin: 0; color: var(--gc-ink); stroke-width: 2.6; }
.gc-confirm h2 { margin: 0; font-size: 2.25rem; font-weight: 850; font-stretch: 74%; line-height: 1; }
.gc-confirm-lead { margin: 8px 0 18px; color: var(--gc-muted); }
.gc-confirm-card { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 18px; background: var(--gc-sunken); text-align: left; }
.gc-confirm-card > div { display: grid; gap: 3px; min-width: 0; }
.gc-confirm-card b { font-size: 1.0625rem; }
.gc-confirm-card > div > span { display: flex; align-items: flex-start; gap: 6px; color: var(--gc-muted); font-size: 0.875rem; }
.gc-confirm-card .gc-datebox { flex: none; }
.gc-confirm-card .gc-ic { width: 14px; height: 14px; margin: 3px 0 0; flex: none; }
.gc-confirm-rule { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0 0; text-align: left; color: var(--gc-muted); font-size: 0.875rem; }
.gc-confirm-rule .gc-ic { margin: 2px 0 0; flex: none; }
.gc-confirm-acts { display: grid; gap: 10px; margin-top: 18px; }
.gc-confirm-acts .gc-btn { justify-content: center; height: 50px; font-size: 1rem; }
.gc-confirm-paid { margin: 14px 0 0; color: var(--gc-muted); font-size: 0.875rem; }
.gc-confirm-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--gc-hair); }

/* ---------- The Class modal: rounder, deeper ---------- */
@media (min-width: 900px) { body #videoModal .modal-content { border-radius: 28px; box-shadow: var(--gc-e4); } }
body #videoModal .event-card.gc-book { box-shadow: var(--gc-ring), var(--gc-e2); border-radius: 22px; }

/* ---------- Legal and About pages ---------- */
.gc-legal { max-width: 760px; margin: 0 auto; padding: 0.5rem 0 1rem; line-height: 1.65; }
.gc-draft { display: inline-flex; margin: 0 0 14px; padding: 6px 12px; border-radius: 999px; background: var(--gc-warn-tint); color: var(--gc-warn); font-size: 0.8125rem; font-weight: 750; }
.gc-legal h1 { margin: 0; font-size: clamp(2.25rem, 6vw, 3.25rem); font-weight: 850; font-stretch: 74%; line-height: 1.02; letter-spacing: -0.01em; }
.gc-legal-meta { margin: 8px 0 0; color: var(--gc-subtle); font-size: 0.875rem; }
.gc-legal-lead { margin: 18px 0 0; font-size: 1.125rem; color: var(--gc-ink); }
.gc-legal-toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; }
.gc-legal-toc a { padding: 7px 12px; border-radius: 999px; background: var(--gc-surface); box-shadow: var(--gc-ring), var(--gc-e1); color: var(--gc-ink); font-weight: 650; font-size: 0.8125rem; text-decoration: none; }
.gc-legal-toc a:hover { box-shadow: 0 0 0 1px rgba(20, 21, 23, 0.2), var(--gc-e2); }
.gc-legal h2 { margin: 2.25rem 0 0.5rem; font-size: 1.375rem; font-weight: 800; scroll-margin-top: calc(var(--gc-header-h) + 16px); }
.gc-legal h3 { margin: 1.25rem 0 0.25rem; font-size: 1rem; font-weight: 750; }
.gc-legal p, .gc-legal li { color: var(--gc-muted); }
.gc-legal b { color: var(--gc-ink); }
.gc-legal ul { padding-left: 1.25rem; }
.gc-legal li + li { margin-top: 0.4rem; }
.gc-legal a:not(.gc-btn) { color: var(--gc-ink); text-decoration-color: var(--gc-mango-deep); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.gc-legal-summary, .gc-about-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 24px 0 8px; }
.gc-legal-summary > div, .gc-about-steps > div { display: grid; gap: 6px; align-content: start; padding: 18px; border-radius: 20px; background: var(--gc-surface); box-shadow: var(--gc-ring); }
.gc-legal-summary b, .gc-about-steps b { color: var(--gc-ink); font-size: 1.0625rem; margin-top: 6px; }
.gc-legal-summary span:not(.gc-tile), .gc-about-steps span:not(.gc-tile) { color: var(--gc-muted); font-size: 0.9375rem; line-height: 1.5; }
@media (max-width: 719px) { .gc-legal-summary, .gc-about-steps { grid-template-columns: minmax(0, 1fr); } }
.gc-about h1 { max-width: 15ch; }

/* ---------- Footer (scripts/footer.js) ---------- */
footer.gc-footer { margin-top: 4rem; padding: 0; background: var(--gc-surface); border-top: 1px solid var(--gc-hair); color: var(--gc-muted); text-align: left; }
.gcf { max-width: 1200px; margin: 0 auto; padding: 48px 2rem 28px; }
.gcf-cols { display: grid; grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); gap: 32px; }
.gcf-brand p { margin: 12px 0 0; max-width: 30ch; font-size: 0.9375rem; line-height: 1.5; }
.gcf-logo { display: inline-flex; align-items: center; gap: 9px; color: var(--gc-ink); font-weight: 800; font-stretch: 75%; font-size: 1.375rem; text-decoration: none; }
.gcf-logo .gch-mark { position: relative; display: inline-block; flex: none; width: 30px; height: 30px; border-radius: 8px; background: var(--gc-mango) var(--gc-grad); }
.gcf-logo .gch-mark::after { content: ''; position: absolute; inset: 5px; background: var(--gc-ink); -webkit-mask: url(../images/gc-mark.svg) center / contain no-repeat; mask: url(../images/gc-mark.svg) center / contain no-repeat; }
.gcf-col h2 { margin: 4px 0 12px; color: var(--gc-ink); font-size: 0.9375rem; font-weight: 800; }
.gcf-col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.gcf-col a { color: var(--gc-muted); font-size: 0.9375rem; text-decoration: none; }
.gcf-col a:hover { color: var(--gc-ink); text-decoration: underline; text-decoration-color: var(--gc-mango-deep); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.gcf-base { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--gc-hair); font-size: 0.8125rem; color: var(--gc-subtle); }
.gcf-base span:first-child { margin-right: auto; }
@media (max-width: 899px) { .gcf-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gcf-brand { grid-column: 1 / -1; } }
@media (max-width: 559px) { .gcf { padding: 36px 1rem 24px; } .gcf-cols { gap: 24px 16px; } }

/* ---------- Create New Workshop (index.html, R-008): steps, the picked time, price, split, done ---------- */
.gc-step > h5 .gc-step-n { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 10px; border-radius: 50%; background: var(--gc-ink); color: #fff; font-size: 0.8125rem; font-weight: 800; }
.gc-step > h5 .gc-step-n--done { background: var(--gc-success); }
.gc-step-hint { margin: -4px 0 14px; color: var(--gc-muted); font-size: 0.875rem; line-height: 1.5; }
.gc-step[hidden] { display: none !important; }
.gc-step--picked { background: var(--gc-surface); box-shadow: inset 0 0 0 1px var(--gc-line); }
.gc-picked { display: flex; align-items: flex-start; gap: 14px; }
.gc-picked-date { flex: none; display: grid; justify-items: center; align-content: center; width: 56px; height: 60px; border-radius: 14px; background: var(--gc-mango-tint); box-shadow: inset 0 0 0 1px var(--gc-mango-line); }
.gc-picked-date small { color: var(--gc-accent-ink); font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.gc-picked-date b { font-size: 1.375rem; font-weight: 850; line-height: 1.05; }
.gc-picked-text { display: grid; gap: 2px; min-width: 0; font-size: 0.875rem; color: var(--gc-muted); line-height: 1.45; }
.gc-picked-text b { color: var(--gc-ink); font-size: 1rem; font-weight: 780; }
.gc-picked-text > span:first-of-type { color: var(--gc-ink); font-weight: 650; }
.gc-picked-facts { color: var(--gc-subtle); font-size: 0.8125rem; }
.gc-picked-fields { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
body #videoModal .gc-step .gc-change { margin-top: 14px; min-height: 40px; padding: 0 16px; font-size: 0.875rem; }
.gc-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
@media (max-width: 479px) { .gc-pair { grid-template-columns: minmax(0, 1fr); } }
.gc-pair .form-group small { display: block; margin-top: 6px; color: var(--gc-subtle); font-size: 0.8125rem; line-height: 1.4; }
.gc-money { position: relative; }
.gc-money > span { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--gc-muted); font-weight: 700; pointer-events: none; }
body #videoModal .gc-money input { padding-left: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
body #videoModal #venueMinThreshold { font-weight: 700; font-variant-numeric: tabular-nums; }
body #videoModal .gc-money input::placeholder, body #videoModal #venueMinThreshold::placeholder { font-weight: 400; }
.gc-min-hint { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 2px 0 12px; padding: 10px 10px 10px 14px; border-radius: 12px; background: var(--gc-blue-tint); color: var(--gc-ink); font-size: 0.875rem; line-height: 1.45; }
.gc-min-hint .gc-link { flex: none; min-height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--gc-ink); color: #fff; font: inherit; font-weight: 750; text-decoration: none; cursor: pointer; }
.gc-min-hint .gc-link:hover { background: #2c2e31; }
.gc-min-hint.is-bad { background: var(--gc-danger-tint); color: var(--gc-danger); }
.gc-min-hint[hidden] { display: none; }
#venueCalcFee { color: var(--gc-muted); }
#venueCalcValidation { display: flex; gap: 8px; align-items: baseline; color: var(--gc-muted); }
#venueCalcValidation.is-ok, #venueCalcValidation.is-bad { font-weight: 650; }
#venueCalcValidation.is-ok { color: var(--gc-success); }
#venueCalcValidation.is-bad { color: var(--gc-danger); }
#venueCalcValidation.is-ok::before, #venueCalcValidation.is-bad::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; transform: translateY(-1px); }
.gc-split { width: 100%; margin: 10px 0 0; border-collapse: collapse; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.gc-split th, .gc-split td { padding: 7px 0; border-bottom: 0; text-align: right; font-size: inherit; font-weight: 600; letter-spacing: normal; text-transform: none; }
.gc-split th[scope="row"] { text-align: left; color: var(--gc-muted); font-weight: 600; }
.gc-split thead th { color: var(--gc-ink); font-size: 0.8125rem; font-weight: 750; line-height: 1.2; vertical-align: bottom; }
.gc-split thead small { display: block; color: var(--gc-subtle); font-size: 0.75rem; font-weight: 600; }
.gc-split tbody tr + tr { border-top: 1px solid rgba(143, 82, 0, 0.14); }
.gc-split tr.is-you th, .gc-split tr.is-you td { color: var(--gc-ink); font-size: 1rem; font-weight: 800; }
.gc-split td + td, .gc-split th + th { padding-left: 16px; }
.gc-split-note { color: var(--gc-subtle) !important; font-size: 0.8125rem !important; line-height: 1.45; }
.gc-create-summary { margin: 16px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--gc-sunken); box-shadow: inset 0 0 0 1px var(--gc-line); color: var(--gc-muted); font-size: 0.875rem; line-height: 1.5; }
.gc-create-summary b { color: var(--gc-ink); }
.gc-create-summary[hidden] { display: none; }
body #videoModal #createEventBtn:disabled { opacity: 0.7; cursor: progress; transform: none; }
.gc-done { display: flex; gap: 14px; margin: 0 0 14px; padding: 16px; border-radius: 16px; background: var(--gc-success-tint); box-shadow: inset 0 0 0 1px var(--gc-success-line); }
.gc-done[hidden] { display: none; }
.gc-done-mark { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--gc-success); color: #fff; }
.gc-done-mark .gc-ic { width: 20px; height: 20px; margin: 0; color: #fff; }
.gc-done b { font-size: 1rem; font-weight: 800; }
.gc-done p { margin: 4px 0 0; color: var(--gc-ink); font-size: 0.875rem; line-height: 1.5; }
.gc-done-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 12px; }
.gc-done-acts .gc-btn { min-height: 40px; font-size: 0.875rem; }

/* ---------- Admin console: Overview (scripts/admin-overview.js, R-008) ---------- */
.gc-ov .gc-ov-head h2 { display: flex; align-items: center; margin: 0; }
.gc-ov .gc-ov-head p { margin: 6px 0 0; color: var(--gc-muted); }
.gc-ov-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 28px 0 12px; font-size: 1.0625rem; font-weight: 800; }
.gc-ov-h span { color: var(--gc-subtle); font-size: 0.8125rem; font-weight: 650; }
.gc-ov-todos { display: grid; gap: 8px; }
.gc-ov-todo {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 0; padding: 12px 14px; border: 0; border-radius: 16px;
  background: var(--gc-surface); box-shadow: inset 0 0 0 1px var(--gc-line); color: var(--gc-ink); font: inherit; text-align: left; cursor: pointer;
  transition: box-shadow 0.15s ease;
}
.gc-ov-todo:hover { background: var(--gc-surface); box-shadow: inset 0 0 0 1.5px var(--gc-ink); }
.gc-ov-todo-main { display: grid; gap: 2px; flex: 1; min-width: 0; }
.gc-ov-todo-main b { font-size: 0.9375rem; font-weight: 780; }
.gc-ov-todo-main span { color: var(--gc-muted); font-size: 0.8125rem; line-height: 1.45; }
.gc-ov-count { flex: none; display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 999px; background: var(--gc-ink); color: #fff; font-size: 0.8125rem; font-weight: 800; }
.gc-ov-todo > .gc-ic:last-child { flex: none; width: 18px; height: 18px; margin: 0; color: var(--gc-subtle); }
.gc-ov-clear { display: flex; align-items: center; gap: 10px; margin: 0; padding: 14px 16px; border-radius: 16px; background: var(--gc-success-tint); color: var(--gc-success); font-size: 0.9375rem; font-weight: 650; }
.gc-ov-clear .gc-ic { flex: none; margin: 0; color: inherit; }
.gc-ov .gc-prows { margin-top: 0; }
.gc-ov .gc-prow { text-decoration: none; color: var(--gc-ink); }
.gc-ov .gc-prow-end .is-ok { color: var(--gc-success); font-weight: 650; }
.gc-ov .gc-prow-end .is-warn { color: var(--gc-warn); font-weight: 650; }
.gc-ov-more { margin: 8px 0 0; color: var(--gc-subtle); font-size: 0.8125rem; }
.gc-ov-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 719px) { .gc-ov-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gc-ov-stat {
  display: grid; justify-items: start; gap: 4px; min-height: 0; padding: 14px; border: 0; border-radius: 16px;
  background: var(--gc-sunken); color: var(--gc-ink); font: inherit; text-align: left; cursor: pointer; transition: background-color 0.15s ease;
}
.gc-ov-stat:hover { background: var(--gc-fill); }
.gc-ov-stat .gc-tile { width: 32px; height: 32px; border-radius: 10px; margin-bottom: 4px; }
.gc-ov-stat .gc-tile .gc-ic { width: 17px; height: 17px; }
.gc-ov-stat b { font-size: 1.625rem; font-weight: 850; font-stretch: 74%; line-height: 1; font-variant-numeric: tabular-nums; }
.gc-ov-stat > span:last-child { color: var(--gc-muted); font-size: 0.8125rem; font-weight: 600; line-height: 1.3; }
.gc-ov-skel { display: grid; gap: 10px; margin-top: 20px; }
.gc-ov-skel span { display: block; height: 56px; border-radius: 16px; background: var(--gc-sunken); animation: gc-ov-pulse 1.2s ease-in-out infinite alternate; }
@keyframes gc-ov-pulse { from { opacity: 1; } to { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { .gc-ov-skel span { animation: none; } }

/* R-008: the admin console is a work surface; wider, so its seven tabs and tables fit. */
body .admin-container { max-width: 1040px; padding: 0 16px; }

/* R-011: the full-bleed bands (the stage, the chips and the rail on phones) span the page's own
   width, --gc-vw (theme.js), not 100vw: with a classic scrollbar 100vw is wider than the page and
   the page scrolled sideways by the scrollbar's width. */

/* ---------- R-009, R-010: the home in GroovaClass's own voice, in daylight (scripts/home.js) ----------
   The daylight stage of R-008 (white into the warm page, a soft mango glow), a poster headline with
   the G's swoosh under "moves you.", the search said as a sentence whose words look like fields,
   and workshops as tickets with a Book button and a count of beats to the minimum. */
.gc-deck.gc-stage {
  --notch: var(--gc-bg);
  margin: -1.5rem calc(50% - var(--gc-vw, 100vw) / 2) 0; padding: 3rem calc(var(--gc-vw, 100vw) / 2 - 50%) 2.75rem; text-align: left; color: var(--gc-ink);
  background:
    radial-gradient(44rem 24rem at 92% -4rem, rgba(255, 194, 32, 0.22), transparent 70%),
    radial-gradient(36rem 22rem at -6% -2rem, rgba(255, 216, 77, 0.14), transparent 70%),
    linear-gradient(180deg, var(--gc-surface) 0%, var(--gc-surface) 52%, var(--gc-bg) 100%);
}
.gc-stage-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; max-width: 1200px; margin: 0 auto; }
.gc-stage.has-next .gc-stage-in { grid-template-columns: minmax(0, 1.55fr) minmax(280px, 340px); }
@media (max-width: 899px) { .gc-stage.has-next .gc-stage-in { grid-template-columns: minmax(0, 1fr); } .gc-stage-next { display: none; } }
.gc-stage .gc-deck-title {
  margin: 0; max-width: 11ch; color: var(--gc-ink); font-size: clamp(2.75rem, 6.4vw, 5rem); font-weight: 850; font-stretch: 70%;
  line-height: 0.92; letter-spacing: -0.02em; text-transform: uppercase; text-wrap: balance;
}
.gc-stage .gc-deck-title em { position: relative; display: inline-block; padding: 0; margin: 0; background: none; color: var(--gc-ink); font-style: normal; }
/* D-86: the swoosh marks the first line ("More than"), so that line keeps room under it and the
   headline runs as two lines where it fits. */
.gc-stage .gc-title-lead { max-width: 15ch; }
.gc-stage .gc-title-lead em { margin-bottom: 0.16em; }
.gc-swoosh { position: absolute; left: -2%; right: -4%; bottom: -0.18em; width: 106%; height: 0.32em; overflow: visible; }
.gc-swoosh path { fill: none; stroke: var(--gc-mango-deep); stroke-width: 6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.gc-stage .gc-deck-sub { margin: 1.5rem 0 0; max-width: 46ch; color: var(--gc-muted); font-size: 1.0625rem; line-height: 1.55; }

/* The search as a sentence (R-011): "I want to find" and three white fields, each with its icon,
   its value and a chevron; they open their choices. No punctuation, no hint line. Phones stack
   the fields as one card (below). */
.gc-say { position: relative; z-index: 30; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; margin-top: 2rem; }
.gc-say-line { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; color: var(--gc-ink); font-size: clamp(1.0625rem, 1.45vw, 1.25rem); font-weight: 600; line-height: 1.3; }
.gc-say-lead { margin-right: 6px; }
@media (min-width: 900px) and (max-width: 1279px) { .gc-say-lead { flex-basis: 100%; margin: 0 0 2px; } }   /* beside the next-up ticket the three fields keep one row */
.gc-say-fields { display: contents; }
.gc-say-pill {
  display: inline-flex; align-items: center; gap: 9px; min-height: 52px; margin: 0; padding: 0 12px 0 9px; border: 0; border-radius: 16px;
  background: var(--gc-surface); box-shadow: var(--gc-ring), 0 1px 2px rgba(20, 21, 23, 0.05), 0 10px 22px -16px rgba(20, 21, 23, 0.4);
  color: var(--gc-ink); font: inherit; font-weight: 750; letter-spacing: -0.005em; cursor: pointer;
  transition: box-shadow 0.16s ease, transform 0.16s var(--gc-ease), background-color 0.16s ease;
}
.gc-say-ic { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--gc-mango-tint); color: var(--gc-accent-ink); }
.gc-say-ic .gc-ic { width: 18px; height: 18px; margin: 0; color: inherit; }
.gc-say-ic .gc-dot { width: 11px; height: 11px; border-radius: 4px; }
.gc-say-v { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-say-pill > .gc-ic { flex: none; width: 16px; height: 16px; margin: 0 0 0 2px; color: var(--gc-subtle); transition: transform 0.2s var(--gc-ease); }
.gc-say-pill:hover { box-shadow: 0 0 0 1px rgba(20, 21, 23, 0.22), 0 1px 2px rgba(20, 21, 23, 0.06), 0 14px 26px -16px rgba(20, 21, 23, 0.45); transform: translateY(-1px); }
.gc-say-pill.is-open { box-shadow: 0 0 0 2px var(--gc-ink), var(--gc-e2); transform: none; }
.gc-say-pill.is-open > .gc-ic { transform: rotate(180deg); }
.gc-say-pill:focus-visible { outline: 2px solid var(--gc-ink); outline-offset: 3px; }
.gc-say-go { flex: none; min-height: 54px; padding: 0 26px; border-radius: 16px; font-size: 1rem; font-weight: 800; }
.gc-say-go .gc-ic { width: 18px; height: 18px; margin: 0 0 0 4px; }
.gc-say .gc-pop { position: absolute; left: 0; right: auto; top: 100%; width: min(340px, 100%); color: var(--gc-ink); text-align: left; }

/* Chips on the stage: white with a hairline; the chosen one lit in mango. */
.gc-stage .gc-chips { justify-content: flex-start; margin: 1.5rem 0 0; }
.gc-stage .gc-chip[aria-pressed="true"] { background: var(--gc-mango) var(--gc-grad); color: var(--gc-ink); box-shadow: none; }
.gc-stage .gc-chip .gc-ic { color: inherit; }
.gc-stage-cap { margin: 0 0 10px; color: var(--gc-muted); font-size: 0.875rem; font-weight: 650; }

/* The ticket: the photo with style and instructor, a torn stub (date, Class, place, count), then the
   price and an explicit Book. */
.gc-ticket {
  --notch: var(--gc-bg);
  display: grid; grid-template-rows: auto 1fr auto; gap: 0; overflow: hidden; border-radius: 20px; background: var(--gc-surface); box-shadow: var(--gc-ring);
  transition: box-shadow 0.2s var(--gc-ease), transform 0.2s var(--gc-ease);
}
.gc-ticket:hover { background: var(--gc-surface); box-shadow: 0 0 0 1px rgba(20, 21, 23, 0.16), var(--gc-e3); transform: translateY(-2px); }
.gc-ticket .gc-wcard-media { aspect-ratio: 5 / 6; border-radius: 0; }
.gc-tk-style {
  position: absolute; left: 12px; top: 12px; display: inline-flex; align-items: center; gap: 6px; max-width: calc(100% - 24px); padding: 5px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.94); color: var(--gc-ink); box-shadow: var(--gc-e2); font-size: 0.75rem; font-weight: 750;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gc-ticket .gc-wcard-when { top: auto; bottom: 12px; }
.gc-tk-stub {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 12px;
  padding: 14px 14px 12px; border-top: 2px dashed var(--gc-line);
}
.gc-tk-stub::before, .gc-tk-stub::after { content: ''; position: absolute; top: -10px; width: 18px; height: 18px; border-radius: 50%; background: var(--notch); }
.gc-tk-stub::before { left: -10px; }
.gc-tk-stub::after { right: -10px; }
.gc-tk-date { display: grid; justify-items: center; min-width: 54px; padding: 6px 4px; border-radius: 12px; background: var(--gc-mango) var(--gc-grad); color: var(--gc-ink); line-height: 1.05; }
.gc-tk-date small { font-size: 0.6875rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
.gc-tk-date small:last-child { text-transform: none; letter-spacing: 0; font-weight: 750; }
.gc-tk-date b { font-size: 1.5rem; font-weight: 850; font-stretch: 72%; font-variant-numeric: tabular-nums; }
.gc-tk-main { display: grid; gap: 3px; min-width: 0; }
.gc-tk-main .gc-wcard-title { font-size: 1rem; }
.gc-tk-main .gc-wcard-meta { font-size: 0.8125rem; }
.gc-tk-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px 14px; border-top: 1px solid var(--gc-hair); }
.gc-tk-price { display: inline-flex; align-items: baseline; gap: 5px; flex: none; }
.gc-tk-price b { font-size: 1.375rem; font-weight: 850; font-stretch: 74%; font-variant-numeric: tabular-nums; line-height: 1; }
.gc-tk-price small { color: var(--gc-subtle); font-size: 0.75rem; font-weight: 650; }
.gc-tk-book {
  display: inline-flex; align-items: center; gap: 4px; min-height: 38px; padding: 0 14px 0 16px; border-radius: 999px;
  background: var(--gc-mango) var(--gc-grad-btn); color: var(--gc-ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45); font-size: 0.875rem; font-weight: 800; white-space: nowrap;
}
.gc-tk-book .gc-ic { width: 16px; height: 16px; margin: 0; color: inherit; }
.gc-tk-book.is-mine { background: var(--gc-success-tint); color: var(--gc-success); box-shadow: inset 0 0 0 1px var(--gc-success-line); }
.gc-tk-book.is-full { background: var(--gc-chip); color: var(--gc-muted); box-shadow: none; padding: 0 16px; }
.gc-ticket:hover .gc-tk-book:not(.is-full) { filter: saturate(1.1) brightness(1.03); }
/* The count: one beat per booking up to the minimum to run (D-16). */
.gc-tk-count { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; margin-top: 3px; color: var(--gc-muted); font-size: 0.8125rem; font-weight: 700; line-height: 1.25; }
.gc-tk-count > span:last-child { white-space: nowrap; }
.gc-tk-count.is-warn { color: var(--gc-warn); }
.gc-tk-count.is-ok { color: var(--gc-success); }
.gc-tk-count.is-bad { color: var(--gc-danger); }
.gc-tk-count .gc-ic { width: 15px; height: 15px; margin: 0; }
.gc-beats { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.gc-beats i { display: block; width: 8px; height: 8px; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; opacity: 0.55; }
.gc-beats i.is-on { background: var(--gc-mango-deep); box-shadow: none; opacity: 1; }
.gc-ticket.is-skel .gc-tk-stub span { display: block; height: 0.75rem; border-radius: 6px; background: var(--gc-chip); }
.gc-ticket--big { box-shadow: var(--gc-ring), var(--gc-e3); }
.gc-ticket--big .gc-wcard-title { font-size: 1.0625rem; }
.gc-stage .gc-ticket { --notch: var(--gc-surface); }
.gc-near .gc-ticket { --notch: var(--gc-bg); }
@media (prefers-reduced-motion: reduce) { .gc-ticket, .gc-say-pill .gc-ic { transition: none; } .gc-ticket:hover { transform: none; } }

@media (max-width: 719px) {
  /* R-011: fewer words and more air on phones: one sub-line, no chips (the first field holds the
     styles), the three fields as one card, then the workshops' pictures. */
  .gc-deck.gc-stage { margin-top: -1rem; padding-top: 2.25rem; padding-bottom: 2.25rem; }
  .gc-stage .gc-deck-title { font-size: clamp(2.375rem, 11.4vw, 3rem); max-width: 10ch; }
  .gc-stage .gc-title-lead { max-width: 15ch; }
  .gc-stage .gc-deck-sub { margin-top: 1.25rem; max-width: 32ch; font-size: 1rem; }
  .gc-sub-more { display: none; }
  .gc-stage .gc-chips { display: none; }
  .gc-say { margin-top: 1.75rem; gap: 14px; }
  .gc-say-line { display: block; font-size: 1rem; }
  .gc-say-lead { display: block; margin: 0 0 10px 2px; color: var(--gc-muted); font-size: 0.9375rem; font-weight: 650; }
  .gc-say-fields { display: grid; overflow: hidden; border-radius: 18px; background: var(--gc-surface); box-shadow: var(--gc-ring), var(--gc-e2); }
  .gc-say-pill { width: 100%; min-height: 58px; padding: 0 16px 0 12px; border-radius: 0; box-shadow: none; background: transparent; font-size: 1.0625rem; text-align: left; }
  .gc-say-pill + .gc-say-pill { box-shadow: inset 0 1px 0 var(--gc-hair); }
  .gc-say-pill:hover { transform: none; background: var(--gc-sunken); box-shadow: none; }
  .gc-say-pill + .gc-say-pill:hover { box-shadow: inset 0 1px 0 var(--gc-hair); }
  .gc-say-pill > .gc-ic { margin-left: auto; }
  .gc-say-go { width: 100%; justify-content: center; min-height: 56px; }
  .gc-deck-join { margin-top: 1.25rem; text-align: center; }
  .gc-rail.is-one { grid-auto-columns: 100%; }
  .gc-rail.is-one .gc-ticket .gc-wcard-media { aspect-ratio: 1 / 1; } /* CR-36: 4:3 cut the dancer's head off */
}
.gc-ticket { container-type: inline-size; width: 100%; }   /* size containment: never shrink-to-fit (the hero ticket collapsed to 0) */
@container (max-width: 300px) { .gc-tk-price small { display: none; } .gc-tk-stub, .gc-tk-foot { padding-left: 12px; padding-right: 12px; } }

/* R-009 adversarial check: the phone rail snaps its first ticket to the page gutter (the
   percentage in scroll-padding is the rail's own width, so the old calc gave 0), and long
   names and emails wrap instead of widening the profile at 320px. */
@media (max-width: 719px) { .gc-rail { scroll-padding: 0 16px; } }
#profileName, #profileEmail, .profile-info { min-width: 0; overflow-wrap: anywhere; }

/* ---------- R-013: Fitcho and the instructors joining soon (scripts/featured.js) ----------
   Fitcho is a white feature card in the stage's voice (condensed capitals over the swoosh, a
   mango glow, facts as mango-tint chips) beside its 9:16 videos, played in place. The instructors
   are white cards with a portrait, "Joining soon", their styles and a short introduction; a rail
   on phones, like the workshops. */
.gc-featured { display: grid; gap: 52px; margin: 0 0 3.5rem; }
.gc-featured:empty { display: none; }
.gc-fito {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: center;
  padding: 40px 44px; overflow: hidden; border-radius: 28px; box-shadow: var(--gc-ring);
  background: radial-gradient(38rem 22rem at 100% 0%, rgba(255, 194, 32, 0.2), transparent 70%), var(--gc-surface);
}
.gc-fito-title { margin: 0; color: var(--gc-ink); font-size: clamp(2.75rem, 5.4vw, 4rem); font-weight: 850; font-stretch: 70%; line-height: 0.92; letter-spacing: -0.02em; text-transform: uppercase; }
.gc-fito-title > span { position: relative; display: inline-block; }
.gc-fito-lead { margin: 1.5rem 0 0; max-width: 50ch; color: var(--gc-muted); font-size: 1.0625rem; line-height: 1.55; }
.gc-fito-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.gc-fito-facts li { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px 0 11px; border-radius: 999px; background: var(--gc-mango-tint); color: var(--gc-ink); font-size: 0.875rem; font-weight: 650; }
.gc-fito-facts .gc-ic { width: 16px; height: 16px; margin: 0; color: var(--gc-accent-ink); }
.gc-fito-acts { margin-top: 1.75rem; }
.gc-fito-acts .gc-btn { min-height: 52px; padding: 0 24px; border-radius: 16px; font-size: 1rem; font-weight: 800; }
.gc-fito-acts .gc-btn .gc-ic { width: 18px; height: 18px; margin: 0 0 0 4px; }
.gc-fito-reels { display: grid; grid-auto-flow: column; grid-auto-columns: 192px; gap: 14px; }
.gc-fito-reels[data-count="3"] { grid-auto-columns: 168px; }
.gc-reel { position: relative; display: block; width: 100%; aspect-ratio: 9 / 16; overflow: hidden; padding: 0; border: 0; border-radius: 20px; background: var(--gc-ink); box-shadow: var(--gc-e2); cursor: pointer; }
.gc-reel img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--gc-ease); }
.gc-reel:hover img { transform: scale(1.03); }
.gc-reel-play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; transform: translate(-50%, -50%); background: rgba(255, 255, 255, 0.94); color: var(--gc-ink); box-shadow: var(--gc-e2); }
.gc-reel-play .gc-ic { width: 22px; height: 22px; margin: 0 0 0 3px; color: inherit; }
.gc-reel-cap { position: absolute; left: 12px; bottom: 12px; padding: 5px 11px; border-radius: 999px; background: rgba(255, 255, 255, 0.94); color: var(--gc-ink); font-size: 0.8125rem; font-weight: 750; }
.gc-reel.is-soon { display: grid; place-items: center; background: linear-gradient(165deg, #fff7e0 0%, #ffe6ad 100%); box-shadow: inset 0 0 0 1px var(--gc-mango-line); cursor: default; }
.gc-reel-soon { display: grid; justify-items: center; gap: 4px; padding: 0 12px; text-align: center; color: var(--gc-ink); }
.gc-reel-soon .gc-ic { box-sizing: content-box; width: 22px; height: 22px; margin: 0 0 10px; padding: 15px; border-radius: 50%; background: rgba(255, 255, 255, 0.75); color: var(--gc-accent-ink); }
.gc-reel-soon b { font-size: 1.375rem; font-weight: 850; font-stretch: 78%; }
.gc-reel-soon small { color: #6b5a3a; font-size: 0.8125rem; font-weight: 600; }
.gc-reel.is-playing { cursor: auto; background: #000; }
.gc-player { display: block; width: 100%; height: 100%; border: 0; }

.gc-meet .gc-sec { margin-bottom: 4px; }
.gc-meet h2 { font-size: 1.5rem !important; font-weight: 800 !important; font-stretch: 82% !important; }
.gc-meet-sub { margin: 0 0 18px; color: var(--gc-muted); font-size: 0.9375rem; }
.gc-meet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 500px), 1fr)); gap: 20px; }
.gc-coach { display: grid; grid-template-columns: 210px minmax(0, 1fr); overflow: hidden; border-radius: 22px; background: var(--gc-surface); box-shadow: var(--gc-ring); }
.gc-coach-media { position: relative; min-height: 262px; background: var(--gc-chip); }
.gc-coach-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gc-coach-media.is-playing { aspect-ratio: 9 / 16; min-height: 0; background: #000; }
/* A landscape video (R-016): the card stacks, the player takes its full width at 16:9. */
.gc-coach.is-wide-playing { grid-template-columns: minmax(0, 1fr); }
.gc-coach-media.is-playing.is-wide { aspect-ratio: 16 / 9; }
.gc-coach-pill { position: absolute; left: 10px; top: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.94); box-shadow: var(--gc-e2); color: var(--gc-ink); font-size: 0.75rem; font-weight: 750; }
.gc-coach-pill .gc-ic { width: 13px; height: 13px; margin: 0; color: var(--gc-accent-ink); }
.gc-coach-play { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px 0 11px; border: 0; border-radius: 999px; background: var(--gc-ink); color: #fff; font: inherit; font-size: 0.8125rem; font-weight: 750; cursor: pointer; }
.gc-coach-play .gc-ic { width: 15px; height: 15px; margin: 0; color: var(--gc-mango); }
.gc-coach-body { display: grid; align-content: start; gap: 6px; padding: 22px 24px 24px; }
.gc-coach-body h3 { margin: 0; color: var(--gc-ink); font-size: 1.75rem; font-weight: 850; font-stretch: 76%; line-height: 1; }
.gc-coach-styles { margin: 0; color: var(--gc-accent-ink); font-size: 0.875rem; font-weight: 750; }
.gc-coach-about { margin: 8px 0 0; color: var(--gc-muted); font-size: 0.9375rem; line-height: 1.55; }
.gc-coach-note { margin: 4px 0 0; color: var(--gc-subtle); font-size: 0.75rem; line-height: 1.4; }

@media (max-width: 899px) {
  .gc-fito { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 32px 28px; }
  .gc-fito-reels { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-columns: auto; max-width: 440px; }
  /* Three or more: a rail that shows the next video's edge, like the instructors on phones. */
  .gc-fito-reels[data-count="3"] { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 200px; max-width: none; overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 -28px; padding: 2px 28px 6px; scroll-padding: 0 28px; scrollbar-width: none; }
  .gc-fito-reels[data-count="3"]::-webkit-scrollbar { display: none; }
  .gc-fito-reels[data-count="3"] > * { scroll-snap-align: start; }
}
@media (max-width: 599px) {
  .gc-featured { gap: 40px; }
  .gc-fito { gap: 24px; padding: 26px 20px 22px; border-radius: 24px; }
  .gc-fito-title { font-size: 2.75rem; }
  .gc-fito-lead { margin-top: 1.25rem; font-size: 1rem; }
  .gc-fito-acts .gc-btn { width: 100%; justify-content: center; }
  .gc-fito-reels { gap: 10px; }
  .gc-fito-reels[data-count="3"] { grid-auto-columns: 42%; margin: 0 -20px; padding: 2px 20px 6px; scroll-padding: 0 20px; }
  .gc-meet-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 calc(50% - var(--gc-vw, 100vw) / 2); padding: 2px calc(var(--gc-vw, 100vw) / 2 - 50%) 12px; scroll-padding: 0 16px; scrollbar-width: none; }
  .gc-meet-grid::-webkit-scrollbar { display: none; }
  .gc-coach { grid-template-columns: minmax(0, 1fr); scroll-snap-align: start; }
  .gc-coach-media { min-height: 0; aspect-ratio: 1 / 1; }
  .gc-coach-body { padding: 18px 18px 20px; }
}
@media (prefers-reduced-motion: reduce) { .gc-reel img { transition: none; } .gc-reel:hover img { transform: none; } }