/* Pull requests (pulls-ui.js): the chip on a card, the bar on a session, the notice in its thread,
   and what the Review page says about them. */

/* How one stands, as a colour: set where the tone is named, read by the dot and the pill. */
:is(.pull-chip, .pull-row, .pull-pill)[data-tone="success"] { --pull-tone: var(--success); }
:is(.pull-chip, .pull-row, .pull-pill)[data-tone="danger"] { --pull-tone: var(--danger); }
:is(.pull-chip, .pull-row, .pull-pill)[data-tone="warn"] { --pull-tone: var(--warn); }
:is(.pull-chip, .pull-row, .pull-pill)[data-tone="pending"] { --pull-tone: var(--blue); }
:is(.pull-chip, .pull-row, .pull-pill)[data-tone="neutral"] { --pull-tone: var(--text-2); }
:is(.pull-chip, .pull-row, .pull-pill)[data-tone="muted"] { --pull-tone: var(--text-4); }

.pull-link { color: var(--text); text-decoration: underline; text-decoration-color: var(--border-1); text-underline-offset: 3px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pull-link:hover { text-decoration-color: currentColor; }
.pull-link:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
.pull-number { color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* The chip: one pull request in a line. */
.pull-chip { display: inline-flex; align-items: center; gap: 5px; min-width: 0; max-width: 100%; font-size: 12px; line-height: 18px; color: var(--text-2); white-space: nowrap; }
.pull-chip-repo { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--text-3); }
.pull-chip .pull-link, .pull-chip .pull-number { flex: none; }
.pull-word { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pull-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--pull-tone, var(--text-3)); }
.pull-chip[data-tone="pending"] .pull-dot { animation: pulse 1.4s ease-in-out infinite; }
.pull-chip[data-state="closed"] .pull-link { color: var(--text-3); }

/* The bar: a session's pull requests and what can be done about them. */
.pulls-bar { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 10px 12px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border-3); font-size: 13px; line-height: 18px; color: var(--text-2); text-align: left; }
.pulls-bar[hidden] { display: none; }
/* Where the app puts it above a session's thread: as wide as the messages under it. */
.thread-pulls { flex: none; width: min(960px, 100% - 32px); margin: 0 auto 8px; }
.thread-pulls:empty { display: none; }

.pulls-rows { display: flex; flex-direction: column; gap: 8px; }
.pull-row { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-width: 0; }
.pull-main { flex: 1 1 220px; min-width: 0; display: flex; align-items: center; gap: 6px; }
.pull-main svg { flex: none; color: var(--text-3); }
.pull-repo { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pull-main .pull-link, .pull-main .pull-number { flex: none; }
.pull-branch { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; font-size: 12px; color: var(--text); }
.pull-title { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.pull-pill { flex: none; padding: 1px 8px; border-radius: 10px; font-size: 12px; line-height: 18px; white-space: nowrap; color: var(--pull-tone, var(--text-2)); background: color-mix(in srgb, var(--pull-tone, var(--text-2)) 14%, transparent); }
.pull-pill[data-tone="neutral"], .pull-pill[data-tone="muted"] { background: var(--fill); }
.pull-row > .pull-link { font-size: 12px; }
.pull-detail { flex-basis: 100%; padding-left: 20px; font-size: 12px; line-height: 17px; color: var(--text-3); overflow-wrap: anywhere; }
.pull-detail[data-kind="failing"], .pull-detail[data-kind="error"] { color: var(--danger); }

.pulls-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.pulls-say { flex: 1 1 140px; min-width: 0; font-size: 12px; line-height: 17px; color: var(--text-3); }
.pulls-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pulls-actions .btn:disabled { cursor: default; }
.pulls-sync[data-busy="true"] svg { animation: spin .9s linear infinite; }

.pulls-quiet { display: flex; flex-direction: column; gap: 2px; }
.pull-quiet { font-size: 12px; line-height: 17px; color: var(--text-3); overflow-wrap: anywhere; }
.pull-quiet .pull-link, .pull-quiet .pull-number { color: var(--text-2); }

/* In the side panel there is no room for one line: the title goes under the number. */
.pulls-bar[data-compact="true"] { padding: 10px; }
.pulls-bar[data-compact="true"] .pull-main { flex: 1 1 0; flex-wrap: wrap; }
.pulls-bar[data-compact="true"] .pull-title { order: 3; flex: 1 1 100%; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.pulls-bar[data-compact="true"] .pull-detail { padding-left: 0; }
.pulls-bar[data-compact="true"] .pulls-say { flex-basis: 100%; }

/* In a session's thread: "Opened pull request #12 in acme/web". */
.msg.notice[data-tone="pull"] .pull-link { color: var(--text-2); }

/* The Review page: the pull requests of a review's session, and GitHub's reason when it refused a merge. */
.review-pulls { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding: 0 0 10px; min-width: 0; }
.review-refused { padding: 0 0 10px; font-size: 13px; line-height: 18px; color: var(--danger); overflow-wrap: anywhere; }
.review-applied[data-state="merged"] { color: var(--success); }
.review-applied[data-state="open"], .review-applied[data-state="branch"] { color: var(--text-2); }
.review-applied[data-state="merged"] > span a { color: inherit; }

@media (max-width: 767px) {
  .thread-pulls { width: calc(100% - 24px); }
  /* A link is a 44 px target; the text keeps its place. */
  .pull-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; margin: 0 -6px; }
  .pull-main { flex-basis: 100%; flex-wrap: wrap; }
  .pull-title { flex: 1 1 100%; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
  .pull-detail { padding-left: 0; }
  .pulls-say { flex-basis: 100%; }
  .pulls-actions { width: 100%; }
  .pulls-actions .btn.sm { height: 44px; padding: 0 14px; font-size: 14px; }
  .pulls-actions .btn.sm.primary { flex: 1 1 auto; }
  .pulls-sync { width: 44px; height: 44px; margin-left: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .pull-chip[data-tone="pending"] .pull-dot, .pulls-sync[data-busy="true"] svg { animation: none; }
}