/* ============================================================
   LEARNDASH, repainted
   Loaded only on lessons, topics and quizzes, which still render through
   LearnDash's own templates rather than this theme's.

   WHAT THIS IS SKINNING. Not the old LD30 markup. The saved page from the live
   site shows learndash-wrapper--modern, ld-layout__content, ld-breadcrumbs--modern
   and ld-navigation__*, which is LearnDash's MODERN layout, painted by
   themes/ld30/assets/css/modern.min.css.

   HOW IT IS SKINNED. modern.min.css contains 980 var() calls against its own
   design tokens and only 62 hardcoded hex values. So this file barely fights it
   at all: it redefines LearnDash's tokens on body.td-ld and lets LearnDash
   repaint itself.

   That matters for three reasons:

     - Custom properties resolve through INHERITANCE, not source order. body is
       a closer ancestor than :root, so these win even though modern.min.css is
       enqueued after this file. No !important, no selector arms race.
     - It survives LearnDash updates. New markup using the same tokens comes out
       in brand colours on its own.
     - The token graph bottoms out in about twenty primitives, so twenty lines
       replace several hundred selector overrides.

   Only what tokens cannot reach is written as a rule below: the geometry of the
   two fixed headers, and the handful of places LearnDash still hardcodes.
   ============================================================ */

/* ============================================================
   1. THE TOKENS
   Names and defaults read out of modern.min.css. The comment on each line is
   the role LearnDash gives it, not a guess.
   ============================================================ */
body.td-ld{

  /* ---- surfaces. Default white and near white greys. ---- */
  --ld-color-system-white:             var(--td-surface);   /* panels, cards, content column */
  --ld-color-system-light-1:           var(--td-surface-2); /* tinted panel */
  --ld-color-system-light-2:           var(--td-surface-2); /* subtle fill */
  --ld-color-system-light-3:           var(--td-line);      /* disabled fill */
  --ld-color-system-middle-gray:       var(--td-line);
  --ld-color-system-middle-gray-light: var(--td-surface-2);
  --ld-color-system-border:            var(--td-line);      /* every hairline */

  /* ---- text ---- */
  --ld-color-system-body-text:         var(--td-muted);
  --ld-color-system-text-dark:         var(--td-text);
  --ld-color-system-subtle:            var(--td-dim);
  --ld-color-system-subtle-text:       var(--td-dim);
  --ld-color-system-dark:              var(--td-gold-hi);   /* NOTE: this is the button hover
                                                               background, not a text colour */

  /* ---- brand. The blue lived here. ---- */
  --ld-color-brand-primary:            var(--td-gold);
  --ld-color-brand-secondary:          var(--td-gold-deep);
  --ld-color-brand-tertiary:           var(--td-gold-hi);

  /* ---- buttons ---- */
  --ld-color-button:                   #0A0E14;             /* label on a filled button */
  --ld-color-button-bg:                var(--td-gold);
  --ld-color-button-bg-hover:          var(--td-gold-hi);
  --ld-color-button-secondary-border:  var(--td-line-2);

  /* ---- form fields ---- */
  --ld-color-field-bg:                 var(--td-bg);
  --ld-color-field-bg-hover:           var(--td-bg);
  --ld-color-field-bg-active:          var(--td-bg);
  --ld-color-field-bg-disabled:        var(--td-surface-2);
  --ld-color-field-border:             var(--td-line-2);
  --ld-color-field-border-active:      var(--td-gold);
  --ld-color-field-text:               var(--td-text);
  --ld-color-field-text-active:        var(--td-text);
  --ld-color-field-text-disabled:      var(--td-dim);

  /* ---- primitives, for rules that reach past the semantic names ---- */
  --ld-color-primitives-grey-0:        var(--td-surface);
  --ld-color-primitives-grey-100:      var(--td-surface-2);
  --ld-color-primitives-grey-140:      var(--td-line);
  --ld-color-primitives-grey-150:      var(--td-line);
  --ld-color-primitives-grey-200:      var(--td-dim);
  --ld-color-primitives-grey-350:      var(--td-dim);
  --ld-color-primitives-grey-500:      var(--td-dim);
  --ld-color-primitives-grey-800:      var(--td-muted);
  --ld-color-primitives-grey-900:      var(--td-text);
  --ld-color-primitives-blue-100:      var(--td-surface-2);
  --ld-color-primitives-blue-150:      var(--td-line);
  --ld-color-primitives-blue-175:      var(--td-line-2);
  --ld-color-primitives-blue-200:      var(--td-line-2);
  --ld-color-primitives-blue-500:      var(--td-gold);
  --ld-color-primitives-blue-800:      var(--td-gold-hi);
  --ld-color-primitives-yellow-100:    rgba(242,185,39,.09);
  --ld-color-primitives-yellow-200:    rgba(242,185,39,.28);
  --ld-color-primitives-yellow-500:    var(--td-gold);

  /* Success and error keep their own hues: a student has to be able to tell a
     pass from a fail without reading. Only their fills are darkened so they sit
     on this background instead of glowing off it. */
  --ld-color-primitives-green-100:     rgba(62,171,106,.12);
  --ld-color-primitives-red-100:       rgba(217,83,79,.12);
  --ld-color-primitives-red-200:       rgba(217,83,79,.30);

  /* ---- type ---- */
  --ld-typography-font-family:         var(--td-body);
}

/* ============================================================
   2. THE CHROME THAT IS NOT THERE
   An earlier version of this file offset LearnDash's fixed header and sidebar
   below this theme's header. That was wrong twice over, and it is worth
   recording why so nobody adds it back.

   First, there IS no theme header on these pages. LearnDash's focus mode does
   not call get_header(): themes/ld30/templates/focus/header.php opens its own
   <body> and calls wp_head() directly, so header.php never runs and #td-header
   is not in the document at all.

   Second, LearnDash already handles the admin bar by itself:

     body.admin-bar .ld-focus-header  { top:32px }   (46px on mobile)
     body.admin-bar .ld-focus-sidebar { top:32px }
     body.ld-in-focus-mode.admin-bar  { padding-top:32px }

   So the offset was pushing a correctly placed header 96px down while the
   content column kept LearnDash's own 80px top padding, which had been sized to
   clear a header at the top. The lesson title ended up three pixels underneath
   the bar: the heading looked glued to the chrome above it.

   The fix is to do nothing here and let LearnDash place its own furniture.
   ============================================================ */

/* Marketing chrome, defensively. Neither renders in focus mode today, since the
   theme's header and footer are bypassed, but both would be wrong in a lesson
   if that ever changes. */
body.td-ld #td-rail,
body.td-ld .td-bar{display:none}

/* ============================================================
   3. WHAT THE TOKENS DO NOT REACH
   ============================================================ */

/* ---------- the page itself ----------
   LearnDash paints the page white for focus mode, in two rules that sit
   underneath everything else and show through every gap:

     body.ld-in-focus-mode                        { background:#fff }   (0,2,1)
     body.ld-in-focus-mode .learndash-wrapper     { background:#fff }   (0,3,1)

   That was the white band across the top of the window, above LearnDash's own
   header and below the admin bar. Adding td-ld to the same selectors beats both
   by one class. */
body.td-ld.ld-in-focus-mode{background:var(--td-bg)}
body.td-ld.ld-in-focus-mode .learndash-wrapper{background:transparent}

/* ---------- the light grey hairlines ----------
   LearnDash hardcodes #e2e7ed in 59 declarations across 30 selectors. Its own
   depth is three to six classes, so each of these is written to match. They are
   the vertical dividers in the focus header, the circles beside every lesson,
   and the frame around an expanded topic list: on white they are invisible
   furniture, on this background they were the brightest thing on the page. */

/* the circles beside each lesson and topic */
body.td-ld .learndash-wrapper .ld-course-navigation .ld-status-icon.ld-status-incomplete,
body.td-ld .learndash-wrapper .ld-status-incomplete.ld-status-icon,
body.td-ld .learndash-wrapper .ld-topic-status{
  border-color:var(--td-line-2); background:transparent;
}
body.td-ld .learndash-wrapper .ld-course-navigation .ld-status-icon.ld-status-in-progress,
body.td-ld .learndash-wrapper .ld-status-in-progress{border-color:var(--td-gold-deep); background:transparent}

/* the dividers in LearnDash's header */
body.td-ld .learndash-wrapper .ld-focus .ld-focus-header .ld-progress,
body.td-ld .learndash-wrapper .ld-focus .ld-focus-header .ld-content-action,
body.td-ld .learndash-wrapper .ld-focus .ld-focus-header .ld-user-menu,
body.td-ld .learndash-wrapper .ld-focus .ld-focus-header .ld-progress-wrap{border-color:var(--td-line)}

/* an expanded lesson's topic list, the panel that held Study 1 and Study 2 */
body.td-ld .learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation .ld-topic-list.ld-table-list,
body.td-ld .learndash-wrapper .ld-table-list .ld-table-list-items,
body.td-ld .learndash-wrapper .ld-table-list .ld-table-list-item,
body.td-ld .learndash-wrapper .ld-table-list .ld-table-list-footer,
body.td-ld .learndash-wrapper .ld-table-list.ld-no-pagination{
  background:var(--td-bg); border-color:var(--td-line);
}
body.td-ld .learndash-wrapper .ld-table-list .ld-table-list-item .ld-topic-title,
body.td-ld .learndash-wrapper .ld-topic-row .ld-topic-title{color:var(--td-muted)}
body.td-ld .learndash-wrapper .ld-table-list .ld-table-list-item:hover{background:var(--td-surface-2)}

/* the progress track, wherever it appears */
body.td-ld .learndash-wrapper .ld-focus .ld-focus-header .ld-progress .ld-progress-bar,
body.td-ld .learndash-wrapper .ld-item-list .ld-section-heading .ld-item-list-actions .ld-progress .ld-progress-bar,
body.td-ld .learndash-wrapper .course_progress{background:var(--td-surface-2); border-color:var(--td-line)}

/* LearnDash draws its chevrons and ticks out of borders rather than glyphs, so
   these are the arrow itself, not a box around it. currentColor makes each one
   match the label beside it instead of staying white. */
body.td-ld .learndash-wrapper .ld-icon{border-color:currentColor}

/* The sidebar collapse button. LearnDash paints its chevron white at five
   classes deep, which on a dark circle was the last white mark left on the
   page, so this matches that depth and lets the arrow take the button's own
   colour. */
body.td-ld .learndash-wrapper .ld-focus .ld-focus-sidebar .ld-focus-sidebar-trigger .ld-icon{
  border-color:currentColor;
}
body.td-ld .learndash-wrapper .ld-focus .ld-focus-sidebar .ld-focus-sidebar-trigger:hover{
  background:var(--td-gold); color:#0A0E14;
}
body.td-ld .learndash-wrapper .ld-alert .ld-alert-icon{border-color:var(--td-line)}

/* ---------- the shell ---------- */
body.td-ld .learndash-wrapper .ld-focus{background:var(--td-bg)}
body.td-ld .learndash-wrapper .ld-focus .ld-focus-header{
  background:var(--td-surface); border-bottom:1px solid var(--td-line);
}
body.td-ld .learndash-wrapper .ld-focus .ld-focus-sidebar{
  background:var(--td-surface); border-right:1px solid var(--td-line);
}
body.td-ld .learndash-wrapper .ld-focus .ld-focus-content,
body.td-ld .learndash-wrapper .ld-layout,
body.td-ld .learndash-wrapper .ld-layout__header,
body.td-ld .learndash-wrapper .ld-layout__content,
body.td-ld .learndash-wrapper .ld-tab-bar,
body.td-ld .learndash-wrapper .ld-tab-bar__panel{background:transparent}

/* ---------- scrollbars ----------
   The course list is 164 steps long, so its sidebar always has a scrollbar, and
   the browser default draws it in light grey. It ran the full height of the
   window right down the middle of the page: on a dark layout it read as a white
   seam between the sidebar and the lesson.

   Both syntaxes are here on purpose. scrollbar-color is the standard one and is
   what Firefox uses; the ::-webkit- rules are what Chrome, Edge and Safari
   still take. Scoped to td-ld so the rest of the site keeps native scrollbars. */
/* The window's own scrollbar as well as the sidebar's. Focus mode replaces the
   whole page, so the browser default ran a pale strip down the right edge of
   every lesson. */
html:has(body.td-ld),
body.td-ld,
body.td-ld .ld-focus-sidebar-wrapper,
body.td-ld .ld-focus-sidebar,
body.td-ld .ld-focus-main{
  scrollbar-width:thin;
  scrollbar-color:var(--td-line-2) var(--td-surface);
}
body.td-ld::-webkit-scrollbar{width:11px; height:11px}
body.td-ld::-webkit-scrollbar-track{background:var(--td-bg)}
body.td-ld::-webkit-scrollbar-thumb{
  background:var(--td-line-2); border-radius:999px; border:3px solid var(--td-bg);
}
body.td-ld::-webkit-scrollbar-thumb:hover{background:var(--td-gold-deep)}
body.td-ld .ld-focus-sidebar-wrapper::-webkit-scrollbar,
body.td-ld .ld-focus-sidebar::-webkit-scrollbar,
body.td-ld .ld-focus-main::-webkit-scrollbar{width:9px; height:9px}
body.td-ld .ld-focus-sidebar-wrapper::-webkit-scrollbar-track,
body.td-ld .ld-focus-sidebar::-webkit-scrollbar-track,
body.td-ld .ld-focus-main::-webkit-scrollbar-track{background:var(--td-surface)}
body.td-ld .ld-focus-sidebar-wrapper::-webkit-scrollbar-thumb,
body.td-ld .ld-focus-sidebar::-webkit-scrollbar-thumb,
body.td-ld .ld-focus-main::-webkit-scrollbar-thumb{
  background:var(--td-line-2); border-radius:999px;
  border:2px solid var(--td-surface);
}
body.td-ld .ld-focus-sidebar-wrapper::-webkit-scrollbar-thumb:hover,
body.td-ld .ld-focus-sidebar::-webkit-scrollbar-thumb:hover,
body.td-ld .ld-focus-main::-webkit-scrollbar-thumb:hover{background:var(--td-gold-deep)}
body.td-ld .ld-focus-sidebar-wrapper::-webkit-scrollbar-corner,
body.td-ld .ld-focus-sidebar::-webkit-scrollbar-corner{background:var(--td-surface)}

/* ---------- type ---------- */
body.td-ld .learndash-wrapper{
  font-family:var(--td-body); color:var(--td-text);
  font-size:16px; line-height:1.7; font-weight:400;
}
body.td-ld .learndash-wrapper h1,
body.td-ld .learndash-wrapper h2,
body.td-ld .learndash-wrapper h3,
body.td-ld .learndash-wrapper h4{
  font-family:var(--td-display); font-weight:800; letter-spacing:-.01em; color:var(--td-text);
}
body.td-ld .learndash-wrapper p,
body.td-ld .learndash-wrapper li{color:var(--td-muted); font-weight:300}
body.td-ld .learndash-wrapper a{color:var(--td-gold)}
body.td-ld .learndash-wrapper hr{border-color:var(--td-line)}

/* ---------- sidebar, the real modern class names ---------- */
body.td-ld .learndash-wrapper .ld-focus-sidebar-wrapper,
body.td-ld .learndash-wrapper .ld-course-navigation,
body.td-ld .learndash-wrapper .ld-course-navigation-list,
body.td-ld .learndash-wrapper .ld-lesson-navigation,
body.td-ld .learndash-wrapper .ld-lesson-items{background:transparent}

/* --td-dim on --td-bg measured 2.86:1, under the 4.5 that 10.5px text needs,
   and it showed: the section names were the faintest thing in the sidebar.
   --td-muted clears AA without making them compete with the lesson titles. */
body.td-ld .learndash-wrapper .ld-lesson-item-section-heading{
  background:var(--td-bg); border-block:1px solid var(--td-line);
  color:var(--td-muted); font-family:var(--td-body); font-weight:700;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
}
/* These three selectors are written to LearnDash's own depth on purpose.
   Its rule is ".learndash-wrapper .ld-focus .ld-focus-sidebar
   .ld-course-navigation .ld-lesson-item", five classes, and a shorter override
   simply loses: the rows stayed white while everything around them went dark. */
body.td-ld .learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation .ld-lesson-item,
body.td-ld .learndash-wrapper .ld-lesson-item{
  background:transparent; border-bottom:1px solid var(--td-hair);
}
body.td-ld .learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation .ld-lesson-item:hover,
body.td-ld .learndash-wrapper .ld-lesson-item:hover{background:var(--td-surface-2)}
body.td-ld .learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation .ld-lesson-item.ld-is-current-lesson{background:var(--td-surface-2)}

/* The logo slot in LearnDash's own header. No logo is set in its settings, so
   it was rendering as a bare white block in the top right corner. */
body.td-ld .learndash-wrapper .ld-focus .ld-focus-header .ld-brand-logo,
body.td-ld .learndash-wrapper .ld-brand-logo{background:transparent}

/* The progress track in LearnDash's own header. LearnDash's light grey against
   a near black bar reads as a filled bar rather than an empty one.

   Scoped to the focus header on purpose. A bare .ld-progress-bar selector also
   catches the modern layout's progress bar, which is not a bar at all: it is a
   ROW holding a label, a track and a step count. Pill radius and
   overflow:hidden on that row pushed "LESSON PROGRESS" hard up against its own
   border with a single pixel to spare, which is what it looked like. */
body.td-ld .learndash-wrapper .ld-focus .ld-focus-header .ld-progress-bar,
body.td-ld .learndash-wrapper .ld-focus .ld-focus-header .ld-progress .ld-progress-bar{
  background:var(--td-surface-2); border:1px solid var(--td-line);
  border-radius:999px; overflow:hidden;
}
body.td-ld .learndash-wrapper .ld-lesson-item .ld-lesson-title,
body.td-ld .learndash-wrapper .ld-lesson-item .ld-lesson-item-preview-heading,
body.td-ld .learndash-wrapper .ld-topic-title{color:var(--td-muted); font-weight:500}
body.td-ld .learndash-wrapper .ld-lesson-item:hover .ld-lesson-title{color:var(--td-text)}
body.td-ld .learndash-wrapper .ld-lesson-item.ld-is-current-lesson{background:var(--td-surface-2)}
body.td-ld .learndash-wrapper .ld-lesson-item.ld-is-current-lesson .ld-lesson-title{color:var(--td-gold); font-weight:700}
body.td-ld .learndash-wrapper .ld-lesson-item-expanded,
body.td-ld .learndash-wrapper .ld-topic-list,
body.td-ld .learndash-wrapper .ld-topic-row{background:var(--td-bg)}
body.td-ld .learndash-wrapper .ld-expand-button,
body.td-ld .learndash-wrapper .ld-expand-text{color:var(--td-muted); background:transparent}

body.td-ld .learndash-wrapper .ld-status-icon{border-color:var(--td-line-2); background:transparent}
body.td-ld .learndash-wrapper .ld-status-icon.ld-status-complete{background:var(--td-gold); border-color:var(--td-gold); color:#0A0E14}
body.td-ld .learndash-wrapper .ld-status-icon.ld-status-in-progress{border-color:var(--td-gold-deep)}

/* The course title block at the top of the sidebar. LearnDash fills it with the
   brand colour, which is now gold, so its label has to go dark or it is cream
   on gold. */
body.td-ld .learndash-wrapper .ld-course-navigation-heading{background:var(--td-gold)}
body.td-ld .learndash-wrapper .ld-course-navigation-heading,
body.td-ld .learndash-wrapper .ld-course-navigation-heading a,
body.td-ld .learndash-wrapper .ld-focus-mode-course-heading-wrapper,
body.td-ld .learndash-wrapper #ld-focus-mode-course-heading{
  color:#0A0E14; font-family:var(--td-display); font-weight:800;
  font-size:17px; text-transform:uppercase; line-height:1.15; letter-spacing:0;
}
body.td-ld .learndash-wrapper .ld-course-navigation-heading .ld-icon{color:#0A0E14}
body.td-ld .learndash-wrapper .ld-focus-sidebar-trigger{
  background:var(--td-bg); border:1px solid var(--td-gold); color:var(--td-gold);
}

/* ---------- focus header ---------- */
body.td-ld .learndash-wrapper .ld-focus-header .ld-user-welcome-text,
body.td-ld .learndash-wrapper .ld-focus-header .ld-text{
  color:var(--td-dim); font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:600;
}
body.td-ld .learndash-wrapper .ld-progress-steps,
body.td-ld .learndash-wrapper .ld-progress-stats{color:var(--td-dim)}
body.td-ld .learndash-wrapper .ld-progress-percentage{color:var(--td-gold); font-weight:700}
body.td-ld .learndash-wrapper .ld-focus-header .ld-progress-bar{
  background:var(--td-surface-2); border:1px solid var(--td-line); border-radius:999px; overflow:hidden;
}
body.td-ld .learndash-wrapper .ld-progress-bar .ld-progress-bar-percentage{background:var(--td-gold)}
body.td-ld .learndash-wrapper .ld-user-menu-items{
  background:var(--td-surface-2); border:1px solid var(--td-line); border-radius:8px;
}
/* LearnDash separates the dropdown's links with a 10% white hairline, the one
   line left on the page not tinted like the others. */
body.td-ld .learndash-wrapper .ld-user-menu-items a{color:var(--td-text); border-color:var(--td-hair)}
body.td-ld .learndash-wrapper .ld-user-menu-items a:hover{color:var(--td-gold)}

/* LearnDash's logo slot. It is 350px wide, the same as the sidebar below it, so
   it is what aligns the header with the course list. It was rendering empty:
   :empty did not match it either, because the template leaves a newline and a
   tab inside the div and whitespace counts as content.

   Rather than hide it and lose that alignment, functions.php now fills it with
   the site logo through learndash_focus_header_element. Inside a lesson this is
   the only route back to the rest of the site. */
body.td-ld .learndash-wrapper .ld-focus .ld-focus-header .ld-brand-logo{
  display:flex; align-items:center; background:transparent;
  /* 44px, not an arbitrary gutter: it is where the course title sits in the
     sidebar directly below, so the two line up down the left edge. */
  padding-left:44px;
}
body.td-ld .learndash-wrapper .ld-focus .ld-focus-header .ld-brand-logo .td-ld-logo{
  display:inline-flex; align-items:center;
}
/* Written to LearnDash's own depth. At two classes the height was ignored and
   the logo rendered 308 by 70 inside a 51px header, spilling over the bar. */
body.td-ld .learndash-wrapper .ld-focus .ld-focus-header .ld-brand-logo img,
body.td-ld .learndash-wrapper .ld-focus .ld-focus-header .td-ld-logo img{
  height:24px; width:auto; max-width:200px; display:block;
  opacity:.9; transition:opacity .3s;
}
body.td-ld .learndash-wrapper .ld-focus .ld-focus-header .td-ld-logo:hover img{opacity:1}

/* The avatar is a Gravatar identicon, the generated blue and white pattern
   handed to any address with no Gravatar account. It cannot be recoloured from
   here, so it is made small and round with a hairline instead, which reads as
   an avatar rather than as a graphic someone left in the header. */
body.td-ld .learndash-wrapper .ld-focus .ld-focus-header .ld-profile-avatar img{
  width:30px; height:30px; border-radius:50%;
  border:1px solid var(--td-line-2); display:block;
}
/* The welcome text and avatar were running to the very edge of the window on a
   16px padding, so the name was clipped by the window rather than by the
   ellipsis. This gives the right hand end the same gutter the left has. */
body.td-ld .learndash-wrapper .ld-focus .ld-focus-header .ld-user-menu{
  display:flex; align-items:center; gap:12px; padding-right:26px;
}
body.td-ld .learndash-wrapper .ld-focus .ld-focus-header .ld-user-welcome-text{
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:22ch;
}

/* ---------- the modern lesson progress row ----------
   A bordered row, so it needs the padding a bordered row needs. Its parts:
   __label is the words, __meter wraps the track, __meter-background is the
   track, __meter-foreground is the fill, __meter-label is the step count. */
body.td-ld .learndash-wrapper .ld-layout__header .ld-progress-bar,
body.td-ld .learndash-wrapper .ld-layout .ld-progress-bar{
  display:flex; align-items:center; gap:20px;
  padding:13px 22px; border:1px solid var(--td-line); border-radius:8px;
  background:var(--td-surface); overflow:visible;
}
body.td-ld .learndash-wrapper .ld-progress-bar__label{
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  font-weight:700; color:var(--td-dim); white-space:nowrap;
}
body.td-ld .learndash-wrapper .ld-progress-bar__meter{display:flex; align-items:center; gap:14px; flex:1 1 auto; min-width:0}
body.td-ld .learndash-wrapper .ld-progress-bar__meter-percentage{
  font-family:var(--td-display); font-weight:800; font-size:17px; color:var(--td-gold); flex:0 0 auto;
}
body.td-ld .learndash-wrapper .ld-progress-bar__meter-background{
  flex:1 1 auto; min-width:0; height:7px; border-radius:999px;
  background:var(--td-surface-2); border:1px solid var(--td-line); overflow:hidden;
}
body.td-ld .learndash-wrapper .ld-progress-bar__meter-foreground{background:var(--td-gold); height:100%; border-radius:999px}
body.td-ld .learndash-wrapper .ld-progress-bar__meter-label{
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--td-dim); white-space:nowrap; flex:0 0 auto;
}

/* ---------- the modern accordion, which holds the lesson's topics ---------- */
body.td-ld .learndash-wrapper .ld-accordion__heading{
  font-size:clamp(18px,2vw,23px); text-transform:uppercase; letter-spacing:-.02em; margin:0;
}
body.td-ld .learndash-wrapper .ld-accordion__header{margin-bottom:18px}
body.td-ld .learndash-wrapper .ld-accordion__section{
  /* was 12px on a 930px wide panel, so the text sat on the border. */
  padding:20px 24px 26px;
  background:var(--td-surface); border:1px solid var(--td-line); border-radius:8px;
}
body.td-ld .learndash-wrapper .ld-accordion__section + .ld-accordion__section{margin-top:14px}
body.td-ld .learndash-wrapper .ld-accordion__content{background:transparent}

/* ---------- room between the blocks ---------- */
body.td-ld .learndash-wrapper .ld-layout__header{margin-bottom:16px}
/* LearnDash gives the lesson title a 16px bottom margin, which on a page this
   wide reads as the breadcrumb being stuck to the heading. Written at its own
   depth so the value actually lands. */
body.td-ld .learndash-wrapper .ld-focus .ld-focus-content > h1,
body.td-ld .learndash-wrapper .ld-focus-content > h1{margin-bottom:30px}

/* ---------- breadcrumbs ---------- */
body.td-ld .learndash-wrapper .ld-breadcrumbs{
  background:transparent; border-bottom:1px solid var(--td-line);
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
}
body.td-ld .learndash-wrapper .ld-breadcrumbs__link,
body.td-ld .learndash-wrapper .ld-breadcrumbs a{color:var(--td-muted)}
body.td-ld .learndash-wrapper .ld-breadcrumbs__link:hover{color:var(--td-gold)}
body.td-ld .learndash-wrapper .ld-breadcrumbs__delimiter{color:var(--td-dim)}

/* ---------- the previous, complete, next row ---------- */
body.td-ld .learndash-wrapper .ld-navigation{border-top:1px solid var(--td-line); background:transparent}
body.td-ld .learndash-wrapper .ld-navigation__label,
body.td-ld .learndash-wrapper .ld-navigation__back-to-course-link{color:var(--td-muted)}
body.td-ld .learndash-wrapper .ld-navigation__previous-link:hover .ld-navigation__label,
body.td-ld .learndash-wrapper .ld-navigation__next-link:hover .ld-navigation__label,
body.td-ld .learndash-wrapper .ld-navigation__back-to-course-link:hover{color:var(--td-gold)}
body.td-ld .learndash-wrapper .ld-content-actions{border-color:var(--td-line); background:transparent}
body.td-ld .learndash-wrapper .ld-content-action a,
body.td-ld .learndash-wrapper .ld-content-action .ld-text{color:var(--td-muted)}
body.td-ld .learndash-wrapper .ld-content-action a:hover{color:var(--td-gold)}

/* ---------- buttons ----------
   The tokens cover the modern buttons. These rules are for the places
   LearnDash still hardcodes its blue: its stylesheet carries #235af3 in 176
   declarations, 143 of them button rules reaching two IDs and specificity
   (2,4,0), and its PHP generated sheet marks those same declarations
   !important. Out-specifying 143 selectors would mean recopying them after
   every update, so these match the level LearnDash already set and go no
   further. Colour only; all geometry still wins on specificity. */
body.td-ld .learndash-wrapper .ld-button,
body.td-ld .learndash-wrapper .ld-navigation__progress-mark-complete-button,
body.td-ld .learndash-wrapper .learndash_mark_complete_button,
body.td-ld .learndash-wrapper #learndash_mark_complete_button,
body.td-ld .learndash-wrapper input[type="submit"].ld-button{
  border-radius:999px; padding:14px 30px; border:0;
  background:var(--td-gold) !important; color:#0A0E14 !important;
  font-family:var(--td-body); font-weight:700; font-size:12.5px;
  letter-spacing:.14em; text-transform:uppercase;
  transition:background .4s, transform .4s;
}
body.td-ld .learndash-wrapper .ld-button:hover,
body.td-ld .learndash-wrapper .ld-navigation__progress-mark-complete-button:hover,
body.td-ld .learndash-wrapper .learndash_mark_complete_button:hover,
body.td-ld .learndash-wrapper #learndash_mark_complete_button:hover{
  background:var(--td-gold-hi) !important; color:#0A0E14 !important; transform:translateY(-2px);
}
body.td-ld .learndash-wrapper .ld-button.ld-button-transparent,
body.td-ld .learndash-wrapper .ld-button.ld-button-alternate,
body.td-ld .learndash-wrapper .ld-button.ld-button-reverse{
  background:transparent !important; color:var(--td-text) !important;
  border:1px solid var(--td-line-2);
}
body.td-ld .learndash-wrapper .ld-button.ld-button-transparent:hover,
body.td-ld .learndash-wrapper .ld-button.ld-button-alternate:hover,
body.td-ld .learndash-wrapper .ld-button.ld-button-reverse:hover{
  background:var(--td-gold) !important; color:#0A0E14 !important; border-color:var(--td-gold);
}

/* Mark Complete in the FOCUS HEADER is not a filled button: LearnDash renders
   it there as text and a tick on the header bar, so the pill above would paint
   near black text on the near black bar and lose it entirely. The selectors
   mirror LearnDash's own two, ID for ID, plus the body class, because its
   versions are (1,5,0) and (2,3,0) and the second is !important. */
body.td-ld .learndash-wrapper .ld-focus .ld-focus-header .sfwd-mark-complete #learndash_mark_complete_button,
body.td-ld .learndash-wrapper .ld-focus .ld-focus-header #sfwd-mark-complete #learndash_mark_complete_button,
body.td-ld .learndash-wrapper .ld-focus .ld-focus-header .sfwd-mark-complete .learndash_mark_complete_button{
  background:transparent !important; color:var(--td-gold) !important;
  padding:0; border-radius:0;
  font-size:12px; letter-spacing:.12em; text-transform:uppercase;
}
body.td-ld .learndash-wrapper .ld-focus .ld-focus-header .sfwd-mark-complete::after{color:var(--td-gold) !important}

/* ---------- the header action row ----------
   LearnDash reuses .ld-button.ld-button-transparent in two very different
   places: at the foot of a lesson, where a pill is right, and in the top bar,
   where the same markup is really just navigation. The pill rule above was
   catching both, so PREVIOUS LESSON and NEXT TOPIC arrived in the bar as 54px
   tall outlined pills inside a 50px row, each one overflowing its own strip and
   drawing a border around a link.

   Up here they are text. No border, no radius, no fill, smaller type, and the
   row's own dividers do the separating. The !important is only undoing the
   !important the pill rule needed; specificity alone would not reach past it. */
body.td-ld .learndash-wrapper .ld-focus .ld-focus-header .ld-content-action .ld-button,
body.td-ld .learndash-wrapper .ld-focus .ld-focus-header .ld-button.ld-button-transparent,
body.td-ld .learndash-wrapper .ld-focus .ld-focus-header .ld-button.ld-button-alternate,
body.td-ld .learndash-wrapper .ld-focus .ld-focus-header .ld-button.ld-button-reverse{
  background:transparent !important;
  color:var(--td-muted) !important;
  border:0; border-radius:0;
  padding:0 20px; height:auto; min-height:0; box-shadow:none;
  font-family:var(--td-body); font-weight:600;
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:10px;
}
body.td-ld .learndash-wrapper .ld-focus .ld-focus-header .ld-content-action .ld-button:hover,
body.td-ld .learndash-wrapper .ld-focus .ld-focus-header .ld-button.ld-button-transparent:hover,
body.td-ld .learndash-wrapper .ld-focus .ld-focus-header .ld-button.ld-button-alternate:hover,
body.td-ld .learndash-wrapper .ld-focus .ld-focus-header .ld-button.ld-button-reverse:hover{
  background:transparent !important;
  color:var(--td-gold) !important;
  border:0; transform:none;
}
/* The chevrons are drawn out of borders, so they follow the label's colour. */
body.td-ld .learndash-wrapper .ld-focus .ld-focus-header .ld-button .ld-icon{border-color:currentColor}
body.td-ld .learndash-wrapper .ld-focus .ld-focus-header .ld-content-action .ld-text{
  font-size:10.5px; letter-spacing:.18em;
}

/* Mark Complete sits in the same row and is already text rather than a pill,
   so it only needs to match the others in size. */
body.td-ld .learndash-wrapper .ld-focus .ld-focus-header .sfwd-mark-complete #learndash_mark_complete_button,
body.td-ld .learndash-wrapper .ld-focus .ld-focus-header #sfwd-mark-complete #learndash_mark_complete_button,
body.td-ld .learndash-wrapper .ld-focus .ld-focus-header .sfwd-mark-complete .learndash_mark_complete_button{
  font-size:10.5px; letter-spacing:.18em;
}

/* A keyboard user still needs to see where they are, and removing the border
   above also removed the only thing marking focus. */
body.td-ld .learndash-wrapper .ld-focus .ld-focus-header .ld-button:focus-visible,
body.td-ld .learndash-wrapper .ld-focus .ld-focus-header button:focus-visible{
  outline:2px solid var(--td-gold); outline-offset:3px; border-radius:3px;
}

/* The welcome text was starting hard against the divider to its left. */
body.td-ld .learndash-wrapper .ld-focus .ld-focus-header .ld-user-welcome-text{
  padding-left:20px; max-width:26ch;
}

/* ---------- alerts ---------- */
body.td-ld .learndash-wrapper .ld-alert{
  background:var(--td-surface); border:1px solid var(--td-line);
  border-left:3px solid var(--td-gold); border-radius:6px; color:var(--td-text);
}
body.td-ld .learndash-wrapper .ld-alert .ld-alert-icon{background:transparent; color:var(--td-gold)}

/* ---------- video, tables, quizzes ---------- */
body.td-ld .learndash-wrapper .ld-video,
body.td-ld .learndash-wrapper .learndash-embed-responsive{
  border:1px solid var(--td-line); border-radius:8px; overflow:hidden; background:#000;
}
body.td-ld .learndash-wrapper .ld-table-list,
body.td-ld .learndash-wrapper .ld-table-list-items,
body.td-ld .learndash-wrapper .ld-table-list-item{background:transparent; border-color:var(--td-line)}
body.td-ld .learndash-wrapper .ld-table-list-item-preview:hover{background:var(--td-surface-2)}
body.td-ld .learndash-wrapper .wpProQuiz_content{color:var(--td-text)}
body.td-ld .learndash-wrapper .wpProQuiz_questionList{background:var(--td-surface); border:1px solid var(--td-line); border-radius:6px}
body.td-ld .learndash-wrapper .wpProQuiz_questionListItem label{color:var(--td-muted)}
body.td-ld .learndash-wrapper .ld-tooltip__text{background:var(--td-surface-2); color:var(--td-text); border:1px solid var(--td-line)}