/* Shared product-shell styles for archive redesign (exam/account/auth/course/commerce/legal).
   Loaded with reference.css via DesignStyles. Visual language matches /tasks/ catalog. */

.product-scene {
  --work-ink: #102736;
  --work-muted: #385061;
  --work-surface: #ffffff;
  --work-border: color-mix(in srgb, var(--accent, #3d8bfd) 16%, #d8e4ea);
  min-height: 100svh;
}

.product-page {
  position: relative;
  z-index: 2;
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto;
  padding: 28px 0 72px;
}

.product-page h1,
.product-page h2,
.product-page .page-title,
.product-page .login-title,
.product-page .legal-page > h1 {
  color: var(--work-ink) !important;
  -webkit-text-fill-color: var(--work-ink) !important;
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
}

.product-intro {
  display: grid;
  gap: 10px;
  margin: 8px 0 22px;
  padding: 22px 24px;
  color: #385061;
  border: 1px solid color-mix(in srgb, var(--accent, #3d8bfd) 18%, #d8e5ea);
  border-radius: 24px;
  background: color-mix(in srgb, var(--work-surface) 92%, white);
  box-shadow: 0 8px 22px color-mix(in srgb, #173d50 6%, transparent);
}

.product-intro h1,
.product-kicker {
  margin: 0;
}

.product-kicker {
  color: var(--accent, #3d8bfd);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.product-intro p {
  margin: 0;
  max-width: 62ch;
  line-height: 1.55;
}

.product-panel {
  margin-top: 18px;
  padding: 28px 30px;
  color: var(--work-ink);
  border: 1px solid color-mix(in srgb, var(--accent, #3d8bfd) 16%, #d8e4ea);
  border-radius: 26px;
  background: var(--work-surface);
  box-shadow: 0 14px 34px color-mix(in srgb, #173d50 8%, transparent);
}

.product-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.product-card {
  display: grid;
  gap: 10px;
  padding: 20px 18px;
  border: 1px solid color-mix(in srgb, var(--accent, #3d8bfd) 14%, #d8e4ea);
  border-radius: 20px;
  background: color-mix(in srgb, var(--work-surface) 96%, #f3f7fa);
  box-shadow: 0 8px 20px color-mix(in srgb, #173d50 5%, transparent);
}

.product-card h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
}

.product-card p {
  margin: 0;
  color: #4a5d6b;
  font-size: 14px;
  line-height: 1.5;
}

.product-btn,
.product-page .open-task-btn,
.product-page .login-btn,
.product-page button[type="submit"],
.product-page .exam-actions > button,
.product-page .funnel-offer-card__btn--primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 18px;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(
    90deg,
    var(--accent-hi, #5aa7ff),
    var(--signal, #3d8bfd),
    var(--accent-hi, #5aa7ff)
  );
  font-size: 15px;
  font-weight: 780;
  text-decoration: none;
  cursor: pointer;
}

.product-btn-secondary,
.product-page .back-btn,
.product-page .login-links a,
.product-page a.training-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  color: var(--work-ink) !important;
  -webkit-text-fill-color: var(--work-ink) !important;
  border: 1px solid color-mix(in srgb, var(--accent, #3d8bfd) 22%, #d0dde5);
  border-radius: 14px;
  background: #fff;
  font-weight: 700;
  text-decoration: none;
}

.product-page .back-btn {
  margin-bottom: 14px;
}

.product-page input,
.product-page select,
.product-page textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  color: var(--work-ink);
  border: 1px solid color-mix(in srgb, var(--accent, #3d8bfd) 18%, #d5e1e8);
  border-radius: 14px;
  background: #fff;
  font-size: 16px;
}

.product-page input:focus-visible,
.product-page select:focus-visible,
.product-page textarea:focus-visible,
.product-page button:focus-visible,
.product-page a:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent, #3d8bfd) 70%, #fff);
  outline-offset: 2px;
}

/* Search */
.product-page .search-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  margin: 18px 0;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--accent, #3d8bfd) 16%, #d8e4ea);
  border-radius: 20px;
  background: var(--work-surface);
}

.product-page .search-form button {
  min-width: 120px;
}

.product-page .search-info {
  color: #4a5d6b;
}

.product-page .tasks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.product-page .task-item {
  display: grid;
  gap: 10px;
  padding: 20px 18px;
  border: 1px solid color-mix(in srgb, var(--accent, #3d8bfd) 14%, #d8e4ea);
  border-radius: 20px;
  background: color-mix(in srgb, var(--work-surface) 96%, #f3f7fa);
}

.product-page .task-item h2 {
  margin: 0;
  font-size: 22px;
}

.product-page .search-task-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.product-page .search-task-id {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  color: color-mix(in srgb, var(--accent, #3d8bfd) 78%, #102736);
  border: 1px solid color-mix(in srgb, var(--accent, #3d8bfd) 30%, #d0dde5);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent, #3d8bfd) 10%, #fff);
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* Auth */
.product-page .login-page,
.product-page .register-page,
.product-page .password-reset-page {
  display: grid;
  place-items: center;
  min-height: min(70vh, 720px);
  padding: 12px 0 40px;
}

.product-page .login-card,
.product-page .register-card,
.product-page .auth-card {
  width: min(440px, 100%);
  padding: 32px 28px;
  border: 1px solid color-mix(in srgb, var(--accent, #3d8bfd) 16%, #d8e4ea);
  border-radius: 26px;
  background: var(--work-surface);
  box-shadow: 0 16px 40px color-mix(in srgb, #173d50 10%, transparent);
}

.product-page .login-logo {
  color: var(--accent, #3d8bfd);
  font-size: 13px;
  font-weight: 820;
  letter-spacing: 0.04em;
}

.product-page .login-title {
  margin: 10px 0 6px;
  font-size: 32px;
  font-weight: 840;
}

.product-page .login-subtitle {
  margin: 0 0 18px;
  color: #4a5d6b;
  line-height: 1.5;
}

.product-page .login-error {
  color: #b42318 !important;
  -webkit-text-fill-color: #b42318 !important;
}

.product-page .login-form,
.product-page .login-field {
  display: grid;
  gap: 10px;
}

.product-page .login-field {
  margin-bottom: 12px;
}

.product-page .login-field label {
  color: #385061;
  font-size: 13px;
  font-weight: 700;
}

.product-page .password-wrapper {
  position: relative;
}

.product-page .toggle-password {
  position: absolute;
  top: 50%;
  right: 8px;
  min-height: 36px;
  min-width: 36px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  transform: translateY(-50%);
  color: #385061 !important;
  -webkit-text-fill-color: #385061 !important;
}

.product-page .login-btn {
  width: 100%;
  margin-top: 8px;
}

.product-page .login-links {
  display: grid;
  gap: 10px;
  margin-top: 18px;
  text-align: center;
}

/* Account / funnel */
.product-page .funnel-offer,
.product-page .profile-section,
.product-page .account-section {
  margin-top: 18px;
  padding: 24px;
  border: 1px solid color-mix(in srgb, var(--accent, #3d8bfd) 16%, #d8e4ea);
  border-radius: 24px;
  background: var(--work-surface);
}

.product-page .funnel-offer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.product-page .funnel-offer-card {
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--accent, #3d8bfd) 14%, #d8e4ea);
  border-radius: 18px;
  background: #f7fafc;
}

.product-page .funnel-offer-card__btn {
  width: 100%;
  margin-top: 12px;
}

/* Exam */
.product-page .exam-shell,
.product-page .exam-layout,
.product-page .exam-container {
  display: grid;
  gap: 18px;
}

.product-page .exam-task-card,
.product-page .exam-sidebar,
.product-page .task-main-card {
  padding: 24px;
  border: 1px solid color-mix(in srgb, var(--accent, #3d8bfd) 16%, #d8e4ea);
  border-radius: 24px;
  background: var(--work-surface);
  box-shadow: 0 12px 28px color-mix(in srgb, #173d50 7%, transparent);
}

.product-page .exam-actions {
  display: grid;
  gap: 10px;
}

.product-page .exam-actions > button {
  width: 100%;
}

.product-page .training-result-correct,
.product-page .exam-result-correct {
  color: #0f5132 !important;
  -webkit-text-fill-color: #0f5132 !important;
  border: 1px solid #a6e3c0;
  border-radius: 16px;
  background: #e8f8ef;
}

.product-page .training-result-wrong,
.product-page .exam-result-wrong,
.product-page .login-error {
  border-radius: 16px;
}

/* Course / commerce — override prod-parity dark-theme text (transparent fills / slate-on-white).
   LMS dashboard/lesson keep dark thematic panels — excluded here; see course-lms-contrast.css. */
.product-page .course-system-page:not(.course-dashboard):not(.course-lesson-page),
.product-page .course-landing,
.product-page .premium-page,
.product-page .commerce-page {
  display: grid;
  gap: 18px;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  color: var(--work-ink);
}

.product-page .course-system-page:not(.course-dashboard):not(.course-lesson-page) .course-system-hero,
.product-page .course-system-page:not(.course-dashboard):not(.course-lesson-page) .course-card,
.product-page .course-landing .course-system-hero,
.product-page .course-landing .course-card,
.product-page .premium-card,
.product-page .premium-hero,
.product-page .buy-card,
.product-page .premium-plan-offer,
.product-page .premium-balance-card {
  padding: 24px;
  border: 1px solid color-mix(in srgb, var(--accent, #3d8bfd) 16%, #d8e4ea);
  border-radius: 24px;
  background: var(--work-surface) !important;
  box-shadow: 0 12px 28px color-mix(in srgb, #173d50 7%, transparent);
  color: var(--work-ink);
}

.product-page .course-system-page:not(.course-dashboard):not(.course-lesson-page) .course-system-hero h1,
.product-page .course-system-page:not(.course-dashboard):not(.course-lesson-page) .course-card h1,
.product-page .course-system-page:not(.course-dashboard):not(.course-lesson-page) .course-card h2,
.product-page .course-system-page:not(.course-dashboard):not(.course-lesson-page) .course-card h3,
.product-page .course-landing .course-system-hero h1,
.product-page .course-landing .course-card h1,
.product-page .course-landing .course-card h2,
.product-page .course-landing .course-card h3,
.product-page .premium-title,
.product-page .premium-card h2,
.product-page .premium-card h3 {
  color: var(--work-ink) !important;
  -webkit-text-fill-color: var(--work-ink) !important;
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
}

.product-page .course-system-page:not(.course-dashboard):not(.course-lesson-page) .course-system-badge,
.product-page .course-landing .course-system-badge,
.product-page .premium-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  margin-bottom: 12px;
  padding: 0 10px;
  color: var(--accent, #3d8bfd) !important;
  -webkit-text-fill-color: var(--accent, #3d8bfd) !important;
  border: 1px solid color-mix(in srgb, var(--accent, #3d8bfd) 28%, #d8e4ea);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent, #3d8bfd) 8%, #fff) !important;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.product-page .course-system-page:not(.course-dashboard):not(.course-lesson-page) .course-system-lead,
.product-page .course-system-page:not(.course-dashboard):not(.course-lesson-page) .course-system-meta,
.product-page .course-system-page:not(.course-dashboard):not(.course-lesson-page) .course-system-note,
.product-page .course-system-page:not(.course-dashboard):not(.course-lesson-page) .course-card p,
.product-page .course-system-page:not(.course-dashboard):not(.course-lesson-page) .course-system-features,
.product-page .course-system-page:not(.course-dashboard):not(.course-lesson-page) .course-system-features li,
.product-page .course-system-page:not(.course-dashboard):not(.course-lesson-page) .course-system-features strong,
.product-page .course-landing .course-system-lead,
.product-page .course-landing .course-system-meta,
.product-page .course-landing .course-system-note,
.product-page .course-landing .course-card p,
.product-page .premium-subtitle {
  color: #385061 !important;
  -webkit-text-fill-color: #385061 !important;
  background: none !important;
  line-height: 1.55;
}

.product-page .course-system-page:not(.course-dashboard):not(.course-lesson-page) .course-system-note,
.product-page .course-landing .course-system-note {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, #d4a017 35%, #f5e6b8);
  border-radius: 14px;
  background: #fff8e8 !important;
  color: #7a5b12 !important;
  -webkit-text-fill-color: #7a5b12 !important;
}

.product-page .course-system-page:not(.course-dashboard):not(.course-lesson-page) .course-system-btn--primary,
.product-page .course-landing .course-system-btn--primary,
.product-page .premium-primary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 18px;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(
    90deg,
    var(--accent-hi, #5aa7ff),
    var(--signal, #3d8bfd),
    var(--accent-hi, #5aa7ff)
  ) !important;
  font-weight: 780;
  text-decoration: none;
}

.product-page .course-system-page:not(.course-dashboard):not(.course-lesson-page) .course-system-btn--secondary,
.product-page .course-landing .course-system-btn--secondary,
.product-page .premium-secondary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  color: var(--work-ink) !important;
  -webkit-text-fill-color: var(--work-ink) !important;
  border: 1px solid color-mix(in srgb, var(--accent, #3d8bfd) 22%, #d0dde5) !important;
  border-radius: 14px;
  background: #fff !important;
  font-weight: 700;
  text-decoration: none;
}

.product-page .course-system-page:not(.course-dashboard):not(.course-lesson-page) .course-system-hero__actions,
.product-page .course-landing .course-system-hero__actions,
.product-page .premium-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

.product-page .course-system-page:not(.course-dashboard):not(.course-lesson-page) .course-system-features,
.product-page .course-landing .course-system-features {
  display: grid;
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.product-page .course-system-page:not(.course-dashboard):not(.course-lesson-page) .course-system-features li,
.product-page .course-landing .course-system-features li {
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--accent, #3d8bfd) 12%, #d8e4ea);
  border-radius: 14px;
  background: #f7fafc !important;
}

.product-page .course-system-page:not(.course-dashboard):not(.course-lesson-page) .course-system-features li strong,
.product-page .course-landing .course-system-features li strong {
  color: var(--work-ink) !important;
  -webkit-text-fill-color: var(--work-ink) !important;
  font-weight: 820;
}

.product-page .course-system-page:not(.course-dashboard):not(.course-lesson-page) .course-card--highlight,
.product-page .course-landing .course-card--highlight {
  border-color: color-mix(in srgb, var(--accent, #3d8bfd) 28%, #d8e4ea) !important;
  background: color-mix(in srgb, var(--accent, #3d8bfd) 6%, #fff) !important;
}

/* Legal */
.product-page .legal-page {
  padding: 32px 34px;
  border: 1px solid color-mix(in srgb, var(--accent, #3d8bfd) 16%, #d8e4ea);
  border-radius: 26px;
  background: var(--work-surface);
  box-shadow: 0 14px 34px color-mix(in srgb, #173d50 8%, transparent);
  color: var(--work-ink);
  line-height: 1.65;
}

.product-page .legal-page h1 {
  margin: 0 0 18px;
  font-size: clamp(28px, 4vw, 36px);
  font-weight: 840;
}

.product-page .legal-page h2 {
  margin: 28px 0 12px;
  font-size: 22px;
  font-weight: 800;
}

.product-page .legal-page p {
  margin: 0 0 12px;
  color: #385061;
}

@media (width <= 768px) {
  .product-page {
    width: min(100% - 32px, 1120px);
    padding-top: 18px;
  }

  .product-page .search-form {
    grid-template-columns: 1fr;
  }

  .product-page .search-form button,
  .product-page .open-task-btn,
  .product-page .login-btn {
    width: 100%;
  }

  .product-panel,
  .product-page .legal-page,
  .product-page .login-card {
    padding: 20px 18px;
  }
}

@media (width <= 390px) {
  .product-page {
    width: calc(100% - 24px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-scene .task-dot-grid {
    animation: none !important;
  }
}