/* styles/sections/desk-log.css
 * The transport layer band (Product Teams: pJuQU, NXxys, FjIfH): a pull quote, the section
 * intro, then one PM's desk visits beside the digest that replaces them. The visits are an
 * ARIA table from D (QLvGo) and stacked rows with corner arrows on M (nMQOE), as .frame-dw and
 * .frame-m. */
@layer sections {
  .desk-log {
    padding-block: var(--section-md);
  }

  .desk-log__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-32);
  }

  .desk-log__quote {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    margin: 0;
  }

  .desk-log__quote blockquote,
  .desk-log__quote p {
    margin: 0;
  }

  .desk-log__quote p {
    font-family: var(--font-display);
    font-size: 32px;
    font-style: italic;
    font-weight: 600;
    line-height: 34px;
    letter-spacing: -0.48px;
    color: var(--ink);
  }

  .desk-log__quote figcaption {
    font-size: 16px;
    line-height: round(nearest, 1.2em, 1px);
    color: var(--ink-muted);
  }

  .desk-log__figures {
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
  }

  .desk-log__trips,
  .desk-log__digest {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    min-width: 0;
    margin: 0;
  }

  /* ---------- Table (D and W): table rows on a grid ----------
     Time 48 and How it reaches 240, 16 between columns and 20 at the edges; rows 48, head 44 */
  .desk-log__tr {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 240px;
    column-gap: var(--space-16);
    align-items: center;
    height: 48px;
    padding-inline: var(--space-20);
    border-bottom: 1px solid var(--line-2);
    font-size: 15px;
    color: var(--ink);
  }

  .desk-log__table,
  .desk-log__table thead,
  .desk-log__table tbody {
    display: block;
  }

  .desk-log__table th,
  .desk-log__table td {
    padding: 0;
    font-weight: inherit;
    text-align: left;
  }

  .desk-log__table tbody > .desk-log__tr:last-child {
    border-bottom: 0;
  }

  .desk-log__tr--head {
    height: 44px;
    background: var(--app-panel);
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-muted);
  }

  .desk-log__time {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-muted);
  }

  .desk-log__say {
    display: flex;
    align-items: center;
    gap: var(--space-10);
  }

  .desk-log__tr .desk-log__reach {
    font-size: 14px;
    color: var(--ink-2);
  }

  /* ---------- Stacked rows (M) ---------- */
  .desk-log__head {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding: var(--space-12) var(--space-20) 11px;
    background: var(--app-panel);
    border-bottom: 1px solid var(--line-2);
    font-size: 12px;
    font-weight: 600;
    line-height: round(nearest, 1.2em, 1px);
    color: var(--ink-muted);
  }

  .desk-log__head p {
    display: flex;
    margin: 0;
  }

  .desk-log__head-a {
    gap: var(--space-12);
  }

  .desk-log__head-a > span:first-child {
    flex: none;
    width: 48px;
  }

  .desk-log__head-b {
    align-items: center;
    gap: var(--space-6);
    padding-left: 60px;
  }

  .desk-log__rows {
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: round(nearest, 1.2em, 1px);
  }

  .desk-log__row {
    display: flex;
    gap: var(--space-12);
    padding: var(--space-14) var(--space-20) 13px;
    border-bottom: 1px solid var(--line-2);
  }

  .desk-log__row:last-child {
    padding-bottom: var(--space-14);
    border-bottom: 0;
  }

  .desk-log__row > .desk-log__time {
    flex: none;
    width: 48px;
  }

  .desk-log__right {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    gap: var(--space-8);
    min-width: 0;
  }

  .desk-log__say-m,
  .desk-log__reach-m {
    display: flex;
    margin: 0;
  }

  .desk-log__say-m {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-10);
    font-size: 15px;
    color: var(--ink);
  }

  .desk-log__reach-m {
    gap: var(--space-6);
    font-size: 14px;
    color: var(--ink-2);
  }

  .desk-log__reach-m > img {
    flex: none;
  }

  /* ---------- Digest ---------- */
  .digest-card__avatar {
    --brief-avatar-size: 20px;
  }

  .digest-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-14);
    padding: var(--space-20) var(--space-20) var(--space-24);
  }

  .digest-card__lead {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
    color: var(--ink);
  }

  .digest-card__items {
    display: flex;
    flex-direction: column;
    gap: var(--space-14);
    margin: 0;
  }

  .digest-card__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding-top: 11px;
    border-top: 1px solid var(--line-2);
  }

  .digest-card__item > dt {
    font-size: 12px;
    font-weight: 600;
    line-height: round(nearest, 1.2em, 1px);
    color: var(--fern);
  }

  .digest-card__item--needs > dt {
    color: var(--orange-ink);
  }

  .digest-card__item > dd {
    margin: 0;
    font-size: 15px;
    line-height: 22px;
    color: var(--ink);
  }

  @media (width >= 900px) {
    .desk-log__inner {
      gap: var(--space-56);
    }

    .desk-log__quote p {
      max-width: 1120px;
      font-size: 56px;
      line-height: 59px;
      letter-spacing: -1.12px;
    }

    /* Side by side while the table keeps 560; the digest drops under it below that */
    .desk-log__figures {
      flex-flow: row wrap;
      align-items: flex-start;
      gap: var(--space-32);
    }

    .desk-log__trips {
      flex: 1 1 560px;
    }

    .desk-log__digest {
      flex: none;
      width: 420px;
    }
  }

  @media (width >= 1680px) {
    .desk-log__quote p {
      max-width: 1512px;
      font-size: 78px;
      line-height: 74px;
      letter-spacing: -1.95px;
    }
  }
}