/* styles/sections/exhibit-pairs.css
 * Exhibits (Product Teams: P2QPy, Oesgt, DFpq6): copy beside a product shot in the frames'
 * 528 and 704 columns (one 1280 row, start-aligned on W), the agent beat with its full-width
 * pane, and the ruled focus-group beat. Shots: the Brief session record (KqWRt), the Cursor
 * pane (fiB78, .artifact-window--dark) and the Slack thread (FFJ2M). */
@layer sections {
  .exhibits {
    padding-top: var(--section-md);
  }

  .exhibits__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-80);
  }

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

  .exhibit__notes {
    display: flex;
    flex-direction: column;
    gap: var(--space-14);
  }

  .exhibit__notes--day-one {
    gap: var(--space-16);
  }

  .exhibit__heading,
  .exhibit__body {
    margin: 0;
  }

  .exhibit__heading {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 600;
    line-height: 30px;
    letter-spacing: -0.13px;
    color: var(--ink);
  }

  .exhibit__body {
    font-size: 17px;
    line-height: 26px;
    color: var(--ink-2);
  }

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

  /* ---------- Session record ---------- */
  .session-record__head {
    --artifact-bar-h: 42px;
  }

  .session-record__head .shot-head__title {
    font-size: 14px;
    color: var(--app-ink);
  }

  .session-record__head .shot-head__sub {
    color: var(--app-ink-2);
  }

  .session-record__avatar {
    --brief-avatar-size: 18px;
  }

  .session-record__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    padding: var(--space-24) var(--space-16) var(--space-28);
    line-height: round(nearest, 1.2em, 1px);
  }

  .session-record__body p {
    margin: 0;
  }

  .session-record__lead {
    font-size: 17px;
    font-weight: 600;
    line-height: 22px;
    color: var(--app-ink);
  }

  .session-record__sources {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-8);
  }

  .session-record__from {
    font-size: 13px;
    color: var(--ink-muted);
  }

  .session-record__source {
    display: inline-flex;
    white-space: nowrap;
    align-items: center;
    gap: var(--space-6);
    padding: 3px var(--space-8);
    border-radius: var(--radius-sm);
    box-shadow: inset 0 0 0 1px var(--rule-edge);
    font-size: 12px;
    color: var(--ink-2);
  }

  .session-record__themes {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--app-line);
  }

  .session-record__theme {
    display: flex;
    gap: var(--space-12);
    padding: 11px 0 11.5px;
    border-bottom: 1px solid var(--app-line);
  }

  .session-record__theme > div {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
  }

  .session-record__num {
    font-size: 13px;
    font-weight: 600;
    color: var(--fern-app);
  }

  .session-record__theme-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--app-ink);
  }

  .session-record__quote {
    font-size: 13px;
    line-height: 18px;
    letter-spacing: normal;
    color: var(--app-ink-2);
  }

  .session-record__decisions {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    padding-bottom: var(--space-4);
  }

  .session-record__label {
    font-size: 12px;
    font-weight: 600;
    color: var(--app-ink-2);
  }

  .session-record__recorded {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .session-record__recorded > li {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-10);
    font-size: 14px;
    color: var(--app-ink);
  }

  /* ---------- Cursor pane ---------- */
  .agent-pane {
    --window-dark-bg: var(--agents-bg);
    --window-dark-edge: var(--agents-bg);
  }

  .agent-pane__head {
    --artifact-bar-h: 40px;
    --artifact-bar-bg: color-mix(in srgb, var(--white) 6%, transparent);
    --artifact-bar-edge: var(--white-10);
    --artifact-bar-pad: var(--space-20);
    line-height: round(nearest, 1.2em, 1px);
  }

  .agent-pane__head .shot-head__title {
    font-weight: 600;
    color: var(--white);
  }

  .agent-pane__sub {
    color: var(--white-60);
  }

  .agent-pane__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-14);
    padding: var(--space-24) var(--space-16) var(--space-28);
    font-family: var(--font-mono);
  }

  .agent-pane__body p {
    margin: 0;
  }

  .agent-pane__prompt,
  .agent-pane__reply {
    font-size: 15px;
    line-height: 23px;
  }

  .agent-pane__prompt {
    font-weight: 500;
    color: var(--white);
  }

  .agent-pane__reply {
    color: var(--white-85);
  }

  .agent-pane__call {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding: var(--space-12) var(--space-16);
    border-radius: 6px;
    background: var(--white-5);
    box-shadow: inset 0 0 0 1px var(--white-15);
    font-size: 14px;
  }

  .agent-pane__call-head {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    line-height: round(nearest, 1.2em, 1px);
  }

  .agent-pane__tool {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    font-weight: 500;
    color: var(--term-accent);
  }

  .agent-pane__dot {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentcolor;
  }

  .agent-pane__arg {
    color: var(--white-60);
  }

  .agent-pane__result {
    line-height: 22px;
    color: var(--white);
  }

  /* ---------- Focus-group beat ---------- */
  /* The frames fix the beat's height (414, 244): the end padding gives up the 2px rules */
  .focus-beat {
    display: flex;
    flex-direction: column;
    gap: var(--space-28);
    padding-block: var(--space-32) 30px;
    border-block: 1px solid var(--rule-edge);
  }

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

  .focus-beat__quote blockquote,
  .focus-beat__quote p,
  .focus-beat__title,
  .focus-beat__body {
    margin: 0;
  }

  .focus-beat__quote p {
    font-family: var(--font-display);
    font-size: 22px;
    font-style: italic;
    font-weight: 400;
    line-height: 28px;
    color: var(--ink);
  }

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

  .focus-beat__answer {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    padding-top: var(--space-6);
  }

  .focus-beat__title {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.15px;
    color: var(--ink);
  }

  .focus-beat__body {
    font-size: 17px;
    line-height: 26px;
    color: var(--ink-2);
  }

  /* ---------- Slack thread ---------- */
  .thread-card__head .shot-head__sub {
    margin-left: -2px;
  }

  .thread-card__body {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: var(--space-20) var(--space-20) var(--space-24);
    line-height: round(nearest, 1.2em, 1px);
  }

  .thread-card__message {
    display: flex;
    gap: var(--space-12);
  }

  .thread-card__initials {
    display: grid;
    flex: none;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: var(--app-fern-soft);
    font-size: 12px;
    font-weight: 600;
    color: var(--fern-app);
  }

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

  .thread-card__top,
  .thread-card__text {
    margin: 0;
  }

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

  .thread-card__name {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
  }

  .thread-card__time {
    font-size: 12px;
    color: var(--ink-muted);
  }

  .thread-card__text {
    font-size: 15px;
    line-height: 22px;
    color: var(--ink);
  }

  .thread-card__items {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .thread-card__items > li {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-10);
  }

  .thread-card__item-title {
    font-size: 15px;
    color: var(--ink);
  }

  .thread-card__item-sub {
    font-size: 13px;
    color: var(--ink-muted);
  }

  @media (width >= 900px) {
    .exhibits__inner {
      gap: 128px;
    }

    /* 528 and 704 at 1440; W keeps both, start-aligned in the 1680 row */
    .exhibit {
      display: grid;
      grid-template-columns: minmax(0, 528fr) minmax(0, 704fr);
      gap: var(--space-48);
      align-items: start;
    }

    .exhibit--stacked {
      display: flex;
      align-items: stretch;
    }

    .exhibit__heading {
      font-size: 40px;
      line-height: 46px;
      letter-spacing: -0.2px;
    }

    .exhibit__body {
      font-size: 18px;
      line-height: 28px;
    }

    /* Day One's drawn break: below about 1230 the heading scales with its column so "What have
       we agreed on?" (10.59em) always fits on the first line; 40 at 1440 and 1920 */
    .exhibit__notes--day-one .exhibit__heading {
      font-size: min(40px, (100vw - 208px) * 0.039);
      line-height: round(nearest, 1.15em, 1px);
    }

    .session-record__body {
      padding-inline: var(--space-28);
    }

    .session-record__lead {
      font-size: 18px;
      line-height: 23px;
    }

    /* A chip that does not fit drops to the next line whole (900 to 950) */
    .session-record__sources {
      flex-flow: row wrap;
      align-items: center;
    }

    .session-record__quote {
      letter-spacing: normal;
    }

    .session-record__recorded > li,
    .thread-card__items > li {
      flex-direction: row;
      align-items: center;
    }

    /* A row too narrow for chip, title and meta wraps the meta under them (965 to 1045) */
    .thread-card__items > li {
      flex-wrap: wrap;
      row-gap: var(--space-4);
    }

    .agent-pane__body {
      padding-inline: var(--space-24);
    }

    .agent-pane__call-head {
      flex-flow: row wrap;
      align-items: center;
      gap: var(--space-8);
    }

    .focus-beat {
      flex-direction: row;
      gap: var(--space-48);
      padding-block: var(--space-48) 46px;
    }

    /* 608 and 624 at 1440; both give way together below it */
    .focus-beat__quote {
      flex: 608 1 0;
      min-width: 0;
    }

    .focus-beat__answer {
      flex: 624 1 0;
      min-width: 0;
    }

    .focus-beat__quote p {
      font-size: 30px;
      line-height: 38px;
    }

    .focus-beat__title {
      font-size: 26px;
      letter-spacing: -0.2px;
    }
  }

  @media (width >= 1680px) {
    .exhibit {
      grid-template-columns: 528px 704px;
    }

    /* W keeps the quote at 608 and gives the answer the rest */
    .focus-beat__quote {
      flex: none;
      width: 608px;
    }

    .session-record__quote {
      letter-spacing: normal;
    }
  }
}