/* styles/sections/walkthrough-sections.css
 * Bespoke walkthrough sections (scripts/lib/workflow-page.js `walkthrough`): an intro that splits a
 * headline from its body, rails of timecode, headline and body beside a product shot, and the
 * annotations (marker, title, description) that pair with numbered markers inside the shots. Used by
 * /workflows/revisiting-decisions/ (frames mbyvT 1440, CRqcW 390, DQH9c 1920). Section spacing is the
 * frames': top and bottom pads map to the section tokens where the frames use them; the rest are
 * frame values. From D the annotations sit level with their markers (CSS anchor positioning); without
 * anchor positioning they stay in the rail under the copy. */
@layer sections {
  .rd-walkthrough {
    padding-block: 0 var(--section-3xl);
  }

  .rd-section { position: relative; }

  /* ---------- Type: headline, body, timecode ----------
   * Headline: the h2 role on M (32/34), h1 on D and W (56/59, 64/67), lines on whole pixels as Pencil
   * sets them. Between 900 and 1440 the D size follows the viewport (56 at 1440) so the two-column
   * rows keep their measure. --sm is the Slack copy's headline: h3 on M and D (28/29, 40/42), h2 on W
   * (56/59). Breaks that the D and W frames draw are <br class="rd-br">; on M the frame wraps. */
  .rd-heading {
    --rd-heading-size: var(--t-h2-size);
    --rd-heading-ls: var(--t-h2-ls);
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--rd-heading-size);
    font-weight: 600;
    line-height: round(nearest, 1.05em, 1px);
    letter-spacing: var(--rd-heading-ls);
    text-wrap: wrap;
    color: var(--ink);
  }

  .rd-heading--sm {
    --rd-heading-size: var(--t-h3-size);
    --rd-heading-ls: var(--t-h3-ls);
  }

  .rd-br,
  .rd-br-w { display: none; }

  .rd-body {
    margin: 0;
    font-size: 17px;
    line-height: 26px;
    color: var(--ink-muted);
  }

  /* The frames set timecodes in mono 14/400 (t-mono is 13/500) */
  .rd-timecode {
    margin: 0;
    font-size: 14px;
    line-height: 17px;
  }

  /* ---------- Intro: headline, then body (beside it from D) ---------- */
  .rd-intro {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
  }

  .rd-intro__body { padding-top: var(--space-14); }

  /* ---------- Annotations ---------- */
  .rd-notes {
    display: grid;
    gap: var(--space-48);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .shot-note {
    display: flex;
    align-items: baseline;
    gap: var(--space-14);
  }

  .shot-note__copy {
    display: grid;
    flex: 1 1 0;
    gap: var(--space-4);
    min-width: 0;
  }

  .shot-note__title,
  .shot-note__desc { margin: 0; }

  .shot-note__title {
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
    color: var(--ink);
  }

  .shot-note__desc {
    font-size: 15px;
    line-height: 23px;
    color: var(--ink-muted);
  }

  /* ---------- The Conditions: the standing record beside the new evidence ---------- */
  .rd-conditions {
    display: grid;
    gap: var(--space-48);
    padding-block: var(--section-lg) var(--section-md);
  }

  .rd-conditions__row {
    display: grid;
    gap: var(--space-24);
  }

  .rd-conditions__record,
  .rd-evidence {
    display: grid;
    align-content: start;
    gap: var(--space-16);
  }

  .rd-conditions__evidence {
    display: flex;
    flex-direction: column;
    gap: var(--space-32);
  }

  .rd-evidence__label {
    display: flex;
    align-items: baseline;
    gap: var(--space-12);
  }

  /* ---------- The Review: rail beside the chat answer, annotations 3 and 4 ---------- */
  .rd-review {
    display: grid;
    gap: var(--space-48);
    padding-block: var(--section-xs) var(--section-md);
  }

  .rd-review__rail,
  .rd-approve__copy {
    display: grid;
    align-content: start;
    gap: var(--space-24);
  }

  .rd-review__rail { padding-top: var(--space-8); }

  .rd-approve__copy { padding-top: var(--space-24); }

  /* ---------- Approve: the approval form beside its copy, annotation 5 ---------- */
  .rd-approve {
    display: grid;
    gap: 68px;
    padding-block: var(--space-32) var(--section-sm);
  }

  .rd-approve .approval-form { anchor-name: --rd-modal; }

  /* ---------- Supersedes: new record beside the old one, then Slack ---------- */
  .rd-supersedes {
    display: grid;
    gap: var(--space-48);
    padding-block: var(--section-xs) var(--section-sm);
  }

  .rd-records {
    display: grid;
    gap: 28px;
  }

  .rd-records__new,
  .rd-records__old {
    display: grid;
    align-content: start;
    gap: var(--space-16);
    min-width: 0;
  }

  .rd-records__old .rd-notes { padding-top: var(--space-8); }

  /* The rule is drawn inside the 48 (64 from D) pad, as Pencil draws the stroke */
  .rd-slack {
    display: grid;
    gap: var(--space-56);
    padding-top: var(--space-48);
    box-shadow: inset 0 1px var(--line-2);
  }

  .rd-slack__copy {
    display: grid;
    align-content: start;
    gap: var(--space-20);
  }

  .rd-slack__copy .rd-notes { padding-top: var(--space-12); }

  /* ---------- Payoff and Up next ----------
   * The recipe's lines on whole pixels (36, 64, 86 x 1.02 are 37, 65, 88; 17 x 1.55 is 26) and its
   * rule inside the pad, as Pencil draws the stroke. Up next sits 40 below the payoff on M (then
   * its own 48 pad), 64 from D. */
  .rd-payoff { padding-top: var(--space-48); }

  .rd-payoff .payoff-statement {
    --payoff-heading-lh: round(nearest, 1.02em, 1px);
    --payoff-sub-lh: round(nearest, 1.55em, 1px);
    --payoff-pad-top: calc(var(--space-40) - 1px);
  }

  .rd-walkthrough .up-next {
    margin-top: var(--space-40);
    padding-top: var(--space-48);
  }

  /* Each card's rule sits under its own body, as DQH9c draws a one-line body over a two-line one */
  .rd-walkthrough .up-next__list { align-items: start; }

  /* Markers the annotations are placed against */
  [data-anchor="rd-m3"] { anchor-name: --rd-m3; }
  [data-anchor="rd-m4"] { anchor-name: --rd-m4; }
  [data-anchor="rd-m5"] { anchor-name: --rd-m5; }

  @media (min-width: 900px) {
    .rd-heading {
      --rd-heading-size: min(var(--t-h1-size), 3.889vw);
      --rd-heading-ls: var(--t-h1-ls);
    }

    .rd-heading--sm {
      --rd-heading-size: min(var(--t-h3-size), 2.778vw);
      --rd-heading-ls: var(--t-h3-ls);
    }

    .rd-br { display: inline; }

    /* The rail (a third of the row after its 80 gap) and the Slack copy (400/1184 after its 96 gap)
       narrow faster than the viewport; their headlines scale with the column, 56 and 40 at 1440. */
    .rd-review__rail .rd-heading {
      --rd-heading-size: min(var(--t-h1-size), calc((100vw - 240px) * 0.0467));
    }

    .rd-slack__copy .rd-heading--sm {
      --rd-heading-size: min(var(--t-h3-size), calc((100vw - 240px) * 0.0334));
    }

    .rd-intro {
      flex-direction: row;
      justify-content: space-between;
      gap: var(--space-24);
    }

    .rd-intro__body {
      flex: 0 1 420px;
      padding-top: var(--space-6);
    }

    .rd-conditions { gap: var(--space-80); }

    .rd-conditions__row {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-64);
      min-height: 571px;
    }

    .rd-conditions__evidence {
      gap: var(--space-40);
      justify-content: space-between;
    }

    /* 400 | 800 at 1440; the rail gives way with the panel below it */
    .rd-review {
      grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
      align-items: start;
      gap: 0 var(--space-80);
    }

    .rd-review__rail { grid-area: 1 / 1; }
    .rd-review .chat-answer { grid-area: 1 / 2 / span 2; }
    .rd-review__notes { grid-area: 2 / 1; padding-top: var(--space-48); }

    /* 600 | 568 with a 112 gap at 1440 */
    .rd-approve {
      grid-template-columns: minmax(0, 600fr) minmax(0, 568fr);
      align-items: start;
      gap: 0 min(112px, 7.78vw);
      padding-top: var(--space-48);
    }

    .rd-approve .approval-form { grid-area: 1 / 1 / span 2; }
    .rd-approve__copy { grid-area: 1 / 2; }
    .rd-approve__notes { grid-area: 2 / 2; padding-top: var(--space-48); }

    .rd-supersedes {
      gap: var(--space-80);
      padding-top: var(--space-80);
    }

    /* 832 | 400 at 1440, bottoms aligned */
    .rd-records {
      grid-template-columns: minmax(0, 832fr) minmax(0, 400fr);
      align-items: end;
      gap: 0 var(--space-48);
    }

    /* 400 | 784 at 1440 */
    .rd-slack {
      grid-template-columns: minmax(0, 400fr) minmax(0, 784fr);
      align-items: start;
      gap: 0 var(--space-96);
      padding-top: var(--space-64);
    }

    .rd-payoff { padding-top: var(--space-64); }

    /* 760 | 440 with display-sm at 1440; narrower, the columns keep that ratio and the line scales
       with the viewport, so the two-line setting holds from 900 */
    .rd-payoff .payoff-statement {
      --payoff-pad-top: calc(var(--space-56) - 1px);
      --payoff-columns: minmax(0, 760fr) minmax(0, 440fr);
      --payoff-heading-size: min(var(--t-display-sm-size), 4.444vw);
    }

    .rd-walkthrough .up-next {
      margin-top: var(--space-64);
      padding-top: 0;
    }

    /* Annotations level with their markers. Offsets are the frames' (the annotation's top against
       the marker's top). */
    @supports (anchor-name: --a) {
      .rd-review__notes,
      .rd-approve__notes { padding-top: 0; }

      .rd-note--m3,
      .rd-note--m4,
      .rd-note--m5 { position: absolute; }

      .rd-note--m3,
      .rd-note--m4 {
        left: 0;
        width: min(380px, calc((100% - var(--space-80)) / 3));
      }

      .rd-note--m3 { top: calc(anchor(--rd-m3 top) - 4px); }
      .rd-note--m4 { top: calc(anchor(--rd-m4 top) - 2px); }

      .rd-note--m5 {
        top: anchor(--rd-m5 top);
        left: calc(anchor(--rd-modal right) + var(--space-32));
        right: 0;
        max-width: 488px;
      }
    }
  }

  @media (min-width: 1680px) {
    .rd-heading {
      --rd-heading-size: var(--t-h1-size);
    }

    .rd-heading--sm,
    .rd-slack__copy .rd-heading--sm {
      --rd-heading-size: var(--t-h2-size);
      --rd-heading-ls: var(--t-h2-ls);
    }

    .rd-review__rail .rd-heading { --rd-heading-size: var(--t-h1-size); }

    .rd-conditions__row { min-height: 579px; }

    .rd-review { grid-template-columns: 500px minmax(0, 1fr); }

    .rd-approve {
      grid-template-columns: 600px minmax(0, 1fr);
      gap: 0 112px;
      padding-top: 58px;
    }

    .rd-supersedes { padding-top: 86px; }

    .rd-records { grid-template-columns: minmax(0, 1fr) 400px; }

    .rd-slack { grid-template-columns: 505px minmax(0, 1fr); }

    .rd-payoff { padding-top: 77px; }

    .rd-payoff .payoff-statement {
      --payoff-columns: minmax(0, 1fr) var(--payoff-sub-measure);
      --payoff-heading-size: 86px;
    }

    /* DQH9c sets the Review body on three lines with "evidence" opening the last; the browser's
       measure fits it on line 2 at every width that keeps line 1, so the frame's break is a W-only
       <br class="rd-br-w"> (the copy is unchanged) */
    .rd-br-w { display: inline; }

    @supports (anchor-name: --a) {
      .rd-note--m3,
      .rd-note--m4 { width: 380px; }

      .rd-note--m3 { top: anchor(--rd-m3 top); }
      .rd-note--m4 { top: calc(anchor(--rd-m4 top) - 4px); }
      .rd-note--m5 { top: calc(anchor(--rd-m5 top) - 4px); }
    }
  }
}