/* Circled marks use vector coordinates, independent of the page's font baseline. */
:root {
  --pl-mark-question: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 8a4 4 0 0 1 8 0c0 3-4 3-4 6M12 20h.001' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  --pl-mark-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6h.001M12 10v8' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  --pl-mark-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v9M12 19h.001' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  --pl-mark-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12 4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

body :is(.simulink-help-trigger, #parameter-help header > i) {
  --pl-circle-mark: var(--pl-mark-question);
}
body :is(.simulink-status-info, .simulink-draft-notice > span[aria-hidden], .pl-info-mark, .ee303-readiness-layout li.is-info > span) {
  --pl-circle-mark: var(--pl-mark-info);
}
body :is(.simulink-status-alert, .group-upload-error > b) {
  --pl-circle-mark: var(--pl-mark-alert);
}
body :is(.simulink-status-check, .ee303-week-path li.is-complete > span, .ee303-readiness-layout li:not(.is-info) > span) {
  --pl-circle-mark: var(--pl-mark-check);
}

body :is(.simulink-help-trigger, #parameter-help header > i,
  .simulink-status-info, .simulink-status-alert, .simulink-status-check,
  .simulink-draft-notice > span[aria-hidden], .pl-info-mark,
  .group-upload-error > b, .ee303-week-path li.is-complete > span,
  .ee303-readiness-layout li > span) {
  position: relative;
  display: inline-grid;
  place-items: center;
  box-sizing: border-box;
  flex-shrink: 0;
  padding: 0;
  font-size: 0 !important;
  line-height: 1;
  font-style: normal;
}
body :is(.simulink-help-trigger, #parameter-help header > i,
  .simulink-status-info, .simulink-status-alert, .simulink-status-check,
  .simulink-draft-notice > span[aria-hidden], .pl-info-mark,
  .group-upload-error > b, .ee303-week-path li.is-complete > span,
  .ee303-readiness-layout li > span)::after {
  content: "";
  position: absolute;
  inset: 10%;
  background: currentColor;
  -webkit-mask: var(--pl-circle-mark) center / contain no-repeat;
  mask: var(--pl-circle-mark) center / contain no-repeat;
  pointer-events: none;
}
body :is(.simulink-draft-notice > span[aria-hidden], .pl-info-mark) {
  width: 14px;
  height: 14px;
  border: 1px solid currentColor;
  border-radius: 50%;
  vertical-align: -2px;
}
body .simulink-preflight-note .simulink-status-info { width: 17px; }
body.phase26-groups .phase86-task-type-options input:checked + span::after {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12 4.5 4.5L19 7.5' fill='none' stroke='%23f8fcf9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: center;
  background-size: 80%;
  background-repeat: no-repeat;
}

/* This list uses a pseudo-element for the entire circled check. */
body .ee303-learning-points li::before {
  content: "";
  background: currentColor;
  border: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10.5' fill='none' stroke='black'/%3E%3Cpath d='m5 12 4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10.5' fill='none' stroke='black'/%3E%3Cpath d='m5 12 4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
body [data-help-dialog] { display: inline-flex; align-items: center; justify-content: center; }
body :is([data-help-dialog], .pl-help-symbol) > svg { display: block; flex-shrink: 0; }
