/**
 * ACE Sidebar
 *
 * The app's sidebars in the design of the homepage, All Courses, the sign-in
 * page, the lecture page and the Feed: the same charcoal and teal, Poppins
 * over Inter, the programme colours (CE blue, ME-1 green, PE amber, MP cyan)
 * and the 5px bars of the lecture page's sheet index.
 *
 * The markup is the theme's, styled as its three functions print it. Every
 * rule starts at body.ace-player .ace-player-sidebar (or the rail), which is
 * one step heavier than the theme's rule and ACE Wide Layout's rule for the
 * same element, and this file loads after both.
 *
 * Rules carried over from those pages:
 *   - anything given a display value also gets an explicit [hidden] rule;
 *   - teal TEXT uses the lighter teal, white sits on the deeper teal, never
 *     on the raw one;
 *   - nothing waits on a script to be visible. Without sidebar.js this is the
 *     theme's sidebar in these colours: the menu in the theme's order, the
 *     course under it.
 *
 * Three planes, darkest first: the menu, the course, the page. The top bar
 * above them is the theme's and is not touched.
 */

/* ============================================================ tokens */

body.ace-player {
  --asb-menu: #1c1c1a;
  --asb-course: #212120;
  --asb-line: rgba(255, 255, 255, .08);
  --asb-line2: rgba(255, 255, 255, .14);
  --asb-text: var(--color-text, #e8e6dc);
  --asb-head: var(--color-heading, #f5f4ef);
  --asb-muted: var(--color-text-muted, #a39e93);
  --asb-dim: #8e897f;          /* the dimmest words allowed: 4.6:1 on the course's plane */
  --asb-teal: var(--color-primary, #008a81);
  --asb-teal-text: #61b6b1;
  --asb-teal-fill: #007870;
  --asb-t-rgb: 97, 182, 177;
  --asb-warn: #e3a857;
  --asb-warn-rgb: 227, 168, 87;
  --asb-head-font: var(--font-heading, Poppins, system-ui, sans-serif);
  --asb-body-font: var(--font-body, Inter, system-ui, sans-serif);
  --asb-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.9 6.3l2.1 2.1 4.1-4.6'/%3E%3C/svg%3E");
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
  body.ace-player {
    --asb-teal-text: color-mix(in srgb, var(--asb-teal) 62%, #fff);
    --asb-teal-fill: color-mix(in srgb, var(--asb-teal) 87%, #000);
  }
}

/* A course's programme colour; teal until a programme sets its own. */
body.ace-player .ace-player-sidebar { --acc: #61b6b1; --acc-rgb: 97, 182, 177; }

/* The menu's measures: a row, the air above a group's heading, the padding
   round the menu and round the two links at the foot. Set tighter on a short
   window, further down. */
body.ace-player .ace-player-sidebar {
  --asb-row: 34px;
  --asb-row-pad: 7px;
  --asb-group: 16px;
  --asb-group-b: 5px;
  --asb-nav-pad: 12px 10px 14px;
  --asb-foot-pad: 8px 10px 10px;
}
body.ace-player .ace-player-sidebar [data-asb-prog="ce"] { --acc: #86b1e8; --acc-rgb: 134, 177, 232; }
body.ace-player .ace-player-sidebar [data-asb-prog="me"] { --acc: #5ec8b3; --acc-rgb: 94, 200, 179; }
body.ace-player .ace-player-sidebar [data-asb-prog="pe"] { --acc: #f0a04b; --acc-rgb: 240, 160, 75; }
body.ace-player .ace-player-sidebar [data-asb-prog="mp"] { --acc: #5bbfe0; --acc-rgb: 91, 191, 224; }

/* ============================================================ the sidebar */

body.ace-player .ace-player-sidebar {
  background: var(--asb-menu);
  border-right: 1px solid var(--asb-line);
  color: var(--asb-text);
  font-family: var(--asb-body-font);
  color-scheme: dark;
}
body.ace-player .ace-player-sidebar *,
body.ace-player .ace-player-sidebar *::before,
body.ace-player .ace-player-sidebar *::after { box-sizing: border-box; }

/* Words for a screen reader only. Always inside something positioned (the
   lesson's row): left to measure from the page, a line deep in the course
   would lie far below the window and make the whole page scroll. */
body.ace-player .ace-player-sidebar .asb-sr {
  position: absolute !important; top: 0; left: 0; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* One focus ring for everything in the sidebar that takes focus. Drawn inside
   the row: the sidebar clips at its edges, and a ring outside would lose a side. */
body.ace-player .ace-player-sidebar :is(a, button):focus-visible {
  outline: 2px solid var(--asb-teal-text);
  outline-offset: -2px;
}

body.ace-player .ace-player-sidebar > .ace-sidebar-nav,
body.ace-player .ace-player-sidebar > .ace-sidebar-course-tree {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .14) transparent;
}
body.ace-player .ace-player-sidebar > .ace-sidebar-nav::-webkit-scrollbar,
body.ace-player .ace-player-sidebar > .ace-sidebar-course-tree::-webkit-scrollbar { width: 8px; }
body.ace-player .ace-player-sidebar > .ace-sidebar-nav::-webkit-scrollbar-track,
body.ace-player .ace-player-sidebar > .ace-sidebar-course-tree::-webkit-scrollbar-track { background: transparent; }
body.ace-player .ace-player-sidebar > .ace-sidebar-nav::-webkit-scrollbar-thumb,
body.ace-player .ace-player-sidebar > .ace-sidebar-course-tree::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
}

/* ============================================================ the menu */

body.ace-player .ace-player-sidebar > .ace-sidebar-nav {
  padding: var(--asb-nav-pad);
  border-bottom: 1px solid var(--asb-line);
}

body.ace-player .ace-player-sidebar .ace-sidebar-nav-item {
  position: relative;
  gap: 10px;
  min-height: var(--asb-row);
  padding: var(--asb-row-pad) 10px;
  border-radius: 9px;
  color: var(--asb-text);
  font: 600 .8125rem/1.25 var(--asb-body-font);
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
/* One line, whatever the words: a long name is cut short, never wrapped. */
body.ace-player .ace-player-sidebar .ace-sidebar-nav-item > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.ace-player .ace-player-sidebar .ace-sidebar-nav-item > svg {
  width: 17px;
  height: 17px;
  color: var(--asb-muted);
  stroke-width: 1.8;
  transition: color .15s ease;
}

/* The page you are on. The three ways it is marked are drawn as one: by this
   plugin's script (aria-current), by ACE Syllabus (.is-here) and by ACE Mock
   Board Exam and the Wrong Answer Log on their own links (.is-active). */
body.ace-player .ace-player-sidebar .ace-sidebar-nav-item[aria-current],
body.ace-player .ace-player-sidebar .ace-sidebar-nav-item.is-here,
body.ace-player .ace-player-sidebar .ace-sidebar-nav-item.is-active {
  background: rgba(var(--asb-t-rgb), .12);
  box-shadow: none;
  color: var(--asb-head) !important;
}
body.ace-player .ace-player-sidebar .ace-sidebar-nav-item[aria-current]::before,
body.ace-player .ace-player-sidebar .ace-sidebar-nav-item.is-here::before,
body.ace-player .ace-player-sidebar .ace-sidebar-nav-item.is-active::before {
  content: "";
  position: absolute;
  top: calc(var(--asb-row-pad) + 1px);
  bottom: calc(var(--asb-row-pad) + 1px);
  left: -10px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--asb-teal-text);
}
body.ace-player .ace-player-sidebar .ace-sidebar-nav-item[aria-current] > svg,
body.ace-player .ace-player-sidebar .ace-sidebar-nav-item.is-here > svg,
body.ace-player .ace-player-sidebar .ace-sidebar-nav-item.is-active > svg { color: var(--asb-teal-text); }

@media (hover: hover) {
  body.ace-player .ace-player-sidebar .ace-sidebar-nav-item:hover {
    background: rgba(255, 255, 255, .05);
    color: var(--asb-head);
  }
  body.ace-player .ace-player-sidebar .ace-sidebar-nav-item:hover > svg { color: var(--asb-teal-text); }
  body.ace-player .ace-player-sidebar .ace-sidebar-nav-item[aria-current]:hover,
  body.ace-player .ace-player-sidebar .ace-sidebar-nav-item.is-here:hover,
  body.ace-player .ace-player-sidebar .ace-sidebar-nav-item.is-active:hover { background: rgba(var(--asb-t-rgb), .17); }
  body.ace-player .ace-player-sidebar .ace-sidebar-nav-item.is-soon:hover { background: none; color: var(--asb-muted); }
  body.ace-player .ace-player-sidebar .ace-sidebar-nav-item.is-soon:hover > svg { color: var(--asb-muted); }
}
/* The theme can mark an item "Soon" (none is, today): it stays quiet, as the theme draws it. */
body.ace-player .ace-player-sidebar .ace-sidebar-nav-item.is-soon { color: var(--asb-muted); }

/* A group's heading. */
body.ace-player .ace-player-sidebar .asb-label {
  margin: var(--asb-group) 10px var(--asb-group-b);
  color: var(--asb-muted);
  font: 700 .64rem/1.3 var(--asb-body-font);
  letter-spacing: .14em;
  text-transform: uppercase;
}
body.ace-player .ace-player-sidebar .asb-label:first-child { margin-top: 4px; }

/* Homepage and Log Out: there when wanted, quieter than the menu. */
body.ace-player .ace-player-sidebar > .ace-sidebar-footer {
  padding: var(--asb-foot-pad);
  border-top: 1px solid var(--asb-line);
}
body.ace-player .ace-player-sidebar > .ace-sidebar-footer .ace-sidebar-nav-item {
  color: var(--asb-muted);
  font-weight: 500;
}

/* ---------------------------------------------------------------- a short window
   A 1366 x 768 laptop leaves about 650px under the browser's own bars, and
   thirteen items under three headings need 570, with the top bar and the two
   links at the foot above and below them. The menu is set tighter there, in
   two steps, so all of it shows without scrolling: 718px is where it stops
   fitting beside the course, 763px where it stops fitting under the
   Menu | Lessons switch. Not on a touch screen, where a row has to take a
   finger. */

/* Beside the course (ACE Wide Layout, from 1340px). */
@media (min-width: 901px) and (max-height: 719px) and (pointer: fine) {
  body.ace-player .ace-player-sidebar {
    --asb-row: 30px; --asb-row-pad: 5px; --asb-group: 10px; --asb-group-b: 3px;
    --asb-nav-pad: 8px 10px 10px; --asb-foot-pad: 6px 10px 8px;
  }
}
/* Under the switch: a site without ACE Wide Layout, or a window under 1340px. */
@media (min-width: 901px) and (max-height: 764px) and (pointer: fine) {
  body.ace-player:not(.asb-two) .ace-player-sidebar {
    --asb-row: 30px; --asb-row-pad: 5px; --asb-group: 10px; --asb-group-b: 3px;
    --asb-nav-pad: 8px 10px 10px; --asb-foot-pad: 6px 10px 8px;
  }
}
@media (min-width: 901px) and (max-width: 1339.98px) and (max-height: 764px) and (pointer: fine) {
  body.ace-player .ace-player-sidebar {
    --asb-row: 30px; --asb-row-pad: 5px; --asb-group: 10px; --asb-group-b: 3px;
    --asb-nav-pad: 8px 10px 10px; --asb-foot-pad: 6px 10px 8px;
  }
}
/* The second step, the same three ways. */
@media (min-width: 901px) and (max-height: 622px) and (pointer: fine) {
  body.ace-player .ace-player-sidebar {
    --asb-row: 28px; --asb-row-pad: 4px; --asb-group: 8px; --asb-group-b: 2px;
    --asb-nav-pad: 6px 10px 8px; --asb-foot-pad: 4px 10px 6px;
  }
}
@media (min-width: 901px) and (max-height: 667px) and (pointer: fine) {
  body.ace-player:not(.asb-two) .ace-player-sidebar {
    --asb-row: 28px; --asb-row-pad: 4px; --asb-group: 8px; --asb-group-b: 2px;
    --asb-nav-pad: 6px 10px 8px; --asb-foot-pad: 4px 10px 6px;
  }
}
@media (min-width: 901px) and (max-width: 1339.98px) and (max-height: 667px) and (pointer: fine) {
  body.ace-player .ace-player-sidebar {
    --asb-row: 28px; --asb-row-pad: 4px; --asb-group: 8px; --asb-group-b: 2px;
    --asb-nav-pad: 6px 10px 8px; --asb-foot-pad: 4px 10px 6px;
  }
}

/* ============================================================ Menu | Lessons
   Where the menu and the course are one column, each gets the whole height
   in turn. The switch is put in by the script; without it both show, the
   course under the menu, as the theme has them. */

body.ace-player .ace-player-sidebar > .asb-tabs {
  flex: none;
  display: flex;
  padding: 0 10px;
  border-bottom: 1px solid var(--asb-line);
}

body.ace-player .ace-player-sidebar .asb-tab {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 44px;
  padding: 0 8px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--asb-muted);
  font: 600 .8125rem/1 var(--asb-body-font);
  cursor: pointer;
  transition: color .15s ease;
}
body.ace-player .ace-player-sidebar .asb-tab::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: -1px;
  left: 12px;
  height: 2px;
  border-radius: 2px;
  background: transparent;
}
body.ace-player .ace-player-sidebar .asb-tab[aria-pressed="true"] { color: var(--asb-head); }
body.ace-player .ace-player-sidebar .asb-tab[aria-pressed="true"]::after { background: var(--asb-teal-text); }
body.ace-player .ace-player-sidebar .asb-tab:focus-visible { outline-offset: -4px; }
@media (hover: hover) {
  body.ace-player .ace-player-sidebar .asb-tab:hover { color: var(--asb-text); }
  body.ace-player .ace-player-sidebar .asb-tab[aria-pressed="true"]:hover { color: var(--asb-head); }
}

body.ace-player .ace-player-sidebar[data-asb-view="menu"] > .ace-sidebar-course-tree,
body.ace-player .ace-player-sidebar[data-asb-view="lessons"] > .ace-sidebar-nav { display: none; }

/* The one that shows takes the height and scrolls on its own. So does the
   menu of an account with no course (or of a page whose course box the theme
   printed empty): it is all there is, and on a phone it is taller than the
   drawer. The empty box is put away. */
body.ace-player .ace-player-sidebar[data-asb-view] > .ace-sidebar-nav,
body.ace-player .ace-player-sidebar[data-asb-tree="0"] > .ace-sidebar-nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  border-bottom: 0;
}
body.ace-player .ace-player-sidebar[data-asb-tree="0"] > .ace-sidebar-course-tree { display: none; }

/* Side by side (ACE Wide Layout, from 1340px): no switch, both showing. */
@media (min-width: 1340px) {
  body.asb-two.ace-player .ace-player-sidebar > .asb-tabs { display: none; }
  body.asb-two.ace-player .ace-player-sidebar[data-asb-view] > .ace-sidebar-nav,
  body.asb-two.ace-player .ace-player-sidebar[data-asb-view] > .ace-sidebar-course-tree { display: block; }

  body.asb-two.ace-player .ace-player-sidebar > .ace-sidebar-nav { border-bottom: 0; }
  body.asb-two.ace-player .ace-player-sidebar > .ace-sidebar-course-tree { border-left: 1px solid var(--asb-line); }

  /* The course's column is the narrow one here (230px at 1440), so its rows
     are set a little tighter than where it has the sidebar to itself. */
  body.asb-two.ace-player .ace-player-sidebar .ace-sidebar-course-tree .ace-lesson-toggle {
    gap: 8px;
    padding: 7px 8px 7px 12px;
  }
  body.asb-two.ace-player .ace-player-sidebar .ace-lesson-link,
  body.asb-two.ace-player .ace-player-sidebar .ace-lesson-group.is-open .ace-lesson-link { font-size: .76rem; }
  body.asb-two.ace-player .ace-player-sidebar .ace-sidebar-course-tree .ace-topic-list { margin-left: 18px; }
  body.asb-two.ace-player .ace-player-sidebar .ace-sidebar-course-tree .ace-topic-link,
  body.asb-two.ace-player .ace-player-sidebar .ace-sidebar-course-tree .ace-quiz-link {
    padding: 5px 7px;
    font-size: .75rem;
  }
  body.asb-two.ace-player .ace-player-sidebar .ace-sidebar-header { padding: 14px 12px 12px; }

  /* A student with no course yet has no second column: ACE Wide Layout kept
     its width, empty. */
  body.asb-two.ace-player .ace-player-sidebar[data-asb-tree="0"] {
    display: flex;
    width: 260px;
  }
  body.asb-two.ace-player .ace-player-sidebar[data-asb-tree="0"] > .ace-sidebar-nav { flex: 1 1 auto; min-height: 0; }
}

/* ============================================================ the course */

body.ace-player .ace-player-sidebar > .ace-sidebar-course-tree {
  padding: 0 0 26px;
  background: var(--asb-course);
}

/* The course's name and how far it has got stay at the top while its lessons
   scroll underneath. */
body.ace-player .ace-player-sidebar .ace-sidebar-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 8px;
  align-items: start;
  margin: 0 0 6px;
  padding: 15px 14px 13px;
  border-bottom: 1px solid var(--asb-line);
  background: var(--asb-course);
}
body.ace-player .ace-player-sidebar .ace-sidebar-header > * { grid-column: 1 / -1; }
body.ace-player .ace-player-sidebar .ace-sidebar-header > .ace-sidebar-course-title { grid-column: 1; }

body.ace-player .ace-player-sidebar .ace-sidebar-course-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 11px;
  color: var(--asb-head);
  font: 700 .92rem/1.25 var(--asb-head-font);
  letter-spacing: -.01em;
  text-decoration: none;
}
@media (hover: hover) {
  body.ace-player .ace-player-sidebar .ace-sidebar-course-title:hover { color: var(--acc); }
}

/* The programme's badge: CE, ME-1, PE, MP. */
body.ace-player .ace-player-sidebar .ace-sidebar-course-title[data-asb-abbr]::before,
body.ace-player .ace-player-sidebar .asb-badge {
  flex: none;
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 18px;
  padding: 0 5px;
  border: 1px solid rgba(var(--acc-rgb), .32);
  border-radius: 5px;
  background: rgba(var(--acc-rgb), .1);
  color: var(--acc);
  font: 700 .58rem/1 var(--asb-body-font);
  letter-spacing: .06em;
}
body.ace-player .ace-player-sidebar .ace-sidebar-course-title[data-asb-abbr]::before { content: attr(data-asb-abbr); }

body.ace-player .ace-player-sidebar .ace-sidebar-progress-track {
  height: 5px;
  margin: 0 0 7px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .1);
}
body.ace-player .ace-player-sidebar .ace-sidebar-progress-fill {
  border-radius: 3px;
  background: rgba(var(--asb-t-rgb), .75);
}
body.ace-player .ace-player-sidebar .ace-sidebar-progress-label {
  color: var(--asb-muted);
  font-size: .7rem;
  line-height: 1.3;
}

/* A bar for each lesson, as on the lecture page's sheet index: done, part
   done (filled as far as it has got), not started. The one being read is
   ringed in the programme's colour. It stands in for the theme's single bar,
   whose number stays underneath. */
body.ace-player .ace-player-sidebar .ace-sidebar-header[data-asb-segs] .ace-sidebar-progress-track { display: none; }
body.ace-player .ace-player-sidebar .asb-segs {
  display: flex;
  gap: 3px;
  margin: 0 0 7px;
}
body.ace-player .ace-player-sidebar .asb-segs.is-many { gap: 2px; }
body.ace-player .ace-player-sidebar .asb-seg {
  flex: 1 1 0;
  min-width: 0;
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .1);
}
body.ace-player .ace-player-sidebar .asb-seg.is-done { background: rgba(var(--asb-t-rgb), .75); }
body.ace-player .ace-player-sidebar .asb-seg.is-part {
  background: linear-gradient(90deg, rgba(var(--asb-t-rgb), .75) var(--p, 50%), rgba(255, 255, 255, .1) var(--p, 50%));
}
body.ace-player .ace-player-sidebar .asb-seg.is-here { outline: 1.5px solid var(--acc); outline-offset: 1.5px; }

/* The student's other courses: a small button beside the course's name opens
   the list. */
body.ace-player .ace-player-sidebar .ace-sidebar-header > .asb-switch {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin: -2px -4px 0 0;
  padding: 0;
  border: 1px solid var(--asb-line2);
  border-radius: 7px;
  background: rgba(255, 255, 255, .04);
  color: var(--asb-muted);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
body.ace-player .ace-player-sidebar .asb-switch > svg { width: 14px; height: 14px; }
body.ace-player .ace-player-sidebar .asb-switch[aria-expanded="true"] {
  border-color: rgba(var(--acc-rgb), .5);
  background: rgba(var(--acc-rgb), .12);
  color: var(--acc);
}
body.ace-player .ace-player-sidebar .asb-switch:focus-visible { outline-offset: 2px; }
@media (hover: hover) {
  body.ace-player .ace-player-sidebar .asb-switch:hover { background: rgba(255, 255, 255, .09); color: var(--asb-head); }
}

body.ace-player .ace-player-sidebar .asb-others {
  display: grid;
  gap: 1px;
  margin: 12px 0 -4px;
  padding: 10px 0 0;
  border-top: 1px solid var(--asb-line);
}
body.ace-player .ace-player-sidebar .asb-others[hidden] { display: none; }
body.ace-player .ace-player-sidebar .asb-others-label {
  margin: 0 0 3px;
  color: var(--asb-muted);
  font: 700 .62rem/1.3 var(--asb-body-font);
  letter-spacing: .13em;
  text-transform: uppercase;
}
body.ace-player .ace-player-sidebar .asb-other {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  margin: 0 -7px;
  padding: 4px 7px;
  border-radius: 8px;
  color: var(--asb-text);
  font: 500 .76rem/1.3 var(--asb-body-font);
  text-decoration: none;
  transition: background-color .15s ease;
}
body.ace-player .ace-player-sidebar .asb-other-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.ace-player .ace-player-sidebar .asb-other-pct {
  flex: none;
  color: var(--asb-muted);
  font-size: .7rem;
  font-variant-numeric: tabular-nums;
}
@media (hover: hover) {
  body.ace-player .ace-player-sidebar .asb-other:hover { background: rgba(255, 255, 255, .05); color: var(--asb-head); }
}

/* ---------------------------------------------------------------- lessons */

body.ace-player .ace-player-sidebar .ace-lesson-group { margin: 0; border-bottom: 0; }

/* Every lesson is open by default (ACE Wide Layout opens them), so an open
   lesson is not the one to pick out. The one holding the page being read is. */
body.ace-player .ace-player-sidebar .ace-sidebar-course-tree .ace-lesson-toggle {
  position: relative;
  align-items: flex-start;
  gap: 9px;
  padding: 8px 10px 8px 14px;
  border-left: 0;
  background: none;
  font-size: .78rem;
  line-height: 1.35;
  transition: background-color .15s ease;
}
body.ace-player .ace-player-sidebar .ace-sidebar-course-tree .ace-lesson-group.is-open .ace-lesson-toggle {
  border-left: 0;
  background: none;
}
@media (hover: hover) {
  body.ace-player .ace-player-sidebar .ace-sidebar-course-tree .ace-lesson-toggle:hover { background: rgba(255, 255, 255, .035); }
}

body.ace-player .ace-player-sidebar .ace-lesson-link,
body.ace-player .ace-player-sidebar .ace-lesson-group.is-open .ace-lesson-link {
  color: var(--asb-text);
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
  text-decoration: none;
  overflow-wrap: anywhere;
}
body.ace-player .ace-player-sidebar .ace-lesson-group[data-asb-here] .ace-lesson-link { color: var(--asb-head); }
body.ace-player .ace-player-sidebar .ace-lesson-link.is-active { color: var(--asb-teal-text) !important; }
@media (hover: hover) {
  body.ace-player .ace-player-sidebar .ace-lesson-link:hover { color: var(--asb-teal-text) !important; }
}

body.ace-player .ace-player-sidebar .ace-sidebar-course-tree .ace-lesson-caret {
  flex: none;
  width: 13px;
  height: 13px;
  margin-top: 3px;
  color: var(--asb-muted);
  opacity: .7;
}

/* A course with no lessons in it yet: the script leaves the words to say so. */
body.ace-player .ace-player-sidebar .ace-sidebar-tree[data-asb-empty]::after {
  content: attr(data-asb-empty);
  display: block;
  padding: 16px 16px 0;
  color: var(--asb-muted);
  font-size: .8rem;
  line-height: 1.5;
}

/* ---------------------------------------------------------------- topics and quizzes */

body.ace-player .ace-player-sidebar .ace-sidebar-course-tree .ace-topic-list {
  gap: 1px;
  margin: 0 8px 8px 20px;
  padding: 0 0 0 7px;
  border-left: 1px solid var(--asb-line);
}

body.ace-player .ace-player-sidebar .ace-sidebar-course-tree .ace-topic-link,
body.ace-player .ace-player-sidebar .ace-sidebar-course-tree .ace-quiz-link {
  align-items: flex-start;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  color: var(--asb-muted);
  font-size: .76rem;
  font-weight: 500;
  line-height: 1.35;
  opacity: 1;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: background-color .15s ease, color .15s ease;
}
@media (hover: hover) {
  body.ace-player .ace-player-sidebar .ace-sidebar-course-tree .ace-topic-link:hover,
  body.ace-player .ace-player-sidebar .ace-sidebar-course-tree .ace-quiz-link:hover {
    background: rgba(255, 255, 255, .045);
    color: var(--asb-text);
  }
}
body.ace-player .ace-player-sidebar .ace-sidebar-course-tree .ace-topic-link.is-active,
body.ace-player .ace-player-sidebar .ace-sidebar-course-tree .ace-quiz-link.is-active {
  background: rgba(var(--asb-t-rgb), .13);
  color: var(--asb-head) !important;
  font-weight: 600;
}

body.ace-player .ace-player-sidebar .ace-quiz-icon {
  flex: none;
  width: 13px;
  height: 13px;
  margin-top: 2px;
  color: var(--asb-muted);
}

/* Where the student left off, on a page that is not a lecture. */
body.ace-player .ace-player-sidebar [data-asb-last]::after {
  content: attr(data-asb-last);
  flex: none;
  align-self: flex-start;
  margin-left: auto;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(var(--acc-rgb), .13);
  color: var(--acc);
  font: 700 .6rem/1.75 var(--asb-body-font);
  letter-spacing: .05em;
  text-transform: uppercase;
}
body.ace-player .ace-player-sidebar .ace-lesson-link[data-asb-last]::after {
  display: inline-block;
  margin-left: 7px;
  vertical-align: 1px;
}
/* The row is inside a lesson that is shut (the theme prints every lesson shut
   on pages that are not a lecture; ACE Wide Layout opens them): the lesson
   carries the tag until it is opened. */
body.ace-player .ace-player-sidebar .ace-lesson-group:not(.is-open) > .ace-lesson-toggle .ace-lesson-link[data-asb-holds]::after {
  content: attr(data-asb-holds);
  display: inline-block;
  margin-left: 7px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(var(--acc-rgb), .13);
  color: var(--acc);
  font: 700 .6rem/1.75 var(--asb-body-font);
  letter-spacing: .05em;
  text-transform: uppercase;
  vertical-align: 1px;
}
body.ace-player .ace-player-sidebar .ace-sidebar-course-tree :is(.ace-topic-link, .ace-quiz-link)[data-asb-last] { color: var(--asb-text); }

/* ---------------------------------------------------------------- done, locked, free */

body.ace-player .ace-player-sidebar .ace-sidebar-course-tree .ace-status-dot {
  width: 14px;
  height: 14px;
  margin-top: 2px;
  border: 1.5px solid rgba(255, 255, 255, .26);
}
body.ace-player .ace-player-sidebar .ace-sidebar-course-tree .ace-lesson-group.is-open > .ace-lesson-toggle .ace-status-dot { border-color: rgba(255, 255, 255, .26); }
body.ace-player .ace-player-sidebar .ace-sidebar-course-tree .ace-status-dot.is-complete,
body.ace-player .ace-player-sidebar .ace-sidebar-course-tree .ace-lesson-group.is-open > .ace-lesson-toggle .ace-status-dot.is-complete {
  border-color: var(--asb-teal-fill);
  background: var(--asb-teal-fill) var(--asb-tick) center / 10px 10px no-repeat;
}
/* A lesson part done: the dot is a ring, filled as far round as the lesson
   has got. The script says how far; without it the dot is the theme's. */
body.ace-player .ace-player-sidebar .ace-sidebar-course-tree .ace-lesson-toggle .ace-status-dot[data-asb-ring] {
  border: 0;
  background: conic-gradient(var(--asb-teal-text) var(--asb-p, 0%), rgba(255, 255, 255, .2) 0);
  -webkit-mask: radial-gradient(circle closest-side, transparent calc(100% - 2.6px), #000 calc(100% - 2.1px));
          mask: radial-gradient(circle closest-side, transparent calc(100% - 2.6px), #000 calc(100% - 2.1px));
}
/* The theme's tick is a letter; this one is drawn. */
body.ace-player .ace-player-sidebar .ace-sidebar-course-tree .ace-status-dot.is-complete::after { content: none; }

/* Locked on the free plan. The theme fades the whole row to 60%, which takes
   its words below what reads comfortably. Here the row is a shade dimmer than
   an open one, still clear of 4.5:1, and the lock says the rest. */
body.ace-player .ace-player-sidebar .ace-sidebar-course-tree :is(.ace-topic-link, .ace-quiz-link).is-locked { color: var(--asb-dim); }
body.ace-player .ace-player-sidebar .ace-sidebar-course-tree :is(.ace-topic-link, .ace-quiz-link).is-locked .ace-status-dot { border-color: rgba(255, 255, 255, .15); }
body.ace-player .ace-player-sidebar .ace-sidebar-course-tree :is(.ace-topic-link, .ace-quiz-link).is-locked .ace-quiz-icon { color: var(--asb-dim); }
@media (hover: hover) {
  body.ace-player .ace-player-sidebar .ace-sidebar-course-tree :is(.ace-topic-link, .ace-quiz-link).is-locked:hover { color: var(--asb-text); opacity: 1; }
}
body.ace-player .ace-player-sidebar .ace-lock-icon { margin-top: 2px; color: var(--asb-muted); opacity: 1; }
body.ace-player .ace-player-sidebar .ace-free-tag {
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(var(--asb-t-rgb), .14);
  color: var(--asb-teal-text);
  font: 700 .6rem/1.75 var(--asb-body-font);
  letter-spacing: .05em;
}
body.ace-player .ace-player-sidebar .ace-sidebar-course-tree :is(.ace-topic-link, .ace-quiz-link).is-free-preview { background: rgba(var(--asb-t-rgb), .06); }
@media (hover: hover) {
  body.ace-player .ace-player-sidebar .ace-sidebar-course-tree :is(.ace-topic-link, .ace-quiz-link).is-free-preview:hover { background: rgba(var(--asb-t-rgb), .11); }
}

/* ============================================================ the phone and tablet drawer
   The theme slides the sidebar in from the left at 900px and under. Shut, it
   was only moved off the screen: its links still took the Tab key, one after
   another, with nothing to see. Shut now means hidden, once it has slid away. */

@media (max-width: 900px) {
  body.ace-player .ace-player-sidebar {
    width: min(86vw, 320px);
    visibility: hidden;
    box-shadow: 18px 0 44px rgba(0, 0, 0, .42);
    transition: transform .22s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .22s;
  }
  body.ace-player .ace-player-sidebar.is-open {
    visibility: visible;
    transition-delay: 0s;
  }
  body.ace-player .ace-sidebar-backdrop { background: rgba(12, 12, 11, .62); }
}

/* A finger needs more than a pointer does. */
@media (pointer: coarse) {
  body.ace-player .ace-player-sidebar .ace-sidebar-nav-item { min-height: 42px; font-size: .9rem; }
  body.ace-player .ace-player-sidebar .ace-sidebar-nav-item > svg { width: 19px; height: 19px; }
  body.ace-player .ace-player-sidebar .asb-tab { height: 48px; font-size: .9rem; }
  body.ace-player .ace-player-sidebar .asb-label { margin-top: 18px; font-size: .68rem; }
  body.ace-player .ace-player-sidebar .asb-other { min-height: 40px; font-size: .84rem; }
  body.ace-player .ace-player-sidebar .ace-sidebar-header > .asb-switch { width: 34px; height: 34px; margin-top: -6px; border-radius: 9px; }
  body.ace-player .ace-player-sidebar .ace-sidebar-course-tree .ace-lesson-toggle { padding-top: 11px; padding-bottom: 11px; }
  body.ace-player .ace-player-sidebar .ace-lesson-link,
  body.ace-player .ace-player-sidebar .ace-lesson-group.is-open .ace-lesson-link { font-size: .88rem; }
  body.ace-player .ace-player-sidebar .ace-sidebar-course-tree .ace-topic-link,
  body.ace-player .ace-player-sidebar .ace-sidebar-course-tree .ace-quiz-link {
    padding-top: 9px;
    padding-bottom: 9px;
    font-size: .86rem;
  }
  body.ace-player .ace-player-sidebar .ace-sidebar-course-title { font-size: 1rem; }
}

/* ============================================================ under the WordPress toolbar
   Staff (administrators, lecturers, account managers) keep WordPress's
   toolbar on the site; students never see it. The theme's app shell is
   measured for a window without it: the full height, a 60px top bar. With
   the toolbar the shell starts that much lower, so the foot of the sidebar
   (Log Out) and of the page fell below the window, and on a phone the drawer
   opened over the menu button that shuts it. The shell is made the toolbar's
   height shorter, and the drawer starts under the top bar. WordPress says
   how tall its toolbar is (32px, 46px on a phone). */
body.admin-bar.ace-player { height: calc(100vh - var(--wp-admin--admin-bar--height, 32px)); }
body.admin-bar.ace-player .ace-player-body { height: calc(100vh - 60px - var(--wp-admin--admin-bar--height, 32px)); }
@media (max-width: 900px) {
  body.admin-bar.ace-player .ace-player-sidebar,
  body.admin-bar.ace-player .ace-sidebar-backdrop { top: calc(60px + var(--wp-admin--admin-bar--height, 46px)); }
}

@media (prefers-reduced-motion: reduce) {
  /* Nothing eases: "none", not a very short time, so a row that had no
     transition is not given one (its focus ring would ease in with it). */
  body.ace-player .ace-player-sidebar,
  body.ace-player .ace-player-sidebar *,
  body.ace-player .ace-player-sidebar *::before,
  body.ace-player .ace-player-sidebar *::after { transition: none !important; }
}

/* ============================================================ the activity rail
   ACE Wide Layout's list of what the student did last, from 1660px. A margin
   beside the page, not a stack of boxes: rows on hairlines. */

@media (min-width: 1660px) {
  body.ace-player .ace-wide-rail {
    padding: 26px 20px 60px;
    border-left: 1px solid var(--asb-line);
    background: var(--color-bg, #262624);
    font-family: var(--asb-body-font);
  }
  body.ace-player .ace-wide-rail .ace-wide-rail-title {
    margin: 0 0 8px;
    color: var(--asb-head);
    font: 700 .82rem/1.3 var(--asb-body-font);
    letter-spacing: 0;
    text-transform: none;
  }
  body.ace-player .ace-wide-rail .ace-wide-rail-empty { color: var(--asb-muted); font-size: .8rem; }

  body.ace-player .ace-wide-rail .ace-history-list { gap: 0; }
  body.ace-player .ace-wide-rail .ace-history-item {
    gap: 11px;
    padding: 12px 0;
    border: 0;
    border-top: 1px solid var(--asb-line);
    border-radius: 0;
    background: none;
  }
  body.ace-player .ace-wide-rail .ace-history-item:first-child { border-top: 0; }

  body.ace-player .ace-wide-rail .ace-history-icon,
  body.ace-player .ace-wide-rail .ace-history-quiz .ace-history-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .05);
    color: var(--asb-muted);
  }
  /* A quiz passed in teal, one not passed in amber. The words say it too. */
  body.ace-player .ace-wide-rail .ace-history-item[data-asb-result="pass"] .ace-history-icon {
    background: rgba(var(--asb-t-rgb), .12);
    color: var(--asb-teal-text);
  }
  body.ace-player .ace-wide-rail .ace-history-item[data-asb-result="fail"] .ace-history-icon {
    background: rgba(var(--asb-warn-rgb), .12);
    color: var(--asb-warn);
  }

  body.ace-player .ace-wide-rail .ace-history-item-desc {
    color: var(--asb-text);
    font-size: .78rem;
    line-height: 1.45;
  }
  body.ace-player .ace-wide-rail .ace-history-item-date {
    margin-top: 3px;
    color: var(--asb-muted);
    font-size: .68rem;
  }
}