/* styles/sections/annotated-thread.css
 * Annotated product shots (Status Reporting "Refine" Eu2ok + cAfTS, "New Feedback" vzRF7 + I1aH0,
 * "The Conflict" notes eXXjj): a shot with orange numbered markers hung 12px off its left edge,
 * level with what they number, beside a list of notes carrying the same numbers (below it on
 * M). Also the Slack UI those shots and the reader asks transcribe from the video: Slack's own
 * face (--font-slack, Lato) and colors (--slack-* tokens), the PM avatar, the @Brief mention drawn over the
 * start of the message, the APP badge, link rows with the exported link icon, the placeholder
 * bars and the orange-ruled "New" callout. */

@layer sections {
  /* ---------- Slack parts ---------- */
  .ask-card,
  .slack-thread {
    color: var(--slack-ink);
    font-family: var(--font-slack);
  }

  :is(.ask-card, .slack-thread) p { margin: 0; }

  .slack-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;
  }

  /* Name and channel share a line; in a card narrower than the frames' (900 to 1100) the channel
     drops under the name instead of breaking */
  .slack-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--space-8);
  }

  .slack-head > * { white-space: nowrap; }

  .slack-head--app { gap: 0 var(--space-6); }

  .slack-name {
    font-size: 15px;
    font-weight: 900;
    line-height: 18px;
  }

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

  .slack-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;
  }

  .slack-text,
  .slack-label {
    font-size: 15px;
    line-height: 22px;
  }

  .slack-label { font-style: italic; }

  /* The numbered lines keep the frame's two spaces after the numeral */
  .slack-text--pre { white-space: pre-wrap; }

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

  .slack-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4) var(--space-14);
    padding-top: 2px;
  }

  .slack-links--after { padding-top: var(--space-6); }

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

  .slack-link > img { flex: none; }

  /* ---------- Thread card ---------- */
  .slack-thread {
    --thread-pad: var(--space-16);
    --marker-inset: calc(var(--thread-pad) + 48px);
    margin: 0;
  }

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

  .slack-thread__title {
    font-size: 16px;
    font-weight: 900;
    line-height: 19px;
  }

  .slack-thread__channel {
    font-size: 13px;
    line-height: 16px;
  }

  .slack-thread__message {
    display: flex;
    gap: var(--space-12);
    padding: var(--space-24) var(--thread-pad) var(--space-20);
  }

  .slack-thread__message--reply { padding: var(--space-8) var(--thread-pad) 0; }
  .slack-thread__message--found { padding: var(--space-24) var(--thread-pad) var(--space-28); }

  .slack-thread__body {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
  }

  .slack-thread__body--reply { gap: var(--space-14); }

  .slack-thread__tail { padding-bottom: var(--space-28); }

  .slack-group {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .slack-group--found { gap: var(--space-6); }

  .slack-group--found .slack-links { padding-top: 0; }

  .slack-group__links { position: relative; }

  /* Rest of the brief: italic labels over grey bars on M, beside them from D */
  .slack-rest {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
    padding-block: 2px;
  }

  .slack-rest__rows {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .slack-rest__rows > li {
    display: flex;
    flex-direction: column;
    gap: var(--space-14);
    font-size: 14px;
    font-style: italic;
    line-height: 17px;
    color: var(--slack-ink-2);
  }

  .slack-rest__bar {
    height: 8px;
    border-radius: 4px;
    background: var(--slack-placeholder);
  }

  /* "New": orange tint, 3px orange rule on the left (inside the 16 pad), label in orange ink */
  .slack-new {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-12) var(--space-16) var(--space-14) 13px;
    border-left: 3px solid var(--orange);
    background: var(--app-amber-soft);
  }

  .slack-new__label {
    font-size: 14px;
    font-style: italic;
    font-weight: 700;
    line-height: 21px;
    color: var(--orange-ink);
  }

  /* ---------- Markers ----------
   * Each marker sits in the element it numbers and hangs 12px off the card's left edge: the
   * body's inset (pad, 36 avatar, 12 gap) plus 12. --mk-m and --mk-d move it off the element's
   * top where the M and D/W frames draw it so. */
  .shot-marker {
    --mk-d: 0px;
    --mk-m: 0px;
    position: absolute;
    top: var(--mk-m);
    left: calc(-1 * var(--marker-inset) - 12px);
  }

  .slack-new > .shot-marker { left: calc(-1 * var(--marker-inset) - 15px); }

  /* ---------- Notes ---------- */
  .marker-notes {
    --note-pad: 20px;
    --note-rule: var(--line-2);
    --note-title: var(--ink);
    --note-text: var(--ink-muted);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .flow-band--fern .marker-notes {
    --note-rule: var(--white-20);
    --note-title: var(--white);
    --note-text: var(--white-80);
  }

  .shot-row--refine .marker-notes { --note-pad: 24px; }

  .marker-notes > li {
    display: flex;
    align-items: baseline;
    gap: var(--space-16);
    padding-block: calc(var(--note-pad) - 1px) var(--note-pad);
    border-top: 1px solid var(--note-rule);
  }

  .marker-notes > li > div {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
  }

  .marker-notes__title {
    font-family: var(--font-body);
    font-size: 17px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 0;
    color: var(--note-title);
  }

  .marker-notes p {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    color: var(--note-text);
  }

  /* ---------- Shot rows ---------- */
  .shot-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-40);
  }

  @media (min-width: 900px) {
    .slack-thread { --thread-pad: var(--space-28); }

    .slack-thread__bar {
      flex-direction: row;
      align-items: baseline;
    }

    .slack-rest__rows > li {
      flex-direction: row;
      align-items: center;
    }

    .slack-rest__rows > li > span:first-child { flex: none; width: 92px; }

    .slack-rest__rows > li:nth-child(1) { --bar-w: 360px; }
    .slack-rest__rows > li:nth-child(2) { --bar-w: 520px; }
    .slack-rest__rows > li:nth-child(3) { --bar-w: 440px; }
    .slack-rest__rows > li:nth-child(4) { --bar-w: 480px; }

    .slack-rest__bar {
      width: var(--bar-w);
      max-width: calc(100% - 106px);
    }

    .shot-marker { top: var(--mk-d); }

    .marker-notes__title {
      font-size: 19px;
      line-height: 23px;
    }

    /* Thread 760 and notes 456 at 1440; both give way together below it */
    .shot-row {
      align-items: start;
      gap: var(--space-64);
    }

    .shot-row--refine { grid-template-columns: minmax(0, 760fr) minmax(0, 456fr); }
    .shot-row--feedback { grid-template-columns: minmax(0, 880fr) minmax(0, 336fr); }
  }

  @media (min-width: 1680px) {
    .shot-row--refine { grid-template-columns: 760px minmax(0, 1fr); }
    .shot-row--feedback { grid-template-columns: 880px minmax(0, 1fr); }
  }
}