/* Sharetru · Company timeline with press filter (2026). Theme tokens only.
   Finished picture by default (green dots, full rail). Motion is layered on only where view timelines exist,
   the visitor allows motion and the theme's motion switch is on. */
.co26-tl { --co26-when: 9.5rem; --co26-rail: 2.25rem; padding-block: var(--st-section); padding-inline: var(--st-inline); font-family: var(--st-font); display: grid; gap: var(--st-gap-card); }
.co26-tl--tight { padding-block: var(--st-section-half); }
.co26-tl > .st-shead { margin-bottom: 0.25rem; }
@media (min-width: 1000px) { .co26-tl > .st-shead { row-gap: 0.75rem; } .co26-tl > .st-shead > hgroup { grid-row: 1 / span 2; } .co26-tl > .st-shead > .st-answer { grid-row: auto; } }
/* filter bar */
.co26-tl__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; padding: 0.75rem 1rem; border: 1px solid var(--st-line); border-radius: var(--st-radius-tile); background: var(--st-surface-2); scroll-margin-top: 1rem; }
.co26-tl__filter { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.co26-tl__filter[hidden] { display: none; }
.co26-tl__fl { font-size: var(--st-fs-eyebrow); font-weight: 800; letter-spacing: var(--st-tracking-eyebrow); text-transform: uppercase; color: var(--st-muted); margin-right: 0.25rem; }
.co26-tl__filter button { font: inherit; font-size: var(--st-fs-small); font-weight: 700; min-height: 44px; padding: 0 0.6rem 0 1rem; display: inline-flex; align-items: center; gap: 0.5rem;
  border: 1px solid var(--st-line-strong); border-radius: var(--st-radius-chip); background: var(--st-surface); color: var(--st-heading); cursor: pointer;
  transition: background var(--st-dur-fast) var(--st-ease), color var(--st-dur-fast) var(--st-ease), border-color var(--st-dur-fast) var(--st-ease); }
.co26-tl__filter button:hover { border-color: var(--st-heading); }
.co26-tl__filter button[aria-pressed="true"] { background: var(--st-midnight); border-color: var(--st-midnight); color: var(--st-white); }
.co26-tl__filter button:focus-visible { outline: 3px solid var(--st-focus); outline-offset: 2px; }
.co26-tl__n { min-width: 1.75rem; height: 1.75rem; padding: 0 0.45rem; display: inline-grid; place-items: center; border-radius: 999px; background: var(--st-surface-2); color: inherit; font-size: 0.8125rem; }
.co26-tl__filter button[aria-pressed="true"] .co26-tl__n { background: var(--st-green); color: var(--st-midnight); }
.co26-tl__press { margin: 0; font-size: var(--st-fs-small); color: var(--st-ink-soft); max-width: none; }
.co26-tl__press a { color: var(--st-link); font-weight: 700; text-underline-offset: 3px; }
/* eras */
.co26-tl__era { display: grid; gap: 0; }
.co26-tl__eh { margin: 1rem 0 0.75rem; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.25rem 0.75rem; font-size: var(--st-fs-h3); color: var(--st-heading); }
.co26-tl__eh small { font-size: var(--st-fs-small); font-weight: 700; color: var(--st-muted); letter-spacing: 0; }
@media (min-width: 760px) { .co26-tl__eh { padding-left: calc(var(--co26-when) + var(--co26-rail)); } }
/* the rail */
.co26-tl__list { --fill: 1; list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 0.75rem; }
.co26-tl__list::before, .co26-tl__list::after { content: ""; position: absolute; top: 0.6rem; bottom: 0.6rem; left: calc(var(--co26-rail) / 2 - 1px); width: 2px; border-radius: 2px; pointer-events: none; }
.co26-tl__list::before { background: var(--st-line); }
.co26-tl__list::after { background: linear-gradient(180deg, var(--st-royal), var(--st-green)); transform-origin: top; transform: scaleY(var(--fill)); }
.co26-tl__item { position: relative; max-width: none; display: grid; grid-template-columns: var(--co26-rail) minmax(0, 1fr); column-gap: 0.25rem; align-items: start; }
.co26-tl__item::before { content: ""; grid-column: 1; grid-row: 1 / span 2; justify-self: center; margin-top: 0.3rem; width: 14px; height: 14px; border-radius: 50%; position: relative; z-index: 1;
  background: var(--st-green); box-shadow: 0 0 0 4px var(--st-bg), 0 0 0 5px var(--st-line-strong); }
[data-ground="alt"] .co26-tl__item::before { box-shadow: 0 0 0 4px var(--st-surface-2), 0 0 0 5px var(--st-line-strong); }
.co26-tl__item--rel::before { background: var(--st-royal); }
.co26-tl__when { grid-column: 2; margin: 0; font-size: var(--st-fs-small); font-weight: 800; letter-spacing: 0.02em; color: var(--st-accent-ink); line-height: 1.6; }
.co26-tl__card { grid-column: 2; margin: 0.25rem 0 0; padding: 1rem 1.25rem; border: 1px solid var(--st-line); border-radius: var(--st-radius-card); background: var(--st-surface); box-shadow: var(--st-shadow-card); display: grid; gap: 0.4rem; }
.co26-tl__item--rel .co26-tl__card { border-color: color-mix(in srgb, var(--st-royal) 45%, var(--st-line)); }
.co26-tl__card h4 { margin: 0; font-size: 1.0625rem; line-height: 1.3; color: var(--st-heading); }
.co26-tl__t { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--st-ink-soft); max-width: 68ch; }
.co26-tl__rel { margin: 0.25rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; font-size: var(--st-fs-small); color: var(--st-muted); max-width: none; }
.co26-tl__tag { display: inline-flex; align-items: center; min-height: 1.5rem; padding: 0 0.6rem; border-radius: 999px; background: color-mix(in srgb, var(--st-royal) 14%, transparent); color: var(--st-heading); font-weight: 800; font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; }
.co26-tl__rel a { display: inline-flex; align-items: center; min-height: 44px; color: var(--st-link); font-weight: 700; text-underline-offset: 3px; }
.co26-tl__rel a:hover { color: var(--st-link-hover); }
@media (min-width: 760px) {
  .co26-tl__list::before, .co26-tl__list::after { left: calc(var(--co26-when) + var(--co26-rail) / 2 - 1px); }
  .co26-tl__item { grid-template-columns: var(--co26-when) var(--co26-rail) minmax(0, 1fr); column-gap: 0; }
  .co26-tl__item::before { grid-column: 2; grid-row: 1; margin-top: 1.35rem; }
  .co26-tl__when { grid-column: 1; grid-row: 1; padding: 1.05rem 1rem 0 0; text-align: right; }
  .co26-tl__card { grid-column: 3; grid-row: 1; margin: 0 0 0 0.5rem; }
}
@media (min-width: 1000px) {
  .co26-tl__card { grid-template-columns: minmax(13rem, 20rem) minmax(0, 1fr); column-gap: 2rem; align-items: start; }
  .co26-tl__card > h4 { grid-column: 1; grid-row: 1 / span 2; }
  .co26-tl__card > .co26-tl__t, .co26-tl__card > .co26-tl__rel { grid-column: 2; }
  .co26-tl__card > .co26-tl__rel { margin-top: 0; }
}
/* the press filter */
.co26-tl[data-show="press"] .co26-tl__item[data-release="0"], .co26-tl[data-show="press"] .co26-tl__era[data-has-release="0"] { display: none; }
/* motion: the rail fills as the list crosses the viewport; dots light as they enter */
@keyframes co26-tl-fill { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes co26-tl-dot { from { background: var(--st-surface); scale: 0.7; } to { scale: 1; } }
@keyframes co26-tl-card { from { opacity: 0.35; translate: 12px 0; } to { opacity: 1; translate: 0 0; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html:not([data-motion="off"]) .co26-tl__list { view-timeline-name: --co26-list; }
    html:not([data-motion="off"]) .co26-tl__list::after { animation: co26-tl-fill linear both; animation-timeline: --co26-list; animation-range: entry 30% exit 70%; }
    html:not([data-motion="off"]) .co26-tl__item::before { animation: co26-tl-dot linear both; animation-timeline: view(); animation-range: entry 70% cover 45%; }
    html:not([data-motion="off"]) .co26-tl__card { animation: co26-tl-card linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
  }
}
@media print { .co26-tl__bar { display: none; } }