/* "Voting record" card (mep-vote-record.js) and the Comparative context cards below it (parliament-members.js). */
.vr-card { position: relative; overflow: hidden; margin: 0 0 18px; padding: 18px 22px 14px; background: #fff; border: 1px solid rgba(83,103,94,.16);
  border-radius: 14px; box-shadow: 0 1px 2px rgba(21,33,28,.05), 0 8px 21px rgba(21,33,28,.05); color: #15211c; }
.vr-card > .vr-art { position: absolute; right: -60px; top: -90px; width: 380px; opacity: .16; }
.vr-card > :not(.vr-art) { position: relative; }
.vr-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
#pmVoteRecord .vr-head h3 { margin: 0 0 6px !important; font-size: 17px !important; font-weight: 650 !important; }
.vr-headline { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; font-size: 14px; color: #33423c; }
.vr-headline b { font-size: 20px; font-weight: 700; color: #15211c; margin-right: 3px; font-variant-numeric: tabular-nums; }
.vr-headline b.vr-red { color: #c2412d; }
.vr-headline i { font-style: normal; font-size: 12px; color: #6b7a74; margin-left: 4px; }
.vr-export { flex: none; height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid rgba(83,103,94,.28); background: #fff; font: inherit; font-size: 13px; font-weight: 600; color: #15211c; cursor: pointer; }
.vr-export:hover { border-color: #276ef1; color: #1859cc; }
.vr-svg { display: block; width: 100%; height: auto; margin-top: 10px; }
.vr-foot, .vr-faint-p { margin: 6px 0 0; font-size: 11.5px; line-height: 1.5; color: #6b7a74; }
/* Draw-in, once, when the card is shown */
.vr-svg.is-animated .vr-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: vr-draw 1.4s cubic-bezier(.22,.8,.2,1) .15s forwards; }
.vr-svg.is-animated .vr-bar { transform-box: fill-box; transform-origin: bottom; transform: scaleY(0); animation: vr-grow .6s cubic-bezier(.22,.8,.2,1) forwards; animation-delay: calc(var(--i) * 18ms); }
.vr-svg.is-animated .vr-point, .vr-svg.is-animated .vr-break { opacity: 0; animation: vr-fade .35s ease forwards; animation-delay: calc(.5s + var(--i) * 30ms); }
@keyframes vr-draw { to { stroke-dashoffset: 0; } }
@keyframes vr-grow { to { transform: scaleY(1); } }
@keyframes vr-fade { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .vr-svg .vr-line, .vr-svg .vr-bar, .vr-svg .vr-point, .vr-svg .vr-break { animation: none !important; opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; } }
@media (max-width: 640px) { .vr-head { flex-direction: column; } .vr-card { padding: 16px; } }
/* Months: hover column, tooltip, the votes against the group */
.vr-plot { position: relative; }
.vr-hit { fill: transparent; cursor: pointer; outline: none; }
.vr-hit:hover, .vr-hit:focus-visible { fill: rgba(39,110,241,.05); }
.vr-hit.is-sel { fill: rgba(39,110,241,.09); }
.vr-guide { stroke: #9aa8a2; stroke-width: 1; opacity: 0; pointer-events: none; transition: opacity .12s; }
.vr-tip { position: absolute; top: 30px; z-index: 3; display: grid; gap: 3px; min-width: 210px; padding: 9px 12px; border-radius: 9px; pointer-events: none;
  background: #15211c; color: #e8efec; font-size: 12.5px; box-shadow: 0 8px 22px rgba(21,33,28,.22); }
.vr-tip b { color: #fff; font-size: 13px; }
.vr-tip strong { color: #fff; font-variant-numeric: tabular-nums; }
.vr-tip strong.vr-red { color: #ff8f86; }
.vr-tip i { font-style: normal; color: #9fb0a9; }
.vr-tip em { font-style: normal; color: #8fb5ff; font-size: 11.5px; }
.vr-all { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.vr-all u { font-size: 12px; color: #1859cc; margin-left: 4px; }
.vr-all:hover u { text-decoration-thickness: 2px; }
.vr-detail { margin-top: 10px; border-top: 1px solid rgba(83,103,94,.16); padding-top: 10px; }
.vr-detail header { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.vr-detail h4 { margin: 0; font-size: 14px; font-weight: 650; }
.vr-close { border: 0; background: none; font-size: 20px; line-height: 1; color: #6b7a74; cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.vr-close:hover { background: #eef2f0; color: #15211c; }
.vr-list { list-style: none; margin: 8px 0 0; padding: 0; max-height: 340px; overflow-y: auto; }
.vr-list li { display: grid; grid-template-columns: 96px 1fr auto; gap: 4px 14px; align-items: baseline; padding: 7px 2px; border-bottom: 1px solid #eef2f0; font-size: 13px; }
.vr-list time { color: #6b7a74; font-size: 12px; font-variant-numeric: tabular-nums; }
.vr-list a { color: #15211c; text-decoration: none; }
.vr-list a:hover { color: #1859cc; text-decoration: underline; }
.vr-pos { font-size: 12px; color: #6b7a74; white-space: nowrap; }
.vr-pos .vr-red { color: #c2412d; }
@media (max-width: 640px) { .vr-list li { grid-template-columns: 1fr; } }
/* Where this MEP ranks: one track per scope, the marker at the percentile */
#pmProfilePercentiles, .cp-percentile-grid:has(> .pm-rank) { display: block; }
.pm-rank { padding: 8px 0 10px; border-bottom: 1px solid #eef2f0; }
.pm-rank:last-child { border-bottom: 0; }
.pm-rank-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; font-size: 13px; font-weight: 600; color: #15211c; }
.pm-rank-head b { font-size: 16px; font-variant-numeric: tabular-nums; }
.pm-rank-row { display: grid; grid-template-columns: 92px 1fr 104px; gap: 10px; align-items: center; padding: 2px 0; font-size: 12px; color: #6b7a74; }
.pm-rank-scope { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-rank-track { position: relative; height: 6px; border-radius: 3px; background: linear-gradient(90deg, #eef2f0, #dbe4e0); }
.pm-rank-track i { position: absolute; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: #1859cc; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(24,89,204,.35); }
.pm-rank-val { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Votes with each group */
.pm-groupfit { display: grid; gap: 7px; margin: 4px 0 8px; }
.pm-groupfit-row { display: grid; grid-template-columns: 118px 1fr 40px; gap: 10px; align-items: center; font-size: 12.5px; color: #33423c; }
.pm-groupfit-row.is-own { font-weight: 650; color: #15211c; }
.pm-groupfit-name small { font-size: 10.5px; font-weight: 600; color: #6b7a74; text-transform: uppercase; letter-spacing: .04em; margin-left: 4px; }
.pm-groupfit-track { height: 9px; border-radius: 5px; background: #eef2f0; overflow: hidden; }
.pm-groupfit-track i { display: block; height: 100%; border-radius: 5px; opacity: .8; }
.pm-groupfit-row.is-own .pm-groupfit-track i { opacity: 1; }
.pm-groupfit-val { text-align: right; font-variant-numeric: tabular-nums; }
@media (min-width: 1200px) { .pm-profile-context-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }