/* A change the conversation suggested, waiting at its value for Confirm or Undo (view-pending.js, design A): an amber
   inset where the value lives, the old value struck through, the new one in bold, the expert's words as the reason. */

.pending-change {
  display: grid;
  gap: var(--sp-1);
  padding: var(--sp-3);
  border-radius: var(--r-lg);
  background: var(--amber-tint);
  box-shadow: inset 0 0 0 1px var(--amber-border);
  scroll-margin: calc(var(--toolbar-h) + var(--sp-4)) 0 calc(var(--target) * 3);
}
.pending-question { font-weight: 600; }
.pending-value { overflow-wrap: anywhere; }
.pending-label { color: var(--label-2); }
.pending-change del { color: var(--label-3); text-decoration-thickness: 1px; }
.pending-change ins { text-decoration: none; font-weight: 600; }
.pending-source { overflow-wrap: anywhere; }
.pending-source q { color: var(--label-2); font-size: var(--fs-callout); }
.pending-change .action-row { margin-top: var(--sp-2); }

/* A's tinted row: a settled value with a change waiting reads as one amber row, the value's name and its change
   (design A's .value.is-pending). The row is the document's, which marks a settled value's row with data-pointer; the
   change inside it drops its own box and its label (the row's name says it). */
[data-pointer]:has(.pending-change) {
  margin: 0 calc(-1 * var(--sp-3));
  padding: var(--sp-3);
  border-radius: var(--r-lg);
  background: var(--amber-tint);
  border-top-color: transparent;
}
[data-pointer]:has(.pending-change) + [data-pointer] { border-top-color: transparent; }
[data-pointer] .pending-change { padding: 0; border-radius: 0; background: none; box-shadow: none; }
[data-pointer] .pending-change .pending-label { display: none; }

@media (max-width: 760px) {
  .pending-change .action-row .btn { flex: 1 1 0; }
}
/* On a narrow screen the change spans the whole row, under the value's name, instead of a squeezed second column. */
@media (max-width: 600px) {
  [data-pointer]:has(.pending-change) { grid-template-columns: 1fr; }
  [data-pointer]:has(.pending-change) > * { grid-column: 1 / -1; }
}

/* A value the server refused as not one of its options: why, then the options and the expert's words. */
.pending-refusal { display: grid; gap: var(--sp-2); margin-top: var(--sp-2); }
.pending-options { display: grid; gap: var(--sp-1); margin: 0; padding: 0; border: 0; }
.pending-options legend { font-weight: 600; margin-bottom: var(--sp-1); }
.pending-options .option { display: flex; gap: var(--sp-2); align-items: baseline; min-height: var(--target); }
.refusal-row { display: flex; gap: var(--sp-2); }