/* Mobile instructions and descriptions use the shared opaque reading surface. */
#section-preview-dialog,
#section-preview-tooltip {
  box-sizing: border-box;
  width: min(23rem, calc(100vw - 2 * var(--es-space-3)));
  padding: var(--es-space-3);
  border: 1px solid var(--es-dialog-edge);
  border-radius: var(--es-radius-m);
  background: var(--es-dialog-surface);
  color: var(--es-ink);
  box-shadow: var(--es-dialog-shadow);
  font: 400 var(--es-text-body) / var(--es-line-body) var(--es-font-body);
}
#section-preview-dialog {
  position: fixed;
  width: min(
    23rem,
    calc(var(--es-coach-viewport-width, 100vw) - 2 * var(--es-space-3))
  );
  max-height: calc(
    var(--es-coach-viewport-height, 100svh) - 2 * var(--es-space-3)
  );
  left: calc(
    var(--es-coach-viewport-left, 0px) + var(--es-coach-viewport-width, 100vw) /
      2
  );
  top: calc(
    var(--es-coach-viewport-top, 0px) +
      var(--es-coach-viewport-height, 100svh) / 2
  );
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
  margin: 0;
  overflow-y: auto;
}
#section-preview-dialog[open] {
  display: grid;
  align-content: start;
  gap: var(--es-space-2);
}
#section-preview-dialog::backdrop {
  background: var(--es-dialog-backdrop);
}
#section-preview-title {
  margin: 0 0 var(--es-space-2);
  color: var(--es-ink);
  font: var(--es-dialog-title-weight) 1.25rem / 1.2 var(--es-font-display);
}
#section-preview-dialog p,
#section-preview-tooltip p {
  margin: 0;
  color: var(--es-ink);
  font: inherit;
}
#section-preview-continue {
  min-width: 44px;
  min-height: 44px;
  margin-top: var(--es-space-2);
  padding: var(--es-space-2) var(--es-space-3);
  border: 1px solid var(--es-dialog-edge);
  border-radius: var(--es-radius-s);
  background: var(--es-dialog-control-surface);
  color: var(--es-ink);
  font: inherit;
  font-weight: var(--es-dialog-title-weight);
  cursor: pointer;
}
#section-preview-continue:focus-visible {
  outline: 2px solid var(--es-ink);
  outline-offset: 2px;
}
#section-preview-tooltip {
  position: fixed;
  z-index: var(--es-section-preview-layer);
  width: min(
    23rem,
    calc(var(--es-preview-viewport-width) - 2 * var(--es-space-3))
  );
  max-height: calc(var(--es-preview-viewport-height) - 2 * var(--es-space-5));
  overflow-y: auto;
  left: calc(
    var(--es-preview-viewport-left) + var(--es-preview-viewport-width) / 2
  );
  top: calc(
    var(--es-preview-viewport-top) + var(--es-preview-viewport-height) -
      var(--es-space-5)
  );
  transform: translate(-50%, -100%);
  margin: 0;
  pointer-events: none;
}
#section-preview-tooltip[hidden] {
  display: none;
}
#section-preview-tooltip-title {
  display: block;
  margin-bottom: var(--es-space-2);
  font-weight: var(--es-dialog-title-weight);
}