/* Task 1200: final site-wide title and primary-surface contract.
   Loaded last so route-specific legacy styles cannot fragment the hierarchy. */
:root {
  --yen-ui-surface: rgba(255, 255, 255, .34);
  --yen-ui-line: rgba(255, 255, 255, .30);
  --yen-ui-shadow: 0 8px 24px rgba(69, 55, 43, .10);
  --yen-ui-filter: blur(14px) saturate(1.02);
  --yen-ui-title: #332c27;
  --yen-ui-copy: #4f453e;
  --yen-ui-accent: #78513e;
}

/* One restrained heading scale across public, auth, learner, profile, and operator. */
.site-main :is(.grounded-page, .auth-page, .profile-page, .course-player-page) h1 {
  color: var(--yen-ui-title) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(1.72rem, 5.8vw, 2.24rem) !important;
  font-weight: 700 !important;
  line-height: 1.14 !important;
  letter-spacing: -.02em !important;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.site-main :is(.grounded-page, .auth-page, .profile-page, .course-player-page) h2 {
  color: var(--yen-ui-title) !important;
  font-size: clamp(1.18rem, 3.9vw, 1.42rem) !important;
  font-weight: 720 !important;
  line-height: 1.24 !important;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.site-main :is(.grounded-page, .auth-page, .profile-page, .course-player-page) h3 {
  color: var(--yen-ui-title) !important;
  font-size: clamp(1rem, 3.3vw, 1.16rem) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  overflow-wrap: anywhere;
}

/* Primary content cards use the stakeholder-approved translucent-white fill.
   Status survives through borders, icons, badges, and text—not colored fills. */
.site-main :is(
  .card,
  .hero-panel,
  .table-wrap,
  .grounded-form-card,
  .grounded-enrollment-card,
  .grounded-course-card,
  .profile-surface,
  .operator-stat-card,
  .operator-traffic-panel,
  .operator-device-card,
  .operator-learning-course-card,
  .operator-enrollment-course-row,
  .auth-card
) {
  background-color: var(--yen-ui-surface) !important;
  border-color: var(--yen-ui-line) !important;
  box-shadow: var(--yen-ui-shadow) !important;
  backdrop-filter: var(--yen-ui-filter) !important;
  -webkit-backdrop-filter: var(--yen-ui-filter) !important;
}

/* Notices are primary cards too; keep meaning with a stronger accent edge. */
.site-main .message {
  color: var(--yen-ui-copy) !important;
  background-color: var(--yen-ui-surface) !important;
  border: 1px solid var(--yen-ui-line) !important;
  border-inline-start: 4px solid var(--yen-ui-accent) !important;
  box-shadow: var(--yen-ui-shadow) !important;
  backdrop-filter: var(--yen-ui-filter) !important;
  -webkit-backdrop-filter: var(--yen-ui-filter) !important;
  overflow-wrap: anywhere;
}

.site-main :is(input, select, textarea, button, .btn, a):focus-visible {
  outline: 3px solid rgba(120, 81, 62, .42) !important;
  outline-offset: 3px !important;
}

.operator-page :is(.operator-filter-form, .operator-learner-table-wrap, .operator-enrollment-list) {
  min-width: 0;
  max-width: 100%;
}

.operator-page :is(.operator-learner-name-primary, .operator-learner-secondary, .operator-enrollment-course-title) {
  color: var(--yen-ui-title) !important;
  overflow-wrap: anywhere;
}

@media (max-width: 640px) {
  .site-main :is(.grounded-page, .auth-page, .profile-page, .course-player-page) h1 {
    font-size: 1.72rem !important;
  }

  .operator-page .section,
  .operator-page .table-wrap,
  .operator-page .operator-enrollment-course-row {
    max-width: 100%;
  }
}