/* ---------------------------------------------------------------
   A note on the selectors below.

   LearnDash ships this, which applies to EVERY element inside its
   wrapper and is where the rounded corners come from:

     .learndash-wrapper:not(.ld-registration__outer-wrapper)
     :not(.learndash-wrapper--modern) * { border-radius: 6px }

   Its specificity is three classes. A rule like
   `body .ace-player-content .ld-topic-status` is only two, so it loses
   on specificity even though it looks more targeted. The radius rules
   here therefore name .learndash-wrapper as well, which takes them to
   three classes plus an element and wins outright — !important included
   in case that rule ever gains one too.
   --------------------------------------------------------------- */

/* ---------- the lecture text, as a card ---------- */

.ace-topic-body{
  background: var(--color-bg-alt, #30302e);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
  padding: 20px 22px;
  margin: 14px 0 0;
}

/* Join the progress bar to the content below it.
   LearnDash puts the lecture content inside .ld-tabs, which sits after
   .ld-progress, and both carry vertical margins. Closing those two is what
   makes the pair read as one block. The selectors are deliberately more
   specific than the theme's own `.ace-player-content .ld-progress` rule,
   which sets a 26px bottom margin with !important. */
body .ace-player-content .learndash-wrapper .ld-progress,
body .ace-player-content .ld-progress{
  margin-bottom: 0 !important;
}

/* The block holding the breadcrumb and the progress bar. Its rounded bottom
   corners are what showed as a notch either side of the join: they curve
   inward while the card below is square, so the two edges step apart. Square
   off the bottom and drop the closing border, and the two become one box. */
body .ace-player-content .learndash-wrapper .ld-topic-status,
body .ace-player-content .learndash-wrapper .ld-lesson-status,
body .ace-player-content .learndash-wrapper .ld-course-status,
body .ace-player-content .ld-topic-status,
body .ace-player-content .ld-lesson-status,
body .ace-player-content .ld-course-status{
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  /* Zero width, not just zero colour: a transparent border still occupies
     space and would inset this block from the content below it. */
  border-width: 0 !important;
  border-bottom: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
body .ace-player-content .ld-tabs{
  margin-top: 0 !important;
}

/* Align the two edges. .ld-tabs and its inner wrappers carry horizontal
   padding that .ld-progress above does not, which leaves the lecture card
   inset by a few pixels on each side and shows as a notch at the join.
   Zeroing it here lets the card run to the same edges; the card keeps its
   own padding, so the text is unaffected. */
body .ace-player-content .ld-tabs,
body .ace-player-content .ld-tabs-content,
body .ace-player-content .ld-tab-content,
body .ace-player-content .ld-tabs .ld-tab-content{
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* The lecture card then continues that block rather than starting a new one:
   square across the top, flush to the sides, no seam line of its own. */
body .ace-player-content .learndash-wrapper .ace-topic-body,
body .ace-player-content .ace-topic-body,
.ace-topic-body{
  margin: 0 !important;
  width: auto;
  border-top: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}
.ace-topic-body > *:first-child{ margin-top: 0 !important; }
.ace-topic-body > *:last-child{ margin-bottom: 0 !important; }

.ace-topic-body p,
.ace-topic-body li{
  color: var(--color-text, #e8e6dc);
  font-size: .8rem;
  line-height: 1.55;
}
.ace-topic-body h1,
.ace-topic-body h2,
.ace-topic-body h3,
.ace-topic-body h4{
  color: var(--color-heading, #f5f4ef);
  margin-top: 1.4em;
}
.ace-topic-body ul,
.ace-topic-body ol{ padding-left: 20px; }
.ace-topic-body li{ margin-bottom: 5px; }
.ace-topic-body a{ color: var(--color-primary, #008a81); }
.ace-topic-body img{ max-width: 100%; height: auto; border-radius: 8px; }
.ace-topic-body table{ width: 100%; border-collapse: collapse; }
.ace-topic-body th,
.ace-topic-body td{
  border-bottom: 1px solid rgba(255,255,255,.07);
  padding: 8px 10px;
  text-align: left;
  font-size: .78rem;
}

/* ---------- the quiz list, once moved into the column ---------- */

.ace-topic-aside .ld-table-list{
  background: var(--color-bg-alt, #30302e) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  /* 18px is the gap .ace-downloads puts between its own cards, so all
     three cards in this column are evenly spaced. */
  margin: 0 0 14px !important;
  padding: 0 !important;
}

/* LearnDash paints this header with the primary colour. Ours matches the
   DOWNLOAD PDF and DOWNLOAD VIDEO headers beside it exactly -- same plain
   background, same 3px terracotta rule down the left, same type. The values
   below are .ace-dl-card-head's, restated because that rule lives in
   another plugin's stylesheet and cannot be inherited from here.

   The accent used to be an inset box-shadow, which is why it read as a
   short stubby mark instead of a clean edge: an inset shadow sits inside
   the padding box, while the download headers use a real border. */
.ace-topic-aside .ld-table-list-header,
.ace-topic-aside .ld-table-list-header.ld-primary-background{
  display: block !important;
  background: none !important;
  background-color: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
  border-left: 3px solid var(--color-primary, #008a81) !important;
  box-shadow: none !important;
  color: var(--color-heading, #f5f4ef) !important;
  font-family: var(--font-heading, sans-serif) !important;
  font-size: .78rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  padding: 13px 18px !important;
  margin: 0 !important;
}


/* The download headers change size with context, so this one follows them.
   .ace-dl-card-head is 13px/18px normally, and tightens to 11px/14px both
   on a narrow screen and inside this column on a wide one. */
@media (max-width: 600px){
  .ace-topic-aside .ld-table-list-header,
  .ace-topic-aside .ld-table-list-header.ld-primary-background{
    padding: 11px 14px !important;
  }
}
@media (min-width: 1200px){
  .ace-topic-aside .ld-table-list-header,
  .ace-topic-aside .ld-table-list-header.ld-primary-background{
    padding: 11px 14px !important;
    font-size: .72rem !important;   /* matches .ace-topic-aside .ace-dl-card-title */
  }
  .ace-topic-aside .ld-table-list{ margin: 0 0 14px !important; }
}

.ace-topic-aside .ld-table-list-items{ padding: 6px !important; }

.ace-topic-aside .ld-table-list-item{
  background: none !important;
  border: 0 !important;
  border-radius: 8px !important;
  padding: 0 !important;
  margin: 0 !important;
}
.ace-topic-aside .ld-table-list-item + .ld-table-list-item{
  border-top: 1px solid rgba(255,255,255,.05) !important;
}
.ace-topic-aside .ld-table-list-item-preview{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px !important;
  border-radius: 8px;
  text-decoration: none !important;
  transition: background .16s ease;
}
.ace-topic-aside .ld-table-list-item-preview:hover{ background: rgba(var(--ace-primary-rgb, 204,120,92), .1) !important; }

.ace-topic-aside .ld-table-list-item-preview .ld-item-title,
.ace-topic-aside .ld-table-list-item-preview span{
  color: var(--color-text, #e8e6dc) !important;
  font-size: .8rem !important;
  line-height: 1.4 !important;
}

.ace-topic-aside .ld-table-list-item .ld-status-icon,
.ace-topic-aside .ld-table-list-item .ld-icon{
  flex-shrink: 0;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  border-radius: 50% !important;
}

.ace-topic-aside .ld-table-list-footer{ display: none !important; }

/* ---------- the quiz icon ----------

   LearnDash draws its own icon here from an icon font. Swapped for the same
   sheet-and-band drawing the PDF and MP4 files use, so the whole column
   reads as one set. Only .ld-icon is touched -- .ld-status-icon carries
   whether the quiz is finished, which is different information and stays
   exactly as it is. */
.ace-topic-aside .ld-table-list-item .ld-icon{
  /* background-image is emitted by PHP from the live accent colour --
     see ace_ls_quiz_icon_css(). A data URI cannot read a CSS variable,
     so baking the hex in here would have pinned this one icon to
     terracotta for good. */
  background-repeat: no-repeat;
  background-position: center;
  background-size: 17px 21px;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  /* The glyph is drawn by an icon font, so zero the type to silence it
     without hiding the element the background sits on. */
  font-size: 0 !important;
  color: transparent !important;
  width: 22px !important;
  height: 26px !important;
  min-width: 22px !important;
}
.ace-topic-aside .ld-table-list-item .ld-icon::before,
.ace-topic-aside .ld-table-list-item .ld-icon::after{
  content: none !important;
}

/* The quiz list is inserted first, so the download cards follow it. */
.ace-topic-aside .ace-ls-quizzes{ order: -1; }

/* ---------- code-numbered lines, matching the syllabus sub-topic rows ----------

   Lecture content is written as plain lines like "01.01 – Numerical
   Computations". The script splits the leading code off into its own span so
   it can sit in a fixed column, and tags the line so only recognised lines
   get separators — ordinary prose paragraphs are left alone rather than
   having rules drawn between them. */

.ace-topic-body .ace-topic-line {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 8px 0;
  margin: 0;
  border-top: 1px solid rgba(255,255,255,.05);
}
.ace-topic-body .ace-topic-line.is-first { border-top: 0; }

.ace-topic-code {
  flex-shrink: 0;
  min-width: 46px;
  color: var(--color-text-muted, #a39e93);
  font-size: .68rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: .03em;
}

.ace-topic-text {
  flex: 1;
  min-width: 0;
  color: var(--color-text, #e8e6dc);
  font-size: .82rem;
  line-height: 1.5;
}

/* ---------- lecture lists, styled like the Syllabus page ----------

   The Syllabus page reads as flat rows joined by a thin top-border line,
   with its sub-topics indented and set smaller underneath. Lecture content
   gets the same two-level treatment: a top-level list is .ace-ls-list,
   any list nested inside one of its items is .ace-ls-sublist — the
   distinction is made once in JS (see formatLists()), because CSS alone
   cannot tell "nested" from "top-level" without knowing the markup depth
   the lecturer happened to type.

   .ace-syl-subs is excluded throughout: a lecture can link back into a
   Syllabus sub-topic list, and that already carries its own styling.

   PURE-CSS FALLBACK, ahead of the classed rules below: v1.7.0 shipped
   *only* the classed version and, on a Lesson page, the script that adds
   those classes never ran (it was folded into logic gated on the topic-only
   two-column layout), so every list on a Lesson page fell back to a bare
   browser bullet list. This rule gives every list in `.ace-topic-body` the
   flat, no-bullet, joined-by-a-line look with no JS involved at all — it is
   what 1.6.1 always did. The classed rules further down have one more class
   of specificity, so the instant JS tags a list as top-level or nested, its
   refined (and correctly indented) version takes over automatically. */
.ace-topic-body ul:not(.ace-syl-subs):not(.ace-ls-list):not(.ace-ls-sublist),
.ace-topic-body ol:not(.ace-ls-list):not(.ace-ls-sublist) {
  list-style: none;
  margin: 10px 0;
  padding-left: 0;
}
.ace-topic-body ul:not(.ace-syl-subs):not(.ace-ls-list):not(.ace-ls-sublist) > li,
.ace-topic-body ol:not(.ace-ls-list):not(.ace-ls-sublist) > li {
  border-top: 1px solid rgba(255,255,255,.05);
  padding: 9px 0;
  margin: 0;
}
.ace-topic-body ul:not(.ace-syl-subs):not(.ace-ls-list):not(.ace-ls-sublist) > li:first-child,
.ace-topic-body ol:not(.ace-ls-list):not(.ace-ls-sublist) > li:first-child {
  border-top: 0;
}

/*
 * These were called .ace-topic-list / .ace-topic-sublist, which is the same
 * name the THEME uses for the topic list inside a sidebar lesson group --
 * and the theme sets `.ace-topic-list { display: none }`, revealed only by
 * `.ace-lesson-group.is-open`. A lecture-content list is in neither, so
 * every top-level bulleted list in a topic silently disappeared. Renamed so
 * the collision cannot come back, and `display` is stated outright so no
 * other stylesheet can hide these by accident again.
 */
.ace-topic-body .ace-ls-list,
.ace-topic-body .ace-ls-sublist {
  display: block;
  list-style: none;
  margin: 10px 0;
  padding-left: 0;
}

/* Top-level rows: same flat, joined-by-a-line look as a syllabus topic. */
.ace-topic-body .ace-ls-list:not(.ace-syl-subs) > li {
  border-top: 1px solid rgba(255,255,255,.05);
  padding: 9px 0;
  margin: 0;
}
.ace-topic-body .ace-ls-list:not(.ace-syl-subs) > li:first-child {
  border-top: 0;
}

/* A sub-list sits indented under the item it belongs to, exactly like
   .ace-syl-subs sits under its .ace-syl-topic — smaller text, its own
   thinner separators, no border against the parent row it continues. */
.ace-topic-body .ace-ls-sublist {
  padding-left: 24px;
  margin: 6px 0 2px;
}
.ace-topic-body .ace-ls-sublist > li {
  border-top: 1px solid rgba(255,255,255,.04);
  color: var(--color-text-muted, #a39e93);
  font-size: .78rem;
  line-height: 1.5;
  padding: 6px 0;
  margin: 0; /* overrides the base li's margin-bottom: 5px, or the border
                would sit mid-gap instead of flush against the row above */
}
.ace-topic-body .ace-ls-sublist > li:first-child { border-top: 0; }

/* A deeper level again (a sub-list inside a sub-list) keeps indenting
   rather than resetting — content the lecturer nests three deep still
   reads as progressively more specific, not as a jump back to top-level. */
.ace-topic-body .ace-ls-sublist .ace-ls-sublist { padding-left: 20px; }

@media (max-width: 600px) {
  .ace-topic-body .ace-ls-sublist { padding-left: 16px; }
}

/* ---------- video tabs across the top of the video ----------

   Markup comes from the lecture-tools plugin:
     .ace-video-tabs > .ace-vt-nav > button.ace-vt-tab
     .ace-video-tabs > .ace-vt-pane > .ace-vt-frame > iframe

   The nav sits directly on the frame with no gap between them, and each tab
   is rounded on top and square where it meets the video, so the row reads as
   tabs attached to the frame rather than a separate strip above it. */

.ace-video-tabs {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  margin-top: 0 !important;
}

.ace-vt-nav {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 5px;
  margin: 0;
  padding: 0;
  border: 0;
}

.ace-vt-tab {
  writing-mode: horizontal-tb;
  appearance: none;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  cursor: pointer;
  font-family: inherit;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 8px 14px;
  white-space: nowrap;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}

/* Square the frame's top corners so the tabs meet a straight edge. */
.ace-video-tabs .ace-vt-frame {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

.ace-video-tabs .ace-vt-pane { min-width: 0; }
.ace-video-tabs .ace-vt-pane.is-active { flex: 1 1 auto; }

/* Clean, low-saturation hues that sit with the dark palette. Inactive is
   the colour on a wash of itself; active fills.

   These are a fixed seven-hue set for telling video batches apart, NOT
   the brand accent -- the first one only happens to share the old
   terracotta hex. Leave them literal: they must not move when the
   accent changes, or two tabs stop being distinguishable. */
.ace-vt-nav .ace-vt-tab:nth-child(1) { color: #cc785c; background: rgba(204,120,92,.12); border-color: rgba(204,120,92,.28); }
.ace-vt-nav .ace-vt-tab:nth-child(1).is-active { background: #cc785c; border-color: #cc785c; color: #fff; }

.ace-vt-nav .ace-vt-tab:nth-child(2) { color: #7aa2d4; background: rgba(122,162,212,.12); border-color: rgba(122,162,212,.28); }
.ace-vt-nav .ace-vt-tab:nth-child(2).is-active { background: #7aa2d4; border-color: #7aa2d4; color: #1a1918; }

.ace-vt-nav .ace-vt-tab:nth-child(3) { color: #6fa87d; background: rgba(111,168,125,.12); border-color: rgba(111,168,125,.28); }
.ace-vt-nav .ace-vt-tab:nth-child(3).is-active { background: #6fa87d; border-color: #6fa87d; color: #1a1918; }

.ace-vt-nav .ace-vt-tab:nth-child(4) { color: #d4a27f; background: rgba(212,162,127,.12); border-color: rgba(212,162,127,.28); }
.ace-vt-nav .ace-vt-tab:nth-child(4).is-active { background: #d4a27f; border-color: #d4a27f; color: #1a1918; }

.ace-vt-nav .ace-vt-tab:nth-child(5) { color: #a98bc4; background: rgba(169,139,196,.12); border-color: rgba(169,139,196,.28); }
.ace-vt-nav .ace-vt-tab:nth-child(5).is-active { background: #a98bc4; border-color: #a98bc4; color: #1a1918; }

.ace-vt-nav .ace-vt-tab:nth-child(6) { color: #6fa8a0; background: rgba(111,168,160,.12); border-color: rgba(111,168,160,.28); }
.ace-vt-nav .ace-vt-tab:nth-child(6).is-active { background: #6fa8a0; border-color: #6fa8a0; color: #1a1918; }

/* Vertical text is unreadable in a narrow column, so below this width the
   rail goes back to a row of ordinary badges above the video. */
/* Tighter tabs on a narrow screen, so a few months still fit on one row. */
@media (max-width: 680px) {
  .ace-vt-tab { padding: 7px 10px; font-size: .62rem; letter-spacing: .04em; }
}

/* ---------- month colours ----------

   Keyed to the month, not the tab's position, so two September recordings
   share a colour and a viewer can see at a glance which are the same
   sitting. The script reads each label and adds .ace-vt-m1 … .ace-vt-m12.
   These come after the positional rules above and carry the same or higher
   specificity, so they take precedence; a label with no recognisable month
   keeps its positional colour. */

.ace-vt-nav .ace-vt-tab.ace-vt-m1 { color: #7aa2d4; background: rgba(122,162,212,.12); border-color: rgba(122,162,212,.28); }
.ace-vt-nav .ace-vt-tab.ace-vt-m1.is-active { background: #7aa2d4; border-color: #7aa2d4; color: #1a1918; }
.ace-vt-nav .ace-vt-tab.ace-vt-m2 { color: #a98bc4; background: rgba(169,139,196,.12); border-color: rgba(169,139,196,.28); }
.ace-vt-nav .ace-vt-tab.ace-vt-m2.is-active { background: #a98bc4; border-color: #a98bc4; color: #1a1918; }
.ace-vt-nav .ace-vt-tab.ace-vt-m3 { color: #6fa87d; background: rgba(111,168,125,.12); border-color: rgba(111,168,125,.28); }
.ace-vt-nav .ace-vt-tab.ace-vt-m3.is-active { background: #6fa87d; border-color: #6fa87d; color: #1a1918; }
.ace-vt-nav .ace-vt-tab.ace-vt-m4 { color: #d4a27f; background: rgba(212,162,127,.12); border-color: rgba(212,162,127,.28); }
.ace-vt-nav .ace-vt-tab.ace-vt-m4.is-active { background: #d4a27f; border-color: #d4a27f; color: #1a1918; }
.ace-vt-nav .ace-vt-tab.ace-vt-m5 { color: #cc785c; background: rgba(204,120,92,.12); border-color: rgba(204,120,92,.28); }
.ace-vt-nav .ace-vt-tab.ace-vt-m5.is-active { background: #cc785c; border-color: #cc785c; color: #1a1918; }
.ace-vt-nav .ace-vt-tab.ace-vt-m6 { color: #6fa8a0; background: rgba(111,168,160,.12); border-color: rgba(111,168,160,.28); }
.ace-vt-nav .ace-vt-tab.ace-vt-m6.is-active { background: #6fa8a0; border-color: #6fa8a0; color: #1a1918; }
.ace-vt-nav .ace-vt-tab.ace-vt-m7 { color: #c98f8f; background: rgba(201,143,143,.12); border-color: rgba(201,143,143,.28); }
.ace-vt-nav .ace-vt-tab.ace-vt-m7.is-active { background: #c98f8f; border-color: #c98f8f; color: #1a1918; }
.ace-vt-nav .ace-vt-tab.ace-vt-m8 { color: #a8a06f; background: rgba(168,160,111,.12); border-color: rgba(168,160,111,.28); }
.ace-vt-nav .ace-vt-tab.ace-vt-m8.is-active { background: #a8a06f; border-color: #a8a06f; color: #1a1918; }
.ace-vt-nav .ace-vt-tab.ace-vt-m9 { color: #8f9fd4; background: rgba(143,159,212,.12); border-color: rgba(143,159,212,.28); }
.ace-vt-nav .ace-vt-tab.ace-vt-m9.is-active { background: #8f9fd4; border-color: #8f9fd4; color: #1a1918; }
.ace-vt-nav .ace-vt-tab.ace-vt-m10 { color: #c4845c; background: rgba(196,132,92,.12); border-color: rgba(196,132,92,.28); }
.ace-vt-nav .ace-vt-tab.ace-vt-m10.is-active { background: #c4845c; border-color: #c4845c; color: #1a1918; }
.ace-vt-nav .ace-vt-tab.ace-vt-m11 { color: #8fa8b8; background: rgba(143,168,184,.12); border-color: rgba(143,168,184,.28); }
.ace-vt-nav .ace-vt-tab.ace-vt-m11.is-active { background: #8fa8b8; border-color: #8fa8b8; color: #1a1918; }
.ace-vt-nav .ace-vt-tab.ace-vt-m12 { color: #b892c4; background: rgba(184,146,196,.12); border-color: rgba(184,146,196,.28); }
.ace-vt-nav .ace-vt-tab.ace-vt-m12.is-active { background: #b892c4; border-color: #b892c4; color: #1a1918; }

/* ---------- the quizzes card with no ranking ----------

   A ranked quiz gets a panel explaining the board. An unranked one had
   only its title, which made the card look unfinished rather than
   simply unranked. A count and a state give it the same weight as the
   DOWNLOAD PDF and DOWNLOAD VIDEO cards beside it.
   --------------------------------------------------------- */

/* The panel takes the card over, exactly as the ranked notice does, so
   the header and footer LearnDash prints around the list would only
   frame it twice. Written with the class repeated to clear the
   ".ld-primary-background" rule above, which is marked important. */
.ace-topic-aside .ld-table-list.ace-ls-noted.ace-ls-noted > .ld-table-list-header,
.ace-topic-aside .ld-table-list.ace-ls-noted.ace-ls-noted > .ld-table-list-footer {
  display: none !important;
}

/* The panel itself. Every value here is the ranked notice's own, so the
   two read as one design rather than as two plugins that happen to sit
   in the same column. */
.ace-topic-aside .ace-ls-qnote {
  margin: 6px !important;
  padding: 13px 14px !important;
  background: rgba(var(--ace-primary-rgb, 0, 138, 129), .10) !important;
  border: 1px solid rgba(var(--ace-primary-rgb, 0, 138, 129), .32) !important;
  border-left: 3px solid var(--color-primary, #008a81) !important;
  border-radius: 10px !important;
}

/* Icon, heading and count on one line, with the explanation spanning
   the full width underneath. A flex row would indent that paragraph
   under the heading and leave it a few words wide at this column. */
.ace-topic-aside .ace-ls-qnote-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 6px 10px;
}

.ace-topic-aside .ace-ls-qnote-text {
  grid-column: 1 / -1;
  margin: 0 !important;
  font-size: .73rem !important;
  line-height: 1.5 !important;
  color: var(--color-muted, #a39e93) !important;
}

.ace-topic-aside .ace-ls-qnote-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(var(--ace-primary-rgb, 0, 138, 129), .18);
  color: var(--color-primary, #008a81);
}

.ace-topic-aside .ace-ls-qnote-icon svg {
  width: 14px;
  height: 14px;
}

.ace-topic-aside .ace-ls-qnote-title {
  margin: 0 !important;
  font-size: .82rem !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--color-heading, #f5f4ef) !important;
}

.ace-topic-aside .ace-ls-qcount {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: none;
  color: var(--color-muted, #a39e93);
}

/* The quizzes, drawn into the notice under a hairline -- the ranked
   card's own treatment of the row it swallows. */
.ace-topic-aside .ace-ls-qnote-slot .ld-table-list-items {
  margin: 12px 0 0 !important;
  padding: 12px 0 0 !important;
  border-top: 1px solid rgba(var(--ace-primary-rgb, 0, 138, 129), .22);
}

/* Each quiz is its own inset box. The divider between rows goes with
   it: boxes with a gap already read as separate. */
.ace-topic-aside .ace-ls-qnote-slot .ld-table-list-item {
  background: rgba(0, 0, 0, .22) !important;
  border: 1px solid rgba(255, 255, 255, .07) !important;
  border-radius: 8px !important;
}

.ace-topic-aside .ace-ls-qnote-slot .ld-table-list-item + .ld-table-list-item {
  border-top: 1px solid rgba(255, 255, 255, .07) !important;
  margin-top: 8px !important;
}

.ace-topic-aside .ace-ls-qnote-slot .ld-table-list-item-preview {
  padding: 10px 12px !important;
}

/* The row is a flex line -- icon, then title -- so a state span dropped
   in beside the title would become a third flex ITEM and sit to its
   right, squeezing exactly the long names it describes. The script gives
   the two of them a column, and the column takes the rest of the row. */
.ace-topic-aside .ld-table-list-item-preview .ace-ls-qtext {
  flex: 1 1 auto;
  min-width: 0;
}

.ace-topic-aside .ld-table-list-item-preview .ld-item-title {
  display: block !important;
}

/* Written at the same weight as the rule above that paints every span in
   this row at .8rem: that one is three classes deep and marked
   important, so a shorter selector here would lose whatever it said. */
.ace-topic-aside .ld-table-list-item-preview .ace-ls-qstate {
  display: block !important;
  margin-top: 3px !important;
  font-size: .64rem !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  line-height: 1.3 !important;
  text-transform: uppercase !important;
  color: var(--color-muted, #a39e93) !important;
}

/* Completed is the one worth colouring. "Not taken" is the normal
   state for most of a course and does not need to shout. */
.ace-topic-aside .ld-table-list-item-preview .ace-ls-qstate.is-done {
  color: #8dc49a !important;
}

/* Keep the icon at the top of a two-line row rather than centred
   against the title and its state together. */
.ace-topic-aside .ld-table-list-item-preview {
  align-items: flex-start !important;
}

.ace-topic-aside .ld-table-list-item-preview .ld-status-icon {
  margin-top: 1px;
}