/* =========================
   OVER ONS – TIMELINE (PAGE ONLY)
   Premium split + progress rail
   ========================= */

/* Mobile mini header (sticky) */
.timelineMini{
  position: sticky;
  top: calc(var(--headerReserve) + 10px);
  z-index: 40;
}

.timelineMiniInner{
  border: var(--border);
  border-radius:var(--radiusSm);
  box-shadow: var(--shadowSm);
  background: rgba(255,255,255,.92);
  padding: 10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  backdrop-filter: blur(10px);
  /* Let vertical swipes scroll the page, even when starting on the sticky bar */
  touch-action: pan-y;
}


.timelineMiniTitle{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:var(--weightHead);
  letter-spacing:var(--trackingCardTitle);
  white-space:nowrap;
}

.timelineChips{
  display:flex;
  align-items:center;
  gap:8px;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  padding-bottom: 2px;
  /* Prefer horizontal gestures here; allow vertical gestures to bubble to the page */
  touch-action: pan-x;
  overscroll-behavior-x: contain;
}


/* Allow timeline nav to be <a> or <button> without visual differences */
.tChip,
.tIndex{
  text-decoration:none;
  color:inherit;
}
.tChip:focus-visible,
.tIndex:focus-visible{
  outline:3px solid rgba(16,16,16,.75);
  outline-offset:3px;
}
.tChip{
  border: var(--border);
  background: rgba(255,255,255,.95);
  box-shadow: var(--shadowSm);
  border-radius:var(--radiusSm);
  padding: 10px 12px;
  font-weight:var(--weightHead);
  letter-spacing:var(--trackingCardTitle);
  white-space:nowrap;
  cursor:pointer;
  touch-action: manipulation;
}

.tChip.isActive{
  background: rgba(91,117,83,.16);
}

@media (min-width: 900px){
  .timelineMini{ display:none; }
}

/* Timeline Shell */
.timelineShell{
  padding: 18px;
}

/* Split layout desktop */
.timelineLayout{
  display:block;
}

@media (min-width: 900px){
  .timelineLayout{
	display:grid;
	grid-template-columns: 260px 1fr;
	gap: 16px;
	align-items:start;
  }
}

/* Left index (desktop) */
.timelineIndex{
  display:none;
}

@media (min-width: 900px){
  .timelineIndex{
	display:block;
	position: sticky;
	top: calc(var(--headerReserve) + 14px);
	align-self: start;
  }
}

.timelineIndexTop{
  border:var(--border);
  border-radius: 18px;
  background: rgba(255,255,255,.75);
  padding: 14px;
  box-shadow: 0 14px 24px rgba(16,16,16,.06);
}

.timelineIndexTitle{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight: 950;
  letter-spacing: var(--trackingCardTitle);
  font-size: 1.1rem;
}

.timelineIndexHint{
  margin-top: 6px;
  color: rgba(16,16,16,.62);
  font-weight:600;
  font-size: .92rem;
}

.timelineIndexList{
  margin-top: 12px;
  display:grid;
  gap: 10px;
}

.tIndex{
  width: 100%;
  text-align:left;
  display:flex;
  align-items:center;
  gap: 10px;
  border: var(--border);
  border-radius: 16px;
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadowSm);
  padding: 12px 12px;
  cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}

.tIndex:hover{
  transform: translate(-1px,-1px);
  box-shadow: 5px 5px 0 rgba(16,16,16,.10);
}

.tIndex:active{
  transform: translate(1px,1px);
  box-shadow: 2px 2px 0 rgba(16,16,16,.10);
}

.tIndexDot{
  width: 12px;
  height: 12px;
  border-radius:var(--radiusSm);
  border:var(--border);
  background: rgba(255,255,255,.95);
  box-shadow: 0 0 0 6px rgba(16,16,16,.04);
  flex: 0 0 auto;
}

.tIndexText{
  font-weight: 950;
  letter-spacing: var(--trackingCardTitle);
}

.tIndex.isActive{
  background: rgba(91,117,83,.12);
}

.tIndexDot--intro{ box-shadow: 0 0 0 6px rgba(248,206,107,.16); }
.tIndexDot--start{ box-shadow: 0 0 0 6px rgba(91,117,83,.14); }
.tIndexDot--studio{ box-shadow: 0 0 0 6px rgba(16,16,16,.08); }
.tIndexDot--tour{ box-shadow: 0 0 0 6px rgba(91,117,83,.10); }
.tIndexDot--now{ box-shadow: 0 0 0 6px rgba(196,70,72,.10); }

/* Timeline content */
.timelineContent{
  position: relative;
  --progress: 0; /* set by JS */
}

/* Rail track + progress (fills while scrolling) */
.tRail{
  position:absolute;
  left: 18px;
  top: 8px;
  bottom: 8px;
  width: 10px;
  pointer-events:none;
}

.tRail::before{
  content:"";
  position:absolute;
  left: 4px;
  top: 0;
  bottom: 0;
  width: 2px;
  border-radius:var(--radiusSm);
  background: rgba(16,16,16,.14);
}

.tRail::after{
  content:"";
  position:absolute;
  left: 4px;
  top: 0;
  width: 2px;
  height: calc(var(--progress) * 100%);
  border-radius:var(--radiusSm);
  background: rgba(16,16,16,.75);
  transform-origin: top;
}

@media (min-width: 900px){
  .tRail{
	left: 22px;
  }
}

/* Item layout */
.tItem{
  position: relative;
  padding-left: 58px;
  margin-top: 14px;
}

.tItem:first-child{
  margin-top: 0;
}

.tDot{
  position:absolute;
  left: 14px;
  top: 22px;
  width: 18px;
  height: 18px;
  border-radius:var(--radiusSm);
  border: var(--border);
  background: rgba(255,255,255,.95);
  box-shadow: var(--shadowSm);
}

/* Subtle phase colors for dot ring */
.tDot--intro{ box-shadow: 0 0 0 7px rgba(248,206,107,.18), var(--shadowSm); }
.tDot--start{ box-shadow: 0 0 0 7px rgba(91,117,83,.16), var(--shadowSm); }
.tDot--studio{ box-shadow: 0 0 0 7px rgba(16,16,16,.08), var(--shadowSm); }
.tDot--tour{ box-shadow: 0 0 0 7px rgba(91,117,83,.12), var(--shadowSm); }
.tDot--now{ box-shadow: 0 0 0 7px rgba(196,70,72,.14), var(--shadowSm); }

.tCard{
  border:var(--border);
  border-radius: 18px;
  background:
	radial-gradient(circle at 18% 18%, rgba(91,117,83,.08), rgba(255,255,255,0) 55%),
	rgba(255,255,255,.92);
  box-shadow: 0 14px 26px rgba(16,16,16,.07);
  padding: 16px;
}

.tCardTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap:wrap;
}

.tYear{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 10px 12px;
  border-radius:var(--radiusSm);
  border:var(--border);
  background: rgba(255,255,255,.80);
  font-weight: 950;
  letter-spacing: var(--trackingCardTitle);
}

.tPhaseIcon{
  width: 44px;
  height: 44px;
  border-radius:var(--radiusSm);
  border:var(--border);
  background: rgba(255,255,255,.85);
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.tTitle{
  margin-top: 12px;
  font-size: 1.12rem;
  font-weight: 950;
  letter-spacing: var(--trackingCardTitle);
}

.tText{
  margin: 10px 0 0;
  line-height: 1.75;
  color: rgba(16,16,16,.82);
  font-weight:600;
}

/* Active polish */
.tItem.isActive .tCard{
  border-color: rgba(16,16,16,.22);
  box-shadow: 0 18px 30px rgba(16,16,16,.10);
}

/* Motion safety */
@media (prefers-reduced-motion: reduce){
  .tIndex, .tIndex:hover{ transition:none; transform:none; }
}