/* The DG-Edge hub's look on the Traces website and the Academy (user,
 * 2026-10-11: "take the current design of dev.hub.dg-edge.com and apply it
 * ... so to keep it uniform"). The hub was built from the Traces design
 * system, so the palette, buttons and words are already the same; two things
 * were the hub's own, and the user picked both:
 *
 *  - the page background: Traces navy with a blue glow at the top and a
 *    deeper blue centre (hub.scss, body::before), instead of flat navy;
 *  - "apex glass" cards: a gradient surface, a white hairline and a 1px top
 *    highlight (hub.scss .card), on the sites' feature and info cards.
 *
 * Loaded right after site-colour.css on the website's own pages and every
 * Academy page. Not on the app's pages (library, telemetry, settings,
 * leaderboard: they load neither sheet) and not on the Beta hub, which has
 * the DG-Edge forum's look already (beta-dg.css). A card keeps its own
 * borders, so the coloured top and left edges stay. The course dashboards'
 * coloured hero and KPI cards (gl-*) are left as they are.
 * The same file lives in Traces - Web and Academy - Web: change both.
 */

/* ── the page: navy, a blue glow at the top, a deeper blue centre ── */
html { background: #09162d !important; }
body { background: transparent !important; }
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 45% at 50% 0%, rgba(29, 73, 168, 0.45) 0%, rgba(29, 73, 168, 0) 100%),
    radial-gradient(ellipse at 55% 55%, #0f2450 0%, #09162d 62%, #0b1120 100%);
}
/* the plain navy bands let it through; the lit ones keep their colour glow */
.tr-sec--b { --sec-bg: radial-gradient(50% 60% at 100% 0%, rgba(96, 82, 200, .09), transparent 60%), transparent !important; }

/* ── apex glass cards ── */
/* the website */
.tr-cap, .tr-detail, .tr-learn-row, .tr-use, .tr-card, .ab-card, .dl-install, .rel, .sp-q,
article.item, .man-card, .col-body > .card, .cp-tile,
/* the Academy */
.path-card, .academy-product, .cl-plan, .persona-card, .cl-course, .cl-detail, .cl-learn-row,
.cl-instructor, .cl-faq, .cl-forum-cta, .wall-cta, .glass-card, #coaches .coach, .crv .card.post {
  background-color: transparent !important;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0) 32%),
    linear-gradient(135deg, rgba(20, 38, 71, 0.9), rgba(13, 28, 56, 0.94)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 30px rgba(0, 0, 0, 0.25) !important;
}
/* a card that is a link lifts and takes a blue hairline, as on the hub */
a.tr-card--link, a.path-card, .academy-product, #coaches .coach {
  transition: transform 0.2s ease-out, border-color 0.2s ease-out, box-shadow 0.2s ease-out;
}
a.tr-card--link:hover, a.path-card:hover, .academy-product:not(.ac-is-soon):hover, #coaches .coach:hover {
  transform: translateY(-2px);
  border-color: rgba(64, 158, 215, 0.45) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 14px 34px rgba(0, 0, 0, 0.35) !important;
}
@media (prefers-reduced-motion: reduce) {
  a.tr-card--link:hover, a.path-card:hover, .academy-product:hover, #coaches .coach:hover { transform: none; }
}

/* ── the hub's forum and event cards (user, 2026-10-11: "I really don't
   think the course and the badges fully are") ──
   hub.scss .feed-card-why and .cev-*: a badge is a small outlined pill on a
   dark glass, in its colour (--cc); a cover is darkened at the top and the
   foot so its pills read; the body has a coloured uppercase kicker and a bold
   title; the card ends in a dark bar with a hairline above it. */
/* html body :is(...): above the pages' own !important badge rules
   (academy-colour.css, academy-overrides.css load after this sheet) */
html body :is(.academy-product__badge, .cl-plan__tag, .gl-badge, .gl-st, .ls-chip, .ac-soon, .crv .p-tag,
  .cl-skill, .cl-lesson__free, .rel__badge, .sp-tag, .card .pill, .cp-pill, .dl-version) {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  line-height: 1.5 !important;
  text-transform: uppercase !important;
  color: var(--cc, #5dbdf0) !important;
  border: 1px solid var(--cc, #5dbdf0) !important;
  background: rgba(4, 10, 22, 0.6) !important;
  border-radius: 999px !important;
  padding: 2px 8px !important;
  white-space: nowrap;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.ac-soon .bi, .ls-chip .material-icons { font-size: 11px !important; }
/* the colours: the site's accent cycle */
.academy-product__badge--primary { --cc: #3ebaf4; }
.academy-product__badge--warning, .ac-soon, .gl-badge--pick, .gl-st--updating { --cc: #ffd93d; }
.academy-product__badge--platinum { --cc: #8b7cf0; }
.gl-badge--done, .gl-st--available, .ls-chip--available { --cc: #34d17a; }
.gl-st--soon, .ls-chip--soon { --cc: #96adcf; }
.gl-st--text, .ls-chip--text { --cc: #5dbdf0; }
.ls-chip--updating { --cc: #ffd93d; }
.ls-chip--challenge { --cc: #f0628f; }
.ls-chip--analysis { --cc: #8b7cf0; }
.cl-plan .cl-plan__tag { --cc: #96adcf; }
.cl-plan--featured .cl-plan__tag { --cc: #8b7cf0; }
/* the skill tags (online course), each in its cycle colour, no dot */
.cl-skill { --cc: var(--c, #5dbdf0); }
html body .cl-skill::before { display: none !important; }
.cl-lesson__free { --cc: #5dbdf0; }
.rel__badge { --cc: #34d17a; }
.sp-tag { --cc: var(--c, #8b7cf0); }
.card .pill { --cc: #96adcf; }
/* the section links (support, tools) and the download's version chip */
.cp-pill { --cc: var(--c, #5dbdf0); }
html body .cp-pill::before { display: none !important; }
html body .cp-pill:hover { background: color-mix(in srgb, var(--cc) 18%, rgba(4, 10, 22, 0.8)) !important; }
.dl-version { --cc: #5dbdf0; }
.card .pill.ver { --cc: #34d17a; }
html body .card .pill .material-icons { font-size: 12px !important; color: inherit !important; }

/* tabs and filters: the hub's (its feed's Everything / For me / News) -
   a dark pill, the chosen one filled in the primary blue */
html body :is(#filters button, .chips button) {
  background: #112344 !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  color: #cbd5e1 !important;
}
html body :is(#filters button, .chips button):hover { border-color: rgba(64, 158, 215, 0.45) !important; color: #fff !important; }
html body :is(#filters button.on, .chips button.on) { background: #409ed7 !important; border-color: #409ed7 !important; color: #fff !important; }

/* buttons: the hub's (hub.scss .btn) - 8px corners; the primary the
   gradient with its border; a quiet button the hub's secondary */
html body .gl-btn { border-radius: 8px !important; }
html body .ab-btn:not(.ab-btn--ghost) { background-image: linear-gradient(90deg, #409ed7, #6052c8) !important; border: 1px solid #409ed7 !important; }
html body .btn.btn-ghost { background: #112344 !important; border: 1px solid rgba(255, 255, 255, 0.16) !important; color: #fff !important; }
html body .btn.btn-ghost:hover { background: #172d55 !important; border-color: rgba(64, 158, 215, 0.45) !important; }

/* covers: the photo or the lesson's art, darkened top and foot */
.academy-product__img, .gl-lesson__art { position: relative; }
.academy-product__img::after, .gl-lesson__art::after {
  content: '' !important;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(4, 10, 22, 0.7) 0%, rgba(4, 10, 22, 0) 35%, rgba(4, 10, 22, 0) 60%, rgba(4, 10, 22, 0.65) 100%) !important;
}
.academy-product__img > *:not(img), .gl-lesson__art > * { position: relative; z-index: 1; }
.academy-product__badge { position: absolute !important; }
.gl-badge { position: absolute !important; z-index: 2 !important; }
/* a lesson's art is the hub's deep cover: the module's colour, dimmed */
.gl-lesson__art { filter: saturate(0.85) brightness(0.72); border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.gl-lesson--soon .gl-lesson__art { filter: saturate(0.3) brightness(0.55); }

/* the body: kicker and title, as .cev-kicker and .cev-title */
.path-card__label { font-size: 11px !important; font-weight: 800 !important; letter-spacing: 0.06em !important; text-transform: uppercase; }
.academy-product__title, .gl-lesson__body h3 { font-size: 18px !important; font-weight: 800 !important; letter-spacing: -0.01em; line-height: 1.25 !important; }

/* the dark bar the card ends in (.cev-foot) */
.path-card__foot {
  margin: 1rem -1.5rem -1.25rem !important;
  padding: 9px 1.5rem 10px !important;
  background: #0a1730;
  border-top: 1px solid rgba(255, 255, 255, 0.10) !important;
  font-size: 13px !important;
}
.gl-lesson__meta {
  margin: auto -16px -16px !important;
  padding: 9px 16px 10px !important;
  background: #0a1730;
  border-top: 1px solid rgba(255, 255, 255, 0.10) !important;
}
#coaches .coach__foot { background: #0a1730 !important; border-top: 1px solid rgba(255, 255, 255, 0.10) !important; }