/*
 * Talent Compass site-wide final visual layer.
 * Loaded after page-local styles so every route shares one maintainable finish.
 */

:root {
  --sf-navy: #1a3e6d;
  --sf-navy-deep: #082f55;
  --sf-gold: #ebbf50;
  --sf-teal: #36b7b0;
  --sf-sky: #8db8e6;
  --sf-ink: #142a3e;
  --sf-muted: #5b6d7c;
  --sf-line: #d8e2e8;
  --sf-canvas: #f4f7f8;
  --sf-band: #eaf2f6;
  --sf-white: #fff;
  --sf-on-dark: #fff;
  --sf-on-dark-muted: #c8dce9;
  --sf-radius: 8px;
  --sf-shadow: 0 16px 42px rgba(18, 63, 109, .1);
  --sf-shadow-soft: 0 8px 24px rgba(18, 63, 109, .07);
}

body.page-mode-public,
body.page-mode-task,
body.page-mode-transaction,
body.page-mode-dashboard,
body.page-mode-canvas {
  color: var(--sf-ink);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
  letter-spacing: 0;
}

body:not(.home-final-page):is(.page-mode-public, .page-mode-task, .page-mode-transaction, .page-mode-dashboard) {
  background: var(--sf-canvas) !important;
}

body:not(.home-final-page):is(.page-mode-public, .page-mode-task, .page-mode-transaction, .page-mode-dashboard) :is(h1, h2, h3, h4, h5, h6) {
  color: var(--sf-ink);
  letter-spacing: 0 !important;
  text-wrap: balance;
}

body:not(.home-final-page) :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid rgba(54, 183, 176, .34) !important;
  outline-offset: 3px;
}

body:not(.home-final-page) :is(.btn, button, input, select, textarea) {
  border-radius: 6px !important;
}

body:not(.home-final-page) :is(.btn, .btn-primary-custom, .btn-accent, .btn-soft) {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 800;
  letter-spacing: 0;
}

body:not(.home-final-page) :is(.btn-primary, .btn-primary-custom) {
  color: var(--sf-on-dark) !important;
  background: var(--sf-navy) !important;
  border-color: var(--sf-navy) !important;
  box-shadow: 0 10px 24px rgba(26, 62, 109, .16);
}

body:not(.home-final-page) :is(.btn-primary, .btn-primary-custom):hover {
  color: var(--sf-on-dark) !important;
  background: var(--sf-navy-deep) !important;
  border-color: var(--sf-navy-deep) !important;
  transform: translateY(-1px);
}

body:not(.home-final-page) .btn-accent {
  color: #3f3005 !important;
  background: var(--sf-gold) !important;
  border-color: var(--sf-gold) !important;
}

body:not(.home-final-page) :is(.btn-outline-primary, .btn-soft) {
  color: var(--sf-navy) !important;
  background: var(--sf-white) !important;
  border-color: #9db2c3 !important;
}

body:not(.home-final-page) :is(.form-control, .form-select, .tl-select-button) {
  min-height: 46px;
  color: var(--sf-ink) !important;
  background-color: var(--sf-white) !important;
  border: 1px solid #c8d5dd !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}

body:not(.home-final-page) :is(.form-control, .form-select, .tl-select-button):focus {
  border-color: var(--sf-teal) !important;
  box-shadow: 0 0 0 4px rgba(54, 183, 176, .14) !important;
}

body:not(.home-final-page) .form-label {
  color: #31495d;
  font-weight: 800;
}

body:not(.home-final-page) :is(.card, .surface-card, .soft-card, .info-block) {
  border: 1px solid var(--sf-line) !important;
  border-radius: var(--sf-radius) !important;
  box-shadow: var(--sf-shadow-soft) !important;
}

body:not(.home-final-page) .badge {
  border-radius: 4px !important;
  letter-spacing: 0;
}

body:not(.home-final-page) :is(.table-responsive, .table-wrap) {
  border-radius: var(--sf-radius) !important;
}

body:not(.home-final-page) .table {
  color: var(--sf-ink);
  border-color: var(--sf-line);
}

body:not(.home-final-page) .table thead th {
  color: #43586a;
  background: #eef3f5 !important;
  border-bottom-color: #cbd8df;
  font-size: 12px;
  letter-spacing: .03em;
}

body:not(.home-final-page) .site-navbar {
  background: rgba(255, 255, 255, .96) !important;
  border-bottom: 1px solid rgba(20, 42, 62, .09) !important;
  box-shadow: 0 8px 26px rgba(20, 42, 62, .07) !important;
  backdrop-filter: blur(14px);
}

body:not(.home-final-page) .site-navbar .nav-link.is-active {
  color: var(--sf-navy) !important;
  background: #edf3f7;
}

body:not(.home-final-page) footer {
  margin-top: 72px !important;
  padding-block: 30px !important;
  background: #eef3f5 !important;
  border-top: 1px solid var(--sf-line) !important;
}

/* Public exploration and resource pages */
body.page-mode-public:not(.home-final-page) :is(
  .content-hero, .guide-hero, .method-hero, .major-hero, .support-hero,
  .pricing-hero, .sample-hero, .b2b-hero, .about-hero, .onepage-hero,
  .decision-hero, .org-hero
) {
  position: relative;
  padding-top: 72px !important;
  padding-bottom: 76px !important;
  color: var(--sf-ink) !important;
  background: var(--sf-band) !important;
  border: 0 !important;
  border-bottom: 1px solid #d2dfe6 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden;
}

body.page-mode-public:not(.home-final-page) :is(
  .content-hero, .guide-hero, .method-hero, .major-hero, .support-hero,
  .pricing-hero, .sample-hero, .b2b-hero, .about-hero, .onepage-hero,
  .decision-hero, .org-hero
)::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 7px;
  height: 100%;
  display: block !important;
  background: var(--sf-gold) !important;
  opacity: 1 !important;
  mask-image: none !important;
}

body.page-mode-public:not(.home-final-page) :is(
  .content-hero, .guide-hero, .method-hero, .major-hero, .support-hero,
  .pricing-hero, .sample-hero, .b2b-hero, .about-hero, .onepage-hero,
  .decision-hero, .org-hero
) :is(h1, h2, h3, h4) {
  color: var(--sf-ink) !important;
  text-shadow: none !important;
}

body.page-mode-public:not(.home-final-page) :is(
  .content-hero, .guide-hero, .method-hero, .major-hero, .support-hero,
  .pricing-hero, .sample-hero, .b2b-hero, .about-hero, .onepage-hero,
  .decision-hero, .org-hero
) :is(p, .lede, .guide-copy, .method-copy, .major-copy, .support-copy, .pricing-copy, .sample-copy, .b2b-copy, .about-copy) {
  max-width: 72ch;
  color: var(--sf-muted) !important;
  text-shadow: none !important;
  line-height: 1.85;
}

body.page-mode-public:not(.home-final-page) :is(.eyebrow, .pill, .about-kicker, .guide-kicker, .method-kicker) {
  color: var(--sf-navy) !important;
  background: var(--sf-white) !important;
  border: 1px solid #c8d7df !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}

/* The majors hero is converted from its original dark canvas to the public
   light band. Its nested glass panels therefore need their own light palette. */
body.page-mode-public:not(.home-final-page) .major-hero .hero-board-card,
body.page-mode-public:not(.home-final-page) .major-hero .major-explorer,
body.page-mode-public:not(.home-final-page) .major-hero .floating-major {
  color: var(--sf-ink) !important;
  background: rgba(255, 255, 255, .78) !important;
  border-color: #c7d8e2 !important;
  box-shadow: 0 14px 34px rgba(18, 63, 109, .1) !important;
}

body.page-mode-public:not(.home-final-page) .major-hero .hero-board-card h3,
body.page-mode-public:not(.home-final-page) .major-hero .lane-item strong,
body.page-mode-public:not(.home-final-page) .major-hero .floating-major b {
  color: var(--sf-ink) !important;
}

body.page-mode-public:not(.home-final-page) .major-hero .hero-board-card p,
body.page-mode-public:not(.home-final-page) .major-hero .lane-item small,
body.page-mode-public:not(.home-final-page) .major-hero .floating-major span,
body.page-mode-public:not(.home-final-page) .major-hero .hero-metric span {
  color: #516779 !important;
}

body.page-mode-public:not(.home-final-page) .major-hero .hero-metric {
  background: #eef3f6 !important;
  border-color: #d5e0e6 !important;
}

body.page-mode-public:not(.home-final-page) .major-hero .hero-metric b {
  color: var(--sf-navy) !important;
}

body.page-mode-public:not(.home-final-page) .major-hero .major-explorer::before {
  border-color: #b7ccd8 !important;
}

body.page-mode-public:not(.home-final-page) .major-hero .floating-major em {
  background: #dfe8ed !important;
}

/* A major detail hero also uses the public light band. Convert its former
   on-dark controls and proof cards, while preserving contrast in dark panels. */
body.page-mode-public:not(.home-final-page) .decision-hero .btn-outline-light {
  color: var(--sf-navy) !important;
  background: var(--sf-white) !important;
  border-color: #9db2c3 !important;
}

body.page-mode-public:not(.home-final-page) .decision-hero .btn-outline-light:hover {
  color: var(--sf-on-dark) !important;
  background: var(--sf-navy) !important;
  border-color: var(--sf-navy) !important;
}

body.page-mode-public:not(.home-final-page) .decision-hero .detail-proof {
  color: var(--sf-ink) !important;
  background: rgba(255, 255, 255, .82) !important;
  border-color: #c7d8e2 !important;
  box-shadow: 0 8px 22px rgba(18, 63, 109, .06);
}

body.page-mode-public:not(.home-final-page) .decision-hero .detail-proof span {
  color: #52697f !important;
}

body.page-mode-public:not(.home-final-page) .decision-hero .detail-proof b {
  color: var(--sf-ink) !important;
}

body.page-mode-public:not(.home-final-page) .score-panel h5,
body.page-mode-public:not(.home-final-page) .ai-box :is(h1, h2, h3, h4, h5, h6, strong),
body.page-mode-public:not(.home-final-page) .detail-final-cta h3 {
  color: var(--sf-on-dark) !important;
}

body.page-mode-public:not(.home-final-page) .score-panel p,
body.page-mode-public:not(.home-final-page) .ai-box p,
body.page-mode-public:not(.home-final-page) .detail-final-cta p {
  color: var(--sf-on-dark-muted) !important;
}

body.page-mode-public:not(.home-final-page) :is(main, .page-content) > :is(.container, .container-fluid):first-child,
body.page-mode-public:not(.home-final-page) :is(.content-main, .career-main, .major-main) {
  padding-top: 48px;
}

body.page-mode-public:not(.home-final-page) :is(.container, .container-xl, .container-lg) {
  --bs-gutter-x: 2rem;
}

body.page-mode-public:not(.home-final-page) :is(
  .cluster-card, .career-card, .major-card, .group-card, .support-card,
  .science-card, .policy-card, .pricing-card, .report-card,
  .step-card, .feature-card, .institution-card, .service-panel
) {
  border: 1px solid var(--sf-line) !important;
  border-radius: var(--sf-radius) !important;
  background: var(--sf-white) !important;
  box-shadow: var(--sf-shadow-soft) !important;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

body.page-mode-public:not(.home-final-page) :is(
  .cluster-card, .career-card, .major-card, .group-card, .support-card,
  .science-card, .policy-card, .pricing-card, .report-card,
  .step-card, .feature-card, .institution-card
):hover {
  border-color: #abc1cf !important;
  box-shadow: var(--sf-shadow) !important;
  transform: translateY(-3px);
}

body.page-mode-public:not(.home-final-page) .checklist-panel .check-item {
  color: var(--sf-on-dark) !important;
  background: rgba(255, 255, 255, .08) !important;
  border: 1px solid rgba(255, 255, 255, .16) !important;
  border-radius: var(--sf-radius) !important;
  box-shadow: none !important;
}

body.page-mode-public:not(.home-final-page) .checklist-panel h3,
body.page-mode-public:not(.home-final-page) .checklist-panel .check-item b {
  color: var(--sf-on-dark) !important;
}

body.page-mode-public:not(.home-final-page) .checklist-panel .check-item span {
  color: var(--sf-on-dark-muted) !important;
}

body.page-mode-public:not(.home-final-page) :is(.filter-bar, .filter-panel, .compare-panel, .selection-panel) {
  border: 1px solid var(--sf-line) !important;
  border-radius: var(--sf-radius) !important;
  background: rgba(255, 255, 255, .94) !important;
  box-shadow: 0 10px 30px rgba(18, 63, 109, .07) !important;
}

body.page-mode-public:not(.home-final-page) :is(.filter-chip, .filter-btn, .tag-chip) {
  min-height: 36px;
  color: #405568 !important;
  background: #edf2f5 !important;
  border: 1px solid transparent !important;
  border-radius: 4px !important;
}

body.page-mode-public:not(.home-final-page) :is(.filter-chip.active, .filter-btn.active, .tag-chip.active) {
  color: var(--sf-on-dark) !important;
  background: var(--sf-navy) !important;
}

/* Task pages keep operational density and strong state hierarchy. */
body.page-mode-task:not(.home-final-page) {
  background: #eef3f5 !important;
}

body.page-mode-task:not(.home-final-page) :is(
  .advisor-hero, .interview-hero, .ai-report-hero, .study-hero, .sr-hero,
  .hero-result, .ap-hero, .gp-hero, .hist-hero, .account-hero
) {
  color: var(--sf-on-dark) !important;
  background: var(--sf-navy-deep) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.page-mode-task:not(.home-final-page) :is(
  .advisor-hero, .interview-hero, .ai-report-hero, .study-hero, .sr-hero,
  .hero-result, .ap-hero, .gp-hero, .hist-hero, .account-hero
) :is(h1, h2, h3, h4, strong) {
  color: var(--sf-on-dark) !important;
}

body.page-mode-task:not(.home-final-page) :is(
  .advisor-hero, .interview-hero, .ai-report-hero, .study-hero, .sr-hero,
  .hero-result, .ap-hero, .gp-hero, .hist-hero, .account-hero
) :is(p, small, span) {
  color: var(--sf-on-dark-muted);
}

body.page-mode-task:not(.home-final-page) :is(
  .advisor-shell, .interview-shell, .ai-report-shell, .study-shell, .sr-shell,
  .result-shell, .ap-shell, .gp-shell, .hist-shell, .account-shell, .te-shell
) {
  width: min(1240px, calc(100% - 32px));
  margin-inline: auto;
}

body.page-mode-task:not(.home-final-page) :is(
  .advisor-card, .interview-card, .report-section, .result-card, .ap-card,
  .gp-card, .hist-card, .account-card, .evidence-card, .task-card
) {
  border: 1px solid var(--sf-line) !important;
  border-radius: var(--sf-radius) !important;
  background: var(--sf-white) !important;
  box-shadow: var(--sf-shadow-soft) !important;
}

body.page-mode-task:not(.home-final-page) :is(.progress, .progress-track) {
  overflow: hidden;
  border-radius: 999px !important;
  background: #dce6eb !important;
}

body.page-mode-task:not(.home-final-page) :is(.progress-bar, .progress-bar-custom) {
  background: linear-gradient(90deg, var(--sf-navy), var(--sf-teal)) !important;
}

/* Authentication, orders and payments. */
body.page-mode-transaction:not(.home-final-page) {
  background: #edf3f6 !important;
}

body.page-mode-transaction:not(.home-final-page) :is(.auth-page, .auth-wrap, .invite-wrap, .pay-shell, .opay-shell, .receipt-wrap, .inv-wrap, .orders-shell) {
  padding-top: 56px;
  padding-bottom: 56px;
}

body.page-mode-transaction:not(.home-final-page) :is(.auth-shell, .auth-card, .auth-story, .pay-card, .payment-card, .receipt-card, .invoice-card, .order-card) {
  border-radius: var(--sf-radius) !important;
  box-shadow: var(--sf-shadow) !important;
}

body.page-mode-transaction:not(.home-final-page) :is(.auth-story, .auth-aside, .payment-hero, .receipt-head) {
  color: var(--sf-on-dark) !important;
  background: var(--sf-navy-deep) !important;
}

body.page-mode-transaction:not(.home-final-page) :is(.auth-story, .auth-aside, .payment-hero, .receipt-head) :is(h1, h2, h3, h4) {
  color: var(--sf-on-dark) !important;
}

body.page-mode-transaction:not(.home-final-page) :is(.auth-story, .auth-aside, .payment-hero, .receipt-head) p {
  color: var(--sf-on-dark-muted) !important;
}

body.page-mode-transaction:not(.home-final-page) .auth-card {
  background: var(--sf-white) !important;
  border: 1px solid var(--sf-line) !important;
}

/* Institution and admin dashboards remain dense and work-focused. */
body.page-mode-dashboard {
  background: #eef2f4 !important;
}

body.page-mode-dashboard :is(.sidebar, .page-head, .org-dash-hero, .admin-story, .saas-hero) {
  color: var(--sf-on-dark) !important;
  background: var(--sf-navy-deep) !important;
  border-radius: 0 !important;
}

body.page-mode-dashboard :is(.sidebar, .page-head, .org-dash-hero, .admin-story, .saas-hero) :is(h1, h2, h3, h4, h5, strong) {
  color: var(--sf-on-dark) !important;
}

body.page-mode-dashboard :is(.sidebar, .page-head, .org-dash-hero, .admin-story, .saas-hero) :is(p, small, span) {
  color: var(--sf-on-dark-muted);
}

body.page-mode-dashboard :is(.stat-card, .panel, .toolbar, .cohort-brief, .delivery-panel, .admin-card) {
  border: 1px solid var(--sf-line) !important;
  border-radius: var(--sf-radius) !important;
  background: var(--sf-white) !important;
  box-shadow: var(--sf-shadow-soft) !important;
}

body.page-mode-dashboard .container-fluid {
  max-width: 1440px;
}

body.page-mode-dashboard .table-responsive {
  border: 1px solid var(--sf-line);
  background: var(--sf-white);
}

/* Fixed canvases inherit tokens without structural reflow. */
body.page-mode-canvas {
  --primary: var(--sf-navy);
  --primary-dark: var(--sf-navy-deep);
  --accent: var(--sf-gold);
  --mint: var(--sf-teal);
  --sun: var(--sf-gold);
}

body.page-mode-canvas :is(button, .btn) {
  min-height: 44px;
  border-radius: 6px !important;
}

body.page-mode-canvas :is(button, .btn, input):focus-visible {
  outline: 3px solid rgba(54, 183, 176, .38) !important;
  outline-offset: 3px;
}

@media (max-width: 991.98px) {
  body:not(.home-final-page) .site-navbar .navbar-collapse {
    padding: 10px 0 18px;
    background: var(--sf-white);
  }

  body.page-mode-public:not(.home-final-page) :is(
    .content-hero, .guide-hero, .method-hero, .major-hero, .support-hero,
    .pricing-hero, .sample-hero, .b2b-hero, .about-hero, .onepage-hero,
    .decision-hero, .org-hero
  ) {
    padding-top: 56px !important;
    padding-bottom: 60px !important;
  }

  body:not(.home-final-page) :is(.row, [class*="-grid"]) {
    min-width: 0;
  }
}

@media (max-width: 767.98px) {
  body:not(.home-final-page) :is(.container, .container-fluid, .container-lg, .container-xl, .container-narrow) {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  body:not(.home-final-page) :is(h1, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6) {
    font-size: 2rem !important;
    line-height: 1.18 !important;
  }

  body:not(.home-final-page) h2 {
    font-size: 1.55rem !important;
    line-height: 1.25 !important;
  }

  body:not(.home-final-page) h3 {
    font-size: 1.18rem !important;
    line-height: 1.3 !important;
  }

  body:not(.home-final-page) :is(.btn-lg, .auth-card .btn, .pay-shell .btn-primary-custom) {
    width: 100%;
  }

  body:not(.home-final-page) :is(.card, .surface-card, .soft-card, .info-block) {
    box-shadow: 0 6px 18px rgba(18, 63, 109, .07) !important;
  }

  body.page-mode-dashboard .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  body:not(.home-final-page) footer {
    margin-top: 48px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.page-mode-public *,
  body.page-mode-task *,
  body.page-mode-transaction *,
  body.page-mode-dashboard *,
  body.page-mode-canvas * {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}