/**
 * @file grid.css
 * @component Grid (Layout)
 * @description Arranges adaptive, explicit, or balanced tracks with independent gaps.
 *
 * @section Public custom properties
 * --grid-length-minimumItemWidth-narrow   : Narrow minimum; defaults to 12rem.
 * --grid-length-minimumItemWidth-standard : Standard minimum; defaults to 16rem.
 * --grid-length-minimumItemWidth-wide     : Wide minimum; defaults to 22rem.
 * --grid-space-gap-veryTight              : Gap; defaults to space-5xs.
 * --grid-space-gap-tight                  : Gap; defaults to space-3xs.
 * --grid-space-gap-standard               : Gap; defaults to space-s.
 * --grid-space-gap-loose                  : Gap; defaults to space-l.
 * --grid-space-gap-veryLoose              : Gap; defaults to space-xl.
 *
 * @section Private custom properties
 * --_number-columnCount         : Validated explicit count; default 2.
 * --_length-minimumItemWidth    : Selected adaptive minimum item width.
 * --_space-columnGap            : Selected column gap.
 * --_space-rowGap               : Selected row gap.
 * --_trackList-templateColumns  : Adaptive track template.
 * --_trackList-splitColumns     : Selected pair of proportional tracks.
 * --_length-edge                : Inherited page edge, kept for the items that touch it.
 * --_length-splitEdge           : Split's inherited edge for explicitly stretched sections.
 * --_length-halfGap             : Half this Split's column gap while expanded, otherwise zero.
 * --_length-edgeStart           : Incoming start edge for a one-column section stack.
 * --_length-edgeEnd             : Incoming end edge for a one-column section stack.
 * --_length-stackEdge           : Split's window edge while it stacks; unset elsewhere.
 * --_display-columnLine         : Column line visibility in the expanded Split.
 * --_display-rowLine            : Row line visibility in a single-column layout.
 * --_color-gridLine             : Line color resolved in this Grid's theme context.
 * --_space-dividerGap           : This Grid's row gap, resolved before item inheritance.
 * --_inset-rowLineStart         : Row line inset in source stacking order.
 * --_inset-rowLineEnd           : Row line inset in reverse stacking order.
 * --_space-joinStart            : Row gap a joined band closes above it; zero while items sit side by side.
 * --_space-joinEnd              : Row gap a joined band closes below it, in a reverse stack only.
 */
:where([data-component-id="marsal_sdc:grid"]) {
  --_length-edge: var(--marsal-length-edge);
  --_length-edgeStart: var(--marsal-length-edgeStart);
  --_length-edgeEnd: var(--marsal-length-edgeEnd);
  --_length-halfGap: 0px;
  --_length-stackEdge: initial;
  --_number-columnCount: 2;
  --_length-minimumItemWidth: var(--grid-length-minimumItemWidth-standard, 16rem);
  --_space-columnGap: var(--grid-space-gap-standard, var(--marsal-space-s));
  --_space-rowGap: var(--grid-space-gap-standard, var(--marsal-space-s));
  --_trackList-splitColumns: minmax(0, 1fr) minmax(0, 1fr);
  --_trackList-templateColumns: repeat(
    auto-fit,
    minmax(min(100%, var(--_length-minimumItemWidth)), 1fr)
  );

  /* The inherited page lane; a containing surface has already stopped it. */
  padding-inline: var(--marsal-length-lane);
  min-inline-size: 0;
}

/* Split keeps the window edge separate from its automatic inward half-gap. */
:where([data-component-id="marsal_sdc:grid"][data-component-variant="split"]) {
  --_length-splitEdge: max(var(--marsal-length-edge), var(--marsal-length-edgeStart), var(--marsal-length-edgeEnd));

  container-name: marsal-sdc-grid;
  container-type: inline-size;
  /* Containment needs a width even when a Flex parent does not stretch it; the lane padding stays inside it. */
  box-sizing: border-box;
  inline-size: 100%;
}

:where([data-component-id="marsal_sdc:grid"][data-component-variant="split"][data-balance="side_first"]) {
  --_trackList-splitColumns: minmax(0, 1fr) minmax(0, 2fr);
}

:where([data-component-id="marsal_sdc:grid"][data-component-variant="split"][data-balance="side_last"]) {
  --_trackList-splitColumns: minmax(0, 2fr) minmax(0, 1fr);
}

:where([data-component-id="marsal_sdc:grid"][data-component-variant="split"][data-balance="narrow_side_first"]) {
  --_trackList-splitColumns: minmax(0, 1fr) minmax(0, 3fr);
}

:where([data-component-id="marsal_sdc:grid"][data-component-variant="split"][data-balance="narrow_side_last"]) {
  --_trackList-splitColumns: minmax(0, 3fr) minmax(0, 1fr);
}

:where([data-component-id="marsal_sdc:grid"][data-component-variant="split"][data-alignment="start"]) > .marsal-grid__items {
  align-items: start;
}

:where([data-component-id="marsal_sdc:grid"][data-component-variant="split"][data-alignment="center"]) > .marsal-grid__items {
  align-items: center;
}

:where([data-component-id="marsal_sdc:grid"][data-component-variant="split"][data-alignment="stretch"]) > .marsal-grid__items {
  align-items: stretch;
}

:where(
  [data-component-id="marsal_sdc:grid"][data-component-variant="columns"]
) {
  container-name: marsal-sdc-grid;
  container-type: inline-size;
}

/*
 * Only a Container extends its background to the page edge, and a bleeding
 * first or last item overshoots by half a classic scrollbar. Only a Grid that
 * holds a Container clips, so a Grid of cards keeps the focus rings at its
 * sides whole. Clip, unlike hidden, keeps sticky content working.
 */
:where([data-component-id="marsal_sdc:grid"][data-component-variant="columns"]:has(> .marsal-grid__items [data-component-id="marsal_sdc:container"])) {
  overflow-x: clip;
}

/* The outer lane clips the scrollbar allowance in the shared page-edge token. */
:where([data-component-id="marsal_sdc:grid"][data-component-variant="split"]):has(> .marsal-grid__items [data-component-id="marsal_sdc:grid_item"][data-window-edge]:not([data-window-edge="none"])) {
  overflow-x: clip;
}

/* An explicitly stretched section passes the nested Grid's inline boundary. */
:where([data-component-id="marsal_sdc:grid"]) > .marsal-grid__items :where([data-component-id="marsal_sdc:grid"][data-component-variant="columns"]):has(> .marsal-grid__items [data-component-id="marsal_sdc:grid_item"][data-window-edge]:not([data-window-edge="none"])) {
  overflow-x: visible;
}

:where(
  [data-component-id="marsal_sdc:grid"][data-minimum-item-width="narrow"]
) {
  --_length-minimumItemWidth: var(--grid-length-minimumItemWidth-narrow, 12rem);
}

:where(
  [data-component-id="marsal_sdc:grid"][data-minimum-item-width="wide"]
) {
  --_length-minimumItemWidth: var(--grid-length-minimumItemWidth-wide, 22rem);
}

:where(
  [data-component-id="marsal_sdc:grid"][data-empty-tracks="preserve"]
) {
  --_trackList-templateColumns: repeat(
    auto-fill,
    minmax(min(100%, var(--_length-minimumItemWidth)), 1fr)
  );
}

:where([data-component-id="marsal_sdc:grid"][data-column-gap="none"]) {
  --_space-columnGap: 0px;
}

:where([data-component-id="marsal_sdc:grid"][data-column-gap="very_tight"]) {
  --_space-columnGap: var(--grid-space-gap-veryTight, var(--marsal-space-5xs));
}

:where([data-component-id="marsal_sdc:grid"][data-column-gap="tight"]) {
  --_space-columnGap: var(--grid-space-gap-tight, var(--marsal-space-3xs));
}

:where([data-component-id="marsal_sdc:grid"][data-column-gap="loose"]) {
  --_space-columnGap: var(--grid-space-gap-loose, var(--marsal-space-l));
}

:where([data-component-id="marsal_sdc:grid"][data-column-gap="very_loose"]) {
  --_space-columnGap: var(--grid-space-gap-veryLoose, var(--marsal-space-xl));
}

:where([data-component-id="marsal_sdc:grid"][data-row-gap="none"]) {
  --_space-rowGap: 0px;
}

:where([data-component-id="marsal_sdc:grid"][data-row-gap="very_tight"]) {
  --_space-rowGap: var(--grid-space-gap-veryTight, var(--marsal-space-5xs));
}

:where([data-component-id="marsal_sdc:grid"][data-row-gap="tight"]) {
  --_space-rowGap: var(--grid-space-gap-tight, var(--marsal-space-3xs));
}

:where([data-component-id="marsal_sdc:grid"][data-row-gap="loose"]) {
  --_space-rowGap: var(--grid-space-gap-loose, var(--marsal-space-l));
}

:where([data-component-id="marsal_sdc:grid"][data-row-gap="very_loose"]) {
  --_space-rowGap: var(--grid-space-gap-veryLoose, var(--marsal-space-xl));
}

/* Space before and after the items uses Container's padding steps; none adds nothing. */
:where([data-component-id="marsal_sdc:grid"][data-padding-before="tight"]) {
  padding-block-start: var(--marsal-space-m-xl);
}

:where([data-component-id="marsal_sdc:grid"][data-padding-before="standard"]) {
  padding-block-start: var(--marsal-space-sectionGap);
}

:where([data-component-id="marsal_sdc:grid"][data-padding-before="loose"]) {
  padding-block-start: var(--marsal-space-xl-4xl);
}

:where([data-component-id="marsal_sdc:grid"][data-padding-after="tight"]) {
  padding-block-end: var(--marsal-space-m-xl);
}

:where([data-component-id="marsal_sdc:grid"][data-padding-after="standard"]) {
  padding-block-end: var(--marsal-space-sectionGap);
}

:where([data-component-id="marsal_sdc:grid"][data-padding-after="loose"]) {
  padding-block-end: var(--marsal-space-xl-4xl);
}

:where([data-component-id="marsal_sdc:grid"]) > .marsal-grid__items {
  --_display-columnLine: none;
  --_display-rowLine: none;
  --_color-gridLine: var(--marsal-color-borderSubtle);
  --_space-dividerGap: var(--_space-rowGap);
  --_inset-rowLineStart: calc(var(--_space-dividerGap) / -2 - min(1px, var(--_space-dividerGap)) / 2);
  --_inset-rowLineEnd: auto;
  --_space-joinStart: 0px;
  --_space-joinEnd: 0px;

  display: grid;
  grid-template-columns: var(--_trackList-templateColumns);
  grid-auto-flow: row;
  column-gap: var(--_space-columnGap);
  row-gap: var(--_space-rowGap);

  @media (forced-colors: active) {
    --_color-gridLine: CanvasText;
  }

  & > * {
    --marsal-length-lane: 0px;
    --marsal-length-edge: 0px;
    --marsal-length-edgeStart: 0px;
    --marsal-length-edgeEnd: 0px;

    min-inline-size: 0;
  }
}

/* Single-column lines span only this Grid's lane, including in RTL. */
:where([data-component-id="marsal_sdc:grid"][data-row-dividers="true"]:is([data-component-variant="columns"], [data-component-variant="split"])) > .marsal-grid__items {
  --_display-rowLine: block;

  & > * {
    position: relative;
  }

  /* Each non-first source item borders its predecessor: above, or below in reverse. */
  & > :not(:first-child)::before {
    content: "";
    display: var(--_display-rowLine);
    position: absolute;
    inset-inline: 0;
    inset-block-start: var(--_inset-rowLineStart);
    inset-block-end: var(--_inset-rowLineEnd);
    block-size: min(1px, var(--_space-dividerGap));
    background: var(--_color-gridLine);
    pointer-events: none;
  }

  /* A Grid Item holding a painted Container replaces both adjacent row lines,
   * whatever its window edge. The item owns the line toward its predecessor;
   * its next sibling owns the other. This remains true in reverse stacks,
   * through the sticky wrapper and with a plain editor wrapper.
   */
  & > :where([data-component-id="marsal_sdc:grid_item"]:has(> [data-component-id="marsal_sdc:container"][data-background-surface], > .marsal-grid-item__sticky > [data-component-id="marsal_sdc:container"][data-background-surface])),
  & > :where([data-component-id="marsal_sdc:grid_item"]:has(> [data-component-id="marsal_sdc:container"][data-background-surface], > .marsal-grid-item__sticky > [data-component-id="marsal_sdc:container"][data-background-surface])) + *,
  & > :where(div.contextual-region:not([data-component-id]):has(> [data-component-id="marsal_sdc:grid_item"] > [data-component-id="marsal_sdc:container"][data-background-surface], > [data-component-id="marsal_sdc:grid_item"] > .marsal-grid-item__sticky > [data-component-id="marsal_sdc:container"][data-background-surface])),
  & > :where(div.contextual-region:not([data-component-id]):has(> [data-component-id="marsal_sdc:grid_item"] > [data-component-id="marsal_sdc:container"][data-background-surface], > [data-component-id="marsal_sdc:grid_item"] > .marsal-grid-item__sticky > [data-component-id="marsal_sdc:container"][data-background-surface])) + * {
    --_display-rowLine: none;
  }

  /* A Grid Item with its row line off drops the line toward its predecessor,
   * directly or inside a plain editor wrapper.
   */
  & > :where([data-component-id="marsal_sdc:grid_item"][data-row-divider="false"]),
  & > :where(div.contextual-region:not([data-component-id]):has(> [data-component-id="marsal_sdc:grid_item"][data-row-divider="false"])) {
    --_display-rowLine: none;
  }
}

/* Set column count and Split join neighbouring colour bands wherever their items stack in one column. */
:where([data-component-id="marsal_sdc:grid"]:is([data-component-variant="columns"], [data-component-variant="split"])) > .marsal-grid__items {
  --_space-joinStart: var(--_space-rowGap);

  /* A Grid Item whose Container has a background surface closes the row gap
   * to the item before it when that item's Container also has one, whatever
   * the two colours, so the two colour blocks meet with no gap; each
   * Container keeps its own padding. The later source item moves, above or,
   * in a reverse stack, below. This remains true through the sticky wrapper
   * and with a plain editor wrapper.
   */
  & > :where([data-component-id="marsal_sdc:grid_item"]:has(> [data-component-id="marsal_sdc:container"][data-background-surface], > .marsal-grid-item__sticky > [data-component-id="marsal_sdc:container"][data-background-surface]), div.contextual-region:not([data-component-id]):has(> [data-component-id="marsal_sdc:grid_item"] > [data-component-id="marsal_sdc:container"][data-background-surface], > [data-component-id="marsal_sdc:grid_item"] > .marsal-grid-item__sticky > [data-component-id="marsal_sdc:container"][data-background-surface])) + :where([data-component-id="marsal_sdc:grid_item"]:has(> [data-component-id="marsal_sdc:container"][data-background-surface], > .marsal-grid-item__sticky > [data-component-id="marsal_sdc:container"][data-background-surface]), div.contextual-region:not([data-component-id]):has(> [data-component-id="marsal_sdc:grid_item"] > [data-component-id="marsal_sdc:container"][data-background-surface], > [data-component-id="marsal_sdc:grid_item"] > .marsal-grid-item__sticky > [data-component-id="marsal_sdc:container"][data-background-surface])) {
    margin-block-start: calc(-1 * var(--_space-joinStart));
    margin-block-end: calc(-1 * var(--_space-joinEnd));
  }
}

/* A track-anchored line fills the row regardless of item order or alignment. */
:where([data-component-id="marsal_sdc:grid"][data-component-variant="split"][data-column-dividers="true"]) > .marsal-grid__items {
  position: relative;

  &:has(> :nth-child(2)):not(:has(> :nth-child(3)))::after {
    content: "";
    display: var(--_display-columnLine);
    position: absolute;
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    inset-block: 0;
    inset-inline-end: calc(var(--_space-columnGap) / -2 - min(1px, var(--_space-columnGap)) / 2);
    inline-size: min(1px, var(--_space-columnGap));
    background: var(--_color-gridLine);
    pointer-events: none;
  }
}

/* Container extends only its background; its equal padding preserves the lane. */
@media screen {
  :where([data-component-id="marsal_sdc:grid"]) > .marsal-grid__items > :where([data-component-id="marsal_sdc:grid_item"][data-window-edge]:not([data-window-edge="none"], [data-db-root], [data-db-root] *)) > :where([data-component-id="marsal_sdc:container"]),
  :where([data-component-id="marsal_sdc:grid"]) > .marsal-grid__items > :where([data-component-id="marsal_sdc:grid_item"][data-window-edge]:not([data-window-edge="none"], [data-db-root], [data-db-root] *)) > .marsal-grid-item__sticky > :where([data-component-id="marsal_sdc:container"]) {
    --marsal-length-lane: 0px;
    --marsal-length-edgeStart: 0px;
    --marsal-length-edgeEnd: 0px;
  }

  /* Keep the opposite Split gap when an explicit window side is selected. */
  :where([data-component-id="marsal_sdc:grid"][data-component-variant="split"], [data-component-id="marsal_sdc:grid"][data-component-variant="split"] [data-component-id="marsal_sdc:grid"]) > .marsal-grid__items > :where([data-component-id="marsal_sdc:grid_item"][data-window-edge]:not([data-window-edge="none"], [data-db-root], [data-db-root] *)) > :where([data-component-id="marsal_sdc:container"]),
  :where([data-component-id="marsal_sdc:grid"][data-component-variant="split"], [data-component-id="marsal_sdc:grid"][data-component-variant="split"] [data-component-id="marsal_sdc:grid"]) > .marsal-grid__items > :where([data-component-id="marsal_sdc:grid_item"][data-window-edge]:not([data-window-edge="none"], [data-db-root], [data-db-root] *)) > .marsal-grid-item__sticky > :where([data-component-id="marsal_sdc:container"]) {
    --marsal-length-edgeStart: inherit;
    --marsal-length-edgeEnd: inherit;
  }

  :where([data-component-id="marsal_sdc:grid"]) > .marsal-grid__items {
    & > :where([data-component-id="marsal_sdc:grid_item"]:is([data-window-edge="start"], [data-window-edge="both"]):not([data-db-root], [data-db-root] *)) > :where([data-component-id="marsal_sdc:container"]),
    & > :where([data-component-id="marsal_sdc:grid_item"]:is([data-window-edge="start"], [data-window-edge="both"]):not([data-db-root], [data-db-root] *)) > .marsal-grid-item__sticky > :where([data-component-id="marsal_sdc:container"]) {
      --marsal-length-edgeStart: max(var(--_length-edge, 0px), var(--_length-splitEdge, 0px));
    }

    & > :where([data-component-id="marsal_sdc:grid_item"]:is([data-window-edge="end"], [data-window-edge="both"]):not([data-db-root], [data-db-root] *)) > :where([data-component-id="marsal_sdc:container"]),
    & > :where([data-component-id="marsal_sdc:grid_item"]:is([data-window-edge="end"], [data-window-edge="both"]):not([data-db-root], [data-db-root] *)) > .marsal-grid-item__sticky > :where([data-component-id="marsal_sdc:container"]) {
      --marsal-length-edgeEnd: max(var(--_length-edge, 0px), var(--_length-splitEdge, 0px));
    }
  }
}

:where(
  [data-component-id="marsal_sdc:grid"][data-component-variant="columns"]
) > .marsal-grid__items {
  grid-template-columns: minmax(0, 1fr);

  /* Set column count hands the page edge to the items that touch it. */
  & > :first-child {
    --marsal-length-edgeStart: var(--_length-edge);
  }

  & > :last-child {
    --marsal-length-edgeEnd: var(--_length-edge);
  }
}

:where([data-component-id="marsal_sdc:grid"][data-component-variant="split"]) > .marsal-grid__items {
  grid-template-columns: minmax(0, 1fr);

  /* Window-edge choices identify the outer side even for reordered columns. */
  & > :where(:nth-child(odd):not([data-window-edge="end"], [data-window-edge="both"]), [data-window-edge="start"]) {
    --marsal-length-edgeEnd: var(--_length-halfGap);
  }

  & > :where(:nth-child(even):not([data-window-edge="start"], [data-window-edge="both"]), [data-window-edge="end"]) {
    --marsal-length-edgeStart: var(--_length-halfGap);
  }

  /* A selected outer side also locates its neighbour in a reordered pair. */
  &:has(> :nth-child(2)[data-window-edge="start"]):not(:has(> :nth-child(3))) > :first-child {
    --marsal-length-edgeStart: var(--_length-halfGap);
    --marsal-length-edgeEnd: 0px;
  }

  &:has(> :first-child[data-window-edge="end"]):not(:has(> :nth-child(3))) > :nth-child(2) {
    --marsal-length-edgeStart: 0px;
    --marsal-length-edgeEnd: var(--_length-halfGap);
  }
}

/* Only a surface consumes gap reach; explicit window rules still win. */
:where([data-component-id="marsal_sdc:grid"][data-component-variant="split"]) :where([data-component-id="marsal_sdc:container"]:not([data-background-surface])) {
  --marsal-length-edgeStart: 0px;
  --marsal-length-edgeEnd: 0px;
}

/* Section stacks relay their incoming edges and a stacked Split's window edge, not their own column gap. */
:where([data-component-id="marsal_sdc:grid"][data-component-variant="split"]) :where([data-component-id="marsal_sdc:grid"][data-component-variant="columns"][data-single-column="true"]) {
  --_length-stackEdge: inherit;

  overflow-x: visible;

  & > .marsal-grid__items > :nth-child(n) {
    --marsal-length-edgeStart: var(--_length-edgeStart);
    --marsal-length-edgeEnd: var(--_length-edgeEnd);
  }
}

@container marsal-sdc-grid (min-width: 30rem) {
  :where(
    [data-component-id="marsal_sdc:grid"][data-component-variant="columns"][data-stack-below="narrow"]
  ) > .marsal-grid__items {
    grid-template-columns: repeat(
      var(--_number-columnCount),
      minmax(0, 1fr)
    );
  }

  :where([data-component-id="marsal_sdc:grid"][data-component-variant="columns"][data-stack-below="narrow"]:not([data-single-column="true"])) > .marsal-grid__items {
    --_display-rowLine: none;
    --_space-joinStart: 0px;
  }

  :where([data-component-id="marsal_sdc:grid"][data-component-variant="split"][data-stack-below="narrow"]) > .marsal-grid__items {
    grid-template-columns: var(--_trackList-splitColumns);
    --_length-halfGap: calc(var(--_space-columnGap) / 2);
    --_display-columnLine: block;
    --_display-rowLine: none;
    --_space-joinStart: 0px;
  }
}

@container marsal-sdc-grid (min-width: 48rem) {
  :where(
    [data-component-id="marsal_sdc:grid"][data-component-variant="columns"][data-stack-below="standard"]
  ) > .marsal-grid__items {
    grid-template-columns: repeat(
      var(--_number-columnCount),
      minmax(0, 1fr)
    );
  }

  :where([data-component-id="marsal_sdc:grid"][data-component-variant="columns"][data-stack-below="standard"]:not([data-single-column="true"])) > .marsal-grid__items {
    --_display-rowLine: none;
    --_space-joinStart: 0px;
  }

  :where([data-component-id="marsal_sdc:grid"][data-component-variant="split"][data-stack-below="standard"]) > .marsal-grid__items {
    grid-template-columns: var(--_trackList-splitColumns);
    --_length-halfGap: calc(var(--_space-columnGap) / 2);
    --_display-columnLine: block;
    --_display-rowLine: none;
    --_space-joinStart: 0px;
  }
}

@container marsal-sdc-grid (min-width: 64rem) {
  :where(
    [data-component-id="marsal_sdc:grid"][data-component-variant="columns"][data-stack-below="wide"]
  ) > .marsal-grid__items {
    grid-template-columns: repeat(
      var(--_number-columnCount),
      minmax(0, 1fr)
    );
  }

  :where([data-component-id="marsal_sdc:grid"][data-component-variant="columns"][data-stack-below="wide"]:not([data-single-column="true"])) > .marsal-grid__items {
    --_display-rowLine: none;
    --_space-joinStart: 0px;
  }

  :where([data-component-id="marsal_sdc:grid"][data-component-variant="split"][data-stack-below="wide"]) > .marsal-grid__items {
    grid-template-columns: var(--_trackList-splitColumns);
    --_length-halfGap: calc(var(--_space-columnGap) / 2);
    --_display-columnLine: block;
    --_display-rowLine: none;
    --_space-joinStart: 0px;
  }
}

/*
 * While stacked, every Set column count item touches both page edges.
 * Reverse only the stacked sequence; expanded tracks retain source order.
 */
@container marsal-sdc-grid (width < 30rem) {
  :where(
    [data-component-id="marsal_sdc:grid"][data-component-variant="columns"][data-stack-below="narrow"]
  ) > .marsal-grid__items > * {
    --marsal-length-edgeStart: var(--_length-edge);
    --marsal-length-edgeEnd: var(--_length-edge);
  }

  :where(
    [data-component-id="marsal_sdc:grid"][data-component-variant="columns"][data-stack-below="narrow"][data-stack-order="reverse"]
  ) > .marsal-grid__items {
    display: flex;
    flex-direction: column-reverse;
    --_inset-rowLineStart: auto;
    --_inset-rowLineEnd: calc(var(--_space-dividerGap) / -2 - min(1px, var(--_space-dividerGap)) / 2);
    --_space-joinStart: 0px;
    --_space-joinEnd: var(--_space-rowGap);
  }

  :where([data-component-id="marsal_sdc:grid"][data-component-variant="split"][data-stack-below="narrow"][data-stack-order="reverse"]) > .marsal-grid__items {
    display: flex;
    flex-direction: column-reverse;
    align-items: stretch;
    --_inset-rowLineStart: auto;
    --_inset-rowLineEnd: calc(var(--_space-dividerGap) / -2 - min(1px, var(--_space-dividerGap)) / 2);
    --_space-joinStart: 0px;
    --_space-joinEnd: var(--_space-rowGap);
  }
}

@container marsal-sdc-grid (width < 48rem) {
  :where(
    [data-component-id="marsal_sdc:grid"][data-component-variant="columns"][data-stack-below="standard"]
  ) > .marsal-grid__items > * {
    --marsal-length-edgeStart: var(--_length-edge);
    --marsal-length-edgeEnd: var(--_length-edge);
  }

  :where(
    [data-component-id="marsal_sdc:grid"][data-component-variant="columns"][data-stack-below="standard"][data-stack-order="reverse"]
  ) > .marsal-grid__items {
    display: flex;
    flex-direction: column-reverse;
    --_inset-rowLineStart: auto;
    --_inset-rowLineEnd: calc(var(--_space-dividerGap) / -2 - min(1px, var(--_space-dividerGap)) / 2);
    --_space-joinStart: 0px;
    --_space-joinEnd: var(--_space-rowGap);
  }

  :where([data-component-id="marsal_sdc:grid"][data-component-variant="split"][data-stack-below="standard"][data-stack-order="reverse"]) > .marsal-grid__items {
    display: flex;
    flex-direction: column-reverse;
    align-items: stretch;
    --_inset-rowLineStart: auto;
    --_inset-rowLineEnd: calc(var(--_space-dividerGap) / -2 - min(1px, var(--_space-dividerGap)) / 2);
    --_space-joinStart: 0px;
    --_space-joinEnd: var(--_space-rowGap);
  }
}

@container marsal-sdc-grid (width < 64rem) {
  :where(
    [data-component-id="marsal_sdc:grid"][data-component-variant="columns"][data-stack-below="wide"]
  ) > .marsal-grid__items > * {
    --marsal-length-edgeStart: var(--_length-edge);
    --marsal-length-edgeEnd: var(--_length-edge);
  }

  :where(
    [data-component-id="marsal_sdc:grid"][data-component-variant="columns"][data-stack-below="wide"][data-stack-order="reverse"]
  ) > .marsal-grid__items {
    display: flex;
    flex-direction: column-reverse;
    --_inset-rowLineStart: auto;
    --_inset-rowLineEnd: calc(var(--_space-dividerGap) / -2 - min(1px, var(--_space-dividerGap)) / 2);
    --_space-joinStart: 0px;
    --_space-joinEnd: var(--_space-rowGap);
  }

  :where([data-component-id="marsal_sdc:grid"][data-component-variant="split"][data-stack-below="wide"][data-stack-order="reverse"]) > .marsal-grid__items {
    display: flex;
    flex-direction: column-reverse;
    align-items: stretch;
    --_inset-rowLineStart: auto;
    --_inset-rowLineEnd: calc(var(--_space-dividerGap) / -2 - min(1px, var(--_space-dividerGap)) / 2);
    --_space-joinStart: 0px;
    --_space-joinEnd: var(--_space-rowGap);
  }
}

/*
 * A stacked Split column spans the window, so a start or end window edge
 * reaches both sides of it. The Split's own items take it here; section stack
 * items read the stacked edge instead of their relayed edges. Only an item
 * holding a direct Container takes it, so other painted content keeps its
 * lane, and expanded columns keep their gap edges.
 */
@media screen {
  @container marsal-sdc-grid (width < 30rem) {
    :where([data-component-id="marsal_sdc:grid"][data-component-variant="split"][data-stack-below="narrow"]) > .marsal-grid__items {
      --_length-stackEdge: var(--_length-splitEdge);

      & > :where([data-component-id="marsal_sdc:grid_item"]:is([data-window-edge="start"], [data-window-edge="end"]):has(> [data-component-id="marsal_sdc:container"], > .marsal-grid-item__sticky > [data-component-id="marsal_sdc:container"]):not([data-db-root], [data-db-root] *)) {
        --marsal-length-edgeStart: var(--_length-stackEdge);
        --marsal-length-edgeEnd: var(--_length-stackEdge);
      }
    }
  }

  @container marsal-sdc-grid (width < 48rem) {
    :where([data-component-id="marsal_sdc:grid"][data-component-variant="split"][data-stack-below="standard"]) > .marsal-grid__items {
      --_length-stackEdge: var(--_length-splitEdge);

      & > :where([data-component-id="marsal_sdc:grid_item"]:is([data-window-edge="start"], [data-window-edge="end"]):has(> [data-component-id="marsal_sdc:container"], > .marsal-grid-item__sticky > [data-component-id="marsal_sdc:container"]):not([data-db-root], [data-db-root] *)) {
        --marsal-length-edgeStart: var(--_length-stackEdge);
        --marsal-length-edgeEnd: var(--_length-stackEdge);
      }
    }
  }

  @container marsal-sdc-grid (width < 64rem) {
    :where([data-component-id="marsal_sdc:grid"][data-component-variant="split"][data-stack-below="wide"]) > .marsal-grid__items {
      --_length-stackEdge: var(--_length-splitEdge);

      & > :where([data-component-id="marsal_sdc:grid_item"]:is([data-window-edge="start"], [data-window-edge="end"]):has(> [data-component-id="marsal_sdc:container"], > .marsal-grid-item__sticky > [data-component-id="marsal_sdc:container"]):not([data-db-root], [data-db-root] *)) {
        --marsal-length-edgeStart: var(--_length-stackEdge);
        --marsal-length-edgeEnd: var(--_length-stackEdge);
      }
    }
  }

  :where([data-component-id="marsal_sdc:grid"][data-component-variant="split"]) :where([data-component-id="marsal_sdc:grid"][data-component-variant="columns"][data-single-column="true"]) > .marsal-grid__items > :nth-child(n):where([data-component-id="marsal_sdc:grid_item"]:is([data-window-edge="start"], [data-window-edge="end"]):has(> [data-component-id="marsal_sdc:container"], > .marsal-grid-item__sticky > [data-component-id="marsal_sdc:container"]):not([data-db-root], [data-db-root] *)) {
    --marsal-length-edgeStart: var(--_length-stackEdge, var(--_length-edgeStart));
    --marsal-length-edgeEnd: var(--_length-stackEdge, var(--_length-edgeEnd));
  }
}

/* Keep a plain entity wrapper from interrupting Card height and track sizing.
 * Row dividers need the wrapper's box; otherwise the Card is the grid item.
 */
:where([data-component-id="marsal_sdc:grid"]) > .marsal-grid__items > :where(div:not([data-component-id]):has(> [data-component-id="marsal_sdc:card"]:only-child)) {
  display: grid;
}

:where([data-component-id="marsal_sdc:grid"][data-row-dividers="false"]) > .marsal-grid__items > :where(div:not([data-component-id]):has(> [data-component-id="marsal_sdc:card"]:only-child)) {
  display: contents;
}

/* People roster, an explicit Set column count choice kept to Narrow stacking
 * in source order: compact rows below 36rem, up to two columns from 36rem and
 * the chosen count from 44rem, with its own XS column and XL row spacing. The
 * opt-in attribute adds specificity, so this compound selector, not source
 * order, decides over the Narrow stage and the gap choices. It holds whether
 * or not the item wrappers carry Drupal's editor-only contextual links
 * placeholder, so editors see the roster visitors see.
 */
:where([data-component-id="marsal_sdc:grid"][data-component-variant="columns"][data-stack-below="narrow"][data-stack-order="source"])[data-people-roster="true"] > .marsal-grid__items {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  column-gap: var(--marsal-space-xs);
  row-gap: 0;
  border-block-start: 1px solid var(--marsal-color-borderSubtle);

  @container marsal-sdc-grid (min-width: 36rem) {
    grid-template-columns: repeat(min(2, var(--_number-columnCount)), minmax(0, 1fr));
    row-gap: var(--marsal-space-xl);
    border-block-start: 0;
  }

  @container marsal-sdc-grid (min-width: 44rem) {
    grid-template-columns: repeat(var(--_number-columnCount), minmax(0, 1fr));
  }
}

/* @todo WORKAROUND: behavioursoe listing.css:28-31 (.marsal-container__content .contextual-region) gives an editor's item wrapper 35px and 45px block margins once the contextual links placeholder keeps it a box; delete when the theme is fixed. */
:where([data-component-id="marsal_sdc:grid"][data-component-variant="columns"][data-stack-below="narrow"][data-stack-order="source"])[data-people-roster="true"] > .marsal-grid__items > div.contextual-region:not([data-component-id]) {
  margin-block: 0;
}

/* From 36rem the roster stacks each Person portrait above its text, for cards
 * placed directly or each inside a plain wrapper, including one that also
 * holds the contextual links placeholder, so editors see visitors' portraits.
 * Person cards anywhere else keep the portrait beside the text.
 */
@container marsal-sdc-grid (min-width: 36rem) {
  :where([data-component-id="marsal_sdc:grid"][data-component-variant="columns"][data-stack-below="narrow"][data-stack-order="source"])[data-people-roster="true"] > .marsal-grid__items > :where([data-component-id="marsal_sdc:card"][data-component-variant="person"]) > .marsal-card__layout,
  :where([data-component-id="marsal_sdc:grid"][data-component-variant="columns"][data-stack-below="narrow"][data-stack-order="source"])[data-people-roster="true"] > .marsal-grid__items > :where(div:not([data-component-id])) > :where([data-component-id="marsal_sdc:card"][data-component-variant="person"]) > .marsal-card__layout {
    grid-template-columns: minmax(0, 1fr);
    padding-block: 0;
    border-block-end: 0;
  }
}

@media print {
  :where([data-component-id="marsal_sdc:grid"]) > .marsal-grid__items {
    --_display-columnLine: none;
    --_display-rowLine: none;
  }
}