/**
 * Jitter-style surfaces for learner pages (role student) — getdesign.md/design-md/jitter
 * canvas #f2f1f3 · ink #19171c · CTA lilac #b593ff (ink text) · accent #7a40ed
 * เปิดด้วย body.va-theme-jitter-app (sidemenu.js ตั้งให้เฉพาะผู้เรียนบนหน้าที่อยู่ใน allowlist)
 * ฟอนต์คงเดิม (Sarabun) · โหมดความคมชัดสูงยกเว้นทั้งหมด ให้ a11y-toolbar.css ทำงานตามเดิม
 */
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app {
  --jt-bg: #f2f1f3;
  --jt-surface: #ffffff;
  --jt-ink: #19171c;
  --jt-muted: #5f5d66;
  --jt-brand: #b593ff;
  --jt-brand-hover: #a987f5;
  --jt-accent: #7a40ed;
  --jt-accent-deep: #5b21b6;
  --jt-accent-soft: #f2ecff;
  --jt-border: #e5e4e7;
  --jt-lime: #e6ff8a;
  --jt-peach: #ffd2b8;
  --jt-sky: #c4e3ff;
  --jt-shadow: 0 18px 48px rgba(25, 23, 28, 0.07);
  --jt-shadow-sm: 0 6px 18px rgba(25, 23, 28, 0.06);
  background-color: var(--jt-bg) !important;
  color: var(--jt-ink);
}

/* decorative lilac glow behind the content (position: fixed works on iOS, unlike background-attachment) */
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    url("images/jitter/canvas.svg") center / cover no-repeat,
    radial-gradient(38rem 26rem at 100% 0%, rgba(181, 147, 255, 0.28), transparent 70%),
    radial-gradient(30rem 22rem at 0% 100%, rgba(230, 255, 138, 0.22), transparent 70%),
    radial-gradient(rgba(25, 23, 28, 0.055) 1px, transparent 1.6px) 0 0 / 24px 24px,
    var(--jt-bg);
}

/* ---------- Page illustrations ----------
 * decorative only; each sits in space reserved beside the page heading so it never lies behind text.
 * hidden below 768px where the heading needs the full width */
@media (min-width: 768px) {
  html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #dashboard-section > div > h2::after,
  html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #my-courses-heading::after,
  html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #browse-heading::after,
  html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #certs-heading::after,
  html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #grades-heading::after,
  html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #profile-heading::after {
    content: "";
    flex: 0 0 auto;
    align-self: flex-end;
    width: 9rem;
    height: 7rem;
    margin: -2rem 0 -0.5rem auto;
    background: no-repeat right bottom / contain;
    pointer-events: none;
  }
  html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #dashboard-section > div > h2::after { background-image: url("images/jitter/dashboard.svg"); }
  html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #my-courses-heading::after { background-image: url("images/jitter/my-learning.svg"); }
  html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #browse-heading::after { background-image: url("images/jitter/course-catalog.svg"); }
  html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #certs-heading::after { background-image: url("images/jitter/certificates.svg"); }
  html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #grades-heading::after { background-image: url("images/jitter/grades.svg"); }
  html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #profile-heading::after { background-image: url("images/jitter/profile.svg"); }

  html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #learn-course-details-wrap {
    position: relative;
    min-height: 8.5rem;
    padding-right: 12rem;
  }
  html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #learn-course-details-wrap::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 1.25rem;
    width: 9rem;
    height: 7rem;
    transform: translateY(-50%);
    background: url("images/jitter/course-learn.svg") no-repeat center / contain;
    pointer-events: none;
  }

  html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app .co-hero > div {
    display: flex;
    align-items: center;
    gap: 1.5rem;
  }
  html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app .co-hero > div > #course-title {
    flex: 1 1 auto;
    min-width: 0;
  }
  html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app .co-hero > div::after {
    content: "";
    flex: 0 0 auto;
    width: 10rem;
    height: 7.75rem;
    background: url("images/jitter/course-overview.svg") no-repeat center / contain;
    pointer-events: none;
  }
}

/* ---------- Top header ---------- */
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app header[role="banner"] {
  background-color: rgba(255, 255, 255, 0.82) !important;
  border-bottom-color: var(--jt-border) !important;
  box-shadow: none !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app header[role="banner"] h1,
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app header[role="banner"] > h2 {
  color: var(--jt-ink) !important;
  font-weight: 700;
  letter-spacing: -0.01em;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #open-sidebar {
  border-radius: 9999px;
  color: var(--jt-ink) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #open-sidebar:hover {
  background-color: var(--jt-accent-soft) !important;
}

/* ---------- Sidebar ---------- */
/* pastel wash + pale Jitter motifs; every tone stays light so ink menu text keeps AA contrast */
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #sidebar {
  background:
    url("images/jitter/sidebar.svg") center bottom / 100% auto no-repeat,
    radial-gradient(16rem 12rem at 0% 0%, rgba(181, 147, 255, 0.3), transparent 70%),
    radial-gradient(14rem 14rem at 110% 45%, rgba(196, 227, 255, 0.45), transparent 70%),
    radial-gradient(16rem 14rem at 0% 100%, rgba(230, 255, 138, 0.38), transparent 70%),
    linear-gradient(180deg, #f5f0ff 0%, #fbf9ff 48%, #f8fcec 100%) !important;
  border-color: #e2d6ff !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #sidebar a[href="intro.html"].bg-white {
  background-color: transparent !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #sidebar .text-slate-500 {
  color: var(--jt-muted) !important;
}
@media (min-width: 768px) {
  html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #sidebar {
    box-shadow: none !important;
  }
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #sidebar .sm-link,
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #sidebar .sm-sublink {
  border-left-color: transparent !important;
  border-radius: 9999px;
  padding-left: 0.75rem;
  color: var(--jt-ink) !important;
  font-weight: 500;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #sidebar .sm-sublink {
  padding-left: 1.75rem;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #sidebar .sm-link + .sm-link,
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #sidebar nav > ul > li + li {
  margin-top: 2px;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #sidebar .sm-link i,
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #sidebar .sm-sublink i:not(.fa-discord):not(.fa-line) {
  color: var(--jt-muted);
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #sidebar .sm-link:hover,
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #sidebar .sm-sublink:hover {
  background-color: rgba(255, 255, 255, 0.85) !important;
  box-shadow: inset 0 0 0 1px #d9c8ff;
  color: var(--jt-ink) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #sidebar .sm-link:hover i,
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #sidebar .sm-sublink:hover i:not(.fa-discord):not(.fa-line) {
  color: var(--jt-accent);
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #sidebar a[aria-current="page"] {
  background-color: var(--jt-ink) !important;
  color: #fff !important;
  font-weight: 600;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #sidebar a[aria-current="page"] i {
  color: var(--jt-brand) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #sidebar details {
  border-left-color: transparent !important;
  border-radius: 18px;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #sidebar details[open] {
  background-color: rgba(255, 255, 255, 0.6) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #sidebar .border-slate-100,
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #sidebar .border-slate-200 {
  border-color: rgba(122, 64, 237, 0.14) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app :is(#collapse-sidebar, #close-sidebar):hover {
  background-color: rgba(255, 255, 255, 0.85) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #sidebar details > summary:hover {
  background-color: transparent !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #sidebar a:focus-visible,
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #sidebar button:focus-visible,
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #sidebar summary:focus-visible {
  outline: 3px solid var(--jt-accent) !important;
  outline-offset: 2px;
  box-shadow: none !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #sidebar #user-avatar {
  --tw-ring-color: var(--jt-brand) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #sidebar #user-info {
  color: var(--jt-ink) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #collapse-sidebar,
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #close-sidebar {
  border-radius: 9999px;
}

/* ---------- A11y toolbar: high-contrast toggle as a moon/sun icon ---------- */
/* not gated by contrast mode so the button keeps its shape after switching to high contrast */
body.va-theme-jitter-app .dots-a11y-hc-btn {
  justify-content: center;
  gap: 0;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border-radius: 9999px;
  flex-shrink: 0;
}
body.va-theme-jitter-app .dots-a11y-help-btn {
  width: 2.25rem;
  height: 2.25rem;
  font-size: 1rem;
}
body.va-theme-jitter-app .dots-a11y-hc-icon {
  display: none;
}
body.va-theme-jitter-app .dots-a11y-hc-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
body.va-theme-jitter-app .dots-a11y-hc-glyph {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
body.va-theme-jitter-app .dots-a11y-hc-sun,
body.va-theme-jitter-app .dots-a11y-hc-btn[aria-pressed="true"] .dots-a11y-hc-moon {
  display: none;
}
body.va-theme-jitter-app .dots-a11y-hc-btn[aria-pressed="true"] .dots-a11y-hc-sun {
  display: block;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app .dots-a11y-hc-btn,
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app .dots-a11y-help-btn {
  border-color: var(--jt-border);
  background: var(--jt-surface);
  color: var(--jt-ink);
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app .dots-a11y-help-btn {
  color: var(--jt-muted);
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app .dots-a11y-hc-btn:hover,
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app .dots-a11y-help-btn:hover {
  border-color: var(--jt-brand);
  background: var(--jt-accent-soft);
  color: var(--jt-accent-deep);
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app .dots-a11y-hc-btn:focus-visible,
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app .dots-a11y-help-btn:focus-visible {
  outline: 3px solid var(--jt-accent);
  outline-offset: 2px;
}

/* ---------- Shared surfaces inside main ---------- */
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app main .text-slate-800,
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app main .text-slate-900,
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app main .text-slate-700 {
  color: var(--jt-ink) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app main .text-slate-600,
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app main .text-slate-500 {
  color: var(--jt-muted) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app main .text-slate-400 {
  color: #6e6c75 !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app main .border-slate-200,
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app main .border-slate-100 {
  border-color: var(--jt-border) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app main .text-sky-500,
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app main .text-sky-600 {
  color: var(--jt-accent) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app main .hover\:text-sky-700:hover {
  color: var(--jt-accent-deep) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app .focus-ring:focus-visible {
  outline: 3px solid var(--jt-accent) !important;
  outline-offset: 2px;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app .dots-skip-link {
  background: var(--jt-ink);
  color: #fff;
}

/* ---------- dashboard.html ---------- */
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #dashboard-section {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #dashboard-section.card-hover:hover {
  transform: none;
  box-shadow: none;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #dashboard-section > div {
  padding-left: 0;
  padding-right: 0;
  padding-top: 0.25rem;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #dashboard-section h2 {
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--jt-ink) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #dashboard-section h2 > i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 14px;
  background: var(--jt-ink);
  color: var(--jt-brand) !important;
  font-size: 1.15rem;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #dashboard-cards > article {
  border-radius: 24px;
  border-color: var(--jt-border) !important;
  box-shadow: var(--jt-shadow-sm);
  padding: 1.5rem;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #dashboard-cards > article h3 {
  font-weight: 700;
}
/* icon tiles: pastel squircles with ink glyphs */
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #dashboard-cards .rounded-xl.text-white[aria-hidden="true"] {
  border-radius: 14px;
  color: var(--jt-ink) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #dashboard-cards .rounded-xl.text-white.bg-sky-600 { background-color: var(--jt-brand) !important; }
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #dashboard-cards .rounded-xl.text-white.bg-emerald-600 { background-color: var(--jt-lime) !important; }
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #dashboard-cards .rounded-xl.text-white.bg-amber-600 { background-color: var(--jt-peach) !important; }
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #dashboard-cards .rounded-xl.text-white.bg-violet-600 { background-color: var(--jt-sky) !important; }

html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #dashboard-cards .bg-slate-50 {
  background-color: var(--jt-bg) !important;
  border-color: transparent !important;
  border-radius: 18px;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #dashboard-cards button.bg-slate-50:hover {
  background-color: var(--jt-accent-soft) !important;
  border-color: #d4c4fb !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #dash-summary .text-xl {
  font-size: 1.75rem;
  line-height: 2rem;
  font-weight: 700;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #dash-summary .text-xl.text-slate-800 {
  color: var(--jt-ink) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #dash-summary .text-emerald-600 {
  color: #047857 !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #dash-summary .text-amber-600 {
  color: #b45309 !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app .dash-progress-pct {
  background-color: var(--jt-ink) !important;
  border-color: var(--jt-ink) !important;
  color: #fff !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #dash-recommended-list > article {
  border-radius: 20px;
  background-color: var(--jt-surface) !important;
  border: 1px solid var(--jt-border) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #dash-recommended-list > article > div:first-child {
  border-radius: 20px 20px 0 0;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #dash-recommended-list a.bg-violet-600 {
  border-radius: 9999px;
  background-color: var(--jt-brand) !important;
  color: var(--jt-ink) !important;
  font-weight: 700;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #dash-recommended-list a.bg-violet-600:hover {
  background-color: var(--jt-brand-hover) !important;
}

/* ---------- my-learning.html ---------- */
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app section[aria-labelledby="my-courses-heading"],
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app section[aria-labelledby="browse-heading"],
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app section[aria-labelledby="certs-heading"],
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app section[aria-labelledby="grades-heading"] {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0.25rem;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #my-courses-heading,
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #browse-heading,
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #certs-heading,
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #grades-heading,
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #profile-heading {
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
  gap: 0.75rem;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #my-courses-heading > i,
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #browse-heading > i,
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #certs-heading > i,
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #grades-heading > i,
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #profile-heading > i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 14px;
  background: var(--jt-ink);
  color: var(--jt-brand) !important;
  font-size: 1.15rem;
}
/* the two group headings ("กำลังเรียน" / "หลักสูตรที่เรียนจบ") share one style */
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #enrolled-content > div > h3 {
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 700;
  color: var(--jt-ink) !important;
  gap: 0.625rem;
  margin-bottom: 0.875rem;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #enrolled-content > div > h3 > i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 10px;
  font-size: 0.85rem;
  color: var(--jt-ink) !important;
  background: var(--jt-brand);
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #enrolled-content > div > h3 > i.fa-circle-check {
  background: var(--jt-lime);
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #enrolled-content > div + div {
  padding-top: 0.5rem;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #enrolled-content > div > p a {
  color: var(--jt-accent) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #enrolled-content > div > p a:hover {
  color: var(--jt-accent-deep) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #enrolled-empty,
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #browse-empty,
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #certificates-empty,
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #grades-empty {
  background: var(--jt-surface) !important;
  border: 1px solid var(--jt-border) !important;
  border-radius: 24px;
  box-shadow: var(--jt-shadow-sm);
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #enrolled-empty a,
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #browse-empty a,
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #certificates-empty a,
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #grades-empty a {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  background: var(--jt-brand) !important;
  color: var(--jt-ink) !important;
  font-weight: 700;
  text-decoration: none;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #enrolled-empty a:hover,
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #browse-empty a:hover,
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #certificates-empty a:hover,
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #grades-empty a:hover {
  background: var(--jt-brand-hover) !important;
}

/* course cards */
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app .enrolled-card,
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app .browse-card {
  background-color: var(--jt-surface) !important;
  border: 1px solid var(--jt-border) !important;
  border-radius: 24px;
  box-shadow: var(--jt-shadow-sm);
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app .enrolled-card.card-hover:hover,
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app .browse-card.card-hover:hover {
  box-shadow: var(--jt-shadow);
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app .enrolled-card:focus-visible {
  outline: 3px solid var(--jt-accent);
  outline-offset: 3px;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app .enrolled-card > div:first-child,
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app .browse-card > a:first-child > div {
  border-radius: 0;
  background-color: var(--jt-bg) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app .enrolled-card > div:first-child > i,
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app .browse-card > a:first-child > div > i {
  color: #a9a7b0 !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app .enrolled-card > div.p-4 {
  padding: 1.125rem 1.25rem 1.25rem;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app .enrolled-card h4 {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--jt-ink) !important;
}
/* progress: percent chip + bar */
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app .enrolled-card .rounded-full.text-xs.font-semibold.border {
  border: 0 !important;
  background-color: var(--jt-ink) !important;
  color: #fff !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #enrolled-completed .enrolled-card .rounded-full.text-xs.font-semibold.border {
  background-color: var(--jt-lime) !important;
  color: var(--jt-ink) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app .enrolled-card [role="progressbar"] {
  height: 0.5rem;
  border: 0 !important;
  background-color: #e4e2e8 !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app .enrolled-card [role="progressbar"] > div {
  background-color: var(--jt-accent) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #enrolled-completed .enrolled-card [role="progressbar"] > div {
  background-color: #047857 !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app .enrolled-card .text-emerald-700 {
  color: #047857 !important;
}
/* actions */
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app .enrolled-card .flex-wrap > a,
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app .enrolled-card .flex-wrap > span,
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app .enrolled-card .btn-unenroll {
  border-radius: 9999px;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app .enrolled-card a.bg-sky-500 {
  padding-left: 1rem;
  padding-right: 1rem;
  background-color: var(--jt-brand) !important;
  color: var(--jt-ink) !important;
  font-weight: 700;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app .enrolled-card a.bg-sky-500:hover {
  background-color: var(--jt-brand-hover) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app .enrolled-card a.bg-emerald-100 {
  padding-left: 1rem;
  padding-right: 1rem;
  background-color: var(--jt-lime) !important;
  color: var(--jt-ink) !important;
  font-weight: 700;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app .enrolled-card a.bg-emerald-100:hover {
  background-color: #d6f25c !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app .enrolled-card span.bg-slate-100 {
  background-color: var(--jt-bg) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app .enrolled-card .btn-unenroll {
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--jt-border) !important;
  background-color: var(--jt-surface) !important;
  color: var(--jt-muted) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app .enrolled-card .btn-unenroll:hover {
  border-color: #fca5a5 !important;
  background-color: #fef2f2 !important;
  color: #b91c1c !important;
}

/* ---------- course-learning.html ---------- */
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app section[aria-labelledby="browse-heading"] > p {
  margin-top: -0.75rem;
  margin-bottom: 1.5rem;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app .browse-card > a:first-child:focus-visible {
  outline: 3px solid var(--jt-accent);
  outline-offset: -3px;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app .browse-card > div {
  padding: 1.125rem 1.25rem 1.25rem;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app .browse-card h3 {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--jt-ink) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app .browse-card a:hover h3 {
  color: var(--jt-accent-deep) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app .browse-card .flex.gap-2 > a,
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app .browse-card .btn-enroll {
  border-radius: 9999px;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app .browse-card .flex.gap-2 > a {
  border: 1px solid var(--jt-border);
  background-color: var(--jt-surface) !important;
  color: var(--jt-ink) !important;
  font-weight: 600;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app .browse-card .flex.gap-2 > a:hover {
  border-color: var(--jt-brand);
  background-color: var(--jt-accent-soft) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app .browse-card .btn-enroll.bg-amber-500 {
  padding-left: 1rem;
  padding-right: 1rem;
  background-color: var(--jt-brand) !important;
  color: var(--jt-ink) !important;
  font-weight: 700;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app .browse-card .btn-enroll.bg-amber-500:hover {
  background-color: var(--jt-brand-hover) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app .browse-card .btn-enroll.bg-slate-100 {
  background-color: var(--jt-bg) !important;
}

/* ---------- my-certificates.html ---------- */
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app section[aria-labelledby="certs-heading"] > p:first-of-type {
  margin-top: -0.75rem;
  margin-bottom: 1.5rem;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app section[aria-labelledby="certs-heading"] > p:first-of-type a {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 1rem;
  border: 1px solid var(--jt-border);
  border-radius: 9999px;
  background: var(--jt-surface);
  color: var(--jt-ink) !important;
  font-weight: 600;
  text-decoration: none;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app section[aria-labelledby="certs-heading"] > p:first-of-type a:hover {
  border-color: var(--jt-brand);
  background: var(--jt-accent-soft);
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #certificates-empty > i,
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #grades-empty > i {
  color: #a9a7b0 !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #certificates-waiting-block {
  padding: 1.25rem;
  border: 1px solid #e3d7fd !important;
  border-radius: 20px;
  background-color: var(--jt-accent-soft) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #certificates-waiting-block h3 {
  font-size: 1rem;
  font-weight: 700;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #certificates-waiting-block h3 > i {
  color: var(--jt-accent) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #certificates-waiting-list ul {
  border-color: var(--jt-border) !important;
  border-radius: 14px;
  background: var(--jt-surface);
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #certificates-waiting-list .text-emerald-500 {
  color: #047857 !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app .cert-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.25rem;
  border: 1px solid var(--jt-border) !important;
  border-radius: 24px;
  background-color: var(--jt-surface) !important;
  box-shadow: var(--jt-shadow-sm);
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app .cert-card.card-hover:hover {
  box-shadow: var(--jt-shadow);
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app .cert-card > div:first-child {
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app .cert-card > div:first-child > i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 12px;
  background: var(--jt-peach);
  color: var(--jt-ink) !important;
  font-size: 1.05rem;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app .cert-card h4 {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--jt-ink) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app .cert-card code {
  background-color: var(--jt-bg) !important;
  color: var(--jt-ink);
  border-radius: 8px;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app .cert-card .btn-download-cert {
  margin-top: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 9999px;
  background-color: var(--jt-brand) !important;
  color: var(--jt-ink) !important;
  font-weight: 700;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app .cert-card .btn-download-cert:hover {
  background-color: var(--jt-brand-hover) !important;
}

/* ---------- grading-student.html ---------- */
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app section[aria-labelledby="grades-heading"] > h2 + p {
  margin-top: -0.75rem;
  margin-bottom: 1.5rem;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app section[aria-labelledby="grades-heading"] label {
  color: var(--jt-ink) !important;
  font-weight: 600;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #filter-course {
  padding: 0.55rem 2.25rem 0.55rem 1rem;
  border: 1px solid var(--jt-border) !important;
  border-radius: 9999px;
  background-color: var(--jt-surface);
  color: var(--jt-ink) !important;
  font-weight: 500;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #filter-course:hover {
  border-color: var(--jt-brand) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #filter-course:focus-visible {
  outline: 3px solid var(--jt-accent);
  outline-offset: 2px;
  box-shadow: none;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #grades-content {
  border: 1px solid var(--jt-border) !important;
  border-radius: 24px;
  background: var(--jt-surface);
  box-shadow: var(--jt-shadow-sm);
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #grades-content thead {
  background-color: var(--jt-bg) !important;
  border-bottom-color: var(--jt-border) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #grades-content thead th {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
  color: var(--jt-muted) !important;
  font-weight: 600;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #grades-content thead th:first-child {
  padding-left: 1.25rem;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #grades-tbody tr {
  border-bottom-color: var(--jt-border) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #grades-tbody tr:last-child {
  border-bottom: 0;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #grades-tbody tr:hover {
  background-color: var(--jt-accent-soft) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #grades-tbody th {
  padding-left: 1.25rem;
  font-weight: 600;
  color: var(--jt-ink) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #grades-tbody td:nth-of-type(2) {
  color: var(--jt-ink) !important;
  font-weight: 700;
}

/* ---------- profile.html ---------- */
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app section[aria-labelledby="profile-heading"] {
  border: 1px solid var(--jt-border) !important;
  border-radius: 28px;
  box-shadow: var(--jt-shadow-sm) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app section[aria-labelledby="profile-heading"].card-hover:hover {
  transform: none;
  box-shadow: var(--jt-shadow-sm) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #profile-form > div:first-child {
  border-bottom-color: var(--jt-border) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #profile-photo-preview {
  border-color: var(--jt-border) !important;
  --tw-ring-color: var(--jt-accent-soft);
  background-color: var(--jt-bg) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app label[for="profile-photo-input"] {
  background-color: var(--jt-ink) !important;
  color: var(--jt-brand) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app label[for="profile-photo-input"]:hover {
  background-color: var(--jt-accent-deep) !important;
  color: #fff !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #profile-photo-heading {
  font-size: 1rem;
  font-weight: 700;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #btn-remove-profile-photo {
  border-radius: 9999px;
  border-color: var(--jt-border) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #btn-remove-profile-photo:hover {
  border-color: var(--jt-brand) !important;
  background-color: var(--jt-accent-soft) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #btn-remove-profile-photo .text-sky-500 {
  color: var(--jt-accent) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #profile-form label.block {
  color: var(--jt-ink) !important;
  font-weight: 600;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #profile-form input:not([type="radio"]):not([type="file"]),
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #profile-form select,
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #profile-form textarea {
  border-color: var(--jt-border) !important;
  border-radius: 14px;
  color: var(--jt-ink) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #profile-form input:not([type="radio"]):not([type="file"]):not([readonly]):hover,
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #profile-form select:hover,
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #profile-form textarea:hover {
  border-color: #cfc3f5 !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #profile-form input:not([type="radio"]):not([type="file"]):focus,
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #profile-form select:focus,
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #profile-form textarea:focus {
  border-color: var(--jt-accent) !important;
  box-shadow: 0 0 0 3px rgba(122, 64, 237, 0.22) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #profile-form input[readonly] {
  background-color: var(--jt-bg) !important;
  color: var(--jt-muted) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #profile-form input::placeholder,
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #profile-form textarea::placeholder {
  color: #6e6c75;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #save-btn {
  border-radius: 9999px;
  background-color: var(--jt-brand) !important;
  color: var(--jt-ink) !important;
  font-weight: 700;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #save-btn:hover:not(:disabled) {
  background-color: var(--jt-brand-hover) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #cancel-btn {
  border: 1px solid var(--jt-border);
  border-radius: 9999px;
  background-color: var(--jt-surface) !important;
  color: var(--jt-ink) !important;
  font-weight: 600;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #cancel-btn:hover {
  border-color: var(--jt-brand);
  background-color: var(--jt-accent-soft) !important;
}

/* ---------- course-learn.html ---------- */
/* lesson content authored by teachers, and the simulator device surfaces (phone, iPad, laptop,
 * chat console, data workbench), keep their original Tailwind colours — some sit on dark screens */
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app :is(#player-content, [class*="srf-"], #job-phone-mount, .jcs-shell, .jdw-shell, .jdw-panel, .ipad-stage, .laptop-lid) .text-slate-900 { color: #0f172a !important; }
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app :is(#player-content, [class*="srf-"], #job-phone-mount, .jcs-shell, .jdw-shell, .jdw-panel, .ipad-stage, .laptop-lid) .text-slate-800 { color: #1e293b !important; }
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app :is(#player-content, [class*="srf-"], #job-phone-mount, .jcs-shell, .jdw-shell, .jdw-panel, .ipad-stage, .laptop-lid) .text-slate-700 { color: #334155 !important; }
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app :is(#player-content, [class*="srf-"], #job-phone-mount, .jcs-shell, .jdw-shell, .jdw-panel, .ipad-stage, .laptop-lid) .text-slate-600 { color: #475569 !important; }
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app :is(#player-content, [class*="srf-"], #job-phone-mount, .jcs-shell, .jdw-shell, .jdw-panel, .ipad-stage, .laptop-lid) .text-slate-500 { color: #64748b !important; }
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app :is(#player-content, [class*="srf-"], #job-phone-mount, .jcs-shell, .jdw-shell, .jdw-panel, .ipad-stage, .laptop-lid) .text-slate-400 { color: #94a3b8 !important; }
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app :is(#player-content, [class*="srf-"], #job-phone-mount, .jcs-shell, .jdw-shell, .jdw-panel, .ipad-stage, .laptop-lid) .text-sky-500 { color: #0ea5e9 !important; }
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app :is(#player-content, [class*="srf-"], #job-phone-mount, .jcs-shell, .jdw-shell, .jdw-panel, .ipad-stage, .laptop-lid) .text-sky-600 { color: #0284c7 !important; }
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app :is(#player-content, [class*="srf-"], #job-phone-mount, .jcs-shell, .jdw-shell, .jdw-panel, .ipad-stage, .laptop-lid) .border-slate-200 { border-color: #e2e8f0 !important; }
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app :is(#player-content, [class*="srf-"], #job-phone-mount, .jcs-shell, .jdw-shell, .jdw-panel, .ipad-stage, .laptop-lid) .border-slate-100 { border-color: #f1f5f9 !important; }

html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #link-student-certificate,
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #btn-sim-result,
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #link-student-grades {
  border: 1px solid var(--jt-border);
  border-radius: 9999px;
  background-color: var(--jt-surface) !important;
  color: var(--jt-ink) !important;
  font-weight: 600;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #link-student-certificate {
  border-color: #ffbf9b;
  background-color: var(--jt-peach) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #link-student-certificate > i {
  color: var(--jt-ink) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #btn-sim-result > i,
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #link-student-grades > i {
  color: var(--jt-accent) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #btn-sim-result:hover,
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #link-student-grades:hover {
  border-color: var(--jt-brand);
  background-color: var(--jt-accent-soft) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #link-student-certificate:hover {
  background-color: #ffc4a3 !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #sim-result-dropdown {
  border-color: var(--jt-border) !important;
  border-radius: 16px;
  box-shadow: var(--jt-shadow) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #learn-progress-wrap,
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #player-section,
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #learn-course-details-wrap,
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #section-content-list > .section {
  border: 1px solid var(--jt-border) !important;
  border-radius: 24px;
  background-color: var(--jt-surface) !important;
  box-shadow: var(--jt-shadow-sm) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #learn-progress-wrap {
  padding: 1rem 1.25rem;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #learn-progress-label {
  font-weight: 600;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app:not(.va-theme-jitter-ext) #progress-text {
  padding: 0.1rem 0.6rem;
  border-radius: 9999px;
  background-color: var(--jt-ink);
  color: #fff !important;
  font-variant-numeric: tabular-nums;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #learn-progress-track {
  height: 0.625rem;
  background-color: var(--jt-bg) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #progress-bar {
  background-color: var(--jt-accent) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #player-section > div:first-child {
  padding: 1rem 1.25rem;
  background-color: var(--jt-surface) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #player-lesson-title,
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #course-title {
  font-weight: 700;
  letter-spacing: -0.01em;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #player-placeholder {
  color: #c9c6d0 !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #player-actions .flex.justify-end > #btn-mark-complete {
  border-radius: 9999px;
  font-weight: 700;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #btn-mark-complete.btn-mark-complete-pending {
  background-color: var(--jt-brand) !important;
  color: var(--jt-ink) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #btn-mark-complete.btn-mark-complete-pending:hover:not(:disabled) {
  background-color: var(--jt-brand-hover) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #btn-mark-complete.bg-emerald-500 {
  background-color: var(--jt-lime) !important;
  color: var(--jt-ink) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #btn-learn-prev,
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #btn-learn-next {
  border-radius: 9999px;
  font-weight: 700;
  white-space: nowrap;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #btn-learn-prev {
  border-color: var(--jt-border) !important;
  background-color: var(--jt-surface) !important;
  color: var(--jt-ink) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #btn-learn-prev:hover {
  border-color: var(--jt-brand) !important;
  background-color: var(--jt-accent-soft) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #btn-learn-next {
  border-color: var(--jt-ink) !important;
  background-color: var(--jt-brand) !important;
  color: var(--jt-ink) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #btn-learn-next:hover {
  background-color: var(--jt-brand-hover) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #learn-sections-outline-wrap > div:first-child > h2 {
  font-size: 1.125rem;
  font-weight: 700;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #btn-sections-toggle-all {
  border: 1px solid var(--jt-border);
  border-radius: 9999px;
  background-color: var(--jt-surface) !important;
  color: var(--jt-ink) !important;
  font-weight: 600;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #btn-sections-toggle-all:hover:not(:disabled) {
  border-color: var(--jt-brand);
  background-color: var(--jt-accent-soft) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #section-content-list .section-collapse-toggle {
  border-radius: 24px 24px 0 0;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #section-content-list .section.is-collapsed .section-collapse-toggle {
  border-radius: 24px;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #section-content-list .section-collapse-toggle:hover {
  background-color: var(--jt-accent-soft) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #section-content-list .section-collapse-toggle > .fa-folder-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 10px;
  background-color: var(--jt-ink);
  color: var(--jt-brand) !important;
  font-size: 0.85rem;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #section-content-list .section-item-count {
  border-color: var(--jt-border) !important;
  background-color: var(--jt-bg) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #section-content-list .lesson-btn {
  border-radius: 14px;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #section-content-list .lesson-btn.border-transparent:not(:disabled):hover {
  background-color: var(--jt-accent-soft) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #section-content-list .lesson-btn.bg-emerald-50 {
  border-color: #dcef8f !important;
  background-color: #f7ffd6 !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #section-content-list .lesson-btn.bg-emerald-50:hover {
  background-color: #efffb3 !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #section-content-list .lesson-btn .text-emerald-500 {
  color: #047857 !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #section-content-list .lesson-btn.bg-slate-50 {
  border-color: var(--jt-border) !important;
  background-color: var(--jt-bg) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #learn-content > .rounded-xl.p-6.text-center {
  border-radius: 24px;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #learn-content > .rounded-xl.p-6.text-center a {
  border-radius: 9999px;
  font-weight: 700;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #learn-content > .rounded-xl.p-6.text-center a.bg-sky-500 {
  background-color: var(--jt-brand) !important;
  color: var(--jt-ink) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #learn-content > .rounded-xl.p-6.text-center a.bg-sky-500:hover {
  background-color: var(--jt-brand-hover) !important;
}

/* ---------- course-overview.html (logged-in learner layout) ---------- */
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #auth-header > div:first-child > span {
  color: var(--jt-ink) !important;
  font-weight: 700;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app .co-spinner {
  border-color: var(--jt-accent-soft);
  border-top-color: var(--jt-accent);
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #error-content a.bg-purple-600 {
  border-radius: 9999px;
  background-color: var(--jt-brand) !important;
  color: var(--jt-ink) !important;
  font-weight: 700;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #error-content a.bg-purple-600:hover {
  background-color: var(--jt-brand-hover) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app .co-hero {
  padding-bottom: 0.5rem;
  background: transparent;
  border-bottom: 0;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app .co-hero #course-title {
  color: var(--jt-ink) !important;
  font-weight: 800;
  letter-spacing: -0.015em;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #overview-content details.co-collapse:not(.co-topic-chapter) {
  padding: 1rem 1.25rem 1.25rem;
  border: 1px solid var(--jt-border);
  border-radius: 24px;
  background: var(--jt-surface);
  box-shadow: var(--jt-shadow-sm);
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #overview-content .space-y-8 > * + * {
  margin-top: 1rem !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #overview-content details.co-collapse:not(.co-topic-chapter):not([open]) {
  padding-bottom: 1rem;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #overview-content details.co-collapse:not([open]) > summary.co-section-title {
  margin-bottom: 0;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #overview-content .co-section-title {
  font-size: 1.125rem;
  color: var(--jt-ink);
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #overview-content .co-section-title .co-collapse-label > i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 12px;
  background-color: var(--jt-ink);
  color: var(--jt-brand);
  font-size: 0.95rem;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #overview-content .co-collapse-label {
  gap: 0.75rem;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #overview-content .co-collapse > summary.co-section-title:hover,
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #overview-content .co-topic-chapter-title:hover {
  color: var(--jt-accent-deep);
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #overview-content .co-collapse-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  background-color: var(--jt-bg);
  color: var(--jt-ink);
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #overview-content .co-collapse > summary:focus-visible,
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #overview-content .co-topic-chapter-title:focus-visible {
  outline-color: var(--jt-accent);
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #overview-content .co-section-body {
  padding-left: 0;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #overview-content .co-topic-chapter {
  border-color: var(--jt-border);
  border-radius: 16px;
  background: var(--jt-bg);
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #overview-content .co-topic-chapter-title {
  color: var(--jt-ink);
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #overview-content .co-topic-chapter .co-collapse-chevron {
  background-color: var(--jt-surface);
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #overview-topics-list .text-emerald-500 {
  color: var(--jt-accent) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #overview-content .co-note-box {
  border-color: #ffbf9b;
  border-radius: 16px;
  background: #fff3eb;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #overview-content .co-note-box .text-amber-800 {
  color: #7c2d12 !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app .co-sidebar-card {
  border-color: var(--jt-border);
  border-radius: 28px;
  box-shadow: var(--jt-shadow);
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app .co-sidebar-card > div:first-child {
  border-radius: 28px 28px 0 0;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #cover-placeholder {
  background: linear-gradient(135deg, var(--jt-brand) 0%, var(--jt-sky) 55%, var(--jt-lime) 100%) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #cover-placeholder > i {
  color: rgba(25, 23, 28, 0.6) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app .co-btn-enroll,
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app .co-btn-learn {
  border-radius: 9999px;
  background: var(--jt-brand);
  color: var(--jt-ink);
  box-shadow: none;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app .co-btn-enroll:hover,
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app .co-btn-learn:hover {
  filter: none;
  background: var(--jt-brand-hover);
  box-shadow: 0 8px 20px rgba(122, 64, 237, 0.22);
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app .co-btn-enroll:focus-visible,
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app .co-btn-learn:focus-visible {
  outline: 3px solid var(--jt-accent);
  outline-offset: 3px;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app .co-btn-enroll:disabled {
  cursor: progress;
  opacity: 0.8;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app .co-info-icon {
  border-radius: 12px;
  color: var(--jt-ink) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app .co-info-icon.bg-purple-50 {
  background-color: var(--jt-accent-soft) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app .co-info-icon.bg-emerald-50 {
  background-color: var(--jt-lime) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app .co-info-icon.bg-amber-50 {
  background-color: var(--jt-peach) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app .co-sidebar-card .co-info-row p.text-xs {
  color: var(--jt-muted) !important;
  letter-spacing: 0.04em;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #overview-instructors-list .text-violet-500 {
  color: var(--jt-accent) !important;
}

/* ---------- Pages opened from course-learn (body.va-theme-jitter-ext) ----------
 * quiz / survey / discussion / grades / passports / debrief and the simulators.
 * Simulator device surfaces (phone, iPad, laptop, chat console, data workbench) are left untouched. */

/* cards */
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-ext main .bg-white.rounded-2xl:not(:is(#player-content, [class*="srf-"], #job-phone-mount, .jcs-shell, .jdw-shell, .jdw-panel, .ipad-stage, .laptop-lid) *) {
  border-color: var(--jt-border) !important;
  border-radius: 24px;
  box-shadow: var(--jt-shadow-sm) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-ext main .bg-white.rounded-xl.border:not(:is(#player-content, [class*="srf-"], #job-phone-mount, .jcs-shell, .jdw-shell, .jdw-panel, .ipad-stage, .laptop-lid) *) {
  border-color: var(--jt-border) !important;
  border-radius: 18px;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-ext main .rounded-xl.bg-slate-50:not(:is(#player-content, [class*="srf-"], #job-phone-mount, .jcs-shell, .jdw-shell, .jdw-panel, .ipad-stage, .laptop-lid) *) {
  border-color: var(--jt-border) !important;
  border-radius: 16px;
  background-color: var(--jt-bg) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-ext main .overflow-x-auto.rounded-xl.border {
  border-radius: 16px;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-ext main thead.bg-slate-50 {
  background-color: var(--jt-bg) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-ext main h2:is(.text-xl, .text-2xl):not(:is(#player-content, [class*="srf-"], #job-phone-mount, .jcs-shell, .jdw-shell, .jdw-panel, .ipad-stage, .laptop-lid) *) {
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* semantic tinted sections keep their meaning, in Jitter pastels */
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-ext main .rounded-2xl.bg-emerald-50 {
  border-color: #dcef8f !important;
  border-radius: 24px;
  background-color: #f7ffd6 !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-ext main .rounded-2xl.bg-amber-50 {
  border-color: #ffd2b8 !important;
  border-radius: 24px;
  background-color: #fff3ea !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-ext main .rounded-2xl.bg-violet-50 {
  border-color: #e2d6ff !important;
  border-radius: 24px;
  background-color: var(--jt-accent-soft) !important;
}

/* sky / teal accents → Jitter violet */
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-ext main :is(.text-sky-700, .text-sky-800, .text-teal-800):not(:is(#player-content, [class*="srf-"], #job-phone-mount, .jcs-shell, .jdw-shell, .jdw-panel, .jdw-mode-picker, .ipad-stage, .laptop-lid) *) {
  color: var(--jt-accent-deep) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-ext main .text-teal-700:not(:is(#player-content, [class*="srf-"], #job-phone-mount, .jcs-shell, .jdw-shell, .jdw-panel, .jdw-mode-picker, .ipad-stage, .laptop-lid) *) {
  color: var(--jt-accent) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-ext main :is(.bg-sky-50, .bg-sky-100):not(a):not(button):not(:is(#player-content, [class*="srf-"], #job-phone-mount, .jcs-shell, .jdw-shell, .jdw-panel, .ipad-stage, .laptop-lid) *) {
  background-color: var(--jt-accent-soft) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-ext main :is(.border-sky-200, .border-teal-200):not(:is(#player-content, [class*="srf-"], #job-phone-mount, .jcs-shell, .jdw-shell, .jdw-panel, .jdw-mode-picker, .ipad-stage, .laptop-lid) *) {
  border-color: #d9c8ff !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-ext main .border-sky-400:not(:is(#player-content, [class*="srf-"], #job-phone-mount, .jcs-shell, .jdw-shell, .jdw-panel, .ipad-stage, .laptop-lid) *) {
  border-color: var(--jt-brand) !important;
}

/* primary actions: lilac pill with ink text */
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-ext main :is(a, button):is(.bg-sky-500, .bg-sky-600, .bg-brand, .bg-violet-500, .bg-violet-600, .bg-emerald-500, .bg-teal-600, .bg-teal-700):not(:is(#player-content, [class*="srf-"], #job-phone-mount, .jcs-shell, .jdw-shell, .jdw-panel, .ipad-stage, .laptop-lid) *) {
  background-color: var(--jt-brand) !important;
  background-image: none !important;
  color: var(--jt-ink) !important;
  border-radius: 9999px;
  font-weight: 700;
  box-shadow: none !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-ext main :is(a, button):is(.bg-sky-500, .bg-sky-600, .bg-brand, .bg-violet-500, .bg-violet-600, .bg-emerald-500, .bg-teal-600, .bg-teal-700):not(:is(#player-content, [class*="srf-"], #job-phone-mount, .jcs-shell, .jdw-shell, .jdw-panel, .ipad-stage, .laptop-lid) *):hover:not(:disabled) {
  background-color: var(--jt-brand-hover) !important;
  opacity: 1;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-ext main :is(a, button):is(.bg-sky-500, .bg-sky-600, .bg-brand, .bg-violet-500, .bg-violet-600, .bg-emerald-500, .bg-teal-600, .bg-teal-700):not(:is(#player-content, [class*="srf-"], #job-phone-mount, .jcs-shell, .jdw-shell, .jdw-panel, .ipad-stage, .laptop-lid) *) :is(i, .text-white) {
  color: inherit !important;
}
/* retake / retest stay distinguishable from the main action: peach */
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-ext main :is(a, button).bg-amber-500:not(:is(#player-content, [class*="srf-"], #job-phone-mount, .jcs-shell, .jdw-shell, .jdw-panel, .ipad-stage, .laptop-lid) *) {
  border: 1px solid #ffbf9b;
  border-radius: 9999px;
  background-color: var(--jt-peach) !important;
  color: var(--jt-ink) !important;
  font-weight: 700;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-ext main :is(a, button).bg-amber-500:not(:is(#player-content, [class*="srf-"], #job-phone-mount, .jcs-shell, .jdw-shell, .jdw-panel, .ipad-stage, .laptop-lid) *):hover:not(:disabled) {
  background-color: #ffc4a3 !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-ext main :is(a, button).bg-amber-500 :is(i, .text-white) {
  color: inherit !important;
}

/* secondary actions: white pill with a hairline border */
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-ext main :is(a, button):is(.bg-sky-50, .bg-slate-100):not(#btn-sim-result):not(#link-student-grades):not(:is(#player-content, [class*="srf-"], #job-phone-mount, .jcs-shell, .jdw-shell, .jdw-panel, .ipad-stage, .laptop-lid) *),
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-ext main :is(#link-passport, #btn-back-lesson, #btn-cancel-reply, .dl-done-link),
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-ext main a.rounded-xl.border.border-slate-200 {
  border-color: var(--jt-border) !important;
  border-radius: 9999px;
  background-color: var(--jt-surface) !important;
  color: var(--jt-ink) !important;
  font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--jt-border);
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-ext main :is(a, button):is(.bg-sky-50, .bg-slate-100):not(#btn-sim-result):not(#link-student-grades):not(:is(#player-content, [class*="srf-"], #job-phone-mount, .jcs-shell, .jdw-shell, .jdw-panel, .ipad-stage, .laptop-lid) *):hover,
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-ext main :is(#link-passport, #btn-back-lesson, #btn-cancel-reply, .dl-done-link):hover,
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-ext main a.rounded-xl.border.border-slate-200:hover {
  border-color: var(--jt-brand) !important;
  background-color: var(--jt-accent-soft) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-ext main :is(a, button):is(.bg-sky-50, .bg-slate-100):not(#btn-sim-result):not(#link-student-grades) > i {
  color: var(--jt-accent) !important;
}

/* previous / next content bar */
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-ext main a[id^="btn-"][id$="-prev"] {
  border-color: var(--jt-border) !important;
  border-radius: 9999px;
  background-color: var(--jt-surface) !important;
  color: var(--jt-ink) !important;
  font-weight: 700;
  box-shadow: none;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-ext main a[id^="btn-"][id$="-prev"]:hover {
  border-color: var(--jt-brand) !important;
  background-color: var(--jt-accent-soft) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-ext main a[id^="btn-"][id$="-next"] {
  border-color: var(--jt-ink) !important;
  border-radius: 9999px;
  font-weight: 700;
}

/* text fields */
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-ext main :is(input:is([type="text"], [type="search"], [type="email"], [type="number"], [type="url"]), textarea, select):not(:is(#player-content, [class*="srf-"], #job-phone-mount, .jcs-shell, .jdw-shell, .jdw-panel, .jdw-mode-picker, .ipad-stage, .laptop-lid) *) {
  border-color: var(--jt-border) !important;
  border-radius: 14px;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-ext main :is(input:is([type="text"], [type="search"], [type="email"], [type="number"], [type="url"]), textarea, select):not(:is(#player-content, [class*="srf-"], #job-phone-mount, .jcs-shell, .jdw-shell, .jdw-panel, .jdw-mode-picker, .ipad-stage, .laptop-lid) *):focus {
  border-color: var(--jt-accent) !important;
  --tw-ring-color: rgba(122, 64, 237, 0.35) !important;
}

html:not([data-a11y-contrast="high"]) body.va-theme-jitter-ext:is([data-jt-page="scam-debrief"], [data-jt-page="scam-simulator"]) #main-content > div > nav:first-child {
  margin-bottom: 1rem;
}

/* job-data intro: work-type picker follows the violet accent (the workbench itself keeps teal) */
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-ext .jdw-mode-picker {
  --jdw-accent: var(--jt-accent);
  --jdw-accent-soft: var(--jt-accent-soft);
  --jdw-border: var(--jt-border);
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-ext .jdw-mode-option {
  border-radius: 18px;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-ext .jdw-mode-option:hover {
  border-color: var(--jt-brand);
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-ext .jdw-mode-option input:focus-visible {
  outline-color: var(--jt-accent);
}

/* dark result heroes → ink card with lilac / lime glow (white text stays AA) */
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-ext :is(.passport-card, .dl-passport-hero, .dl-done-hero) {
  border-radius: 28px;
  background:
    radial-gradient(26rem 18rem at 100% 0%, rgba(181, 147, 255, 0.42), transparent 70%),
    radial-gradient(20rem 14rem at 0% 100%, rgba(230, 255, 138, 0.16), transparent 70%),
    var(--jt-ink) !important;
  box-shadow: var(--jt-shadow) !important;
}
html:not([data-a11y-contrast="high"]) body.va-theme-jitter-ext .dl-done-card {
  border-color: var(--jt-border) !important;
  border-radius: 24px;
  box-shadow: var(--jt-shadow-sm) !important;
}

/* page illustrations (decorative, beside the heading; hidden on small screens) */
@media (min-width: 768px) {
  html:not([data-a11y-contrast="high"]) body.va-theme-jitter-ext[data-jt-page="quiz-take"] #quiz-title-intro,
  html:not([data-a11y-contrast="high"]) body.va-theme-jitter-ext[data-jt-page="survey-take"] #survey-title-intro,
  html:not([data-a11y-contrast="high"]) body.va-theme-jitter-ext[data-jt-page="discussion-reply"] #reply-form-heading,
  html:not([data-a11y-contrast="high"]) body.va-theme-jitter-ext[data-jt-page="scam-debrief"] #debrief-heading,
  html:not([data-a11y-contrast="high"]) body.va-theme-jitter-ext[data-jt-page="scam-passport"] #passport-title,
  html:not([data-a11y-contrast="high"]) body.va-theme-jitter-ext[data-jt-page="deep-listening-results"] #dl-passport-title,
  html:not([data-a11y-contrast="high"]) body.va-theme-jitter-ext:is([data-jt-page="job-call-simulator"], [data-jt-page="job-chat-simulator"], [data-jt-page="job-data-simulator"]) #page-title {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
  }
  html:not([data-a11y-contrast="high"]) body.va-theme-jitter-ext[data-jt-page="quiz-take"] #quiz-title-intro::after,
  html:not([data-a11y-contrast="high"]) body.va-theme-jitter-ext[data-jt-page="survey-take"] #survey-title-intro::after,
  html:not([data-a11y-contrast="high"]) body.va-theme-jitter-ext[data-jt-page="discussion-reply"] #reply-form-heading::after,
  html:not([data-a11y-contrast="high"]) body.va-theme-jitter-ext[data-jt-page="scam-debrief"] #debrief-heading::after,
  html:not([data-a11y-contrast="high"]) body.va-theme-jitter-ext[data-jt-page="scam-passport"] #passport-title::after,
  html:not([data-a11y-contrast="high"]) body.va-theme-jitter-ext[data-jt-page="deep-listening-results"] #dl-passport-title::after,
  html:not([data-a11y-contrast="high"]) body.va-theme-jitter-ext:is([data-jt-page="job-call-simulator"], [data-jt-page="job-chat-simulator"], [data-jt-page="job-data-simulator"]) #page-title::after,
  html:not([data-a11y-contrast="high"]) body.va-theme-jitter-ext[data-jt-page="course-grades-student"] section > div.flex.justify-between:has(#grades-section-heading)::after {
    content: "";
    flex: 0 0 auto;
    align-self: flex-end;
    width: 9rem;
    height: 7rem;
    margin: -2rem 0 -0.5rem auto;
    background: no-repeat right bottom / contain;
    pointer-events: none;
  }
  html:not([data-a11y-contrast="high"]) body.va-theme-jitter-ext[data-jt-page="course-grades-student"] section > div.flex.justify-between:has(#grades-section-heading)::after {
    width: 8rem;
    height: 6.25rem;
    margin: -1.5rem 0 -1rem auto;
  }
  html:not([data-a11y-contrast="high"]) body.va-theme-jitter-ext[data-jt-page="quiz-take"] #quiz-title-intro::after { background-image: url("images/jitter/quiz.svg"); }
  html:not([data-a11y-contrast="high"]) body.va-theme-jitter-ext[data-jt-page="survey-take"] #survey-title-intro::after { background-image: url("images/jitter/survey.svg"); }
  html:not([data-a11y-contrast="high"]) body.va-theme-jitter-ext[data-jt-page="discussion-reply"] #reply-form-heading::after { background-image: url("images/jitter/discussion.svg"); }
  html:not([data-a11y-contrast="high"]) body.va-theme-jitter-ext[data-jt-page="scam-debrief"] #debrief-heading::after { background-image: url("images/jitter/scam-debrief.svg"); }
  html:not([data-a11y-contrast="high"]) body.va-theme-jitter-ext[data-jt-page="scam-passport"] #passport-title::after { background-image: url("images/jitter/scam-passport.svg"); }
  html:not([data-a11y-contrast="high"]) body.va-theme-jitter-ext[data-jt-page="deep-listening-results"] #dl-passport-title::after { background-image: url("images/jitter/deep-listening-results.svg"); }
  html:not([data-a11y-contrast="high"]) body.va-theme-jitter-ext[data-jt-page="job-call-simulator"] #page-title::after { background-image: url("images/jitter/job-call.svg"); }
  html:not([data-a11y-contrast="high"]) body.va-theme-jitter-ext[data-jt-page="job-chat-simulator"] #page-title::after { background-image: url("images/jitter/job-chat.svg"); }
  html:not([data-a11y-contrast="high"]) body.va-theme-jitter-ext[data-jt-page="job-data-simulator"] #page-title::after { background-image: url("images/jitter/job-data.svg"); }
  html:not([data-a11y-contrast="high"]) body.va-theme-jitter-ext[data-jt-page="course-grades-student"] section > div.flex.justify-between:has(#grades-section-heading)::after { background-image: url("images/jitter/grades.svg"); }
}
@media (min-width: 1024px) {
  html:not([data-a11y-contrast="high"]) body.va-theme-jitter-ext[data-jt-page="job-passport"] main section > header.flex::after {
    content: "";
    flex: 0 0 auto;
    align-self: center;
    width: 8rem;
    height: 6.25rem;
    margin: -1.25rem 0 -1.25rem auto;
    background: url("images/jitter/job-passport.svg") no-repeat center / contain;
    pointer-events: none;
  }
  html:not([data-a11y-contrast="high"]) body.va-theme-jitter-ext[data-jt-page="job-passport"] main section > header.flex > #btn-refresh {
    order: 1;
  }
  html:not([data-a11y-contrast="high"]) body.va-theme-jitter-ext[data-jt-page="discussion-detail"] #discussion-comment-search-wrap > div.flex:first-child::before {
    content: "";
    flex: 0 0 auto;
    width: 6.5rem;
    height: 5rem;
    margin: -0.75rem 0;
    background: url("images/jitter/discussion.svg") no-repeat center / contain;
    pointer-events: none;
  }
}
/* centred intro cards: art in the top corner, side padding keeps the text clear of it */
@media (min-width: 1280px) {
  html:not([data-a11y-contrast="high"]) body.va-theme-jitter-ext:is([data-jt-page="scam-simulator"], [data-jt-page="deep-listening"]) #intro-panel {
    position: relative;
    padding-left: 11rem;
    padding-right: 11rem;
  }
  html:not([data-a11y-contrast="high"]) body.va-theme-jitter-ext:is([data-jt-page="scam-simulator"], [data-jt-page="deep-listening"]) #intro-panel::after {
    content: "";
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    width: 9rem;
    height: 7rem;
    background: no-repeat center / contain;
    pointer-events: none;
  }
  html:not([data-a11y-contrast="high"]) body.va-theme-jitter-ext[data-jt-page="scam-simulator"] #intro-panel::after { background-image: url("images/jitter/scam-simulator.svg"); }
  html:not([data-a11y-contrast="high"]) body.va-theme-jitter-ext[data-jt-page="deep-listening"] #intro-panel::after { background-image: url("images/jitter/deep-listening.svg"); }
}

@media (prefers-reduced-motion: reduce) {
  html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app #dashboard-cards .card-hover:hover,
  html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app .enrolled-card.card-hover:hover,
  html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app .browse-card.card-hover:hover,
  html:not([data-a11y-contrast="high"]) body.va-theme-jitter-app .cert-card.card-hover:hover {
    transform: none;
  }
}