/* styles/sections/workflow-pieces.css
 * Stage strip and workflow "Up next" (canvas board u71Z29, "Component / workflow pieces";
 * Up next states on c1nk7, "Video controls and Up Next").
 * Same slot-and-custom-property approach as components.css. */
@layer sections {
  /* ---------- Stage strip ----------
   * <ol class="stage-strip" aria-label="Lifecycle stages">
   *   <li class="stage-strip__stage">Org</li>
   *   <li class="stage-strip__stage" aria-current="step">Goals</li> ...
   * </ol>
   * Cells share hairlines and split the width evenly from the M frame's 44px cell; a longer
   * label widens its own cell. Current stages (one or a run of them) take a fern tint, fern
   * semibold label and a 2px fern mark along the bottom. Below the M frame's 342px strip the
   * cells and the Roadmap cell shrink together to their labels, so all seven fit at 320.
   * If a strip still cannot fit it scrolls sideways rather than wrap; js/stage-strip.js sets
   * tabindex="0" only while it overflows, so keyboards can scroll it. */
  .stage-strip {
    --stage-current-bg: var(--fern-12);
    --stage-current-color: var(--fern);
    --stage-current-mark: var(--fern);
    --stage-color: var(--ink-55);
    --stage-rule: var(--ink-15);
    --stage-h: 32px;
    --stage-pad: 0 var(--space-4);
    --stage-size: 11px;
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--stage-rule);
    border-radius: var(--radius-sm);
    overflow-x: auto;
    scrollbar-width: thin;
  }

  @media (min-width: 900px) {
    .stage-strip {
      --stage-size: 13px;
    }
  }

  .stage-strip__stage {
    display: flex;
    flex: 1 1 44px;
    align-items: center;
    justify-content: center;
    min-height: calc(var(--stage-h) - 2px);
    padding: var(--stage-pad);
    font-size: var(--stage-size);
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    color: var(--stage-color);
  }

  /* The board (QAGV2) draws Roadmap, the longest label, in a fixed 75px cell; it gives way
     only when the strip is narrower than the M frame's */
  .stage-strip__stage--wide {
    flex: 0 1 75px;
  }

  .stage-strip__stage + .stage-strip__stage {
    border-inline-start: 1px solid var(--stage-rule);
  }

  .stage-strip__stage[aria-current="step"] {
    background: var(--stage-current-bg);
    box-shadow: inset 0 -2px 0 var(--stage-current-mark);
    color: var(--stage-current-color);
    font-weight: 600;
  }

  /* ---------- Workflow Up next ----------
   * <nav class="up-next" aria-labelledby="up-next-label">
   *   <h2 class="up-next__label" id="up-next-label">Up next</h2>
   *   <ul class="up-next__list"><li>
   *     <a class="up-next__card" href="..." aria-describedby="b1">
   *       <span class="up-next__index" aria-hidden="true">08</span>
   *       <span class="up-next__title">Release Readiness</span>
   *       <span class="up-next__body" id="b1">...</span>
   *     </a>
   *   </li></ul>
   * </nav>
   * The whole card is the link; the arrow is CSS. Cards sit side by side from D and stack
   * on M. The hairline under each card belongs to the list item, so the hover chip can grow
   * past it: the chip padding is offset with negative margin, so text and rules never move.
   * Hover: mint chip and the arrow 4px right. Pressed: solid fern. The page
   * being viewed is never listed, so there is no current state. */
  .up-next {
    --up-next-label-size: 14px;
    --up-next-index-size: 14px;
    --up-next-title-size: 19px;
    --up-next-title-lh: 1.25;
    --up-next-title-ls: -0.2px;
    --up-next-body-size: 15px;
    --up-next-body-lh: 1.5;
    --up-next-body-measure: none;
    --up-next-min: 20rem;
    --up-next-gap: 0 var(--space-40);
    --up-next-pad: var(--space-24);
    --up-next-col-gap: var(--space-20);
    --up-next-row-gap: var(--space-8);
    --up-next-arrow: 18px;
    --up-next-chip-x: var(--space-12);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .up-next__label {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--up-next-label-size);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0;
    color: var(--ink-muted);
  }

  .up-next__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--up-next-min)), 1fr));
    gap: var(--up-next-gap);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .up-next__list > li {
    border-bottom: 1px solid var(--line-2);
  }

  .up-next__card {
    --focus-offset: 2px;

    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: var(--up-next-col-gap);
    row-gap: var(--up-next-row-gap);
    align-items: center;
    min-height: 44px;
    margin: 0 -1px -1px;
    padding: calc(var(--up-next-pad) - 1px) 0;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--ink);
    text-decoration: none;
    transition: background-color var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
  }

  .up-next__card::after {
    content: "";
    grid-column: 3;
    grid-row: 1;
    width: var(--up-next-arrow);
    height: var(--up-next-arrow);
    background: currentcolor;
    mask: url("/assets/figures/ds/arrow-right.svg") center / contain no-repeat;
    transition: transform var(--dur-fast);
  }

  /* The index sits on the title's baseline (BRI-7805 J22): both in row 1, baseline-aligned
     (an item spanning rows takes no part in row baseline alignment). */
  .up-next__index {
    grid-row: 1;
    align-self: baseline;
    font-family: var(--font-mono);
    font-size: var(--up-next-index-size);
    line-height: 1.2;
    color: var(--ink-muted);
  }

  .up-next__title {
    align-self: baseline;
    font-size: var(--up-next-title-size);
    font-weight: 600;
    line-height: var(--up-next-title-lh);
    letter-spacing: var(--up-next-title-ls);
  }

  .up-next__body {
    grid-column: 2 / -1;
    max-width: var(--up-next-body-measure);
    font-size: var(--up-next-body-size);
    line-height: var(--up-next-body-lh);
    color: var(--ink-muted);
  }

  @media (hover: hover) {
    .up-next__card:hover {
      margin-inline: calc(-1 * var(--up-next-chip-x));
      padding-inline: calc(var(--up-next-chip-x) - 1px);
      background: var(--mint);
      color: var(--fern);
    }

    .up-next__card:hover .up-next__index {
      color: var(--fern);
    }

    .up-next__card:hover .up-next__body {
      color: var(--ink);
    }
  }

  @media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .up-next__card:is(:hover, :active)::after {
      transform: translateX(4px);
    }
  }

  .up-next__card:active {
    margin-inline: calc(-1 * var(--up-next-chip-x));
    padding-inline: calc(var(--up-next-chip-x) - 1px);
    background: var(--fern);
    color: var(--white);
  }

  .up-next__card:active .up-next__index {
    color: var(--white-70);
  }

  .up-next__card:active .up-next__body {
    color: var(--white-80);
  }

  /* Focus (board OaInr): the card shrinks 3px each side inside the ring and carries its own
     rule, so the 2px-offset ring hugs the card's column. */
  .up-next__card:focus-visible {
    margin-inline: 3px;
    padding-inline: 0;
    border-inline-width: 0;
    border-bottom-color: var(--line-2);
  }

  .up-next__list > li:has(> .up-next__card:focus-visible) {
    border-bottom-color: transparent;
  }

  @media (forced-colors: active) {
    .up-next__card::after {
      background: CanvasText;
      forced-color-adjust: none;
    }
  }
}