/* =========================================================
   Vertical-timeline variant — a clone of the main page, but
   the timeline is a WIDE rail on the LEFT (year + title inline,
   thumb flyout on hover) instead of the bottom strip.
   Reuses tokens, glass topbar and detail layout from style.css.
   ========================================================= */

/* shared left inset — aligns the rail content with the header title */
.vapp{ --vpad: 3.5vw; }
.vapp .topbar{ padding-left: var(--vpad); padding-right: var(--vpad); }

.vapp .vmain{ position: absolute; inset: 0; display: flex; overflow: hidden; }

/* ───── rail (left, wide) ───── */
.vrail{
  flex: 0 0 auto;
  width: max(260px, 20vw);
  display: flex; flex-direction: column;
  padding-top: var(--topbar-h);
}
.vrail__head{
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap;
  padding: 18px var(--vpad) 14px;
  border-bottom: 1px solid var(--line);
}
.vtabs{ display: flex; gap: 9px 18px; flex-wrap: wrap; }
.vtab{
  font-family: var(--sans); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--paper-dim);
  background: transparent; border: 0; border-bottom: 1px solid transparent;
  padding: 0 0 4px; cursor: pointer;
  transition: color .18s, border-color .18s;
}
.vtab:hover{ color: var(--paper); border-bottom-color: var(--red); }
.vtab.is-active{ color: var(--paper); border-bottom-color: var(--red); }
.vrail__count{ font-size: 11px; letter-spacing: 0.06em; color: var(--paper-dim); margin: 0; }

/* vertical line + items — rtl puts the scrollbar on the LEFT; items reset to ltr */
.vtrack{
  flex: 1 1 auto; overflow-y: auto; position: relative;
  padding: 14px 0 28px;
  direction: rtl;
}
.vtrack > .vitem{ direction: ltr; }
.vtrack::before{
  content: ""; position: absolute; left: calc(var(--vpad) - 16px); top: 0; bottom: 0;
  width: 1px; background: var(--line);
}
.vitem{
  position: relative; display: flex; align-items: center; gap: 8px;
  width: 100%; min-height: 30px; padding: 5px 16px 5px var(--vpad);
  background: none; border: 0; color: inherit; font-family: inherit; cursor: pointer; text-align: left;
  transition: background .15s;
}
.vitem:hover{ background: var(--hover); }
.vitem__tick{
  position: absolute; left: calc(var(--vpad) - 21px); top: 50%; transform: translateY(-50%);
  width: 12px; height: 1px; background: var(--paper-dim);
}
.vitem__y{ flex: 0 0 auto; font-size: 12px; font-weight: 800; color: var(--red); }
.vitem__t{
  flex: 1 1 auto; font-size: 12.5px; line-height: 1.25; color: var(--paper-dim);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vitem:hover .vitem__tick{ background: var(--paper); width: 16px; left: calc(var(--vpad) - 23px); }
.vitem:hover .vitem__t{ color: var(--paper); }
.vitem.is-active .vitem__tick{ background: var(--red); height: 2px; width: 18px; left: calc(var(--vpad) - 24px); }
.vitem.is-active .vitem__t{ color: var(--paper); }

/* ───── content: 2 columns (main + documents), roomier padding & gap.
   The whole block scrolls as one → the scrollbar sits on the far right,
   after Documents & liens. Docs stays sticky below the header. ───── */
.vapp .detail{
  flex: 1 1 auto; min-width: 0;
  grid-template-columns: minmax(0, 3fr) minmax(240px, 0.95fr);
  gap: clamp(44px, 5vw, 100px);
  padding: 0 clamp(44px, 5vw, 96px);
  overflow-y: auto;
}
.vapp .detail__main{ overflow: visible; padding-top: calc(var(--topbar-h) + 32px); padding-bottom: 56px; }
.vapp .detail__docs{ position: sticky; align-self: start; top: calc(var(--topbar-h) + 32px); padding-top: 0; }

/* flyout to the RIGHT of the (left) rail */
.tl-tip--vside{ transform: translate(0, -50%); }

@media (max-width: 900px){
  .vapp .vmain{ position: static; flex-direction: column; }
  .app.vapp{ height: auto; overflow: visible; }
  .vrail{ width: 100%; padding-top: 0; border-right: 0; border-bottom: 1px solid var(--line); max-height: 320px; }
  .vapp .detail{ display: block; }
  .vapp .detail__main, .vapp .detail__news, .vapp .detail__docs{ padding-top: 24px; padding-bottom: 0; }
}