/* styles/sections/persona-shots.css
 * Persona shots on the home page, built from the frames' node values on the Kestrel sample data:
 * the Jira thread (For Director), the agent activity card (For Head of AI) and the Monday brief
 * (For CPTO), each with the 390 frame's own figure (.frame-m). Chips and the shells come from
 * product-shots.css and artifacts.css. Rules on auto-height rows are inset box-shadows: Pencil
 * draws strokes inside the box, so a rule takes no height. */
@layer sections {
  /* ---------- 390: Q and A (For Director) ---------- */
  .qa {
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
    padding-top: var(--space-24);
    box-shadow: inset 0 1.5px 0 var(--ink);
  }

  .qa__question,
  .qa__answer {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
  }

  .qa p {
    margin: 0;
  }

  .qa__who {
    font-size: 13px;
    line-height: 16px;
    color: var(--ink-muted);
  }

  .qa__who--brief {
    font-weight: 600;
    color: var(--fern);
  }

  .qa__text {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.4px;
  }

  .qa__answer {
    padding-left: var(--space-16);
    box-shadow: inset 2px 0 0 var(--fern);
  }

  .qa__answer-text {
    font-size: 17px;
    line-height: 25px;
  }

  .qa__cited {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    padding-top: var(--space-4);
    font-size: 13px;
    line-height: 16px;
  }

  .qa__id {
    font-family: var(--font-mono);
    font-weight: 600;
  }

  .qa__title {
    color: var(--ink-muted);
  }

  .qa__status {
    font-weight: 600;
    color: var(--chip-pending-ink);
  }

  /* ---------- 390: agent log (For Head of AI) ---------- */
  .agent-log {
    box-shadow: inset 0 1px 0 var(--ink-35);
  }

  .agent-log p {
    margin: 0;
  }

  .agent-log__head,
  .agent-log__foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .agent-log__head {
    padding: var(--space-12) 0;
    font-size: 13px;
    line-height: 16px;
    color: var(--ink-muted);
  }

  .agent-log__list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .agent-log__list li {
    display: flex;
    gap: var(--space-16);
    padding: var(--space-16) 0;
    box-shadow: inset 0 1px 0 var(--line);
  }

  .agent-log__asked {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-4);
  }

  .agent-log__agent {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
  }

  .agent-log__q {
    font-size: 15px;
    line-height: 22px;
  }

  .agent-log__id {
    flex: none;
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
  }

  .agent-log__foot {
    flex-wrap: wrap;
    gap: var(--space-8) var(--space-16);
    white-space: nowrap;
    padding-top: var(--space-12);
    box-shadow: inset 0 1px 0 var(--line);
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: 0.8px;
    color: var(--ink-muted);
  }

  .agent-log__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-6);
    color: var(--ink);
    text-decoration: none;
  }

  /* 24px hit area around a 14px line */
  .agent-log__link::before {
    content: "";
    position: absolute;
    inset: -5px -4px;
  }

  /* ---------- 390: slip timeline (For CPTO) ---------- */
  .slip {
    box-shadow: inset 0 1.5px 0 var(--ink);
  }

  .slip p {
    margin: 0;
  }

  .slip__waiting {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding: var(--space-16) 0 var(--space-20);
  }

  .slip__head {
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: 0.6px;
  }

  .slip__status {
    color: var(--chip-pending-ink);
  }

  .slip__title {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: -0.2px;
  }

  .slip__axis {
    position: relative;
    height: 30px;
    border-top: 1px solid var(--line);
    font-size: 12px;
    line-height: 1.2;
    color: var(--ink-muted);
  }

  .slip__axis span {
    position: absolute;
    top: 10px;
    left: 0;
  }

  .slip__axis span:nth-child(2) {
    left: 121px;
  }

  .slip__axis span:nth-child(3) {
    left: 233px;
  }

  .slip__list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .slip__list li {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
    padding: var(--space-14) 0;
    box-shadow: inset 0 1px 0 var(--line);
  }

  .slip__row {
    display: flex;
    justify-content: space-between;
  }

  .slip__name {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
  }

  .slip__slip {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--chip-pending-ink);
  }

  .slip__track {
    display: block;
    width: 342px;
    max-width: 100%;
    height: 20px;
    margin-block: -6px -2px;
  }

  .slip__key {
    display: flex;
    align-items: center;
    gap: var(--space-16);
    padding-top: var(--space-12);
    box-shadow: inset 0 1px 0 var(--line);
    font-size: 12px;
    line-height: 1.2;
    color: var(--ink-muted);
  }

  .slip__key span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-6);
  }

  /* ---------- 1440 and 1920 shots ---------- */
  @media (width >= 900px) {
    /* Jira thread */
    .jira p {
      margin: 0;
    }

    .jira__top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 52px;
      padding: 0 var(--space-24);
      border-bottom: 1px solid var(--line-2);
      font-size: 14px;
      line-height: 1.2;
    }

    .jira__key {
      font-weight: 600;
      margin-right: 4px;
    }

    .jira__summary,
    .jira__meta,
    .jira__time,
    .jira__linked-source {
      color: var(--chip-superseded-ink);
    }

    .jira__meta {
      display: flex;
      align-items: center;
      gap: var(--space-12);
      font-size: 13px;
    }

    .jira__avatar {
      display: inline-flex;
      flex: none;
      justify-content: center;
      align-items: center;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: var(--avatar-bg);
      font-size: 11px;
      font-weight: 700;
      line-height: 1;
      color: var(--fern);
    }

    .jira__avatar--sm {
      width: 26px;
      height: 26px;
    }

    .jira__avatar--brief {
      background: var(--fern);
      color: var(--white);
    }

    .jira__content {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 270px;
      gap: 28px;
      padding: 28px 28px var(--space-32);
    }

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

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

    .jira__msg-body {
      display: flex;
      flex: 1;
      flex-direction: column;
      gap: var(--space-10);
    }

    .jira__msg:nth-child(odd) .jira__msg-body {
      gap: var(--space-4);
    }

    .jira__who {
      font-size: 14px;
      line-height: 1.2;
    }

    .jira__name {
      font-weight: 600;
      margin-right: 4px;
    }

    .jira__time {
      font-size: 13px;
    }

    .jira__ask {
      font-size: 18px;
      font-weight: 500;
      line-height: 1.2;
    }

    .jira__lead {
      font-size: 16px;
      line-height: 1.5;
    }

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

    .jira__applies li {
      display: grid;
      grid-template-columns: 124px minmax(0, 1fr);
      gap: var(--space-12);
      align-items: center;
      font-size: 16px;
      line-height: 1.2;
    }

    .jira__applies .chip {
      margin-left: 7px;
      justify-self: start;
    }

    .jira__linked {
      padding-left: var(--space-24);
      border-left: 1px solid var(--line-2);
      align-self: start;
    }

    .jira__linked-list {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .jira__linked-list li {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 5px;
      padding: var(--space-12) 0;
    }

    .jira__linked-list li:first-child {
      padding-top: var(--space-14);
    }

    .jira__linked-list li + li {
      box-shadow: inset 0 1px 0 var(--line-2);
    }

    .jira__linked-title {
      font-size: 14px;
      font-weight: 600;
      line-height: 1.2;
    }

    .jira__linked-list .is-superseded .jira__linked-title {
      color: var(--chip-superseded-ink);
    }

    .jira__linked-source {
      font-size: 12px;
      line-height: 1.2;
    }

    /* Agent activity */
    .agents {
      box-sizing: border-box;
      width: 100%;
      height: 394px;
      padding: var(--space-32) calc(var(--bleed, 80px) - 36px) var(--space-24) 36px;
      border-radius: var(--radius-lg) 0 0 var(--radius-lg);
      box-shadow: inset 1px 1px 0 var(--white-12), inset 0 -1px 0 var(--white-12);
      background: var(--agents-bg);
      color: var(--white);
    }

    .agents__title {
      display: flex;
      align-items: flex-end;
      gap: var(--space-12);
      margin: 0 0 var(--space-20);
      line-height: 1.2;
    }

    .agents__name {
      font-size: 22px;
      font-weight: 600;
      letter-spacing: -0.2px;
    }

    .agents__sub {
      padding-bottom: 1px;
      font-size: 15px;
      color: var(--white-65);
    }

    .agents__table {
      width: 100%;
      table-layout: fixed;
      border-collapse: collapse;
      text-align: left;
    }

    .agents__table thead th {
      height: 24px;
      padding: 0 0 var(--space-10);
      box-shadow: inset 0 -1px 0 var(--white-10);
      font-size: 12px;
      font-weight: 700;
      line-height: 1.2;
      letter-spacing: 0.7px;
      color: var(--white-50);
    }

    .agents__table :is(th, td):first-child {
      width: 174px;
    }

    .agents__table tbody :is(th, td):last-child,
    .agents__table :is(th, td):last-child {
      width: 180px;
      padding-left: var(--space-24);
    }

    .agents__table tbody :is(th, td) {
      height: 67px;
      padding: 15px 0;
      box-shadow: inset 0 -1px 0 var(--white-10);
      vertical-align: middle;
      font-weight: 400;
    }

    .agents__table tbody tr:last-child :is(th, td) {
      box-shadow: none;
    }

    .agents__agent,
    .agents__team {
      display: block;
    }

    .agents__agent {
      font-size: 16px;
      font-weight: 600;
      line-height: 1.2;
    }

    .agents__team {
      margin-top: 2px;
      font-size: 13px;
      line-height: 1.2;
      color: var(--white-65);
    }

    .agents__asked {
      font-size: 16px;
      line-height: 1.2;
      color: var(--white-88);
    }

    .agents .chip--pending {
      background: var(--chip-pending-bg-dark);
      color: var(--chip-pending-ink-dark);
    }

    .agents .chip--confirmed {
      background: var(--chip-confirmed-bg-dark);
      color: var(--chip-confirmed-ink-dark);
    }

    /* Monday brief */
    .monday {
      padding: 36px var(--space-40) var(--space-40);
    }

    .monday p {
      margin: 0;
    }

    .monday__title {
      display: flex;
      align-items: flex-end;
      gap: var(--space-12);
      line-height: 1.2;
    }

    .monday__name {
      font-size: 22px;
      font-weight: 600;
      letter-spacing: -0.2px;
    }

    .monday__sub {
      padding-bottom: 1px;
      font-size: 15px;
      color: var(--chip-superseded-ink);
    }

    .monday__split {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 520px;
      gap: var(--space-40);
      margin-top: 28px;
    }

    .monday__needs {
      display: flex;
      flex-direction: column;
      gap: var(--space-12);
      padding: var(--space-24);
      outline: 1px solid var(--needs-edge);
      outline-offset: -1px;
      border-radius: var(--radius-md);
      background: var(--needs-bg);
    }

    .monday__needs .shot__label {
      color: var(--ink-muted);
    }

    .monday__decision {
      display: flex;
      align-items: center;
      gap: var(--space-10);
      font-size: 19px;
      font-weight: 600;
      line-height: 1.2;
    }

    .monday__desc {
      font-size: 16px;
      line-height: 1.55;
      color: var(--ink-desc);
    }

    .monday__actions {
      display: flex;
      gap: var(--space-8);
      padding-top: var(--space-4);
    }

    .monday__btn {
      display: inline-flex;
      align-items: center;
      height: 38px;
      padding: 0 var(--space-14);
      border: 1px solid var(--btn-quiet-edge);
      border-radius: var(--radius-sm);
      background: var(--white);
      font-size: 14px;
      font-weight: 600;
      line-height: 1.2;
    }

    .monday__btn--primary {
      border-color: var(--fern-app);
      background: var(--fern-app);
      color: var(--white);
    }

    .monday__table {
      align-self: start;
      width: 100%;
      border-collapse: collapse;
      text-align: right;
    }

    .monday__table th,
    .monday__table td {
      padding: 0 0 0 var(--space-16);
      border-bottom: 1px solid var(--line-2);
    }

    .monday__table :is(th, td):first-child {
      padding-left: 0;
      text-align: left;
    }

    .monday__table thead th {
      padding-bottom: var(--space-8);
      font-size: 12px;
      font-weight: 700;
      line-height: 1.2;
      letter-spacing: 0.7px;
      color: var(--chip-superseded-ink);
    }

    .monday__table thead th:nth-child(2),
    .monday__table thead th:nth-child(3) {
      width: 88px;
    }

    .monday__table thead th:last-child {
      width: 72px;
    }

    .monday__table tbody :is(th, td) {
      height: 43px;
      font-size: 16px;
      line-height: 1.2;
      color: var(--ink-desc);
    }

    .monday__table tbody th {
      font-weight: 600;
      color: var(--ink);
    }

    .monday__table tbody tr:last-child :is(th, td) {
      border-bottom: 0;
    }

    .monday__table .monday__slip {
      font-weight: 600;
      color: var(--chip-pending-ink);
    }
  }

  /* Between the frame widths the app shots reflow on their own width, like the product does */
  @media (width >= 900px) {
    .jira,
    .monday {
      container-type: inline-size;
    }

    @container (width < 640px) {
      .jira__content {
        grid-template-columns: minmax(0, 1fr);
      }

      .jira__linked {
        padding: var(--space-16) 0 0;
        border-left: 0;
        border-top: 1px solid var(--line-2);
      }
    }

    @container (width < 1060px) {
      .monday__split {
        grid-template-columns: minmax(0, 1fr);
      }
    }
  }

  @media (width >= 1680px) {
    .agents {
      width: 824px;
      padding-right: 36px;
      border-radius: var(--radius-lg);
      box-shadow: inset 0 0 0 1px var(--white-12);
    }
  }
}