/* Compare (step 2.7; worker/compare-page.ts): two places side by side. The first place is ink, the second the accent
   green, in every cell, bar and line. On top of search.css (the entity pages' sections, figures and graphs). */
.cp { --cp-a: var(--ink); --cp-b: var(--accent-ink); --cp-b-fill: var(--accent); }
.cp-head h1 { margin: 10px 0 0; font: 540 var(--t-h1)/1.04 var(--sans); letter-spacing: -.038em; text-wrap: balance; overflow-wrap: anywhere; }
.cp-head h1 i { font-style: normal; font-weight: 450; color: var(--ink-3); }
.cp-head h1 .cp-b { color: var(--cp-b); }
.cp-sheet { position: relative; margin-top: 18px; padding: 16px 16px 18px; border-radius: var(--r-sm); background: var(--core); color: var(--on-core); }
.cp-sheet .sheet-h { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 12px; font: 500 .75rem/1.4 var(--mono); letter-spacing: .03em; text-transform: uppercase; color: color-mix(in srgb, var(--accent) 70%, var(--on-core)); }
.cp-sheet .sheet-h::before { content: ''; width: 8px; height: 8px; margin-top: 3px; background: var(--accent); flex: none; }
.cp-sides, .cp-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.cp-side { padding-top: 10px; border-top: 3px solid var(--on-core); min-width: 0; }
.cp-side.cp-b { border-top-color: var(--accent); }
.cp-side-k { margin: 0; font: 500 .75rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .03em; color: var(--on-core-2); }
.cp-side-n { margin: 4px 0 0; font: 620 1.18rem/1.15 var(--sans); letter-spacing: -.025em; overflow-wrap: anywhere; }
.cp-side-n a { color: inherit; text-decoration: none; }
.cp-side-n a:hover { text-decoration: underline; text-underline-offset: 3px; }
.cp-side-s { margin: 4px 0 0; font-size: .76rem; line-height: 1.35; color: var(--on-core-2); }
.cp-side.is-empty .cp-side-n { color: var(--on-core-2); font-weight: 500; }
.cp-glance { margin: 14px 0 0; }
.cp-glance > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; padding: 8px 0; border-top: 1px solid color-mix(in srgb, var(--on-core) 22%, transparent); }
.cp-glance dt { grid-column: 1 / -1; font-size: .8125rem; line-height: 1.3; color: var(--on-core-2); }
.cp-glance dd { margin: 2px 0 0; font: 620 1.08rem/1.2 var(--sans); letter-spacing: -.02em; overflow-wrap: anywhere; }
.cp-glance dd.cp-b { color: color-mix(in srgb, var(--accent) 72%, var(--on-core)); }
.cp-jump { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
.cp-jump a { padding: 5px 9px; border: 1px solid color-mix(in srgb, var(--on-core) 30%, transparent); border-radius: 999px; font-size: .8125rem; color: var(--on-core); text-decoration: none; }
.cp-jump a:hover { background: var(--on-core); color: var(--core); }

.cp-pick { display: grid; gap: 10px; margin-top: 16px; }
.cp-box { min-height: 50px; }
.cp-box input[type=search] { height: 46px; font-size: 1rem; }
.cp-box:nth-child(2) { z-index: 4; }
.cp-box:nth-child(2) .sx-go { background: var(--accent-strong); }
.cp-change { margin-top: 14px; }
.cp-change summary { display: inline-flex; align-items: center; min-height: 36px; font-weight: 600; font-size: .9rem; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.cp-swap { margin: 10px 0 0; font-size: .88rem; }
.cp-missed { margin-top: 18px; }
.cp-egs { margin-top: 22px; }
.cp-main { margin-top: 22px; }

.cp-cell { min-width: 0; padding-top: 8px; border-top: 3px solid var(--cp-a); }
.cp-cell.cp-b { border-top-color: var(--cp-b-fill); }
.cp-who { margin: 0; font: 500 .75rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .02em; color: var(--ink-3); overflow-wrap: anywhere; }
.cp-v { margin: 6px 0 0; font: 640 clamp(1.45rem, 6.4vw, 2.3rem)/1.05 var(--sans); letter-spacing: -.045em; overflow-wrap: anywhere; }
.cp-cell.cp-b .cp-v { color: var(--cp-b); }
.cp-v.is-words { font: 620 1.12rem/1.2 var(--sans); letter-spacing: -.02em; }
.cp-v.is-none { font: 560 1.05rem/1.25 var(--sans); letter-spacing: -.01em; color: var(--ink-3); }
.cp-l { margin: 4px 0 0; font-size: .8rem; line-height: 1.35; color: var(--ink-3); }
.cp-diff { margin: 14px 0 0; padding: 10px 0 10px 12px; border-left: 3px solid var(--ink); max-width: 62ch; font: 560 1.02rem/1.45 var(--sans); letter-spacing: -.01em; }

.cp-fig, .cp-chart { margin: 16px 0 0; }
.cp-key { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px; font-size: .76rem; color: var(--ink-3); }
.cp-k::before { content: ''; display: inline-block; width: 12px; height: 10px; margin-right: 6px; background: var(--cp-a); vertical-align: -1px; }
.cp-k-b::before { background: var(--cp-b-fill); }
.cp-line { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
.cp-line-a { stroke: var(--cp-a); }
.cp-line-b { stroke: var(--cp-b-fill); }
.cp-now { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--cp-a); box-shadow: 0 0 0 2px var(--bg); }
.cp-now.cp-b { background: var(--cp-b-fill); }
.cp-bars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; height: 170px; }
.cp-grp { display: flex; align-items: flex-end; gap: 8px; height: 100%; border-bottom: 1.5px solid var(--ink); }
.cp-bar { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; text-align: center; }
.cp-bar-v { font: 620 .8rem/1.3 var(--sans); letter-spacing: -.02em; overflow-wrap: anywhere; }
.cp-bar-b { display: block; height: calc(var(--h) * .6); min-height: 1px; margin-top: 3px; background: var(--cp-a); }
.cp-grp.cp-b .cp-bar-b { background: var(--cp-b-fill); }
.cp-bar.is-quiet .cp-bar-b { background: transparent; border: 1.5px solid var(--cp-a); border-bottom: 0; }
.cp-grp.cp-b .cp-bar.is-quiet .cp-bar-b { border-color: var(--cp-b-fill); }
.cp-bar-l { order: 3; padding-top: 4px; font: 500 .75rem/1.3 var(--mono); color: var(--ink-3); }
.cp-bars + .cp-key { margin-top: 30px; }
.cp-grp { position: relative; }
.cp-bar { position: relative; }
.cp-bar-l { position: absolute; top: 100%; left: 0; right: 0; }
.cp-share, .cp-gauge { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; margin-top: 10px; }
.cp-share-n { grid-column: 1 / -1; margin: 0; font: 500 .75rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .02em; color: var(--ink-3); }
.cp-share-t { display: block; height: 14px; background: var(--sunk); border-radius: 2px; overflow: hidden; }
.cp-share-t span { display: block; height: 100%; background: var(--cp-a); }
.cp-share.cp-b .cp-share-t span { background: var(--cp-b-fill); }
.cp-share-v { font: 620 .9rem/1 var(--sans); min-width: 2.6em; text-align: right; }
.cp-gauge .sx-gauge { grid-column: 1 / -1; margin: 4px 0 6px; }
.cp-gauge.cp-a .sx-gauge-fill { background: var(--cp-a); }
.cp-gauge.cp-a .sx-gauge-tick { background: var(--ink-3); }
.cp-gauge .sx-gauge-mark { background: var(--bg); }
.cp-rain { margin-top: 10px; }
.cp-rain svg { display: block; width: 100%; height: clamp(70px, 20vw, 110px); overflow: visible; }
.cp-rain-bar { fill: var(--cp-a); }
.cp-rain.cp-b .cp-rain-bar { fill: var(--cp-b-fill); }
.cp-rain-bar.is-part { fill-opacity: .55; }
.cp-same dd a { margin-left: 8px; font-size: .84rem; }
.cp-both { margin-top: 3px; font: 500 .75rem/1.3 var(--mono) !important; text-transform: uppercase; letter-spacing: .02em; color: var(--ink-3) !important; }
.cp-both.cp-b { color: var(--cp-b) !important; }

@media (min-width: 900px) {
  .cp-sheet { padding: 22px 24px 24px; }
  .cp-sides, .cp-row, .cp-bars { gap: 40px; }
  .cp-glance { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 28px; }
  .cp-glance > div { gap: 0 10px; }
  .cp-pick { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
  .cp-main .sv-sec { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); column-gap: 40px; }
  .cp-main .sv-sec > * { grid-column: 2; }
  .cp-main .sv-sec > .sv-sec-h { grid-column: 1; grid-row: 1 / span 6; align-self: start; flex-direction: column; gap: 6px; }
  .cp-bars { height: 210px; }
}