/* styles/sections/thread-anatomy.css
 * Thread anatomy (Answering in Slack "Anatomy" B8mipG, N1QpDY, BAd2z): a Slack thread card in an
 * artifact window (strong edge, radius md, window elevation) with numbered markers hung 12px off
 * its left edge, beside three ruled callouts that carry the same numbers. 680 : 520 at 1440 with
 * an 80 gap, card 680 and callouts filling on W, stacked on M (card, then callouts, 48 apart).
 * The card is product UI transcribed from the frame (Glxk0) in Slack's own face and colors. It is
 * an .artifact-window--open, so the markers hang outside its edge, and its Brief avatar is
 * .brief-avatar--lg. Lato comes from styles/typography.css (--font-slack). */

@layer sections {
  .thread-anatomy {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-48);
  }

  /* ---------- Card ---------- */
  .thread-card {
    --thread-pad: var(--space-16);
    color: var(--slack-ink);
    font-family: var(--font-slack);
  }

  .thread-card p {
    margin: 0;
    text-wrap: wrap;
  }

  .thread-card__marker {
    position: absolute;
    left: -12px;
  }

  .thread-card__marker::before {
    content: attr(data-n);
  }

  .thread-card__bar {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
    /* Pencil draws strokes inside the box: each ruled edge's padding is 1px less */
    padding: var(--space-16) var(--thread-pad) 15px;
    border-bottom: 1px solid var(--slack-line);
  }

  .thread-card__title {
    font-size: 16px;
    font-weight: 900;
    line-height: 19px;
  }

  .thread-card__channel {
    font-size: 13px;
    line-height: 16px;
    color: var(--slack-ink-2);
  }

  .thread-card__message {
    position: relative;
    display: flex;
    gap: var(--space-12);
    padding: var(--space-24) var(--thread-pad) var(--space-12);
  }

  /* Each marker sits level with the avatar or field it numbers */
  .thread-card__message > .thread-card__marker { top: 30px; }

  .thread-card__message--reply {
    padding: var(--space-16) var(--thread-pad) var(--space-8);
  }

  .thread-card__message--reply > .thread-card__marker { top: 22px; }

  .thread-card__avatar {
    display: grid;
    flex: none;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 6px;
    background: var(--ink-muted);
    color: var(--white);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
  }

  .thread-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
  }

  .thread-card__head {
    display: flex;
    align-items: baseline;
    gap: var(--space-8);
  }

  .thread-card__message--reply .thread-card__head {
    gap: var(--space-6);
  }

  .thread-card__name {
    font-size: 15px;
    font-weight: 900;
    line-height: 18px;
  }

  .thread-card__time {
    font-size: 12px;
    line-height: 14px;
    color: var(--slack-ink-2);
  }

  .thread-card__app {
    padding: 1px 4px;
    border-radius: 3px;
    background: var(--slack-badge);
    color: var(--slack-ink-2);
    font-size: 10px;
    font-weight: 700;
    line-height: 12px;
  }

  .thread-card__text,
  .thread-card__bullet {
    font-size: 15px;
    line-height: 22px;
  }

  .thread-card__mention {
    display: inline-block;
    margin-inline: -2px;
    padding-inline: 2px;
    border-radius: 3px;
    background: var(--slack-mention);
    color: var(--slack-link);
  }

  .thread-card__replies {
    display: flex;
    align-items: center;
    gap: var(--space-12);
    padding: var(--space-8) var(--thread-pad) 0;
    font-size: 13px;
    line-height: 16px;
    color: var(--slack-ink-2);
  }

  .thread-card__replies::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--slack-line);
  }

  /* The answer: the first bullet and the link row whole, then a peek of the second bullet,
     cut there. The cut and the fade follow the first bullet, so they hold at any width. M
     (tMWDp) shows only the second bullet's 6px top pad and fades the last 40px of the first
     bullet; D and W (qqaHR, blNSE) show 51px of the second bullet and fade from 4px under the
     first bullet to the cut, over the link row. At 390 and 1440 the answer is 150 tall. */
  .thread-card__answer {
    --answer-inset: var(--space-24);
    --answer-peek: 7px;
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    padding: 0 var(--thread-pad) 0 var(--answer-inset);
    overflow: hidden;
  }

  .thread-card__bullet {
    position: relative;
    padding-left: 19px;
  }

  .thread-card__bullet::before {
    content: "•";
    position: absolute;
    left: 0;
  }

  .thread-card__bullet--next {
    max-height: var(--answer-peek);
    padding-top: var(--space-6);
    overflow: hidden;
  }

  /* The fade spans the card's width, over the link row and the second bullet */
  .thread-card__bullet:not(.thread-card__bullet--next)::after {
    content: "";
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: calc(-1 * var(--answer-inset));
    right: calc(-1 * var(--thread-pad));
    height: 40px;
    background: linear-gradient(to bottom, transparent, var(--white) 85%);
  }

  .thread-card__link {
    display: flex;
    align-items: center;
    gap: 5px;
    padding-left: 18px;
    font-size: 14px;
    line-height: 17px;
    color: var(--slack-link);
  }

  .thread-card__composer {
    position: relative;
    padding: 15px var(--thread-pad) var(--space-24);
    border-top: 1px solid var(--slack-line);
  }

  .thread-card__composer > .thread-card__marker { top: 24px; }

  .thread-card__field {
    padding: 11px 13px;
    border: 1px solid var(--slack-field);
    border-radius: var(--radius-md);
    font-size: 14px;
    line-height: 17px;
    color: var(--slack-ink-2);
  }

  /* ---------- Callouts ---------- */
  .thread-callouts {
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--line-2);
    list-style: none;
  }

  .thread-callouts__item {
    display: flex;
    align-items: baseline;
    gap: var(--space-16);
    padding-block: var(--space-24) 23px;
    border-bottom: 1px solid var(--line-2);
  }

  .thread-callouts__item:first-child {
    padding-top: 23px;
  }

  .thread-callouts__item > div {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
  }

  .thread-callouts__title {
    margin: 0;
    font-family: var(--font-body);
    font-size: 17px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 0;
    color: var(--ink);
  }

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

  @media (min-width: 900px) {
    .thread-anatomy {
      grid-template-columns: minmax(0, 680fr) minmax(0, 520fr);
      align-items: center;
      gap: var(--space-80);
    }

    .thread-card {
      --thread-pad: var(--space-28);
    }

    .thread-card__bar {
      flex-direction: row;
      align-items: baseline;
    }

    .thread-card__answer {
      --answer-inset: 76px;
      --answer-peek: 51px;
    }

    .thread-card__bullet:not(.thread-card__bullet--next)::after {
      top: calc(100% + 4px);
      bottom: auto;
      height: 80px;
    }
  }

  @media (min-width: 1680px) {
    .thread-anatomy {
      grid-template-columns: 680px minmax(0, 1fr);
    }
  }
}