/**
 * @file prose.css
 * @component Prose (Content)
 * @description Applies a resilient readable measure and optional list styles to opaque rich text.
 *
 * @section Public custom properties
 * None.
 *
 * @section Private custom properties
 * --_length-measure    : Selected content limit and lead query width.
 * --_length-checkSize  : Checkmark circle size.
 * --_length-numberSize : Big-number circle size; larger in a wider Prose.
 */
:where([data-component-id="marsal_sdc:prose"]) {
  --_length-measure: var(--marsal-length-contentWidth-standard);
  --_length-checkSize: 1.75rem;
  --_length-numberSize: 2.75rem;

  min-inline-size: 0;
  color: var(--marsal-color-textPrimary);
  font-family: var(--marsal-fontFamily-body-standard);
  font-size: var(--marsal-fontSize-body-standard);
  line-height: var(--marsal-lineHeight-body-standard);

  &[data-style="intro"] {
    font-size: var(--marsal-fontSize-body-large);
    line-height: var(--marsal-lineHeight-body-large);
  }

  &[data-style="compact"] {
    font-size: var(--marsal-fontSize-body-small);
    line-height: var(--marsal-lineHeight-body-small);
  }

  & > .marsal-prose__content {
    max-inline-size: var(--_length-measure);
    overflow-wrap: anywhere;

    /* Only inset hosts need containment: text shares the float's normal flow. */
    &:has([data-component-id="marsal_sdc:figure"]:is([data-alignment="inset_start"], [data-alignment="inset_end"])),
    & section:has([data-component-id="marsal_sdc:figure"]:is([data-alignment="inset_start"], [data-alignment="inset_end"])) {
      display: flow-root;
      container: marsal-sdc-prose-inset / inline-size;
      inline-size: 100%;
    }

    /* A new story section starts below the preceding photo. */
    &:has([data-component-id="marsal_sdc:figure"]:is([data-alignment="inset_start"], [data-alignment="inset_end"])) :is(h2, h3, h4, h5, h6, section):not([data-component-id], :where(.marsal-prose__content) [data-component-id] *) {
      clear: both;
    }

    & a:any-link:not([data-component-id], :where(.marsal-prose__content) [data-component-id] *) {
      text-decoration-line: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 0.2em;

      &:is(:hover, :focus) {
        text-decoration-thickness: 2px;
      }

      &:focus-visible {
        border-radius: 2px;
        outline: 3px solid var(--marsal-color-focusRing);
        outline-offset: 3px;
        box-shadow: 0 0 0 2px var(--marsal-color-focusRingContrast);
      }
    }
  }

  &[data-measure="narrow"] {
    --_length-measure: var(--marsal-length-contentWidth-veryNarrow);
  }

  &[data-measure="wide"] {
    --_length-measure: var(--marsal-length-contentWidth-wide);
  }

  &[data-measure="full"] {
    --_length-measure: none;
  }

  &[data-style="lead"] {
    container-type: inline-size;
    container-name: marsal-sdc-prose;
    /* Containment needs a width even when a Flex parent does not stretch it. */
    inline-size: 100%;
    max-inline-size: var(--_length-measure);
    color: var(--marsal-color-textStrong);
    font-family: var(--marsal-fontFamily-title-small);
    font-size: var(--marsal-fontSize-title-small);
    font-weight: var(--marsal-fontWeight-title-small);
    line-height: var(--marsal-lineHeight-title-small);
    letter-spacing: var(--marsal-letterSpacing-title-small);

    @container marsal-sdc-prose (min-width: 40rem) {
      & > .marsal-prose__content {
        font-family: var(--marsal-fontFamily-title-standard);
        font-size: var(--marsal-fontSize-title-standard);
        font-weight: var(--marsal-fontWeight-title-standard);
        line-height: var(--marsal-lineHeight-title-standard);
        letter-spacing: var(--marsal-letterSpacing-title-standard);
      }
    }
  }

  /* Short intro: body text in lines up to 38rem that steps up to body-large once
   * its own width reaches 36rem, and leaves space-s-m before what follows.
   */
  &[data-style="short_intro"] {
    container-type: inline-size;
    container-name: marsal-sdc-prose;
    /* Containment needs a width even when a Flex parent does not stretch it. */
    inline-size: 100%;
    max-inline-size: 38rem;
    text-wrap: pretty;

    &:not(:last-child) {
      margin-block-end: var(--marsal-space-s-m);
    }

    @container marsal-sdc-prose (min-width: 36rem) {
      & > .marsal-prose__content {
        font-family: var(--marsal-fontFamily-body-large);
        font-size: var(--marsal-fontSize-body-large);
        line-height: var(--marsal-lineHeight-body-large);
      }
    }
  }

  /* Checkmarks and Big numbers grow in a wider Prose; the lead is already a container. */
  &[data-list-style="checks"]:not([data-style="lead"]),
  &[data-list-style="numbers"]:not([data-style="lead"]) {
    container-type: inline-size;
    container-name: marsal-sdc-prose;
    /* Containment needs a width even when a Flex parent does not stretch it. */
    inline-size: 100%;
  }

  &[data-list-style="checks"] > .marsal-prose__content ul:not([data-component-id], :where(.marsal-prose__content) [data-component-id] *),
  &[data-list-style="numbers"] > .marsal-prose__content :is(ol, ul):not([data-component-id], :where(.marsal-prose__content) [data-component-id] *),
  &[data-list-style="questions"] > .marsal-prose__content :is(ol, ul):not([data-component-id], :where(.marsal-prose__content) [data-component-id] *) {
    padding: 0;
    list-style: none;
  }

  /* Checkmarks: a maize-tinted circle and a tick drawn with two borders. */
  &[data-list-style="checks"] > .marsal-prose__content ul:not([data-component-id], :where(.marsal-prose__content) [data-component-id] *) {
    display: grid;
    gap: var(--marsal-space-xs);

    & > li {
      position: relative;
      min-block-size: var(--_length-checkSize);
      padding-inline-start: calc(var(--_length-checkSize) + var(--marsal-space-xs));

      &::before {
        position: absolute;
        inset-block-start: calc((1lh - var(--_length-checkSize)) / 2);
        inset-inline-start: 0;
        inline-size: var(--_length-checkSize);
        block-size: var(--_length-checkSize);
        border-radius: 50%;
        /* The circle is a 28% tint of the accent divider color. */
        background: color-mix(in srgb, var(--marsal-color-dividerAccent) 28%, transparent);
        /* A zero-width space keeps the list role in Safari, which drops it for markerless lists. */
        content: "\200B";
      }

      &::after {
        position: absolute;
        inset-block-start: calc((1lh - var(--_length-checkSize)) / 2 + 0.4rem);
        inset-inline-start: 0.68rem;
        inline-size: 0.42rem;
        block-size: 0.78rem;
        border: solid var(--marsal-color-textBrand);
        border-width: 0 0.17rem 0.17rem 0;
        transform: rotate(45deg);
        content: "";
      }
    }
  }

  /* Bold lead words stay inline in Checkmarks and Big numbers. */
  &[data-list-style="checks"] > .marsal-prose__content ul:not([data-component-id], :where(.marsal-prose__content) [data-component-id] *) strong,
  &[data-list-style="numbers"] > .marsal-prose__content :is(ol, ul):not([data-component-id], :where(.marsal-prose__content) [data-component-id] *) strong {
    color: var(--marsal-color-textStrong);
    font-weight: var(--marsal-fontWeight-emphasis);
  }

  /* Big numbers: Rama Gothic numerals in outlined circles joined by a rail. */
  &[data-list-style="numbers"] > .marsal-prose__content :is(ol, ul):not([data-component-id], :where(.marsal-prose__content) [data-component-id] *) {
    counter-reset: marsal-prose-step;

    & > li {
      position: relative;
      min-block-size: var(--_length-numberSize);
      /* The first text line sits on the circle's centre line. */
      padding-block: max(0rem, calc((var(--_length-numberSize) - 1lh) / 2)) var(--marsal-space-m);
      padding-inline-start: calc(var(--_length-numberSize) + var(--marsal-space-s));
      counter-increment: marsal-prose-step;

      &:last-child {
        padding-block-end: 0;
      }

      &::before {
        /* The white circle keeps the theme's brand ink on every surface. */
        --marsal-color-textBrand: var(--marsal-color-textBrandTheme);

        position: absolute;
        inset-block-start: 0;
        inset-inline-start: 0;
        display: grid;
        place-items: center;
        inline-size: var(--_length-numberSize);
        block-size: var(--_length-numberSize);
        padding-block-start: 0.1em;
        border: 2px solid var(--marsal-color-textBrand);
        border-radius: 50%;
        background: var(--marsal-color-surfaceCanvas);
        color: var(--marsal-color-textBrand);
        font-family: var(--marsal-fontFamily-display-verySmall);
        font-size: var(--marsal-fontSize-display-verySmall);
        font-weight: var(--marsal-fontWeight-display-verySmall);
        line-height: var(--marsal-lineHeight-display-verySmall);
        content: counter(marsal-prose-step, decimal-leading-zero);
      }

      &:not(:last-child)::after {
        position: absolute;
        inset-block: calc(var(--_length-numberSize) + var(--marsal-space-4xs)) var(--marsal-space-4xs);
        inset-inline-start: calc(var(--_length-numberSize) / 2 - 1px);
        inline-size: 2px;
        background: var(--marsal-color-borderSubtle);
        content: "";
      }

      /* A bold phrase that opens a step takes the brand color but stays inline. */
      & > strong:first-child {
        color: var(--marsal-color-textBrand);
      }
    }
  }

  @container marsal-sdc-prose (min-width: 36rem) {
    &[data-list-style="checks"] > .marsal-prose__content ul:not([data-component-id], :where(.marsal-prose__content) [data-component-id] *) > li {
      padding-inline-start: calc(var(--_length-checkSize) + var(--marsal-space-s));
    }

    &[data-list-style="numbers"] > .marsal-prose__content :is(ol, ul):not([data-component-id], :where(.marsal-prose__content) [data-component-id] *) {
      --_length-numberSize: 3rem;
    }
  }

  /* Questions: each item a serif question, separated by hairlines. */
  &[data-list-style="questions"] > .marsal-prose__content :is(ol, ul):not([data-component-id], :where(.marsal-prose__content) [data-component-id] *) > li {
    padding-block: var(--marsal-space-s);
    color: var(--marsal-color-textStrong);
    font-family: var(--marsal-fontFamily-title-small);
    font-size: var(--marsal-fontSize-title-small);
    font-weight: var(--marsal-fontWeight-title-small);
    line-height: var(--marsal-lineHeight-title-small);
    letter-spacing: var(--marsal-letterSpacing-title-small);

    & + li {
      border-block-start: 1px solid var(--marsal-color-borderSubtle);
    }

    &:first-child {
      padding-block-start: 0;
    }

    /* A zero-width space keeps the list role in Safari, which drops it for markerless lists. */
    &::before {
      position: absolute;
      content: "\200B";
    }

    &:last-child {
      padding-block-end: 0;
    }
  }

  & > .marsal-prose__content > :first-child:not(:where([data-component-id="marsal_sdc:figure"]:is([data-alignment="inset_start"], [data-alignment="inset_end"]))) {
    margin-block-start: 0;
  }

  & > .marsal-prose__content > :last-child:not(:where([data-component-id="marsal_sdc:figure"]:is([data-alignment="inset_start"], [data-alignment="inset_end"]))) {
    margin-block-end: 0;
  }
}

/* @todo WORKAROUND: behavioursoe base.css:440-458 forces link color; delete when the theme is fixed. */
:where([data-component-id="marsal_sdc:prose"]) > .marsal-prose__content a:any-link:not([data-component-id], :where(.marsal-prose__content) [data-component-id] *) {
  color: var(--marsal-color-link);
}

/* List styles: rich-text lists get more air than paragraphs. */
:where([data-component-id="marsal_sdc:prose"][data-list-style="checks"]) > .marsal-prose__content > ul,
:where([data-component-id="marsal_sdc:prose"][data-list-style="numbers"]) > .marsal-prose__content > :is(ol, ul),
:where([data-component-id="marsal_sdc:prose"][data-list-style="questions"]) > .marsal-prose__content > :is(ol, ul) {
  margin-block: var(--marsal-space-m);
}