.riix-content-interactions {
  /* Keep interaction controls above local media layers (video layers end at 4)
     without competing with site dialogs and editor overlays. */
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--dx-engage-action-gap, 24px);
  min-width: max-content;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--dx-engage-icon-color, var(--dx-engage-text-color, var(--dx-color-text-body, #1A1A1A)));
  overflow: visible;
  box-shadow: none;
}

.riix-content-interactions.is-article-actions {
  margin-top: 0;
}

.riix-content-interactions.is-course-lesson-actions,
.riix-content-interactions.is-course-intro-actions,
.riix-content-interactions.is-book-item-actions,
.riix-content-interactions.is-featured-video-actions,
.riix-content-interactions.is-expanded-video-actions {
  margin: 0;
  padding: 0;
  border: 0;
}

.riix-content-interaction-button {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 0 0 var(--dx-engage-icon-size, 30px);
  gap: 0;
  width: var(--dx-engage-icon-size, 30px);
  min-width: var(--dx-engage-icon-size, 30px);
  height: var(--dx-engage-icon-size, 30px);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: currentColor;
  box-shadow: none;
  cursor: pointer;
  font: inherit;
  line-height: 1;
  overflow: visible;
  transform: none !important;
  translate: none !important;
  transition: color 180ms ease;
}

.riix-content-interaction-button--read {
  width: var(--dx-engage-icon-size, 30px);
  min-width: var(--dx-engage-icon-size, 30px);
}

.riix-content-interaction-button svg {
  display: block;
  flex: 0 0 var(--dx-engage-icon-size, 30px);
  width: var(--dx-engage-icon-size, 30px);
  height: var(--dx-engage-icon-size, 30px);
  fill: none;
  stroke: currentColor;
  stroke-width: var(--dx-engage-icon-stroke-width, 2px);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The heart path uses less of its 10 x 10 viewBox than the other three icons.
   Enlarge only its artwork while keeping the shared 30px control box stable. */
.riix-content-interaction-button--recommend .riix-content-interaction-icon--recommend {
  transform: scale(1.125) !important;
  transform-origin: center;
}

.riix-content-interaction-button--recommend .riix-content-interaction-icon--recommend path {
  stroke-width: 1.3px !important;
  vector-effect: non-scaling-stroke;
}

/* Compensate for the extra visual whitespace in the star's 10 x 10 artwork. */
.riix-content-interaction-button--favorite .riix-content-interaction-icon--favorite {
  transform: scale(1.075) !important;
  transform-origin: center;
}

.riix-content-interaction-button--favorite .riix-content-interaction-icon--favorite .riix-interaction-outline {
  stroke-width: 1.3px !important;
  vector-effect: non-scaling-stroke;
}

.riix-content-interaction-button .riix-interaction-fill {
  fill: currentColor;
  stroke: none;
  opacity: 0;
}

.riix-content-interaction-button .riix-interaction-outline,
.riix-content-interaction-button .riix-interaction-fill {
  transition: opacity 180ms ease, fill 180ms ease, stroke 180ms ease;
}

/* The outer two icons use the shared 1.4px token. The optically enlarged
   middle icons override it to 1.3px above. */
.riix-content-interaction-button .riix-interaction-outline {
  stroke-width: var(--dx-engage-icon-stroke-width, 1.4px) !important;
  vector-effect: non-scaling-stroke;
}

.riix-content-interaction-button.is-active {
  color: var(--dx-engage-active-color, #f24b55);
}

.riix-content-interaction-button.is-active .riix-interaction-outline { opacity: 0; }
.riix-content-interaction-button.is-active .riix-interaction-fill { opacity: 1; }
.riix-content-interaction-button--favorite.is-active { color: var(--dx-engage-favorite-active-color, #F6C344); }
.riix-content-interaction-button--read.is-active { color: var(--dx-engage-read-active-color, #75FB97) !important; }
.riix-content-interaction-button:disabled { cursor: default; opacity: .45; }
.riix-content-interactions.is-updating .riix-content-interaction-button:disabled { opacity: 1; }
.riix-content-interactions.is-loading { opacity: .65; }

.riix-content-read-status {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 calc(var(--dx-engage-icon-size, 30px) - 4px);
  width: calc(var(--dx-engage-icon-size, 30px) - 4px);
  min-width: calc(var(--dx-engage-icon-size, 30px) - 4px);
  height: calc(var(--dx-engage-icon-size, 30px) - 4px);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--dx-engage-read-active-color, #75FB97);
  line-height: 1;
  vertical-align: middle;
}

.riix-content-read-status svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--dx-engage-icon-stroke-width, 1px);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.riix-content-read-status .riix-interaction-outline { opacity: 0; }
.riix-content-read-status .riix-interaction-fill {
  fill: currentColor;
  stroke: none;
  opacity: 1;
}

.riix-content-read-status[hidden] { display: none !important; }

/* Logged-out controls keep their original disabled appearance. They remain
   clickable only so a click can show the shared green login notice. */
.riix-content-interactions.is-login-required .riix-content-interaction-button,
.riix-content-interactions.is-login-required .riix-content-interaction-button:hover,
.riix-content-interactions.is-login-required .riix-content-interaction-button:focus-visible {
  color: inherit !important;
  opacity: .45 !important;
  cursor: pointer !important;
  transform: none !important;
  translate: none !important;
}

/* Keep the logged-out notice at the icon that was actually clicked. The
   shared course notice otherwise pins itself below the global header and
   animates its position, which makes this interaction appear to jump. */
html body .dx-course-login-notice-shell.riix-content-interaction-login-notice-shell {
  position: absolute !important;
  top: 0 !important;
  right: auto !important;
  bottom: auto !important;
  left: 0 !important;
  z-index: 2147483000 !important;
  width: 100% !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  pointer-events: none !important;
}

html body .dx-course-login-notice-shell.riix-content-interaction-login-notice-shell .dx-course-login-notice {
  position: absolute !important;
  top: var(--riix-interaction-login-notice-y, 50%) !important;
  left: var(--riix-interaction-login-notice-x, 50%) !important;
  max-width: calc(100vw - 28px) !important;
  pointer-events: none !important;
  transform: translate(-50%, calc(-100% - 10px)) !important;
  transform-origin: 50% 50% !important;
  transition: opacity .28s ease !important;
  will-change: opacity !important;
}

html body .dx-course-login-notice-shell.riix-content-interaction-login-notice-shell.is-visible .dx-course-login-notice,
html body .dx-course-login-notice-shell.riix-content-interaction-login-notice-shell.is-closing .dx-course-login-notice {
  transform: translate(-50%, calc(-100% - 10px)) !important;
}

html body .dx-course-login-notice-shell.riix-content-interaction-login-notice-shell.is-below .dx-course-login-notice,
html body .dx-course-login-notice-shell.riix-content-interaction-login-notice-shell.is-below.is-visible .dx-course-login-notice,
html body .dx-course-login-notice-shell.riix-content-interaction-login-notice-shell.is-below.is-closing .dx-course-login-notice {
  transform: translate(-50%, 10px) !important;
}

.dx-engage > .riix-content-interactions {
  grid-column: 2;
  align-self: start;
  justify-self: end;
}

/*
 * Safari can stall when a second window is open and hover code inserts a
 * fixed tooltip portal into the source document. Keep hints CSS-only: no DOM
 * insertion, measurement, global pointer listeners or focus transfer.
 */
.riix-content-interaction-button[data-tooltip] {
  position: relative;
  z-index: 1;
}

.riix-content-interaction-button[data-tooltip]::before,
.riix-content-interaction-button[data-tooltip]::after {
  position: absolute;
  z-index: 2147483000;
  left: 50%;
  bottom: calc(100% + var(--dx-engage-tooltip-gap, 10px));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%);
  transition: none;
}

.riix-content-interaction-button[data-tooltip]::before {
  content: attr(data-tooltip);
  box-sizing: border-box;
  width: max-content;
  max-width: calc(100vw - 16px);
  padding: var(--dx-engage-tooltip-padding-y, 6px) var(--dx-engage-tooltip-padding-x, 9px);
  border-radius: var(--dx-engage-tooltip-radius, 8px);
  background: var(--dx-engage-tooltip-bg, #1A1A1A);
  color: var(--dx-engage-tooltip-text-color, #FFFFFF);
  -webkit-text-fill-color: var(--dx-engage-tooltip-text-color, #FFFFFF);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .12);
  font-size: var(--dx-engage-tooltip-font-size, 12px);
  font-weight: var(--dx-engage-tooltip-font-weight, 500);
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  z-index: 2;
}

.riix-content-interaction-button[data-tooltip]::after {
  content: '';
  z-index: 1;
  bottom: calc(100% + var(--dx-engage-tooltip-gap, 10px) - 4px);
  width: 8px;
  height: 8px;
  background: var(--dx-engage-tooltip-bg, #1A1A1A);
  transform: translateX(-50%) rotate(45deg);
}

.riix-content-interaction-button[data-tooltip]:hover,
.riix-content-interaction-button[data-tooltip]:focus-visible {
  z-index: 2147483000;
}

.riix-content-interaction-button[data-tooltip]:hover::before,
.riix-content-interaction-button[data-tooltip]:hover::after,
.riix-content-interaction-button[data-tooltip]:focus-visible::before,
.riix-content-interaction-button[data-tooltip]:focus-visible::after {
  opacity: 1;
  visibility: visible;
}

.riix-content-interactions .riix-content-interaction-button:last-child[data-tooltip]::before {
  right: 0;
  left: auto;
  transform: none;
}

.riix-content-interactions .riix-content-interaction-button:last-child[data-tooltip]::after {
  right: calc(var(--dx-engage-icon-size, 30px) / 2 - 4px);
  left: auto;
  transform: rotate(45deg);
}

.riix-content-interaction-button:not(:disabled):hover,
.riix-content-interaction-button:not(:disabled):focus-visible {
  opacity: 1 !important;
  transform: none !important;
  translate: none !important;
}

@media (max-width: 720px) {
  .riix-content-interactions { gap: var(--dx-engage-action-gap, 24px); }
}

/* Login and access tips are deliberately short UI messages. Keep the shared
   mobile surface at its natural width so the complete message stays on one
   line instead of shrinking to the width of the clicked action. */
html body .dx-course-tip-surface > .dx-course-tip-copy {
  flex: 0 0 auto !important;
  width: max-content !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}