/* ============================================================
   UNITY ACADEMY — CUSTOM CSS
   ============================================================
   FIXES APPLIED IN THIS REVISION
   ------------------------------------------------------------
   1. Missing `{` in the "SECTION HEADER CTA LINKS ON LIGHT
      BACKGROUNDS" block. The parser was folding the
      declarations into the selector and discarding BOTH that
      rule and the :hover rule that followed it. Brace added,
      so those styles now actually apply. This was a real,
      silent bug affecting the learner site.

   2. Tightened the icon-font selector. `[class*="ti-"]` is a
      substring match that also hits any class containing
      "ti-" mid-word — e.g. `featured-content-multi-carousel-item`
      ("mul-TI-carousel"), which was getting the icon font on
      elements not covered by the Inter !important rules.
      Replaced with prefix matching.

   3. `.ribbon` was a bare selector in two blocks. Thought
      Industries reuses that class name for the catalog card
      corner badge AND for the Reporting Hub info banner, so
      the bare selector was ambiguous. Now scoped to card
      contexts (.catalog-grid-item, .catalog-item,
      .featured-content-multi-carousel-item).
      NOTE: `.catalog__ribbon` and `.catalog__ribbon--attached`
      are retained at the head of both lists — those are the
      real catalog badge classes. If card badges lose their
      corner positioning, inspect one and add its actual
      parent class to these lists.

   4. Removed duplicate and contradictory blocks: the
      course-progress sidebar override, ua-access-detail--enhanced
      hiding, survey link styling, unitySignedOut/In visibility
      (repeated four times), content-type badge colours
      (repeated three times), the .unity-header__dropdown
      positioning stack (five copies), and .ua-ti-menu-panel
      (four copies). Where copies disagreed, the value that was
      already winning by cascade order was kept, so rendered
      output is unchanged.

   5. Added body:not(.manager) scoping to the broad global
      resets: .container / .header__inner, html+body overflow,
      .progress / .course-progress, .enroll, .share__container,
      .header--microsite padding, and bare h3/h4 min-height.
      These were unscoped and could reach the admin UI.

   SCOPE CAVEAT ON #5: `manager` IS present on body in the
   admin UI (confirmed: "ember-application bluerocratic learn
   manager reporting-hub custom-reports"), so these selectors
   are valid. However, attempts to affect the Reporting Hub
   from this stylesheet had no observable effect, which
   suggests this CSS may not be injected into the admin app at
   all. The scoping is therefore either useful or inert — never
   harmful — and is kept as insurance.

   KNOWN UNRESOLVED: the Reporting Hub info banner overlaps the
   Start Building / Looks / Dashboards tabs at
   /learn/manager/reporting-hub/custom-reports. Rules targeting
   `.reporting-hub__ribbon-container` from this file had no
   effect, including `display: none`. Treat as a Thought
   Industries platform issue; workaround is to bookmark the
   Looks and Dashboards tab URLs directly.

   NOT CHANGED: the `.ml-auto:has(button[id^="headlessui-menu-button-"])`
   rule pins the native TI account widget with
   position:fixed / top:14px / right:24px. Fragile against any
   header-height change or TI markup change — worth revisiting
   separately.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/* Apply Inter font globally, but exclude icon fonts */
body, div:not([class*="icon"]), span:not([class*="icon"]), article, section, p {
  font-family: 'Inter', sans-serif !important;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', sans-serif !important;
}

/* Testimonial-specific classes */
.testimonial-quote_author-description,
[class*="testimonial"] {
  font-family: 'Inter', sans-serif !important;
}

/* Buttons and inputs - but not icons */
button:not([class*="icon"]), .btn:not([class*="icon"]), a:not([class*="icon"]), input, textarea, select {
  font-family: 'Inter', sans-serif !important ;
}

/* Lists */
ul, ol, li {
  font-family: 'Inter', sans-serif !important;
}

/* Force icon fonts to use their proper font-family
   FIXED: was [class*="ti-"], which substring-matched any class
   containing "ti-" mid-word (e.g. multi-carousel). Now prefix-
   scoped so only real icon classes are targeted. */
i,
[class^="icon-"], [class*=" icon-"],
[class^="ti-icon"], [class*=" ti-icon"],
.ms-container, .ms-selection, .star-chooser, .stars {
  font-family: ti-icons-rev2 ;
}

/* Reduce hero caption height by 35% */
.hero__caption {
  padding-top: 30px !important;
  padding-bottom: 30px !important;
  max-height: 65% !important;
}

/* Target the Subscribe button in hero section */
.hero__caption .btn.btn--primary {
  display: block !important;
  width: fit-content !important;
  margin-top: 20px !important;
  background-color: #3a5bc7 !important;
  color: #ffffff !important;
  padding: 12px 32px !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  transition: background-color 0.3s ease, transform 0.2s ease !important;
  border: none !important;
}

.hero__caption .btn.btn--primary:hover {
  background-color: #2d4aa3 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(58, 91, 199, 0.3) !important;
}

.hero__caption .btn.btn--primary:active {
  transform: translateY(0) !important;
}

/* Force the h4 subtitle and button to stack vertically */
.hero__caption h4 {
  display: block !important;
  margin-bottom: 0 !important;
}

/* Ensure the link wrapping the button is block level */
.hero__caption > a {
  display: block !important;
  width: fit-content !important;
}

/* HIDE SECTION NUMBERS IN COURSE SUB MENU */
.syllabus__section-title-index { display: none; }

/*---Custom Footer Styling---*/
.footer, .footer .footer__inner {padding: 0;}
.footer .footer__inner .footer__company__info {display: none;}
.cFooter {padding: 40px 8%; background: #000000; color: #ffffff; position: relative;}
.cFooter p {font-size: 14px; line-height: 24px; margin-bottom: 0;}
.cFooter::before {content: ''; display: block; position: absolute; top: -1px; left: 50%; transform: translateX(-50%); width: 0; 
  height: 0; 
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #fff;
}
.cFooter .ftWrap {display: block;}
.cFooter .ftWrap::after {content: ''; display: block; clear: both;}
.cFooter .ftWrap .navigation {float: right; width: 48%;}
.cFooter .ftWrap .socialSignup {float: left; width: 48%;}
.cFooter .ftWrap .social {margin-bottom: 20px;}
.cFooter .ftWrap .social ul {display: block; margin: 0; padding: 0;}
.cFooter .ftWrap .social ul li {display: inline-block; margin-right: 4px;}
.cFooter .ftWrap .social ul li i {display: block; width: 24px; line-height: 24px; background: #a6a6a6; border-radius: 50%; text-align: center; font-size: 16px; color: #000; font-family: "Inter"; font-size: 14px;}
.cFooter .navigation h4 {color: #ffffff; font-weight: 600;}
.cFooter .navigation .col {display: inline-block; width: 48%;}
.cFooter .navigation ul {display: block; margin: 0; padding: 0;}
.cFooter .navigation ul li {display: block; border-top: 1px solid #ffffff;}
.cFooter .navigation ul li a {color: inherit; font-size: 13px; padding: 12px 0; display: block; color: #ffffff;}

/*---Legal Links---*/
.legal-links {display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 12px;}
.legal-links a {color: #ffffff; font-size: 13px; text-decoration: underline; transition: color 200ms ease-in-out;}
.legal-links a:hover {color: #6699ff;}

/*---Privacy Choices Button---*/
button#ot-sdk-btn.privacy-choices-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px !important;
  color: #ffffff !important;
  text-decoration: none !important;
  font-weight: normal;
  line-height: 1.5;
  transition: font-weight 0s, color 200ms ease-in-out;
  box-shadow: none !important;
  border-radius: 0 !important;
}
button#ot-sdk-btn.privacy-choices-btn:hover {
  color: #ffffff !important;
  background: transparent !important;
  font-weight: 700 !important;
}
button#ot-sdk-btn.privacy-choices-btn:focus-visible {
  outline: 2px solid #6699ff;
  outline-offset: 3px;
  border-radius: 3px;
}
button#ot-sdk-btn.privacy-choices-btn .privacy-icon {
  flex-shrink: 0;
  width: 30px;
  height: 14px;
}

/* New overrides for logo sizing */
.cFooter .socialSignup img,
.cFooter img {
  width: 200px !important;
  height: 65px !important;
  max-width: 200px !important;
  max-height: 65px !important;
  object-fit: contain !important;
  margin-bottom: 0 !important;
}

/* New overrides for link hover effect */
.cFooter .navigation ul li a {
  font-weight: 400 !important;
  transition: font-weight 0.1s ease !important;
}

.cFooter .navigation ul li a:hover {
  font-weight: 700 !important;
}

/* Align contact text with Subscribe link */
.cFooter .socialSignup.logoSection {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  height: 100% !important;
}

.cFooter .socialSignup.logoSection p {
  margin-top: 20px !important;
  margin-bottom: 0 !important;
}

/* Legal links styling */
.cFooter .legal-links {
  margin-top: 15px;
  display: flex;
  gap: 20px;
}

.cFooter .legal-links a {
  color: #ffffff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 400;
  transition: font-weight 0.1s ease;
}

.cFooter .legal-links a:hover {
  font-weight: 700;
}
/* COURSE PLAYER OUTER AREA BACKGROUND */
.course__container {
  background-color: #ffffff !important;
}

.learner__content {
  background-color: transparent !important;
} 
/* =========================
   COURSE PLAYER CONTENT PANEL
   =========================  */

/* Main lesson content area */
.learner__content {
  background-color: #cbcbcb !important;
}

  /*=========================
   COURSE SUB-MENU (SIDEBAR)
   ========================= */

/* Sidebar container
.learner__sidebar {
  border: 2px solid #cbcbcb !important;
  box-sizing: border-box;
}
*/
/* ===== Course Details Page - Overview tab styling  ===== */
/* WCAG 2.2 compliant version */
/* Key changes: focus indicators, reduced motion, contrast, touch targets, rem units */

.ti-course-wrapper {
  font-family: Inter, sans-serif;
  font-size: 0.9375rem; /* 15px in rem for user font scaling support */
  max-width: 1100px;
  margin: 0 auto;
}

/* Top grey section */
/* #f3f3f3 background retained — text contrast verified above 4.5:1 against #1a1a1a */
.ti-course-top {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  background: #f3f3f3;
  padding: 30px;
  border-radius: 10px;
  margin-bottom: 30px;
}

.ti-course-top-column {
  flex: 1;
  min-width: 280px;
}

/* Intro spacing — 1.7 line height supports readability per WCAG 1.4.12 Text Spacing */
.ti-course-wrapper p {
  line-height: 1.7;
}

/* Reduce bullet indent in top section */
.ti-course-top ul {
  padding-left: 24px;
  margin-left: 0;
}

/* Module grid */
.ti-module-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  margin-top: 40px;
}

/* Collapsible cards */
.ti-module-card {
  flex: 1 1 48%;
  max-width: 48%;
}

.ti-module-card details {
  background: #fafafa;
  padding: 0;
  border-radius: 12px;
  border: 1px solid #e6e6e6;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
  /* transition moved to prefers-reduced-motion block below */
  overflow: hidden;
}

/* WCAG 2.5.8 Target Size — minimum 44x44px touch target for summary */
.ti-module-card summary {
  padding: 20px 25px;
  min-height: 44px; /* WCAG 2.2 minimum touch target height */
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  color: #1a1a1a; /* Explicit color ensures contrast is not inherited unexpectedly */
  /* WCAG 2.4.11/2.4.12 — focus indicator defined below */
}

.ti-module-card summary::-webkit-details-marker {
  display: none;
}

/* WCAG 4.1.2 — Custom arrow communicates open/closed state visually */
/* Screen readers use the native details/summary open attribute for state */
.ti-module-card summary::after {
  content: "＋";
  flex-shrink: 0;
  font-weight: 400;
  /* WCAG 1.4.11 — decorative indicator, state conveyed by native element */
  aria-hidden: true; /* Note: apply aria-hidden="true" on a span in HTML for full support */
}

.ti-module-card details[open] summary::after {
  content: "−";
}

/* WCAG 2.4.11 Focus Appearance — visible focus indicator for keyboard users */
.ti-module-card summary:focus {
  outline: none; /* Remove default to apply custom below */
}

.ti-module-card summary:focus-visible {
  outline: 3px solid #005fcc; /* High contrast focus ring — 3:1 minimum against background */
  outline-offset: 2px;
  border-radius: 12px;
}

/* Content inside collapsible */
.ti-module-content {
  padding: 0 25px 25px 25px;
}

.ti-module-content hr {
  border: none;
  border-top: 1px solid #e0e0e0;
  margin: 15px 0;
}

.ti-module-content ul {
  line-height: 1.8;
  padding-left: 5px;
}

/* Mobile — WCAG 1.4.4 Resize Text, 1.4.10 Reflow */
@media (max-width: 768px) {
  .ti-module-card {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

/* WCAG 2.3.3 / 2.5.3 — Respect user motion preferences */
/* Hover transform and transitions only applied when motion is acceptable */
@media (prefers-reduced-motion: no-preference) {
  .ti-module-card details {
    transition: box-shadow 0.25s ease, transform 0.25s ease;
  }
  .ti-module-card details:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0,0,0,0.08);
  }
}

/* For users who prefer reduced motion — subtle shadow only, no movement */
@media (prefers-reduced-motion: reduce) {
  .ti-module-card details:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  }
}

/* ===== Option 4: Banner + Two Columns ===== */
.ti-opt4 {
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 20px 20px;
}

.ti4-banner {
  width: 100%;
  /* WCAG 1.4.3 — #fff on #2F6F6F end of gradient: ~7.2:1 contrast ratio — passes AAA */
  /* #fff on #4A8C8C lighter end: ~3.8:1 — passes AA for large text (2rem bold) */
  background: linear-gradient(90deg, #4A8C8C 0%, #2F6F6F 100%);
  border-radius: 14px 14px 0 0;
  padding: 22px 26px;
}

.ti4-banner h1 {
  margin: 0;
  color: #fff;
  font-size: 2rem;
}

.ti4-body {
  background: #fff;
  border: 1px solid #e7e7e7;
  border-top: none;
  border-radius: 0 0 14px 14px;
  padding: 26px;
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 22px;
  box-shadow: 0 2px 14px rgba(0,0,0,.06);
}

.ti4-col h2 {
  margin: 0 0 8px;
  color: #1a1a1a; /* ~18.1:1 on white — passes AAA */
}

/* WCAG 1.4.3 — #666 on white = 5.74:1, passes AA for normal text */
.ti4-col p {
  margin: 0 0 14px;
  color: #595959; /* Slightly darker than #666 — 7:1 on white, passes AAA */
}

.ti4-col ul {
  margin: 12px 0 18px;
  padding-left: 18px;
  color: #333; /* ~12.6:1 on white — passes AAA */
}

.ti4-divider {
  background: #e7e7e7;
  width: 1px;
  /* WCAG 1.1.1 — purely decorative, no role needed */
}

/* WCAG 2.4.11 + 2.5.8 — Button focus and minimum touch target */
.ti4-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px; /* WCAG 2.2 minimum touch target */
  min-width: 44px;
  padding: 10px 20px;
  border-radius: 999px;
  background: #1a1a1a;
  color: #fff; /* ~18.1:1 on #1a1a1a — passes AAA */
  text-decoration: none;
  font-weight: 700;
  /* WCAG 2.4.4 — ensure button has descriptive text or aria-label in HTML */
}

.ti4-btn:hover {
  background: #333;
  text-decoration: underline; /* WCAG 1.4.1 — not relying on colour alone for hover state */
}

.ti4-btn:focus {
  outline: none;
}

.ti4-btn:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 3px;
}

/* WCAG 1.4.10 Reflow — single column below 900px */
@media (max-width: 900px) {
  .ti4-body {
    grid-template-columns: 1fr;
    border-radius: 14px;
    border-top: 1px solid #e7e7e7;
  }
  .ti4-divider {
    display: none;
  }
  .ti4-banner {
    border-radius: 14px;
  }
}

/* WCAG 1.4.12 Text Spacing — ensure layout does not break with user overrides */
/* No fixed heights on text containers so content reflows safely */

/* High contrast mode support (WCAG 1.4.11) */
@media (forced-colors: active) {
  .ti-module-card details {
    border: 1px solid ButtonText;
  }
  .ti-module-card summary:focus-visible {
    outline: 3px solid Highlight;
  }
  .ti4-btn {
    border: 2px solid ButtonText;
    forced-color-adjust: none;
  }
}

/* ===== Course Card - Fixed Height Only ===== */

/* Fixed height image container */
.catalog-grid-item__asset-container {
  width: 100% !important;
  height: 220px !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}

/* Image fills container without distortion */
.catalog-grid-item__asset {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Card body content area */
.catalog-grid-item__body {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Truncate description to exactly 1 line */
.catalog-grid-item__description,
p.catalog-grid-item__description {
  display: -webkit-box !important;
  -webkit-line-clamp: 1 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
  margin: 0 !important;
}

/* Push source/meta to bottom of card */
.catalog-grid-item__source {
  margin-top: auto !important;
  padding-top: 8px !important;
}

/* Equal height cards in grid */
.ember-view.catalog-grid-item {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

/* Responsive */
@media (max-width: 768px) {
  .catalog-grid-item__asset-container {
    height: 180px !important;
  }
}

@media (max-width: 480px) {
  .catalog-grid-item__asset-container {
    height: 160px !important;
  }
}

.featured-content-multi-carousel-item
{
  width: 100% !important;
  height: 350px !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}

/* ===== Hide Enroll Today Box Globally =====
   SCOPED: was global, which also suppressed panels in the
   manager UI. Now learner-side only. */

body:not(.manager) .enroll {
  display: none !important;
}

body:not(.manager) .panel:has(.enroll) {
  display: none !important;
}

/* ===== Academy Pro Upgrade CTA — hidden by default =====
   PV script reveals this for standard subscribers on
   cert-gated courses and learning paths.
   ======================================================= */

.widget--one-columnstandard {
  display: none !important;
}

/* ===== Course Detail Page — Reorder Sample Lesson and Already Subscribed ===== */

.widget--course-purchase_standard .ember-view {
  display: flex !important;
  flex-direction: column !important;
}

.course__detail__enrolled {
  order: 1 !important;
  display: block !important;
  margin-bottom: 8px !important;
}

.widget--course-purchase_standard .ember-view > div:has(.preview-link) {
  order: 2 !important;
}

.widget--course-purchase_standard .panel {
  order: 3 !important;
}

/* ===== Hover Colours ===== */

/* Sample Lesson hover */
a.preview-link:hover,
a.preview-link:hover span {
  color: #3a5bc7 !important;
}

/* Already Subscribed hover */
.course__detail__enrolled a.btn:hover,
.course__detail__enrolled a.btn:hover span {
  color: #3a5bc7 !important;
}

/* ===== Sample Lesson Page ===== */

.purchase-required .enroll,
.purchase-required .panel:has(.enroll) {
  display: none !important;
}

.purchase-required a[href*="sign_in"],
.purchase-required .btn[href*="sign_in"] {
  display: block !important;
}

/* Already Subscribed hover on sample lesson page */
.purchase-required a[href*="sign_in"]:hover,
.purchase-required a[href*="sign_in"]:hover span {
  color: #3a5bc7 !important;
}
/* ============================================================
   UNITY ACADEMY — GLOBAL ONBOARDING SURVEY CSS FIXES v3
   ============================================================ */

/* ----------------------------------------------------------------
   1. REMOVE LOGO HYPERLINK - onboarding survey page ONLY
   ---------------------------------------------------------------- */

body.survey a.company__beta-logo {
  pointer-events: none;
  cursor: default;
  text-decoration: none;
}
 
body.survey a.company__beta-logo:focus {
  outline: none;
}


/* ------------------------------------------------------------
   2. CONSTRAIN SURVEY RESPONSE DROPDOWN WIDTH 
   ------------------------------------------------------------ */

.application__content--survey select,
.survey-question select,
.survey-question .field-wrapper select,
.survey-response select {
  width: auto !important;
  max-width: max-content;
  min-width: 280px;
  display: block;
}

.application__content--survey .select-wrapper,
.application__content--survey .field-select,
.survey-question .field-select {
  width: auto !important;
  max-width: max-content;
  min-width: 280px;
  display: inline-block;
}


/* ------------------------------------------------------------
   3. CTA BUTTON — align left edge to dropdown left edge
   ------------------------------------------------------------ */

.application__content--survey .medium-12.columns {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-top: 0;
  padding-bottom: 0;
}

.application__content--survey .medium-12.columns .btn--right.btn--primary,
.application__content--survey .medium-12.columns .btn--right.btn--large,
.application__content--survey .medium-12.columns button.btn--right {
  float: none !important;
  display: inline-block;
  margin-right: auto !important;
  margin-left: 140px !important; /* ← adjust this value if needed */
}


/* ------------------------------------------------------------
   4. SPACING — between last body text paragraph and dropdown
   ------------------------------------------------------------ */

.application__content--survey select,
.survey-question select,
.survey-question .field-wrapper select {
  margin-top: 20px !important;
}

.application__content--survey .select-wrapper,
.survey-question .field-select {
  margin-top: 20px !important;
}


/* ------------------------------------------------------------
   5. UNITY TERMS OF SERVICE LINK — blue hover
   ------------------------------------------------------------ */

/* ---------------------------------
   Survey link styling
   Purpose:
   Keeps your existing survey link hover/focus styling.
   NOTE: this block appeared twice in the original file
   (once here, once under "6. HEADER CODE"). Duplicate removed.
---------------------------------- */
.application__content--survey a:hover,
.application__content--survey a:focus,
.survey-question a:hover,
.survey-question a:focus {
  color: #3a5bc7 !important;
  text-decoration: underline;
}

/* ------------------------------------------------------------
   6. HEADER CODE
   ------------------------------------------------------------ */

/* ---------------------------------
   Header wrapper reset
   FIXED — was:
     .container, .header_inner, .header__inner { ... }
   `.container` is used by the Reporting Hub / manager UI, so
   zeroing its top padding globally pulled the info banner up
   over the Start Building / Looks / Dashboards tabs.
   `.header_inner` (single underscore) was a typo and matched
   nothing. Now scoped to learner-facing pages only.
---------------------------------- */
body:not(.manager) .container,
body:not(.manager) .header__inner {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}

/* ---------------------------------
   Unity header container
   Purpose:
   Full-width black header flush left and right.
---------------------------------- */
.unity-header,
.unity-header:first-child {
  position: relative;
  z-index: 999;
  background: #000000;
  color: #ffffff;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  border-top: 0 !important;

  width: 100vw;
  max-width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
}

/* ---------------------------------
   Header inner layout
---------------------------------- */
.unity-header__inner {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 4px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  min-height: 60px;
}

/* ---------------------------------
   Left side layout
---------------------------------- */
.unity-header__left {
  display: flex;
  align-items: center;
  gap: 32px;
  min-width: 0;
}

.unity-header__logo-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.unity-header__logo {
  display: block !important;
  height: 56px !important;
  width: auto !important;
  max-width: none !important;
}

/* ---------------------------------
   Navigation
---------------------------------- */
.unity-header__nav {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 100%;
}

.unity-header__nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 76px;
  color: #ffffff;
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  padding: 0;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.unity-header__nav-link:hover,
.unity-header__nav-link:focus,
.unity-header__signin:hover,
.unity-header__signin:focus {
  color: #66b3ff;
}

.unity-header__nav-link.is-active {
  color: #00aef0;
  cursor: default;
  pointer-events: none;
}

.unity-header__nav-link.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 4px;
  width: 100%;
  height: 2px;
  background: #00aef0;
  border-radius: 2px;
}

/* ---------------------------------
   Right side layout
---------------------------------- */
.unity-header__right {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
  height: 76px;
}

/* ---------------------------------
   Search
---------------------------------- */
.unity-header__search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.unity-header__search input {
  height: 34px;
  width: 220px;
  background-color: #111111 !important;
  border: 1px solid #2b2b2b !important;
  color: #ffffff !important;
  caret-color: #ffffff !important;
  border-radius: 18px;
  padding: 0 14px;
  outline: none;
  box-sizing: border-box;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none !important;
}

.unity-header__search input::placeholder {
  color: #b3b3b3 !important;
  opacity: 1;
}

.unity-header__search input:focus,
.unity-header__search input:active {
  background-color: #1a1a1a !important;
  color: #ffffff !important;
  border-color: #00aef0 !important;
  box-shadow: 0 0 0 2px rgba(0, 174, 240, 0.2) !important;
  outline: none !important;
}

.unity-header__search input:-webkit-autofill,
.unity-header__search input:-webkit-autofill:hover,
.unity-header__search input:-webkit-autofill:focus {
  -webkit-text-fill-color: #ffffff !important;
  -webkit-box-shadow: 0 0 0px 1000px #1a1a1a inset !important;
  transition: background-color 5000s ease-in-out 0s;
}

.unity-header__search button {
  height: 34px;
  padding: 0 14px;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  border-radius: 18px;
  border: 1px solid #4b5a78;
  background: #1a1a1a;
  color: #ffffff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  box-shadow: none !important;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
}

.unity-header__search button:hover {
  background: #252525;
  border-color: #6c7ea5;
  color: #ffffff;
}

.unity-header__search button:focus {
  outline: none !important;
}

.unity-header__search button:focus-visible {
  background: #252525;
  border-color: #6c7ea5;
  color: #ffffff;
  box-shadow: 0 0 0 2px rgba(108, 126, 165, 0.28);
}

.unity-header__search button:active {
  background: #141414;
  border-color: #5f7194;
  color: #ffffff;
  box-shadow: none !important;
}

/* ---------------------------------
   Auth
---------------------------------- */
.unity-header__auth {
  display: flex;
  align-items: center;
  height: 34px;
}

.unity-header__signin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  color: #ffffff;
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  line-height: 1;
}

.unity-header__auth--signed-in {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  height: 34px;
}

.unity-header__user-name {
  display: inline-flex;
  align-items: center;
  height: 34px;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  white-space: nowrap;
}

.unity-header__user-menu {
  position: relative;
  display: flex;
  align-items: center;
  height: 34px;
}

.unity-header__user-trigger {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  height: 34px;
}

.unity-header__user-initials {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #2f2f2f;
  border: 1px solid #00aef0;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

/* ---------------------------------
   Dropdown
---------------------------------- */
.unity-header__dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 170px;
  background: #111111;
  border: 1px solid #2b2b2b;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

/* REPLACE any display:none/block dropdown rules with these */
.unity-header__dropdown {
  position: fixed !important;
  top: 72px !important;
  right: 20px !important;
  min-width: 190px !important;
  padding: 8px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  background: linear-gradient(180deg, rgba(18,20,26,0.98), rgba(10,12,16,0.98)) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,0.36) !important;
  backdrop-filter: blur(10px) !important;
  z-index: 999999 !important;

  /* Hidden by default via opacity/visibility, NOT display:none */
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(-6px) !important;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease !important;
}

.unity-header__user-menu.is-open .unity-header__dropdown {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

.unity-header__dropdown a {
  display: block;
  padding: 12px 14px;
  color: #ffffff;
  text-decoration: none;
  font-size: 14px;
}

.unity-header__dropdown a:hover,
.unity-header__dropdown a:focus {
  background: #1b1b1b;
  color: #66b3ff;
}

/* ---------------------------------
   Blue divider line under header
---------------------------------- */
.unity-header__bottom-line {
  width: 100%;
  height: 2px;
  background: #00aef0;
}

/* ---------------------------------
   Accessibility utility
---------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------
   Tablet responsive
---------------------------------- */
@media (max-width: 1024px) {
  .unity-header__inner {
    flex-wrap: wrap;
    gap: 10px;
    padding: 8px 20px;
  }

  .unity-header__left,
  .unity-header__right {
    width: 100%;
    justify-content: space-between;
  }

  .unity-header__left {
    flex-wrap: wrap;
    gap: 14px;
  }

  .unity-header__nav {
    flex-wrap: wrap;
    gap: 18px;
  }

  .unity-header__search input {
    width: 180px;
  }
}

/* ---------------------------------
   Mobile responsive
---------------------------------- */
@media (max-width: 640px) {
  .unity-header__inner {
    padding: 8px 16px;
    min-height: auto;
  }

  .unity-header__logo {
    height: 56px;
    max-width: 300px;
  }

  .unity-header__nav-link {
    height: auto;
    font-size: 13px;
  }

  .unity-header__signin,
  .unity-header__user-name {
    font-size: 13px;
  }

  .unity-header__right {
    height: auto;
  }

  .unity-header__search {
    width: 100%;
  }

  .unity-header__search input {
    width: 100%;
    min-width: 0;
  }
}

/* ------------------------------------
   Hide Native Language UI Selector
-------------------------------------- */
.learner__language__selector,
.learner__language__selector--light,
.learner__language__selector.light,
.learner__language__selector__opt-sel,
.learner__language__selector__btn,
.learner__language__selector__btn.light,
.language-selector-content {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* =========================================================
   UNITY ACADEMY / THOUGHT INDUSTRIES
   GLOBAL CARD TOKENS
========================================================= */
:root {
  --ua-card-bg-top: rgba(18,20,26,0.98);
  --ua-card-bg-bottom: rgba(10,12,16,0.98);
  --ua-card-border: rgba(255,255,255,0.14);
  --ua-card-shadow: rgba(0,0,0,0.42);
  --ua-text-main: #ffffff;
  --ua-text-soft: rgba(255,255,255,0.76);
  --ua-text-muted: rgba(255,255,255,0.62);

  --ua-pill-border: rgba(255,255,255,0.12);
  --ua-pill-bg: rgba(255,255,255,0.08);

  --ua-type-bg: #d93b4f;
  --ua-type-text: #ffffff;

  --ua-beginner: #67d46f;
  --ua-beginner-bg: rgba(103, 212, 111, 0.12);
  --ua-beginner-border: rgba(103, 212, 111, 0.45);

  --ua-intermediate: #ffd24d;
  --ua-intermediate-bg: rgba(255, 210, 77, 0.12);
  --ua-intermediate-border: rgba(255, 210, 77, 0.42);

  --ua-advanced: #ff6b6b;
  --ua-advanced-bg: rgba(255, 107, 107, 0.12);
  --ua-advanced-border: rgba(255, 107, 107, 0.42);

  --ua-duration-bg: rgba(126, 200, 255, 0.10);
  --ua-duration-border: rgba(126, 200, 255, 0.20);
  --ua-duration-text: #7ec8ff;

  --ua-live-bg: rgba(255,255,255,0.08);
  --ua-live-border: rgba(255,255,255,0.16);
  --ua-live-text: #ffffff;

  --ua-cta-bg: rgba(255,255,255,0.07);
  --ua-cta-bg-hover: rgba(255,255,255,0.12);
  --ua-cta-text: #ffffff;
  --ua-cta-border: rgba(255,255,255,0.28);
  --ua-accent: #00c2ff;
  --ua-shadow: rgba(0,0,0,0.44);
}

/* =========================================================
   REMOVE TI BACKGROUND BLOCKING / LINK WRAPPER
========================================================= */
.catalog-item,
.featured-content-multi-carousel-item,
.catalog-grid-item,
.catalog-grid-item .row,
.catalog-grid-item .column,
.featured-content-multi-carousel-item__body,
.catalog-grid-item__body {
  background: transparent !important;
}

.catalog-item {
  display: block !important;
  height: 100% !important;
  text-decoration: none !important;
  color: inherit !important;
}

/* =========================================================
   CARD SHELLS
========================================================= */
.featured-content-multi-carousel-item,
.catalog-grid-item {
  position: relative;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  overflow: hidden !important;
  border-radius: 20px !important;
  background: linear-gradient(180deg, var(--ua-card-bg-top), var(--ua-card-bg-bottom)) !important;
  border: 1px solid var(--ua-card-border) !important;
  box-shadow:
    0 20px 60px var(--ua-card-shadow),
    inset 0 1px 0 rgba(255,255,255,0.04) !important;
  color: var(--ua-text-main) !important;
}

/* =========================================================
   TI ROW/COLUMN RESET
========================================================= */
.catalog-grid-item .row,
.catalog-grid-item .column,
.featured-content-multi-carousel-item .row,
.featured-content-multi-carousel-item .column {
  margin: 0 !important;
  padding: 0 !important;
}

/* =========================================================
   IMAGE WRAPPERS / IMAGE TREATMENT
========================================================= */
.catalog-grid-item__asset-container {
  position: relative !important;
  overflow: hidden !important;
  background: #13151b !important;
  border-top-left-radius: 20px !important;
  border-top-right-radius: 20px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
}

.catalog-grid-item__asset,
.catalog-grid-item__asset-container img,
.catalog-grid-item__asset-container > div > img,
.featured-content-multi-carousel-item .catalog-grid-item__asset-container img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
  object-fit: cover !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

.catalog-grid-item__asset-container::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.01), rgba(0,0,0,0.05)),
    radial-gradient(circle at 82% 18%, rgba(0,194,255,0.03), transparent 12%);
  pointer-events: none;
}

/* =========================================================
   HIDE NATIVE META LINES
========================================================= */
.featured-content-multi-carousel-item__source,
.catalog-grid-item__source,
.featured-content-multi-carousel-item__start-date {
  display: none !important;
}

/* =========================================================
   CARD BODIES
========================================================= */
.featured-content-multi-carousel-item__body,
.catalog-grid-item__body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  padding: 16px 18px 18px !important;
  background: transparent !important;
}

/* =========================================================
   TITLES / DESCRIPTIONS
========================================================= */
.featured-content-multi-carousel-item__title,
.catalog-grid-item__title {
  margin: 0 0 12px !important;
  color: var(--ua-text-main) !important;
  font-size: clamp(1.55rem, 2vw, 2rem) !important;
  line-height: 1.08 !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden !important;
  min-height: 2.2em !important;
  height: auto !important;
  text-shadow: 0 4px 18px rgba(0,0,0,0.18);
}

.featured-content-multi-carousel-item__description,
.catalog-grid-item__description {
  margin: 0 0 16px !important;
  color: var(--ua-text-soft) !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden !important;
  min-height: 4.65em !important;
  height: auto !important;
}

/* =========================================================
   CONTENT TYPE BADGE - RELIABLE ATTRIBUTE-DRIVEN VERSION
========================================================= */

.ua-content-type-badge {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  z-index: 10 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-height: 44px !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: calc(100% - 120px) !important;
  padding: 0 16px !important;

  border-radius: 12px !important;
  background: var(--ua-type-bg) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.26) !important;
  box-sizing: content-box !important;
  overflow: visible !important;
  pointer-events: none !important;
  white-space: nowrap !important;
}

.ua-content-type-badge::before {
  content: attr(data-ua-type);
  display: block !important;
  width: auto !important;
  color: var(--ua-type-text) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  text-align: center !important;
}

/* =========================================================
   FIX: CONTENT TYPE BADGE IN CONTENT CAROUSEL ONLY
========================================================= */

.featured-content-multi-carousel-item .ua-content-type-badge {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  z-index: 20 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-width: 0 !important;
  width: auto !important;
  height: 44px !important;
  padding: 0 20px !important;

  border-radius: 12px !important;
  background: var(--ua-type-bg) !important;
  box-sizing: content-box !important;
  overflow: visible !important;
  pointer-events: none !important;
  white-space: nowrap !important;

  transform: none !important;
  line-height: normal !important;
}

.featured-content-multi-carousel-item .ua-content-type-badge::before {
  content: attr(data-ua-type);
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 20px !important;
  width: auto !important;
  height: 100% !important;
  margin: 0 !important;
  color: var(--ua-type-text) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  text-align: center !important;
  transform: none !important;
  position: static !important;
}

/* =========================================================
   TOP-LEFT RIBBON
========================================================= */
/* NOTE: `.ribbon` is deliberately NOT bare here.
   Thought Industries reuses the class name `ribbon` for two
   unrelated components: the catalog card corner badge, and the
   Reporting Hub info banner (.reporting-hub__ribbon-container
   > .ember-view.ribbon). Scoping to card contexts removes that
   ambiguity. It did NOT fix the Reporting Hub banner overlap —
   that appears to be a platform issue — but the scoping is
   correct regardless. */
.catalog__ribbon,
.catalog__ribbon--attached,
.catalog-grid-item .ribbon,
.featured-content-multi-carousel-item .ribbon,
.catalog-item .ribbon,
.card-ribbon,
.content-ribbon {
  position: absolute !important;
  top: 14px !important;
  left: 14px !important;
  right: auto !important;
  z-index: 11 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 32px !important;
  padding: 7px 12px !important;
  border-radius: 10px !important;
  color: #ffffff !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.22) !important;
  overflow: hidden !important;
  max-width: calc(100% - 120px);
}

.catalog__ribbon-corner {
  display: none !important;
}

/* =========================================================
   META ROWS / LIVE BOX
========================================================= */
.ua-card-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 14px;
}

.ua-live-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 14px;
}

.ua-live-datebox {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--ua-live-border);
  background: var(--ua-live-bg);
  color: var(--ua-live-text);
  width: fit-content !important;
  min-width: 0 !important;
  max-width: 100%;
  align-self: flex-start;
}

.ua-live-datebox__label {
  font-size: 11px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.68);
  font-weight: 700;
}

.ua-live-datebox__value {
  font-size: 15px;
  line-height: 1;
  font-weight: 800;
  color: #ffffff;
}

/* =========================================================
   PILLS
========================================================= */
.ua-pill {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--ua-pill-border);
  background: var(--ua-pill-bg);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.ua-pill--duration {
  color: var(--ua-duration-text);
  background: var(--ua-duration-bg);
  border-color: var(--ua-duration-border);
}

.ua-pill--beginner {
  color: var(--ua-beginner);
  background: var(--ua-beginner-bg);
  border-color: var(--ua-beginner-border);
}

.ua-pill--intermediate {
  color: var(--ua-intermediate);
  background: var(--ua-intermediate-bg);
  border-color: var(--ua-intermediate-border);
}

.ua-pill--advanced {
  color: var(--ua-advanced);
  background: var(--ua-advanced-bg);
  border-color: var(--ua-advanced-border);
}

/* =========================================================
   AUTHOR
========================================================= */
.ua-card-author {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  color: var(--ua-text-muted);
  font-size: 14px;
  line-height: 1.3;
  min-height: 28px;
}

.ua-card-author__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255,107,107,0.9), rgba(0,194,255,0.9));
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  flex: 0 0 auto;
  text-transform: uppercase;
}

.ua-card-author__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =========================================================
   CTA STYLING
========================================================= */
.catalog-grid-item__cta-container .btn,
.catalog-grid-item__cta-container .btn--primary,
.catalog-grid-item__cta-container .btn--link,
.featured-content-multi-carousel-item .btn,
.featured-content-multi-carousel-item .btn--primary,
.featured-content-multi-carousel-item .btn--link {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 11px 18px !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  line-height: 1 !important;
  letter-spacing: 0.01em !important;
  border: 1px solid var(--ua-cta-border) !important;
  background: var(--ua-cta-bg) !important;
  color: var(--ua-cta-text) !important;
  box-shadow: 0 10px 30px var(--ua-shadow) !important;
  transition:
    transform 0.12s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease !important;
}

.catalog-grid-item__cta-container .btn:hover,
.catalog-grid-item__cta-container .btn--primary:hover,
.catalog-grid-item__cta-container .btn--link:hover,
.featured-content-multi-carousel-item .btn:hover,
.featured-content-multi-carousel-item .btn--primary:hover,
.featured-content-multi-carousel-item .btn--link:hover {
  transform: translateY(-1px);
  background: var(--ua-cta-bg-hover) !important;
  color: var(--ua-cta-text) !important;
  box-shadow: 0 12px 26px rgba(0,0,0,0.3) !important;
}

.catalog-grid-item__hr {
  display: none !important;
}

/* =========================================================
   HIDE PROGRESS
   SCOPED to non-manager pages so the admin UI keeps its own
   progress indicators. .course-progress is also used by the
   course player sidebar expansion panel, restored below.
   ========================================================= */
body:not(.manager) .progress,
body:not(.manager) .progress-bar,
body:not(.manager) .progress-track,
body:not(.manager) .enrollment-progress,
body:not(.manager) .percent-complete,
body:not(.manager) .completion-progress {
  display: none !important;
}

/* Hide .course-progress everywhere EXCEPT the course
   player sidebar expansion panel where it is needed.
   NOTE: this block appeared twice in the original file.
   Duplicate removed. */
body:not(.manager) .course-progress {
  display: none !important;
}

#sidebar-progress-content .course-progress,
.expandable-sidebar__content .course-progress {
  display: block !important;
}

/* Restore progress bar specifically inside the
   sidebar progress panel — still hidden everywhere else */
#sidebar-progress-content .progress,
#sidebar-progress-content .progress-bar,
.expandable-sidebar__content .progress,
.expandable-sidebar__content .progress-bar {
  display: block !important;
}

/* =========================================================
   CAROUSEL / SLIDER SUPPORT
========================================================= */
.slick-track,
.swiper-wrapper,
.owl-stage {
  display: flex !important;
  align-items: stretch !important;
}

.slick-slide,
.swiper-slide,
.owl-item {
  height: auto !important;
}

.slick-slide > div {
  height: 100%;
}

/* =========================================================
   CONTENT CAROUSEL IMAGE FLUSH + ROUNDED TOP CORNERS
========================================================= */
.featured-content-multi-carousel-item {
  overflow: hidden !important;
  border-radius: 20px !important;
  padding: 0 !important;
  background: linear-gradient(180deg, rgba(18,20,26,0.98), rgba(10,12,16,0.98)) !important;
}

.featured-content-multi-carousel-item > .row,
.featured-content-multi-carousel-item > .column,
.featured-content-multi-carousel-item .row,
.featured-content-multi-carousel-item .column {
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
}

.featured-content-multi-carousel-item .catalog-grid-item__asset-container {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-top-left-radius: 20px !important;
  border-top-right-radius: 20px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  background: #13151b !important;
  line-height: 0 !important;
}

.featured-content-multi-carousel-item .catalog-grid-item__asset-container > div,
.featured-content-multi-carousel-item .catalog-grid-item__asset-container > span {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
}

.featured-content-multi-carousel-item .catalog-grid-item__asset-container img,
.featured-content-multi-carousel-item .catalog-grid-item__asset,
.featured-content-multi-carousel-item .catalog-grid-item__asset-container > div > img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  aspect-ratio: 16 / 9;
  object-fit: cover !important;
  border-radius: 0 !important;
}

.featured-content-multi-carousel-item .featured-content-multi-carousel-item__body {
  padding: 16px 18px 18px !important;
  margin: 0 !important;
}

.catalog-item > .featured-content-multi-carousel-item {
  margin: 0 !important;
}

/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 767px) {
  .featured-content-multi-carousel-item__title,
  .catalog-grid-item__title {
    font-size: 22px !important;
  }

  .featured-content-multi-carousel-item__description,
  .catalog-grid-item__description {
    -webkit-line-clamp: 4;
    min-height: 6.2em !important;
  }

  .ua-live-datebox {
    min-width: 0;
    width: 100%;
  }
}

/* =========================================================
   SECTION HEADER CTA LINKS ON LIGHT BACKGROUNDS
   Matches UA button language but adapted for white page areas

   FIXED: the long :not() chained selector below was missing
   its opening brace, which caused the CSS parser to discard
   both this rule AND the :hover rule that followed it.
========================================================= */

/* Section header row layout */
.widget h2,
.widget h3,
.widget .section-title,
.widget .widget__title {
  display: inline-block;
  vertical-align: middle;
}

.widget .view-all-link:not(.widget__title-cta),
.widget .catalog-view-all:not(.widget__title-cta),
.widget .section-header__link:not(.widget__title-cta),
.widget .featured-content-multi-carousel__view-all:not(.widget__title-cta),
.widget .catalog-header__link:not(.widget__title-cta),
.widget .widget__link:not(.widget__title-cta),
.widget a[href*="catalog"]:not(.ua-btn):not(.ua-ctas__btn):not(.widget__title-cta):not(.catalog-active-filter__remove),
.widget a[href*="live-sessions"]:not(.ua-btn):not(.ua-ctas__btn):not(.widget__title-cta):not(.catalog-active-filter__remove),
.widget a[href*="content"]:not(.ua-btn):not(.ua-ctas__btn):not(.widget__title-cta):not(.catalog-active-filter__remove):not(.catalog-item):not(.btn) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 36px !important;
  padding: 0 14px !important;
  border-radius: 10px !important;
  margin-top: 0 !important;
  background: #ffffff !important;
  color: #4b5563 !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0.01em !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition:
    transform 0.12s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease !important;
}

.widget .view-all-link:not(.widget__title-cta):hover,
.widget .catalog-view-all:not(.widget__title-cta):hover,
.widget .section-header__link:not(.widget__title-cta):hover,
.widget .featured-content-multi-carousel__view-all:not(.widget__title-cta):hover,
.widget .catalog-header__link:not(.widget__title-cta):hover,
.widget .widget__link:not(.widget__title-cta):hover,
.widget a[href*="catalog"]:not(.ua-btn):not(.ua-ctas__btn):not(.widget__title-cta):not(.catalog-active-filter__remove):hover,
.widget a[href*="live-sessions"]:not(.ua-btn):not(.ua-ctas__btn):not(.widget__title-cta):not(.catalog-active-filter__remove):hover,
.widget a[href*="content"]:not(.ua-btn):not(.ua-ctas__btn):not(.widget__title-cta):not(.catalog-active-filter__remove):hover {
  transform: translateY(-1px);
  color: #111827 !important;
  border-color: #d1d5db !important;
  background: #ffffff !important;
  box-shadow: 0 10px 24px rgba(0,0,0,0.10) !important;
}

.widget .view-all-link:focus-visible,
.widget .catalog-view-all:focus-visible,
.widget .section-header__link:focus-visible,
.widget .featured-content-multi-carousel__view-all:focus-visible,
.widget .catalog-header__link:focus-visible,
.widget .widget__link:focus-visible,
.widget a[href*="catalog"]:focus-visible,
.widget a[href*="live-sessions"]:focus-visible,
.widget a[href*="content"]:focus-visible {
  outline: 2px solid #00c2ff !important;
  outline-offset: 3px !important;
}

/* =========================================================
   SECTION HEADER TITLE + CTA ALIGNMENT
========================================================= */

/* Common widget header wrappers */
.widget__header,
.section-header,
.catalog-header,
.featured-content-multi-carousel__header,
.widget .row:first-child {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px;
}

/* Section titles */
.widget h2,
.widget h3,
.widget .section-title,
.widget .widget__title {
  margin: 0 !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  min-height: 36px;
}

/* =========================================================
   LIVE SESSION DATE BOX FIT / FORMATTING
========================================================= */

.ua-live-datebox {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--ua-live-border);
  background: var(--ua-live-bg);
  color: var(--ua-live-text);
  width: auto !important;
  min-width: 0 !important;
  max-width: 100%;
}

.ua-live-datebox__label {
  flex: 0 0 auto;
  font-size: 11px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.68);
  font-weight: 700;
  white-space: nowrap;
}

.ua-live-datebox__value {
  flex: 0 0 auto;
  font-size: 15px;
  line-height: 1;
  font-weight: 800;
  color: #ffffff;
  white-space: nowrap;
}

/* =========================================================
   HARD REMOVE BACKGROUND BLOCKS BEHIND CAROUSEL / CATALOG ROWS
========================================================= */

/* Outer widget wrappers */
.row.widget,
.widget,
.widget--html,
.widget--html_standard,
.ember-view.row.widget,
.ember-view.widget,
.ember-view[class*="widget"] {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Section wrappers often used by TI */
.featured-content-multi-carousel,
.catalog-grid,
.catalog-results,
.catalog-content-listing,
.featured-content-multi-carousel-wrapper,
.catalog-grid-wrapper,
.catalog-section,
.featured-content-section,
.content-carousel,
.content-carousel-wrapper {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Any immediate row/container beneath section title */
.featured-content-multi-carousel .row,
.catalog-grid .row,
.catalog-results .row,
.catalog-content-listing .row,
.content-carousel .row,
.row[class*="catalog"],
.row[class*="carousel"] {
  background: transparent !important;
  background-color: transparent !important;
}

/* Very aggressive fallback: remove background on direct TI row wrappers */
.ember-view.row,
.ember-view.column,
.ember-view[class*="catalog"],
.ember-view[class*="carousel"] {
  background-color: transparent !important;
}

/* Remove shadows / panels behind the cards */
[class*="catalog-grid"],
[class*="carousel"],
[class*="featured-content"] {
  box-shadow: none !important;
}

/* =========================================================
   LEARNER ACCESS / DASHBOARD ACCESS WIDGET
   Unity Academy visual refresh
========================================================= */

/* =========================================================
   OUTER WRAPPERS / PANEL SHELL
========================================================= */
.widget--dashboard-access,
.widget--dashboard-access_standard,
.dashboard-access {
  background: transparent !important;
}

.dashboard-access {
  background: linear-gradient(180deg, rgba(18,20,26,0.96), rgba(10,12,16,0.96)) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: 18px !important;
  box-shadow:
    0 20px 60px rgba(0,0,0,0.32),
    inset 0 1px 0 rgba(255,255,255,0.04) !important;
  overflow: hidden;
  color: #ffffff !important;
}

/* =========================================================
   TAB BAR
========================================================= */
.dashboard-access-tabs {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px 0 !important;
  margin: 0 !important;
  list-style: none !important;
  background: transparent !important;
  border: 0 !important;
}

.dashboard-access-tab {
  margin: 0 !important;
  list-style: none !important;
}

.dashboard-access-tab button,
.dashboard-access-tab .btn,
.dashboard-access-tab .btn--link,
.dashboard-access-tab .btn--inherit-font {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  min-height: 32px;
  padding: 7px 12px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  background: rgba(255,255,255,0.05) !important;
  color: rgba(255,255,255,0.82) !important;
  text-decoration: none !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.01em !important;
  box-shadow: none !important;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.12s ease !important;
}

.dashboard-access-tab button:hover,
.dashboard-access-tab .btn:hover,
.dashboard-access-tab .btn--link:hover,
.dashboard-access-tab .btn--inherit-font:hover {
  background: rgba(255,255,255,0.10) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

/* =========================================================
   FIX: SELECTED LEARNER ACCESS TAB
   Use actual selected tab state, not sticky wrapper classes
========================================================= */

.dashboard-access-tab {
  position: relative;
  background: transparent !important;
  box-shadow: none !important;
}

/* Base: no underline on any tab wrapper by default */
.dashboard-access-tab::after {
  content: none !important;
}

/* Selected tab button only */
.dashboard-access-tab [role="tab"][aria-selected="true"] {
  background: rgba(255,255,255,0.09) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03) !important;
  outline: none !important;
  transform: none !important;
}

/* Underline only on the wrapper that contains the selected tab */
.dashboard-access-tab:has([role="tab"][aria-selected="true"])::after {
  content: "" !important;
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -6px;
  height: 2px;
  border-radius: 999px;
  background: #00c2ff;
  opacity: 0.9;
}

/* Keep inner label/count clean only for selected tab */
.dashboard-access-tab:has([role="tab"][aria-selected="true"]) .dashboard-access-tab__label,
.dashboard-access-tab:has([role="tab"][aria-selected="true"]) .dashboard-access-tab__count {
  background: transparent !important;
}

/* Focus/active only for selected tab button */
.dashboard-access-tab [role="tab"][aria-selected="true"]:focus,
.dashboard-access-tab [role="tab"][aria-selected="true"]:active {
  background: rgba(255,255,255,0.13) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.24) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04) !important;
  outline: none !important;
}


.dashboard-access-tab__label {
  color: inherit !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

.dashboard-access-tab__count {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 20px;
  height: 20px;
  padding: 0 6px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.12) !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
}

.dashboard-access-tab.is-hidden,
.dashboard-access section.is-hidden {
  display: none !important;
}

/* =========================================================
   PANELS
========================================================= */
.dashboard-access section[role="tabpanel"] {
  background: transparent !important;
  padding: 10px 14px 14px !important;
  border: 0 !important;
}

/* =========================================================
   LIST ROWS
========================================================= */
.dashboard-access-list-item {
  border-top: 1px solid rgba(255,255,255,0.08) !important;
  background: transparent !important;
  color: #ffffff !important;
  padding: 12px 0 !important;
}

.dashboard-access-list-item .grid {
  align-items: center !important;
}

.dashboard-access-list-item-expander {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px;
  width: 100% !important;
  min-height: 40px;
  text-decoration: none !important;
  color: #ffffff !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  cursor: pointer !important;
  position: relative;
  z-index: 2;
}

.dashboard-access-list-item-expander__title {
  color: #ffffff !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em;
}

.dashboard-access-list-item-expander:hover {
  color: #ffffff !important;
}

.dashboard-access-list-item-expander:focus,
.dashboard-access-list-item-expander:active {
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Make sure icons/text don't block click behavior oddly */
.dashboard-access-list-item-expander > * {
  pointer-events: none;
}


.dashboard-access-list-item-expander i {
  color: rgba(255,255,255,0.74) !important;
}

.dashboard-access-list-item strong,
.dashboard-access-list-item .col-span-2,
.dashboard-access-list-item .col-span-3,
.dashboard-access-list-item .text-right,
.dashboard-access-list-item span,
.dashboard-access-list-item div {
  color: rgba(255,255,255,0.82);
}

.dashboard-access-list-item .grid.grid-cols-12 {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 220px 140px !important;
  gap: 18px !important;
  align-items: center !important;
}

.dashboard-access-list-item .col-span-4,
.dashboard-access-list-item .col-span-3,
.dashboard-access-list-item .col-span-2,
.dashboard-access-list-item .col-start-11 {
  width: auto !important;
  max-width: none !important;
}

.dashboard-access-list-item .col-span-3 {
  font-size: 14px !important;
  line-height: 1.45 !important;
  color: rgba(255,255,255,0.84) !important;
}

.dashboard-access-list-item .col-span-3 strong {
  color: #ffffff !important;
  font-weight: 700 !important;
}

.dashboard-access-list-item .col-start-11,
.dashboard-access-list-item .text-right {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
}

/* =========================================================
   LEARNER ACCESS CTA STYLING
   Single source of truth
========================================================= */

/* CTA column stays stable */
.dashboard-access-list-item .col-start-11,
.dashboard-access-list-item .text-right {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  width: auto !important;
  min-height: auto !important;
}

/* Base CTA style */
.dashboard-access .btn.btn--primary,
.dashboard-access a.btn.btn--primary,
.dashboard-access .btn--small,
.dashboard-access-list-item .btn,
.dashboard-access-list-item .button,
.dashboard-access-list-item a.btn,
.ua-access-detail__actions .btn,
.ua-access-detail__actions .button,
.ua-access-detail__actions a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  min-height: 36px;
  width: auto !important;
  max-width: 100% !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  padding: 9px 14px !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  letter-spacing: 0.01em !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
  background: rgba(255,255,255,0.07) !important;
  color: #ffffff !important;
  box-shadow: none !important;
  transform: none !important;
  translate: none !important;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease !important;
  will-change: auto !important;
}

/* =========================================================
   CTA HOVER — MATCH TAB STYLE
========================================================= */

.dashboard-access .btn.btn--primary:hover,
.dashboard-access a.btn.btn--primary:hover,
.dashboard-access .btn--small:hover,
.dashboard-access-list-item .btn:hover,
.dashboard-access-list-item .button:hover,
.dashboard-access-list-item a.btn:hover,
.ua-access-detail__actions .btn:hover,
.ua-access-detail__actions .button:hover,
.ua-access-detail__actions a:hover,
.dashboard-access .btn.btn--primary:focus,
.dashboard-access a.btn.btn--primary:focus,
.dashboard-access .btn--small:focus,
.dashboard-access-list-item .btn:focus,
.dashboard-access-list-item .button:focus,
.dashboard-access-list-item a.btn:focus,
.ua-access-detail__actions .btn:focus,
.ua-access-detail__actions .button:focus,
.ua-access-detail__actions a:focus {
  transform: none !important;

  /* Match tab hover feel */
  background: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;

  color: #ffffff !important;
  box-shadow: none !important;
}

/* Prevent row/container movement */
.dashboard-access-list-item,
.dashboard-access-list-item .grid,
.dashboard-access-list-item-expander,
.ua-access-detail,
.ua-access-detail__body,
.ua-access-detail__actions {
  transform: none !important;
  translate: none !important;
}

/* =========================================================
   EXPANDED DETAILS AREA — HORIZONTAL LAYOUT
========================================================= */

.dashboard-access-list-item [id*="dashboard-access-expandable-item-content"],
.dashboard-access-list-item .dashboard-access-expandable-item-content {
  margin-top: 14px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

.ua-access-detail__top {
  min-width: 0 !important;
}

.ua-access-detail__description {
  margin: 0 !important;
  color: rgba(255,255,255,0.82) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  max-width: none !important;
}

/* Flatten metrics into horizontal row */
.ua-access-metrics {
  display: contents !important;
}

.ua-access-metric__top {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 10px !important;
}

.ua-access-metric__icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.08) !important;
  font-size: 11px !important;
  line-height: 1 !important;
  flex: 0 0 auto !important;
}

.ua-access-metric__label {
  display: block !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.58) !important;
  white-space: nowrap !important;
}

.ua-access-metric__value {
  display: block !important;
  font-size: clamp(1.75rem, 2vw, 2.15rem) !important;
  line-height: 1 !important;
  font-weight: 800 !important;
}

.ua-access-metric--hours .ua-access-metric__value,
.ua-access-metric--hours .ua-access-metric__icon {
  color: #56c2ff !important;
}

.ua-access-metric--viewed .ua-access-metric__value,
.ua-access-metric--viewed .ua-access-metric__icon {
  color: #ffffff !important;
}

.ua-access-metric--complete .ua-access-metric__value,
.ua-access-metric--complete .ua-access-metric__icon {
  color: #d946ef !important;
}

/* Remove old hidden TI metric leftovers
   NOTE: this block appeared twice in the original file.
   Duplicate removed. */
.ua-access-detail--enhanced [class*="total-hours"],
.ua-access-detail--enhanced [class*="content-viewed"],
.ua-access-detail--enhanced [class*="complete"],
.ua-access-detail--enhanced [class*="progress"],
.ua-access-detail--enhanced .icon-clock,
.ua-access-detail--enhanced .icon-eye,
.ua-access-detail--enhanced .icon-check,
.ua-access-detail--enhanced .grid-cols-12 > .col-span-2,
.ua-access-detail--enhanced .grid-cols-12 > .col-span-3 {
  display: none !important;
}

/* Right-side content type / duration metadata alignment */
.dashboard-access-list-item .col-span-3 {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  min-height: 36px;
  white-space: nowrap;
}


/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 1024px) {
  .dashboard-access-list-item .grid.grid-cols-12 {
    grid-template-columns: 1fr !important;
  }

  .dashboard-access-list-item .col-start-11,
  .dashboard-access-list-item .text-right {
    justify-content: flex-start !important;
  }
}

@media (max-width: 767px) {
  .dashboard-access-tabs {
    gap: 6px;
    padding: 8px 12px 0 !important;
  }

  .dashboard-access-tab button,
  .dashboard-access-tab .btn,
  .dashboard-access-tab .btn--link,
  .dashboard-access-tab .btn--inherit-font {
    min-height: 30px;
    padding: 6px 10px !important;
    font-size: 12px !important;
  }

  .dashboard-access-list-item-expander__title {
    font-size: 15px !important;
  }
}

@media (max-width: 1024px) {
  .ua-access-detail {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}

/* =========================================================
   FIX: REMOVE WHITE BLOCK ON SELECTED EXPANDER
========================================================= */

.dashboard-access-list-item-expander,
.dashboard-access-list-item-expander:hover,
.dashboard-access-list-item-expander:focus,
.dashboard-access-list-item-expander:active,
.dashboard-access-list-item-expander[aria-expanded="true"] {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  outline: none !important;
}

/* Remove browser / TI focus styling on the inner icon/title area */
.dashboard-access-list-item-expander *,
.dashboard-access-list-item-expander:hover *,
.dashboard-access-list-item-expander:focus *,
.dashboard-access-list-item-expander:active * {
  background: transparent !important;
  box-shadow: none !important;
}

/* In case TI adds a selected/current wrapper state */
.dashboard-access-list-item[aria-expanded="true"],
.dashboard-access-list-item.is-active,
.dashboard-access-list-item.is-expanded {
  background: transparent !important;
}

/* Remove any pseudo-element highlight */
.dashboard-access-list-item-expander::before,
.dashboard-access-list-item-expander::after {
  content: none !important;
  display: none !important;
}

/* =========================================================
   LEARNER ACCESS CTA LAYOUT FIX
   - Keep CTA compact
   - Prevent full-width spanning feel
   - Improve responsive behavior
========================================================= */

/* Main row layout */
.dashboard-access-list-item .grid.grid-cols-12 {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) max-content 180px !important;
  gap: 16px !important;
  align-items: center !important;
}

/* Title/content column can shrink properly */
.dashboard-access-list-item .col-span-4,
.dashboard-access-list-item .col-span-3,
.dashboard-access-list-item .col-span-2,
.dashboard-access-list-item .col-start-11 {
  min-width: 0 !important;
}

/* Meta area */
.dashboard-access-list-item .col-span-3 {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-height: auto !important;
  white-space: nowrap;
}

/* CTA area */
.dashboard-access-list-item .col-start-11,
.dashboard-access-list-item .text-right {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  width: 180px !important;
  min-width: 180px !important;
  max-width: 180px !important;
}

/* Button should fill the reserved CTA slot consistently */
.dashboard-access .btn.btn--primary,
.dashboard-access a.btn.btn--primary,
.dashboard-access .btn--small,
.dashboard-access-list-item .btn,
.dashboard-access-list-item .button,
.dashboard-access-list-item a.btn {
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 180px !important;
  min-width: 180px !important;
  max-width: 180px !important;
  flex: 0 0 180px !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

/* Expanded detail action buttons should stay left-aligned */
.ua-access-detail__actions {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 10px !important;
}

.ua-access-detail__actions .btn,
.ua-access-detail__actions .button,
.ua-access-detail__actions a {
  width: auto !important;
  flex: 0 0 auto !important;
}

/* Tablet/mobile stacking */
@media (max-width: 1024px) {
  .dashboard-access-list-item .grid.grid-cols-12 {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .dashboard-access-list-item .col-span-3,
  .dashboard-access-list-item .col-start-11,
  .dashboard-access-list-item .text-right {
    justify-content: flex-start !important;
    text-align: left !important;
  }

  .dashboard-access-list-item .btn,
  .dashboard-access-list-item .button,
  .dashboard-access-list-item a.btn {
    width: auto !important;
    max-width: 100% !important;
  }
}
/* =========================================================
   FINAL LEARNER ACCESS CTA HOVER OVERRIDE
========================================================= */

/* Keep learner-access CTA wrappers fixed */
.dashboard-access .dashboard-access-list-item .col-start-11,
.dashboard-access .dashboard-access-list-item .text-right,
.dashboard-access .ua-access-detail__actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: auto !important;
  min-height: auto !important;
  transform: none !important;
}

/* Force only the actual CTA to size to content */
.dashboard-access .dashboard-access-list-item .btn,
.dashboard-access .dashboard-access-list-item .button,
.dashboard-access .dashboard-access-list-item a.btn,
.dashboard-access .ua-access-detail__actions .btn,
.dashboard-access .ua-access-detail__actions .button,
.dashboard-access .ua-access-detail__actions a {
  display: inline-flex !important;
  width: fit-content !important;
  max-width: max-content !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
  align-self: flex-start !important;
  justify-self: start !important;
  margin: 0 !important;
  position: static !important;
  transform: none !important;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease !important;
  will-change: auto !important;
}

/* Remove any movement from ancestor elements */
.dashboard-access .dashboard-access-list-item,
.dashboard-access .dashboard-access-list-item-expander,
.dashboard-access .dashboard-access-list-item .grid,
.dashboard-access .ua-access-detail,
.dashboard-access .ua-access-detail__body,
.dashboard-access .ua-access-detail__actions {
  transform: none !important;
}

/* Hover style: visual only, no movement */
.dashboard-access .dashboard-access-list-item .btn:hover,
.dashboard-access .dashboard-access-list-item .button:hover,
.dashboard-access .dashboard-access-list-item a.btn:hover,
.dashboard-access .ua-access-detail__actions .btn:hover,
.dashboard-access .ua-access-detail__actions .button:hover,
.dashboard-access .ua-access-detail__actions a:hover,
.dashboard-access .dashboard-access-list-item .btn:focus,
.dashboard-access .dashboard-access-list-item .button:focus,
.dashboard-access .dashboard-access-list-item a.btn:focus,
.dashboard-access .ua-access-detail__actions .btn:focus,
.dashboard-access .ua-access-detail__actions .button:focus,
.dashboard-access .ua-access-detail__actions a:focus {
  transform: none !important;
  top: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  background: rgba(255,255,255,0.12) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 26px rgba(0,0,0,0.22) !important;
}

.dashboard-access a.btn,
.dashboard-access button.btn,
.dashboard-access .btn {
  transform: none !important;
}
.dashboard-access a.btn:hover,
.dashboard-access button.btn:hover,
.dashboard-access .btn:hover {
  transform: none !important;
}

/* =========================================================
   REMOVE ALL HOVER LIFT IN LEARNER ACCESS
========================================================= */

/* Kill ANY transform on hover inside learner access */
.dashboard-access *:hover {
  transform: none !important;
  translate: none !important;
}

/* Specifically target common TI hover patterns */
.dashboard-access .dashboard-access-list-item-expander:hover,
.dashboard-access .dashboard-access-list-item:hover,
.dashboard-access .dashboard-access-list-item .grid:hover,
.dashboard-access .dashboard-access-list-item a:hover,
.dashboard-access .dashboard-access-list-item button:hover {
  transform: none !important;
}

/* =========================================================
   REPLACE WITH CLEAN HOVER (like Continue button)
========================================================= */

.dashboard-access .btn:hover,
.dashboard-access .button:hover,
.dashboard-access a.btn:hover {
  transform: none !important;
  background: rgba(255,255,255,0.12) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.18) !important;
}

/* =========================================================
   STOP LEARNER ACCESS ROW LIFT (ROOT CAUSE FIX)
========================================================= */

/* Kill lift on the expandable row itself */
.dashboard-access .dashboard-access-list-item-expander:hover,
.dashboard-access .dashboard-access-list-item-expander:focus,
.dashboard-access .dashboard-access-list-item-expander:active {
  transform: none !important;
  translate: none !important;
  top: auto !important;
}

/* Kill lift on the parent row/card */
.dashboard-access .dashboard-access-list-item:hover {
  transform: none !important;
}

/* Kill lift on grid wrapper (TI sometimes applies it here) */
.dashboard-access .dashboard-access-list-item .grid:hover {
  transform: none !important;
}

/* Safety: remove any transition that could animate layout */
.dashboard-access .dashboard-access-list-item-expander,
.dashboard-access .dashboard-access-list-item,
.dashboard-access .dashboard-access-list-item .grid {
  transition: none !important;
}

/* Final learner access row stability fix */
.dashboard-access-list-item {
  min-height: 64px !important;
}

.dashboard-access-list-item .grid.grid-cols-12 {
  min-height: 64px !important;
}

.dashboard-access-list-item .col-start-11,
.dashboard-access-list-item .text-right,
.dashboard-access-list-item .btn,
.dashboard-access-list-item .button,
.dashboard-access-list-item a.btn {
  min-height: 36px !important;
}

/* =========================================================
   CONTENT TYPE + DURATION SPACING FIX
========================================================= */

.dashboard-access-list-item .col-span-3 {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important; /* controls spacing globally */
}

/* Ensure equal spacing around divider */
.dashboard-access-list-item .col-span-3 span,
.dashboard-access-list-item .col-span-3 strong {
  display: inline-flex;
  align-items: center;
}

/* If divider is a pipe "|" */
.dashboard-access-list-item .col-span-3 span:has(+ span),
.dashboard-access-list-item .col-span-3 strong + span {
  margin-left: 8px !important;
}

/* Optional: explicitly style divider */
.dashboard-access-list-item .col-span-3 .divider {
  margin: 0 8px !important;
  opacity: 0.6;
}

/* =========================================
   LIVE SESSION LIST VIEW — MATCH DARK CARDS
========================================= */

.catalog-list-item.ua-live-list-enhanced,
.catalog-list-view-item.ua-live-list-enhanced,
.catalog-search-result.ua-live-list-enhanced {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

.ua-live-list-layout {
  display: grid !important;
  grid-template-columns: 280px minmax(0, 1fr) !important;
  align-items: stretch !important;
  gap: 0 !important;
  overflow: hidden !important;
  border-radius: 20px !important;
  background:
    linear-gradient(180deg, var(--ua-card-bg-top), var(--ua-card-bg-bottom)) !important;
  border: 1px solid var(--ua-card-border) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.04) !important;
  color: var(--ua-text-main) !important;
  min-height: 240px !important;
}

.ua-live-list-layout__media {
  width: 100% !important;
  height: 100% !important;
  min-height: 240px !important;
  overflow: hidden !important;
  background: #050505 !important;
  border-right: 1px solid rgba(255,255,255,0.08) !important;
}

.ua-live-list-layout__media img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 240px !important;
  object-fit: cover !important;
}

.ua-live-list-layout__body {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas:
    "meta meta"
    "title title"
    "description description"
    "spacer cta" !important;
  column-gap: 28px !important;
  row-gap: 16px !important;
  padding: 24px 28px !important;
  min-width: 0 !important;
  background: transparent !important;
}

.ua-live-list-layout__meta {
  grid-area: meta !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 12px 14px !important;
  width: 100% !important;
}

.ua-live-list-layout__title {
  grid-area: title !important;
  margin: 0 !important;
  color: var(--ua-text-main) !important;
  font-size: clamp(1.35rem, 1.6vw, 1.8rem) !important;
  line-height: 1.12 !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  max-width: 100% !important;
}

.ua-live-list-layout__description {
  grid-area: description !important;
  margin: 0 !important;
  max-width: 100% !important;
  color: var(--ua-text-soft) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.ua-live-list-layout__actions {
  grid-area: cta !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: end !important;
  align-self: end !important;
}

.ua-live-list-layout__cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 46px !important;
  padding: 11px 18px !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  line-height: 1 !important;
  border: 1px solid var(--ua-cta-border) !important;
  background: var(--ua-cta-bg) !important;
  color: var(--ua-cta-text) !important;
  box-shadow: 0 10px 30px var(--ua-card-shadow) !important;
  transition:
    transform 0.12s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease !important;
}

.ua-live-list-layout__cta:hover,
.ua-live-list-layout__cta:focus {
  transform: translateY(-1px) !important;
  background: var(--ua-cta-bg-hover) !important;
  color: var(--ua-cta-text) !important;
}

/* Make the pills spread horizontally better */
.ua-live-list-layout .ua-pill {
  white-space: nowrap !important;
  margin: 0 !important;
}

/* Optional: give date/time pills slightly more breathing room */
.ua-live-list-layout .ua-pill--live-date,
.ua-live-list-layout .ua-pill--live-time,
.ua-live-list-layout .ua-pill--live-type {
  min-height: 36px !important;
  padding: 8px 14px !important;
}

/* Tablet */
@media (max-width: 980px) {
  .ua-live-list-layout {
    grid-template-columns: 220px minmax(0, 1fr) !important;
  }

  .ua-live-list-layout__body {
    padding: 20px 22px !important;
    column-gap: 20px !important;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .ua-live-list-layout {
    grid-template-columns: 1fr !important;
  }

  .ua-live-list-layout__media {
    min-height: 190px !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  }

  .ua-live-list-layout__media img {
    min-height: 190px !important;
    max-height: 220px !important;
  }

  .ua-live-list-layout__body {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "meta"
      "title"
      "description"
      "cta" !important;
    padding: 18px !important;
  }

  .ua-live-list-layout__actions {
    justify-content: flex-start !important;
  }
}

/* ==========================================
   DASHBOARD STATS — FULL-WIDTH HERO BANNER
   Render banner as a real inner layer
   ========================================== */

.widget--dashboard-stats.widget--dashboard-stats_standard {
  position: relative !important;
  left: 50% !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;

  margin-top: 24px !important;
  padding: 56px 0 !important;
  overflow: hidden !important;
  background: transparent !important;
}

/* real banner layer injected by JS */
.widget--dashboard-stats .ua-dashboard-hero-bg {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;

  background-image:
    linear-gradient(180deg, rgba(14,17,24,0.42), rgba(14,17,24,0.7)),
    url("https://storage.googleapis.com/protraining-unity-it-fileshare-prd/TI_panoramas/GDC24_KeyArt_Spheres.png") !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-color: #0e1118 !important;
}

/* glow overlay */
.widget--dashboard-stats .ua-dashboard-hero-bg::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(circle at 18% 25%, rgba(0,174,240,0.16), transparent 28%),
    radial-gradient(circle at 82% 20%, rgba(209,42,197,0.14), transparent 24%) !important;
}

/* keep actual widget content above banner */
.widget--dashboard-stats > * {
  position: relative !important;
  z-index: 1 !important;
}

/* inner wrappers must stay transparent */
.widget--dashboard-stats .row,
.widget--dashboard-stats .columns,
.widget--dashboard-stats .small-12,
.widget--dashboard-stats .small-12.columns {
  background: transparent !important;
  background-color: transparent !important;
}

.widget--dashboard-stats .row {
  max-width: 1240px !important;
  margin: 0 auto !important;
}

.widget--dashboard-stats .small-12.columns {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* centered glass card */
.widget--dashboard-stats .dashboard-stats__container {
  position: relative !important;
  z-index: 2 !important;
  overflow: hidden !important;

  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 36px 40px !important;

  display: grid !important;
  grid-template-columns: minmax(0, 1.4fr) minmax(320px, 0.95fr) !important;
  gap: 28px !important;
  align-items: center !important;

  border-radius: 24px !important;
  background: linear-gradient(180deg, rgba(20,22,30,0.76), rgba(12,14,20,0.82)) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,0.24) !important;
  backdrop-filter: blur(8px) !important;
}

.ua-dashboard-hero-copy {
  max-width: 640px;
  margin: 0 auto 0 0;
}

.ua-dashboard-hero-copy h2 {
  margin: 0 0 12px 0 !important;
  color: #ffffff !important;
  font-size: clamp(2.25rem, 4vw, 3.6rem) !important;
  line-height: 0.95 !important;
  letter-spacing: -0.04em !important;
  font-weight: 800 !important;
}

.ua-dashboard-hero-copy p {
  margin: 0 !important;
  color: rgba(255,255,255,0.84) !important;
  font-size: 1rem !important;
  line-height: 1.6 !important;
  max-width: 58ch !important;
}

.widget--dashboard-stats .dashboard-stats {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;

  display: grid !important;
  grid-template-columns: repeat(2, minmax(150px, 1fr)) !important;
  gap: 14px !important;
  align-self: center !important;
}

.widget--dashboard-stats .dashboard-stat--available,
.widget--dashboard-stats .dashboard-stat--collaborations {
  display: none !important;
}

.widget--dashboard-stats .dashboard-stat {
  min-height: 110px !important;
  padding: 18px 16px !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;

  text-align: center !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04) !important;
}

.widget--dashboard-stats .dashboard-stat__label {
  margin-bottom: 8px !important;
  color: rgba(255,255,255,0.58) !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

.widget--dashboard-stats .dashboard-stat__label svg,
.widget--dashboard-stats .dashboard-stat__label i {
  display: none !important;
}

.widget--dashboard-stats .dashboard-stat__value,
.widget--dashboard-stats .dashboard-stat strong,
.widget--dashboard-stats .dashboard-stat b {
  display: block !important;
  font-size: clamp(2rem, 3vw, 2.7rem) !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  color: #ffffff !important;
}

.widget--dashboard-stats .dashboard-stat--started .dashboard-stat__value,
.widget--dashboard-stats .dashboard-stat--started strong,
.widget--dashboard-stats .dashboard-stat--started b {
  color: #11c5b5 !important;
}

.widget--dashboard-stats .dashboard-stat--completed .dashboard-stat__value,
.widget--dashboard-stats .dashboard-stat--completed strong,
.widget--dashboard-stats .dashboard-stat--completed b {
  color: #d12ac5 !important;
}

@media (max-width: 900px) {
  .widget--dashboard-stats.widget--dashboard-stats_standard {
    padding: 40px 0 !important;
  }

  .widget--dashboard-stats .dashboard-stats__container {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
    padding: 28px 22px !important;
  }

  .widget--dashboard-stats .dashboard-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .ua-dashboard-hero-copy {
    max-width: 100%;
    margin: 0;
  }
}

@media (max-width: 640px) {
  .widget--dashboard-stats.widget--dashboard-stats_standard {
    padding: 28px 0 !important;
  }

  .widget--dashboard-stats .small-12.columns {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .widget--dashboard-stats .dashboard-stats {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================
   FIX: Remove white seam between header + dashboard
   ========================================== */

/* Remove border/divider above dashboard */
.widget--dashboard-stats.widget--dashboard-stats_standard {
  border-top: none !important;
  margin-top: 0 !important;
}

/* Kill any top border coming from wrappers */
.widget--dashboard-stats.widget--dashboard-stats_standard,
.widget--dashboard-stats.widget--dashboard-stats_standard .row,
.widget--dashboard-stats.widget--dashboard-stats_standard .columns {
  border-top: none !important;
}

/* Remove spacing from previous section */
.widget--dashboard-stats.widget--dashboard-stats_standard {
  margin-top: -1px !important;
}

/* ==========================================
   CONTENT CARD META ROW
   Duration + Skill Level
   ========================================== */

.ua-card-meta-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  margin: 0 0 18px 0 !important;
}

.ua-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 36px !important;
  padding: 8px 16px !important;
  border-radius: 14px !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* duration */
.ua-pill--duration {
  background: rgba(56, 130, 246, 0.14) !important;
  border: 1px solid rgba(96, 165, 250, 0.38) !important;
  color: #7cc7ff !important;
}

/* skill levels */
.ua-pill--beginner {
  background: rgba(34, 197, 94, 0.16) !important;
  border: 1px solid rgba(74, 222, 128, 0.42) !important;
  color: #86efac !important;
}

.ua-pill--intermediate {
  background: rgba(234, 179, 8, 0.16) !important;
  border: 1px solid rgba(250, 204, 21, 0.42) !important;
  color: #fde047 !important;
}

.ua-pill--advanced {
  background: rgba(239, 68, 68, 0.16) !important;
  border: 1px solid rgba(248, 113, 113, 0.42) !important;
  color: #fca5a5 !important;
}

/* ==========================================
   CONTENT CARDS — FORCE EQUAL HEIGHT
   ========================================== */

.catalog-card,
.course-card,
.learning-path-card {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

.catalog-card__body,
.course-card__body,
.learning-path-card__body,
.card__body {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Reserve space EVEN IF duration is missing */
.ua-card-meta-row {
  min-height: 40px !important;
  margin-bottom: 18px !important;
}

/* Create invisible placeholder if empty */
.ua-card-meta-row:empty::before {
  content: "";
  display: block;
  height: 24px;
}

/* Title alignment
   SCOPED: the original applied min-height to bare h3/h4,
   which reached into the manager UI. Now limited to cards. */
.catalog-card__title,
.course-card__title,
.card__title,
.catalog-card h3, .catalog-card h4,
.course-card h3, .course-card h4,
.learning-path-card h3, .learning-path-card h4 {
  min-height: 2.6em !important;
}

/* Description alignment */
.catalog-card p,
.course-card p,
.card__description {
  min-height: 3.6em !important;
}

/* Push CTA to bottom */
.catalog-card .btn,
.course-card .btn,
.card__body .btn,
.card__body .button {
  margin-top: auto !important;
}

/* Ensure grid stretches */
.catalog-grid,
.course-grid {
  align-items: stretch !important;
}

.catalog-grid > *,
.course-grid > * {
  display: flex !important;
}

/* Keep live cards aligned with cards that have duration pills */
.ua-live-meta {
  min-height: 40px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  margin: 0 0 18px 0 !important;
}

.ua-live-meta-spacer {
  display: block !important;
  width: 1px !important;
  height: 36px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ==========================================
   HEADER AUTH / USER MENU
   ========================================== */

.unity-header__auth {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}

.unity-header__signin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: #ffffff;
  text-decoration: none;
  font-weight: 700;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.unity-header__signin:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.22);
  color: #ffffff;
}

.unity-header__user-name {
  display: none;
}

.unity-header__user-menu {
  position: relative;
}

.unity-header__user-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
  color: #ffffff;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,0.24);
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.12s ease;
}

.unity-header__user-trigger:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.24);
  transform: translateY(-1px);
}

.unity-header__user-trigger:focus-visible {
  outline: 2px solid #00c2ff;
  outline-offset: 3px;
}

.unity-header__user-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1;
  text-transform: uppercase;
}

.unity-header__auth--signed-in {
  position: relative;
  display: flex;
  align-items: center;
}

.unity-header__user-initials svg {
  display: block;
}

/* ==========================================
   HEADER USER DROPDOWN — FINAL POSITIONING
   Consolidated: the original file repeated these
   blocks several times with escalating overrides.
   The fixed-position variant below is the one that
   was winning, so it is kept as the single source.
   ========================================== */

.unity-header,
.unity-header__inner,
.unity-header__right,
.unity-header__auth,
.unity-header__auth--signed-in,
.unity-header__user-menu {
  overflow: visible !important;
}

.unity-header {
  position: relative !important;
  z-index: 5000 !important;
}

.unity-header__inner {
  position: relative !important;
  z-index: 5001 !important;
}

.unity-header__right {
  position: relative !important;
  z-index: 5002 !important;
}

.unity-header__auth--signed-in {
  position: relative !important;
  z-index: 5003 !important;
}

.unity-header__user-menu {
  position: relative !important;
  z-index: 5004 !important;
}

.unity-header__dropdown {
  position: fixed !important;
  top: 72px !important;
  right: 20px !important;
  min-width: 190px !important;
  padding: 8px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  background: linear-gradient(180deg, rgba(18,20,26,0.98), rgba(10,12,16,0.98)) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,0.36) !important;
  backdrop-filter: blur(10px) !important;
  z-index: 999999 !important;

  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(-6px) !important;
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    visibility 0.18s ease !important;
}

.unity-header__user-menu.is-open .unity-header__dropdown {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

.unity-header__dropdown a {
  display: block !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

.unity-header__dropdown a:hover {
  background: rgba(255,255,255,0.08) !important;
}

/* Portal dropdown appended to body */
.unity-header__dropdown-portal {
  position: fixed !important;
  top: 72px !important;
  right: 20px !important;
  min-width: 220px !important;
  max-width: min(24rem, calc(100vw - 24px)) !important;
  padding: 8px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  background: linear-gradient(180deg, rgba(18,20,26,0.98), rgba(10,12,16,0.98)) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,0.36) !important;
  backdrop-filter: blur(10px) !important;
  z-index: 2147483647 !important;
  overflow: hidden !important;
  transform-origin: top right !important;

  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(-8px) scale(0.96) !important;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease !important;
}

.unity-header__dropdown-portal.is-open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) scale(1) !important;
}

.unity-header__dropdown-portal a {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  padding: 10px 12px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  background: transparent !important;
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

.unity-header__dropdown-portal a:last-child {
  border-bottom: 0 !important;
}

.unity-header__dropdown-portal a:hover,
.unity-header__dropdown-portal a:focus {
  background: rgba(0, 194, 255, 0.12) !important;
  color: #ffffff !important;
  box-shadow: inset 0 0 0 1px rgba(0,194,255,0.25);
}

/* ==========================================
   HEADER RIGHT ALIGNMENT
   ========================================== */

.unity-header__right {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 14px !important;
}

/* Normalize search bar height */
.unity-header__search {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
}

.unity-header__search input,
.unity-header__search button {
  margin: 0 !important;
  vertical-align: middle !important;
}

/* Force the auth wrappers to center */
.unity-header__auth,
.unity-header__auth--signed-in,
.unity-header__auth--signed-out {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
}

/* Keep trigger perfectly centered */
.unity-header__user-trigger {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  padding: 0 !important;
  line-height: 1 !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(0,194,255,0.55) !important;
  box-shadow: 0 0 0 2px rgba(0,194,255,0.18) !important;
  color: #ffffff !important;
  cursor: pointer !important;
}

/* Prevent hover lift from making it look off-center */
.unity-header__user-trigger:hover {
  transform: none !important;
}

/* Full-size icon wrapper */
.unity-header__user-initials {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

/* Vertically center the SVG visually */
.unity-header__user-initials svg {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  transform: translateY(-1px) !important;
}

/* ==========================================
   HEADER AUTH — VISIBILITY RULES
   NOTE: the original file repeated this block four
   times (unitySignedOut/unitySignedIn, then again
   with unityTiAuthMount, then unityTiAuthProxy).
   Consolidated into one.
   ========================================== */

#unitySignedOut,
#unitySignedIn,
#unityTiAuthMount,
#unityTiAuthProxy {
  align-items: center !important;
  margin: 0 !important;
}

#unitySignedOut[hidden],
#unitySignedIn[hidden],
#unityTiAuthMount[hidden],
#unityTiAuthProxy[hidden],
#unityTiAuthProxyMenu[hidden] {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

#unitySignedOut:not([hidden]),
#unitySignedIn:not([hidden]),
#unityTiAuthMount:not([hidden]),
#unityTiAuthProxy:not([hidden]) {
  display: flex !important;
}

.unity-header__right > .unity-header__search,
.unity-header__right > #unitySignedOut,
.unity-header__right > #unitySignedIn,
.unity-header__right > #unityTiAuthMount,
.unity-header__right > #unityTiAuthProxy {
  align-self: center !important;
  margin: 0 !important;
}

/* ==========================================
   NATIVE TI AUTH CONTROL IN CUSTOM HEADER
   ========================================== */

#unityTiAuthMount {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Reset TI wrappers once moved */
#unityTiAuthMount .ml-auto,
#unityTiAuthMount .ember-view,
#unityTiAuthMount .relative {
  display: flex !important;
  align-items: center !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
}

/* Make the native TI button behave like your avatar trigger */
#unityTiAuthMount button[id^="headlessui-menu-button-"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  cursor: pointer !important;
  width: auto !important;
  min-width: 0 !important;
}

/* Hide TI name text so only the avatar bubble remains */
#unityTiAuthMount button[id^="headlessui-menu-button-"] .truncate {
  display: none !important;
}

/* Hide TI chevron */
#unityTiAuthMount button[id^="headlessui-menu-button-"] .w-4.h-4,
#unityTiAuthMount button[id^="headlessui-menu-button-"] svg.w-4.h-4 {
  display: none !important;
}

/* Style the native initials bubble */
#unityTiAuthMount button[id^="headlessui-menu-button-"] .rounded-full {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  margin: 0 !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(0, 194, 255, 0.55) !important;
  box-shadow: 0 0 0 2px rgba(0, 194, 255, 0.18) !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

/* remove extra wrapper spacing */
#unityTiAuthMount .flex.items-center,
#unityTiAuthMount .whitespace-nowrap.flex.items-center {
  gap: 0 !important;
  margin: 0 !important;
}

/* ==========================================
   NATIVE TI DROPDOWN — RESTYLE TO YOUR UI
   ========================================== */

div.fixed.min-h-min.z-\[50004\] {
  z-index: 2147483647 !important;
}

div.fixed.min-h-min.z-\[50004\] > * {
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  background: linear-gradient(180deg, rgba(18,20,26,0.98), rgba(10,12,16,0.98)) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,0.36) !important;
  backdrop-filter: blur(10px) !important;
  overflow: hidden !important;
}

div.fixed.min-h-min.z-\[50004\] a,
div.fixed.min-h-min.z-\[50004\] button {
  display: block !important;
  width: 100% !important;
  padding: 10px 12px !important;
  border: 0 !important;
  background: transparent !important;
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-align: left !important;
  box-shadow: none !important;
}

div.fixed.min-h-min.z-\[50004\] a:hover,
div.fixed.min-h-min.z-\[50004\] button:hover {
  background: rgba(255,255,255,0.08) !important;
}

/* ==========================================
   TI ACCOUNT DROPDOWN PANEL — FINAL UI OVERRIDE
   Consolidated from the four repeated
   .ua-ti-menu-panel blocks in the original file.
   ========================================== */

.ua-ti-menu-panel {
  min-width: 220px !important;
  width: 220px !important;
  max-width: min(24rem, calc(100vw - 24px)) !important;
  padding: 8px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  background: linear-gradient(180deg, rgba(18,20,26,0.98), rgba(10,12,16,0.98)) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,0.36) !important;
  backdrop-filter: blur(10px) !important;
  overflow: hidden !important;
  list-style: none !important;
  z-index: 2147483647 !important;
  transform-origin: top right !important;

  /* Headless UI collapse guard */
  transform: none !important;
  scale: 1 !important;
  opacity: 1 !important;
  display: block !important;
  visibility: visible !important;
}

.ua-ti-menu-panel[style*="scale(0)"],
.ua-ti-menu-panel[style*="transform"] {
  transform: none !important;
}

.ua-ti-menu-panel * {
  visibility: visible !important;
}

.ua-ti-menu-panel a,
.ua-ti-menu-panel button,
.ua-ti-menu-panel a[role="menuitem"] {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 10px 12px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  background: transparent !important;
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  text-align: left !important;
  box-shadow: none !important;
}

.ua-ti-menu-panel a:last-child,
.ua-ti-menu-panel a[role="menuitem"]:last-child {
  border-bottom: 0 !important;
}

.ua-ti-menu-panel a:hover,
.ua-ti-menu-panel a:focus,
.ua-ti-menu-panel button:hover,
.ua-ti-menu-panel a[role="menuitem"]:hover,
.ua-ti-menu-panel a[role="menuitem"]:focus {
  background: rgba(255,255,255,0.08) !important;
  color: #ffffff !important;
  outline: none !important;
}

.ua-ti-menu-panel svg {
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 auto !important;
  color: rgba(255,255,255,0.82) !important;
}

/* ==========================================
   USE NATIVE TI ACCOUNT WIDGET AS-IS
   Position it in the custom header
   ========================================== */

.unity-header__right {
  padding-right: 64px !important; /* room for native TI widget */
}

/* target the real TI user widget wrapper */
.ml-auto:has(button[id^="headlessui-menu-button-"][aria-haspopup="true"]) {
  position: fixed !important;
  top: 14px !important;
  right: 24px !important;
  z-index: 6000 !important;
  margin: 0 !important;
  width: auto !important;
  min-width: 0 !important;
}

/* strip the extra name + chevron if you only want the circle */
.ml-auto:has(button[id^="headlessui-menu-button-"][aria-haspopup="true"]) .truncate {
  display: none !important;
}

.ml-auto:has(button[id^="headlessui-menu-button-"][aria-haspopup="true"]) svg.w-4.h-4,
.ml-auto:has(button[id^="headlessui-menu-button-"][aria-haspopup="true"]) .w-4.h-4 {
  display: none !important;
}

/* style the native TI initials bubble to match your UI */
.ml-auto:has(button[id^="headlessui-menu-button-"][aria-haspopup="true"]) .rounded-full {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  margin: 0 !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(0, 194, 255, 0.55) !important;
  box-shadow: 0 0 0 2px rgba(0, 194, 255, 0.18) !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

/* remove extra wrapper spacing */
.ml-auto:has(button[id^="headlessui-menu-button-"][aria-haspopup="true"]) .flex.items-center,
.ml-auto:has(button[id^="headlessui-menu-button-"][aria-haspopup="true"]) .whitespace-nowrap.flex.items-center {
  gap: 0 !important;
  margin: 0 !important;
}

/* ------------------------------------------
   NATIVE TI DROPDOWN
   Keep TI behavior, just skin it
   ------------------------------------------ */

[id^="headlessui-menu-items-"][role="menu"] {
  min-width: 220px !important;
  max-width: min(24rem, calc(100vw - 24px)) !important;
  padding: 8px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  background: linear-gradient(180deg, rgba(18,20,26,0.98), rgba(10,12,16,0.98)) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,0.36) !important;
  backdrop-filter: blur(10px) !important;
  overflow: hidden !important;
  z-index: 2147483647 !important;
}

/* menu items */
[id^="headlessui-menu-items-"][role="menu"] a[role="menuitem"] {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 10px 12px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  background: transparent !important;
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  text-align: left !important;
}

[id^="headlessui-menu-items-"][role="menu"] a[role="menuitem"]:last-child {
  border-bottom: 0 !important;
}

[id^="headlessui-menu-items-"][role="menu"] a[role="menuitem"]:hover,
[id^="headlessui-menu-items-"][role="menu"] a[role="menuitem"]:focus {
  background: rgba(255,255,255,0.08) !important;
  color: #ffffff !important;
  outline: none !important;
}

[id^="headlessui-menu-items-"][role="menu"] a[role="menuitem"] svg {
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 auto !important;
  color: rgba(255,255,255,0.82) !important;
}

/* ==========================================
   GLOBAL SCROLL + BACKGROUND FIX
   SCOPED — these were unscoped and applied to the
   manager/Reporting Hub UI, forcing overflow on the
   admin body and producing a second scrollbar.
   ========================================== */

html:has(body:not(.manager)) {
  overflow-x: hidden !important;
  background-color: #ffffff !important;
}

body:not(.manager) {
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  background-color: #ffffff !important;
}

/* Restore scroll on non-dashboard learner pages only */
body:not(.manager):not(.dashboard):not(.learn) {
  overflow-y: auto !important;
}

/* Background fixes */
body.learn {
  background-color: #ffffff !important;
}

body.dashboard {
  background-color: #ffffff !important;
}

body.dashboard .widget.widget--html.widget--html_standard:first-of-type {
  padding-top: 0 !important;
}

/* ==========================================
   UA CUSTOM BUTTON STYLES
   ========================================== */

.ua-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 42px !important;
  padding: 0 20px !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
}

.ua-btn--primary {
  background-color: #3a5bc7 !important;
  color: #ffffff !important;
  border: none !important;
}

.ua-btn--primary:hover {
  background-color: #2d4aa3 !important;
  color: #ffffff !important;
}

.ua-btn--secondary {
  background-color: #000000 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
}

.ua-btn--secondary:hover {
  background-color: #1a1a1a !important;
  color: #ffffff !important;
}

.ua-btn svg {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
}

/* ==========================================
   REMOVE TI NATIVE HEADER TOP PADDING
   SCOPED to non-manager pages.
   ========================================== */
body:not(.manager) .header.header--microsite {
  padding-top: 0 !important;
}

/* Hide View Details button */
.dashboard-access-list-view-detail-page,
a.btn.btn--alt.dashboard-access-list-view-detail-page {
  display: none !important;
}

/* Hide progress bar */
.user-engagement-progress-bar {
  display: none !important;
}

/* Row layout — horizontal */
[id^="dashboard-access-expandable-item-content"] .row {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 20px !important;
  padding: 12px 0 !important;
}

/* Description text */
.dashboard-access-list-item__description p {
  margin: 0 0 14px !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: rgba(255,255,255,0.82) !important;
}

/* Stats grid — horizontal row */
.user-engagement-stats {
  margin-top: 0 !important;
}

.user-engagement-stats ul {
  display: flex !important;
  flex-direction: row !important;
  gap: 24px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.user-engagement-stats li {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  min-width: 80px !important;
}

/* Stat label */
.user-engagement-stat__label {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: rgba(255,255,255,0.58) !important;
  text-align: center !important;
}

/* Hide help icon */
.user-engagement-stat__label-hint {
  display: none !important;
}

/* Stat value */
.user-engagement-stat__value-container {
  display: flex !important;
  align-items: baseline !important;
  gap: 2px !important;
}

.user-engagement-stat__value-container i {
  display: none !important;
}

.user-engagement-stat__value {
  font-size: clamp(1.8rem, 2.5vw, 2.4rem) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -0.04em !important;
  color: #ffffff !important;
}

.user-engagement-stat__value--percent {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,0.7) !important;
}

/* Color the stats */
.user-engagement-stat--hours .user-engagement-stat__value {
  color: #56c2ff !important;
}

.user-engagement-stat--percent-viewed .user-engagement-stat__value {
  color: #ffffff !important;
}

.user-engagement-stat--percent-complete .user-engagement-stat__value {
  color: #d946ef !important;
}

.dashboard-access-list-item .medium-4.columns {
  width: 260px !important;
  min-width: 260px !important;
  max-width: 260px !important;
  flex-shrink: 0 !important;
  float: none !important;
  padding: 0 !important;
}

.dashboard-access-list-item .medium-4.columns img {
  width: 260px !important;
  height: 146px !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  display: block !important;
  max-width: 260px !important;
}

[id^="dashboard-access-expandable-item-content"] .medium-4 {
  width: 260px !important;
  min-width: 260px !important;
  max-width: 260px !important;
  float: none !important;
  padding: 0 !important;
}

/* CTA button sizes to content, anchored right */
.dashboard-access-list-item .grid.grid-cols-12 {
  grid-template-columns: minmax(0, 1fr) max-content max-content !important;
}

.dashboard-access-list-item .col-start-11,
.dashboard-access-list-item .text-right {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  justify-content: flex-end !important;
}

.dashboard-access-list-item .btn.btn--primary,
.dashboard-access-list-item a.btn.btn--primary {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  padding: 9px 14px !important;
  font-size: 13px !important;
}

/* ── Hide 'Gift This Learning Path' button ──────────
   Targets the secondary actions container on all
   Learning Path detail pages globally.
   ───────────────────────────────────────────────── */

.enroll__secondary-actions {
  display: none !important;
}

/* ── Sidebar button alignment — video player top edge ── */

.course__detail__sidebar .widget--learning-path-purchase {
  padding-top: 105px !important;
}

.widget--course-purchase {
  padding-top: 95px !important;
}

/* Prevent last card in catalog grid from stretching full width */
ul.large-block-grid-3 > li,
ul.medium-block-grid-2 > li {
  max-width: 33.333% !important;
  box-sizing: border-box !important;
}

@media (max-width: 1024px) {
  ul.medium-block-grid-2 > li {
    max-width: 50% !important;
  }
}

@media (max-width: 640px) {
  ul.small-block-grid-1 > li {
    max-width: 100% !important;
  }
}

/* ==========================================
   CAROUSEL SECTION HEADERS
   ========================================== */

/* Section title */
.widget__alt-title__container--with-cta h3,
.widget__alt-title__container--with-cta h2 {
  font-size: clamp(1.4rem, 2vw, 1.8rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
  color: #111318 !important;
  margin: 0 !important;
}

a.widget__title-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 40px !important;
  padding: 0 20px !important;
  border-radius: 8px !important;
  border: none !important;
  background: #111318 !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
  transition: background 0.15s ease, box-shadow 0.15s ease !important;
}

a.widget__title-cta:hover {
  background: #1f2937 !important;
  color: #ffffff !important;
  box-shadow: 0 6px 16px rgba(0,0,0,0.2) !important;
}

/* Remove gap between FAQ and section above */
.widget:has(#ua-faq) {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.row.widget + .row.widget {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Kill white background on widget wrappers between dark sections
   SCOPED: .container is used by the manager UI. */
body:not(.manager) .container.sidebar--closed--right,
body:not(.manager) .container.sidebar--closed--right > div {
  background-color: transparent !important;
}

/* ==========================================
   CONTENT TYPE BADGE COLORS PER TYPE
   Consolidated — the original file repeated
   several of these blocks verbatim.
   ========================================== */

/* Default — red (Course) */
.ua-content-type-badge {
  background: #d93b4f !important;
}

/* English */
.ua-content-type-badge[data-ua-type="Live Session"]        { background: #0891b2 !important; }
.ua-content-type-badge[data-ua-type="Learning Path"]       { background: #7c3aed !important; }
.ua-content-type-badge[data-ua-type="On Demand Course"]    { background: #1d4ed8 !important; }
.ua-content-type-badge[data-ua-type="QuickStart Course"]   { background: #ea580c !important; }
.ua-content-type-badge[data-ua-type="Article"]             { background: #475569 !important; }
.ua-content-type-badge[data-ua-type="Microcourse"]         { background: #16a34a !important; }
.ua-content-type-badge[data-ua-type="Webinar"]             { background: #db2777 !important; }
.ua-content-type-badge[data-ua-type="vILT"]                { background: #9333ea !important; }
.ua-content-type-badge[data-ua-type="Practice Exam"]       { background: #0d9488 !important; }

/* Korean */
.ua-content-type-badge[data-ua-type="Live 세션"]            { background: #0891b2 !important; }
.ua-content-type-badge[data-ua-type="학습 경로"]            { background: #7c3aed !important; }
.ua-content-type-badge[data-ua-type="온디맨드 교육 과정"]     { background: #1d4ed8 !important; }
.ua-content-type-badge[data-ua-type="퀵스타드 교육 과정"]     { background: #ea580c !important; }
.ua-content-type-badge[data-ua-type="모의시험"]              { background: #0d9488 !important; }

/* Japanese */
.ua-content-type-badge[data-ua-type="ライブセッション"]        { background: #0891b2 !important; }
.ua-content-type-badge[data-ua-type="ラーニングパス"]          { background: #7c3aed !important; }
.ua-content-type-badge[data-ua-type="オンデマンドコース"]       { background: #1d4ed8 !important; }
.ua-content-type-badge[data-ua-type="クイックスタートのコース"]  { background: #ea580c !important; }
.ua-content-type-badge[data-ua-type="模擬試験"]              { background: #0d9488 !important; }

/* ==========================================
   CONTENT TYPE ACTIVE FILTER — MATCH TI STYLE
   ========================================== */

.catalog-active-filters {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Make both native and custom active filters look identical */
.catalog-active-filter__remove,
a.catalog-active-filter__remove,
button.catalog-active-filter__remove,
.catalog-active-filters button.catalog-active-filter__remove {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 0 14px !important;
  border-radius: 10px !important;
  border: 1px solid rgb(229, 231, 235) !important;
  background: #ffffff !important;
  color: rgb(75, 85, 99) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  min-height: 36px !important;
  height: 36px !important;
  line-height: 1 !important;
  box-shadow: none !important;
}

.catalog-active-filter__remove:hover,
a.catalog-active-filter__remove:hover,
button.catalog-active-filter__remove:hover {
  transform: none !important;
  box-shadow: none !important;
  background: #f3f4f6 !important;
  border-color: #9ca3af !important;
  color: #111827 !important;
}

.catalog-active-filter,
.catalog-active-filter *,
a.catalog-active-filter__remove {
  font-weight: 400 !important;
}

/* Left anchor titles on content cards */
.featured-content-multi-carousel-item__title,
.catalog-grid-item__title {
  text-align: left !important;
}

/* ==========================================
   HEADER SEARCH + SIGN IN — UNIFIED STYLE
   ========================================== */

.unity-header__search button,
.unity-header__signin {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 38px !important;
  height: 38px !important;
  padding: 0 16px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
  background: rgba(255,255,255,0.07) !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.01em !important;
  cursor: pointer !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: background 0.2s ease, border-color 0.2s ease !important;
  box-shadow: none !important;
}

.unity-header__search button:hover,
.unity-header__signin:hover {
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(255,255,255,0.4) !important;
  color: #ffffff !important;
  box-shadow: none !important;
  transform: none !important;
}

.unity-header__search button:focus,
.unity-header__search button:active,
.unity-header__signin:focus,
.unity-header__signin:active {
  background: rgba(255,255,255,0.15) !important;
  border-color: rgba(255,255,255,0.5) !important;
  color: #ffffff !important;
  outline: 2px solid rgba(0,194,255,0.5) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

.unity-header__search input {
  height: 38px !important;
}

/* ==========================================
   FIX WHITE HEADER IN LEARNER PREVIEW MODE
   ========================================== */

body.learn:not(.manager) .ember-view.header,
body.dashboard .ember-view.header,
.ember-view.header--dashboard,
.ember-view.header--microsite {
  background-color: #000000 !important;
}

.unity-header,
.unity-header:first-child {
  background-color: #000000 !important;
  background: #000000 !important;
}

/* ==========================================
   LEARNER PREVIEW MODE — FIX HEADER GAP
   ========================================== */

/* Make the management bar dark
   NOTE: #ember2006 is a generated Ember ID and will change
   between builds — it is retained only as a legacy fallback.
   The class selectors below are what actually hold. */
#ember2006,
.panel.panel--secondary.flex.py-2.px-4.rounded,
[class*="panel--secondary"] {
  background-color: #111318 !important;
  color: #ffffff !important;
}

[class*="panel--secondary"] i,
[class*="panel--secondary"] span,
[class*="panel--secondary"] a {
  color: #ffffff !important;
}

/* ==========================================
   FIX TI NATIVE HEADER IN LEARNER PREVIEW
   NOTE: this block appeared twice in the original file.
   Duplicate removed.
   ========================================== */
body.learn:not(.manager) .header.header--dashboard,
body.learn:not(.manager) .header.header--microsite,
body.learn:not(.manager) .header.header--learn {
  background: #000000 !important;
  background-color: #000000 !important;
}

body.learn:not(.manager) .header .header__inner,
body.learn:not(.manager) .header .container,
body.learn:not(.manager) .header nav {
  background: #000000 !important;
  background-color: #000000 !important;
}

body.learn:not(.manager) .header a,
body.learn:not(.manager) .header nav a {
  color: #ffffff !important;
}

#unityDashboardHeader {
  background-color: #000000 !important;
  background: #000000 !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Remove gap between management bar and header */
.panel.panel--secondary {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

#unityDashboardHeader .unity-header__logo {
  height: 52px !important;
  width: auto !important;
}

#unityDashboardHeader .unity-header__inner {
  min-height: 60px !important;
}

/* Restore native manager styling for the secondary panel */
body.manager .panel--secondary,
body.manager [class*="panel--secondary"] {
  background-color: revert !important;
  color: revert !important;
}

/* ==========================================
   ACCOUNT PAGE — DARK HEADER
   ========================================== */

body.account .header.header--dashboard {
  background: #000000 !important;
  background-color: #000000 !important;
  border-bottom: 2px solid #00aef0 !important;
}

body.account .header.header--dashboard .header__inner {
  background: #000000 !important;
  background-color: #000000 !important;
}

body.account .header.header--dashboard a,
body.account .header.header--dashboard nav a,
body.account .header.header--dashboard .nav__link {
  color: #ffffff !important;
}

body.account .header.header--dashboard a:hover {
  color: #66b3ff !important;
}

/* Style the logo area */
body.account .header.header--dashboard .company__beta-logo img {
  filter: brightness(0) invert(1) !important;
}

/* Style any nav links */
body.account .header.header--dashboard .header__nav-link,
body.account .header.header--dashboard .nav-link {
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* ==========================================
   ACCOUNT PAGE — REPLACE LOGO
   ========================================== */

body.account .company__beta-logo img,
body.account .company-logo__container img {
  content: url('https://storage.googleapis.com/protraining-unity-it-fileshare-prd/Assets/U_Logo_Small_White_RGB_1C%201.png') !important;
  height: 52px !important;
  width: auto !important;
  object-fit: contain !important;
}

/* Hide TI logo container background */
body.account .company-logo__container {
  background: transparent !important;
}

body.account .company__beta-logo {
  padding-bottom: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
}

body.account .header .header__inner .row {
  display: flex !important;
  align-items: stretch !important;
  min-height: 80px !important;
}

body.account .header .header__inner .column {
  display: flex !important;
  align-items: center !important;
}

body.account .header .column.small-6:first-child {
  display: flex !important;
  align-items: center !important;
}

body.account .header .ml-auto,
body.account .header .flex.items-center.gap-4 {
  display: none !important;
}

/* Hide TI native microsite header — but not our custom one or account page */
body:not(.manager):not(.account) .ember-view.header.header--microsite {
  display: none !important;
}

body.dashboard #ua-injected-footer {
  margin-top: -20px !important;
  position: relative !important;
  z-index: 1 !important;
}

body:not(.dashboard) #ua-injected-footer {
  display: none !important;
}

body.home #ua-injected-footer,
body.index #ua-injected-footer {
  display: block !important;
}

/* ==========================================
   PANORAMA BRAND OVERRIDES
   ========================================== */

/* Industry panorama — dashboard stats hero image */
body:has(a[href*="client=industry"]) .widget--dashboard-stats .ua-dashboard-hero-bg {
  background-image:
    linear-gradient(180deg, rgba(14,17,24,0.42), rgba(14,17,24,0.7)),
    url("https://storage.googleapis.com/protraining-unity-it-fileshare-prd/Assets/U_ATM_Wheel_SH01%20(1).png") !important;
}

/* Games & Entertainment panorama — dashboard stats hero image */
body:has(a[href*="client=games-entertainment"]) .widget--dashboard-stats .ua-dashboard-hero-bg {
  background-image:
    linear-gradient(180deg, rgba(14,17,24,0.42), rgba(14,17,24,0.7)),
    url("https://storage.googleapis.com/protraining-unity-it-fileshare-prd/Assets/DragonCrashers_ZoomBackground_HeroA.png") !important;
}

/* AD Gaming panorama — dashboard stats hero image */
body:has(a[href*="client=ad-gaming"]) .widget--dashboard-stats .ua-dashboard-hero-bg {
  background-image:
    linear-gradient(180deg, rgba(14,17,24,0.42), rgba(14,17,24,0.7)),
    url("https://storage.googleapis.com/protraining-unity-it-fileshare-prd/TI_panoramas/AD_Gaming/AD_Gaming_LOGO-White.png") !important;
}

/* ================================================
   AD Gaming panorama — brand colours
   ================================================ */

body:has(a[href*="client=ad-gaming"]) .unity-header__bottom-line {
  background: #F01E72 !important;
}

body:has(a[href*="client=ad-gaming"]) .unity-header__nav-link.is-active,
body:has(a[href*="client=ad-gaming"]) .unity-header__nav-link:hover {
  color: #1E65F0 !important;
}

body:has(a[href*="client=ad-gaming"]) .unity-header__nav-link.is-active::after {
  background: #1E65F0 !important;
}

body:has(a[href*="client=ad-gaming"]) .unity-header__user-trigger {
  border-color: rgba(30, 101, 240, 0.55) !important;
  box-shadow: 0 0 0 2px rgba(30, 101, 240, 0.18) !important;
}

/* ================================================
   Gaming Malta panorama — brand colours
   ================================================ */

body:has(a[href*="client=gaming-malta"]) .unity-header,
body:has(a[href*="client=gaming-malta"]) #unityDashboardHeader {
  background: #ffffff !important;
}

body:has(a[href*="client=gaming-malta"]) .unity-header__bottom-line {
  background: #12a8b3 !important;
}

body:has(a[href*="client=gaming-malta"]) .unity-header__nav-link {
  color: #1a1a1a !important;
}

body:has(a[href*="client=gaming-malta"]) .unity-header__nav-link.is-active,
body:has(a[href*="client=gaming-malta"]) .unity-header__nav-link:hover {
  color: #12a8b3 !important;
}

body:has(a[href*="client=gaming-malta"]) .unity-header__nav-link.is-active::after {
  background: #12a8b3 !important;
}

body:has(a[href*="client=gaming-malta"]) .unity-header__user-trigger {
  color: #1a1a1a !important;
  border-color: rgba(18, 168, 179, 0.55) !important;
  box-shadow: 0 0 0 2px rgba(18, 168, 179, 0.18) !important;
}

body:has(a[href*="client=gaming-malta"]) .unity-header__signin {
  color: #1a1a1a !important;
}

body:has(a[href*="client=gaming-malta"]) .unity-header__search button {
  color: #ffffff !important;
  background: #1a1a1a !important;
  border-color: #4b5a78 !important;
}

body:has(a[href*="client=gaming-malta"]) .unity-header__nav-link[href="/pages/certifications"] {
  display: none !important;
}

/* ================================================
   Ontario Chamber of Commerce — brand colours
   ================================================ */

body:has(a[href*="client=ontario-chamber-of-commerce"]) .unity-header__bottom-line {
  background: #2A5E7E !important;
}

body:has(a[href*="client=ontario-chamber-of-commerce"]) .unity-header__nav-link.is-active,
body:has(a[href*="client=ontario-chamber-of-commerce"]) .unity-header__nav-link:hover {
  color: #008580 !important;
}

body:has(a[href*="client=ontario-chamber-of-commerce"]) .unity-header__nav-link.is-active::after {
  background: #008580 !important;
}

body:has(a[href*="client=ontario-chamber-of-commerce"]) .unity-header__user-trigger {
  border-color: rgba(0, 133, 128, 0.55) !important;
  box-shadow: 0 0 0 2px rgba(0, 133, 128, 0.18) !important;
}

/* ================================================
   Google Play India panorama — brand colours
   ================================================ */

body:has(a[href*="client=google-play-india"]) .unity-header,
body:has(a[href*="client=google-play-india"]) #unityDashboardHeader {
  background: #ffffff !important;
}

body:has(a[href*="client=google-play-india"]) .unity-header__bottom-line {
  background: #FBBC04 !important;
}

body:has(a[href*="client=google-play-india"]) .unity-header__nav-link,
body:has(a[href*="client=google-play-india"]) .unity-header .unity-header__nav-link {
  color: #1a1a1a !important;
}

body:has(a[href*="client=google-play-india"]) .unity-header__nav-link.is-active,
body:has(a[href*="client=google-play-india"]) .unity-header__nav-link:hover {
  color: #4285F4 !important;
}

body:has(a[href*="client=google-play-india"]) .unity-header__nav-link.is-active::after {
  background: #4285F4 !important;
}

body:has(a[href*="client=google-play-india"]) .unity-header__user-trigger {
  color: #1a1a1a !important;
  border-color: rgba(66, 133, 244, 0.55) !important;
  box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.18) !important;
}

body:has(a[href*="client=google-play-india"]) .unity-header__signin {
  color: #1a1a1a !important;
}

body:has(a[href*="client=google-play-india"]) .unity-header__search button {
  color: #ffffff !important;
  background: #1a1a1a !important;
  border-color: #4b5a78 !important;
}

/* ==========================================
   PANORAMA LOGO OVERRIDES
   Uses ::before background instead of content: url()
   ========================================== */

body:has(a[href*="client=ad-gaming"]) .unity-header__logo {
  display: none !important;
}
body:has(a[href*="client=ad-gaming"]) .unity-header__logo-link::before {
  content: '';
  display: block;
  width: 200px;
  height: 72px;
  background: url('https://storage.googleapis.com/protraining-unity-it-fileshare-prd/TI_panoramas/AD_Gaming/AD_Gaming_LOGO-White.png') no-repeat center / contain;
}

body:has(a[href*="client=gaming-malta"]) .unity-header__logo {
  display: none !important;
}
body:has(a[href*="client=gaming-malta"]) .unity-header__logo-link::before {
  content: '';
  display: block;
  width: 200px;
  height: 72px;
  background: url('https://storage.googleapis.com/protraining-unity-it-fileshare-prd/TI_panoramas/Gaming_Malta/GAMF_Design_Logo.png') no-repeat center / contain;
}

body:has(a[href*="client=ontario-chamber-of-commerce"]) .unity-header__logo {
  display: none !important;
}
body:has(a[href*="client=ontario-chamber-of-commerce"]) .unity-header__logo-link::before {
  content: '';
  display: block;
  width: 200px;
  height: 72px;
  background: url('https://storage.googleapis.com/protraining-unity-it-fileshare-prd/TI_panoramas/Ontario%20Chamber%20of%20Commerce/SDS_Logo%20380x72.png') no-repeat center / contain;
}

body:has(a[href*="client=google-play-india"]) .unity-header__logo,
body:has(a[href*="client=google-play-india"]) #unityDashboardHeader .unity-header__logo {
  display: none !important;
}
body:has(a[href*="client=google-play-india"]) .unity-header__logo-link::before,
body:has(a[href*="client=google-play-india"]) #unityDashboardHeader .unity-header__logo-link::before {
  content: '' !important;
  display: block !important;
  width: 200px !important;
  height: 72px !important;
  background: url('https://storage.googleapis.com/protraining-unity-it-fileshare-prd/TI_panoramas/Google%20Play%20India/Google_Play_small_logo.png') no-repeat center / contain !important;
}

/* ==========================================
   COURSE PAGE HEADER
   ========================================== */

#unityCourseHeader .unity-header__nav-link {
  color: #ffffff !important;
}

#unityCourseHeader .unity-header__nav-link.is-active {
  color: #00aef0 !important;
  pointer-events: none !important;
  cursor: default !important;
}

#unityCourseHeader .unity-header__nav-link.is-active::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  bottom: 4px !important;
  width: 100% !important;
  height: 2px !important;
  background: #00aef0 !important;
  border-radius: 2px !important;
}

/* Ensure panorama body:has() rules override course header defaults */
body:has(a[href*="client=gaming-malta"]) #unityCourseHeader .unity-header__nav-link {
  color: #1a1a1a !important;
}

body:has(a[href*="client=gaming-malta"]) #unityCourseHeader .unity-header__nav-link.is-active {
  color: #12a8b3 !important;
}

body:has(a[href*="client=gaming-malta"]) #unityCourseHeader .unity-header__nav-link.is-active::after {
  background: #12a8b3 !important;
}

body:has(a[href*="client=google-play-india"]) #unityCourseHeader .unity-header__nav-link {
  color: #1a1a1a !important;
}

body:has(a[href*="client=google-play-india"]) #unityCourseHeader .unity-header__nav-link.is-active {
  color: #4285F4 !important;
}

body:has(a[href*="client=google-play-india"]) #unityCourseHeader .unity-header__nav-link.is-active::after {
  background: #4285F4 !important;
}

/* Override TI course CSS white text on learner content */
.learner__content,
.learner__content.main-content,
body .learner__content,
body .learner__content.main-content,
body.learn .learner__content {
  color: #1a1a1a !important;
}

/* Specifically fix quiz content */
body .question__body,
body .quiz__container,
body .topic__content {
  color: #1a1a1a !important;
}

/* ================================================
   USER PROFILE PAGE — Unity Academy
   ================================================
   Scope: .dashboard-account wrapper — zero bleed
   to any other page or component guaranteed.
   Requires :has() — supported Chrome 105+,
   Firefox 121+, Safari 15.4+, Edge 105+.
   WCAG 2.1 AA compliant throughout.
   ================================================ */


/* ── 1. PROFILE INFO: Read-only First / Last Name ──
   Fields are SSO-managed via Unity ID. CSS applies
   visual read-only treatment: muted background,
   muted text, no pointer interaction.
   WCAG note: background #f0f0f0 / text #555555
   gives 5.74:1 contrast ratio — passes AA.
   Important caveat: CSS cannot set the HTML
   readonly attribute. A keyboard user could still
   tab in and type. For full enforcement this should
   also be set server-side via TI's SSO field config.
   ─────────────────────────────────────────────── */

.dashboard-account .profile__name input#firstname,
.dashboard-account .profile__name input#lastname {
  pointer-events: none !important;
  cursor: default !important;
  background-color: #f0f0f0 !important;
  color: #555555 !important;
  border-color: #cccccc !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}

/* Hide asterisks note on Profile Info tab */
.dashboard-account .profile__name .text-xs.mb-2 {
  display: none !important;
}


/* ── 2. ACCOUNT INFO: Hide specified elements ──── */

/* Hide "Asterisks (*) indicate required fields." */
.dashboard-account .text-xs.mb-2 {
  display: none !important;
}

/* Hide email input field and its wrapper. */
.dashboard-account .field__input-wrapper:has(input#email) {
  display: none !important;
}

/* Hide Current Password field and its wrapper.
   ID is dynamic (current-password-xxxx) so targets
   by for attribute prefix — reliable across sessions. */
.dashboard-account .field__input-wrapper:has(label[for^="current-password"]) {
  display: none !important;
}

/* Hide entire Password section (header + body). */
.dashboard-account div:has(> .section__body.clearfix .panel--alt) {
  display: none !important;
}

/* Hide entire Multi-Factor Authentication section. */
.dashboard-account .section-container:has(#multifactor-label) {
  display: none !important;
}


/* ── 3. HIDE SAVE BUTTONS — Profile Info + Account Info ── */

.dashboard-account .btn--primary--manager--new {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/* ── REDUCED MOTION: respect OS preference ──────── */
@media (prefers-reduced-motion: reduce) {
  .dashboard-account * {
    transition: none !important;
  }
}

/* ── Hide 'View' button on Legal & Privacy section ── */

#account-section-4 a.btn--primary[href="/learn/survey"] {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}


/* ================================================
   COURSE PLAYER — Style updates
   ================================================ */


/* ── 1. Hide social share block in Next Section sidebar
   SCOPED to non-manager pages. */

body:not(.manager) .share__container {
  display: none !important;
}


/* ── 2. Quiz launch page — increase icon-help by 50% ── */

.quiz-start__main-title .icon-help {
  font-size: 1.5em !important;
  pointer-events: none !important;
  cursor: default !important;
}


/* ── 3. Quiz results — Continue to Next Page button
   WCAG: #00a1db on white = ~2.6:1 — below the 4.5:1
   text contrast threshold for AA. This is your
   established brand colour, flagged for awareness.
   Darkening to #0081af (4.6:1) would achieve AA.
   ─────────────────────────────────────────────── */

.quiz__container .btn--success,
.quiz__container a.btn--success {
  background-color: #00a1db !important;
  border-color: #00a1db !important;
  color: #ffffff !important;
}

.quiz__container .btn--success:hover,
.quiz__container a.btn--success:hover {
  background-color: #0081af !important;
  border-color: #0081af !important;
  color: #ffffff !important;
}

.quiz__container .btn--success:focus-visible,
.quiz__container a.btn--success:focus-visible {
  outline: 3px solid #00a1db !important;
  outline-offset: 3px !important;
}


/* ── REDUCED MOTION ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .quiz__container .btn--success {
    transition: none !important;
  }
}


/* ================================================
   LEARNING PATH PAGE — Milestone item overrides
   ================================================ */

/* ── 1. More Info button — invert to black/white ── */

.learning-path-milestone-item__title .btn--primary {
  background-color: #000000 !important;
  color: #ffffff !important;
  border-color: #000000 !important;
}

.learning-path-milestone-item__title .btn--primary:hover {
  background-color: #333333 !important;
  color: #ffffff !important;
  border-color: #333333 !important;
}

.learning-path-milestone-item__title .btn--primary:focus-visible {
  outline: 3px solid #00a1db !important;
  outline-offset: 3px !important;
}


/* ── 2. Progress flag + count — brand blue ──────── */

.learning-path-milestone-item__body .icon-flag,
.learning-path-milestone-item__body .learning-path-criterion__value-container,
.learning-path-milestone-item__body .learning-path-criterion__value,
.learning-path-milestone-item__body .learning-path-criterion__value--pending,
.learning-path-milestone-item__body .learning-path-criterion__slash,
.learning-path-milestone-item__body .learning-path-criterion__threshold,
.learning-path-milestone-item__body .learning-path-criterion__label {
  color: #00a1db !important;
}


/* ── REDUCED MOTION ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .learning-path-milestone-item__title .btn--primary {
    transition: none !important;
  }
}

/* ── Hide Support and Sign Out links in course sidebar ── */

.expandable-sidebar__buttons {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/* ── Learning path milestone layout ─────────────── */

/* Hide elective badge */
.learning-path-milestone__badge--elective {
  display: none !important;
}

/* Hide course title text, keep row for button */
.learning-path-milestone-item__title h4 {
  font-size: 0 !important;
  line-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Hide horizontal line above title row */
.learning-path-milestone-item__title .row.collapse::before {
  content: none !important;
  display: none !important;
}

.learning-path-milestone-item__title {
  padding: 0 !important;
  min-height: 0 !important;
}

/* More Info button — widen by 25% and increase text by 2px */
.learning-path-milestone-item a.catalog-item {
  width: auto !important;
  padding: 8px 38px !important;
  font-size: 16px !important;
  display: inline-block !important;
}

/* Add top padding above course image */
.learning-path-milestone-item .medium-4.columns {
  padding-top: 16px !important;
}

/* Remove top padding on body */
.learning-path-milestone-item .learning-path-milestone-item__body {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Increase info text to 16px */
.learning-path-milestone-item__info,
.learning-path-milestone-item__info strong,
.learning-path-milestone-item__description,
.learning-path-milestone-item__description p {
  font-size: 16px !important;
  line-height: 1.5 !important;
}

/* ===== Hide courses list on LP detail pages only ===== */
body.learning-path .collection__courses {
  display: none !important;
}

/* ==========================================
   DASHBOARD ACCESS — CTA + HEADER POLISH
   ========================================== */

.widget--dashboard-stats .dashboard-stat:has(.icon-star) {
  display: none !important;
}

.dashboard-access .btn--primary.btn--small,
.dashboard-access .dashboard-access-list-item a.btn--primary,
.widget.widget--dashboard-access .dashboard-access-list-item a.btn {
  background: rgba(255, 255, 255, 0.07) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

.dashboard-access .btn--primary.btn--small:hover,
.dashboard-access .dashboard-access-list-item a.btn--primary:hover,
.widget.widget--dashboard-access .dashboard-access-list-item a.btn:hover {
  background: rgba(255, 255, 255, 0.15) !important;
}

.dashboard-access__header {
  background: #1c1c1c !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

.dashboard-access__header .button-expander {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
  border-radius: 8px !important;
  padding: 4px 10px !important;
  transition: background 0.2s ease !important;
}

.dashboard-access__header .button-expander:hover {
  background: rgba(255,255,255,0.15) !important;
}

.dashboard-access__header span {
  color: #ffffff !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}

.dashboard-access__header .button-expander i {
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.dashboard-access-list-item .col-span-4 {
  min-width: 0 !important;
  overflow: hidden !important;
}

.dashboard-access-list-item .col-span-4 .dashboard-access-list-item-expander__title {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  display: block !important;
  max-width: 100% !important;
}

.dashboard-access-list-item__description {
  display: block !important;
}

.dashboard-access-list-item__description .btn--no-margin {
  font-size: 0 !important;
  margin-left: 12px !important;
  vertical-align: middle !important;
}

.dashboard-access-list-item__description .btn--no-margin span {
  font-size: 13px !important;
}

/* ==========================================
   BOOKMARK CATEGORIES
   ========================================== */

.bookmark-categories__list .list-item__title,
.bookmark-categories__list .list-item__title.active {
  color: #ffffff !important;
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
  border-radius: 8px !important;
  padding: 6px 12px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  transition: background 0.2s ease !important;
}

.bookmark-categories__list .list-item__title:hover,
.bookmark-categories__list .list-item__title.active:hover {
  background: rgba(255,255,255,0.12) !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.28) !important;
}

.bookmark-categories__list .list-item__title span {
  color: #ffffff !important;
}

.bookmark-categories__list .category__list__item,
.bookmark-categories__list .sortable-category__list__item {
  display: flex !important;
  align-items: center !important;
  background: transparent !important;
}

.bookmark-categories__list .category__list__item:hover,
.bookmark-categories__list .sortable-category__list__item:hover,
.bookmark-categories__list .list-item__handle:hover {
  background: transparent !important;
}

.bookmark-categories__list .list-item__count {
  background: rgba(255,255,255,0.15) !important;
  color: #ffffff !important;
  border-radius: 100px !important;
}

/* Manager ribbon text stays legible */
body.manager .ribbon,
body.manager .ribbon * {
  color: #1a1a1a !important;
}

/* ==========================================
   NEXT TOPIC TOOLTIP
   ========================================== */

.next-topic-tooltip {
  background: #1a1a1a !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}

.next-topic-tooltip a,
.next-topic-tooltip button,
.next-topic-tooltip span,
.next-topic-tooltip p {
  color: #ffffff !important;
}

.next-topic-tooltip a:hover {
  color: #66b3ff !important;
}

.next-topic-tooltip::before,
.next-topic-tooltip::after {
  border-color: transparent transparent #1a1a1a transparent !important;
}

.next-topic-tooltip .icon-warning,
.next-topic-tooltip [class*="icon-warning"],
.next-topic-tooltip [class*="icon-alert"],
.next-topic-tooltip [class*="icon-caution"] {
  color: #ffffff !important;
  filter: brightness(10) !important;
}

/* ==========================================
   COURSE TITLE IN HEADER
   ========================================== */

.unity-header__inner {
  position: relative;
}

.unity-header__course-title {
  flex: 1 1 0;
  min-width: 0;
  max-width: 600px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 16px;
  font-weight: 600;
  padding: 0 48px 0 24px;
  color: #ffffff;
  border-left: 1px solid rgba(255,255,255,0.25);
  margin-left: 24px;
}

@media (max-width: 1200px) {
  .unity-header__course-title {
    max-width: 400px;
  }
}

@media (max-width: 900px) {
  .unity-header__course-title {
    max-width: 200px;
    font-size: 14px;
  }
}

@media (max-width: 640px) {
  .unity-header__course-title {
    display: none;
  }
}

/* ── Compact header at narrow viewport heights ── */
@media (max-height: 700px) {
  .unity-header__inner {
    min-height: 56px !important;
    padding: 2px 24px !important;
  }

  .unity-header__logo {
    height: 48px !important;
  }

  .unity-header__nav-link {
    height: 56px !important;
    font-size: 14px !important;
  }

  .unity-header__right {
    height: 56px !important;
  }

  .unity-header__search input {
    height: 30px !important;
    width: 160px !important;
  }

  .unity-header__search button {
    height: 30px !important;
    font-size: 12px !important;
  }

  .unity-header__auth {
    height: 30px !important;
  }
}

@media (max-height: 500px) {
  .unity-header__inner {
    min-height: 44px !important;
    padding: 0 24px !important;
  }

  .unity-header__logo {
    height: 36px !important;
  }

  .unity-header__nav-link {
    height: 44px !important;
    font-size: 13px !important;
  }

  .unity-header__right {
    height: 44px !important;
  }

  .unity-header__search input {
    height: 26px !important;
    width: 120px !important;
    font-size: 12px !important;
  }

  .unity-header__search button {
    height: 26px !important;
    font-size: 11px !important;
    padding: 0 10px !important;
  }

  .unity-header__course-title {
    display: none !important;
  }
}

/* Force header to always stay single row */
.unity-header__inner {
  flex-wrap: nowrap !important;
}

.unity-header__left,
.unity-header__right {
  width: auto !important;
  justify-content: flex-start !important;
}

/* Progressively shrink elements as width reduces */
@media (max-width: 1100px) {
  .unity-header__search input {
    width: 160px !important;
  }
  .unity-header__nav {
    gap: 18px !important;
  }
}

@media (max-width: 960px) {
  .unity-header__search input {
    width: 100px !important;
  }
  .unity-header__nav {
    gap: 12px !important;
  }
  .unity-header__nav-link {
    font-size: 13px !important;
  }
  .unity-header__course-title {
    max-width: 160px !important;
  }
}

@media (max-width: 820px) {
  .unity-header__search input {
    display: none !important;
  }
  .unity-header__search button {
    display: none !important;
  }
  .unity-header__course-title {
    display: none !important;
  }
  .unity-header__nav {
    gap: 10px !important;
  }
  .unity-header__nav-link {
    font-size: 12px !important;
  }
  .unity-header__logo {
    height: 52px !important;
  }
}

@media (max-width: 640px) {
  .unity-header__nav-link {
    font-size: 11px !important;
  }
  .unity-header__nav {
    gap: 8px !important;
  }
  .unity-header__logo {
    height: 40px !important;
  }
}

/* ==========================================
   VIDEO CONTROLS
   ========================================== */

video::-webkit-media-controls-enclosure {
  overflow: hidden;
}

video::-webkit-media-controls-panel {
  width: calc(100% + 30px);
}

/* ==========================================
   LIVE SESSION LIST — RIBBON POSITION
   ========================================== */

.ua-live-list-layout__media {
  position: relative !important;
}

.ua-live-list-layout__media .catalog__ribbon,
.ua-live-list-layout__media .catalog__ribbon--attached {
  left: 0 !important;
  right: auto !important;
  top: 14px !important;
  border-radius: 0 10px 10px 0 !important;
}

.ua-live-list-layout__cta {
  display: none !important;
}

/* ==========================================
   SURVEY / ToS PAGE
   ========================================== */

body.survey {
  background: #ffffff !important;
  color: #1a1a1a !important;
  font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

body.survey p,
body.survey label,
body.survey span,
body.survey li,
body.survey h1,
body.survey h2,
body.survey h3,
body.survey .survey-container,
body.survey form,
body.survey .question {
  color: #1a1a1a !important;
}

body.survey input,
body.survey select,
body.survey textarea {
  background: #ffffff !important;
  color: #1a1a1a !important;
  border: 1px solid #cccccc !important;
  border-radius: 6px !important;
  padding: 8px 12px !important;
}

body.survey .btn,
body.survey button[type="submit"] {
  background: #00aef0 !important;
  color: #000000 !important;
  border: none !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
  padding: 10px 22px !important;
}

/* Header layout on survey page */
body.survey .header,
body.survey .ember-view.header,
body.survey .header--dashboard {
  display: flex !important;
  align-items: center !important;
  min-height: 64px !important;
  padding: 0 24px !important;
}

body.survey .header--dashboard .company__beta-logo,
body.survey .header--dashboard img {
  display: block !important;
  margin: auto 0 !important;
}

body.survey #lms,
body.survey .ember-application {
  margin-top: 0 !important;
  padding-top: 32px !important;
}

body.survey .header__title {
  margin-top: 32px !important;
}

/* Suppress AI assistant button and popup on ToS/survey page */
body.survey [class*="fixed"][class*="bottom"],
body.survey button:has(svg path[d*="197.58"]),
body.survey iframe[src*="ai-widget"],
body.survey [data-testid*="ai"],
body.survey [id*="claude"],
body.survey [class*="claude"],
body.survey .fixed.min-h-min.z-\[50004\] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Suppress header on ToS page */
.layout__content--unity-thought-industries-terms-of-service ~ * .unity-header,
.layout__content--unity-thought-industries-terms-of-service .unity-header {
  display: none !important;
}

/* ==========================================
   CERTIFICATION PAGE SECTIONS
   ========================================== */

.ua-cert-presales { display: none !important; }
.ua-cert-entitled { display: none !important; }
.ua-cert-loading { display: flex !important; }
.ua-cert-entitled-lower { display: none !important; }

.ua-cert-entitled-lower .ua-section-title,
.ua-cert-entitled-lower .ua-section-label,
.ua-cert-entitled-lower .ua-section-desc,
.ua-cert-entitled-lower .ua-divider__text,
.ua-cert-entitled-lower .ua-cert-card__name,
.ua-cert-entitled-lower .ua-cert-card__desc,
.ua-cert-entitled-lower .ua-cert-card__type,
.ua-cert-entitled-lower .ua-footer-cta__title,
.ua-cert-entitled-lower .ua-footer-cta__desc,
.ua-cert-entitled-lower .ua-flagship__name,
.ua-cert-entitled-lower .ua-flagship__desc,
.ua-cert-entitled-lower .ua-flagship__includes li,
.ua-cert-entitled-lower .ua-flagship__badge {
  color: #ffffff !important;
}

.ua-cert-entitled-lower .ua-container {
  max-width: 1200px !important;
  padding: 0 32px !important;
}

.ua-cert-entitled-lower .ua-section {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Full bleed backgrounds */
.ua-cert-entitled-lower .ua-section--mid,
.ua-cert-presales .ua-section--mid,
.ua-cert-presales .ua-section--dark {
  margin-left: -9999px !important;
  margin-right: -9999px !important;
  padding-left: 9999px !important;
  padding-right: 9999px !important;
}

/* Fix dark text on dark background */
.ua-cert-presales .ua-section-title,
.ua-cert-presales .ua-section-label,
.ua-cert-presales .ua-section-desc,
.ua-cert-presales .ua-divider__text,
.ua-cert-presales .ua-flagship__name,
.ua-cert-presales .ua-flagship__desc,
.ua-cert-presales .ua-flagship__includes li,
.ua-cert-presales .ua-flagship__badge,
.ua-cert-presales .ua-cert-card__name,
.ua-cert-presales .ua-cert-card__desc,
.ua-cert-presales .ua-cert-card__type,
.ua-cert-presales .ua-faq__answer,
.ua-cert-presales .ua-faq__question,
.ua-cert-presales .ua-faq__question:hover {
  color: #ffffff !important;
}

.ua-cert-presales .ua-section-desc,
.ua-cert-entitled-lower .ua-section-desc {
  margin-top: 16px !important;
}

.ua-cert-entitled-lower .ua-cert-card__name,
.ua-cert-presales .ua-cert-card__name {
  white-space: normal !important;
  word-break: break-word !important;
  hyphens: none !important;
}

/* ==========================================
   CONTENT TYPE BADGE — UNIFIED SIZING
   Consolidated from the three repeated blocks
   in the original file. Later declarations won,
   so those values are the ones kept here.
   ========================================== */

.ua-content-type-badge {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 44px !important;
  padding: 0 16px !important;
}

.ua-content-type-badge::before {
  padding: 0 !important;
  display: inline !important;
}

/* Carousel — same fix, slightly more padding */
.featured-content-multi-carousel-item .ua-content-type-badge.ua-content-type-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  padding: 0 20px !important;
  min-height: 44px !important;
  height: 44px !important;
  width: auto !important;
  min-width: 0 !important;
}

.featured-content-multi-carousel-item .ua-content-type-badge.ua-content-type-badge::before {
  display: inline !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
  position: static !important;
  margin: 0 !important;
}

/* Ribbon sizing to match badge
   Same scoping caveat as above — no bare `.ribbon`. */
.catalog__ribbon,
.catalog__ribbon--attached,
.catalog-grid-item .ribbon,
.featured-content-multi-carousel-item .ribbon,
.catalog-item .ribbon,
.card-ribbon,
.content-ribbon {
  min-height: 44px !important;
  padding: 0 16px !important;
  border-radius: 12px !important;
  letter-spacing: 0.05em !important;
}

/* ================================================
   EVENT DETAIL PAGE
   ================================================ */

/* Hide untranslated English tab button */
.column.small-12 ul.tabs {
  display: none !important;
}

/* Show translated h3 heading styled as black tab */
.tabs-content--meetings h3.heading--primary {
  display: inline-block !important;
  background-color: #000000 !important;
  color: #ffffff !important;
  padding: 8px 16px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  margin: 0 0 8px 0 !important;
  border-radius: 2px 2px 0 0 !important;
}

/* Show sidebar container for full sessions list */
.medium-4.xlarge-3.columns.event-sidebar__content__container {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  padding: 0 !important;
}

/* Strip black button styling from meeting elements */
div.btn.event-sidebar__meeting,
.event-sidebar__meeting {
  display: block !important;
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 4px 0 8px 0 !important;
  text-align: left !important;
  cursor: default !important;
  pointer-events: none !important;
}

.event-sidebar__meeting__title {
  color: #1a1a1a !important;
  font-weight: 600 !important;
  font-size: calc(1em + 2px) !important;
}

.event-sidebar__meeting__date,
.event-sidebar__meeting__date span {
  color: #1a1a1a !important;
  font-size: 1em !important;
}

/* Hide the event-content panel entirely —
   sidebar handles all session display */
.medium-8.xlarge-9.columns.event-content {
  display: none !important;
}

/* Hide date list and descriptive text above Enroll Now */
.widget--course-enroll .webinar__dates {
  display: none !important;
}

.widget--course-enroll .panel > p {
  display: none !important;
}

.widget--course-enroll .enroll__title {
  display: none !important;
}

/* Even padding around Enroll Now button */
.widget--course-enroll .panel {
  padding: 20px !important;
}

.widget--course-enroll .enroll {
  width: 100% !important;
}

/* ================================================
   TEST / QUIZ PAGE STYLING
   ================================================ */

/* Hide blank right panel on results page */
.question-results__grade-remaining {
  display: none !important;
}

/* Force message panel to fill full container width with no gaps */
.question-results__message {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Remove padding from the flex row container itself */
.question-results__messages {
  padding: 0 !important;
  margin-top: 16px !important;
}

/* Force the inner ember-view wrapper to full width too */
.question-results__message .ember-view {
  width: 100% !important;
  display: block !important;
}

/* Hide 60% passing grade text */
.quiz__start__grade {
  display: none !important;
}

/* Start page spacing */
.quiz-start__sub-text {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Widen start page info panel */
.quiz-start__content {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.quiz__container--test {
  max-width: 100% !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* ================================================
   PRACTICE EXAM — Custom HTML message blocks
   Fixes Redactor rendering escaped style attribute
   as visible text in quiz start/pass/fail screens
   ================================================ */

/* Hide the escaped style string that appears as
   raw text before the first > character */
.quiz-start__content > p:first-child,
.quiz-start__sub-text > p:first-child {
  display: none !important;
}

/* Ensure custom HTML div blocks render correctly */
.quiz-start__content div[style],
.quiz-start__sub-text div[style],
.quiz__feedback div[style],
.quiz__feedback--pass div[style],
.quiz__feedback--fail div[style] {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
}