/* ---------- Compare (js/compare.js, STYLE-GUIDE.md → Compare) ----------
   A strip above the timeline's rows (its own space: the rows' window starts under it), on the same time axis: one row per entry (its name, length and dates
   above a bar in its category's colour), the years they share shaded, a gap bracketed, their relationships drawn as
   the timeline's relationship lines. Under it, the facts. Shared here: layout, motion and the principles; a theme
   restyles only through the tokens below and the shared .btn, .seg and .lens-chip classes. */
.cmp {
  --cmp-sheet: var(--sheet, var(--panel, var(--surface)));                         /* the strip's sheet: the theme's own */
  --cmp-row: 34px; --cmp-bar-h: 7px; --cmp-bar-r: var(--r-ui, 999px);                             /* a row, its bar's height and corner */
  --cmp-bar-k: 82%;                                                                  /* a bar: its category's colour, this much (the rest the ink) */
  --cmp-ov: color-mix(in srgb, var(--accent) 12%, transparent);                      /* the years they share */
  --cmp-ov-edge: color-mix(in srgb, var(--accent) 60%, transparent);
  --cmp-band: color-mix(in srgb, var(--accent) 5%, transparent);                     /* ...and the same years down the timeline */
  --cmp-note-fill: var(--solid, var(--accent)); --cmp-note-ink: var(--on-accent);   /* "23 years together" */
  position: relative; z-index: 9; flex: none;   /* its own space between the date ruler and the rows (js/compare.js) */
  display: flex; flex-direction: column; max-height: 55%;
  background: var(--cmp-sheet); color: var(--text);
  box-shadow: 0 var(--hair, 1px) 0 var(--line), var(--shadow-pop, none);
  contain: layout paint;   /* bars moving in it never lay out or repaint the rows under it */
}
.cmp[hidden] { display: none; }
body:not([data-view="timeline"]) .cmp { display: none; }

/* the head: a title, Real years / From start, the actions, × */
.cmp-head { flex: none; display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 4px 6px 4px 12px; overflow-x: auto; scrollbar-width: none; }
.cmp-head::-webkit-scrollbar { display: none; }
.cmp-title { flex: none; display: inline-flex; align-items: center; gap: 6px; margin-right: 4px;
  font: 650 var(--t-label) var(--font-label); letter-spacing: var(--caps); text-transform: var(--label-case); color: var(--muted); }
.cmp-title svg { color: var(--accent); }
.cmp-sp { flex: 1 1 0; min-width: 4px; }
.cmp .seg { flex: none; }
.cmp .seg button, .cmp-b { height: 28px; }
.cmp-b { flex: none; gap: 6px; padding: 0 11px 0 9px; }
.cmp-b svg { flex: none; }
.cmp-short { display: none; }
.cmp-share.done { color: var(--accent); }
.cmp-b[aria-pressed="true"], .cmp-b[aria-expanded="true"] { color: var(--accent); box-shadow: inset 0 0 0 var(--hair, 1px) var(--accent); }
.cmp-x {
  flex: none; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--r-ui, 6px);
  background: none; color: var(--muted); cursor: var(--cur-pointer, pointer); transition: color .15s, background-color .15s;
}
.cmp-x:is(:hover, :focus-visible) { color: var(--hover-ink, var(--text)); background: var(--surface-2); }
.cmp-b[hidden] { display: none; }

/* the rows: one per entry, everything placed by transform from js/compare.js (frame) */
.cmp-rows { position: relative; flex: 0 1 auto; min-height: calc(var(--cmp-row) + 18px); overflow: hidden auto; overscroll-behavior: contain; scrollbar-width: none; }
.cmp-rows::-webkit-scrollbar { display: none; }
.cmp-row { position: relative; height: var(--cmp-row); }
.cmp-bar {
  position: absolute; left: 0; bottom: 6px; width: 0; height: var(--cmp-bar-h); padding: 0; border: 0; border-radius: var(--cmp-bar-r);
  background: color-mix(in srgb, var(--c) var(--cmp-bar-k), var(--text)); cursor: var(--cur-pointer, pointer); will-change: transform; transform-origin: 0 50%;
}
.cmp-bar::before { content: ""; position: absolute; inset: -8px 0; }   /* a taller hit area than it looks */
.cmp-lbl {
  position: absolute; left: 0; top: 3px; display: flex; align-items: baseline; gap: 7px; max-width: calc(100% - 50px); padding: 0; border: 0;
  background: none; color: var(--text); white-space: nowrap; cursor: var(--cur-pointer, pointer); will-change: transform; font: inherit;
}
/* the label ladder (STYLE-GUIDE.md → Labels on bars): the name most, then the years, then the dates */
.cmp-lbl b { font: 650 var(--t-name) var(--font-name); overflow: hidden; text-overflow: ellipsis; }
.cmp-n { font: 500 calc(var(--t-name) * var(--lbl-k-years)) var(--font-date); font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--text) var(--ink-years), transparent); }
.cmp-d { font: 400 calc(var(--t-name) * var(--lbl-k-date)) var(--font-date); font-style: var(--date-style); color: color-mix(in srgb, var(--text) var(--ink-date), transparent); }
.cmp-lbl { margin-left: -4px; padding-inline: 4px; border-radius: var(--r-ui, 4px); transition: background-color .15s, color .15s; }
.cmp-lbl:hover, .cmp-bar:hover + .cmp-lbl { color: var(--hover-ink, var(--accent)); }
.cmp-lbl:hover :is(b, .cmp-n, .cmp-d), .cmp-bar:hover + .cmp-lbl :is(b, .cmp-n, .cmp-d) { color: inherit; }
.cmp-bar:hover { background: var(--hover-ink, var(--accent)); box-shadow: 0 0 0 2px var(--glow, color-mix(in srgb, var(--accent) 30%, transparent)); }   /* the theme's hover ink */
.cmp-rm { position: absolute; left: 0; top: 0; width: 24px; height: 24px; opacity: 0; will-change: transform; transition: opacity .15s, color .15s, background-color .15s; }
.cmp-row:is(:hover, :focus-within) .cmp-rm { opacity: 1; }

/* the years they share, and a gap between them */
.cmp-ov, .cmp-gap { position: absolute; left: 0; top: 0; bottom: 0; width: 0; pointer-events: none; will-change: transform; }
.cmp-ov { background: var(--cmp-ov); box-shadow: inset var(--hair, 1px) 0 0 var(--cmp-ov-edge), inset calc(-1 * var(--hair, 1px)) 0 0 var(--cmp-ov-edge); }
.cmp-gap { bottom: 16px; border-bottom: var(--hair, 1px) solid var(--cmp-ov-edge); box-shadow: inset var(--hair, 1px) 0 0 var(--cmp-ov-edge), inset calc(-1 * var(--hair, 1px)) 0 0 var(--cmp-ov-edge); }
.cmp-ov[hidden], .cmp-gap[hidden] { display: none; }
.cmp-scale { position: relative; height: 18px; }
.cmp-note {
  position: absolute; left: 0; top: 1px; translate: -50% 0; padding: 1px 7px; border-radius: var(--r-ui, 999px); white-space: nowrap; will-change: transform;
  font: 600 10px/14px var(--font-date); font-variant-numeric: tabular-nums; background: var(--cmp-note-fill); color: var(--cmp-note-ink);
}
.cmp-note[hidden], .cmp-note:empty { display: none; }
.cmp.aligned .cmp-note { display: none; }
/* From start: a ruler of years in, along the foot */
.cmp-tick { position: absolute; left: 0; top: 0; padding-left: 4px; height: 18px; border-left: var(--hair, 1px) solid var(--line-strong);
  font: 400 10px/18px var(--font-date); color: var(--muted); white-space: nowrap; will-change: transform; }
.cmp.one:not(.aligned) .cmp-scale { display: none; }   /* one entry From start keeps its ruler of years in */

/* relationships between them: the timeline's own line and tag language (--tie-*) */
.cmp-ties { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.cmp-tie { fill: none; stroke: var(--tie-close); stroke-width: var(--tie-w); }
.cmp-tie.conflict { stroke: var(--tie-conflict); }
.cmp-tag {
  position: absolute; left: 0; top: 0; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: min(50%, var(--r-ui, 50%)); pointer-events: auto; will-change: transform;
  background: var(--cmp-sheet); box-shadow: inset 0 0 0 calc(var(--hair, 1px) * 2) var(--tie-close);
}
.cmp-tag.conflict { box-shadow: inset 0 0 0 calc(var(--hair, 1px) * 2) var(--tie-conflict); }
.cmp-tag:hover { background: var(--tie-hot-close); }
.cmp-tag.conflict:hover { background: var(--tie-hot-conflict); }

.cmp-hint { flex: none; margin: 0; padding: 0 12px 8px; font-size: var(--t-meta); color: var(--muted); }
.cmp-hint[hidden] { display: none; }

/* the facts: three columns where there is room, one on phones; they scroll on their own */
.cmp-facts { flex: 0 1 auto; min-height: 0; max-height: min(30dvh, 230px); overflow-y: auto; overscroll-behavior: contain; border-top: var(--hair, 1px) solid var(--line); padding: 8px 12px 10px; }
.cmp-facts[hidden] { display: none; }
.cmp-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 6px 20px; }
.cmp-sec h3 { margin: 2px 0 5px; font: 650 var(--t-label) var(--font-label); letter-spacing: var(--caps); text-transform: var(--label-case); color: var(--muted); }
.cmp-sec ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.cmp-fact { font-size: var(--t-ui); line-height: 1.4; color: var(--text); }
.cmp-fact.quiet { color: var(--muted); }
.cmp-fact small { display: block; margin-top: 2px; font-size: var(--t-meta); color: var(--muted); }
.cmp-mark { display: inline-block; width: 14px; height: 0; margin: 0 6px 3px 0; vertical-align: middle; border-top: calc(var(--hair, 1px) * 2) solid var(--tie-close); }
.cmp-fact.conflict .cmp-mark { border-top-color: var(--tie-conflict); }
.cmp-path { display: grid; gap: 4px; }
.cmp-ends { font-weight: 600; }
.cmp-via { align-self: center; font-size: var(--t-meta); color: var(--muted); }
.cmp-path small { line-height: 1.55; }
.cmp-mark.conflict { border-top-color: var(--tie-conflict); }
.cmp-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.cmp-chip { display: inline-flex; align-items: center; gap: 5px; min-height: 26px; padding: 0 9px 0 6px; font-size: var(--t-label); max-width: 100%; }
.cmp-chip > span:not(.cmp-chip-ic) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-chip-ic { display: grid; color: color-mix(in srgb, var(--c) 80%, var(--text)); }
.cmp-chip small { font: 400 10px var(--font-date); color: var(--muted); white-space: nowrap; }
.cmp-chip:hover :is(.cmp-chip-ic, small) { color: inherit; }   /* the theme's hover ink (or its solid tile's words) */

/* down the whole timeline: the shared years, faint, between hairlines; a gap: the hairlines only */
.cmp-band { position: absolute; z-index: 4; left: 0; top: 0; bottom: 0; width: 0; pointer-events: none; will-change: transform;
  background: var(--cmp-band, color-mix(in srgb, var(--accent) 5%, transparent));
  box-shadow: inset var(--hair, 1px) 0 0 color-mix(in srgb, var(--accent) 40%, transparent), inset calc(-1 * var(--hair, 1px)) 0 0 color-mix(in srgb, var(--accent) 40%, transparent); }
.cmp-band.gap { background: none; }
.cmp-band[hidden] { display: none; }
body:not([data-view="timeline"]) .cmp-band { display: none; }

/* the card's Compare button (js/card.js) */
/* the card's actions under its facts (js/card.js .d-acts: the Ties tab link, Compare), in every theme */
.detail .d-acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 2px; }
.detail .d-acts > .btn { margin: 0; flex: none; max-width: 100%; }
.d-cmp { gap: 6px; }
.d-cmp[aria-pressed="true"] { color: var(--accent); box-shadow: inset 0 0 0 var(--hair, 1px) var(--accent); }

/* phones: a smaller head, the actions as short words, facts folded until asked for */
@media (max-width: 760px) {
  .cmp-title > span, .cmp-bt, .cmp-long { display: none; }
  .cmp-short { display: inline; }
  .cmp-head { padding-left: 8px; gap: 4px; }
  .cmp-b { width: 36px; padding: 0; justify-content: center; }
  .cmp-facts { max-height: 34dvh; }
}
/* touch: full targets, and the × always shows */
@media (pointer: coarse) {
  .cmp { --cmp-row: 40px; }
  .cmp .seg button, .cmp-b, .cmp-x, .detail .d-acts > .btn { min-height: 36px; height: 36px; }   /* the card's whole action row, one touch height */
  .cmp-x { width: 36px; }
  .cmp-rm { opacity: 1; top: 2px; width: 36px; height: 36px; }
  .cmp-chip { min-height: 36px; }
  .cmp-lbl { top: 0; height: var(--cmp-row); align-items: flex-start; padding-top: 5px; }   /* the whole row above the bar: one target, 36px+ */
  .cmp-bar::before { inset: -16px 0 -6px; }
}
/* the narrowest phones: Fit goes (adding a second entry fits the view by itself; the header has Fit too), and the title */
@media (max-width: 360px) { .cmp-title, .cmp-fit { display: none; } .cmp-head { padding-left: 6px; } }
/* short screens (a phone held sideways): the timeline keeps most of the height; rows tighter, their dates left to the card,
   and the strip's rows scroll within it when there are many */
@media (max-height: 500px) {
  .cmp { --cmp-row: 30px; max-height: 45%; }
  .cmp-head { min-height: 36px; padding-block: 2px; }
  .cmp-d { display: none; }
  .cmp-scale { height: 16px; }
}
@media (max-height: 500px) and (pointer: coarse) { .cmp { --cmp-row: 36px; } }   /* still a full touch target */
@media (prefers-reduced-motion: reduce) { .cmp-rm { transition: none; } }