/**
 * ACE Top Bar
 *
 * The app's top bar in the design of the homepage, All Courses, the sign-in
 * page, the lecture page, the Feed, the Dashboard and the sidebars: the same
 * charcoal and teal, Poppins over Inter, the programme colours (CE blue,
 * ME-1 green, PE amber, MP cyan).
 *
 * The markup is the theme's, styled as its function prints it. Every rule
 * starts at body.ace-player, and nearly all at body.ace-player
 * .ace-player-topbar, which is heavier than the theme's rule and ACE XP's
 * rule for the same element; this file is printed after both. ACE
 * Notification Panel's rules for the bell carry !important and are left to
 * it.
 *
 * One row, 60px, at every width. As the row runs short things give way in a
 * fixed order (set out above "narrower rows", below). A control is never cut
 * off and never pushed out of the window.
 *
 * Three things this file must never do, each learned from what is inside
 * the bar:
 *   - give .ace-player-topbar or .ace-topbar-profile a transform, a filter, a
 *     backdrop-filter, contain, container-type or will-change. The Edit
 *     Profile window and the bell's panel are position:fixed inside them, and
 *     any of those would make them measure from the bar, not the window;
 *   - give either of them a z-index. The window (z-index 1001) has to stand
 *     above the phone menu (999), which is outside the bar;
 *   - change the bar's height. The theme and ACE Sidebar both size the page
 *     under it from 60px.
 *
 * Rules carried over from the other pages:
 *   - the hidden attribute always hides (one rule, just below the bar's);
 *   - teal TEXT uses the lighter teal, white sits on the deeper teal, never
 *     on the raw one, and a hover goes deeper still, not lighter;
 *   - nothing waits on a script to be visible.
 */

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

body.ace-player {
  --atb-bar: #1c1c1a;                 /* the menu's plane: bar and menu read as one frame */
  --atb-line: rgba(255, 255, 255, .08);
  --atb-line2: rgba(255, 255, 255, .14);
  --atb-text: var(--color-text, #e8e6dc);
  --atb-head: var(--color-heading, #f5f4ef);
  --atb-muted: var(--color-text-muted, #a39e93);
  --atb-teal: var(--color-primary, #008a81);
  --atb-teal-text: #61b6b1;           /* teal words and rings on charcoal */
  --atb-teal-fill: #007870;           /* under white words */
  --atb-teal-deep: #006c65;           /* the same, with the pointer on it */
  --atb-ring: rgba(97, 182, 177, .5);
  --atb-wash: rgba(97, 182, 177, .06);
  --atb-halo: rgba(97, 182, 177, .2);
  --atb-warn: #e3a857;
  --atb-warn-rgb: 227, 168, 87;
  --atb-head-font: var(--font-heading, Poppins, system-ui, sans-serif);
  --atb-body-font: var(--font-body, Inter, system-ui, sans-serif);
  --atb-gap: 10px;
}

/* The same six from the site's accent, so a change of accent carries here. */
@supports (color: color-mix(in srgb, red 50%, blue)) {
  body.ace-player {
    --atb-teal-text: color-mix(in srgb, var(--atb-teal) 62%, #fff);
    --atb-teal-fill: color-mix(in srgb, var(--atb-teal) 87%, #000);
    --atb-teal-deep: color-mix(in srgb, var(--atb-teal) 78%, #000);
    --atb-ring: color-mix(in srgb, var(--atb-teal-text) 50%, transparent);
    --atb-wash: color-mix(in srgb, var(--atb-teal-text) 6%, transparent);
    --atb-halo: color-mix(in srgb, var(--atb-teal-text) 20%, transparent);
  }
}

/* ============================================================ the bar */

body.ace-player .ace-player-topbar {
  gap: var(--atb-gap);
  padding: 0 20px;
  background: var(--atb-bar);
  border-bottom: 1px solid var(--atb-line);
  color: var(--atb-text);
  font-family: var(--atb-body-font);
  color-scheme: dark;
  /* The row is measured for these words at this size; a phone turned on its
     side does not get to enlarge them by itself. Zooming the page still does. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Hidden means hidden, whatever display a rule here gives the element. */
body.ace-player .ace-player-topbar [hidden] { display: none !important; }

/* One focus ring for everything in the bar that takes focus. */
body.ace-player .ace-player-topbar :is(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--atb-teal-text);
  outline-offset: 2px;
}
/* Inside the bell's panel the rows run edge to edge in a box that clips: the
   ring is drawn inside the row, or it would lose its sides. */
body.ace-player .ace-player-topbar .ace-feed-bell-panel :is(a, button):focus-visible { outline-offset: -2px; }

/* ------------------------------------------------------------ menu button (900px and under) */

body.ace-player .ace-player-topbar .ace-sidebar-toggle {
  flex: none;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  margin: 0 -2px 0 -8px;
  padding: 0;
  border-radius: 10px;
  color: var(--atb-head);
  place-items: center;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s ease;
}
body.ace-player .ace-player-topbar .ace-sidebar-toggle svg { display: block; width: 22px; height: 22px; overflow: visible; }

/* Open, the three lines cross. The button is told it is open by ACE Sidebar,
   or by this plugin's script where that is not active. */
body.ace-player .ace-player-topbar .ace-sidebar-toggle svg line {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .2s ease, opacity .14s ease;
}
body.ace-player .ace-player-topbar .ace-sidebar-toggle[aria-expanded="true"] svg line:nth-child(1) { opacity: 0; }
body.ace-player .ace-player-topbar .ace-sidebar-toggle[aria-expanded="true"] svg line:nth-child(2) { transform: translateY(6px) rotate(45deg); }
body.ace-player .ace-player-topbar .ace-sidebar-toggle[aria-expanded="true"] svg line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (hover: hover) {
  body.ace-player .ace-player-topbar .ace-sidebar-toggle:hover { background: rgba(255, 255, 255, .06); }
}

/* ------------------------------------------------------------ back to the Dashboard (lecture pages) */

body.ace-player .ace-player-topbar .ace-player-back {
  flex: none;
  box-sizing: border-box;
  height: 36px;
  margin-left: -8px;
  padding: 0 12px 0 8px;
  gap: 7px;
  border-radius: 10px;
  color: var(--atb-muted);
  font: 600 .8125rem/1 var(--atb-body-font);
  text-decoration: none;
  transition: color .15s ease, background .15s ease;
}
body.ace-player .ace-player-topbar .ace-player-back svg { flex: none; width: 17px; height: 17px; }
/* The theme turns it the raw accent on hover, on a touch screen too. */
body.ace-player .ace-player-topbar .ace-player-back:hover { color: var(--atb-muted); }
@media (hover: hover) {
  body.ace-player .ace-player-topbar .ace-player-back:hover { color: var(--atb-head); background: rgba(255, 255, 255, .05); }
}

/* A hairline between the way back and the student. Painted on the box that
   follows, so the bar gains no element. */
body.ace-player .ace-player-topbar .ace-player-back + .ace-topbar-profile {
  padding-left: 14px;
  background: linear-gradient(var(--atb-line2), var(--atb-line2)) left center / 1px 22px no-repeat;
}

/* ------------------------------------------------------------ the student */

/* The theme clips this box. Nothing in it is cut off any more, and clipping
   took the top of the bell's unread count and every focus ring's edge. */
body.ace-player .ace-player-topbar .ace-topbar-profile {
  flex: 1 1 0%;
  min-width: 0;
  gap: var(--atb-gap);
  overflow: visible;
}

/* What pushes Continue, the nudge and the bell to the right, whichever of
   them the account has. It takes whatever room is over, and none when there
   is none. */
body.ace-player .ace-player-topbar .ace-topbar-profile::before {
  content: "";
  order: 1;
  flex: 1 1 0px;
  min-width: 0;
}
body.ace-player .ace-player-topbar .ace-topbar-resume,
body.ace-player .ace-player-topbar .ace-topbar-student-code,
body.ace-player .ace-player-topbar .ace-feed-bell-wrap { order: 2; }

/* The picture: Edit Profile. */
body.ace-player .ace-player-topbar .ace-topbar-avatar-btn {
  flex: none;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-left: -2px;
  border-radius: 50%;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
  transition: box-shadow .15s ease;
}
body.ace-player .ace-player-topbar .ace-topbar-avatar-btn .ace-topbar-avatar {
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  background: #2b2b29;      /* a quiet disc while the picture loads, or if it never does */
  color: transparent;
}
body.ace-player .ace-player-topbar .ace-topbar-avatar-btn:hover { box-shadow: none; }
body.ace-player .ace-player-topbar .ace-topbar-avatar-btn[aria-expanded="true"] { box-shadow: inset 0 0 0 1.5px var(--atb-teal-text); }
@media (hover: hover) {
  body.ace-player .ace-player-topbar .ace-topbar-avatar-btn:hover { box-shadow: inset 0 0 0 1.5px var(--atb-teal-text); }
}

/* The name: the Dashboard. The last thing to shorten: Continue's lecture and
   the badges give way first (the three shrink at very different rates, which
   is what makes them take turns). */
body.ace-player .ace-player-topbar .ace-topbar-name {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  padding: 4px 0;
  border-radius: 5px;
  color: var(--atb-head);
  font: 600 .84375rem/1.3 var(--atb-head-font);
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.ace-player .ace-player-topbar .ace-topbar-name:hover { color: var(--atb-head); }
@media (hover: hover) {
  body.ace-player .ace-player-topbar .ace-topbar-name:hover { color: var(--atb-teal-text); }
}

/* ------------------------------------------------------------ tags and badges */

/* One look for both of the theme's kinds: a role's tag and a course's pill.
   Left as the theme prints them they are a staff role (LECTURER) and a
   course of no programme the site knows, in quiet grey. The few rules
   written for the account turn the rest into programme badges: the colour,
   and the letters in place of the words. */
body.ace-player .ace-player-topbar .ace-topbar-profile > .ace-topbar-badge,
body.ace-player .ace-player-topbar .ace-topbar-courses > .ace-topbar-course-pill {
  flex: none;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 20px;
  padding: 0 6px;
  border: 1px solid var(--atb-line2);
  border-radius: 5px;
  background: rgba(255, 255, 255, .04);
  color: var(--atb-muted);
  font: 700 .6rem/1 var(--atb-body-font);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* The letters, where the account's rules put them in place of the words. */
body.ace-player .ace-player-topbar .ace-topbar-profile > .ace-topbar-badge::before,
body.ace-player .ace-player-topbar .ace-topbar-courses > .ace-topbar-course-pill::before {
  flex: none;
  font-size: .6rem;
  line-height: 1;
  letter-spacing: .06em;
}

/* The courses' badges are the second thing to give way, and they go one at
   a time, whole: the box may shrink, a badge that no longer fits drops to a
   second line, and the box shows only the first.

   Two empty items make that exact. The one at the end, 2px wide, is the
   first to drop, so a hair's width of shrinking costs no badge. The one at
   the start means the first line is never empty, so even the first badge
   may drop (a line's first item never does, and would be cut in half
   instead).

   The badges are spaced by a margin each, not by the box's gap: every
   browser counts margins into the box's natural width, which is what keeps
   the last badge on the first line when there is room. The box's own margin
   takes back the last badge's 6px and the end item's 2px. */
body.ace-player .ace-player-topbar .ace-topbar-courses {
  flex: 0 100000 auto;
  flex-wrap: wrap;
  align-content: flex-start;
  min-width: 0;
  height: 20px;
  margin-right: -8px;
  gap: 0;
  overflow: hidden;
}
body.ace-player .ace-player-topbar .ace-topbar-courses::before,
body.ace-player .ace-player-topbar .ace-topbar-courses::after {
  content: "";
  flex: none;
  width: 0;
  height: 20px;       /* the first line is a badge tall even when no badge is on it */
}
body.ace-player .ace-player-topbar .ace-topbar-courses::before { order: -1; }
body.ace-player .ace-player-topbar .ace-topbar-courses::after { order: 99; width: 2px; }
/* A course that keeps its name stands after the badges, its name cut short
   with an ellipsis if it is long. One with no name (a course since deleted)
   is not drawn at all. */
body.ace-player .ace-player-topbar .ace-topbar-courses > .ace-topbar-course-pill {
  display: block;
  order: 9;
  max-width: 168px;
  margin-right: 6px;
  overflow: hidden;
  line-height: 18px;
  text-align: center;
  text-overflow: ellipsis;
}
body.ace-player .ace-player-topbar .ace-topbar-courses > .ace-topbar-course-pill:empty { display: none; }

/* ------------------------------------------------------------ Continue */

/* One control: the lecture's name and Resume in a single capsule. It is the
   first thing to give way: the name in it shortens to about a dozen letters
   (--atb-title-floor, set for the lecture by the plugin) before anything
   else in the row moves. 102px is the rest of the capsule: its padding, the
   gap and the button. */
body.ace-player .ace-player-topbar .ace-topbar-resume {
  position: relative;
  flex: 0 1000000000 auto;
  box-sizing: border-box;
  min-width: calc(var(--atb-title-floor, 12ch) + 102px);
  justify-content: space-between;
  height: 36px;
  margin-left: 0;
  padding: 0 3px 0 14px;
  gap: 10px;
  border: 1px solid var(--atb-line2);
  border-radius: 999px;
  background: rgba(255, 255, 255, .03);
  font: 500 .8125rem/1.3 var(--atb-body-font);
  transition: border-color .15s ease, background .15s ease;
}
/* "Continue:" is said by the capsule itself. It is kept for a screen reader,
   at every width (the theme removes it under 900px), and in the theme's own
   lower case (the theme set it in capitals, which some readers spell out). */
body.ace-player .ace-player-topbar .ace-topbar-resume-label {
  display: block;
  position: absolute;
  width: 1px;
  height: 1px;
  max-width: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  text-transform: none;
  white-space: nowrap;
  border: 0;
}
body.ace-player .ace-player-topbar .ace-topbar-resume-title {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 30ch;
  color: var(--atb-text);
  font: inherit;
  transition: color .15s ease;
}
body.ace-player .ace-player-topbar .ace-topbar-resume-btn {
  flex: none;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 13px;
  border-radius: 999px;
  background: var(--atb-teal-fill);
  color: #fff;
  font: 600 .75rem/1 var(--atb-body-font);
  letter-spacing: .01em;
  transition: background .15s ease;
}
body.ace-player .ace-player-topbar .ace-topbar-resume:hover .ace-topbar-resume-btn { background: var(--atb-teal-fill); }
@media (hover: hover) {
  body.ace-player .ace-player-topbar .ace-topbar-resume:hover { border-color: var(--atb-ring); background: var(--atb-wash); }
  body.ace-player .ace-player-topbar .ace-topbar-resume:hover .ace-topbar-resume-title { color: var(--atb-head); }
  body.ace-player .ace-player-topbar .ace-topbar-resume:hover .ace-topbar-resume-btn { background: var(--atb-teal-deep); }
}

/* Not offered when it would not do what it says: it names the page being
   read, a lecture the free plan keeps locked, or a page the account can no
   longer open. */
body.atb-resume-here.ace-player .ace-player-topbar .ace-topbar-resume,
body.atb-resume-locked.ace-player .ace-player-topbar .ace-topbar-resume,
body.atb-resume-gone.ace-player .ace-player-topbar .ace-topbar-resume { display: none; }

/* ------------------------------------------------------------ Upgrade, Finish Profile */

body.ace-player .ace-player-topbar .ace-topbar-student-code {
  flex: none;
  box-sizing: border-box;
  height: 36px;
  padding: 0 14px 0 12px;
  gap: 7px;
  border: 1px solid rgba(var(--atb-warn-rgb), .38);
  border-radius: 999px;
  background: rgba(var(--atb-warn-rgb), .09);
  color: var(--atb-warn);
  font: 600 .78rem/1 var(--atb-body-font);
  transition: border-color .15s ease, background .15s ease;
}
body.ace-player .ace-player-topbar .ace-topbar-student-code svg { flex: none; }
body.ace-player .ace-player-topbar .ace-topbar-student-code:hover { background: rgba(var(--atb-warn-rgb), .09); }
@media (hover: hover) {
  body.ace-player .ace-player-topbar .ace-topbar-student-code:hover { border-color: rgba(var(--atb-warn-rgb), .65); background: rgba(var(--atb-warn-rgb), .16); }
}

/* ------------------------------------------------------------ the bell, the rank */

/* Both are their own plugins'. Where they stand is set here, and the rank is
   given the bell's height (36px) so the row's right-hand end is level. */
body.ace-player .ace-player-topbar .ace-feed-bell-wrap { flex: none; }
body.ace-player .ace-player-topbar > .ace-xp-topbar { flex: none; margin-right: 0; }
body.ace-player .ace-player-topbar > .ace-xp-topbar:not(.is-rank) { box-sizing: border-box; height: 36px; padding-top: 0; padding-bottom: 0; }
body.ace-player .ace-player-topbar > .ace-xp-topbar.is-rank .ace-xp-pillrank { box-sizing: border-box; height: 36px; padding-top: 0; padding-bottom: 0; padding-left: 7px; }

/* ------------------------------------------------------------ a visitor (a course's own page) */

body.ace-player .ace-player-topbar > .atb-signin {
  flex: none;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  height: 36px;
  margin-left: auto;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--atb-teal-fill);
  color: #fff;
  font: 600 .8125rem/1 var(--atb-body-font);
  text-decoration: none;
  transition: background .15s ease;
}
@media (hover: hover) {
  body.ace-player .ace-player-topbar > .atb-signin:hover { background: var(--atb-teal-deep); }
}

/* ------------------------------------------------------------ past the bar and the menu, for a keyboard */

body.ace-player > .atb-skip {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 1300;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 16px;
  border-radius: 10px;
  background: var(--atb-teal-fill);
  color: #fff;
  font: 600 .8125rem/1 var(--atb-body-font);
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
  transform: translateY(-64px);
}
body.ace-player > .atb-skip[hidden] { display: none; }
body.ace-player > .atb-skip:focus { transform: none; outline: 2px solid #fff; outline-offset: 2px; }
body.admin-bar.ace-player > .atb-skip { top: calc(12px + var(--wp-admin--admin-bar--height, 32px)); transform: translateY(-110px); }
body.admin-bar.ace-player > .atb-skip:focus { transform: none; }
/* The page takes focus when the link is used; a ring round the whole page
   would say nothing. */
body.ace-player .ace-player-content[tabindex="-1"]:focus { outline: none; }

/* ============================================================ narrower rows */

/* What gives way, and in what order, as the row runs short.

   On a wide screen the row adjusts itself, by how readily each thing shrinks:
     1  the lecture's name in Continue shortens, to about a dozen letters;
     2  the courses' badges go, one at a time;
     3  the student's name shortens.

   From 900px down, by the rules below:
     4  the badges are not shown (as in the theme);
     5  Continue is its button: at 600px for everyone, at 900px where
        Upgrade or Finish Profile is in the row too (and at 1100px for the
        few rows that also carry two staff tags);
     6  the student's name goes, where what is left of it would be a few
        letters;
     7  words turn into what they stand for: the way back is its arrow, the
        rank is its badge, Finish Profile takes two lines, Resume is a play
        button.
   The picture, Continue, Upgrade or Finish Profile, the bell and the rank
   are there at every width, whole and in reach.

   How soon steps 6 and 7 come depends on what the account has in its row,
   which <body> says: atb-resume (Continue is shown), atb-nudge-upgrade,
   atb-nudge-profile. The widths are measured, with at least 14px to spare
   at each; the tests walk every kind of account through every width from
   320px. */

/* A small laptop, and one of the fullest rows there can be (Continue, Upgrade
   or Finish Profile, and two or more tags that cannot shorten: <body> says
   atb-tight): Continue is its button from here down. The account's own rules
   keep a third and later tag off the row at these widths too. */
@media (max-width: 1100px) {
  body.atb-tight.ace-player .ace-player-topbar .ace-topbar-resume {
    flex: none;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
  }
  body.atb-tight.ace-player .ace-player-topbar .ace-topbar-resume-title {
    position: absolute;
    width: 1px;
    height: 1px;
    max-width: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
  body.atb-tight.ace-player .ace-player-topbar .ace-topbar-resume-btn { height: 36px; padding: 0 13px; font-size: .78rem; }
}

/* The sidebar is a drawer from here down, and the menu button is in the bar. */
@media (max-width: 900px) {
  body.ace-player { --atb-gap: 8px; }
  body.ace-player .ace-player-topbar { padding: 0 12px; }

  body.ace-player .ace-player-topbar .ace-sidebar-toggle { display: inline-grid; }

  /* The word is a bare text node in the theme's markup, so it is the size
     that goes, not the element. A screen reader still reads "Dashboard". */
  body.ace-player .ace-player-topbar .ace-player-back {
    justify-content: center;
    width: 36px;
    margin-left: 0;
    padding: 0;
    gap: 0;
    font-size: 0;
  }
  body.ace-player .ace-player-topbar .ace-player-back svg { width: 19px; height: 19px; }
  body.ace-player .ace-player-topbar .ace-player-back + .ace-topbar-profile { padding-left: 0; background: none; }

  body.ace-player .ace-player-topbar .ace-topbar-profile > .ace-topbar-badge,
  body.ace-player .ace-player-topbar .ace-topbar-courses { display: none; }

  /* With Upgrade or Finish Profile in the row there is no room for the
     lecture's name as well: Continue is its button. */
  body.atb-nudge.ace-player .ace-player-topbar .ace-topbar-resume {
    flex: none;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
  }
  /* Out of sight, not out of the link: a screen reader still hears which lecture. */
  body.atb-nudge.ace-player .ace-player-topbar .ace-topbar-resume-title {
    position: absolute;
    width: 1px;
    height: 1px;
    max-width: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
  body.atb-nudge.ace-player .ace-player-topbar .ace-topbar-resume-btn { height: 36px; padding: 0 13px; font-size: .78rem; }
}

/* A phone. Continue is its button for everyone; the rank is its badge. */
@media (max-width: 600px) {
  body.ace-player .ace-player-topbar .ace-topbar-resume {
    flex: none;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
  }
  body.ace-player .ace-player-topbar .ace-topbar-resume-title {
    position: absolute;
    width: 1px;
    height: 1px;
    max-width: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
  body.ace-player .ace-player-topbar .ace-topbar-resume-btn { height: 36px; padding: 0 13px; font-size: .78rem; }

  body.ace-player .ace-player-topbar .ace-topbar-student-code { padding: 0 13px; }
  body.ace-player .ace-player-topbar .ace-topbar-student-code svg { display: none; }

  /* The rank is its badge alone, in a disc the bell's size: no name (ACE XP
     drops that at 720px), no stars, no MAX. A board passer's star moves onto
     the disc's corner. */
  body.ace-player .ace-player-topbar > .ace-xp-topbar.is-rank .ace-xp-pillrank { position: relative; width: 36px; padding: 0; justify-content: center; }
  body.ace-player .ace-player-topbar > .ace-xp-topbar.is-rank .ace-xp-pillrank-name,
  body.ace-player .ace-player-topbar > .ace-xp-topbar.is-rank .ace-xp-stars,
  body.ace-player .ace-player-topbar > .ace-xp-topbar.is-rank .ace-xp-pillrank-max { display: none; }
  body.ace-player .ace-player-topbar > .ace-xp-topbar.is-rank .ace-xp-passer.is-mini {
    position: absolute;
    right: -4px;
    bottom: -3px;
    box-sizing: border-box;
    width: 16px;
    height: 16px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
    background: var(--atb-bar);
  }
}

/* Where ACE XP shows the level without its words (720px and under), the
   ring is a disc the bell's size. */
@media (max-width: 720px) {
  body.ace-player .ace-player-topbar > .ace-xp-topbar:not(.is-rank) { width: 36px; padding: 0; justify-content: center; }
}

/* ---- 6: the name goes where what is left of it would be a few letters. */

@media (max-width: 462px) {
  body.atb-resume.atb-nudge-profile.ace-player .ace-player-topbar .ace-topbar-name { display: none; }
}
@media (max-width: 436px) {
  body.atb-resume.atb-nudge-upgrade.ace-player .ace-player-topbar .ace-topbar-name { display: none; }
}
@media (max-width: 418px) {
  body.atb-nudge-profile.ace-player .ace-player-topbar .ace-player-back ~ .ace-topbar-profile .ace-topbar-name { display: none; }
}
@media (max-width: 390px) {
  body.atb-nudge-upgrade.ace-player .ace-player-topbar .ace-player-back ~ .ace-topbar-profile .ace-topbar-name { display: none; }
}
@media (max-width: 374px) {
  body.atb-nudge-profile.ace-player .ace-player-topbar .ace-topbar-name { display: none; }
}
@media (max-width: 348px) {
  body.atb-nudge-upgrade.ace-player .ace-player-topbar .ace-topbar-name,
  body.atb-resume.ace-player .ace-player-topbar .ace-topbar-name { display: none; }
}

/* ---- 7: Finish Profile on two lines, where one would crowd the rank. */

@media (max-width: 412px) {
  body.atb-resume.ace-player .ace-player-topbar .ace-topbar-finish-profile {
    width: min-content;
    padding: 0 11px;
    border-radius: 12px;
    font-size: .66rem;
    line-height: 1.14;
    text-align: center;
    white-space: normal;
  }
}
@media (max-width: 376px) {
  body.ace-player .ace-player-topbar .ace-player-back ~ .ace-topbar-profile .ace-topbar-finish-profile {
    width: min-content;
    padding: 0 11px;
    border-radius: 12px;
    font-size: .66rem;
    line-height: 1.14;
    text-align: center;
    white-space: normal;
  }
}

/* ---- 7: Resume as a play button, beside Upgrade or Finish Profile on the
        smallest phones. Its words stay for a screen reader. */

@media (max-width: 384px) {
  body.atb-nudge.ace-player .ace-player-topbar .ace-topbar-resume-btn {
    width: 36px;
    padding: 0;
    font-size: 0;
  }
  body.atb-nudge.ace-player .ace-player-topbar .ace-topbar-resume-btn::before {
    content: "";
    width: 0;
    height: 0;
    margin-left: 3px;
    border-style: solid;
    border-width: 6.5px 0 6.5px 11px;
    border-color: transparent transparent transparent currentColor;
  }
}

/* The narrowest phones: a little less air between things and inside the
   amber button. */
@media (max-width: 340px) {
  body.ace-player { --atb-gap: 6px; }
  body.ace-player .ace-player-topbar .ace-topbar-student-code:not(.ace-topbar-finish-profile) { padding: 0 10px; }
}

/* ---- A net under a case that does not arise today. On a lecture the theme
        always points Continue at the lecture itself, so it is never shown
        beside the way back. Were that to change (a filter, a later theme),
        the two would share a phone's row: Continue is then the play button,
        and gives up its place to Upgrade or Finish Profile on the narrowest. */

@media (max-width: 600px) {
  body.ace-player .ace-player-topbar .ace-player-back ~ .ace-topbar-profile .ace-topbar-resume-btn {
    width: 36px;
    padding: 0;
    font-size: 0;
  }
  body.ace-player .ace-player-topbar .ace-player-back ~ .ace-topbar-profile .ace-topbar-resume-btn::before {
    content: "";
    width: 0;
    height: 0;
    margin-left: 3px;
    border-style: solid;
    border-width: 6.5px 0 6.5px 11px;
    border-color: transparent transparent transparent currentColor;
  }
}
@media (max-width: 390px) {
  body.atb-nudge.ace-player .ace-player-topbar .ace-player-back ~ .ace-topbar-profile .ace-topbar-resume { display: none; }
}

/* ============================================================ the Edit Profile window */

/* Shut, the theme only made it see-through: its Close button, eleven fields
   and Save still took the Tab key on every app page, one after another, with
   nothing to see. Shut, it is now really hidden. */
body.ace-player #ace-profile-modal {
  visibility: hidden;
  transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
}
body.ace-player #ace-profile-modal.is-open {
  visibility: visible;
  transition-delay: 0s;
}

/* The window takes focus when it opens; the ring belongs on what is inside. */
body.ace-player #ace-profile-modal:focus { outline: none; }

/* It fits a phone, and under the WordPress toolbar staff keep. */
body.ace-player #ace-profile-modal {
  width: min(480px, calc(100vw - 24px));
  max-height: min(85vh, calc(100vh - 32px));
  /* Tabbing back up the form brings a field into view below the heading,
     which stays put, not under it. */
  scroll-padding-top: 80px;
  color-scheme: dark;
}
@supports (height: 100dvh) {
  body.ace-player #ace-profile-modal { max-height: min(85dvh, calc(100dvh - 32px)); }
}
/* Staff keep WordPress's toolbar: the window is centred in what is left under it. */
body.admin-bar.ace-player #ace-profile-modal {
  top: calc(50% + var(--wp-admin--admin-bar--height, 32px) / 2);
  max-height: min(85vh, calc(100vh - var(--wp-admin--admin-bar--height, 32px) - 24px));
}
@supports (height: 100dvh) {
  body.admin-bar.ace-player #ace-profile-modal { max-height: min(85dvh, calc(100dvh - var(--wp-admin--admin-bar--height, 32px) - 24px)); }
}

/* The heading and Close stay put while the form scrolls under them. */
body.ace-player #ace-profile-modal .ace-modal-header {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 16px 16px 16px 24px;
  background: var(--color-secondary, #1a1918);
}
body.ace-player #ace-profile-modal .ace-modal-header h2 {
  font: 600 1.0625rem/1.3 var(--atb-head-font);
  letter-spacing: 0;
}
body.ace-player #ace-profile-modal .ace-modal-close {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 10px;
  transition: color .15s ease, background .15s ease;
}
@media (hover: hover) {
  body.ace-player #ace-profile-modal .ace-modal-close:hover { color: var(--atb-head); background: rgba(255, 255, 255, .06); }
}

/* The photo: a button for a keyboard too (the script gives it the Tab key). */
body.ace-player #ace-profile-modal .ace-avatar-upload-preview:focus-visible { outline: 2px solid var(--atb-teal-text); outline-offset: 3px; }
body.ace-player #ace-profile-modal .ace-avatar-upload-preview:focus-visible .ace-avatar-upload-overlay { opacity: 1; }
/* The theme shows "Change" when a mouse is over the photo. A finger has no
   hover, so on a touch screen the word is there from the start, along the
   foot of the photo. */
@media (hover: none) {
  body.ace-player #ace-profile-modal .ace-avatar-upload-preview { overflow: hidden; }
  body.ace-player #ace-profile-modal .ace-avatar-upload-overlay {
    top: auto;
    height: 24px;
    align-items: flex-start;
    padding-top: 4px;
    box-sizing: border-box;
    border-radius: 0;
    background: rgba(0, 0, 0, .62);
    opacity: 1;
  }
}

/* A field in use shows it at a glance. */
body.ace-player #ace-profile-modal .ace-history-profile-form input:not([type="checkbox"]):not([type="file"]):focus {
  border-color: var(--atb-teal-text);
  box-shadow: 0 0 0 3px var(--atb-halo);
}
body.ace-player #ace-profile-modal .ace-history-profile-form input:not([type="checkbox"]):not([type="file"]):focus-visible { outline: none; }
body.ace-player #ace-profile-modal .ace-history-profile-form input[type="checkbox"]:focus-visible { outline: 2px solid var(--atb-teal-text); outline-offset: 2px; }
/* Where the system draws its own colours the halo is not drawn: the plain
   ring comes back. */
@media (forced-colors: active) {
  body.ace-player #ace-profile-modal .ace-history-profile-form input:not([type="checkbox"]):not([type="file"]):focus-visible { outline: 2px solid; outline-offset: 1px; }
}

/* White on the deeper teal. */
body.ace-player #ace-profile-modal .ace-history-profile-form .btn-primary { background: var(--atb-teal-fill); }
@media (hover: hover) {
  body.ace-player #ace-profile-modal .ace-history-profile-form .btn-primary:hover { background: var(--atb-teal-deep); }
}

@media (max-width: 480px) {
  body.ace-player #ace-profile-modal .ace-modal-header { padding-left: 18px; }
  body.ace-player #ace-profile-modal .ace-modal-body { padding: 18px; }
  body.ace-player #ace-profile-modal .ace-history-profile-form .btn { align-self: stretch; text-align: center; }
}

/* ============================================================ motion */

@media (prefers-reduced-motion: reduce) {
  body.ace-player .ace-player-topbar .ace-sidebar-toggle,
  body.ace-player .ace-player-topbar .ace-sidebar-toggle svg line,
  body.ace-player .ace-player-topbar .ace-player-back,
  body.ace-player .ace-player-topbar .ace-topbar-avatar-btn,
  body.ace-player .ace-player-topbar .ace-topbar-name,
  body.ace-player .ace-player-topbar .ace-topbar-resume,
  body.ace-player .ace-player-topbar .ace-topbar-resume-title,
  body.ace-player .ace-player-topbar .ace-topbar-resume-btn,
  body.ace-player .ace-player-topbar .ace-topbar-student-code,
  body.ace-player .ace-player-topbar > .atb-signin,
  body.ace-player #ace-profile-modal,
  body.ace-player #ace-profile-modal .ace-modal-close { transition: none !important; }
}