/* Shared page accents: match the four portal title tabs without covering card content. */
#app .app-main .tool-card { --hx-card-glow-rgb: 106, 228, 252; }
#app .student-works-page .work-card { --hx-card-glow-rgb: 255, 179, 87; }
#app :is(.course-resources-page, .public-resources-page) :is(.course-card, .resource-card, .column-card) {
  --hx-card-glow-rgb: 155, 232, 107;
}
#hx-app .gh-card,
.hx-windows-graphical :is(.entry, .lesson) { --hx-card-glow-rgb: 201, 163, 255; }

/* Remove only the card's top accent strip; keep thumbnail overlays and badges. */
#app .app-main :is(.tool-card, .work-card, .course-card, .resource-card, .column-card)::before {
  content: none !important;
  display: none !important;
}

#app .app-main :is(.tool-card, .work-card, .course-card, .resource-card, .column-card),
#hx-app .gh-card,
.hx-windows-graphical :is(.entry, .lesson) {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}

@media (hover: hover) and (pointer: fine) {
  #app .app-main :is(.tool-card, .work-card, .course-card, .resource-card, .column-card):hover,
  #hx-app .gh-card:hover,
  .hx-windows-graphical :is(.entry, .lesson):hover {
    box-shadow: 0 0 18px rgba(var(--hx-card-glow-rgb, 201, 163, 255), .32),
                0 10px 30px rgba(var(--hx-card-glow-rgb, 201, 163, 255), .3) !important;
    border-color: rgba(var(--hx-card-glow-rgb, 201, 163, 255), .6) !important;
  }
}

#app .app-main :is(.tool-card, .work-card, .course-card, .resource-card, .column-card):focus-visible,
#hx-app .gh-card:focus-visible,
.hx-windows-graphical :is(.entry, .lesson):focus-visible {
  box-shadow: 0 0 18px rgba(var(--hx-card-glow-rgb, 201, 163, 255), .32),
              0 10px 30px rgba(var(--hx-card-glow-rgb, 201, 163, 255), .3) !important;
}

@media (prefers-reduced-motion: reduce) {
  #app .app-main :is(.tool-card, .work-card, .course-card, .resource-card, .column-card),
  #hx-app .gh-card,
  .hx-windows-graphical :is(.entry, .lesson) { transition: none !important; }
}