/* styles/artifacts.css
 * Artifact shells and annotation. Board c1nk7. The shell standardizes the wrapper around a
 * product screenshot, mock, diagram or video; the artifact inside keeps its own styling.
 * Shells: .artifact-window (+ modifiers), .artifact-bar, .artifact-plate, .media-crop,
 * .figure-caption. Annotation: .annotation-marker, .annotation--hand. Product: .brief-avatar.
 * Video: .workflow-player (wired by js/workflow-player.js, markup from
 * scripts/lib/workflow-player.js). */
@layer artifacts {
  /* Window: the default shell. Edge and radius come from the surface tokens. The 1px edge is
     drawn inside the box, as Pencil draws strokes (an inset outline, not a border), so a
     window is as tall as its frame. --window-edge sets its colour. */
  .artifact-window {
    --window-edge: var(--line-2);
    overflow: hidden;
    background: var(--white);
    color: var(--ink);
    outline: 1px solid var(--window-edge);
    outline-offset: -1px;
    border-radius: var(--radius-lg);
  }

  .artifact-window--elevated { box-shadow: var(--elevation-window); }
  .artifact-window--soft { --window-edge: var(--line); }
  .artifact-window--strong { --window-edge: var(--rule-edge); }
  .artifact-window--md { border-radius: var(--radius-md); }
  /* Open: no clipping, so annotation markers can hang outside the edge (a window whose
     content stays clear of its rounded corners, as the Slack thread card in qqaHR) */
  .artifact-window--open { --window-overflow: visible; }


  /* --window-dark-bg and --window-dark-edge let a page's dark pane follow its frame */
  .artifact-window--dark {
    background: var(--window-dark-bg);
    color: var(--white);
    --window-edge: var(--window-dark-edge);
  }

  /* Sits on a fern or inverse band: no visible border, a deeper shadow (board: local
     0 24 56 black 25%) */
  .artifact-window--on-inverse {
    --window-edge: transparent;
    box-shadow: 0 24px 56px var(--black-25);
  }

  /* Bar: header strip of a window. Plain is the app-chrome default (Jira, Slack and so on). */
  .artifact-bar {
    display: flex;
    align-items: center;
    gap: var(--artifact-bar-row-gap, var(--space-10)) var(--space-10);
    min-height: var(--artifact-bar-h);
    padding-inline: var(--artifact-bar-pad, var(--space-24));
    background: var(--artifact-bar-bg);
    border-bottom: 1px solid var(--artifact-bar-edge);
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--ink-55);
  }

  /* --artifact-bar-pad, --artifact-bar-row-gap (a wrapping bar), --artifact-bar-app-weight,
     --artifact-bar-h, --artifact-bar-bg and --artifact-bar-edge let a page's bars follow its
     frame without overriding the shell */
  .artifact-bar > strong {
    color: var(--ink);
    font-weight: var(--artifact-bar-app-weight, 700);
  }

  /* Issue key pill (Jira), as on the bar board (TFU0V) */
  .artifact-bar__key {
    display: inline-flex;
    flex: none;
    align-items: center;
    height: 22px;
    padding-inline: var(--space-6);
    border-radius: 3px;
    background: var(--jira-key-bg);
    color: var(--jira-key);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
  }

  .artifact-bar--breadcrumb {
    min-height: 52px;
    padding-inline: var(--space-16);
    gap: var(--space-8);
    background: transparent;
    border-bottom-color: var(--line);
    color: var(--ink-muted);
  }

  .artifact-bar--breadcrumb > strong {
    font-weight: 600;
  }

  .artifact-bar__sep {
    color: var(--ink-sep);
  }

  .artifact-bar__spacer {
    flex: 1 1 auto;
  }

  .artifact-window--dark .artifact-bar--breadcrumb {
    border-bottom-color: var(--white-10);
    color: var(--white-65);
  }

  .artifact-window--dark .artifact-bar--breadcrumb > strong {
    color: var(--mist);
  }

  /* Plate: bare frame for diagrams and annotated artifacts. The border is optional. */
  .artifact-plate {
    overflow: hidden;
    border-radius: var(--radius-md);
  }

  .artifact-plate--bordered {
    border: 1px solid var(--rule-edge);
  }

  .artifact-window > img,
  .artifact-plate > img,
  .media-crop__frame > img {
    display: block;
    width: 100%;
    height: auto;
  }

  /* Media crop: a cropped screenshot with its caption beside it on D, below it on M */
  .media-crop {
    display: grid;
    gap: var(--space-40);
    align-items: center;
  }

  .media-crop__frame {
    overflow: hidden;
    border: 1px solid var(--rule-edge);
    border-radius: var(--radius-md);
  }

  /* Figure caption: mono label over a muted line of method or context */
  /* Lines sit on whole pixels, as the board draws them (szKBk: 13px label, 19px method lines) */
  .figure-caption {
    display: grid;
    gap: var(--space-4);
    margin: 0;
    font-family: var(--font-body);
    font-size: 13px;
    line-height: var(--figure-caption-lh);
    color: var(--ink-muted);
  }

  /* Board szKBk: the label line is 13px tall (11px type) on M. --figure-caption-lh,
     --figure-caption-label-size, -label-lh and -label-ls let a page's captions follow its frame. */
  .figure-caption__label {
    font-family: var(--font-mono);
    font-size: var(--figure-caption-label-size);
    font-weight: 500;
    line-height: var(--figure-caption-label-lh);
    letter-spacing: var(--figure-caption-label-ls);
    text-transform: uppercase;
    color: var(--ink);
  }

  /* --caption-side-lh (default 1.5): a page whose frames set the caption on whole pixels sets it */
  .figure-caption--side {
    font-size: 17px;
    line-height: var(--caption-side-lh, 1.5);
    color: var(--ink);
  }

  .figure-caption--side .figure-caption__label {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink-55);
  }

  /* Annotation marker: numbered dot laid over an artifact. Position it with inline
     inset values on a positioned parent. Orange is a mark, never text on its own. The
     numeral is white for contrast against the orange (Stephan, Oct 16; 3.2:1, below AA for
     12px, ruled by him over the ink numeral's 5.3:1). */
  .annotation-marker {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-pill);
    background: var(--orange);
    color: var(--white);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
  }

  .annotation-marker--sm {
    width: 20px;
    height: 20px;
    font-size: 11px;
  }

  .annotation-marker--ring { box-shadow: 0 0 0 2px var(--white); }

  .annotation-marker--fern {
    background: var(--fern);
    color: var(--white);
  }

  /* Handwritten note in Caveat. Color is a modifier; orange is for large display only. */
  .annotation--hand {
    display: inline-block;
    transform: rotate(-3deg);
    font-family: var(--font-hand);
    font-size: 24px;
    font-weight: 600;
    line-height: 1;
    color: var(--orange);
  }

  .annotation--hand-lg { font-size: 30px; }

  /* Figure note: orange 26 on the board, Caveat's default line box (41px) */
  .annotation--hand-figure {
    font-size: 26px;
    line-height: 1.58;
  }

  /* Ink and fern notes are diagram labels: upright on the board */
  .annotation--hand-ink {
    color: var(--ink);
    transform: none;
  }

  .annotation--hand-fern {
    color: var(--fern);
    transform: none;
  }

  /* Brief AI avatar: the app's bot mark (js/faux-app-icons.js, bot) on app fern */
  .brief-avatar {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-pill);
    background: var(--fern-app);
    color: var(--white);
  }

  .brief-avatar > svg {
    width: 24px;
    height: 24px;
  }

  /* Large: the instance in a Slack reply (Glxk0): a 36 square, radius 8, with the 26 mark */
  .brief-avatar--lg {
    --brief-avatar-size: 36px;
    --brief-avatar-radius: var(--radius-md);
    --brief-avatar-mark: 26px;
  }

  /* Settable shells: a page sets --window-overflow on an .artifact-window,
     --brief-avatar-size, -radius and -mark on a .brief-avatar (or an ancestor), and the bar,
     dark window and caption values named at their rules; the defaults are the board values.
     Written as :is() rules after the base rules so the change stays additive without
     repeating a selector. */
  :root {
    --window-overflow: hidden;
    --brief-avatar-size: 32px;
    --brief-avatar-radius: var(--radius-pill);
    --brief-avatar-mark: 24px;
    --window-dark-bg: var(--ink);
    --window-dark-edge: var(--white-12);
    --artifact-bar-h: 44px;
    --artifact-bar-bg: var(--paper);
    --artifact-bar-edge: var(--line-2);
    --figure-caption-lh: round(nearest, 1.45em, 1px);
    --figure-caption-lh-d: 1.5;
    --figure-caption-label-lh-d: 23px;
    --figure-caption-label-size: 11px;
    --figure-caption-label-lh: round(nearest, 1.2em, 1px);
    --figure-caption-label-ls: 0.4px;
  }

  :is(.artifact-window) { overflow: var(--window-overflow); }

  :is(.brief-avatar) {
    width: var(--brief-avatar-size);
    height: var(--brief-avatar-size);
    border-radius: var(--brief-avatar-radius);
  }

  :is(.brief-avatar) > svg {
    width: var(--brief-avatar-mark);
    height: var(--brief-avatar-mark);
  }


  /* Workflow video player (board NgK9b and its states). The video fills a 16:9 stage;
     controls sit in a bar under it. Board values: ready shows the poster undimmed with play in
     the bar; pointer over the player dims the poster 30% and shows the poster play; loading
     dims 50% with a spinner; paused dims 30% with the poster play; ended dims 60% with
     Replay. Discs and Replay lift to mint with a drop shadow on hover and sink to a deeper
     mint with an inner shadow and a 0.92 scale when pressed. */
  .workflow-player {
    --wp-bar-fg: var(--white);
    --wp-bar-muted: var(--white-70);
    --wp-ratio: 16 / 9;
    --wp-track: var(--white-35);
    --focus-ring: var(--mist);

    position: relative;
    overflow: hidden;
    margin: 0;
    background: var(--ink);
    color: var(--wp-bar-fg);
    border-radius: var(--radius-md);
    box-shadow: var(--elevation-overlay);
  }

  .workflow-player__stage {
    position: relative;
    aspect-ratio: var(--wp-ratio);
    background: var(--ink);
  }

  .workflow-player__video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .workflow-player ::cue {
    font-family: var(--font-body);
    font-size: 1em;
    background: color-mix(in srgb, var(--ink) 85%, transparent);
    color: var(--white);
  }

  /* Overlay: the poster play, the spinner and Replay share one slot. The overlay button is
     the whole stage, so its own ring is turned off and the ring draws on the visible face. */
  .workflow-player__overlay {
    --focus-ring: transparent;

    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--fern);
    cursor: pointer;
    transition: background-color var(--dur-overlay) ease-out;
  }

  .workflow-player__overlay-play,
  .workflow-player__overlay-replay {
    display: none;
    place-items: center;
    background: var(--white);
    color: var(--fern);
    box-shadow: var(--elevation-raised);
    transition: background-color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast);
  }

  .workflow-player__overlay-play {
    width: 88px;
    height: 88px;
    border-radius: var(--radius-pill);
  }

  /* Play is Material's play_arrow (an 11 x 14 triangle in a 24 box), sized so the triangle
     is as tall as the board's glyph. Optical centring: the glyph moves right so the centroid
     of the shape it encloses sits near the disc's centre: the measured centroid shift is
     3.16px in the 28px poster box and 1.96px in the 17px bar box; Stephan eased it back to
     2.4px and 1.5px by eye (Oct 16). */
  .workflow-player__overlay-play svg { width: 28px; height: 28px; transform: translateX(2.4px); }

  .workflow-player__overlay-replay {
    gap: var(--space-10);
    height: 48px;
    padding-inline: 22px;
    border-radius: 24px;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
  }

  .workflow-player__overlay-replay svg { width: 18px; height: 18px; }

  .workflow-player__overlay:focus-visible .workflow-player__overlay-play,
  .workflow-player__overlay:focus-visible .workflow-player__overlay-replay {
    outline: 2px solid var(--mist);
    outline-offset: 2px;
  }

  .workflow-player__spinner {
    display: none;
    width: 56px;
    height: 56px;
    color: var(--white);
    animation: wp-spin 900ms linear infinite;
  }

  .workflow-player__spinner svg { display: block; width: 56px; height: 56px; }

  @keyframes wp-spin {
    to { transform: rotate(360deg); }
  }

  .workflow-player[data-state="paused"] .workflow-player__overlay-play,
  .workflow-player[data-state="error"] .workflow-player__overlay-play,
  .workflow-player[data-state="idle"] .workflow-player__overlay:focus-visible .workflow-player__overlay-play,
  .workflow-player[data-state="ended"] .workflow-player__overlay-replay {
    display: inline-grid;
  }

  .workflow-player[data-state="ended"] .workflow-player__overlay-replay { display: inline-flex; }
  .workflow-player[data-state="loading"] .workflow-player__spinner { display: block; }

  .workflow-player[data-state="paused"] .workflow-player__overlay,
  .workflow-player[data-state="error"] .workflow-player__overlay,
  .workflow-player[data-state="idle"] .workflow-player__overlay:focus-visible { background: var(--ink-30); }

  .workflow-player[data-state="loading"] .workflow-player__overlay { background: var(--ink-50); }
  .workflow-player[data-state="ended"] .workflow-player__overlay { background: var(--ink-60); }

  @media (hover: hover) {
    .workflow-player[data-state="idle"]:hover .workflow-player__overlay { background: var(--ink-30); }
    .workflow-player[data-state="idle"]:hover .workflow-player__overlay-play { display: inline-grid; }
    .workflow-player[data-state="idle"]:hover .workflow-player__button--primary { background: var(--mint); }

    .workflow-player__overlay:hover .workflow-player__overlay-play,
    .workflow-player__overlay:hover .workflow-player__overlay-replay {
      background: var(--mint);
      box-shadow: var(--shadow-btn-hover-inverse);
    }

    .workflow-player__overlay:hover .workflow-player__overlay-play { transform: scale(1.045); }
  }

  .workflow-player__overlay:active .workflow-player__overlay-play,
  .workflow-player__overlay:active .workflow-player__overlay-replay {
    background: var(--mint-pressed);
    box-shadow: var(--shadow-btn-pressed-inverse);
  }

  .workflow-player__overlay:active .workflow-player__overlay-play { transform: scale(0.93); }
  /* Replay sinks by height and padding (48 to 44, 22 to 20); the label keeps its size */
  .workflow-player__overlay:active .workflow-player__overlay-replay {
    height: 44px;
    padding-inline: 20px;
  }

  /* While playing the overlay stays a full-stage hit target for click-to-pause, drawn empty */
  .workflow-player[data-state="playing"] .workflow-player__overlay { background: transparent; }

  /* Status: announces loading to screen readers and shows load failures. Lives outside the
     overlay button so the live region is not inside a control. */
  .workflow-player__status {
    position: absolute;
    inset-inline: var(--space-16);
    bottom: var(--space-16);
    margin: 0;
    padding: var(--space-10) var(--space-14);
    border-radius: var(--radius-sm);
    background: var(--ink);
    color: var(--white);
    font-family: var(--font-body);
    font-size: 14px;
    pointer-events: none;
  }

  .workflow-player__status:empty { display: none; }

  .workflow-player__status[data-kind="loading"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* Bar (board NgK9b): play, the chapter tracks, CC, the runtime. One row from D; on M the
     board stacks them (play, chapters, CC, runtime) 16px apart. */
  .workflow-player__bar {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-16);
    padding: var(--space-16) var(--space-16) 18px;
  }

  .workflow-player__button {
    position: relative;
    display: inline-grid;
    place-items: center;
    flex: none;
    min-width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--wp-bar-fg);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4px;
    cursor: pointer;
    transition: background-color var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast);
  }

  .workflow-player__button svg { width: 20px; height: 20px; }

  @media (hover: hover) {
    .workflow-player__button:hover { background: var(--white-12); }
  }

  /* Bar play: a white disc with the fern glyph, its centroid on the disc's centre (see the
     poster play). 40px on M, 48px from D, as the board's instances draw it; ::before keeps
     a 44px target. */
  .workflow-player__button--primary {
    min-width: 0;
    width: 40px;
    height: 40px;
    background: var(--white);
    color: var(--fern);
  }

  .workflow-player__button--primary .wp-icon-play svg { width: 17px; height: 17px; transform: translateX(1.5px); }
  .workflow-player__button--primary span { display: grid; place-items: center; }

  @media (hover: hover) {
    .workflow-player__button--primary:hover {
      background: var(--mint);
      box-shadow: var(--shadow-btn-hover-inverse);
    }
  }

  .workflow-player__button--primary:active {
    background: var(--mint-pressed);
    box-shadow: var(--shadow-btn-pressed-inverse);
    transform: scale(0.92);
  }

  /* CC: a 40 x 28 outlined chip (NgK9b C4qCJ), whole pixels at every width. The 1.5px
     stroke is drawn inside the box as an inset box-shadow (Chrome paints a 1.5px border as
     1px), so the box has no border; ::before extends 2 x 8px to a 44 x 44 target. The
     margin resets the -0.75px that workflow-steps.css set for the old 29.5px chip (this
     layer is later, so it wins). */
  .workflow-player__button--text {
    --cc-edge: var(--white-60);

    min-width: 0;
    width: 40px;
    height: 28px;
    margin-block: 0;
    border-radius: var(--radius-sm);
    box-shadow: inset 0 0 0 1.5px var(--cc-edge);
  }

  .workflow-player__button--text::before {
    content: "";
    position: absolute;
    inset: -8px -2px;
  }

  @media (hover: hover) {
    .workflow-player__button--text:hover {
      --cc-edge: var(--white);

      background: var(--white-25);
    }
  }

  .workflow-player__button--text[aria-pressed="true"] {
    --cc-edge: var(--white);

    background: var(--white);
    color: var(--ink);
  }

  .workflow-player__button--text:active {
    --cc-edge: var(--mint);

    background: var(--mint);
    color: var(--ink);
  }

  @media (forced-colors: active) {
    .workflow-player__button--text {
      border: 1px solid ButtonText;
    }
  }

  .workflow-player__button[aria-pressed="true"] .wp-icon-unpressed,
  .workflow-player__button:not([aria-pressed="true"]) .wp-icon-pressed { display: none; }

  /* Bar play shows one glyph: pause while loading or playing, replay once ended, else play */
  .workflow-player:is([data-state="playing"], [data-state="loading"], [data-state="ended"]) .wp-icon-play,
  .workflow-player:not([data-state="playing"], [data-state="loading"]) .wp-icon-pause,
  .workflow-player:not([data-state="ended"]) .wp-icon-replay { display: none; }

  .workflow-player__button--primary::before {
    content: "";
    position: absolute;
    inset: -2px;
  }

  .workflow-player__spacer { flex: 1; }

  /* Runtime */
  .workflow-player__time {
    flex: none;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 14px;
    color: var(--wp-bar-muted);
    font-variant-numeric: tabular-nums;
  }

  /* Chapters: one seek button per manifest chapter, sharing the row. Each has a 3px track
     (radius 2); hover thickens it to 5px at 70% white, press fills it orange. Played chapters
     stay orange; the current one fills with playback progress (--wp-progress, 0 to 1, set by
     js/workflow-player.js) in a 5px bar, and its label goes bold. The 4 x 6 padding is
     offset with negative margin so the track keeps the item's width and the focus ring
     clears it. */
  /* Chapters sit in the bar. On M they stack at the board's 42px pitch (30 + 12): each keeps
     its 44px target, so neighbouring targets overlap by 2px. From D the four share the row
     equally, 6px apart. */
  .workflow-player__chapters {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    align-self: stretch;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .workflow-player__chapters > li { min-width: 0; }

  /* Footprint: the board's 30px chapter (3px track, 10px gap, text). The box reaches 4px
     above and below it, so focus draws the board's ring around a 38px box; on focus the
     track and text inset 6px, as drawn. The time span's ::before extends the target to 44px. */
  .workflow-player__chapter {
    --wp-progress: 0;
    --wp-chapter-inset: 0px;
    --focus-offset: 2px;

    position: relative;
    display: flex;
    gap: var(--space-8);
    align-items: center;
    align-content: flex-start;
    flex-wrap: wrap;
    width: 100%;
    min-height: 38px;
    margin: -4px 0;
    padding: 17px var(--wp-chapter-inset) 4px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--white);
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
  }

  .workflow-player__chapter:focus-visible {
    --wp-chapter-inset: 6px;
  }

  .workflow-player__chapter::before,
  .workflow-player__chapter::after {
    content: "";
    position: absolute;
    top: 4px;
    left: var(--wp-chapter-inset);
    height: 3px;
    border-radius: 2px;
  }

  .workflow-player__chapter::before {
    right: var(--wp-chapter-inset);
    background: var(--wp-track);
  }

  .workflow-player__chapter::after {
    top: 3px;
    width: calc((100% - 2 * var(--wp-chapter-inset)) * var(--wp-progress));
    height: 5px;
    border-radius: 2.5px;
    background: var(--orange);
    visibility: hidden;
  }

  .workflow-player__chapter[aria-current="true"] { font-weight: 600; }
  .workflow-player__chapter[aria-current="true"]::after { visibility: visible; }

  .workflow-player__chapter[data-played]::before,
  .workflow-player[data-state="ended"] .workflow-player__chapter::before { background: var(--orange); }

  /* Ready and loading mark the first chapter: its whole track is orange */
  .workflow-player:is([data-state="idle"], [data-state="loading"]) .workflow-player__chapter[aria-current="true"]::before { background: var(--orange); }

  .workflow-player[data-state="ended"] .workflow-player__chapter::after { visibility: hidden; }
  .workflow-player[data-state="ended"] .workflow-player__chapter { font-weight: 400; }

  @media (hover: hover) {
    .workflow-player__chapter:hover::before {
      top: 3px;
      height: 5px;
      border-radius: 2px;
      background: var(--white-70);
    }
  }

  .workflow-player__chapter:active { font-weight: 600; }

  .workflow-player__chapter:active::before {
    top: 3px;
    height: 5px;
    background: var(--orange);
  }

  .workflow-player__chapter-time::before {
    content: "";
    position: absolute;
    inset: -3px 0;
  }

  .workflow-player__chapter-time {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 400;
    color: var(--wp-bar-muted);
  }

  /* No-JS and pre-enhancement: the native controls are on, the custom ones stay hidden */
  .workflow-player:not([data-enhanced]) .workflow-player__overlay,
  .workflow-player:not([data-enhanced]) .workflow-player__bar { display: none; }

  @media (min-width: 900px) {
    .media-crop {
      /* --media-crop-columns (default: the 860 crop beside a fluid caption): a page sets its own track list */
      grid-template-columns: var(--media-crop-columns, minmax(0, 860px) minmax(0, 1fr));
      gap: var(--space-64);
    }

    .media-crop .figure-caption--side { gap: var(--space-8); }

    /* D and W: label and method share a line. The D caption line-heights are set here, not on
       :root, so side captions keep their M values as they did before the properties existed. */
    .figure-caption:not(.figure-caption--side) {
      /* A page overrides the D values from any ancestor through the -d properties. */
      --figure-caption-lh: var(--figure-caption-lh-d);
      --figure-caption-label-lh: var(--figure-caption-label-lh-d);

      /* The label's x-height sits on the method's first baseline, whatever either's line
         height (BRI-7805 J15, J17). */
      display: flex;
      align-items: baseline;
      gap: var(--space-8);
      line-height: var(--figure-caption-lh);
    }

    .figure-caption:not(.figure-caption--side) .figure-caption__label {
      flex: none;
      line-height: var(--figure-caption-label-lh);
    }

    .workflow-player__bar {
      flex-direction: row;
      align-items: center;
      gap: var(--space-28);
      padding: var(--space-20) var(--space-28) 22px var(--space-24);
    }

    .workflow-player__button--primary { width: 48px; height: 48px; }
    .workflow-player__button--primary::before { content: none; }

    .workflow-player__chapters {
      flex: 1;
      flex-direction: row;
      align-self: center;
      gap: var(--space-6);
    }

    .workflow-player__chapters > li { flex: 1 1 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    .workflow-player__spinner { animation: none; }

    .workflow-player__overlay:hover .workflow-player__overlay-play,
    .workflow-player__overlay:active .workflow-player__overlay-play,
    .workflow-player__button--primary:active { transform: none; }
  }
}