/* styles/sections/instruction-list.css
 * Annotated instruction list (Answering in Slack "Annotated Message" hUg79, vQO67, KE7ba): who
 * sent the message, then one ruled row per instruction, the sentence in bold and Brief's note
 * muted. Two columns from D (sentence 512 at 1440, note 32 after it), stacked on M.
 * <div class="instruction-list">
 *   <p class="instruction-list__from"><span class="instruction-list__avatar">PM</span>
 *     <span class="instruction-list__name">…</span> <span class="instruction-list__meta">…</span></p>
 *   <ul class="instruction-list__lines" role="list"><li><p class="instruction-list__sentence">…</p>
 *     <p class="instruction-list__note">…</p></li>…</ul>
 * </div> */
@layer sections {
  .instruction-list__from {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-12);
    margin: 0;
    padding-bottom: 27px;
    border-bottom: 1px solid var(--line-2);
    font-size: 15px;
    line-height: 18px;
  }

  /* Initials in Slack's face, as the frame draws the sender (radius 6 is the frame's) */
  .instruction-list__avatar {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: var(--ink-muted);
    color: var(--white);
    font-family: var(--font-slack);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
  }

  .instruction-list__name {
    font-weight: 600;
    color: var(--ink);
  }

  /* "in #channel  ·  time": two spaces each side of the dot, as drawn */
  .instruction-list__meta {
    white-space: pre-wrap;
    color: var(--ink-55);
  }

  .instruction-list__lines {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .instruction-list__lines > li {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-24);
    /* Pencil draws each rule inside its row: 18 above the text, 17 plus the 1px rule below */
    padding-block: 18px 17px;
    border-bottom: 1px solid var(--line-2);
  }

  .instruction-list__sentence {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    line-height: round(nearest, 1.5em, 1px);
    color: var(--ink);
  }

  .instruction-list__note {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
    color: var(--ink-muted);
  }

  @media (min-width: 900px) {
    .instruction-list__from {
      flex-direction: row;
      align-items: center;
    }

    /* 512 : 736 at 1440, shrinking together below it */
    .instruction-list__lines > li {
      grid-template-columns: minmax(0, 512fr) minmax(0, 736fr);
      gap: var(--space-32);
    }
  }

  @media (min-width: 1680px) {
    .instruction-list__lines > li {
      grid-template-columns: 512px minmax(0, 1fr);
    }
  }
}