/*
 * Right rail flyout navigation system
 * Modern, scoped styling for the r-flyout menu pattern.
 */
.r-flyout-menu {
  background-color: var(--r-flyout-bg);
  border: 1px solid var(--r-flyout-border);
  border-radius: var(--radius, 3px);
  box-shadow: var(--r-flyout-shadow-menu);
  list-style: none;
  margin: 0;
  min-width: 0;
  overflow: visible;
  padding: 0;
  position: relative;
  z-index: var(--r-flyout-z, 6000);
}

.r-flyout-menu > [data-r-flyout-item] {
  border-bottom: 1px solid var(--r-flyout-divider);
  position: relative;
  transition: border-color var(--r-flyout-transition);
}

.r-flyout-menu > [data-r-flyout-item]:last-child {
  border-bottom: none;
}

.r-flyout__header {
  align-items: center;
  border: 1px solid transparent;
  color: var(--menu-text, #616978);
  display: flex;
  gap: var(--menu-icon-gap, 8px);
  line-height: 1.3;
  min-height: 32px;
  padding: 4px 6px;
  transition:
    background-color var(--r-flyout-transition),
    border-color var(--r-flyout-transition),
    box-shadow var(--r-flyout-transition),
    color var(--r-flyout-transition);
}

.r-flyout-menu > [data-r-flyout-item].current > .r-flyout__header {
  color: var(--menu-state-text, var(--primary-color, #e0162b));
  background-color: var(--menu-state-bg, var(--white, #fff));
  border-color: var(--menu-state-border, var(--primary-color, #e0162b));
}

.r-flyout__link-wrap {
  flex: 1 1 auto;
  min-width: 0;
}

.r-flyout__link {
  align-items: center;
  border: none;
  color: inherit;
  display: inline-flex;
  font-family: var(--font-header, "Open Sans", Arial, sans-serif);
  font-size: 0.85em;
  font-weight: 500;
  gap: 8px;
  line-height: 1.2;
  text-decoration: none;
}

.r-flyout__link:hover,
.r-flyout__link:focus {
  color: var(--primary-color);
  text-decoration: none;
}

.r-flyout__toggle {
  appearance: none;
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--menu-text);
  cursor: pointer;
  display: grid;
  flex: 0 0 var(--flyout-toggle-size);
  inline-size: var(--flyout-toggle-size);
  height: var(--flyout-toggle-size);
  justify-content: center;
  margin: 0;
  min-block-size: var(--flyout-toggle-size);
  min-height: var(--flyout-toggle-size);
  padding: 0;
  align-items: center;
  position: relative;
  transition: color var(--r-flyout-transition);
  width: var(--flyout-toggle-size);
}

.r-flyout__icon {
  display: block;
  grid-area: 1 / 1;
  block-size: var(--flyout-toggle-size);
  height: var(--flyout-toggle-size);
  inline-size: var(--flyout-toggle-size);
  width: var(--flyout-toggle-size);
  transition: opacity var(--r-flyout-transition);
}

.r-flyout__icon--minus {
  color: var(--primary-color);
  opacity: 0;
}

[data-r-flyout-item] > .r-flyout__header {
  border-radius: var(--radius, 3px);
}

[data-r-flyout-item].is-open,
[data-r-flyout-item]:hover,
[data-r-flyout-item]:focus-within {
  border-color: transparent;
}

[data-r-flyout-item].is-open > .r-flyout__header,
[data-r-flyout-item]:hover > .r-flyout__header,
[data-r-flyout-item]:focus-within > .r-flyout__header {
  background: var(--menu-state-bg, var(--white, #fff));
  border-color: var(--menu-state-border, var(--primary-color, #e0162b));
  box-shadow: none;
  color: var(--menu-state-text, var(--primary-color, #e0162b));
}

.r-flyout-menu
  > [data-r-flyout-item]:has(+ [data-r-flyout-item]:is(.is-open, :hover, :focus-within)) {
  border-bottom-color: transparent;
}

[data-r-flyout-item].is-open > .r-flyout__header .r-flyout__link,
[data-r-flyout-item]:hover > .r-flyout__header .r-flyout__link,
[data-r-flyout-item]:focus-within > .r-flyout__header .r-flyout__link {
  color: inherit;
}

[data-r-flyout-item].is-open > .r-flyout__header .r-flyout__toggle,
[data-r-flyout-item]:hover > .r-flyout__header .r-flyout__toggle,
[data-r-flyout-item]:focus-within > .r-flyout__header .r-flyout__toggle {
  color: var(--menu-state-text, var(--primary-color, #e0162b));
}

[data-r-flyout-item].is-open .r-flyout__icon--plus {
  opacity: 0;
}

[data-r-flyout-item].is-open .r-flyout__icon--minus {
  opacity: 1;
}

.r-flyout__panel {
  background-color: var(--r-flyout-bg);
  border: 1px solid var(--r-flyout-border);
  border-radius: var(--radius, 3px);
  box-shadow: var(--r-flyout-shadow-panel);
  inset-block-start: -1px;
  inset-inline-end: calc(100% - 1px);
  min-width: min(var(--flyout-width-desktop, 250px), 90vw);
  overflow: hidden;
  padding: 4px 0;
  position: absolute;
  z-index: var(--r-flyout-panel-z, 6010);
}

.r-flyout-menu[data-flyout-origin="left"] .r-flyout__panel {
  inset-inline: calc(100% - 1px) auto;
}

.r-flyout__panel[hidden] {
  display: none;
}

.r-flyout__sublist {
  list-style: none;
  margin: 0;
  padding: 4px 0;
}

.r-flyout__sublist .item-wrapper {
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius, 3px);
  display: block;
  transition:
    background-color var(--r-flyout-transition),
    border-color var(--r-flyout-transition),
    color var(--r-flyout-transition);
}

.r-flyout__sublist .menu-link {
  display: block;
}

.r-flyout__sublist a {
  color: var(--menu-text);
  display: block;
  padding: 6px 14px;
  text-decoration: none;
  transition:
    background-color var(--r-flyout-transition),
    color var(--r-flyout-transition);
}

.r-flyout__sublist a:hover,
.r-flyout__sublist a:focus {
  color: var(--menu-state-text, var(--primary-color, #e0162b));
  outline: none;
}

.r-flyout__sublist li:hover > .item-wrapper,
.r-flyout__sublist li:focus-within > .item-wrapper,
.r-flyout__sublist li.current > .item-wrapper,
.r-flyout__sublist li.active > .item-wrapper {
  background-color: var(--menu-state-bg, var(--white, #fff));
  border-color: var(--menu-state-border, var(--primary-color, #e0162b));
}

.r-flyout__sublist li:hover > .item-wrapper a,
.r-flyout__sublist li:focus-within > .item-wrapper a {
  color: var(--menu-state-text, var(--primary-color, #e0162b));
}

.r-flyout__sublist li.current > .item-wrapper a,
.r-flyout__sublist li.active > .item-wrapper a {
  color: var(--menu-state-text, var(--primary-color, #e0162b));
  font-weight: 600;
}

/* Match/override legacy inline selectors present in converted exercise pages. */
#aside .r-flyout-menu > [data-r-flyout-item].current > .r-flyout__header,
#aside [data-r-flyout-item].is-open > .r-flyout__header,
#aside [data-r-flyout-item]:hover > .r-flyout__header,
#aside [data-r-flyout-item]:focus-within > .r-flyout__header {
  background: var(--menu-state-bg, var(--white, #fff));
  border-color: var(--menu-state-border, var(--primary-color, #e0162b));
  color: var(--menu-state-text, var(--primary-color, #e0162b));
}

#aside [data-r-flyout-item].is-open > .r-flyout__header .r-flyout__toggle,
#aside [data-r-flyout-item]:hover > .r-flyout__header .r-flyout__toggle,
#aside [data-r-flyout-item]:focus-within > .r-flyout__header .r-flyout__toggle,
#aside [data-r-flyout-item].is-open > .r-flyout__header .r-flyout__link,
#aside [data-r-flyout-item]:hover > .r-flyout__header .r-flyout__link,
#aside [data-r-flyout-item]:focus-within > .r-flyout__header .r-flyout__link {
  color: var(--menu-state-text, var(--primary-color, #e0162b));
}

#aside .r-flyout__sublist li:hover > .item-wrapper,
#aside .r-flyout__sublist li:focus-within > .item-wrapper,
#aside .r-flyout__sublist li.current > .item-wrapper,
#aside .r-flyout__sublist li.active > .item-wrapper {
  background: var(--menu-state-bg, var(--white, #fff));
  border-color: var(--menu-state-border, var(--primary-color, #e0162b));
}

#aside .r-flyout__sublist li:hover > .item-wrapper a,
#aside .r-flyout__sublist li:focus-within > .item-wrapper a,
#aside .r-flyout__sublist li.current > .item-wrapper a,
#aside .r-flyout__sublist li.active > .item-wrapper a {
  color: var(--menu-state-text, var(--primary-color, #e0162b));
}

@media (width <= 900px) {
  /* Hide right rail at and below 900px. */
  #aside {
    display: none;
  }
}

@media (width >= 901px) and (width <= 909px) {
  /* Override legacy inline hides so the right rail stays visible just above 900px. */
  #aside {
    display: block;
  }
}

@media (hover: hover) {
  .r-flyout-menu[data-flyout-origin="right"] [data-r-flyout-item]:hover > .r-flyout__panel,
  .r-flyout-menu[data-flyout-origin="right"] [data-r-flyout-item]:focus-within > .r-flyout__panel {
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  .r-flyout__header,
  .r-flyout__toggle,
  .r-flyout__icon,
  .r-flyout__sublist a {
    transition-duration: 0ms;
  }
}