/* ============================================================
   student.calendarbro.com — shared chrome
   Linked from index.html, app.html, account.html so every page
   uses identical tokens, sidebar, header, theme toggle, footer.

   Designed to match partner.calendarbro.com (canonical reference).
   ============================================================ */

* { font-family: 'Lexend Deca', sans-serif; }

/* overflow-x: clip (not hidden) — `hidden` creates a scroll-container that
   silently breaks position:sticky on descendant headers. `clip` prevents
   horizontal scroll without becoming a scroll context. Required for the
   sticky nav to actually pin on scroll. */
html, body { overflow-x: clip; }

/* Logo-lockup theme variants — the shared Tailwind bundle doesn't compile
   dark:hidden / dark:block (they're not in any source file the bundle was
   built against). Without these explicit rules the wordmark stays stuck
   on its light-mode (deep-teal) variant and disappears against the dark
   background. */
.cb-logo-light { display: block; }
.cb-logo-dark  { display: none; }
html.dark .cb-logo-light { display: none; }
html.dark .cb-logo-dark  { display: block; }

/* "STUDENTS" sub-wordmark — explicit height since h-2.5 is also missing
   from the bundle. 10px is the design intent; renders at ~44px wide. */
.cb-students-submark { height: 10px; width: auto; margin-top: 4px; }

/* Dark-mode override for bg-white with opacity modifier (bg-white/90,
   bg-white/85, bg-white/80). The shared Tailwind bundle compiles
   bg-white/90 as its own selector, NOT as bg-white + modifier — so the
   existing html.dark .bg-white override never fires on the opacity
   variants. The landing-page sticky header uses bg-white/90, so without
   this rule the header stays bright white over the dark body and the
   cream wordmark becomes invisible. */
html.dark .bg-white\/90 { background-color: rgba(21, 40, 35, 0.92) !important; }
html.dark .bg-white\/85 { background-color: rgba(21, 40, 35, 0.88) !important; }
html.dark .bg-white\/80 { background-color: rgba(21, 40, 35, 0.85) !important; }

/* Partner-portal-parity sticky header rule. Matches partner.calendarbro.com
   exactly: faint teal border in dark mode (overriding border-gray-100). */
html.dark header.sticky {
  background-color: rgba(21, 40, 35, 0.9) !important;
  border-color: rgba(92, 183, 165, 0.12) !important;
}

body {
  background: #F7F9F8;
  color: #222B45;
  transition: background-color 0.25s ease, color 0.25s ease;
}

html.dark { color-scheme: dark; }
html.dark body { background: #0D1B1A; color: #E8F4F0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
input:focus-visible {
  outline: 2px solid #5CB7A5;
  outline-offset: 2px;
}

/* ─── Theme toggle (matches partner-portal exactly) ─── */
.theme-toggle {
  position: relative;
  width: 34px; height: 34px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid rgba(34, 43, 69, 0.12);
  color: #6D7890;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  padding: 0;
}
.theme-toggle:hover {
  background-color: rgba(92, 183, 165, 0.08);
  border-color: rgba(92, 183, 165, 0.35);
  color: #194E43;
}
.theme-icon {
  position: absolute;
  transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.theme-icon-sun  { opacity: 1; transform: rotate(0deg) scale(1); }
.theme-icon-moon { opacity: 0; transform: rotate(-90deg) scale(0.7); }
html.dark .theme-icon-sun  { opacity: 0; transform: rotate(90deg) scale(0.7); }
html.dark .theme-icon-moon { opacity: 1; transform: rotate(0deg) scale(1); }
html.dark .theme-toggle {
  border-color: rgba(232, 244, 240, 0.15);
  color: #9FB5AF;
}
html.dark .theme-toggle:hover {
  background-color: rgba(190, 158, 232, 0.1);
  border-color: rgba(190, 158, 232, 0.35);
  color: #BE9EE8;
}

/* ─── Sticky frosted-glass header ─── */
.cb-header {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid #F3F4F6;
}
html.dark .cb-header {
  background-color: rgba(21, 40, 35, 0.9);
  border-bottom-color: rgba(92, 183, 165, 0.12);
}

/* ─── Sidebar (partner-portal pattern) ─── */
.cb-sidebar {
  display: none;
  flex-direction: column;
  width: 256px;
  background: white;
  border-right: 1px solid #F3F4F6;
  position: fixed;
  left: 0; top: 0;
  height: 100vh;
  z-index: 40;
}
@media (min-width: 1024px) { .cb-sidebar { display: flex; } }
html.dark .cb-sidebar {
  background: #152823;
  border-right-color: rgba(92, 183, 165, 0.12);
}

/* Sidebar sections — partner-portal-parity. Three logical blocks with
   slightly different vertical breathing: logo (taller), nav (medium),
   footer (compact). All separated by hairline borders. */
.cb-sidebar-section { padding: 18px 16px 12px; }
.cb-sidebar-section.cb-sidebar-logo  { padding: 22px 24px 18px; }
.cb-sidebar-section.cb-sidebar-nav   { padding: 18px 16px 18px; }
.cb-sidebar-section.cb-sidebar-foot  { padding: 14px 16px 16px; }
.cb-sidebar-section + .cb-sidebar-section { border-top: 1px solid #F3F4F6; }
html.dark .cb-sidebar-section + .cb-sidebar-section { border-top-color: rgba(92, 183, 165, 0.10); }

.cb-sidebar-eyebrow {
  padding: 0 12px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #9CA3AF;
}

.cb-sidebar-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  color: #6D7890;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  text-decoration: none;
}
.cb-sidebar-link:hover {
  background: rgba(92, 183, 165, 0.08);
  color: #194E43;
}
.cb-sidebar-link.active {
  background: rgba(92, 183, 165, 0.12);
  color: #194E43;
  font-weight: 600;
}
.cb-sidebar-link svg { flex-shrink: 0; }
html.dark .cb-sidebar-link { color: #9FB5AF; }
html.dark .cb-sidebar-link:hover { background: rgba(92, 183, 165, 0.08); color: #5CB7A5; }
html.dark .cb-sidebar-link.active { background: rgba(138, 56, 245, 0.12); color: #BE9EE8; }

/* ─── Sidebar mobile overlay (hidden on lg+) ─── */
.cb-sidebar-mobile-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(34, 43, 69, 0.12);
  background: transparent;
  color: #6D7890;
  cursor: pointer;
}
.cb-sidebar-mobile-toggle:hover { background: rgba(92, 183, 165, 0.08); color: #194E43; }
@media (min-width: 1024px) { .cb-sidebar-mobile-toggle { display: none; } }
html.dark .cb-sidebar-mobile-toggle { border-color: rgba(232, 244, 240, 0.15); color: #9FB5AF; }

.cb-sidebar-backdrop {
  position: fixed; inset: 0;
  background: rgba(13, 27, 26, 0.5);
  backdrop-filter: blur(4px);
  z-index: 35;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.cb-sidebar.cb-sidebar-open { display: flex; }
.cb-sidebar.cb-sidebar-open ~ .cb-sidebar-backdrop { opacity: 1; pointer-events: auto; }
@media (min-width: 1024px) { .cb-sidebar-backdrop { display: none; } }

/* ─── Card primitive ─── */
.cb-card {
  background: white;
  border: 1px solid #F3F4F6;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
  padding: 24px;
}
html.dark .cb-card {
  background: #152823;
  border-color: rgba(92, 183, 165, 0.12);
}

/* ─── Primary CTA (matches partner-portal gradient direction) ─── */
.cb-cta-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 22px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #194E43 0%, #5CB7A5 100%);
  color: white;
  font-weight: 600;
  font-size: 14px;
  border: 0;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.15s ease;
  text-decoration: none;
}
.cb-cta-primary:hover { opacity: 0.95; transform: translateY(-1px); }
.cb-cta-primary:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

/* Header-sized variant — compact for the nav slot. Same gradient, tighter.
   Single-line and short on mobile (hides "with Google" suffix below sm). */
.cb-cta-header {
  padding: 8px 14px;
  font-size: 13px;
  gap: 8px;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(25,78,67,0.18);
}
.cb-cta-header:hover { box-shadow: 0 6px 18px rgba(92,183,165,0.28); }
.cb-cta-header svg { flex-shrink: 0; }
.cb-cta-header .cb-cta-header-suffix { display: none; }
@media (min-width: 640px) {
  .cb-cta-header .cb-cta-header-suffix { display: inline; }
}

.cb-cta-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px;
  border-radius: 9999px;
  border: 1px solid rgba(92, 183, 165, 0.4);
  color: #5CB7A5;
  font-weight: 600;
  font-size: 13px;
  background: transparent;
  cursor: pointer;
  transition: background 0.15s ease;
  text-decoration: none;
}
.cb-cta-secondary:hover { background: rgba(92, 183, 165, 0.08); }
html.dark .cb-cta-secondary { border-color: rgba(190, 158, 232, 0.35); color: #BE9EE8; }
html.dark .cb-cta-secondary:hover { background: rgba(190, 158, 232, 0.1); }

/* ─── Eyebrow label ─── */
.cb-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #5CB7A5;
}
.cb-eyebrow-purple {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8A38F5;
  background: rgba(138, 56, 245, 0.08);
  border: 1px solid rgba(138, 56, 245, 0.2);
  padding: 5px 12px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
html.dark .cb-eyebrow-purple { background: rgba(138, 56, 245, 0.12); color: #BE9EE8; border-color: rgba(138, 56, 245, 0.3); }

/* ─── Footer ─── */
.cb-footer {
  margin-top: 64px;
  padding: 32px 0 24px;
  border-top: 1px solid #F3F4F6;
  font-size: 12px;
  color: #6D7890;
}
.cb-footer a { color: #5CB7A5; text-decoration: none; font-weight: 500; }
.cb-footer a:hover { text-decoration: underline; }
html.dark .cb-footer { border-top-color: rgba(92, 183, 165, 0.12); color: #9FB5AF; }

/* ─── Form inputs (consistent across all pages) ─── */
.cb-input {
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid #E5E7EB;
  background: white;
  color: #222B45;
  font-size: 14px;
}
.cb-input:focus { outline: none; border-color: #5CB7A5; box-shadow: 0 0 0 3px rgba(92, 183, 165, 0.18); }
html.dark .cb-input {
  background-color: #1A2E2A;
  border-color: rgba(92, 183, 165, 0.15);
  color: #E8F4F0;
}

/* ─── Tailwind override for the existing arbitrary-color tokens used in JS ─── */
html.dark .text-\[\#222B45\] { color: #E8F4F0 !important; }
html.dark .text-\[\#4A4F5D\] { color: #C8DCD8 !important; }
html.dark .text-\[\#6D7890\] { color: #9FB5AF !important; }
html.dark .text-\[\#194E43\] { color: #5CB7A5 !important; }
html.dark .bg-white       { background-color: #152823 !important; }
html.dark .border-gray-100,
html.dark .border-gray-200 { border-color: rgba(92, 183, 165, 0.12) !important; }
html.dark input, html.dark select, html.dark textarea {
  background-color: #1A2E2A !important;
  border-color: rgba(92, 183, 165, 0.15) !important;
  color: #E8F4F0 !important;
}

/* ============================================================
   Landing page (index.html) — kinetic hero + new sections
   "Studio-grade scheduling tool with kinetic confidence"
   ============================================================ */

/* Top status strip (above the sticky header) */
/* Status strip + marquee removed — header is now the first element on
   page and sticks from y=0, matching partner.calendarbro.com behavior. */

/* Hero radial gradient mesh — the backbone of the "kinetic" aesthetic */
.cb-hero-mesh {
  position: absolute; inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 18%, rgba(92,183,165,0.22), transparent 55%),
    radial-gradient(circle at 88% 28%, rgba(138,56,245,0.14), transparent 50%),
    radial-gradient(circle at 50% 95%, rgba(92,183,165,0.10), transparent 60%),
    linear-gradient(180deg, #FFFFFF 0%, #F0F9F6 100%);
}
html.dark .cb-hero-mesh {
  background:
    radial-gradient(circle at 12% 18%, rgba(92,183,165,0.30), transparent 55%),
    radial-gradient(circle at 88% 28%, rgba(138,56,245,0.22), transparent 50%),
    radial-gradient(circle at 50% 95%, rgba(92,183,165,0.14), transparent 60%),
    linear-gradient(180deg, #0D1B1A 0%, #152823 100%);
}

/* Gradient text — hero headline accent (mirrors partner-portal glossy title) */
.cb-text-gradient {
  background: linear-gradient(120deg, #5CB7A5 0%, #194E43 38%, #6C34C4 78%, #8A38F5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
html.dark .cb-text-gradient {
  background: linear-gradient(115deg, #5CB7A5 0%, #B9EDDC 30%, #FFFFFF 55%, #DCC4F8 80%, #BE9EE8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 14px rgba(92,183,165,0.18));
}

/* Larger primary CTA */
.cb-cta-lg {
  padding: 16px 28px !important;
  font-size: 15px !important;
  box-shadow: 0 8px 28px rgba(92,183,165,0.35);
}
.cb-cta-lg:hover { box-shadow: 0 12px 36px rgba(92,183,165,0.45); }

/* Inverted CTA (white on dark band) */
.cb-cta-inverted {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 28px;
  border-radius: 9999px;
  background: white;
  color: #0D2E27;
  font-weight: 700;
  font-size: 15px;
  border: 0;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
  text-decoration: none;
  box-shadow: 0 8px 28px rgba(0,0,0,0.18);
}
.cb-cta-inverted:hover { background: #F0F9F6; transform: translateY(-1px); }

/* Glass card pattern (stat strip on dark band) */
.cb-glass {
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
}

/* Step dot + connector (3-step "How it works") */
.cb-step-dot {
  width: 48px; height: 48px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #5CB7A5 0%, #194E43 100%);
  color: #fff; font-weight: 700; font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 4px rgba(92,183,165,0.13), 0 4px 12px rgba(25,78,67,0.18);
  flex-shrink: 0;
}
.cb-step-connector {
  display: none;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #5CB7A5 0%, #3A7B6B 50%, #8A38F5 100%);
  opacity: 0.7;
  box-shadow: 0 0 12px rgba(92,183,165,0.20);
}
/* On desktop, position the connector horizontally between the three step dots.
   The container is .cb-step-row (set inline) — relatively positioned. */
@media (min-width: 1024px) {
  .cb-step-connector {
    display: block;
    position: absolute;
    top: 23px;        /* dot is 48px tall, vertical center = 24px; line is 3px so top=22.5 */
    left: 16.66%;     /* col 1 center = 16.66% of grid container width */
    right: 16.66%;    /* col 3 center = 16.66% from right */
  }
}
html.dark .cb-step-connector {
  background: linear-gradient(90deg, #5CB7A5 0%, #B9EDDC 50%, #DCC4F8 100%);
  opacity: 0.85;
  box-shadow: 0 0 16px rgba(92,183,165,0.35);
}

/* Decorative glow orb (behind hero card) */
.cb-glow-orb {
  position: absolute;
  border-radius: 9999px;
  filter: blur(56px);
  pointer-events: none;
  z-index: -1;
}

/* ─── Mini-scheduler — the hero's wow anchor ─── */
.cb-mini-scheduler {
  display: grid;
  grid-template-columns: 40px repeat(5, minmax(0, 1fr));
  /* Row height bumped 30px → 36px (20% taller). All course-block inline
     top/height values in the hero card were recalibrated to match. */
  grid-template-rows: 22px repeat(8, 36px);
  border-radius: 14px;
  overflow: hidden;
  background: #FAFAFB;
  border: 1px solid rgba(34,43,69,0.10);
  position: relative;
}
html.dark .cb-mini-scheduler { background: #1A2E2A; border-color: rgba(92,183,165,0.18); }

.cb-mini-day-hdr,
.cb-mini-hour-tick {
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  letter-spacing: 0.10em;
  color: #6D7890;
}
.cb-mini-day-hdr { font-size: 10px; }
.cb-mini-hour-tick {
  justify-content: flex-end;
  padding-right: 4px;
  font-weight: 600;
  font-size: 9px;
}
html.dark .cb-mini-day-hdr,
html.dark .cb-mini-hour-tick { color: #9FB5AF; }

/* One spanning div per day column draws the hourly grid via repeating gradient */
.cb-mini-day-col {
  background-image: repeating-linear-gradient(
    to bottom,
    transparent,
    transparent 29px,
    rgba(34,43,69,0.06) 29px,
    rgba(34,43,69,0.06) 30px
  );
  border-right: 1px solid rgba(34,43,69,0.06);
}
.cb-mini-day-col.cb-mini-last { border-right: 0; }
html.dark .cb-mini-day-col {
  background-image: repeating-linear-gradient(
    to bottom,
    transparent,
    transparent 29px,
    rgba(92,183,165,0.08) 29px,
    rgba(92,183,165,0.08) 30px
  );
  border-right-color: rgba(92,183,165,0.08);
}

/* Course blocks (absolute-positioned over the grid) */
.cb-mini-block {
  position: absolute;
  border-radius: 8px;
  padding: 4px 7px 4px 11px;
  font-size: 10px;
  line-height: 1.15;
  color: #fff;
  overflow: hidden;
  opacity: 0;
  transform: scale(0.85);
  pointer-events: none;
}
.cb-mini-block .cb-mini-code { font-weight: 700; font-size: 10.5px; letter-spacing: 0.02em; }
.cb-mini-block .cb-mini-time { opacity: 0.78; font-size: 9px; margin-top: 1px; }

.cb-mini-block.cb-mini-c0 { background: #194E43; box-shadow: inset 4px 0 0 #5CB7A5, 0 6px 18px rgba(25,78,67,0.30); }
.cb-mini-block.cb-mini-c1 { background: #3A7B6B; box-shadow: inset 4px 0 0 #A8D8CE, 0 6px 18px rgba(58,123,107,0.28); }
.cb-mini-block.cb-mini-c2 { background: #8A38F5; box-shadow: inset 4px 0 0 #BE9EE8, 0 6px 18px rgba(138,56,245,0.30); }

@keyframes cb-block-pop {
  0%   { opacity: 0; transform: scale(0.85); }
  100% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: no-preference) {
  .cb-mini-block { animation: cb-block-pop 380ms cubic-bezier(0.2,0.9,0.3,1.2) both; }
  .cb-mini-block.cb-mini-d0 { animation-delay: 120ms; }
  .cb-mini-block.cb-mini-d1 { animation-delay: 260ms; }
  .cb-mini-block.cb-mini-d2 { animation-delay: 400ms; }
}
@media (prefers-reduced-motion: reduce) {
  .cb-mini-block { opacity: 1; transform: scale(1); animation: none; }
}

@keyframes cb-float {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: no-preference) {
  .cb-float-anim { animation: cb-float 5.5s ease-in-out infinite; }
}

/* Rationale pull-quote crossfade target */
.cb-rationale-quote { transition: opacity 600ms cubic-bezier(0.4, 0, 0.2, 1); }

/* Pulsing dot */
@keyframes cb-pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(1.25); }
}
@media (prefers-reduced-motion: no-preference) {
  .cb-pulse-dot { animation: cb-pulse-dot 1.8s ease-in-out infinite; }
}

/* Eyebrow badge container variants (used on landing) */
.cb-eyebrow-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.cb-eyebrow-badge.cb-eyebrow-teal {
  color: #194E43;
  background: rgba(92,183,165,0.12);
  border: 1px solid rgba(92,183,165,0.30);
}
.cb-eyebrow-badge.cb-eyebrow-purple-pill {
  color: #6C34C4;
  background: rgba(138,56,245,0.10);
  border: 1px solid rgba(138,56,245,0.28);
}
html.dark .cb-eyebrow-badge.cb-eyebrow-teal { color: #BFE6DD; background: rgba(92,183,165,0.22); border-color: rgba(92,183,165,0.42); }
html.dark .cb-eyebrow-badge.cb-eyebrow-purple-pill { color: #DCC4F8; background: rgba(138,56,245,0.20); border-color: rgba(138,56,245,0.42); }

/* Pull-quote (sample preview rationale) */
.cb-pull-quote {
  background: rgba(138,56,245,0.06);
  border-left: 4px solid #8A38F5;
  border-radius: 0 12px 12px 0;
  padding: 16px 20px;
}
html.dark .cb-pull-quote { background: rgba(138,56,245,0.12); }

/* Responsive headline sizes — defined here because the shared Tailwind bundle
   does NOT compile responsive variants of arbitrary text-[Npx] values, so
   sm:text-[Npx] etc. are silent no-ops. */
.cb-h1 {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.012em;
  /* Smarter wrapping — distributes words across lines so we get even
     line widths instead of one short orphan word. */
  text-wrap: balance;
}
@media (min-width: 640px)  { .cb-h1 { font-size: 40px; } }
@media (min-width: 768px)  { .cb-h1 { font-size: 52px; } }
/* lg+ stays at 56px (not 60px) so "Your class schedule," fits in the 592px
   text column on one line — matches partner.calendarbro.com's H1 wrapping
   pattern (their H1 is 52px and lines fill their column naturally). */
@media (min-width: 1024px) { .cb-h1 { font-size: 56px; } }

.cb-h2-lg {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
@media (min-width: 640px)  { .cb-h2-lg { font-size: 30px; } }
@media (min-width: 768px)  { .cb-h2-lg { font-size: 40px; } }

.cb-h2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
@media (min-width: 640px)  { .cb-h2 { font-size: 28px; } }
@media (min-width: 768px)  { .cb-h2 { font-size: 36px; } }

.cb-h2-cta {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
@media (min-width: 640px)  { .cb-h2-cta { font-size: 32px; } }
@media (min-width: 768px)  { .cb-h2-cta { font-size: 44px; } }

/* Feature icon container for differentiation cards (more visual weight than a plain svg) */
.cb-feature-icon {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.cb-feature-icon-teal {
  background: linear-gradient(135deg, rgba(92,183,165,0.18) 0%, rgba(25,78,67,0.10) 100%);
  color: #194E43;
  box-shadow: inset 0 0 0 1px rgba(92,183,165,0.30), 0 6px 14px rgba(25,78,67,0.08);
}
.cb-feature-icon-purple {
  background: linear-gradient(135deg, rgba(138,56,245,0.18) 0%, rgba(108,52,196,0.10) 100%);
  color: #8A38F5;
  box-shadow: inset 0 0 0 1px rgba(138,56,245,0.30), 0 6px 14px rgba(108,52,196,0.08);
}
html.dark .cb-feature-icon-teal {
  background: linear-gradient(135deg, rgba(92,183,165,0.22) 0%, rgba(25,78,67,0.16) 100%);
  color: #5CB7A5;
  box-shadow: inset 0 0 0 1px rgba(92,183,165,0.36), 0 6px 14px rgba(0,0,0,0.20);
}
html.dark .cb-feature-icon-purple {
  background: linear-gradient(135deg, rgba(138,56,245,0.24) 0%, rgba(108,52,196,0.16) 100%);
  color: #BE9EE8;
  box-shadow: inset 0 0 0 1px rgba(138,56,245,0.40), 0 6px 14px rgba(0,0,0,0.20);
}

/* Hover-lift card variant — adds a top-rail color accent + decorative corner glow */
.cb-card-lift {
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  overflow: hidden;
}
.cb-card-lift::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #5CB7A5 0%, #3A7B6B 100%);
  transition: height 0.25s ease;
}
.cb-card-lift.cb-card-lift-purple::before {
  background: linear-gradient(90deg, #8A38F5 0%, #6C34C4 100%);
}
.cb-card-lift::after {
  content: "";
  position: absolute;
  top: -40px; right: -40px;
  width: 80px; height: 80px;
  border-radius: 9999px;
  background: rgba(92, 183, 165, 0.10);
  filter: blur(20px);
  pointer-events: none;
  transition: background 0.25s ease;
}
.cb-card-lift.cb-card-lift-purple::after {
  background: rgba(138, 56, 245, 0.10);
}
.cb-card-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(92,183,165,0.18);
}
.cb-card-lift:hover::before { height: 4px; }
.cb-card-lift:hover::after { background: rgba(92,183,165,0.18); }
.cb-card-lift.cb-card-lift-purple:hover::after { background: rgba(138,56,245,0.18); }

/* Section band — dark teal (used for glass strip + final CTA) */
.cb-band-dark {
  background: linear-gradient(135deg, #0D2E27 0%, #194E43 50%, #0D2E27 100%);
  color: #fff;
}

/* Coverage check enlarged input */
.cb-input-lg {
  width: 100%;
  height: 56px;
  padding: 0 56px 0 48px;
  border-radius: 16px;
  border: 2px solid rgba(92,183,165,0.30);
  background: white;
  color: #222B45;
  font-size: 16px;
  font-weight: 500;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.cb-input-lg:focus {
  outline: none;
  border-color: #5CB7A5;
  box-shadow: 0 0 0 6px rgba(92,183,165,0.12);
}
html.dark .cb-input-lg { background: #1A2E2A; color: #E8F4F0; border-color: rgba(92,183,165,0.25); }

/* Coverage result pill (teal=supported, purple=not-supported) */
.cb-coverage-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.cb-coverage-pill.cb-pill-yes { background: rgba(92,183,165,0.16); color: #194E43; border: 1px solid rgba(92,183,165,0.30); }
.cb-coverage-pill.cb-pill-no  { background: rgba(138,56,245,0.10); color: #6C34C4; border: 1px solid rgba(138,56,245,0.28); }
html.dark .cb-coverage-pill.cb-pill-yes { background: rgba(92,183,165,0.20); color: #5CB7A5; }
html.dark .cb-coverage-pill.cb-pill-no  { background: rgba(138,56,245,0.20); color: #BE9EE8; }

/* Result-card rank badge (used on the sample preview card) */
.cb-rank-badge {
  width: 48px; height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, #194E43 0%, #5CB7A5 100%);
  color: white;
  font-weight: 800;
  font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px rgba(25,78,67,0.30);
  flex-shrink: 0;
}

/* Hero CTA — stronger Google-button-style with brand colors */
.cb-cta-primary.cb-cta-lg svg { flex-shrink: 0; }

/* ─── Section-level dark-mode overrides ──────────────────────────────
   The shared Tailwind bundle is pre-built and lacks dark: variants for
   arbitrary color values like dark:bg-[#0F1F1C]. We patch the specific
   section IDs/classes used on the landing page here so dark mode stays
   coherent end-to-end. */

/* Coverage check band */
#coverage { background-color: #FAFAFB; }
html.dark #coverage { background-color: #0F1F1C !important; border-color: rgba(92,183,165,0.16) !important; }

/* Sample preview band — gradient honors theme */
#preview { background: linear-gradient(180deg, #F0F9F6 0%, #FFFFFF 100%); }
html.dark #preview { background: linear-gradient(180deg, #0F1F1C 0%, #0D1B1A 100%) !important; }

/* Hero floating card (the mini-scheduler wrapper) */
.cb-hero-card {
  background-color: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(92, 183, 165, 0.20);
}
html.dark .cb-hero-card {
  background-color: rgba(21, 40, 35, 0.92);
  border-color: rgba(92, 183, 165, 0.30);
  box-shadow: 0 24px 80px rgba(0,0,0,0.55), 0 0 60px rgba(92,183,165,0.10) !important;
}

/* Sample preview result card */
.cb-result-card {
  background-color: #FFFFFF;
  border: 1px solid rgba(92, 183, 165, 0.18);
}
html.dark .cb-result-card {
  background-color: #152823;
  border-color: rgba(92, 183, 165, 0.18);
}

/* Coverage-check school chips */
.cb-school-chip {
  background-color: #FFFFFF;
  border: 1px solid rgba(92, 183, 165, 0.22);
}
html.dark .cb-school-chip {
  background-color: #152823;
  border-color: rgba(92, 183, 165, 0.22);
}

/* ─── vs Coursicle head-to-head table ────────────────────────────────
   Outer frame: 1px hairline in the design palette (slate-blue at 8% in
   light, teal at 18% in dark). The Tailwind arbitrary border on the HTML
   element wasn't compiled in the prebuilt bundle and was falling back to
   default gray-200 — looked like a stark white edge against dark teal.
   Owning the border here in CSS guarantees the hairline reads correctly
   in both themes. */
.cb-vs-table {
  background: #FFFFFF;
  border: 1px solid rgba(34, 43, 69, 0.08);
  box-shadow: 0 12px 36px rgba(13,46,39,0.08);
}
html.dark .cb-vs-table {
  background: #152823;
  border-color: rgba(92, 183, 165, 0.18);
  box-shadow: 0 12px 36px rgba(0,0,0,0.40);
}

.cb-vs-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  align-items: stretch;
}
.cb-vs-row + .cb-vs-row { border-top: 1px solid rgba(34,43,69,0.10); }
html.dark .cb-vs-row + .cb-vs-row { border-top-color: rgba(92,183,165,0.10); }

.cb-vs-head { background: rgba(92,183,165,0.06); }
html.dark .cb-vs-head { background: rgba(92,183,165,0.10); }
.cb-vs-head > div {
  padding: 14px 18px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  display: flex; align-items: center; justify-content: center;
  gap: 6px;
}
.cb-vs-col-coursicle { color: #6D7890; border-left: 1px solid rgba(34,43,69,0.10); }
html.dark .cb-vs-col-coursicle { color: #9FB5AF; border-left-color: rgba(92,183,165,0.10); }
.cb-vs-col-cb {
  color: #194E43;
  border-left: 1px solid rgba(34,43,69,0.10);
  background: rgba(92,183,165,0.10);
}
html.dark .cb-vs-col-cb {
  color: #5CB7A5;
  background: rgba(92,183,165,0.16);
  border-left-color: rgba(92,183,165,0.10);
}

.cb-vs-label {
  padding: 16px 18px;
  font-size: 14px;
  font-weight: 600;
  color: #222B45;
  display: flex; align-items: center;
}
html.dark .cb-vs-label { color: #E8F4F0; }

.cb-vs-cell-no, .cb-vs-cell-yes, .cb-vs-cell-neutral {
  padding: 16px 18px;
  font-size: 13px;
  display: flex; align-items: center; gap: 8px;
  border-left: 1px solid rgba(34,43,69,0.10);
}
html.dark .cb-vs-cell-no,
html.dark .cb-vs-cell-yes,
html.dark .cb-vs-cell-neutral { border-left-color: rgba(92,183,165,0.10); }

.cb-vs-cell-no { color: #6D7890; }
html.dark .cb-vs-cell-no { color: #9FB5AF; }
.cb-vs-cell-yes {
  color: #194E43;
  font-weight: 600;
  background: rgba(92,183,165,0.06);
}
html.dark .cb-vs-cell-yes { color: #5CB7A5; background: rgba(92,183,165,0.10); }
.cb-vs-cell-neutral { color: #4A4F5D; }
html.dark .cb-vs-cell-neutral { color: #C8DCD8; }

.cb-vs-x  { flex-shrink: 0; color: rgba(109,120,144,0.55); }
.cb-vs-check { flex-shrink: 0; color: #5CB7A5; }
html.dark .cb-vs-x { color: rgba(159, 181, 175, 0.42); }
html.dark .cb-vs-check { color: #5CB7A5; }

/* Mobile: stack the 3 columns into card-per-row format */
@media (max-width: 639px) {
  .cb-vs-head { display: none; }
  .cb-vs-row {
    grid-template-columns: 1fr;
    padding: 6px 0;
  }
  .cb-vs-label {
    padding: 14px 16px 6px;
    font-size: 12px;
    font-weight: 700;
    color: #6D7890;
    text-transform: uppercase;
    letter-spacing: 0.10em;
  }
  html.dark .cb-vs-label { color: #9FB5AF; }
  .cb-vs-cell-no, .cb-vs-cell-yes, .cb-vs-cell-neutral {
    padding: 6px 16px;
    border-left: 0;
    font-size: 13px;
    background: transparent;
  }
  html.dark .cb-vs-cell-yes { background: transparent; }
  .cb-vs-cell-no::before    { content: "Coursicle: ";   font-weight: 800; color: #6D7890; margin-right: 6px; letter-spacing: 0.02em; }
  .cb-vs-cell-yes::before   { content: "CalendarBro: "; font-weight: 800; color: #194E43; margin-right: 6px; letter-spacing: 0.02em; }
  .cb-vs-cell-neutral::before { content: "Both: ";      font-weight: 800; color: #4A4F5D; margin-right: 6px; letter-spacing: 0.02em; }
  html.dark .cb-vs-cell-yes::before { color: #5CB7A5; }
  html.dark .cb-vs-cell-neutral::before { color: #C8DCD8; }
  .cb-vs-row:last-child { padding-bottom: 14px; }
  .cb-vs-row:first-of-type:not(.cb-vs-head) { padding-top: 14px; }
}

/* ─── Schedule-designer panel chrome (app.html) ────────────────────── */
.cb-panel-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.cb-panel-title {
  font-family: 'Fraunces', 'Lexend Deca', Georgia, serif;
  font-variation-settings: 'opsz' 144, 'SOFT' 50;
  font-size: 20px;
  font-weight: 600;
  color: #194E43;
  letter-spacing: -0.018em;
  line-height: 1.18;
  margin: 0;
}
html.dark .cb-panel-title { color: #E8F4F0; }
.cb-panel-sub {
  margin: 4px 0 0;
  font-size: 13.5px;
  color: #6D7890;
  line-height: 1.4;
}
html.dark .cb-panel-sub { color: #9FB5AF; }

/* Smaller step dot for inline use (vs the 48-px hero version) */
.cb-step-dot.cb-step-dot-sm {
  width: 36px;
  height: 36px;
  font-size: 14px;
  box-shadow: 0 0 0 3px rgba(92,183,165,0.13), 0 3px 9px rgba(25,78,67,0.15);
}

/* Locked-panel message (between header and the gated body) */
.cb-panel-locked-msg {
  margin-top: 16px;
  padding: 12px 16px;
  background: rgba(34, 43, 69, 0.04);
  border: 1px dashed rgba(34, 43, 69, 0.12);
  border-radius: 12px;
  font-size: 13.5px;
  color: #6D7890;
  font-style: italic;
}
html.dark .cb-panel-locked-msg {
  background: rgba(92, 183, 165, 0.06);
  border-color: rgba(92, 183, 165, 0.18);
  color: #9FB5AF;
}

/* The school selector mounts its own "Search for your school" label
   inside the school panel. The new panel header already covers the
   "what is this" beat — hide the inline label so the input is the
   first interactive element below the header. */
#school-selector-host [data-cb="search-view"] label[for="cb-school-input"] { display: none; }

/* Same: course-input panel's "Required courses" header pulls weight
   away from the panel head. Stays visible but downsized to a small
   eyebrow. Course-input.js renders its own h3 heading; we let it
   through but trim leading margin so it sits cleanly below the panel
   sub-text. */
#course-input-host > div:first-child > h3:first-child {
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #6D7890 !important;
  margin-top: 0 !important;
}
html.dark #course-input-host > div:first-child > h3:first-child { color: #9FB5AF !important; }

/* When a panel is locked (opacity-50 from JS), tone down the step dot too
   so it doesn't pull focus. */
#panel-courses.opacity-50 .cb-step-dot,
#panel-preferences.opacity-50 .cb-step-dot {
  background: linear-gradient(135deg, #C8DCD8 0%, #9FB5AF 100%);
  box-shadow: 0 0 0 3px rgba(109,120,144,0.10), 0 3px 9px rgba(0,0,0,0.04);
}
html.dark #panel-courses.opacity-50 .cb-step-dot,
html.dark #panel-preferences.opacity-50 .cb-step-dot {
  background: linear-gradient(135deg, rgba(159,181,175,0.4) 0%, rgba(109,120,144,0.4) 100%);
  box-shadow: none;
}

/* ─── Schedule-designer result cards (app.html) ────────────────────── */

/* Result card wrapper — bigger shadow + brand-tinted border vs the
   plain .card. Inherits .cb-result-card for theme handling. */
.cb-card-result {
  border-radius: 24px;
  padding: 28px;
  margin-bottom: 24px;
  box-shadow: 0 12px 40px rgba(13,46,39,0.06);
  transition: transform 0.18s ease, box-shadow 0.22s ease;
}
.cb-card-result:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 48px rgba(13,46,39,0.10);
}
html.dark .cb-card-result { box-shadow: 0 12px 40px rgba(0,0,0,0.32); }
@media (max-width: 639px) { .cb-card-result { padding: 20px; border-radius: 18px; } }

/* Result card header */
.cb-result-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.cb-result-head-lead {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.cb-result-head-text { display: flex; flex-direction: column; min-width: 0; }
.cb-result-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8A38F5;
}
html.dark .cb-result-eyebrow { color: #BE9EE8; }
.cb-result-headline {
  margin: 2px 0 0;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: #194E43;
  line-height: 1.2;
}
html.dark .cb-result-headline { color: #E8F4F0; }
.cb-result-cta {
  padding: 11px 22px !important;
  font-size: 13px !important;
  flex-shrink: 0;
}

/* Rationale pull-quote inside the result card */
.cb-result-rationale {
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.55;
}
.cb-result-rationale p {
  margin: 0;
  color: #222B45;
  font-weight: 500;
}
html.dark .cb-result-rationale p { color: #E8F4F0; }

/* Stat strip — primary (large) + secondary chips */
.cb-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(92,183,165,0.15);
}
html.dark .cb-stat-grid { border-bottom-color: rgba(92,183,165,0.18); }
.cb-stat-cell { display: flex; flex-direction: column; }
.cb-stat-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6D7890;
}
html.dark .cb-stat-label { color: #9FB5AF; }
.cb-stat-value {
  margin-top: 4px;
  font-size: 22px;
  font-weight: 700;
  color: #194E43;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.012em;
}
html.dark .cb-stat-value { color: #E8F4F0; }
@media (min-width: 640px) { .cb-stat-value { font-size: 26px; } }

.cb-stat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.cb-stat-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 600;
}
.cb-stat-chip-teal {
  background: rgba(92,183,165,0.10);
  color: #194E43;
}
.cb-stat-chip-muted {
  background: rgba(109,120,144,0.10);
  color: #6D7890;
}
html.dark .cb-stat-chip-teal { background: rgba(92,183,165,0.16); color: #5CB7A5; }
html.dark .cb-stat-chip-muted { background: rgba(159,181,175,0.10); color: #9FB5AF; }

/* Section list — designed rows with course-color swatch */
.cb-result-sections { margin-top: 22px; }
.cb-result-sections-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #6D7890;
  margin: 0 0 10px;
}
html.dark .cb-result-sections-label { color: #9FB5AF; }

.cb-section-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cb-section-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  transition: background-color 0.12s ease;
}
.cb-section-row:hover {
  background: rgba(92,183,165,0.06);
}
html.dark .cb-section-row:hover { background: rgba(92,183,165,0.08); }
.cb-section-row-swatch {
  flex-shrink: 0;
  width: 4px;
  height: 32px;
  border-radius: 4px;
  background: var(--cb-block-rail, #194E43);
}
.cb-section-row-main { flex: 1 1 auto; min-width: 0; }
.cb-section-row-title {
  font-size: 14px;
  font-weight: 700;
  color: #222B45;
  letter-spacing: -0.005em;
}
html.dark .cb-section-row-title { color: #E8F4F0; }
.cb-section-row-courseTitle {
  font-weight: 400;
  color: #6D7890;
}
html.dark .cb-section-row-courseTitle { color: #9FB5AF; }
.cb-section-row-meta {
  margin-top: 2px;
  font-size: 12px;
  color: #6D7890;
}
html.dark .cb-section-row-meta { color: #9FB5AF; }
.cb-section-row-crn {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  color: #6D7890;
  font-variant-numeric: tabular-nums;
}
html.dark .cb-section-row-crn { color: #9FB5AF; }

/* Week-grid contrast bump — overrides app.html's inline styles
   (borders were 6-8% opacity, too faint). */
.cb-week-grid {
  border: 1px solid rgba(34, 43, 69, 0.16) !important;
}
.cb-week-grid .cb-cell {
  border-bottom: 1px solid rgba(34, 43, 69, 0.10) !important;
  border-right: 1px solid rgba(34, 43, 69, 0.10) !important;
}
html.dark .cb-week-grid {
  border-color: rgba(92, 183, 165, 0.22) !important;
}
html.dark .cb-week-grid .cb-cell {
  border-bottom-color: rgba(92, 183, 165, 0.14) !important;
  border-right-color: rgba(92, 183, 165, 0.14) !important;
}

/* Segmented controls — landing-aware polish (slight elevation + active glow) */
.cb-seg-group {
  background: #FAFAFB !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}
html.dark .cb-seg-group {
  background: #1A2E2A !important;
}
.cb-seg[aria-pressed="true"] {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 2px 8px rgba(25,78,67,0.18);
}

/* ─── Notify-me-when-school-launches form ──────────────────────────── */
.cb-notify-form {
  background: rgba(138,56,245,0.05);
  border: 1px solid rgba(138,56,245,0.22);
  border-radius: 16px;
  padding: 18px;
}
html.dark .cb-notify-form {
  background: rgba(138,56,245,0.10);
  border-color: rgba(138,56,245,0.30);
}
.cb-notify-form .cb-input-lg {
  height: 48px;
  padding: 0 18px;
  font-size: 15px;
}
.cb-notify-form .cb-cta-primary { white-space: nowrap; }
.cb-notify-msg.cb-notify-ok  { color: #194E43; font-weight: 600; }
.cb-notify-msg.cb-notify-err { color: #B91C1C; font-weight: 600; }
html.dark .cb-notify-msg.cb-notify-ok  { color: #5CB7A5; }
html.dark .cb-notify-msg.cb-notify-err { color: #F87171; }

/* ════════════════════════════════════════════════════════════════
   DESIGN PASS v8 — Chapter system, atmospheric acts, mobile bar
   Synthesized from a 4-agent design debate (editorial, conversion,
   IA, mobile). Resolves: repeating eyebrow chrome, gradient-on-every
   -headline, hero/preview redundancy, wall-of-text mobile middle.
   ════════════════════════════════════════════════════════════════ */

/* Chapter eyebrow — replaces the purple-pill on sections 2-4. Gives the
   page a narrative spine: 01 / The Pitch · 02 / vs Coursicle · 03 / Your
   School · 04 / What You'll Get. One pill (the hero's "AI-Ranked
   Schedules") survives as the single visual exclamation. */
.cb-chapter {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}
.cb-chapter-num {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #5CB7A5;
}
.cb-chapter-rule {
  display: inline-block;
  width: 28px;
  height: 1px;
  background: rgba(92,183,165,0.60);
}
html.dark .cb-chapter-rule { background: rgba(92,183,165,0.65); }
.cb-chapter-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #4A4F5D;
}
html.dark .cb-chapter-label { color: #9FB5AF; }

/* Section atmospheric backgrounds — one whisper of color per act so the
   eye registers section boundaries without explicit dividers. Subtle by
   design; if you can SEE them they're too strong. */
.cb-section-atmos { position: relative; isolation: isolate; }
.cb-section-atmos::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}
.cb-atmos-teal-tr::before {
  /* Alpha bumped from 0.09/0.05 to 0.12/0.07 (light) and 0.11/0.06 to
     0.16/0.10 (dark) — earlier values were sub-perceptual. The radial
     mesh should be felt, not just labeled. */
  background:
    radial-gradient(900px 520px at 88% 12%, rgba(92,183,165,0.12) 0%, transparent 62%),
    radial-gradient(620px 420px at 8% 92%, rgba(92,183,165,0.07) 0%, transparent 62%);
}
html.dark .cb-atmos-teal-tr::before {
  background:
    radial-gradient(900px 520px at 88% 12%, rgba(92,183,165,0.16) 0%, transparent 62%),
    radial-gradient(620px 420px at 8% 92%, rgba(92,183,165,0.10) 0%, transparent 62%);
}
.cb-atmos-purple-tl::before {
  background:
    radial-gradient(780px 480px at 10% 8%, rgba(138,56,245,0.07) 0%, transparent 62%),
    radial-gradient(520px 380px at 92% 92%, rgba(138,56,245,0.045) 0%, transparent 62%);
}
html.dark .cb-atmos-purple-tl::before {
  background:
    radial-gradient(780px 480px at 10% 8%, rgba(138,56,245,0.13) 0%, transparent 62%),
    radial-gradient(520px 380px at 92% 92%, rgba(138,56,245,0.08) 0%, transparent 62%);
}

/* Time-to-schedule emphasis row at top of vs-table (the conversion
   critic's top suggestion — flips "feature comparison" into "time to
   value comparison"). */
.cb-vs-row-time .cb-vs-label,
.cb-vs-row-time .cb-vs-cell-no,
.cb-vs-row-time .cb-vs-cell-yes {
  background: rgba(92,183,165,0.06);
}
html.dark .cb-vs-row-time .cb-vs-label,
html.dark .cb-vs-row-time .cb-vs-cell-no,
html.dark .cb-vs-row-time .cb-vs-cell-yes {
  background: rgba(92,183,165,0.10);
}
.cb-vs-time-big {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-right: 6px;
  font-variant-numeric: tabular-nums;
}
.cb-vs-cell-yes .cb-vs-time-big { color: #194E43; }
html.dark .cb-vs-cell-yes .cb-vs-time-big { color: #5CB7A5; }
.cb-vs-cell-no .cb-vs-time-big { color: #4A4F5D; }
html.dark .cb-vs-cell-no .cb-vs-time-big { color: #C8DCD8; }

/* Mobile: alternating row stripe — the stacked table on phone was a wall
   of identical rows. Stripe gives the scroll rhythm. */
@media (max-width: 639px) {
  .cb-vs-row:nth-child(even):not(.cb-vs-head) {
    background: rgba(92,183,165,0.035);
  }
  html.dark .cb-vs-row:nth-child(even):not(.cb-vs-head) {
    background: rgba(92,183,165,0.06);
  }
}

/* Hero stack — desktop = asymmetric 2-col; <lg = reverse order so the
   mini-scheduler appears ABOVE the H1. Padding is set explicitly here
   because the prebuilt Tailwind bundle's lg: padding/grid utilities at
   arbitrary stops aren't reliably present, and the hero needs guaranteed
   breathing room from BOTH the sticky nav above AND the next section
   below (the CTA was bleeding into vs-Coursicle previously). */
.cb-hero-stack {
  display: grid;
  grid-template-columns: 1fr;
  /* Standardized: padding-top = padding-bottom = 24px, matching the
     eyebrow→H1 gap (mt-6). Uniform rhythm: nav→eyebrow, eyebrow→H1,
     and button→next-section all read at the same beat. */
  padding-top: 24px;
  padding-bottom: 24px;
}
@media (min-width: 1024px) {
  .cb-hero-stack {
    /* Match partner.calendarbro.com hero exactly: equal 50/50 split
       (grid-cols-2) with gap-12 (48px). Inspected from the actual
       partner landing source at src/pages/partner.astro. */
    grid-template-columns: 1fr 1fr;
    column-gap: 48px;
    padding-top: 24px;
    padding-bottom: 24px;
  }
}
@media (max-width: 1023px) {
  .cb-hero-stack > .cb-hero-text      { order: 2; }
  .cb-hero-stack > .cb-hero-card-wrap { order: 1; margin-bottom: 4px; }
}

/* Mobile sticky bottom sign-in bar — appears after the hero CTA leaves
   the viewport on phones, fills the conversion vacuum across the middle
   ~4 screens where the page currently has zero call-to-action. Quiet
   styling (mint hairline, no shadow, translucent) per the editorial
   critic's concession. */
.cb-sticky-mobile-cta {
  position: fixed;
  left: 12px; right: 12px;
  bottom: 12px;
  z-index: 40;
  background: rgba(255,255,255,0.94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(92,183,165,0.35);
  border-radius: 14px;
  padding: 10px 12px 10px 14px;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  transform: translateY(140%);
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
html.dark .cb-sticky-mobile-cta {
  background: rgba(13,40,35,0.94);
  border-color: rgba(92,183,165,0.40);
}
.cb-sticky-mobile-cta.cb-sticky-show {
  display: flex;
  transform: translateY(0);
}
.cb-sticky-mobile-cta .cb-sticky-label {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #194E43;
  line-height: 1.15;
}
html.dark .cb-sticky-mobile-cta .cb-sticky-label { color: #E8F4F0; }
.cb-sticky-mobile-cta .cb-sticky-sub {
  font-size: 10.5px;
  font-weight: 500;
  color: #6D7890;
  margin-top: 1px;
  letter-spacing: 0.02em;
}
html.dark .cb-sticky-mobile-cta .cb-sticky-sub { color: #9FB5AF; }
.cb-sticky-mobile-cta .cb-cta-primary {
  padding: 0 14px;
  font-size: 13px;
  height: 40px;
  min-height: 40px;
  white-space: nowrap;
}
@media (min-width: 1024px) {
  .cb-sticky-mobile-cta { display: none !important; }
}

/* ════════════════════════════════════════════════════════════════
   APP.HTML REDESIGN v2 — partner-portal-parity dashboard chrome
   Adopts the partner dashboard's signature components: stat tiles,
   action card with right rail, dark-teal hero banner, refined empty
   states, active-step pulse. Conditionally renders Tier 2 chrome only
   for returning users (has localStorage state).
   ════════════════════════════════════════════════════════════════ */

/* Active-step pulse — the currently-unlocked step dot gets a dual-ring
   shadow + pulse to telegraph "you're here" in the flow. Mirrors the
   partner timeline current-dot pattern (dashboard.html:648). */
.cb-step-dot.cb-step-dot-sm.cb-step-dot-active {
  box-shadow:
    0 0 0 4px rgba(92,183,165,0.20),
    0 0 0 8px rgba(92,183,165,0.08),
    0 4px 12px rgba(25,78,67,0.22);
  /* 1.8s cadence matches partner's `.timeline-dot.current` and the
     `.cb-pulse-dot` accent so all "you're here" signals breathe in sync.
     Asymmetric keyframe (peak at 40%) gives a faster inhale + slower
     fade — reads as breath, not metronome. */
  animation: cb-step-pulse 1.8s ease-in-out infinite;
}
.cb-step-dot.cb-step-dot-sm.cb-step-dot-active.cb-step-dot-purple {
  box-shadow:
    0 0 0 4px rgba(138,56,245,0.22),
    0 0 0 8px rgba(138,56,245,0.08),
    0 4px 12px rgba(108,52,196,0.22);
}
@keyframes cb-step-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 4px rgba(92,183,165,0.20),
      0 0 0 8px rgba(92,183,165,0.08),
      0 4px 12px rgba(25,78,67,0.22);
  }
  40% {
    box-shadow:
      0 0 0 6px rgba(92,183,165,0.28),
      0 0 0 12px rgba(92,183,165,0.10),
      0 4px 14px rgba(25,78,67,0.26);
  }
}
@media (prefers-reduced-motion: reduce) {
  .cb-step-dot.cb-step-dot-sm.cb-step-dot-active { animation: none; }
}

/* Refined empty-state nudge — replaces the ugly dashed-border
   .cb-panel-locked-msg with partner's friendly empty-state mini-card
   (circle icon + body, dashboard.html:1447). */
/* Specificity note: this rule (2 classes) beats Tailwind's .hidden (1 class),
   which means `classList.add('hidden')` from JS silently fails to hide the
   element. Explicit `.hidden` rule below restores the expected behavior. */
.cb-panel-locked-msg.cb-panel-locked-v2.hidden { display: none !important; }
.cb-panel-locked-msg.cb-panel-locked-v2 {
  margin-top: 14px;
  padding: 14px 18px;
  /* Background alpha 0.025 → 0.05; border alpha 0.06 → 0.10 so the nudge
     is actually visible against the (newly-cooled) page bg. The earlier
     values were sub-perceptual on a 14" laptop. */
  background: rgba(34, 43, 69, 0.05);
  border: 1px solid rgba(34, 43, 69, 0.10);
  border-radius: 14px;
  color: #6D7890;
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 12px;
  font-style: normal;
}
.cb-panel-locked-msg.cb-panel-locked-v2::before {
  content: "";
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 10px;
  background: rgba(92, 183, 165, 0.12);
  background-repeat: no-repeat;
  background-position: center;
  transition: background-image 0.25s ease, background-color 0.25s ease;
  /* Lock SVG: clearer "this is gated" signal than the prior info-circle,
     which read as a generic hint. Swaps to a check via the v2.unlocked
     modifier once JS detects the step is satisfied. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235CB7A5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='11' width='18' height='11' rx='2' ry='2'/><path d='M7 11V7a5 5 0 0 1 10 0v4'/></svg>");
}
.cb-panel-locked-msg.cb-panel-locked-v2.cb-locked-unlocked::before {
  background-color: rgba(92, 183, 165, 0.18);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23194E43' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>");
}
html.dark .cb-panel-locked-msg.cb-panel-locked-v2 {
  background: rgba(92, 183, 165, 0.06);
  border-color: rgba(92, 183, 165, 0.14);
  color: #9FB5AF;
}
html.dark .cb-panel-locked-msg.cb-panel-locked-v2::before {
  background-color: rgba(92, 183, 165, 0.18);
}

/* Form grid — left column holds the 3 step cards; right column (lg+
   only) is a sticky persistent summary rail. Mirrors partner's
   action-card-with-right-rail pattern (dashboard.html:1239 uses
   `grid-cols-[1fr_320px]`). */
.cb-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 1024px) {
  .cb-form-grid {
    grid-template-columns: 1fr 320px;
    gap: 28px;
    align-items: start;
  }
}

/* Persistent summary rail — sticky on lg+, scrolls inline on mobile. */
.cb-summary-rail {
  position: relative;
}
@media (min-width: 1024px) {
  .cb-summary-rail {
    position: sticky;
    top: 96px;
  }
}
.cb-summary-card {
  background: #FFFFFF;
  border: 1px solid #F3F4F6;
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.04);
}
html.dark .cb-summary-card {
  background: #152823;
  border-color: rgba(92, 183, 165, 0.12);
  box-shadow: 0 4px 24px rgba(0,0,0,0.30);
}
.cb-summary-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #5CB7A5;
  margin-bottom: 4px;
}
.cb-summary-title {
  font-size: 17px;
  font-weight: 700;
  color: #194E43;
  line-height: 1.25;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}
html.dark .cb-summary-title { color: #E8F4F0; }
.cb-summary-divider {
  height: 1px;
  background: #F3F4F6;
  margin: 16px -22px;
}
html.dark .cb-summary-divider { background: rgba(92,183,165,0.10); }
.cb-summary-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}
.cb-summary-row:last-of-type { margin-bottom: 0; }
.cb-summary-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(92,183,165,0.10);
  color: #194E43;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  font-weight: 700;
}
html.dark .cb-summary-icon { background: rgba(92,183,165,0.16); color: #5CB7A5; }
.cb-summary-icon.cb-summary-icon-purple {
  background: rgba(138,56,245,0.10);
  color: #6C34C4;
}
html.dark .cb-summary-icon.cb-summary-icon-purple { background: rgba(138,56,245,0.18); color: #BE9EE8; }
.cb-summary-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6D7890;
  line-height: 1;
  margin: 4px 0 4px;
}
html.dark .cb-summary-label { color: #9FB5AF; }
.cb-summary-value {
  font-size: 13.5px;
  font-weight: 600;
  color: #194E43;
  line-height: 1.35;
}
html.dark .cb-summary-value { color: #E8F4F0; }
.cb-summary-value.cb-summary-value-muted { color: #6D7890; font-weight: 500; }
html.dark .cb-summary-value.cb-summary-value-muted { color: #9FB5AF; }
.cb-summary-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}
.cb-summary-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 9999px;
  background: rgba(92,183,165,0.10);
  color: #194E43;
  font-size: 11px;
  font-weight: 600;
}
html.dark .cb-summary-chip { background: rgba(92,183,165,0.16); color: #5CB7A5; }

/* Stat tile — partner's KPI card pattern (dashboard.html:1185). */
.cb-stat-tile {
  background: #FFFFFF;
  border: 1px solid #F3F4F6;
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.04);
}
html.dark .cb-stat-tile {
  background: #152823;
  border-color: rgba(92, 183, 165, 0.12);
  box-shadow: 0 4px 24px rgba(0,0,0,0.30);
}
.cb-stat-tile-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(92,183,165,0.12);
  color: #194E43;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
}
html.dark .cb-stat-tile-icon { background: rgba(92,183,165,0.18); color: #5CB7A5; }
.cb-stat-tile-value {
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  color: #194E43;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}
html.dark .cb-stat-tile-value { color: #E8F4F0; }
.cb-stat-tile-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6D7890;
}
html.dark .cb-stat-tile-label { color: #9FB5AF; }

/* Dark-teal hero banner — partner pattern (dashboard.html:1143). */
.cb-hero-banner {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  padding: 22px 26px;
  background: linear-gradient(135deg, #0D2E27 0%, #194E43 40%, #1A5C4E 60%, #0D2E27 100%);
  color: #fff;
}
.cb-hero-banner::before {
  content: "";
  position: absolute;
  top: -60px; left: -40px;
  width: 200px; height: 200px;
  border-radius: 9999px;
  /* In-palette purple replaces the original amber rgba(245,158,11,0.10).
     The amber was the only warm color anywhere in the student app and
     read as a Stripe ad; brand purple keeps the banner bi-tonal but
     stays on-palette. */
  background: rgba(190, 158, 232, 0.12);
  filter: blur(60px);
  pointer-events: none;
}
.cb-hero-banner::after {
  content: "";
  position: absolute;
  bottom: -60px; right: -40px;
  width: 220px; height: 220px;
  border-radius: 9999px;
  background: rgba(92, 183, 165, 0.20);
  filter: blur(60px);
  pointer-events: none;
}
.cb-hero-banner-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.cb-hero-banner-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #5CB7A5;
  margin-bottom: 6px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.cb-hero-banner-eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 9999px;
  background: #5CB7A5;
}
.cb-hero-banner-title {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0;
}
@media (min-width: 768px) { .cb-hero-banner-title { font-size: 24px; } }
.cb-hero-banner-sub {
  margin-top: 4px;
  font-size: 13px;
  color: rgba(255,255,255,0.72);
  line-height: 1.45;
}
.cb-hero-banner-tile {
  display: flex; flex-direction: column;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  padding: 10px 16px;
  min-width: 140px;
}
.cb-hero-banner-tile-value {
  font-size: 22px;
  font-weight: 800;
  color: #5CB7A5;
  line-height: 1;
}
.cb-hero-banner-tile-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-top: 4px;
}

/* Page header — Fraunces display face for editorial weight; Lexend Deca
   keeps the body. Optical-size axis at 144 softens the bowls at large size. */
.cb-page-title {
  font-family: 'Fraunces', 'Lexend Deca', Georgia, serif;
  font-variation-settings: 'opsz' 144, 'SOFT' 50;
  font-size: 22px;
  font-weight: 600;
  color: #194E43;
  line-height: 1.18;
  letter-spacing: -0.022em;
  margin: 0;
}
@media (min-width: 1024px) { .cb-page-title { font-size: 28px; } }
html.dark .cb-page-title { color: #E8F4F0; }
.cb-page-sub {
  font-size: 12.5px;
  color: #6D7890;
  margin: 4px 0 0;
  line-height: 1.45;
}
html.dark .cb-page-sub { color: #9FB5AF; }

/* ════════════════════════════════════════════════════════════════
   POLISH PASS v3 — synthesized from the 4-agent visual debate
   (typography / color+atmosphere / motion / empty-states).
   ════════════════════════════════════════════════════════════════ */

/* Info-state banner — distinct from .cb-error-bg (red). For when the
   solver returns no combinations: that's information, not a system
   failure. Teal-tinted, info-circle icon, constructive tone. */
.cb-info-bg {
  background: #F0F7F4;
  color: #194E43;
  border: 1px solid rgba(92,183,165,0.20);
}
html.dark .cb-info-bg {
  background: rgba(92,183,165,0.10);
  color: #C8DCD8;
  border-color: rgba(92,183,165,0.25);
}

/* Dark-mode skeleton — the slate-alpha shimmer barely separates from
   #0D1B1A. Re-tint with brand teal so the page reads "thinking", not
   "broken". */
html.dark .skeleton,
html.dark .cb-skel-row {
  background: linear-gradient(90deg,
    rgba(92,183,165,0.06) 25%,
    rgba(92,183,165,0.14) 50%,
    rgba(92,183,165,0.06) 75%);
  background-size: 200% 100%;
}

/* Summary-rail action link — when the value is "Not picked yet" / "None
   added", render as a teal link that focuses the relevant input. Turns
   the rail from a report card into a checklist. */
.cb-summary-value.cb-summary-link {
  color: #5CB7A5;
  font-weight: 600;
  cursor: pointer;
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
  font-family: inherit;
  font-size: inherit;
  line-height: 1.35;
  transition: color 0.12s ease;
}
.cb-summary-value.cb-summary-link:hover { color: #194E43; text-decoration: underline; }
html.dark .cb-summary-value.cb-summary-link { color: #5CB7A5; }
html.dark .cb-summary-value.cb-summary-link:hover { color: #BFE6DD; }

/* Focus-ring dedup — inputs already have a `box-shadow` halo on focus,
   so the global outline produces a double-ring. Scope outline to
   buttons/links/role=button only; inputs keep just their halo. */
:where(input, textarea, select):focus-visible { outline: none; }

/* School-selected choreography — single biggest perceived-quality win.
   Triggered by JS adding .cb-step-reveal to the freshly-unlocked panel
   body. Locked-msg fades out (180ms), then content fades+slides in
   (260ms ease-out) — total ~340ms, the perceptual ceiling for "I clicked
   that and the page responded". */
@keyframes cb-step-reveal-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .cb-step-reveal {
    animation: cb-step-reveal-in 260ms cubic-bezier(0.2, 0.9, 0.3, 1) both;
  }
}

/* Crossfade for summary-rail value swaps (school name appearing, course
   count updating). 180ms feels like "noticed" without being slow. */
.cb-summary-value,
.cb-summary-chips {
  transition: opacity 0.18s ease;
}
.cb-summary-row.cb-summary-flash .cb-summary-icon {
  animation: cb-summary-flash 0.45s ease-out;
}
@keyframes cb-summary-flash {
  0%   { box-shadow: 0 0 0 0 rgba(92,183,165,0.45); }
  60%  { box-shadow: 0 0 0 6px rgba(92,183,165,0); }
  100% { box-shadow: 0 0 0 0 rgba(92,183,165,0); }
}

/* ============================================================
   Wizard (Phase 2) — 4-step horizontal-swipe shell. Replaces the
   3-stacked-panel cb-form-grid layout. One step active at a time;
   transitions handle in/out. Brand-easing cubic-bezier matches the
   project conventions used on cb-cta-primary + cb-step-reveal.
   ============================================================ */
.cb-wizard-shell {
  position: relative;
  min-height: 540px;
}
.cb-wizard-step {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateX(24px);
}
.cb-wizard-step.cb-wizard-step-active {
  position: relative;
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

@keyframes cb-step-out-forward {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-24px); }
}
@keyframes cb-step-in-forward {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes cb-step-out-back {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(24px); }
}
@keyframes cb-step-in-back {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: no-preference) {
  .cb-wizard-step.cb-wizard-step-exiting  { animation: cb-step-out-forward 200ms cubic-bezier(0.4,0,1,1) both; }
  .cb-wizard-step.cb-wizard-step-entering { animation: cb-step-in-forward 260ms cubic-bezier(0.2,0.9,0.3,1) 80ms both; }
  .cb-wizard-step.cb-wizard-step-exiting.cb-wizard-back  { animation: cb-step-out-back 160ms cubic-bezier(0.4,0,1,1) both; }
  .cb-wizard-step.cb-wizard-step-entering.cb-wizard-back { animation: cb-step-in-back 210ms cubic-bezier(0.2,0.9,0.3,1) 60ms both; }
}
@media (prefers-reduced-motion: reduce) {
  .cb-wizard-step.cb-wizard-step-exiting  { display: none; }
  .cb-wizard-step.cb-wizard-step-entering { animation: none; opacity: 1; transform: none; }
}

/* Progress dots — `●─●─○─○` cluster, top-right of the header. */
.cb-wizard-progress {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cb-wizard-dot {
  width: 10px; height: 10px;
  border-radius: 9999px;
  background: rgba(34,43,69,0.15);
  border: 1.5px solid transparent;
  transition: background 240ms ease, border-color 240ms ease, transform 200ms cubic-bezier(0.2,0.9,0.3,1);
}
.cb-wizard-dot.cb-wizard-dot-active {
  background: #5CB7A5;
  transform: scale(1.15);
}
.cb-wizard-dot.cb-wizard-dot-done {
  background: #5CB7A5;
}
.cb-wizard-dot-connector {
  width: 16px; height: 1.5px;
  background: rgba(34,43,69,0.15);
  transition: background 240ms ease;
}
.cb-wizard-dot-connector.cb-wizard-dot-connector-done { background: #5CB7A5; }
html.dark .cb-wizard-dot { background: rgba(232,244,240,0.18); }
html.dark .cb-wizard-dot-connector { background: rgba(232,244,240,0.18); }
html.dark .cb-wizard-dot.cb-wizard-dot-active,
html.dark .cb-wizard-dot.cb-wizard-dot-done { background: #5CB7A5; }
html.dark .cb-wizard-dot-connector.cb-wizard-dot-connector-done { background: #5CB7A5; }

/* Start-over escape hatch — quiet utility button next to the theme toggle. */
.cb-wizard-startover {
  font-size: 12px;
  color: #6D7890;
  background: transparent;
  border: 0;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.cb-wizard-startover:hover { color: #194E43; background: rgba(92,183,165,0.08); }
html.dark .cb-wizard-startover { color: #9FB5AF; }
html.dark .cb-wizard-startover:hover { color: #5CB7A5; background: rgba(92,183,165,0.10); }

/* Persistent summary card at the bottom of every step. Replaces the
   old right-rail summary card from the 3-panel layout. */
.cb-wizard-summary {
  margin-top: 24px;
  padding: 14px 20px;
  background: rgba(92,183,165,0.06);
  border: 1px solid rgba(92,183,165,0.18);
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 13px;
}
.cb-wizard-summary-item {
  display: inline-flex; align-items: center; gap: 6px;
  color: #4A4F5D;
}
.cb-wizard-summary-item strong { color: #194E43; font-weight: 600; }
html.dark .cb-wizard-summary { background: rgba(92,183,165,0.08); border-color: rgba(92,183,165,0.22); }
html.dark .cb-wizard-summary-item { color: #C8DCD8; }
html.dark .cb-wizard-summary-item strong { color: #E8F4F0; }

/* Collapsed icon-only sidebar rail. 64px wide, expands to 256px on
   hover / explicit toggle. Preserves brand presence while freeing the
   viewport for the wizard step.

   Centering the 18px nav icons + 40px logo icon inside a 64px rail
   requires zeroing the existing 16-24px L/R section paddings — those
   were sized for the 256px expanded rail and would push content off
   the left edge. We collapse to 0 L/R on the section and re-restore
   the original paddings on hover. The wordmark stack uses
   `display: none` (not just opacity:0) because invisible-but-laid-out
   labels would still consume horizontal space and push the icon off
   center. */
.cb-sidebar.cb-sidebar-collapsed {
  width: 64px;
  transition: width 220ms cubic-bezier(0.2,0.9,0.3,1);
}
.cb-sidebar.cb-sidebar-collapsed:hover,
.cb-sidebar.cb-sidebar-collapsed.cb-sidebar-expanded {
  width: 256px;
}

/* Section padding — zero out L/R when collapsed so the 64px rail
   centers content properly. Restore on hover. Keep vertical padding. */
.cb-sidebar.cb-sidebar-collapsed .cb-sidebar-section.cb-sidebar-logo  { padding: 22px 0 18px; }
.cb-sidebar.cb-sidebar-collapsed .cb-sidebar-section.cb-sidebar-nav   { padding: 18px 8px 18px; }
.cb-sidebar.cb-sidebar-collapsed .cb-sidebar-section.cb-sidebar-foot  { padding: 14px 0 16px; }
.cb-sidebar.cb-sidebar-collapsed:hover .cb-sidebar-section.cb-sidebar-logo  { padding: 22px 24px 18px; }
.cb-sidebar.cb-sidebar-collapsed:hover .cb-sidebar-section.cb-sidebar-nav   { padding: 18px 16px 18px; }
.cb-sidebar.cb-sidebar-collapsed:hover .cb-sidebar-section.cb-sidebar-foot  { padding: 14px 16px 16px; }

/* Logo block — center the student-icon SVG in the rail, hide the
   wordmark stack entirely (display:none, not opacity, to avoid the
   stack's natural width pushing the icon left). */
.cb-sidebar.cb-sidebar-collapsed .cb-sidebar-logo > a {
  justify-content: center;
  gap: 0;
}
.cb-sidebar.cb-sidebar-collapsed .cb-sidebar-logo > a > div {
  display: none;
}
.cb-sidebar.cb-sidebar-collapsed:hover .cb-sidebar-logo > a {
  justify-content: flex-start;
  gap: 0.5rem;
}
.cb-sidebar.cb-sidebar-collapsed:hover .cb-sidebar-logo > a > div {
  display: flex;
}

/* Nav links — center the SVG by zeroing the link's L/R padding and
   forcing the SVG to fill the now-symmetric content area. */
.cb-sidebar.cb-sidebar-collapsed .cb-sidebar-link {
  justify-content: center;
  padding: 10px 0;
  gap: 0;
}
.cb-sidebar.cb-sidebar-collapsed:hover .cb-sidebar-link {
  justify-content: flex-start;
  padding: 10px 14px;
  gap: 12px;
}

/* Labels / eyebrows / foot detail — hidden when collapsed, restored
   on hover. Opacity is fine here because these elements aren't
   needed for icon-centering math. */
.cb-sidebar.cb-sidebar-collapsed .cb-sidebar-link-label,
.cb-sidebar.cb-sidebar-collapsed .cb-sidebar-eyebrow,
.cb-sidebar.cb-sidebar-collapsed .cb-sidebar-foot-detail {
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
  /* Prevent the labels from forcing the link wider than 64px even
     while transparent — height/width 0 collapses them to nothing. */
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.cb-sidebar.cb-sidebar-collapsed:hover .cb-sidebar-link-label,
.cb-sidebar.cb-sidebar-collapsed:hover .cb-sidebar-eyebrow,
.cb-sidebar.cb-sidebar-collapsed:hover .cb-sidebar-foot-detail {
  opacity: 1;
  max-width: 100%;
  transition: opacity 160ms ease 80ms, max-width 0ms 0ms;
}

@media (min-width: 1024px) {
  body.cb-sidebar-collapsed-host .lg\:ml-64 { margin-left: 64px; transition: margin-left 220ms cubic-bezier(0.2,0.9,0.3,1); }
}

/* Continue / next button spacing on Step 2/3 (small variant, not the
   big cb-cta-lg used for Generate). */
.cb-wizard-nav {
  margin-top: 24px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* ============================================================
   Step 1 map (Phase 3) — Leaflet-backed US map with 807 school
   dots. Visual recipe inherited from partner.calendarbro.com's
   #sam-map widget: CARTO Positron tiles + a teal-paper CSS filter
   on .leaflet-tile-pane (saves us from custom tiles or an API key).
   Dot rendering, click choreography, and search sync live here.
   ============================================================ */

/* School selector wrap — make the dropdown absolute so it overlays
   the map instead of pushing it down. z-index has to clear Leaflet's
   marker pane (600) + popup pane (700), or the dropdown gets visually
   cropped where it overlaps the map below. We sit at 1000.

   Also: hide schoolSelector's built-in hint paragraph ("Only schools
   we've finished scraping…") here — step 1's chrome was simplified
   to just the input + map per the design pass. The hint's CTA is
   preserved on the empty-result dropdown state inside the selector. */
.cb-school-selector-wrap [data-cb="search-view"] { position: relative; z-index: 1000; }
.cb-school-selector-wrap [data-cb="dropdown"] {
  position: absolute;
  left: 0; right: 0;
  z-index: 1001;
  /* Visual lift so the overlay reads as a popover, not a flow element. */
  box-shadow: 0 12px 32px rgba(13, 46, 39, 0.10);
}
.cb-school-selector-wrap [data-cb="hint"] { display: none; }
html.dark .cb-school-selector-wrap [data-cb="dropdown"] {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.40);
}

/* Step-1 card — let the map breathe; the card's default 32px padding
   pushes the map slightly inboard, which is fine on desktop. On mobile
   we already drop to 24px via the existing @media (max-width: 639px)
   override on .card. No further tweak needed. */

/* Map container — 440px / 380px / 320px responsive heights per spec. */
.cb-school-map {
  position: relative;
  width: 100%;
  height: 440px;
  border-radius: 16px;
  overflow: hidden;
  background: #EEF6F2;
  border: 1px solid rgba(92, 183, 165, 0.18);
}
@media (max-width: 1023px) { .cb-school-map { height: 380px; } }
@media (max-width: 639px)  { .cb-school-map { height: 320px; } }
html.dark .cb-school-map {
  background: #122821;
  border-color: rgba(92, 183, 165, 0.22);
}

/* Loading state — overlays the map until tiles + dots are ready. */
.cb-school-map-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(238, 246, 242, 0.92);
  color: #4A4F5D;
  font-size: 13px;
  font-weight: 500;
  z-index: 500;
  pointer-events: none;
  transition: opacity 220ms ease;
}
.cb-school-map.cb-school-map-ready .cb-school-map-loading { opacity: 0; }
.cb-school-map-spinner {
  width: 18px; height: 18px;
  border-radius: 9999px;
  border: 2px solid rgba(92, 183, 165, 0.25);
  border-top-color: #5CB7A5;
  animation: cb-school-map-spin 0.7s linear infinite;
}
@keyframes cb-school-map-spin { to { transform: rotate(360deg); } }
html.dark .cb-school-map-loading {
  background: rgba(18, 40, 33, 0.92);
  color: #C8DCD8;
}

/* Tile-pane filter — soft teal-paper. Inherited from partner-portal
   #sam-map. The recipe is: greyscale to neutralize OSM color, sepia
   for warmth, hue-rotate to teal, saturate down for restraint. */
.cb-school-map .leaflet-tile-pane {
  filter: grayscale(1) brightness(1.05) contrast(0.92) sepia(0.18) hue-rotate(118deg) saturate(0.55);
}
/* Dark mode — keep the light basemap (preserves tile cache + brand),
   drop a scrim above it. Scrim sits on .leaflet-pane (top of stack)
   via the ::after pseudo. */
html.dark .cb-school-map .leaflet-tile-pane {
  filter: grayscale(1) brightness(0.85) contrast(0.92) sepia(0.18) hue-rotate(118deg) saturate(0.45);
}
html.dark .cb-school-map::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(13, 27, 26, 0.35);
  pointer-events: none;
  z-index: 410;  /* above tile pane (200), below markers (600) */
}
/* Hide leaflet attribution to keep the visual clean. The CARTO + OSM
   credits live in the page footer instead (added in Phase 4 polish). */
.cb-school-map .leaflet-control-attribution {
  background: rgba(255, 255, 255, 0.7);
  font-size: 9px;
  padding: 0 4px;
}
html.dark .cb-school-map .leaflet-control-attribution {
  background: rgba(13, 27, 26, 0.6);
  color: #9FB5AF;
}
.cb-school-map .leaflet-control-attribution a { color: #194E43; }
html.dark .cb-school-map .leaflet-control-attribution a { color: #5CB7A5; }

/* Zoom control — restyle to the brand. */
.cb-school-map .leaflet-control-zoom a {
  background: white;
  color: #194E43;
  border: 1px solid rgba(92, 183, 165, 0.20);
  font-size: 16px;
  width: 28px; height: 28px; line-height: 26px;
}
.cb-school-map .leaflet-control-zoom a:hover { background: rgba(92, 183, 165, 0.10); }
html.dark .cb-school-map .leaflet-control-zoom a {
  background: #152823;
  color: #5CB7A5;
  border-color: rgba(92, 183, 165, 0.22);
}
html.dark .cb-school-map .leaflet-control-zoom a:hover { background: rgba(92, 183, 165, 0.16); }

/* School dot — SVG <circle> driven by inline fill/stroke from
   coverage.json (primaryColor/accentColor). The .cb-school-dot
   wrapper handles scale + ring-pulse on click. */
.cb-school-dot {
  background: none !important;  /* override Leaflet's default divIcon bg */
  border: none !important;
  transition: transform 240ms cubic-bezier(0.2, 0.9, 0.3, 1);
  cursor: pointer;
}
.cb-school-dot svg { display: block; overflow: visible; }
.cb-school-dot:hover { transform: scale(1.18); z-index: 700; }

/* Click choreography: scale 1 → 1.35 (180ms) → settle 1.15 (120ms)
   + concentric ring-pulse 0 → 14px (600ms). z-index lifts the
   picked dot above its neighbors for the duration of the burst. */
@keyframes cb-school-dot-pick {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.35); }
  100% { transform: scale(1.15); }
}
@keyframes cb-school-dot-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(92, 183, 165, 0.55); }
  100% { box-shadow: 0 0 0 14px rgba(92, 183, 165, 0); }
}
.cb-school-dot.cb-school-dot-picked {
  animation: cb-school-dot-pick 300ms cubic-bezier(0.2, 0.9, 0.3, 1) both;
  z-index: 800;
}
.cb-school-dot.cb-school-dot-picked > svg circle {
  animation: cb-school-dot-pulse 600ms ease-out;
  border-radius: 9999px;
}

/* Search-sync states — when the user types, non-matching dots fade
   to 25% so the match set pops. Matching dots get a subtle pulse. */
.cb-school-dot.cb-school-dot-faded {
  opacity: 0.22;
  transition: opacity 220ms ease;
}
.cb-school-dot.cb-school-dot-matched {
  animation: cb-school-dot-match-pulse 1.4s ease-in-out infinite;
  z-index: 600;
}
@keyframes cb-school-dot-match-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.20); }
}
@media (prefers-reduced-motion: reduce) {
  .cb-school-dot.cb-school-dot-picked,
  .cb-school-dot.cb-school-dot-matched { animation: none; }
}

/* Hover tooltip — Leaflet's default `.leaflet-tooltip` is too utility-
   looking. Replace with a softer card matching the wizard chrome. */
.cb-school-map .leaflet-tooltip.cb-school-tip {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(92, 183, 165, 0.20);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(13, 46, 39, 0.12);
  padding: 8px 12px;
  color: #222B45;
  font-size: 12px;
  line-height: 1.35;
  white-space: nowrap;
}
.cb-school-map .leaflet-tooltip.cb-school-tip::before { display: none; }  /* hide leaflet arrow */
.cb-school-tip-name {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 13px;
  color: #194E43;
  margin-bottom: 2px;
}
.cb-school-tip-loc { color: #6D7890; font-size: 11px; }
.cb-school-tip-count { color: #4A4F5D; font-size: 11px; margin-top: 2px; }
html.dark .cb-school-map .leaflet-tooltip.cb-school-tip {
  background: rgba(21, 40, 35, 0.96);
  border-color: rgba(92, 183, 165, 0.22);
  color: #E8F4F0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.40);
}
html.dark .cb-school-tip-name { color: #5CB7A5; }
html.dark .cb-school-tip-loc { color: #9FB5AF; }
html.dark .cb-school-tip-count { color: #C8DCD8; }

/* Marker cluster — restyle to brand colors. */
.cb-school-map .marker-cluster-small,
.cb-school-map .marker-cluster-medium,
.cb-school-map .marker-cluster-large {
  background: rgba(92, 183, 165, 0.20);
}
.cb-school-map .marker-cluster-small div,
.cb-school-map .marker-cluster-medium div,
.cb-school-map .marker-cluster-large div {
  background: #5CB7A5;
  color: white;
  font-weight: 600;
  font-family: 'Lexend Deca', sans-serif;
}
html.dark .cb-school-map .marker-cluster-small,
html.dark .cb-school-map .marker-cluster-medium,
html.dark .cb-school-map .marker-cluster-large {
  background: rgba(92, 183, 165, 0.16);
}

/* ============================================================
   PULSE — data-dense terminal-screener layout for the schedule
   optimizer's Step 1. Two columns (map left, result feed right),
   compact 64px header, glass chrome, atmospheric mesh.

   Light mode is default; dark mode adds the gradient mesh +
   pastel hero gradient + chromatic accents (teal + purple).
   ============================================================ */

/* Compact 64px header — height = 12px + 40px icon + 12px. Mirrors
   the sidebar logo section's shrunk padding (below) so the two
   top corners align as one continuous hairline bar. No border. */
.cb-header.cb-header-pulse {
  height: 64px;
  border-bottom: 0;
}
.cb-header.cb-header-pulse > div {
  height: 100%;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  align-items: center;
}
/* Sidebar logo section shrunk from 80px (22/40/18) to 64px (12/40/12). */
body.cb-pulse .cb-sidebar-section.cb-sidebar-logo { padding: 12px 24px; }
body.cb-pulse .cb-sidebar.cb-sidebar-collapsed .cb-sidebar-section.cb-sidebar-logo { padding: 12px 0; }

/* Header H1 stack — small mono eyebrow + Lexend product title.
   The eyebrow ("CHARLES") is the quiet personalization; the
   title ("Schedule optimizer") is the load-bearing product name. */
.pulse-h1-stack {
  display: flex;
  flex-direction: column;
  gap: 3px;
  line-height: 1;
}
.pulse-h1-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #194E43;
}
.pulse-h1-title {
  font-family: 'Lexend Deca', sans-serif;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: #194E43;
  line-height: 1.2;
}
html.dark .pulse-h1-eyebrow { color: #5CB7A5; }
html.dark .pulse-h1-title { color: #E8F4F0; }

/* ----- Atmospheric body mesh (dark mode only) -----
   Three radial blobs (teal upper-left, purple upper-right, teal
   lower-center) fixed to the viewport behind body content. The
   teal grid pattern from the existing dark-mode body styling is
   removed; the mesh provides the texture instead. */
html.dark body.cb-pulse {
  position: relative;
  min-height: 100vh;
  background:
    linear-gradient(rgba(92,183,165,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(92,183,165,0.022) 1px, transparent 1px),
    linear-gradient(180deg, #0D1B1A 0%, #152823 100%);
  background-size: 32px 32px, 32px 32px, auto;
}
html.dark body.cb-pulse::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(circle at 14% 16%, rgba(92,183,165,0.55), transparent 50%),
    radial-gradient(circle at 86% 24%, rgba(138,56,245,0.42), transparent 48%),
    radial-gradient(circle at 50% 96%, rgba(92,183,165,0.28), transparent 55%);
}

/* ----- Glass chrome (sidebar + header) in dark mode -----
   Both surfaces drop to rgba(13,27,26,0.50) with a 14px backdrop
   blur so the body mesh flows through. Borders removed so the
   L-corner reads as one continuous glass sheet. */
html.dark body.cb-pulse .cb-sidebar {
  background: rgba(13, 27, 26, 0.50);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  border-right: 0;
}
html.dark body.cb-pulse .cb-header.cb-header-pulse {
  background: rgba(13, 27, 26, 0.50);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
}
html.dark body.cb-pulse .cb-sidebar-link.active {
  background: rgba(138, 56, 245, 0.18);
}

/* ----- Wizard connector gradient (dark mode, "done" segments) -----
   Echoes the landing page's step-connector recipe. Idle connectors
   keep their existing flat-muted style. */
html.dark .cb-wizard-dot-connector.cb-wizard-dot-connector-done {
  background: linear-gradient(90deg, #5CB7A5 0%, #B9EDDC 50%, #DCC4F8 100%);
}

/* ----- Pulse Step 1 layout -----
   Two-column grid (map left, result feed right) under a single
   search bar. Stacks below 1024px. */
.pulse-shell {
  max-width: 1440px;
  margin: 0 auto;
  padding: 28px 24px 56px;
}
.pulse-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr);
  gap: 20px;
  margin-top: 18px;
}
@media (max-width: 1023px) {
  .pulse-grid { grid-template-columns: 1fr; }
}

/* Search bar — slim refined Bloomberg-style. Hosts the school
   selector input via #school-selector-host. */
.pulse-search-bar {
  position: relative;
  display: flex;
  align-items: stretch;
  background: white;
  border: 1px solid rgba(34, 43, 69, 0.10);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 180ms ease, box-shadow 220ms ease;
}
.pulse-search-bar:focus-within {
  border-color: rgba(92,183,165,0.65);
  box-shadow: 0 0 0 4px rgba(92,183,165,0.12);
}
html.dark .pulse-search-bar {
  background: #152823;
  border-color: rgba(92,183,165,0.22);
}
html.dark .pulse-search-bar:focus-within {
  border-color: rgba(92,183,165,0.55);
  box-shadow: 0 0 0 4px rgba(92,183,165,0.10);
}
.pulse-live-pill {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 8px 10px 8px 0;
  padding: 6px 12px 6px 10px;
  background: rgba(92,183,165,0.10);
  border: 1px solid rgba(92,183,165,0.22);
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: #194E43;
  text-transform: uppercase;
  align-self: center;
}
.pulse-live-pill::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #5CB7A5;
  animation: pulse-pill 1.6s ease-out infinite;
}
@keyframes pulse-pill {
  0%   { box-shadow: 0 0 0 0 rgba(92,183,165,0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(92,183,165,0); }
  100% { box-shadow: 0 0 0 0 rgba(92,183,165,0); }
}
html.dark .pulse-live-pill {
  color: #5CB7A5;
  background: linear-gradient(90deg, rgba(92,183,165,0.10) 0%, rgba(190,158,232,0.12) 100%);
  border-color: rgba(190,158,232,0.22);
}

/* Map wrap — frames the Leaflet map with an eyebrow + KPI strip overlay. */
.pulse-map-wrap {
  position: relative;
  background: white;
  border: 1px solid rgba(34,43,69,0.08);
  border-radius: 16px;
  overflow: hidden;
}
html.dark .pulse-map-wrap {
  background: #152823;
  border-color: rgba(92,183,165,0.18);
}
.pulse-map-eyebrow {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(34,43,69,0.06);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #6D7890;
}
html.dark .pulse-map-eyebrow {
  border-bottom-color: rgba(92,183,165,0.10);
  color: #9FB5AF;
}
.pulse-map-eyebrow .pulse-map-eyebrow-right {
  display: inline-flex; align-items: center; gap: 14px;
}
.pulse-map-eyebrow .pulse-tick {
  display: inline-flex; align-items: center; gap: 6px;
  color: #194E43;
}
html.dark .pulse-map-eyebrow .pulse-tick { color: #5CB7A5; }
.pulse-map-eyebrow .pulse-tick::before {
  content: ''; width: 4px; height: 4px; border-radius: 50%;
  background: #5CB7A5;
}

/* The map itself — uses the existing .cb-school-map filter recipe. */
.pulse-school-map {
  position: relative;
  width: 100%;
  height: 520px;
  background: #EEF6F2;
}
@media (max-width: 1023px) { .pulse-school-map { height: 420px; } }
html.dark .pulse-school-map { background: #122821; }

/* KPI strip overlaying bottom of the map. */
.pulse-kpi-strip {
  position: absolute;
  left: 12px; right: 12px; bottom: 12px;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 10px 16px;
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(25,78,67,0.14);
  border-radius: 10px;
  z-index: 500;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #4A4F5D;
  letter-spacing: 0.02em;
}
html.dark .pulse-kpi-strip {
  background: rgba(13,27,26,0.78);
  border-color: rgba(92,183,165,0.20);
  color: #C8DCD8;
}
.pulse-kpi {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 0 14px;
  border-right: 1px solid rgba(25,78,67,0.10);
}
html.dark .pulse-kpi { border-right-color: rgba(92,183,165,0.16); }
.pulse-kpi:first-child { padding-left: 0; }
.pulse-kpi:last-child { border-right: 0; padding-right: 0; }
.pulse-kpi-num {
  color: #194E43;
  font-weight: 600;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
html.dark .pulse-kpi-num { color: #E8F4F0; }
.pulse-kpi-num.accent { color: #5CB7A5; }
.pulse-kpi-label {
  color: #6D7890;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
html.dark .pulse-kpi-label { color: #9FB5AF; }
html.dark .pulse-kpi-num.accent {
  background: linear-gradient(135deg, #5CB7A5 0%, #BE9EE8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Feed (right column) — section headers + cards. */
.pulse-feed {
  background: white;
  border: 1px solid rgba(34,43,69,0.08);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  min-height: 520px;
}
html.dark .pulse-feed {
  background: #152823;
  border-color: rgba(92,183,165,0.18);
}
.pulse-section-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 6px 12px;
  border-bottom: 1px solid rgba(34,43,69,0.06);
  margin-bottom: 12px;
}
html.dark .pulse-section-header { border-bottom-color: rgba(92,183,165,0.10); }
.pulse-section-title {
  font-family: 'Lexend Deca', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #6D7890;
}
html.dark .pulse-section-title { color: #9FB5AF; }
.pulse-section-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: #9CA3AF;
  letter-spacing: 0.08em;
}
html.dark .pulse-section-meta { color: #7E9690; }

/* School cards with brand color band + Fraunces-or-Lexend name. */
.pulse-card {
  position: relative;
  display: grid;
  grid-template-columns: 6px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 14px 14px 0;
  background: transparent;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 180ms cubic-bezier(0.2,0.9,0.3,1),
              background-color 180ms ease,
              box-shadow 220ms ease;
  margin-bottom: 8px;
}
.pulse-card:hover {
  transform: translateY(-2px);
  background: rgba(92,183,165,0.06);
  box-shadow: 0 8px 24px rgba(13,46,39,0.10);
}
html.dark .pulse-card:hover {
  background: rgba(92,183,165,0.05);
  box-shadow:
    0 8px 24px rgba(92,183,165,0.16),
    0 6px 20px rgba(138,56,245,0.08);
}
.pulse-card-band {
  width: 6px;
  align-self: stretch;
  border-radius: 4px;
  background: var(--band, #5CB7A5);
  box-shadow: 0 0 12px var(--band-glow, rgba(92,183,165,0.35));
}
.pulse-card-body { min-width: 0; }
.pulse-card-name {
  font-family: 'Lexend Deca', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  color: #222B45;
  letter-spacing: -0.005em;
}
html.dark .pulse-card-name { color: #E8F4F0; }
.pulse-card-loc {
  font-size: 12px;
  color: #6D7890;
  margin-top: 2px;
}
html.dark .pulse-card-loc { color: #9FB5AF; }
.pulse-card-stat {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #9CA3AF;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
html.dark .pulse-card-stat { color: #7E9690; }
.pulse-card-tail {
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
  padding-right: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: #6D7890;
}
html.dark .pulse-card-tail { color: #9FB5AF; }
.pulse-card-distance {
  letter-spacing: 0.04em;
  color: #4A4F5D;
  font-weight: 600;
}
html.dark .pulse-card-distance { color: #C8DCD8; }
.pulse-card-tag {
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(92,183,165,0.14);
  color: #194E43;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 9px;
  font-weight: 600;
  border: 1px solid transparent;
}
html.dark .pulse-card-tag {
  background: linear-gradient(135deg, rgba(92,183,165,0.18) 0%, rgba(190,158,232,0.18) 100%);
  border-color: rgba(190,158,232,0.18);
  color: #B9EDDC;
}

/* Linked card — visually paired with a pulsing map dot. */
.pulse-card.is-linked {
  background: rgba(92,183,165,0.08);
  box-shadow: inset 0 0 0 1px rgba(92,183,165,0.30);
}
html.dark .pulse-card.is-linked {
  background: linear-gradient(135deg, rgba(92,183,165,0.10) 0%, rgba(138,56,245,0.06) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(92,183,165,0.22),
    0 8px 32px -8px rgba(138,56,245,0.18);
}
.pulse-card.is-linked .pulse-card-name { color: #194E43; }
html.dark .pulse-card.is-linked .pulse-card-name { color: #5CB7A5; }
.pulse-link-dot {
  position: absolute;
  top: 14px; right: 14px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #5CB7A5;
  box-shadow: 0 0 0 0 rgba(92,183,165,0.7);
  animation: pulse-link-dot 1.6s ease-out infinite;
}
@keyframes pulse-link-dot {
  0%   { box-shadow: 0 0 0 0 rgba(92,183,165,0.7); }
  70%  { box-shadow: 0 0 0 10px rgba(92,183,165,0); }
  100% { box-shadow: 0 0 0 0 rgba(92,183,165,0); }
}

/* Pulsing map dot to sync with the linked card. */
.cb-school-dot.pulse-dot-linked {
  animation: pulse-dot-linked 1.6s ease-in-out infinite;
  z-index: 800 !important;
}
@keyframes pulse-dot-linked {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(92,183,165,0)); }
  50%      { transform: scale(1.45); filter: drop-shadow(0 0 6px rgba(92,183,165,0.85)); }
}

/* Trending — condensed row treatment under the main NEAR YOU cards. */
.pulse-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(25,78,67,0.16), transparent);
  margin: 18px 4px 14px;
}
html.dark .pulse-divider {
  background: linear-gradient(90deg, transparent, rgba(92,183,165,0.16), transparent);
}
.pulse-condensed {
  display: grid;
  grid-template-columns: 4px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 8px 10px 0;
  border-radius: 8px;
  cursor: pointer;
  transition: background 160ms ease, transform 160ms ease;
}
.pulse-condensed:hover {
  background: rgba(92,183,165,0.06);
  transform: translateX(2px);
}
.pulse-condensed-band {
  width: 4px; align-self: stretch; border-radius: 3px;
  background: var(--band, #5CB7A5);
}
.pulse-condensed-name {
  font-family: 'Lexend Deca', sans-serif;
  font-weight: 600;
  font-size: 13.5px;
  color: #222B45;
}
html.dark .pulse-condensed-name { color: #E8F4F0; }
.pulse-condensed-loc {
  font-size: 11px;
  color: #6D7890;
  margin-top: 1px;
}
html.dark .pulse-condensed-loc { color: #9FB5AF; }
.pulse-condensed-ts {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: #194E43;
  letter-spacing: 0.06em;
}
html.dark .pulse-condensed-ts { color: #5CB7A5; }

/* Scanline at top of viewport — reads "live data" without sound. */
.pulse-scanline {
  position: fixed;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%, rgba(92,183,165,0.0) 18%,
    rgba(92,183,165,0.40) 50%,
    rgba(92,183,165,0.0) 82%, transparent 100%);
  z-index: 100;
  pointer-events: none;
}
html.dark .pulse-scanline {
  background: linear-gradient(90deg,
    transparent 0%, rgba(92,183,165,0.0) 18%,
    rgba(92,183,165,0.55) 50%,
    rgba(92,183,165,0.0) 82%, transparent 100%);
}

/* Sidebar foot — stacked layout so email + sign-out don't crowd. */
.pulse-foot-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}
.pulse-foot-email {
  display: block;
  width: 100%;
  font-size: 12.5px;
  font-weight: 600;
  color: #194E43;
  letter-spacing: 0.005em;
  overflow-wrap: anywhere;
  line-height: 1.3;
}
html.dark .pulse-foot-email { color: #C8DCD8; }
.pulse-foot-signout {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 8px;
  background: rgba(220,38,38,0.06);
  border: 1px solid rgba(220,38,38,0.20);
  color: #B91C1C;
  font-family: 'Lexend Deca', sans-serif;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.pulse-foot-signout:hover {
  background: rgba(220,38,38,0.12);
  border-color: rgba(220,38,38,0.40);
  color: #991B1B;
}
html.dark .pulse-foot-signout {
  background: rgba(220,38,38,0.08);
  border-color: rgba(220,38,38,0.18);
  color: #F5B5B5;
}
html.dark .pulse-foot-signout:hover {
  background: rgba(220,38,38,0.16);
  border-color: rgba(220,38,38,0.36);
  color: #FFB4B4;
}
.pulse-foot-signout svg { flex-shrink: 0; }

/* When the collapsed sidebar expands on hover, push the main column
   to the new width so the expanded panel doesn't overlap content. */
@media (min-width: 1024px) {
  body.cb-pulse .cb-sidebar.cb-sidebar-collapsed:hover ~ .lg\:ml-64,
  body.cb-pulse .cb-sidebar.cb-sidebar-collapsed.cb-sidebar-expanded ~ .lg\:ml-64 {
    margin-left: 256px;
  }
}

/* When schoolSelector is mounted inside a .pulse-search-bar, strip its
   own input border + radius + bg so it inherits the bar's chrome rather
   than stacking two borders. Same for the selected-view (after pick). */
.pulse-search-bar #cb-school-input {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 14px 16px;
}
.pulse-search-bar #cb-school-input:focus {
  box-shadow: none !important;
  border: 0 !important;
  outline: 0 !important;
}
.pulse-search-bar [data-cb="search-view"] > div {
  width: 100%;
}
.pulse-search-bar [data-cb="selected-view"] > div {
  border: 0;
  background: transparent;
  padding: 12px 16px;
  border-radius: 0;
}
/* Dark-mode input bg from the global html.dark input rule needs to be
   transparent too so the bar's translucent surface comes through. */
html.dark .pulse-search-bar #cb-school-input {
  background: transparent !important;
}