/* PE-Class home hero teacher board 12026
 * Consolidates the approved clean board and its compact viewport correction
 * under a fresh immutable URL so a previously cached fallback cannot mask it.
 */

body.homeDashboardApp #app .homeHero {
  isolation: isolate !important;
  border-color: #cfe1f0 !important;
  background: #f8fbfe !important;
  background-image: none !important;
  box-shadow: 0 9px 26px rgba(43, 102, 153, .08) !important;
}

body.homeDashboardApp #app .homeHero::before,
body.homeDashboardApp #app .homeHero::after,
body.homeDashboardApp #app .homeHeroVisual::before,
body.homeDashboardApp #app .homeHeroVisual::after {
  display: none !important;
  content: none !important;
}

body.homeDashboardApp #app .homeHeroOrbit,
body.homeDashboardApp #app .homeHeroDot {
  display: none !important;
}

body.homeDashboardApp #app .homeHeroEyebrow {
  color: #1473e6 !important;
}

body.homeDashboardApp #app .homeHeroEyebrow i {
  background: #2f8ae6 !important;
  box-shadow: 0 0 0 5px rgba(47, 138, 230, .12) !important;
}

body.homeDashboardApp #app .homeHero h1 {
  color: var(--home-title-color, #17324d) !important;
}

body.homeDashboardApp #app .homeHero h1 em {
  color: var(--home-highlight-color, #1473e6) !important;
}

body.homeDashboardApp #app .homeHero p {
  color: var(--home-description-color, #52697d) !important;
}

body.homeDashboardApp #app .homeHeroPrimary {
  border-color: #1473e6 !important;
  background: linear-gradient(180deg, #2384ec, #1473e6) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(20, 115, 230, .22) !important;
}

body.homeDashboardApp #app .homeHeroSecondary {
  border-color: #bad2e9 !important;
  background: #fff !important;
  color: #276590 !important;
}

/* The selected board direction uses the same 65:35 split on Fold-wide. */
html:is(.pe87FoldWide, [data-pe-fold-wide="true"], [data-pe87-fold-wide="true"])
body.homeDashboardApp #app .homeHero {
  grid-template-columns: minmax(0, 65fr) minmax(0, 35fr) !important;
}

/*
 * Keep the visual column as a neutral positioning host. The board is painted
 * by ::before so its asymmetric 5px/1px border cannot shift the count away
 * from the board's geometric centre.
 */
body.homeDashboardApp #app .homeHeroVisual {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  min-width: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

body.homeDashboardApp #app .homeHeroVisual::before {
  content: "" !important;
  position: absolute !important;
  z-index: 1 !important;
  display: block !important;
  inset: 22px 24px !important;
  width: auto !important;
  height: auto !important;
  border: 1px solid #d3e4f1 !important;
  border-left: 5px solid #2794dc !important;
  border-radius: 4px !important;
  background: #fff !important;
  background-image: none !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

body.homeDashboardApp #app .homeHeroVisual::after {
  display: none !important;
  content: none !important;
}

body.homeDashboardApp #app .homeHeroVisual .homeHeroCount {
  position: static !important;
  inset: auto !important;
  z-index: 2 !important;
  place-self: center !important;
  display: flex !important;
  width: 132px !important;
  height: 112px !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

body.homeDashboardApp #app .homeHeroVisual .homeHeroCount strong {
  color: #173e63 !important;
}

body.homeDashboardApp #app .homeHeroVisual .homeHeroCount span {
  color: #56728a !important;
}

/*
 * Foundation classifies compact layouts by viewport/device state rather than
 * pointing-device capability, so mouse/trackpad use must retain this geometry.
 */
@media (max-width: 768px) {
  html[data-pe-device="compact"]:not(.pe87Ipad):not(.pe87IpadRuntime):not(.pe87FoldWide):not([data-pe-ipados="true"]):not([data-pe-fold-wide="true"]):not([data-pe87-fold-wide="true"])
  body.homeDashboardApp #app .homeHeroVisual {
    position: absolute !important;
    top: 46px !important;
    right: 12px !important;
    width: 92px !important;
    height: 108px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  html[data-pe-device="compact"]:not(.pe87Ipad):not(.pe87IpadRuntime):not(.pe87FoldWide):not([data-pe-ipados="true"]):not([data-pe-fold-wide="true"]):not([data-pe87-fold-wide="true"])
  body.homeDashboardApp #app .homeHeroVisual::before {
    inset: 0 !important;
  }

  html[data-pe-device="compact"]:not(.pe87Ipad):not(.pe87IpadRuntime):not(.pe87FoldWide):not([data-pe-ipados="true"]):not([data-pe-fold-wide="true"]):not([data-pe87-fold-wide="true"])
  body.homeDashboardApp #app .homeHeroVisual .homeHeroCount {
    width: 88px !important;
    height: 88px !important;
    gap: 6px !important;
  }

  html[data-pe-device="compact"]:not(.pe87Ipad):not(.pe87IpadRuntime):not(.pe87FoldWide):not([data-pe-ipados="true"]):not([data-pe-fold-wide="true"]):not([data-pe87-fold-wide="true"])
  body.homeDashboardApp #app .homeHeroVisual .homeHeroCount strong {
    font-size: 35px !important;
    letter-spacing: -1px !important;
  }

  html[data-pe-device="compact"]:not(.pe87Ipad):not(.pe87IpadRuntime):not(.pe87FoldWide):not([data-pe-ipados="true"]):not([data-pe-fold-wide="true"]):not([data-pe87-fold-wide="true"])
  body.homeDashboardApp #app .homeHeroVisual .homeHeroCount span {
    font-size: 10px !important;
  }
}

@media (forced-colors: active) {
  body.homeDashboardApp #app .homeHeroVisual::before {
    border-color: CanvasText !important;
    border-left-color: Highlight !important;
    border-left-width: 5px !important;
  }
}