/* styles/sections/workflow-bands.css
 * The bespoke walkthrough of the Decision History page (scripts/lib/pages/decision-history.js, set in
 * the builder's walkthrough slot with className workflow-walkthrough--history): the history section
 * (intro, record anatomy, annotated beat) under the top dither edge, then the payoff section (stacked
 * payoff statement) and the builder's Up next over the bottom one.
 * Geometry is the Decision History frames (T2M9UT and cL1Sb at 1440, XO13e and RhelO at 390, wr9x7
 * and eNHFf at 1920). */
@layer sections {
  /* Pencil wraps greedily; these wrap pretty, which keeps a drawn break unless it ends on one
     word (BRI-7805 J14) */
  .workflow-history p,
  .workflow-payoff p { text-wrap-style: var(--frame-wrap-style, pretty); }

  /* The two white frame sections run as one walkthrough: section-2xl above the history and below
     Up next (100, 168, 202). The 1920 frame stretches the bottom edge and covers the top one. */
  .workflow-walkthrough.workflow-walkthrough--history { padding-block: var(--section-2xl); }

  @media (min-width: 1680px) {
    .workflow-walkthrough--history::after {
      background-position: 0 0;
      background-size: 100% 100%;
    }
  }

  /* ---------- History ---------- */
  .workflow-history {
    display: flex;
    flex-direction: column;
    gap: var(--space-56);
  }

  .workflow-history__intro {
    display: flex;
    flex-direction: column;
    gap: var(--space-28);
  }

  /* h2 role on M and D (32, 48), the h1 size on W (64); lines on whole pixels (48 x 1.05 is 50) */
  .workflow-history__heading {
    line-height: round(nearest, 1.05em, 1px);
    text-wrap-style: var(--frame-wrap-style, pretty);
  }

  .workflow-history__deck {
    max-width: 640px;
    margin: 0;
    font-size: 17px;
    line-height: round(nearest, 1.5em, 1px);
    color: var(--ink-2);
  }

  @media (min-width: 900px) {
    .workflow-history { gap: var(--space-96); }
    .workflow-history__deck { font-size: 19px; }
  }

  @media (min-width: 1680px) {
    .workflow-history__heading {
      font-size: var(--t-h1-size);
      letter-spacing: var(--t-h1-ls);
    }
  }

  /* ---------- Payoff ---------- */
  .workflow-payoff { padding-top: var(--space-48); }

  /* The shared stacked payoff statement (components.css) set to the frames through its custom
     properties. The rule is drawn inside the 56 (M 40) top padding, then 8 more to the timecode;
     the heading breaks greedily, as Pencil draws it. */
  .workflow-payoff .payoff-statement {
    --payoff-pad-top: calc(var(--space-40) + var(--space-8) - 1px);
    --payoff-sub-gap: var(--space-28);
    --payoff-heading-size: var(--t-h3-size);
    --payoff-heading-lh: round(nearest, 1.04em, 1px);
    --payoff-heading-ls: -0.6px;
    --payoff-heading-wrap: wrap;
    --payoff-meta-lh: 16px;
    --payoff-meta-ls: 0.2px;
    --payoff-sub-measure: 760px;
    --payoff-sub-color: var(--ink-2);
    --payoff-sub-lh: round(nearest, 1.5em, 1px);
  }

  @media (min-width: 900px) {
    .workflow-payoff { padding-top: var(--space-64); }

    .workflow-payoff .payoff-statement {
      --payoff-pad-top: calc(var(--space-56) + var(--space-8) - 1px);
      --payoff-heading-size: var(--t-h2-size);
      --payoff-heading-ls: -1px;
      --payoff-sub-size: 19px;
    }
  }

  @media (min-width: 1680px) {
    .workflow-payoff { padding-top: calc(var(--space-80) - 3px); }

    .workflow-payoff .payoff-statement {
      --payoff-heading-size: var(--t-h1-size);
      --payoff-heading-ls: -1.35px;
    }
  }

  /* Up next under the payoff: 56 below it plus the instance's 48 on M (the builder's 96 from D) */
  @media (width < 900px) {
    .workflow-walkthrough--history .up-next { padding-top: calc(var(--space-56) + var(--space-48)); }
  }
}