/* VYBE NGMC CMS — publications on a staff profile: charts and numbered links ([vybe_publications]) */
.vop { --vop-bar: #0b3d6e; --vop-ink: #1f2933; --vop-muted: #5b6470; --vop-line: #e3e6ea; --vop-surface: #fff; color: var(--vop-ink); }
.vop-sum { margin: 0 0 14px; font-weight: 600; }
.vop-note { margin: 8px 0 0; font-size: .875em; color: var(--vop-muted); }
.vop-empty { color: var(--vop-muted); }

/* Charts: plain boxes, sized by the page; text keeps the page's own size */
.vop-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px 28px; margin: 0 0 22px; }
.vop-chart { margin: 0; padding: 14px 16px 12px; background: var(--vop-surface); border: 1px solid var(--vop-line); border-radius: 8px; min-width: 0; }
.vop-chart figcaption { margin: 0 0 12px; font-weight: 600; font-size: .95em; }

/* Publications per year */
.vop-plot { display: flex; gap: 8px; height: 180px; padding-top: 18px; }
.vop-yaxis { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; height: calc(100% - 22px); font-size: 12px; line-height: 1; color: var(--vop-muted); font-variant-numeric: tabular-nums; min-width: 1.5em; }
.vop-yaxis span { transform: translateY(-50%); }
.vop-yaxis span:last-child { transform: translateY(50%); }
.vop-cols { position: relative; flex: 1; display: flex; align-items: stretch; gap: 2px; min-width: 0; height: 100%;
  /* hairline grid at 0, half and full height of the plot (the last 22px hold the year labels) */
  background: linear-gradient(var(--vop-line), var(--vop-line)) 0 0 / 100% 1px no-repeat,
              linear-gradient(var(--vop-line), var(--vop-line)) 0 calc((100% - 22px) / 2) / 100% 1px no-repeat,
              linear-gradient(var(--vop-muted), var(--vop-muted)) 0 calc(100% - 22px) / 100% 1px no-repeat; }
.vop-col { position: relative; flex: 1 1 0; min-width: 0; height: calc(100% - 22px); display: flex; justify-content: center; align-items: flex-end; outline: 0; }
.vop-bar { display: block; width: 100%; max-width: 24px; min-height: 0; background: var(--vop-bar); border-radius: 4px 4px 0 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.vop-col:hover .vop-bar, .vop-col:focus-visible .vop-bar { filter: brightness(1.25); }
.vop-col:focus-visible { box-shadow: 0 0 0 2px var(--vop-surface), 0 0 0 4px var(--vop-bar); border-radius: 4px; }
.vop-x { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); padding-top: 6px; font-size: 12px; line-height: 1; color: var(--vop-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.vop-val { position: absolute; left: 50%; transform: translate(-50%, -4px); font-size: 12px; line-height: 1; font-weight: 600; color: var(--vop-ink); font-variant-numeric: tabular-nums; pointer-events: none; }
/* the figure on hover / keyboard focus */
.vop-col::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); z-index: 3; padding: 5px 8px; border-radius: 6px; background: var(--vop-ink); color: #fff; font-size: 12px; line-height: 1.2; white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; }
.vop-col:hover::after, .vop-col:focus-visible::after { opacity: 1; visibility: visible; }
.vop-col:first-child::after { left: 0; transform: none; }
.vop-col:last-child::after { left: auto; right: 0; transform: none; }

/* By type */
.vop-rows { display: grid; gap: 10px; }
.vop-row { display: grid; grid-template-columns: minmax(7.5em, 34%) 1fr; align-items: center; gap: 10px; font-size: .9em; }
.vop-rl { color: var(--vop-ink); overflow-wrap: anywhere; }
.vop-track { display: flex; align-items: center; gap: 8px; min-width: 0; border-left: 1px solid var(--vop-muted); }
.vop-rbar { display: block; height: 14px; min-width: 2px; flex: 0 1 auto; background: var(--vop-bar); border-radius: 0 4px 4px 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.vop-rv { font-weight: 600; font-variant-numeric: tabular-nums; }

/* The figures as a table */
.vop-table { margin-top: 10px; font-size: .875em; }
.vop-table summary { cursor: pointer; color: var(--vop-muted); }
.vop-table table { margin-top: 8px; border-collapse: collapse; }
.vop-table th, .vop-table td { padding: 3px 14px 3px 0; text-align: left; border: 0; font-variant-numeric: tabular-nums; }

/* The numbered list of links */
.vop-list { margin: 0; padding: 0 0 0 2.2em; list-style: decimal; }
.vop-list > li { margin: 0 0 14px; padding-left: 4px; }
.vop-list > li::marker { color: var(--vop-muted); font-variant-numeric: tabular-nums; }
.vop-title { font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.vop-meta, .vop-links { display: block; margin-top: 3px; font-size: .9em; color: var(--vop-muted); }
.vop-type { white-space: nowrap; }
.vop-links a { margin-right: 12px; overflow-wrap: anywhere; }

@media (max-width: 480px) {
  .vop-plot { height: 150px; }
  .vop-list { padding-left: 1.8em; }
}
@media print {
  .vop-chart { break-inside: avoid; }
  .vop-table { display: none; }
}