/* styles/sections/change-table.css
 * The outcome of an agent session: a ruled section intro, then one row per change with its
 * status, the decision it touched and that decision's owner. Frames: Coding with Agents
 * "Outcome" (ZWDMq dU7Wk, ITpMT XsQqc, mpVj3 qbnnp).
 * <div class="change-table">
 *   <p class="change-table__head" aria-hidden="true"> column names </p>
 *   <ul class="change-table__rows" role="list"><li class="change-table__row"> ... </li></ul>
 * </div>
 * A list, not a <table> (see "Workflow page builder" in REBUILD.md). Each cell carries its
 * column name: visible on M, as the 390 frame draws it, and screen-reader only from D, where
 * the head row shows it. Columns are 520 / 140 / 180 / rest at 1440 and 1920 and keep those
 * proportions below 1440. */
@layer sections {
  .session-outcome .section-intro {
    --intro-gap: var(--space-20);
    --intro-lede-size: 15px;
    padding: 55px 0 var(--space-32);
    border-top: 1px solid var(--line-2);
  }

  .change-table {
    --change-cols: minmax(0, 520fr) minmax(0, 140fr) minmax(0, 180fr) minmax(0, 440fr);
  }

  .change-table__head {
    display: flex;
    /* Pencil draws strokes inside the box: 12 + 16 + the 1px rule is the frame's 28 */
    padding-bottom: 11px;
    border-bottom: 1px solid var(--ink-30);
  }

  .change-table__head span,
  .change-table__label {
    font-family: var(--font-mono);
    font-weight: 600;
    letter-spacing: 0.6px;
  }

  .change-table__head span {
    font-size: 13px;
    line-height: 16px;
    color: var(--fern);
  }

  .change-table__head span + span { display: none; }

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

  .change-table__row {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
    padding-block: 22px 21px;
    border-bottom: 1px solid var(--line);
  }

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

  .change-table__title {
    font-size: 17px;
    font-weight: 500;
    line-height: 20px;
    text-wrap: wrap;
    color: var(--ink);
  }

  .change-table__code {
    border-radius: var(--radius-sm);
    background: var(--shot-callout);
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 16px;
    white-space: pre-wrap;
    color: var(--ink-55);
  }

  .change-table__code--bare { background: none; }

  .change-table__cell {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .change-table__label {
    font-size: 10px;
    line-height: 12px;
    color: var(--ink-muted);
  }

  .change-table__status,
  .change-table__decision {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 600;
    line-height: 17px;
  }

  .change-table__status--landed { color: var(--status-landed); }
  .change-table__status--held { color: var(--status-held); }
  .change-table__decision { color: var(--fern); }

  .change-table__none {
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 16px;
    color: var(--ink-55);
  }

  .change-table__owner {
    min-height: 19px;
    font-size: 16px;
    line-height: 19px;
    color: var(--ink);
  }

  @media (min-width: 900px) {
    .session-outcome .section-intro {
      padding: 95px 0 var(--space-48);
    }

    .change-table__head,
    .change-table__row {
      display: grid;
      grid-template-columns: var(--change-cols);
      align-items: baseline;
    }

    .change-table__head span + span { display: block; }

    .change-table__row { gap: 0; }

    /* Keeps a wrapped title clear of the status column below 1440 */
    .change-table__change { padding-right: var(--space-16); }

    .change-table__title {
      font-size: 18px;
      line-height: 22px;
    }

    /* Screen-reader only from D, where the head row names the column */
    .change-table__label {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
  }

  @media (min-width: 1680px) {
    .change-table { --change-cols: 520px 140px 180px minmax(0, 1fr); }
  }
}