/* styles of the divergence figure (its own file): Fig. 5, how similar two papers' definitions of one term are */

.dv-chart { position: relative; touch-action: manipulation; }

/* ---------------------------------------------------------------- the axis */
.dv-svg { user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.dv-grid { stroke: var(--fig-grid); stroke-width: 1; }
.dv-base { stroke: var(--fig-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.fig-body text.dv-tick { font-family: var(--fig-mono); font-size: 11px; fill: var(--fig-muted); transition: opacity 0.2s; }
.fig-body text.dv-tick.is-under { opacity: 0; }
.fig-body text.dv-axis-title { font-size: 13px; fill: var(--fig-muted); }
.fig-body text.dv-match-label { font-family: var(--fig-mono); font-size: 11px; fill: var(--fig-ink); transition: fill 0.2s; }
.dv-match { stroke: var(--fig-muted); stroke-width: 1.1; stroke-dasharray: 4 3; opacity: 0.8; pointer-events: none; transition: stroke 0.2s, opacity 0.2s; }
.dv-matchkey { fill: transparent; outline: none; }
.dv-matchkey:focus-visible { stroke: var(--fig-accent); stroke-width: 2; }
.fig-panel[data-fig="divergence"] .dv-matchkey:focus-visible { outline: none; }

/* ---------------------------------------------------------------- one row: the printed box plot over a strip of ticks */
.dv-row { cursor: pointer; outline: none; transition: opacity 0.22s ease; }
.dv-rowbg { fill: transparent; stroke: transparent; stroke-width: 1.5; transition: fill 0.2s; }
.dv-row.is-open .dv-rowbg { fill: var(--fig-panel-2); }
.dv-row.is-focus .dv-rowbg { fill: rgba(255, 255, 255, 0.035); }
.dv-row.is-open.is-focus .dv-rowbg { fill: #1c2633; }
.dv-row:focus-visible .dv-rowbg { stroke: var(--fig-accent); stroke-width: 2; }
.fig-body text.dv-term { font-family: var(--fig-display); font-size: 16px; font-weight: 500; fill: var(--fig-ink); transition: fill 0.2s; }
.fig-body text.dv-term tspan.dv-n { fill: var(--fig-muted); font-weight: 500; }
.dv-row.is-focus text.dv-term { fill: #fff; }
.dv-row.is-warm text.dv-term { fill: var(--fig-warm); font-weight: 600; }

.dv-box { fill: var(--fig-closure); fill-opacity: 0.9; transition: fill 0.2s, fill-opacity 0.2s; }
.dv-whisk { fill: none; stroke: var(--fig-closure); stroke-width: 1.3; vector-effect: non-scaling-stroke; transition: stroke 0.2s; }
.dv-out { fill: var(--fig-closure); fill-opacity: 0.55; transition: fill-opacity 0.2s, opacity 0.22s; }
.dv-med { stroke: var(--stage-bg, #0c1016); stroke-width: 2; vector-effect: non-scaling-stroke; }
.dv-mean { fill: #fff; stroke: var(--stage-bg, #0c1016); stroke-width: 1.2; transition: opacity 0.22s; }
.dv-bp { transition: opacity 0.22s; }
.dv-rug { opacity: 0.5; transition: opacity 0.2s; }
.dv-rug line { stroke: var(--fig-closure); stroke-width: 1; stroke-opacity: var(--dv-op, 0.4); }
.dv-rugpass { opacity: 0; transition: opacity 0.2s; }
.dv-rugpass line { stroke: #fff; stroke-width: 1; stroke-opacity: 0.95; }
.dv-row.is-warm .dv-rugpass line { stroke: var(--fig-warm); }
.dv-row.is-warm .dv-box, .dv-row.is-warm .dv-out { fill: var(--fig-warm); }
.dv-row.is-warm .dv-whisk, .dv-row.is-warm .dv-rug line { stroke: var(--fig-warm); }

/* a term pointed at (or focused): its box and strip brighten, the other terms step back */
.dv-svg.has-focus .dv-row:not(.is-focus) { opacity: 0.45; }
.dv-row.is-focus .dv-box { fill: #6fb6e6; fill-opacity: 1; }
.dv-row.is-focus .dv-whisk { stroke: #6fb6e6; }
.dv-row.is-focus .dv-out { fill-opacity: 0.85; }
.dv-row.is-warm.is-focus .dv-box, .dv-row.is-warm.is-focus .dv-out { fill: #ffc47e; }
.dv-row.is-warm.is-focus .dv-whisk { stroke: #ffc47e; }
.dv-row.is-focus .dv-rug, .dv-row.is-open .dv-rug { opacity: 1; }

/* its median, marked on the axis */
.dv-guide { color: #8cc6ee; opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.24s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s; }
.dv-guide.on { opacity: 1; }
.dv-guide.is-warm { color: var(--fig-warm); }
.dv-guide-line { stroke: currentColor; stroke-width: 1; stroke-opacity: 0.5; }
.dv-guide-pill { fill: var(--stage-bg, #0c1016); stroke: currentColor; stroke-width: 1; }
.fig-body text.dv-guide-val { font-family: var(--fig-mono); font-size: 11px; font-weight: 600; fill: currentColor; }

/* the match line pointed at: the pairs that reach it light up, and each term's share of them fades in beside it */
.dv-svg.is-match .dv-match { stroke: var(--fig-ink); opacity: 1; }
.dv-svg.is-match .dv-bp, .dv-svg.is-match .dv-mean, .dv-svg.is-match .dv-out { opacity: 0.38; }
.dv-svg.is-match .dv-rug { opacity: 0.35; }
.dv-svg.is-match .dv-rugpass { opacity: 1; }
.fig-body text.dv-pass {
  font-family: var(--fig-mono); font-size: 11px; fill: var(--fig-muted); pointer-events: none;
  paint-order: stroke; stroke: var(--stage-bg, #0c1016); stroke-width: 3px; stroke-linejoin: round;
  opacity: 0; transform: translateX(-4px); transition: opacity 0.2s ease, transform 0.2s ease;
}
.fig-body text.dv-pass tspan.dv-pass-p { fill: #fff; font-weight: 600; }
.fig-body text.dv-pass.is-warm tspan.dv-pass-p { fill: var(--fig-warm); }
.dv-svg.is-match text.dv-pass {
  opacity: 1; transform: none;
  transition: opacity 0.25s ease calc(var(--i, 0) * 18ms), transform 0.3s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i, 0) * 18ms);
}

.dv-hl { pointer-events: none; opacity: 0; stroke: #fff; stroke-width: 2; stroke-linecap: round; fill: none; transition: opacity 0.15s; }
.dv-hl.on { opacity: 1; }

/* ---------------------------------------------------------------- the tooltips */
.fig-tip:has(.dv-tip) { max-width: min(600px, calc(100vw - 16px)); }
.dv-tip-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.6rem; margin-bottom: 0.5rem; }
.dv-tip-score { font-family: var(--fig-display); font-size: 1.3rem; line-height: 1; font-variant-numeric: tabular-nums; }
.dv-tip-defs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.dv-tip-def, .dv-pd { border-left: 2px solid var(--fig-line); padding-left: 0.6rem; min-width: 0; }
.dv-q { margin: 0 0 0.3rem; font-family: var(--fig-display); font-size: 0.98rem; line-height: 1.4; color: var(--fig-ink); }
.dv-src { margin: 0; font-size: 0.76rem; line-height: 1.4; color: var(--fig-muted); }
.dv-src-y { font-variant-numeric: tabular-nums; }
.dv-rowtip { font-size: 0.84rem; line-height: 1.5; }
.fig-tip .dv-rt-t { font-family: var(--fig-display); font-size: 1.05rem; font-weight: 600; }
.fig-tip .dv-rowtip.is-warm .dv-rt-t { color: var(--fig-warm); }
.dv-rt { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 0.05rem 0.9rem; margin: 0.3rem 0 0; }
.dv-rt dt { color: var(--fig-muted); }
.dv-rt dd { margin: 0; color: #fff; font-family: var(--fig-mono); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.dv-rt dd .k { font-family: Inter, system-ui, sans-serif; font-size: 0.84rem; }
@media (max-width: 560px) { .dv-tip-defs { grid-template-columns: 1fr; gap: 0.5rem; } }

/* ---------------------------------------------------------------- the open term, under the chart */
.dv-detail {
  margin-top: 0.6rem; padding: 0.7rem 0.9rem 0.8rem; border-radius: 12px;
  background: var(--fig-panel); border: 1px solid var(--fig-line); scroll-margin: 0.75rem;
}
.dv-dh { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.9rem; }
.dv-dt { display: inline; margin: 0 0.75rem 0 0; font-family: var(--fig-display); font-weight: 600; font-size: 1.3rem; line-height: 1.2; color: #fff; }
.dv-detail.is-warm .dv-dt { color: var(--fig-warm); }
.dv-dm { display: inline; margin: 0; font-family: var(--fig-mono); font-size: 0.72rem; line-height: 1.6; color: var(--fig-muted); }
.dv-dh-t { min-width: 0; }
.dv-dm span { white-space: nowrap; }
.dv-x {
  flex: none; appearance: none; cursor: pointer; width: 1.9rem; height: 1.9rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font: 400 1.15rem/1 var(--fig-mono);
  color: var(--fig-ink); background: rgba(255, 255, 255, 0.06); border: 1px solid var(--fig-line);
  transition: background 0.2s, border-color 0.2s;
}
.dv-x:hover { background: rgba(165, 156, 255, 0.25); border-color: var(--fig-accent); }
.dv-x:focus-visible { outline: 2px solid var(--fig-accent); outline-offset: 2px; }
.dv-pair {
  display: grid; grid-template-columns: 7rem minmax(0, 1fr) minmax(0, 1fr); gap: 0.35rem 1.1rem;
  margin-top: 0.65rem; padding-top: 0.65rem; border-top: 1px solid var(--fig-grid);
}
.dv-ps b { display: block; font-family: var(--fig-display); font-weight: 600; font-size: 1.55rem; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.dv-ps span { display: block; margin-top: 0.25rem; font-family: var(--fig-mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fig-muted); }
.dv-ps .dv-tie { margin-top: 0.1rem; text-transform: none; letter-spacing: 0; }
.dv-why { grid-column: 2 / -1; margin: 0; padding-left: calc(0.6rem + 2px); font-size: 0.86rem; line-height: 1.45; color: var(--fig-ink); }
.dv-more { display: inline-block; margin-top: 0.7rem; font-size: 0.8rem !important; }
@media (max-width: 700px) {
  .dv-pair { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
  .dv-ps { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 0.6rem; }
  .dv-ps span { margin-top: 0; }
  .dv-why { grid-column: auto; }
}

[data-fig="divergence"] .fig-method-body p + p { margin-top: 0.55rem; }
.fig-panel[data-fig="divergence"] .dv-row:focus-visible { outline: none; } /* the row's own ring (.dv-rowbg) shows focus */