/**
 * @file detail.css
 * @component Detail (Internal)
 * @description Groups one definition term, value, optional short note and actions.
 *
 * @section Public custom properties
 * None.
 *
 * @section Private custom properties
 * None.
 */
:where([data-component-id="marsal_sdc:detail"]) {
  display: grid;
  gap: var(--marsal-space-2xs);
  min-inline-size: 0;
  padding-block: var(--marsal-space-xs);
  color: var(--marsal-color-textPrimary);

  &[data-state="positive"] {
    color: var(--marsal-color-textStatusSuccess);
  }

  &[data-state="warning"] {
    color: var(--marsal-color-textStatusWarning);
  }

  &[data-state="negative"] {
    color: var(--marsal-color-textStatusError);
  }

  & > .marsal-detail__term-wrapper {
    display: flex;
    gap: var(--marsal-space-2xs);
    align-items: center;
    min-inline-size: 0;
    overflow-wrap: anywhere;
    font-family: var(--marsal-fontFamily-label-small);
    font-weight: var(--marsal-fontWeight-label-small);

    /* An eyebrow takes its own line above the term, space-5xs apart. */
    &:where(:has(> .marsal-detail__eyebrow)) {
      flex-wrap: wrap;
      row-gap: var(--marsal-space-5xs);
    }

    & > .marsal-detail__eyebrow {
      display: block;
      flex-basis: 100%;
      color: var(--marsal-color-textBrand);
      font-family: var(--marsal-fontFamily-label-verySmall);
      font-size: var(--marsal-fontSize-label-verySmall);
      font-weight: var(--marsal-fontWeight-label-verySmall);
      line-height: var(--marsal-lineHeight-label-verySmall);
      letter-spacing: var(--marsal-letterSpacing-label-verySmall);
      text-transform: uppercase;
    }
  }

  & > .marsal-detail__value {
    min-inline-size: 0;
    margin-inline-start: 0;

    & > .marsal-detail__value-content {
      min-inline-size: 0;
      overflow-wrap: anywhere;
    }

    & > .marsal-detail__supporting {
      min-inline-size: 0;
      margin-block-start: var(--marsal-space-2xs);
      color: var(--marsal-color-textMuted);
      font-family: var(--marsal-fontFamily-body-small);
      font-size: var(--marsal-fontSize-body-small);
      font-weight: var(--marsal-fontWeight-body-small);
      line-height: var(--marsal-lineHeight-body-small);
      letter-spacing: var(--marsal-letterSpacing-body-small);
      overflow-wrap: anywhere;
    }

    & > .marsal-detail__actions {
      margin-block-start: var(--marsal-space-2xs);
    }
  }
}

:where([data-component-id="marsal_sdc:detail_list"])[data-layout="strip"] {
  /* Detail List layouts reach only their own Details: a direct child, or one inside a plain wrapper.
     A hop through the value part sits in :where() so each rule keeps its specificity. */
  & > :where([data-component-id="marsal_sdc:detail"]) > .marsal-detail__term-wrapper,
  & > :where(:not([data-component-id])) > :where([data-component-id="marsal_sdc:detail"]) > .marsal-detail__term-wrapper {
    color: var(--marsal-color-textBrand);
    font-family: var(--marsal-fontFamily-label-verySmall);
    font-size: var(--marsal-fontSize-label-verySmall);
    font-weight: var(--marsal-fontWeight-label-verySmall);
    line-height: var(--marsal-lineHeight-label-verySmall);
    letter-spacing: var(--marsal-letterSpacing-label-verySmall);
    text-transform: uppercase;
  }

  & > :where([data-component-id="marsal_sdc:detail"]) > .marsal-detail__value,
  & > :where(:not([data-component-id])) > :where([data-component-id="marsal_sdc:detail"]) > .marsal-detail__value {
    margin: 0;
    color: var(--marsal-color-textStrong);
    font-family: var(--marsal-fontFamily-title-verySmall);
    font-size: var(--marsal-fontSize-title-verySmall);
    font-weight: var(--marsal-fontWeight-title-verySmall);
    line-height: var(--marsal-lineHeight-title-verySmall);
  }

  &[data-emphasis="label"] {
    /* Label emphasis: a natural-case title-standard date label over body-small value lines. */
    & > :where([data-component-id="marsal_sdc:detail"]) > .marsal-detail__term-wrapper,
    & > :where(:not([data-component-id])) > :where([data-component-id="marsal_sdc:detail"]) > .marsal-detail__term-wrapper {
      color: var(--marsal-color-textStrong);
      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);
      text-transform: none;
    }

    & > :where([data-component-id="marsal_sdc:detail"]) > .marsal-detail__value,
    & > :where(:not([data-component-id])) > :where([data-component-id="marsal_sdc:detail"]) > .marsal-detail__value {
      color: var(--marsal-color-textPrimary);
      font-family: var(--marsal-fontFamily-body-small);
      font-size: var(--marsal-fontSize-body-small);
      font-weight: var(--marsal-fontWeight-body-small);
      line-height: var(--marsal-lineHeight-body-small);
      letter-spacing: var(--marsal-letterSpacing-body-small);
    }
  }

  /* Keep field items and list entries as separate value lines inside the dd; nested components keep their own lists. */
  & > :where([data-component-id="marsal_sdc:detail"]) > :where(.marsal-detail__value) > .marsal-detail__value-content :where(.field__items, .field__item, .item-list, ul, ol, li):where(:not([data-component-id], :where(.marsal-detail__value-content) [data-component-id] *)),
  & > :where(:not([data-component-id])) > :where([data-component-id="marsal_sdc:detail"]) > :where(.marsal-detail__value) > .marsal-detail__value-content :where(.field__items, .field__item, .item-list, ul, ol, li):where(:not([data-component-id], :where(.marsal-detail__value-content) [data-component-id] *)) {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
    font: inherit;
    color: inherit;
  }

  & > :where([data-component-id="marsal_sdc:detail"]) > :where(.marsal-detail__value) > .marsal-detail__supporting,
  & > :where(:not([data-component-id])) > :where([data-component-id="marsal_sdc:detail"]) > :where(.marsal-detail__value) > .marsal-detail__supporting {
    display: block;
    margin-block-start: var(--marsal-space-5xs);
    color: var(--marsal-color-textMuted);
    font-family: var(--marsal-fontFamily-body-small);
    font-size: var(--marsal-fontSize-body-small);
    font-weight: var(--marsal-fontWeight-body-small);
    line-height: var(--marsal-lineHeight-body-small);
    letter-spacing: var(--marsal-letterSpacing-body-small);
  }
}

:where([data-component-id="marsal_sdc:detail_list"])[data-layout="questions"] {
  /* Questions and answers: the term is the question, with no mark or indent. */
  & > :where([data-component-id="marsal_sdc:detail"]) > .marsal-detail__term-wrapper,
  & > :where(:not([data-component-id])) > :where([data-component-id="marsal_sdc:detail"]) > .marsal-detail__term-wrapper {
    display: block;
    max-inline-size: 40rem;
    color: var(--marsal-color-textBrand);
    font-family: var(--marsal-fontFamily-title-small);
    font-size: var(--marsal-fontSize-title-small);
    font-weight: var(--marsal-fontWeight-emphasis);
    line-height: var(--marsal-lineHeight-title-small);
    letter-spacing: var(--marsal-letterSpacing-title-small);
    text-transform: none;
    text-wrap: pretty;
  }

  & > :where([data-component-id="marsal_sdc:detail"]) > .marsal-detail__value,
  & > :where(:not([data-component-id])) > :where([data-component-id="marsal_sdc:detail"]) > .marsal-detail__value {
    min-inline-size: 0;
    max-inline-size: 40rem;
    margin: 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);
    overflow-wrap: anywhere;
  }

  /* Answer blocks, such as paragraphs, sit space-xs apart. */
  & > :where([data-component-id="marsal_sdc:detail"]) > :where(.marsal-detail__value) > .marsal-detail__value-content > *,
  & > :where(:not([data-component-id])) > :where([data-component-id="marsal_sdc:detail"]) > :where(.marsal-detail__value) > .marsal-detail__value-content > * {
    margin-block-end: 0;
  }

  & > :where([data-component-id="marsal_sdc:detail"]) > :where(.marsal-detail__value) > .marsal-detail__value-content > :first-child,
  & > :where(:not([data-component-id])) > :where([data-component-id="marsal_sdc:detail"]) > :where(.marsal-detail__value) > .marsal-detail__value-content > :first-child {
    margin-block-start: 0;
  }

  & > :where([data-component-id="marsal_sdc:detail"]) > :where(.marsal-detail__value) > .marsal-detail__value-content > * + *,
  & > :where(:not([data-component-id])) > :where([data-component-id="marsal_sdc:detail"]) > :where(.marsal-detail__value) > .marsal-detail__value-content > * + * {
    margin-block-start: var(--marsal-space-xs);
  }
}

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

:where([data-component-id="marsal_sdc:detail_list"])[data-layout="questions"] {
  /* Plain answer links use one text underline. */
  & > :where([data-component-id="marsal_sdc:detail"]) > :where(.marsal-detail__value) > .marsal-detail__value-content a:any-link:not([data-component-id], :where(.marsal-detail__value-content) [data-component-id] *),
  & > :where(:not([data-component-id])) > :where([data-component-id="marsal_sdc:detail"]) > :where(.marsal-detail__value) > .marsal-detail__value-content a:any-link:not([data-component-id], :where(.marsal-detail__value-content) [data-component-id] *) {
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
  }

  & > :where([data-component-id="marsal_sdc:detail"]) > :where(.marsal-detail__value) > .marsal-detail__value-content a:any-link:not([data-component-id], :where(.marsal-detail__value-content) [data-component-id] *):is(:hover, :focus),
  & > :where(:not([data-component-id])) > :where([data-component-id="marsal_sdc:detail"]) > :where(.marsal-detail__value) > .marsal-detail__value-content a:any-link:not([data-component-id], :where(.marsal-detail__value-content) [data-component-id] *):is(:hover, :focus) {
    text-decoration-thickness: 2px;
  }

  & > :where([data-component-id="marsal_sdc:detail"]) > :where(.marsal-detail__value) > .marsal-detail__value-content a:any-link:not([data-component-id], :where(.marsal-detail__value-content) [data-component-id] *):focus-visible,
  & > :where(:not([data-component-id])) > :where([data-component-id="marsal_sdc:detail"]) > :where(.marsal-detail__value) > .marsal-detail__value-content a:any-link:not([data-component-id], :where(.marsal-detail__value-content) [data-component-id] *):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);
  }
}