/* styles/sections/reader-columns.css
 * Reader columns (Status Reporting "Three Readers" LKusy, F4jz2, x4fle): three readers side by
 * side from D (gap 40), each column stepped down 56 more than the last; stacked on M (gap 32,
 * steps 40 and 68). A column: a 2px ink rule over the reader's name and need, the Slack ask in
 * an artifact window (elevated, strong edge, radius md), then "Brief answers in" over the ruled
 * indexed rows (board GPl9f). The Slack parts come from annotated-thread.css. */
@layer sections {
  .readers {
    --reader-step: 40px;
    display: grid;
    gap: var(--space-32);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .reader {
    display: flex;
    flex-direction: column;
    gap: var(--space-28);
  }

  .reader:nth-child(2) { padding-top: var(--reader-step); }
  .reader:nth-child(3) { padding-top: calc(var(--reader-step) + 28px); }

  /* The rule is drawn inside the 20 pad, as Pencil strokes it */
  .reader__head {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
    padding-top: 18px;
    border-top: 2px solid var(--ink);
  }

  .reader__name {
    font-size: var(--t-h4-size);
    font-weight: 600;
    line-height: 33px;
    letter-spacing: -0.43px;
  }

  .reader__need {
    margin: 0;
    font-size: 17px;
    line-height: round(nearest, 1.45em, 1px);
    color: var(--ink-muted);
  }

  .ask-card {
    display: flex;
    gap: var(--space-12);
    margin: 0;
    padding: var(--space-20) 22px 22px var(--space-20);
  }

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

  .reader__answer {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    padding-top: var(--space-4);
  }

  .reader__label {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 14px;
    letter-spacing: 0.5px;
    color: var(--ink-55);
  }

  /* Board GPl9f: 42 tall, the rule drawn inside the 11px pad */
  .reader__sections {
    --indexed-row-pad: 11px 10px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .reader__sections .indexed-row { column-gap: var(--space-12); }

  .reader__sections .indexed-row__title {
    font-size: 17px;
    line-height: 20px;
  }

  @media (min-width: 900px) {
    .readers {
      --reader-step: 56px;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      align-items: start;
      gap: var(--space-40);
    }

    .reader:nth-child(3) { padding-top: calc(2 * var(--reader-step)); }

    .reader__name {
      font-size: 32px;
      line-height: 45px;
      letter-spacing: -0.6px;
    }

    .reader__sections .indexed-row { column-gap: var(--space-14); }
  }
}