/* styles/sections/annotated-beat.css
 * One annotated beat (scripts/lib/pages/decision-history.js, the beat in renderMiddle): a rail with the timecode line,
 * title, body and numbered notes beside a product shot whose numbered pins sit on the window's left
 * edge, each with a leader into the body. From D each note is placed level with its pin with CSS
 * anchor positioning (the pin carries anchor-name --beat-pin-N, the note position-anchor); without
 * anchor positioning the notes stay a list under the rail header. On M the notes are a list above
 * the shot and the pins sit in the gutter beside the headings they mark.
 * Geometry is the Decision History frames (kkyZH 1440, X0pes 390, A5YuB 1920). */
@layer sections {
  /* The section rule is drawn inside the top padding, as Pencil draws strokes (40, 56 from D) */
  .beat {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-40);
    padding-block: calc(var(--space-40) - 1px) 76px;
    border-top: 1px solid var(--line-2);
    anchor-scope: all;
  }

  .beat__rail {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-top: var(--space-24);
  }

  .beat__head {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
  }

  .beat__time {
    margin: 0;
    line-height: 16px;
    letter-spacing: 0.2px;
  }

  /* h3 role on M (28), the h2 size on D (48) and the h1 size on W (64) */
  .beat__title {
    font-size: var(--t-h3-size);
    line-height: round(nearest, 1.05em, 1px);
    letter-spacing: var(--t-h3-ls);
    text-wrap: wrap;
  }

  .beat__body {
    margin: 0;
    font-size: 16px;
    line-height: round(nearest, 1.55em, 1px);
    color: var(--ink-2);
    text-wrap: wrap;
  }

  .beat__notes {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* The sm marker centred on the note's first line (a 26 wrap, so a one-line note is 26 tall);
     h5 role text */
  .beat-note {
    display: flex;
    align-items: baseline;
    gap: var(--space-12);
    min-height: 26px;
  }

  .beat-note > .annotation-marker { margin-top: 3px; }

  .beat-note__text {
    flex: 1 1 0;
    min-width: 0;
    font-family: var(--font-display);
    font-size: var(--t-h5-size);
    font-weight: 600;
    line-height: round(nearest, 1.05em, 1px);
    letter-spacing: var(--t-h5-ls);
    color: var(--ink);
  }

  /* ---------- Pins: the ring marker straddling the window's left edge, its leader running in.
   * Placed from the heading that carries it: --pin-x is the heading's inset from the window edge
   * (sidebar 32 plus body padding), --pin-top its offset from the heading top; --pin-shift-m, -d
   * and -w (inline, from beatPin) move one pin where a frame draws it off that spot. */
  .beat-pin {
    --pin-shift-m: 0px;
    --pin-shift-d: 0px;
    --pin-shift-w: 0px;
    --pin-x: 52px;
    --pin-top: -19px;
    --pin-leader: var(--space-24);
    --pin-shift: var(--pin-shift-m);
    position: absolute;
    top: calc(var(--pin-top) + var(--pin-shift));
    left: calc(-1 * var(--pin-x) - 12px);
    width: 24px;
    height: 24px;
  }

  .beat-pin::before {
    content: "";
    position: absolute;
    top: 12px;
    left: 24px;
    width: var(--pin-leader);
    height: 1px;
    background: var(--orange-50);
  }

  .beat-pin > .annotation-marker { display: grid; }

  .beat__shot { anchor-name: --beat-shot; }

  /* The heading's inset follows the shot's body padding (container "doc", doc-mock.css): the
     leader stops 16 short of the heading in the narrow window, 10 short in the wide one */
  @container doc (width >= 600px) {
    .beat-pin {
      --pin-x: 80px;
      --pin-leader: 58px;
    }
  }

  @media (min-width: 900px) {
    /* 336:880 at 1440; narrower, the rail gives way with the shot down to 240 */
    .beat {
      grid-template-columns: minmax(240px, 336fr) minmax(0, 880fr);
      column-gap: var(--space-64);
      padding-block: calc(var(--space-56) - 1px) 128px;
    }

    .beat__rail {
      gap: 0;
      padding-top: 0;
    }

    .beat__title {
      font-size: var(--t-h2-size);
      letter-spacing: var(--t-h2-ls);
    }

    .beat-pin {
      --pin-top: 2px;
      --pin-shift: var(--pin-shift-d);
    }

    /* Without anchor positioning the notes stay a list below the rail header */
    @supports not ((anchor-name: --a) and (anchor-scope: all)) {
      .beat__notes {
        gap: var(--space-40);
        margin-top: 53px;
      }
    }

    /* Each note level with its pin: the note's top on the pin's top plus its shift (--note-shift-d
       and -w, inline from the page renderer), never closer than 24 under the rail header (the narrower
       rail between 900 and 1440 wraps the header taller) */
    @supports (anchor-name: --a) and (anchor-scope: all) {
      .beat__head { anchor-name: --beat-head; }

      .beat-note {
        --note-shift-d: 0px;
        --note-shift-w: 0px;
        --note-shift: var(--note-shift-d);
        position: absolute;
        top: max(calc(anchor(top) + var(--note-shift)), calc(anchor(--beat-head bottom) + var(--space-24)));
        right: calc(anchor(--beat-shot left) + var(--space-64));
        left: 0;
      }
    }
  }

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

    .beat { grid-template-columns: 336px minmax(0, 1fr); }

    .beat-pin { --pin-shift: var(--pin-shift-w); }
    .beat-note { --note-shift: var(--note-shift-w); }
  }
}