/* =========================================================
   ACE Topic Page: the 1.2.0 design, kept for every page the
   2.0.0 design does not redraw
   ---------------------------------------------------------
   This is topic.css from 1.2.0, rule for rule. The only change
   is that every rule which styles something inside the lecture
   layout carries :where(.ace-topic-layout:not(.atp-v2)) after
   its body / content prefix. :where() adds nothing to a rule's
   specificity, so on lesson, quiz and course pages (whose layout
   is never marked atp-v2) the cascade is exactly 1.2.0's; on a
   redesigned topic page none of these rules apply, and
   topic.css draws it instead.

   Built from 1.2.0 mechanically; to change the old design,
   change it here.
   ========================================================= */

/* =========================================================
   The lecture page, in the homepage's language
   ---------------------------------------------------------
   One card, used everywhere: a soft top-lit surface, 14px
   corners, a hairline border, a sentence-case heading with a
   bare teal icon, and — where there is a list inside — a
   darker inset panel whose rows are separate rounded pills.
   The video, the lecture, the quizzes, the files and the
   problems all become that one card, so the page reads as
   one thing rather than five.

   The sizes are NOT the homepage's. Those cards hold mocks
   of these panels at roughly 60% of life size; copying their
   type sizes here would give a student 10px rows.
   ========================================================= */

.ace-player{
  /* The teal the homepage uses for text and icons on a dark surface: the
     palette's primary lifted towards white until it clears 4.5:1 there.
     Precomputed first, for browsers without color-mix (iOS 15 and older). */
  --atp-teal: #61b6b1;
  /* The primary darkened until white on it clears 4.5:1 — the solid pill. */
  --atp-teal-fill: #007870;
  --atp-line: rgba(255,255,255,.08);
  --atp-line2: rgba(255,255,255,.14);
  --atp-screen: #1f1f1d;
  --atp-card: linear-gradient(180deg, rgba(255,255,255,.038), rgba(255,255,255,.012));
}

@supports (color: color-mix(in srgb, red 50%, white)){
  .ace-player{
    --atp-teal: color-mix(in srgb, var(--color-primary, #008a81) 62%, #fff);
    --atp-teal-fill: color-mix(in srgb, var(--color-primary, #008a81) 87%, #000);
  }
}


/* ---------------------------------------------------------
   1. The band
   --------------------------------------------------------- */

:where(.ace-topic-layout:not(.atp-v2)) .atp-band{ margin: 0 0 18px; }

:where(.ace-topic-layout:not(.atp-v2)) .atp-eyebrow{
  margin: 0 !important;
  font-family: var(--font-heading, Poppins, system-ui, sans-serif);
  font-size: .68rem !important;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--atp-teal) !important;
}

:where(.ace-topic-layout:not(.atp-v2)) .atp-band-row{
  display: flex;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 5px;
}

:where(.ace-topic-layout:not(.atp-v2)) .atp-title{
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--font-heading, Poppins, system-ui, sans-serif) !important;
  font-size: 1.6rem !important;
  font-weight: 700 !important;
  line-height: 1.22 !important;
  color: var(--color-heading, #f5f4ef) !important;
}

:where(.ace-topic-layout:not(.atp-v2)) .atp-prog{ flex: 1 1 200px; max-width: 300px; min-width: 170px; }
:where(.ace-topic-layout:not(.atp-v2)) .atp-prog-top{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
  font-size: .7rem;
  color: var(--color-text-muted, #a39e93);
}
:where(.ace-topic-layout:not(.atp-v2)) .atp-meter{
  display: block;
  height: 5px;
  border-radius: 4px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
}
:where(.ace-topic-layout:not(.atp-v2)) .atp-meter > i{
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--color-primary, #008a81);
}

:where(.ace-topic-layout:not(.atp-v2)) .atp-state{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--atp-line2);
  background: rgba(255,255,255,.05);
  font-size: .72rem;
  font-weight: 600;
  color: var(--color-text-muted, #a39e93);
  white-space: nowrap;
}
:where(.ace-topic-layout:not(.atp-v2)) .atp-state svg{ width: 13px; height: 13px; }
/* The button, when the band has one. LearnDash and the theme both colour
   this control and the theme already had to raise its own rule to win it,
   so this states every part of the pill and means it. */
.ace-player :where(.ace-topic-layout:not(.atp-v2)) .atp-mc{ flex: 0 0 auto; line-height: 0; }

/*
 * Never hidden.
 *
 * The theme's app-shell.js has a duplicate guard that keys each Mark
 * Complete form on its action and label. Its selector matches both the
 * <form> and the button inside it, which produce the same key, so the
 * button's pass marks its own form as the second copy and hides it with an
 * inline display:none — every Mark Complete form, on every page. ACE Lesson
 * Steps had already worked round this by forcing its own panel's form
 * visible; the band needs the same, or a student on an unfinished topic has
 * nothing to press. Stylesheet !important beats an inline style without it.
 */
body.ace-player :where(.ace-topic-layout:not(.atp-v2)) .atp-mc[data-ace-mc-host] .sfwd-mark-complete,
body.ace-player :where(.ace-topic-layout:not(.atp-v2)) .atp-mc[data-ace-mc-host] form[class*="mark-complete"]{
  display: block !important;
}
.ace-player :where(.ace-topic-layout:not(.atp-v2)) .atp-mc form,
.ace-player :where(.ace-topic-layout:not(.atp-v2)) .atp-mc .learndash_mark_complete_button,
.ace-player :where(.ace-topic-layout:not(.atp-v2)) .atp-mc .ace-mark-complete-btn{ margin: 0 !important; }

.ace-player :where(.ace-topic-layout:not(.atp-v2)) .atp-mc .learndash_mark_complete_button,
.ace-player :where(.ace-topic-layout:not(.atp-v2)) .atp-mc .ace-mark-complete-btn,
.ace-player :where(.ace-topic-layout:not(.atp-v2)) .atp-mc input[type="submit"],
.ace-player :where(.ace-topic-layout:not(.atp-v2)) .atp-mc button{
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  width: auto !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  background: var(--atp-teal-fill) !important;
  color: #fff !important;
  font-family: var(--font-heading, Poppins, system-ui, sans-serif) !important;
  font-size: .84rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  padding: 10px 20px !important;
  box-shadow: none !important;
  text-transform: none !important;
  cursor: pointer;
  transition: background .16s ease;
}
.ace-player :where(.ace-topic-layout:not(.atp-v2)) .atp-mc .learndash_mark_complete_button:hover,
.ace-player :where(.ace-topic-layout:not(.atp-v2)) .atp-mc .ace-mark-complete-btn:hover,
.ace-player :where(.ace-topic-layout:not(.atp-v2)) .atp-mc input[type="submit"]:hover,
.ace-player :where(.ace-topic-layout:not(.atp-v2)) .atp-mc button:hover{ background: var(--color-primary, #008a81) !important; }

:where(.ace-topic-layout:not(.atp-v2)) .atp-state.is-done{
  border-color: rgba(var(--ace-primary-rgb, 0,138,129), .5);
  background: rgba(var(--ace-primary-rgb, 0,138,129), .16);
  color: var(--atp-teal);
}

/* A quiz standing between the student and Mark Complete: which one, and
   the best score so far. */
:where(.ace-topic-layout:not(.atp-v2)) .atp-state.is-blocked{
  border-color: rgba(232,176,79,.45);
  background: rgba(232,176,79,.10);
  color: #e8b04f;
}
:where(.ace-topic-layout:not(.atp-v2)) .atp-blocked{
  margin: 10px 0 0 !important;
  max-width: 62ch;
  font-size: .78rem !important;
  line-height: 1.5 !important;
  color: var(--color-text-muted, #a39e93) !important;
}
:where(.ace-topic-layout:not(.atp-v2)) .atp-blocked strong{ color: var(--color-heading, #f5f4ef); font-weight: 600; }

/*
 * LearnDash's own infobar, now saying nothing the band does not.
 *
 * It carried the topic's name as the last crumb of a breadcrumb trail and
 * a "Lesson Progress — 37% Complete" bar. The band above has both, as a
 * real <h1> and a real progressbar, so leaving the infobar in place would
 * print each of them twice.
 */
.ace-player :where(.ace-topic-layout:not(.atp-v2)) .learndash-wrapper .ld-topic-status{ display: none !important; }


/* ---------------------------------------------------------
   2. The card, and the inset panel inside it
   --------------------------------------------------------- */

.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-video-tabs,
.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-ls-mc{
  border: 1px solid var(--atp-line);
  border-radius: 14px;
  background: var(--atp-card);
  transition: border-color .2s ease;
}
.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-video-tabs:hover{ border-color: var(--atp-line2); }


/* ---------------------------------------------------------
   3. The video
   ---------------------------------------------------------
   The tabs become the homepage's pills: one neutral outline,
   the open one filled with a teal wash, sitting above the
   frame rather than welded to its top edge.

   ACE Lesson Steps gave each batch one of seven fixed hues so
   a student could tell one recording from another at a glance.
   The label does that job too — "Batch 2026-A" is not easily
   mistaken for "Batch 2025-B" — and seven unrelated hues is
   the one thing on this page that does not belong to the rest
   of it. If the hues turn out to be doing real work, the rule
   that replaces them is marked below and is a single block to
   delete.
   --------------------------------------------------------- */

.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-video-tabs{ padding: 16px; margin: 0 0 16px !important; }

/*
 * A 16:9 frame across the full column is 400px of video on a laptop and
 * 790px on a wide monitor, which is a page nobody can see the bottom of.
 * The cap goes on the nav and the pane together, so the tabs stay lined up
 * with the frame they belong to.
 */
.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-video-tabs > .ace-vt-nav,
.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-video-tabs > .ace-vt-pane{
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
}

/* ---- the batch tabs. Delete this block to bring the seven hues back. ---- */

.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-video-tabs > .ace-vt-nav{
  gap: 6px;
  margin-bottom: 12px;
  align-items: center;
}

body.ace-player .ace-player-content :where(.ace-topic-layout:not(.atp-v2)) .ace-video-tabs > .ace-vt-nav > .ace-vt-tab{
  padding: 7px 14px !important;
  border: 1px solid var(--atp-line) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.04) !important;
  color: var(--color-text-muted, #a39e93) !important;
  font-size: .72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
body.ace-player .ace-player-content :where(.ace-topic-layout:not(.atp-v2)) .ace-video-tabs > .ace-vt-nav > .ace-vt-tab:hover{
  color: var(--color-heading, #f5f4ef) !important;
  border-color: var(--atp-line2) !important;
}
body.ace-player .ace-player-content :where(.ace-topic-layout:not(.atp-v2)) .ace-video-tabs > .ace-vt-nav > .ace-vt-tab.is-active{
  background: rgba(var(--ace-primary-rgb, 0,138,129), .18) !important;
  border-color: rgba(var(--ace-primary-rgb, 0,138,129), .55) !important;
  color: var(--color-heading, #f5f4ef) !important;
}

/* The frame had its top corners squared so the tabs could sit on it. */
body.ace-player .ace-player-content :where(.ace-topic-layout:not(.atp-v2)) .ace-video-tabs .ace-vt-frame{
  border-top-left-radius: 10px !important;
  border-top-right-radius: 10px !important;
}

/* The copyright notice: a quiet inset row inside the card. ACE Learning
   Tools 1.4.1 prints it there; an older copy prints it after the card,
   where it needs room of its own or it touches the lecture below. */
.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-video-tabs + .ace-lecture-copyright{ margin-bottom: 16px !important; }

.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-lecture-copyright{
  max-width: 760px;
  margin: 12px auto 0;
  padding: 10px 12px;
  border: 1px solid var(--atp-line);
  border-radius: 10px;
  background: rgba(255,255,255,.03);
  box-shadow: none;
}
.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-lecture-copyright-icon{ color: var(--color-text-muted, #a39e93); }
.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-lecture-copyright-title{
  font-size: .76rem !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-lecture-copyright-text{ font-size: .7rem !important; line-height: 1.45 !important; }


/* ---------------------------------------------------------
   4. The lecture
   --------------------------------------------------------- */

/*
 * The lecture card had its top corners squared and its top border removed,
 * so that it joined the LearnDash progress bar sitting directly above it.
 * That bar is now hidden — the band carries the progress — so the card is
 * a card again on all four sides.
 *
 * The rule doing the squaring is
 *   body .ace-player-content .learndash-wrapper .ace-topic-body { …!important }
 * in ACE Lesson Steps, so this has to carry one class more and !important
 * of its own. Nothing less wins.
 */
body.ace-player .ace-player-content :where(.ace-topic-layout:not(.atp-v2)) .learndash-wrapper .ace-topic-body,
body.ace-player .ace-player-content :where(.ace-topic-layout:not(.atp-v2)) .ace-topic-body{
  padding: 20px 22px !important;
  margin: 0 !important;
  border: 1px solid var(--atp-line) !important;
  border-radius: 14px !important;
  background: var(--atp-card) !important;
}

/*
 * The lecture had .8rem body text under headings left at the browser's
 * default 1.5em, so a 12.8px paragraph sat beneath a 24px heading. Both
 * ends move: the text up to 14px, the headings down to a scale that
 * belongs with it.
 */
.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-topic-body p,
.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-topic-body li{ font-size: .88rem !important; line-height: 1.65 !important; }
.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-topic-body h2{ font-size: 1.06rem !important; }
.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-topic-body h3{ font-size: .95rem !important; }
.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-topic-body h4{ font-size: .87rem !important; }
.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-topic-body h2,
.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-topic-body h3,
.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-topic-body h4{
  font-family: var(--font-heading, Poppins, system-ui, sans-serif) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  margin-top: 1.5em !important;
  margin-bottom: .5em !important;
}

/* A measure, so a line of prose on a wide monitor is readable rather than
   merely wide. The card keeps the full column; the text does not. */
.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-topic-body > p,
.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-topic-body > ul,
.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-topic-body > ol,
.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-topic-body > h2,
.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-topic-body > h3,
.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-topic-body > h4{ max-width: 74ch; }


/* ---------------------------------------------------------
   5. Previous and next
   ---------------------------------------------------------
   The names of the lectures either side, not the words
   "Previous" and "Next" — a student knows which way they are
   going; what they want to know is what is there.
   --------------------------------------------------------- */

.ace-player :where(.ace-topic-layout:not(.atp-v2)) .atp-nav{
  display: flex;
  align-items: stretch;
  gap: 12px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--atp-line);
}

.ace-player :where(.ace-topic-layout:not(.atp-v2)) .atp-nav-link{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  max-width: 48%;
  padding: 10px 16px;
  border: 1px solid var(--atp-line2);
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  color: var(--color-heading, #f5f4ef) !important;
  text-decoration: none !important;
  transition: background .16s ease, border-color .16s ease;
}
.ace-player :where(.ace-topic-layout:not(.atp-v2)) .atp-nav-link:hover{
  background: rgba(var(--ace-primary-rgb, 0,138,129), .18);
  border-color: rgba(var(--ace-primary-rgb, 0,138,129), .5);
}
.ace-player :where(.ace-topic-layout:not(.atp-v2)) .atp-nav-link.is-next{ margin-left: auto; text-align: right; }
.ace-player :where(.ace-topic-layout:not(.atp-v2)) .atp-nav-link svg{ width: 15px; height: 15px; flex: none; color: var(--atp-teal); }

.ace-player :where(.ace-topic-layout:not(.atp-v2)) .atp-nav-text{ min-width: 0; }
.ace-player :where(.ace-topic-layout:not(.atp-v2)) .atp-nav-text em{
  display: block;
  font-style: normal;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-text-muted, #a39e93);
}
.ace-player :where(.ace-topic-layout:not(.atp-v2)) .atp-nav-text b{
  display: block;
  font-family: var(--font-heading, Poppins, system-ui, sans-serif);
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/*
 * LearnDash's own previous/next box. ACE Lesson Steps removes the links in
 * it but leaves the box, with its 2px top rule, as an empty strip between
 * the lecture and the bar above. Hidden only while it has nothing in it to
 * click, so anything LearnDash does put there still shows.
 */
body.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-topic-main .ld-content-actions:not(:has(a, button, input, form)){
  display: none !important;
}


/* ---------------------------------------------------------
   6. Mark Complete, if ACE Lesson Steps still renders it
   ---------------------------------------------------------
   Its panel is switched off, so this only shows if the
   filter that does that is overridden somewhere.
   --------------------------------------------------------- */

.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-ls-mc{ padding: 16px 18px; margin-top: 16px; }
.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-ls-mc-icon{ color: var(--atp-teal); }
.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-ls-mc-title{ font-size: .95rem !important; }
.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-ls-mc-sub{ font-size: .78rem !important; }

/* The button: the homepage's solid pill. Raised to three classes and
   !important because LearnDash's own stylesheet and the theme both colour
   this control, and the theme already had to do the same to win it. */
.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-ls-mc .ace-ls-mc-action .learndash_mark_complete_button,
.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-ls-mc .ace-ls-mc-action .ace-mark-complete-btn,
.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-ls-mc .ace-ls-mc-action input[type="submit"]{
  border-radius: 999px !important;
  border: 1px solid transparent !important;
  background: var(--atp-teal-fill) !important;
  color: #fff !important;
  font-family: var(--font-heading, Poppins, system-ui, sans-serif) !important;
  font-size: .84rem !important;
  font-weight: 700 !important;
  padding: 10px 20px !important;
  box-shadow: none !important;
}
.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-ls-mc .ace-ls-mc-action .learndash_mark_complete_button:hover,
.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-ls-mc .ace-ls-mc-action .ace-mark-complete-btn:hover,
.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-ls-mc .ace-ls-mc-action input[type="submit"]:hover{
  background: var(--color-primary, #008a81) !important;
}


/* ---------------------------------------------------------
   7. The quizzes card
   ---------------------------------------------------------
   Drawn exactly like the files card: a heading with a teal
   icon, a line of muted text where there is something to say,
   and the quizzes sunk into the dark inset panel as rows —
   icon, name, state, and the button underneath.

   It arrives in one of two shapes. A practice quiz is dressed
   by ACE Lesson Steps (.ace-ls-qnote, with a "No leaderboard"
   line); a ranked quiz by ACE Rankings, which pulls the row
   into its own notice (.ace-rank-chooser) along with the
   codename control. Both keep everything they say and do.
   What goes is the teal wash and the 3px rule down the left
   that both drew, and LearnDash's font glyph for an icon.

   Both plugins' rules carry !important, the heaviest at four
   classes, so every rule here is scoped
     body.ace-player .ace-topic-aside .ace-ls-quizzes
   — three classes and an element before its own — and
   carries !important too. ACE Lesson Steps adds
   .ace-ls-quizzes to the list whichever shape it takes.
   --------------------------------------------------------- */

/* ---- the column: files first, then quizzes, then problems ---- */

body.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-topic-aside > .ace-downloads,
body.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-topic-aside > .ace-ls-quizzes,
body.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-topic-aside > .ace-rl-card{ margin: 0 0 16px !important; order: 0 !important; }

/* Below 1200px the column stacks under the lecture instead of beside it,
   and the first card's own top margin — which used to make the gap — is
   zeroed above, so the column brings its own. */
@media (max-width: 1199.98px){
  body.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-topic-aside{ margin-top: 24px; }
}

/* ---- the card ---- */

body.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-topic-aside .ace-ls-quizzes{
  display: block !important;
  padding: 16px !important;
  border: 1px solid var(--atp-line) !important;
  border-radius: 14px !important;
  background: var(--atp-card) !important;
  box-shadow: none !important;
  overflow: visible !important;
  transition: border-color .2s ease;
}
body.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-topic-aside .ace-ls-quizzes:hover{ border-color: var(--atp-line2) !important; }

/* LearnDash's own header bar and footer: the heading below replaces them. */
body.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-topic-aside .ace-ls-quizzes > .ld-table-list-header,
body.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-topic-aside .ace-ls-quizzes > .ld-table-list-footer{ display: none !important; }

/* The heading, added by this plugin's script so both shapes have the same one. */
body.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-topic-aside .ace-ls-quizzes .atp-card-head{
  display: flex !important;
  align-items: center;
  gap: 8px;
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--font-heading, Poppins, system-ui, sans-serif) !important;
  font-size: .98rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--color-heading, #f5f4ef) !important;
}
body.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-topic-aside .ace-ls-quizzes .atp-card-head svg{
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--atp-teal);
}

/* ---- a practice quiz: ACE Lesson Steps' note becomes one muted line ---- */

body.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-topic-aside .ace-ls-quizzes .ace-ls-qnote{
  margin: 8px 0 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
}
body.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-topic-aside .ace-ls-quizzes .ace-ls-qnote-head{ display: block !important; }
body.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-topic-aside .ace-ls-quizzes .ace-ls-qnote-icon,
body.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-topic-aside .ace-ls-quizzes .ace-ls-qnote-title,
body.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-topic-aside .ace-ls-quizzes .ace-ls-qcount{ display: none !important; }
body.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-topic-aside .ace-ls-quizzes .ace-ls-qnote-text{
  margin: 0 !important;
  font-size: .72rem !important;
  line-height: 1.5 !important;
  color: var(--color-text-muted, #a39e93) !important;
}

/* ---- a ranked quiz: ACE Rankings' notice, minus the callout box ---- */

body.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-topic-aside .ace-ls-quizzes .ace-rank-chooser.is-in-quiz-card{
  margin: 8px 0 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
body.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-topic-aside .ace-ls-quizzes .ace-rank-chooser.is-in-quiz-card p{
  margin: 0 !important;
  font-size: .72rem !important;
  line-height: 1.5 !important;
  color: var(--color-text-muted, #a39e93) !important;
}
body.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-topic-aside .ace-ls-quizzes .ace-rank-chooser.is-in-quiz-card h3{
  margin: 0 0 3px !important;
  font-family: var(--font-heading, Poppins, system-ui, sans-serif) !important;
  font-size: .8rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  color: var(--color-heading, #f5f4ef) !important;
}
body.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-topic-aside .ace-ls-quizzes .ace-rank-chooser.is-in-quiz-card .ace-rank-chooser-icon{
  width: auto !important;
  height: auto !important;
  background: none !important;
  border-radius: 0 !important;
  color: var(--atp-teal) !important;
}
body.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-topic-aside .ace-ls-quizzes .ace-rank-chooser.is-in-quiz-card .ace-rank-chooser-icon svg{
  width: 14px !important;
  height: 14px !important;
}
body.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-topic-aside .ace-ls-quizzes .ace-rank-chooser.is-in-quiz-card .ace-rank-chooser-locked strong{
  color: var(--atp-teal) !important;
}
/* The codename control keeps ACE Rankings' own drawing; only its rule
   above changes, from a dashed line to the hairline the card uses. */
body.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-topic-aside .ace-ls-quizzes .ace-rank-chooser.is-in-quiz-card .ace-rank-chooser-body{
  margin-top: 12px !important;
  padding-top: 12px !important;
  border-top: 1px solid var(--atp-line) !important;
}

/* ---- the inset panel: the same in both shapes ---- */

body.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-topic-aside .ace-ls-quizzes .ace-ls-qnote-slot,
body.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-topic-aside .ace-ls-quizzes .ace-rank-chooser.is-in-quiz-card .ace-rank-quiz-slot{
  margin: 12px 0 0 !important;
  padding: 10px !important;
  border: 1px solid var(--atp-line2) !important;
  border-radius: 12px !important;
  background: var(--atp-screen) !important;
}
body.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-topic-aside .ace-ls-quizzes .ace-rank-chooser.is-in-quiz-card .ace-rank-quiz-slot:empty{
  display: none !important;
}
body.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-topic-aside .ace-ls-quizzes .ld-table-list-items{
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
}

/* ---- a quiz: icon, name, state, and the button underneath ---- */

body.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-topic-aside .ace-ls-quizzes .ld-table-list-item{
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
body.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-topic-aside .ace-ls-quizzes .ld-table-list-item + .ld-table-list-item{
  margin-top: 6px !important;
  border-top: 0 !important;
}
body.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-topic-aside .ace-ls-quizzes .ld-table-list-item-quiz,
body.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-topic-aside .ace-ls-quizzes .ld-tooltip{
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-topic-aside .ace-ls-quizzes .ld-table-list-item-preview{
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: start !important;
  column-gap: 10px !important;
  row-gap: 0 !important;
  padding: 10px 11px !important;
  border: 1px solid var(--atp-line) !important;
  border-radius: 8px !important;
  background: none !important;
  text-decoration: none !important;
  transition: background .16s ease, border-color .16s ease;
}
body.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-topic-aside .ace-ls-quizzes .ld-table-list-item-preview:hover,
body.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-topic-aside .ace-ls-quizzes .ld-table-list-item-preview:focus-visible{
  background: rgba(255,255,255,.035) !important;
  border-color: rgba(var(--ace-primary-rgb, 0,138,129), .5) !important;
}

/* Everything but the icon stacks in the second column. */
body.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-topic-aside .ace-ls-quizzes .ld-table-list-item-preview > *{ grid-column: 2 !important; }

/* LearnDash's status glyph and ACE Lesson Steps' drawn QUIZ sheet both give
   way to one teal line icon, the same family as the files and problems. */
body.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-topic-aside .ace-ls-quizzes .ld-table-list-item-preview > .ld-status-icon{ display: none !important; }
body.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-topic-aside .ace-ls-quizzes .ld-table-list-item-preview > .atp-quiz-icon{
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  display: flex !important;
  margin-top: 1px !important;
  color: var(--atp-teal) !important;
}
body.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-topic-aside .ace-ls-quizzes .atp-quiz-icon svg{ width: 16px; height: 16px; }

body.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-topic-aside .ace-ls-quizzes .ld-table-list-item-preview .ace-ls-qtext{ min-width: 0 !important; }
body.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-topic-aside .ace-ls-quizzes .ld-table-list-item-preview .ld-item-title{
  display: block !important;
  font-family: var(--font-body, Inter, system-ui, sans-serif) !important;
  font-size: .84rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: var(--color-heading, #f5f4ef) !important;
  word-break: break-word;
}
body.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-topic-aside .ace-ls-quizzes .ld-table-list-item-preview:hover .ld-item-title{
  color: var(--atp-teal) !important;
}
/* In the side column the files card sets its names a notch smaller; the
   quiz names follow it, so the two lists read at one size. */
@media (min-width: 1200px){
  body.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-topic-aside .ace-ls-quizzes .ld-table-list-item-preview .ld-item-title{
    font-size: .8rem !important;
    line-height: 1.4 !important;
  }
}

/* The state: written like the file type under a filename, not shouted. */
body.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-topic-aside .ace-ls-quizzes .ld-table-list-item-preview .ace-ls-qstate{
  display: block !important;
  margin-top: 1px !important;
  font-size: .68rem !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1.3 !important;
  text-transform: none !important;
  color: var(--color-text-muted, #a39e93) !important;
}
body.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-topic-aside .ace-ls-quizzes .ld-table-list-item-preview .ace-ls-qstate.is-done{
  color: #8dc49a !important;
}

/* The button, under the name like Download under a filename. */
body.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-topic-aside .ace-ls-quizzes .ld-table-list-item-preview .atp-quiz-go{
  justify-self: start !important;
  margin-top: 8px !important;
  padding: 5px 12px !important;
  border: 1px solid var(--atp-line2) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.07) !important;
  color: var(--color-heading, #f5f4ef) !important;
  font-family: var(--font-body, Inter, system-ui, sans-serif) !important;
  font-size: .7rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  white-space: nowrap;
  transition: background .15s ease;
}
body.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-topic-aside .ace-ls-quizzes .ld-table-list-item-preview:hover .atp-quiz-go{
  background: rgba(var(--ace-primary-rgb, 0,138,129), .28) !important;
}


/* ---------------------------------------------------------
   8. The free-tier lock panel
   --------------------------------------------------------- */

.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-free-lock{
  border: 1px solid var(--atp-line);
  border-radius: 14px;
  background: var(--atp-card);
}
.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-free-lock-icon{ color: var(--atp-teal); }
.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-free-lock-btn{
  border-radius: 999px !important;
  background: var(--atp-teal-fill) !important;
  color: #fff !important;
  border: 1px solid transparent !important;
}


/* ---------------------------------------------------------
   9. Narrow
   --------------------------------------------------------- */

@media (max-width: 900px){
  :where(.ace-topic-layout:not(.atp-v2)) .atp-title{ font-size: 1.32rem !important; }
  :where(.ace-topic-layout:not(.atp-v2)) .atp-band-row{ display: block; }
  :where(.ace-topic-layout:not(.atp-v2)) .atp-prog{ max-width: none; margin: 12px 0 10px; }
  .ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-video-tabs{ padding: 14px; }
  body.ace-player .ace-player-content :where(.ace-topic-layout:not(.atp-v2)) .ace-topic-body{ padding: 16px !important; }
}

@media (max-width: 600px){
  :where(.ace-topic-layout:not(.atp-v2)) .atp-band{ margin-bottom: 14px; }

  /*
   * On a phone a third batch tab wraps onto a second row, and because the
   * tabs are drawn attached to the top of the frame, that row lands on top
   * of the video. One scrolling row instead.
   */
  .ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-video-tabs > .ace-vt-nav{
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-video-tabs > .ace-vt-nav::-webkit-scrollbar{ display: none; }
  .ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-video-tabs > .ace-vt-nav .ace-vt-tab{ flex: 0 0 auto; }

  :where(.ace-topic-layout:not(.atp-v2)) .atp-title{ font-size: 1.2rem !important; }
  .ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-ls-mc{ padding: 14px; }

  /* Two lines for a lecture's name rather than one cut off after a dozen
     letters: at this width "SAMPLE FREE T…" was all that was left. */
  .ace-player :where(.ace-topic-layout:not(.atp-v2)) .atp-nav-link{ border-radius: 18px; padding: 10px 14px; }
  .ace-player :where(.ace-topic-layout:not(.atp-v2)) .atp-nav-text b{
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  body.ace-player :where(.ace-topic-layout:not(.atp-v2)) .ace-topic-aside .ace-ls-quizzes{ padding: 14px !important; }
}