@charset "UTF-8";

/* Shared visual layer for the six v2 entrances. Keep existing layout, state,
   visibility, media and role selectors in their original stylesheets. */
:root,
body,
body.studio-body {
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --serif: var(--sans);
  --radius: 22px;
  --shadow: 0 10px 32px rgba(29, 52, 44, .06);
}

body {
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

/* Older home rules name Georgia directly. All headings and date numerals now
   use the same sans-serif stack as the rest of the interface. */
body :is(h1, h2, h3, h4, .brand-mark, .brand-copy strong, .avatar,
  .profile-avatar, .course-art, .course-art b, .course-art strong,
  .date-rail span, .date-rail b, .metric b, .booking-item-course,
  .directory-art, .teacher-seal span, .story-points b) {
  font-family: var(--sans) !important;
}

body :is(h1, h2, h3, h4) {
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.45;
}

.eyebrow { font-weight: 600; letter-spacing: .12em; }
.brand-copy strong { font-weight: 600; letter-spacing: -.025em; }
.brand-copy small { letter-spacing: .1em; }
.brand-mark { font-weight: 500; }

body :is(.primary, .primary-button, .secondary, .outline-button, .nav-pill,
  .filter-chip, .detail-favorite, .directory-more) {
  border-radius: 999px;
  font-weight: 600;
}

body :is(.primary, .primary-button, .nav-pill):hover {
  transform: none;
}

body :is(button, a, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--moss, #71927a);
  outline-offset: 3px;
}

body :is(input, select, textarea) {
  font-family: var(--sans);
  border-radius: 12px;
}

body :is(.modal-panel, dialog, .access-card) {
  border-radius: 24px;
  box-shadow: 0 18px 54px rgba(18, 39, 31, .12);
}

body :is(.modal-panel h2, dialog h2) {
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -.025em;
}

body :is(.course-card, .directory-row, .teacher-card, .teacher-profile-card,
  .booking-card, .favorite-card, .notice-card, .booking-group, .preview-card) {
  border-radius: 18px;
}

.course-card { box-shadow: 0 4px 18px rgba(29, 52, 44, .035); }
.course-card:hover { transform: none; box-shadow: var(--shadow); }
.course-card .course-art { background-image: none; background-color: #72917a; }
.course-card:nth-child(3n+2) .course-art { background-image: none; background-color: #bd9968; }
.course-card:nth-child(3n+3) .course-art { background-image: none; background-color: #829da0; }
.course-art::before { display: none; }
.directory-row .directory-copy h3 { font-weight: 600; letter-spacing: -.015em; }
.directory-art { border-radius: 13px; }
.course-body h3 { font-weight: 600; letter-spacing: -.015em; }
.filter-chip { border: 1px solid var(--line); }
.date-chip { border-radius: 15px; }
.date-chip b { font-weight: 500; letter-spacing: -.025em; }
.floating-card { background: var(--cream); border-color: var(--line); border-radius: 18px; box-shadow: var(--shadow); }
.floating-card strong { font-weight: 600; }

/* Pure-color surfaces replace decorative gradients and landscape backdrops.
   Uploaded course and teacher images keep their existing rendering. */
.hero::before, .ink-card::before, .ink-card::after { display: none; }
.ink-card { border-radius: 26px; box-shadow: none; }
.ink-card strong { font-weight: 500; letter-spacing: -.025em; }
.hero h1 { font-size: clamp(42px, 5vw, 64px); font-weight: 500; letter-spacing: -.04em; }
.hero h1 em { font-style: normal; }
.section-heading h2 { font-size: clamp(26px, 2.5vw, 34px); font-weight: 600; letter-spacing: -.025em; }
.teacher-seal { border-radius: 50%; box-shadow: none; }
.profile-hero h1 { font-size: clamp(32px, 4vw, 48px); font-weight: 600; letter-spacing: -.025em; }
.account-heading h1 { font-size: clamp(30px, 4vw, 44px); font-weight: 600; letter-spacing: -.025em; }
.teacher-story h2 { font-weight: 600; letter-spacing: -.025em; }
.profile-portrait { background: #215443; border-radius: 50%; }
.preview-art { background: var(--moss); }
.gallery-placeholder { background: #557c69; }
.profile-page .panel, .account-page .panel { border-radius: 20px; }

/* The independent mobile entrance retains its approved cream/green palette. */
.mobile-body .home-hero { background: none; }
.mobile-body .home-hero::before { display: none; }
.mobile-body .brand { font-weight: 600; letter-spacing: -.04em; }
.mobile-body .home-hero-card {
  background: #415c4b;
  border-radius: 22px;
  color: #f7f4eb;
}
.mobile-body .home-hero-card::before,
.mobile-body .home-hero-card::after { display: none; }
.mobile-body .home-hero-card h1 {
  font-size: 27px;
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1.45;
}
.mobile-body .home-hero-card a { font-weight: 500; }
.mobile-body .home-hero-card .hero-label { font-weight: 600; letter-spacing: .12em; }
.mobile-body :is(#courses, #upcomingCourses) .section-heading h2,
.mobile-body .section-heading h2 {
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.45;
}
.mobile-body .course-row,
.mobile-body .session-card {
  background: #fff;
  border-color: var(--line);
  border-radius: 18px;
  box-shadow: 0 3px 16px rgba(29, 52, 44, .025);
}
.mobile-body .course-thumb { border-radius: 13px; }
.mobile-body .course-art { background: var(--tile-light, #d7ddd7); }
.mobile-body :is(#courses, #upcomingCourses) .course-copy h3,
.mobile-body .course-copy h3,
.mobile-body .session-card .course-copy h3 {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -.015em;
}
.mobile-body :is(#courses, #upcomingCourses) .course-copy :is(p, small) {
  line-height: 1.65;
}
.mobile-body .row-actions .primary { font-weight: 600; }
.mobile-body .date-rail button { border-radius: 15px; }
.mobile-body #upcomingCourses .date-rail button span { font-weight: 500; }
.mobile-body .bottom-nav { background: var(--paper); box-shadow: none; }
.mobile-body .bottom-nav svg { fill: none; stroke-width: 1.6; }
.mobile-body .page-bar strong { font-size: 15px; font-weight: 500; }
.mobile-body .page-content > h1 { font-size: 26px; font-weight: 600; }
.mobile-body .content-section h2 { font-size: 20px; font-weight: 600; }
.mobile-body .account-head h1 { font-size: 28px; font-weight: 600; }
.mobile-body :is(.teacher-card, .booking-card, .favorite-card, .notice-card) {
  background: #fff;
  border-radius: 18px;
}
.mobile-body :is(.teacher-card h3, .booking-card h3, .favorite-card h3) {
  font-size: 17px;
  font-weight: 600;
}
.mobile-body .upcoming-reminder { border-radius: 18px; }
.mobile-body .workbench-entry { border-radius: 14px; font-weight: 500; }
.mobile-body .account-tabs button { border-radius: 999px; font-weight: 500; }
.mobile-body :is(.detail-slot, .details, .info-box) { border-radius: 14px; }
.mobile-body .action-dock .primary { font-weight: 600; }
.mobile-body .action-dock button { white-space: nowrap; }
.mobile-body .toast { border-radius: 999px; }
.mobile-body .modal-panel { border-radius: 24px; }
.mobile-body .profile-head h1 { font-size: 28px; font-weight: 600; }

/* Both staff portals keep their full navigation, responsive drawer, tables,
   editors and permission controls. Only surface and type treatments change. */
.studio-body .studio-sidebar { background: #f9f7f0; }
.studio-body .studio-sidebar .brand-copy strong { font-size: 20px; font-weight: 600; letter-spacing: -.025em; }
.studio-body .studio-nav button { border-radius: 999px; }
.studio-body .studio-nav button.active { background: #e6eddf; }
@supports (mask-image: url("")) or (-webkit-mask-image: url("")) {
  .studio-body .studio-nav i {
    --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5'%3E%3Crect x='3' y='3' width='7' height='7' rx='2'/%3E%3Crect x='14' y='3' width='7' height='7' rx='2'/%3E%3Crect x='3' y='14' width='7' height='7' rx='2'/%3E%3Crect x='14' y='14' width='7' height='7' rx='2'/%3E%3C/svg%3E");
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    border-radius: 0;
    background: currentColor;
    -webkit-mask: var(--nav-icon) center / contain no-repeat;
    mask: var(--nav-icon) center / contain no-repeat;
  }
  .studio-body .studio-nav :is([data-view="courses"], [data-view="center-courses"], [data-view="assignments"]) i {
    --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Crect x='5' y='3' width='14' height='18' rx='2'/%3E%3Cpath d='M9 7h6M9 11h6M9 15h4'/%3E%3C/svg%3E");
  }
  .studio-body .studio-nav :is([data-view="sessions"], [data-view="center-sessions"], [data-view="audit"]) i {
    --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4M8 14h2M14 14h2M8 17h2'/%3E%3C/svg%3E");
  }
  .studio-body .studio-nav :is([data-view="bookings"], [data-view="home-teachers"]) i {
    --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M3 21v-2a6 6 0 0 1 12 0v2M17 5a3 3 0 0 1 0 6M18 15a5 5 0 0 1 3 5'/%3E%3C/svg%3E");
  }
  .studio-body .studio-nav :is([data-view="profile"], [data-view="accounts"]) i {
    --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3Cpath d='M4 22v-2a8 8 0 0 1 16 0v2'/%3E%3C/svg%3E");
  }
}
.studio-body .studio-topbar h1 { font-size: 28px; font-weight: 600; letter-spacing: -.025em; }
.studio-body .welcome-card {
  background: var(--pine);
  border-color: var(--pine);
  border-radius: 23px;
  color: var(--cream);
}
.studio-body .welcome-card::before,
.studio-body .welcome-card::after { display: none; }
.studio-body .welcome-card .eyebrow { color: #d8c9a9 !important; }
.studio-body .welcome-card h2 { font-size: 27px; font-weight: 500; letter-spacing: -.025em; }
.studio-body .welcome-card p { color: var(--cream); opacity: .8; }
.studio-body .welcome-card .primary { background: var(--cream); border-color: var(--cream); color: var(--pine); }
.studio-body .metric { background: #fffcf6; border-radius: 18px; }
.studio-body .metric b { font-size: 30px; font-weight: 500; letter-spacing: -.04em; }
.studio-body .panel { background: #fffcf6; border-radius: 20px; }
.studio-body .panel-heading :is(h2, h3) { font-size: 23px; font-weight: 600; letter-spacing: -.025em; }
.studio-body .data-row { border-radius: 16px; }
.studio-body .data-row strong { font-size: 17px; font-weight: 600; letter-spacing: -.015em; }
.studio-body .booking-item-course { font-size: 17px; font-weight: 600; letter-spacing: -.015em; }
.studio-body :is(.primary, .secondary, .row-actions button,
  .booking-tabs button, .booking-item-actions > button, .booking-filters > button) {
  border-radius: 999px;
}
.studio-body .row-actions button { font-weight: 500; }
.studio-body :is(.editor-form, .form-grid) :is(input, select, textarea) { border-radius: 12px; }
.studio-body :is(.preview-card, .activity-panel, .booking-group) { border-radius: 18px; }
.studio-body .preview-art { background: #e2e8dc; }
.studio-body .modal-panel { border-radius: 24px; }
.studio-body .staff-bottom-nav { background: var(--paper); }

@media (max-width: 760px) {
  .studio-body .studio-topbar h1 { font-size: 25px; }
  .studio-body .welcome-card h2 { font-size: 24px; }
  .studio-body .panel-heading :is(h2, h3) { font-size: 21px; }
  .studio-body .metric b { font-size: 28px; }
  .studio-body .data-row strong { font-size: 16px; }
}

@media (min-width: 500px) {
  .mobile-body .home-hero-card h1 { font-size: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}