/* Static editorial selection: inline fragments retain normal text wrapping. */
.theme-apple .ios-selection-accent {
  --selection-ink: var(--apple-accent, #7c233a);
  --selection-inset: max(4px, 0.16em);
  --selection-height: 0.96em;
  position: relative;
  /* A solid tint sized to the letters, not the font's taller inline box. */
  background: linear-gradient(rgb(226 164 184 / 32%), rgb(226 164 184 / 32%))
    center / 100% var(--selection-height) no-repeat;
  padding: 0 var(--selection-inset);
  margin-inline-end: 4px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Keep the existing top edge and extend body-copy tint below the descenders. */
.theme-apple .ios-selection-accent--text {
  --selection-height: 1.24em;
  padding-bottom: 0.28em;
}

.theme-apple :is(.ios-selection-accent, .ios-selection-accent__start, .ios-selection-accent__end) {
  display: inline;
  position: relative;
  white-space: normal;
}

/* These short phrases fit even the narrowest mobile text column. */
.theme-apple .ios-selection-accent--short,
.theme-apple .ios-selection-accent--short > span {
  white-space: nowrap;
}

/* Only the first and last fragment get a handle; neither takes layout space. */
.ios-selection-accent__start::before,
.ios-selection-accent__end::after {
  content: "";
  position: absolute;
  width: 8px;
  height: calc(var(--selection-height) + 2px);
  background:
    radial-gradient(circle at center, var(--selection-ink) 3.9px, transparent 4px) center bottom / 8px 8px no-repeat,
    linear-gradient(var(--selection-ink), var(--selection-ink)) center top / 2px calc(100% - 4px) no-repeat;
  pointer-events: none;
}

.ios-selection-accent__start::before {
  top: calc(50% - var(--selection-height) / 2 - 2px);
  left: calc(-4px - var(--selection-inset));
  transform: rotate(180deg);
}

.ios-selection-accent__end::after {
  right: calc(-4px - var(--selection-inset));
  bottom: calc(50% - var(--selection-height) / 2 - 2px);
}