/* The approvals screens (pending_changes/*), composed from the UI kit: the
   list (Waiting | Decided) as an Item group in a flush Card beside the change
   it opened; a change's comparison, live on the left and proposed on the
   right, step by step, each side an outline Item; its lineage as an Item
   group and its discussion as avatars beside notes. This file only lays those
   components out — the kit draws them (test/architecture/
   area_stylesheets_test.rb). The word diff's marks are viz-diff.css. */
@layer components {
  /* The list's head, inside its card header: Waiting | Decided (ui-tabs),
     then the filters and what the list is showing. */
  .approvals__tabs {
    align-self: flex-start;
  }

  /* A change in the list: its tick box (while it can be decided in bulk)
     beside the Item that opens it. */
  .approvals__item {
    align-items: flex-start;
    display: flex;
  }

  .approvals__tick {
    display: flex;
    padding-block-start: 0.875rem;
    padding-inline-start: 1rem;
  }

  .approvals__link {
    flex: 1;
    min-inline-size: 0;
  }

  /* A row's first line: its lens badge, then the title, which truncates
     rather than pushing the badge off the row. */
  .approvals__title {
    min-inline-size: 0;
  }

  /* The j / k / ↵ line and the pages, under the list. */
  .approvals__keys,
  .approvals__pager {
    padding: 0.75rem 1.5rem;
  }

  /* An empty list, or the preview before a row is opened: the kit's Empty,
     inset from the card's edge. */
  .approvals__empty {
    padding: 1.25rem;
  }

  .approvals__intro {
    min-block-size: 20rem;
  }

  /* The list and the change it opened, side by side from 64rem, each column
     held under the admin bar and scrolling on its own — reading a long
     comparison doesn't lose your place in the list, and the reverse. Below
     that, one column: a row opens the full page (approvals_preview_controller),
     so the preview has nothing to show. */
  .approvals__split {
    align-items: start;

    @media (width < 64rem) {
      grid-template-columns: minmax(0, 1fr);

      > .approvals__column:last-child { display: none; }
    }
  }

  @media (width >= 64rem) {
    .approvals__column {
      inset-block-start: calc(var(--app-header-height, 3.5rem) + 1rem);
      max-block-size: calc(100dvh - var(--app-header-height, 3.5rem) - 2rem);
      overflow-y: auto;
      overscroll-behavior: contain;
      position: sticky;
    }
  }

  /* The frame a row loads into: a block, so its contents lay out as the
     column's. */
  .approvals__preview {
    display: block;
  }

  /* The change, compact, in the second column. */
  .approvals__compact {
    padding: 1.5rem;
  }

  /* What this does, and the reasoning: each label over its text. Also the
     Audit box's record, in the sidebar's narrow column. */
  .approvals__why {
    display: grid;
    gap: 0.25rem;
    margin: 0;

    > dt:not(:first-child) { margin-block-start: 0.75rem; }

    > dd {
      margin: 0;
      min-inline-size: 0;
      overflow-wrap: anywhere;
    }
  }

  .approvals__prose { white-space: pre-line; }

  /* Under a row's title: kind · account · campaign · proposer · age ·
     comments, wrapping. */
  .row-meta {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.125rem 0.375rem;
    min-inline-size: 0;
  }

  /* The comparison: the change's name while editable, the two column heads,
     and the steps one under another. */
  .approvals__comparison {
    min-inline-size: 0;
  }

  .approvals__title-field {
    max-inline-size: 36rem;
  }

  .approvals__heads {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

    @media (width < 48rem) { display: none; }
  }

  .approvals__head {
    flex-wrap: wrap;
    min-block-size: 2.25rem;
  }

  /* The Proposed head's "Editable" badge, at the column's far end. */
  .approvals__editable {
    margin-inline-start: auto;
  }

  .approvals__steps {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  /* One step: its head (an Item), over its rows. */
  .approvals__step {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .approvals__resource {
    display: block;
    max-inline-size: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Two columns, a row per field: its label across both, then live |
     proposed. One column on a phone, live above proposed. */
  .approvals__grid {
    display: grid;
    gap: 0.5rem 1.5rem;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

    @media (width < 48rem) { grid-template-columns: minmax(0, 1fr); }
  }

  .approvals__label,
  .approvals__note,
  .approvals__more {
    grid-column: 1 / -1;
  }

  .approvals__label {
    flex-wrap: wrap;
    margin-block-start: 0.5rem;
  }

  .approvals__note {
    margin-block-start: 0.25rem;
  }

  /* A side of a field: an outline Item, its value over any note. */
  .approvals__cell {
    min-inline-size: 0;
  }

  .approvals__value {
    margin: 0;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
  }

  /* A money box: narrow, with its $ addon. */
  .approvals__money { inline-size: 10rem; }

  /* A create's technical fields, folded under the ones a marketer reads
     (a Collapsible: <details>, its trigger a ghost button). */
  .approvals__more {
    margin-block-start: 0.5rem;

    > summary { inline-size: fit-content; }
  }

  .approvals__grid--flush { margin-block-start: 0.5rem; }

  .approvals__advanced > summary {
    inline-size: fit-content;
  }

  /* The policy review's alerts and exemptions, over the separator and the
     table of findings. */
  .approvals__policy {
    padding-block-end: 1.5rem;
  }

  /* Why a card dropped on the board didn't go. */
  .approvals__prompt { margin-block-end: 1rem; }

  /* The discussion: an avatar (ui-avatar, or the decision's mark in one)
     beside each note. */
  .comment-thread {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .comment {
    display: flex;
    gap: 0.625rem;
  }

  .comment__body {
    flex: 1;
    min-inline-size: 0;
  }

  .comment__byline {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
  }

  .comment__text {
    overflow-wrap: anywhere;
    white-space: pre-wrap;
  }

  /* A lineage step's detail, clamped: a step is a glance, and the full text
     of whatever it summarises is in the sections beside it. */
  .lineage .lineage__detail {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    display: -webkit-box;
    overflow: hidden;
  }

  /* The reason typed in a decision's confirm (layouts/shared/_confirm_dialog). */
  .decision-note { inline-size: 100%; }

  /* The board: four columns fit a laptop, so where a card is and where it
     can be dropped are on screen together. */
  .approvals-board {
    grid-auto-columns: minmax(14rem, 1fr);
  }

  /* A worker is on it right now: the badge breathes, so the column reads as
     moving rather than stuck. */
  .approvals-card__applying {
    @media (prefers-reduced-motion: no-preference) {
      animation: approvals-breathe 1.6s ease-in-out infinite;
    }
  }

  @keyframes approvals-breathe {
    50% { opacity: 0.5; }
  }
}