/* Side-by-side comparison of two saved outputs (static/js/meridian_json_diff.js): one conclusion
   banner, then both sides in ONE scroll so rows stay aligned, with each difference marked in place.
   Theme-aware: tints are translucent and text colour is inherited, so light and dark palettes both read. */
#view-meridian .meridian-diff {
  --diff-line: var(--frame-border, var(--border, #d7e0dc));
  --diff-head: var(--surface-sunken, #f8faf8);
  --diff-muted: var(--text-muted, #5f7470);
  --diff-amber: rgba(232,178,64,.34);
  --diff-amber-edge: var(--warn-dot, #d39b1d);
  --diff-amber-text: var(--warn-text, #7a5208);
  --diff-ok: #2f7d3b;
  --diff-ins: rgba(47,125,59,.2);
  --diff-del: rgba(179,38,30,.16);
  margin: .5rem 0 1rem; min-width: 0;
}

/* Conclusion banner: the match % left, what agrees (bold), what differs and whether it matters right. */
#view-meridian .meridian-diff-summary { display: flex; gap: 1rem; align-items: center; padding: .7rem 1rem; background: var(--surface, #fff);
  border: 1px solid var(--diff-line); border-left: 4px solid var(--diff-muted); border-radius: 6px; }
#view-meridian .meridian-diff-summary.meridian-diff-identical { border-left-color: var(--diff-ok); }
#view-meridian .meridian-diff-summary.meridian-diff-wording { border-left-color: var(--bull-dot, #7a8fa6); }
#view-meridian .meridian-diff-summary.meridian-diff-material { border-left-color: var(--diff-amber-edge); }
#view-meridian .meridian-diff-badge { min-width: 4.2rem; text-align: center; flex: none; }
#view-meridian .meridian-diff-pct { display: block; font-size: 1.7rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
#view-meridian .meridian-diff-badge-label { display: block; color: var(--diff-muted); font-size: .7rem; margin-top: .15rem; }
#view-meridian .meridian-diff-text { min-width: 0; }
#view-meridian .meridian-diff-text p { margin: 0; overflow-wrap: break-word; }
#view-meridian .meridian-diff-explainer { color: var(--diff-muted); font-size: .85rem; margin-top: .15rem !important; }

/* One scroll for both sides: a sticky header and two equal columns with a thin divider. */
#view-meridian .meridian-diff-scroll { margin-top: .5rem; max-height: 70vh; overflow: auto; background: var(--surface, #fff);
  border: 1px solid var(--diff-line); border-radius: 6px; overscroll-behavior: contain; }
#view-meridian .meridian-diff-scroll:focus-visible { outline: 2px solid var(--accent, #7499ed); outline-offset: 2px; }
#view-meridian .meridian-diff-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
#view-meridian .meridian-diff-col { width: 50%; }
#view-meridian .meridian-diff-table > thead th { position: sticky; top: 0; z-index: 2; background: var(--diff-head); text-align: left;
  padding: .45rem .8rem; border-bottom: 1px solid var(--diff-line); font-size: .85rem; font-weight: 600; }
#view-meridian .meridian-diff-table > thead th + th { border-left: 1px solid var(--diff-line); }
#view-meridian .meridian-diff-head-extra { float: right; font-weight: 400; font-size: .78rem; color: var(--diff-muted); margin-left: .6rem; }
#view-meridian .meridian-diff-head-extra a { color: var(--accent, #1f7a6c); text-decoration: none; margin-left: .6rem; }
#view-meridian .meridian-diff-head-extra a:hover { text-decoration: underline; }

/* Row headings: the record, its own match and what differs in it. */
#view-meridian .meridian-diff-row-head > th { background: var(--diff-head); padding: .3rem .8rem; font-size: .8rem; font-weight: 400; text-align: left;
  color: var(--diff-muted); border-top: 1px solid var(--diff-line); }
#view-meridian .meridian-diff-row-label { color: var(--text, inherit); font-weight: 600; }
#view-meridian .meridian-diff-row-pct { font-variant-numeric: tabular-nums; }
#view-meridian .meridian-diff-row-material { color: var(--diff-amber-text); }
#view-meridian .meridian-diff-row-head.meridian-diff-row-same > th { opacity: .75; }
#view-meridian .meridian-diff-row.meridian-diff-row-same > td { opacity: .8; }
#view-meridian .meridian-diff-cell { padding: .5rem .8rem; vertical-align: top; min-width: 0; overflow-wrap: break-word; word-break: normal; }
#view-meridian .meridian-diff-cell + .meridian-diff-cell { border-left: 1px solid var(--diff-line); }

/* The readable renderer inside a cell: dense, wrapping at word boundaries, never wider than the cell. */
#view-meridian .meridian-diff-cell .meridian-json-view { font-size: .85rem; }
#view-meridian .meridian-diff-cell .meridian-json-fields > div { grid-template-columns: minmax(5rem, 7rem) minmax(0, 1fr); gap: .6rem; }
#view-meridian .meridian-diff-cell .meridian-json-nested > div { grid-template-columns: 1fr; gap: .05rem; }
#view-meridian .meridian-diff-cell .meridian-json-fields dt { font-weight: 400; opacity: 1; color: var(--diff-muted); font-size: .82rem; }
#view-meridian .meridian-diff-cell .meridian-json-table { min-width: 0; max-width: 100%; font-size: .82rem; }
#view-meridian .meridian-diff-cell .meridian-json-table th,
#view-meridian .meridian-diff-cell .meridian-json-table td { white-space: normal; overflow-wrap: break-word; word-break: normal; border-bottom: 0; padding: 0 .8rem 0 0; vertical-align: top; }
#view-meridian .meridian-diff-cell .meridian-json-table th { font-size: .72rem; font-weight: 400; color: var(--diff-muted); opacity: 1; }
#view-meridian .meridian-diff-cell .meridian-json-bullets { padding-left: 1rem; }
#view-meridian .meridian-diff-cell .meridian-json-card { padding: .4rem .6rem; }

/* Marks: amber for a different value or a different text altogether; green/red for changed words. */
#view-meridian mark.meridian-diff-changed { background: var(--diff-amber); color: inherit; padding: 0 .2rem; border-radius: 3px;
  box-shadow: inset 0 -1px 0 var(--diff-amber-edge); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
#view-meridian div.meridian-diff-changed { background: var(--diff-amber); border-left: 3px solid var(--diff-amber-edge); border-radius: 3px; padding: .2rem .4rem; }
#view-meridian mark.meridian-diff-wording { background: none; color: inherit; padding: 0; }
#view-meridian .meridian-diff-word { border-radius: 2px; padding: 0 .1rem; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
#view-meridian .meridian-diff-word-ins { background: var(--diff-ins); }
#view-meridian .meridian-diff-word-del { background: var(--diff-del); text-decoration: line-through; text-decoration-color: rgba(179,38,30,.55); }
#view-meridian .meridian-diff-missing { color: var(--diff-muted); font-style: italic; font-size: .8rem; }
#view-meridian .meridian-diff-missing-card { border-style: dashed; }
#view-meridian .meridian-diff-more { margin: .4rem 0 0; color: var(--diff-muted); font-size: .8rem; }

/* Narrow screens: each row's two sides stack, each labelled with its side. */
@media (max-width: 760px) {
  #view-meridian .meridian-diff-summary { align-items: flex-start; gap: .75rem; padding: .6rem .75rem; }
  #view-meridian .meridian-diff-table, #view-meridian .meridian-diff-table > tbody, #view-meridian .meridian-diff-row,
  #view-meridian .meridian-diff-row-head, #view-meridian .meridian-diff-row-head > th, #view-meridian .meridian-diff-cell { display: block; width: 100%; }
  #view-meridian .meridian-diff-table > colgroup { display: none; }
  /* The header stays (it carries each side's links), as two plain lines above the rows. */
  #view-meridian .meridian-diff-table > thead, #view-meridian .meridian-diff-table > thead tr { display: block; }
  #view-meridian .meridian-diff-table > thead th { display: block; position: static; }
  #view-meridian .meridian-diff-table > thead th + th { border-left: 0; }
  #view-meridian .meridian-diff-cell + .meridian-diff-cell { border-left: 0; border-top: 1px dashed var(--diff-line); }
  #view-meridian .meridian-diff-cell::before { content: attr(data-side); display: block; font-size: .72rem; font-weight: 600;
    letter-spacing: .04em; text-transform: uppercase; color: var(--diff-muted); margin-bottom: .25rem; }
}