@layer components {
  /* A newer version while text is unsaved: the waiting banner, its sections, one red group per choice. */
  .document-conflict { display: contents; }
  .document-conflict-banner:not([hidden]), .document-conflict-group {
    display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 8px 10px; padding: 10px 12px;
    border: 1px solid var(--jx-wait); border-radius: 10px; background: var(--jx-wait-soft);
    font-size: 13.5px; line-height: 1.45;
  }
  .document-conflict-icon { display: flex; color: var(--jx-wait); margin-top: 1px; }
  /* A script-hidden button stays hidden: .button sets its own display. */
  .document-conflict .button[hidden] { display: none; }
  .document-conflict-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
  .document-conflict-title, .document-conflict-reason { margin: 0; font-weight: 600; }
  .document-conflict-text { margin: 0; }
  .document-conflict-actions, .document-conflict-choices { display: flex; flex-wrap: wrap; gap: 6px; }
  .document-conflict-sections, .document-conflict-groups { grid-column: 1 / -1; }
  .document-conflict-sections {
    margin: 0; padding: 0; list-style: none; border: 1px solid var(--border); border-radius: 10px;
    background: var(--card);
  }
  .document-conflict-sections:empty { display: none; }
  .document-conflict-section { display: flex; align-items: center; gap: 10px; padding: 8px 10px; font-size: 13px; }
  .document-conflict-section + .document-conflict-section { border-top: 1px solid var(--border); }
  .document-conflict-section-title { flex: 1; min-width: 0; font-weight: 500; overflow-wrap: anywhere; }
  .document-conflict-tag--choose { background: var(--jx-no-soft); color: var(--jx-no); }
  .document-conflict-groups { display: flex; flex-direction: column; gap: 10px; }
  .document-conflict-groups:empty { display: none; }
  .document-conflict-group { border-color: var(--jx-no); background: var(--jx-no-soft); }
  .document-conflict-group > .document-conflict-icon { color: var(--jx-no); }
  /* Side by side when there is room, one under the other in a narrow panel or on a phone. */
  .document-conflict-sides { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 10px; }
  .document-conflict-side {
    display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 10px 12px;
    border: 1px solid var(--border); border-radius: 10px; background: var(--card); font-size: 13px;
  }
  .document-conflict-side-title {
    display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; font-weight: 600;
    color: var(--muted-foreground);
  }
  .document-conflict-lines { margin: 0; padding: 0; list-style: none; white-space: pre-wrap; overflow-wrap: anywhere; }
  .document-conflict-lines ins { background: var(--jx-ok-soft); color: var(--foreground); text-decoration: underline; border-radius: 3px; padding: 0 2px; }
  .document-conflict-lines del { background: var(--jx-no-soft); text-decoration: line-through; border-radius: 3px; padding: 0 2px; }
  /* Chosen: a filled button with a check mark and the line under the group, never the color alone. */
  .document-conflict-choices .button[aria-pressed="true"] {
    background: var(--primary); color: var(--primary-foreground); border-color: transparent; font-weight: 600;
  }
  .document-conflict-choices .button[aria-pressed="true"]::before { content: "\2713\00a0" / ""; }
  .document-conflict-retained { margin: 0; font-weight: 600; }
  .document-conflict-retained[hidden] { display: none; }
  .document-conflict-merged:not([hidden]) {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px;
    border: 1px solid var(--jx-ok); border-radius: 10px; background: var(--jx-ok-soft); font-size: 13.5px;
  }
  .document-conflict-merged-text { flex: 1 1 260px; margin: 0; }
  .document-conflict-short { display: none; }
  /* The other version's passages in the editor: a tint and a bar, named by the merged line above. */
  .visual-merge-theirs {
    /* Darker secondary text: the tint under it lowers the muted token below 4.5:1. */
    --muted-foreground: light-dark(oklch(0.48 0 0), oklch(0.708 0 0));
    background: var(--jx-ok-soft); box-shadow: inset 3px 0 0 var(--jx-ok); border-radius: 4px;
  }

  @media (max-width: 1099px) {
    .document-conflict-long { display: none; }
    .document-conflict-short { display: inline; }
    .document-conflict-sections { display: none; }
    /* Under the phone header; it scrolls on its own so the text keeps the screen. */
    /* 45 % of what the reader sees, keyboard included (--vv-height from lib/visual_viewport.js). */
    .document-editor--page :is(.document-conflict-banner, .document-conflict-merged, .document-conflict-fallback):not([hidden]) {
      flex: none; margin: 8px var(--gutter) 0; max-height: calc(var(--vv-height, 100dvh) * 0.45); overflow-y: auto;
      overscroll-behavior: contain;
    }
  }
  @media (pointer: coarse) {
    .document-conflict :is(.document-conflict-actions, .document-conflict-choices, .document-conflict-merged) .button { min-height: var(--tap); }
  }
}