/* Versions widget (widgets/versions/versions.js): dated marks in lanes, read out underneath. */
.vs__chart { display: flex; flex-direction: column; }
.vs__months, .vs__lane { display: grid; grid-template-columns: 78px minmax(0, 1fr); column-gap: 12px; align-items: center; }
.vs__months > div { position: relative; height: 18px; }
.vs__months > div span { position: absolute; top: 0; font-size: 10.5px; color: var(--muted); padding-left: 4px; border-left: 1px solid var(--line); line-height: 18px; }
.vs__lane { height: 36px; border-top: 1px solid var(--line); }
.vs__lane:last-child { border-bottom: 1px solid var(--line); }
.vs__name { font-family: var(--wk-display); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.vs__track { position: relative; height: 100%; background: linear-gradient(var(--line), var(--line)) 0 50% / 100% 1px no-repeat; }
.vs__mark { position: absolute; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; padding: 0; border: 0; background: none; }
.vs__mark::before { content: ''; position: absolute; inset: 6px; transform: rotate(45deg); border: 1.5px solid var(--ink); background: var(--bg); transition: background-color .25s ease, transform .35s cubic-bezier(.34,1.56,.64,1), border-color .25s ease; }
.vs__mark:hover::before, .vs__mark:focus-visible::before { border-color: var(--wk-copper); }
.vs__mark.is-on::before { background: var(--wk-copper); border-color: var(--wk-copper); transform: rotate(45deg) scale(1.35); }
.vs__read { min-height: 3.1em; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.vs__read b { font-family: var(--wk-display); font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--wk-copper); }
.vs__read span { font-family: var(--wk-serif); font-size: 19px; line-height: 1.25; font-weight: 500; }
@media (max-width: 520px) {
  .vs__months, .vs__lane { grid-template-columns: 62px minmax(0, 1fr); column-gap: 8px; }
  .vs__months > div span:nth-child(even) { display: none; }
}