/* Explicit image layout shared with editor/assets/writing-surface.css.
 * width/height HTML attributes keep the selected size and intrinsic ratio.
 * Block alignment and explicit text wrapping are separate author choices.
 */
:is(.format, .entry-content, #writing-document) img.so-image-sized {
  /* Restore HTML width hints, not a legacy selector's percentage width.
   * Unlike width:auto/revert, revert-layer preserves the width attribute.
   */
  width: revert-layer;
  max-width: 100%;
  height: auto;
  /* An explicit size also removes old framing/rotation from the measured box. */
  box-sizing: border-box;
  padding: 0;
  border: 0;
  transform: none;
}
:is(.format, .entry-content, #writing-document) :is(figure, img):is(.so-image-left, .so-image-center, .so-image-right, .so-image-wrap-left, .so-image-wrap-right) {
  display: block;
  float: none !important;
  clear: both;
  max-width: 100%;
  box-sizing: border-box;
  margin-block: 0 1.15em;
}
:is(.format, .entry-content, #writing-document) figure:is(.so-image-left, .so-image-center, .so-image-right, .so-image-wrap-left, .so-image-wrap-right) {
  width: fit-content;
  min-width: 0;
}
:is(.format, .entry-content, #writing-document) :is(img.so-image-left, img.so-image-center, img.so-image-right, img.so-image-wrap-left, img.so-image-wrap-right, figure.so-image-wrap-left img, figure.so-image-wrap-right img, figure.so-image-left img, figure.so-image-center img, figure.so-image-right img) {
  display: block;
  float: none !important;
  max-width: 100%;
  height: auto;
  box-sizing: border-box;
}
:is(.format, .entry-content, #writing-document) figure:is(.so-image-left, .so-image-center, .so-image-right, .so-image-wrap-left, .so-image-wrap-right) img {
  margin: 0 !important;
}
:is(.format, .entry-content, #writing-document) figure:is(.so-image-left, .so-image-center, .so-image-right, .so-image-wrap-left, .so-image-wrap-right) figcaption {
  /* A long caption wraps to the image width instead of widening its figure. */
  width: 0;
  min-width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: anywhere;
  text-align: inherit;
}
:is(.format, .entry-content, #writing-document) :is(figure, img).so-image-left {
  margin-left: 0 !important;
  margin-right: auto !important;
  text-align: left;
}
:is(.format, .entry-content, #writing-document) :is(figure, img).so-image-center {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center;
}
:is(.format, .entry-content, #writing-document) :is(figure, img).so-image-right {
  margin-left: auto !important;
  margin-right: 0 !important;
  text-align: right;
}

/* Explicit wrapping falls back to a centred block in older browsers.
 * Native public content already establishes a flow-root in compatibility.css.
 * The dedicated writing surface needs the same containment at its own edge.
 */
#writing-document { display: flow-root; }
:is(.format, .entry-content, #writing-document) :is(figure, img):is(.so-image-wrap-left, .so-image-wrap-right) {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: left;
}
@supports selector(:has(*)) {
  /* Limit clear/list rules to content explicitly using these new wrap modes.
   * This also covers an img nested in a link, picture or paragraph.
   */
  :is(.format.entry-content, #writing-document):has(.so-image-wrap-left, .so-image-wrap-right) :is(h1, h2, h3, h4, h5, h6, table, pre, blockquote, hr) {
    clear: both;
  }
  :is(.format.entry-content, #writing-document):has(.so-image-wrap-left, .so-image-wrap-right) :is(ul, ol) {
    display: flow-root;
  }
  :is(.format, .entry-content, #writing-document) :is(figure, img):is(.so-image-wrap-left, .so-image-wrap-right) {
    max-width: 48%;
    margin-top: 0 !important;
    margin-bottom: 1em !important;
    clear: both;
  }
  :is(.format, .entry-content, #writing-document) :is(figure, img).so-image-wrap-left {
    float: left !important;
    margin-left: 0 !important;
    margin-right: 1.25em !important;
  }
  /* Last wins for contradictory historical classes: wrap-right > wrap-left. */
  :is(.format, .entry-content, #writing-document) :is(figure, img).so-image-wrap-right {
    float: right !important;
    margin-left: 1.25em !important;
    margin-right: 0 !important;
  }
}
@media (max-width: 640px) {
  :is(.format, .entry-content, #writing-document) :is(figure, img):is(.so-image-wrap-left, .so-image-wrap-right) {
    float: none !important;
    max-width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}