/* Compare (static/js/compare.js): pin buttons, the pin bar, /compare/. */
.ds-card { position: relative; }
.pin-compare:not(.btn) { font: inherit; font-size: .75rem; padding: .15rem .5rem; cursor: pointer;
  border: 1px solid var(--border-strong); border-radius: 999px; background: var(--bg); color: var(--ink-muted); }
.pin-compare:not(.btn):hover { color: var(--ink); background: var(--bg-muted); }
.pin-compare[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: var(--accent-weak); }
/* Top-right of the card, clear of the title, in static and JS-rendered cards. */
.ds-card > .pin-compare { position: absolute; top: .75rem; right: .75rem; margin: 0; }
.ds-card:has(> .pin-compare) > h3 { padding-right: 6.5rem; }
@media (max-width: 480px) { .ds-card:has(> .pin-compare) > h3 { padding-right: 5.8rem; } }

.compare-bar { position: fixed; z-index: 50; left: 50%; bottom: 1rem; transform: translateX(-50%);
  width: min(52rem, calc(100% - 2rem)); display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem;
  background: var(--bg); color: var(--ink); border: 1px solid var(--border-strong); border-radius: var(--radius);
  box-shadow: 0 6px 24px rgba(0,0,0,.16); padding: .55rem .8rem; font-size: .85rem; }
.compare-bar[hidden] { display: none; }
.compare-bar-h { font-weight: 650; }
.compare-bar ul { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; margin: 0; padding: 0; flex: 1 1 auto; min-width: 0; }
.compare-bar li { display: inline-flex; align-items: center; gap: .25rem; max-width: 16rem;
  border: 1px solid var(--border); border-radius: 999px; padding: .1rem .2rem .1rem .6rem; background: var(--bg-subtle); }
.compare-bar li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compare-bar li button, .compare-clear { font: inherit; border: 0; background: none; cursor: pointer; color: var(--ink-muted); }
.compare-bar li button { font-size: 1rem; line-height: 1; padding: 0 .3rem; }
.compare-clear { font-size: .8rem; text-decoration: underline; }
.compare-flash { position: fixed; z-index: 51; left: 50%; bottom: 5.5rem; transform: translateX(-50%);
  background: var(--ink); color: var(--bg); border-radius: var(--radius); padding: .45rem .8rem; font-size: .85rem; }
.compare-flash[hidden] { display: none; }

.compare-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin: 1rem 0 .6rem; }
.compare-tools p { margin: 0; }
.compare-diff { display: inline-flex; align-items: center; gap: .35rem; }
.compare-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.compare-table th, .compare-table td { text-align: left; vertical-align: top; padding: .5rem .65rem;
  border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
.compare-table thead th { font-size: .95rem; border-bottom: 2px solid var(--border-strong); min-width: 11rem; }
.compare-table tbody th { color: var(--ink-muted); font-weight: 500; white-space: nowrap; width: 9rem; }
.compare-table tr.is-same td { color: var(--ink-muted); }
.only-diff .compare-table tr.is-same { display: none; }
.compare-remove { font: inherit; font-size: .75rem; margin-top: .3rem; border: 0; background: none;
  color: var(--ink-muted); cursor: pointer; text-decoration: underline; padding: 0; }
@media (max-width: 640px) {
  .compare-bar { bottom: .5rem; }
  .compare-bar li { max-width: 100%; }
}
@media print { .compare-bar, .pin-compare { display: none !important; } }