/* Template sections: Timeline / roadmap variants (template-sections/timeline.html). */
.ts-time p { color: var(--text-medium); }
:where(.ts-time) :where(ol, ul) { padding: 0; list-style: none; }
.ts-time__center { margin-bottom: var(--space-12); text-align: center; }

/* V1 company timeline: line on the left on mobile, centred with alternating cards from 768px */
.ts-time__line { position: relative; display: grid; gap: var(--space-8); max-width: 960px; margin-inline: auto; padding-left: var(--space-8); }
.ts-time__line::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: linear-gradient(var(--orange-500), var(--border-thin)); }
.ts-time__line li { position: relative; display: grid; gap: var(--space-3); }
.ts-time__line li::before { content: ""; position: absolute; left: calc(var(--space-8) * -1); top: 4px; width: 16px; height: 16px; border: 3px solid var(--base-high); border-radius: 50%; background: var(--orange-500); box-shadow: 0 0 0 1px var(--border-thin); }
.ts-time__year { font-family: var(--font-heading); font-weight: var(--fw-heading); font-size: var(--h5-size); line-height: 1; color: var(--text-strong); }
.ts-time__card { display: grid; gap: var(--space-2); padding: var(--space-5) var(--space-6); border: 1px solid var(--border-thin); border-radius: var(--radius-xl); background: var(--base-high); }
@media (min-width: 768px) {
  .ts-time__line { padding-left: 0; gap: var(--space-4); }
  .ts-time__line::before { left: 50%; translate: -1px 0; }
  .ts-time__line li { grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: center; }
  .ts-time__line li::before { left: 50%; top: 50%; translate: -50% -50%; }
  .ts-time__line li:nth-child(odd) .ts-time__year { order: 2; }
  .ts-time__line li:nth-child(odd) .ts-time__card { text-align: right; }
  .ts-time__line li:nth-child(even) .ts-time__year { text-align: right; }
}

/* V2 now / next / later */
.ts-time__board { display: grid; gap: var(--space-4); }
.ts-time__col { padding: var(--space-4); border-radius: var(--radius-xl); background: var(--stone-100); }
.ts-time__col-head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); padding-inline: var(--space-2); font-family: var(--font-heading); font-weight: var(--fw-heading); font-size: var(--h6-size); color: var(--text-strong); }
.ts-time__col-head span { width: 8px; height: 8px; border-radius: 50%; background: var(--text-low); }
.ts-time__col--now .ts-time__col-head span { background: var(--emerald-500); box-shadow: 0 0 0 4px rgb(0 188 125 / 0.18); }
.ts-time__col--next .ts-time__col-head span { background: var(--orange-500); }
.ts-time__col-head small { margin-left: auto; font-family: var(--font-body); font-size: var(--body-sm-size); color: var(--text-low); }
.ts-time__col ul { display: grid; gap: var(--space-2); }
.ts-time__col li { display: grid; justify-items: start; gap: var(--space-2); padding: var(--space-5); border-radius: var(--radius-lg); background: var(--base-high); box-shadow: var(--shadow-sm); }
.ts-time__col b { font-weight: var(--fw-medium); color: var(--text-strong); }
.ts-time__col p { font-size: var(--para-sm-size); }
@media (min-width: 1024px) { .ts-time__board { grid-template-columns: repeat(3, 1fr); align-items: start; } }

/* V3 horizontal milestones */
.ts-time__track { display: grid; grid-auto-flow: column; grid-auto-columns: 200px; gap: var(--space-4); overflow-x: auto; padding-bottom: var(--space-2); scroll-snap-type: x mandatory; scrollbar-width: none; }
.ts-time__track li { position: relative; display: grid; align-content: start; gap: var(--space-1); padding-top: var(--space-8); scroll-snap-align: start; }
.ts-time__track li::before { content: ""; position: absolute; top: 7px; left: 0; right: calc(var(--space-4) * -1); height: 2px; background: var(--orange-500); }
.ts-time__track li:last-child::before { right: 0; }
.ts-time__track li.is-next::before { background: repeating-linear-gradient(90deg, var(--border-strong) 0 6px, transparent 6px 12px); }
.ts-time__dot { position: absolute; top: 0; left: 0; width: 16px; height: 16px; border: 3px solid var(--base-high); border-radius: 50%; background: var(--orange-500); box-shadow: 0 0 0 1px var(--border-thin); }
.ts-time__track li.is-next .ts-time__dot { background: var(--base-high); box-shadow: 0 0 0 2px var(--border-strong); }
.ts-time__when { font-size: var(--body-sm-size); color: var(--text-low); }
.ts-time__track b { font-family: var(--font-heading); font-weight: var(--fw-heading); font-size: var(--h6-size); color: var(--text-strong); }
.ts-time__track p { font-size: var(--para-sm-size); }
@media (min-width: 1024px) { .ts-time__track { grid-auto-flow: row; grid-template-columns: repeat(5, 1fr); overflow: visible; } }

/* V4 changelog list */
.ts-time__log { display: grid; gap: var(--space-10); }
.ts-time__log-head { display: grid; justify-items: start; align-content: start; gap: var(--space-4); }
.ts-time__entries { display: grid; padding: 0; list-style: none; }
.ts-time__entries > li { display: grid; gap: var(--space-4); padding-block: var(--space-8); border-top: 1px solid var(--border-thin); }
.ts-time__meta { display: flex; align-items: center; gap: var(--space-3); font-size: var(--body-sm-size); color: var(--text-low); }
.ts-time__body { display: grid; gap: var(--space-3); }
.ts-time__changes { display: grid; gap: var(--space-2); margin-top: var(--space-2); font-size: var(--para-sm-size); color: var(--text-medium); }
.ts-time__changes li { display: flex; align-items: baseline; gap: var(--space-3); }
.ts-time__changes code { padding: 1px 6px; border-radius: 4px; background: var(--base-medium); font-size: 0.9em; }
.ts-time__kind { flex: none; width: 72px; padding: 2px 0; border-radius: var(--radius-pill); font-weight: var(--fw-medium); font-size: 12px; text-align: center; background: var(--base-medium); color: var(--text-strong); }
.ts-time__kind--new { background: var(--mint-100); color: var(--emerald-600); }
.ts-time__kind--imp { background: var(--peach-100); color: var(--amber-800); }
@media (min-width: 768px) {
  .ts-time__entries > li { grid-template-columns: 180px 1fr; gap: var(--space-8); }
  .ts-time__meta { flex-direction: column; align-items: flex-start; position: sticky; top: calc(var(--header-h) + var(--space-6)); align-self: start; }
}
@media (min-width: 1024px) {
  .ts-time__log { grid-template-columns: 280px 1fr; gap: var(--space-16); }
  .ts-time__log-head { position: sticky; top: calc(var(--header-h) + var(--space-8)); align-self: start; }
}

/* V5 quarter cards */
.ts-time__quarters { display: grid; gap: var(--space-4); }
.ts-time__quarters li { display: grid; align-content: start; gap: var(--space-2); padding: var(--space-6); border: 1px solid var(--border-thin); border-radius: var(--radius-xl); background: var(--base-high); }
.ts-time__q { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
.ts-time__q b { font-family: var(--font-heading); font-weight: var(--fw-heading); font-size: var(--h4-size); line-height: 1; color: var(--text-strong); }
.ts-time__status { padding: 2px 10px; border-radius: var(--radius-pill); background: var(--base-medium); font-weight: var(--fw-medium); font-size: 12px; color: var(--text-medium); }
.ts-time__status--done { background: var(--mint-100); color: var(--emerald-600); }
.ts-time__status--doing { background: var(--peach-100); color: var(--amber-800); }
.ts-time__bar { height: 6px; margin-top: var(--space-4); border-radius: 99px; background: var(--base-medium); overflow: hidden; }
.ts-time__bar span { display: block; width: var(--p); height: 100%; border-radius: inherit; background: var(--orange-500); transform-origin: left; }
.ts-time__quarters small { font-size: 12px; color: var(--text-low); }
.motion .ts-time__quarters li:not(.is-revealed) .ts-time__bar span { scale: 0 1; }
.motion .ts-time__quarters li .ts-time__bar span { transition: scale 900ms var(--ease-out) 200ms; }
@media (min-width: 640px) { .ts-time__quarters { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ts-time__quarters { grid-template-columns: repeat(4, 1fr); } }