.timeline-clean{
  --tc-red:#b5121b;
  --tc-green:#1f7a3a;
  --tc-ink:#111827;
  --tc-muted:#475569;
  --tc-edge:rgba(15,23,42,.12);
  --tc-glass:rgba(255,255,255,.78);
  position:relative;
  overflow:hidden;
  overflow-x: clip;
}

.timeline-clean::before{
  content:"";
  position:absolute;
  inset:-1px;
  background:
    radial-gradient(900px 420px at 12% 12%, rgba(214,40,40,.10), transparent 58%),
    radial-gradient(820px 420px at 88% 22%, rgba(31,122,74,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,.66));
  pointer-events:none;
}
.timeline-clean .container{position:relative;}

.timeline-clean__head{max-width:900px;}
.timeline-clean__head h2{margin:.15rem 0 0; font-size:44px; letter-spacing:-.02em;}
.timeline-clean__subtitle{margin:.55rem 0 0; color:var(--tc-muted); font-size:1.05rem;}

.timeline-clean__controls{
  margin-top:18px;
  border:1px solid var(--tc-edge);
  border-radius:18px;
  background:var(--tc-glass);
  backdrop-filter: blur(10px);
  box-shadow:0 18px 40px rgba(2,6,23,.12);
  padding:14px;
}

.timeline-clean__people{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:max-content;
  gap:10px;
  overflow-x:auto;
  padding-bottom:4px;
}

.tc-person{
  border:1px solid rgba(15,23,42,.14);
  background:rgba(255,255,255,.86);
  border-radius:999px;
  padding:8px 12px 8px 10px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  user-select:none;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.tc-person:hover{transform:translateY(-1px); box-shadow:0 12px 22px rgba(2,6,23,.12);}
.tc-person.is-active{border-color:rgba(181,18,27,.55); box-shadow:0 0 0 3px rgba(181,18,27,.12);}

.tc-avatar{
  width:38px; height:38px; border-radius:999px;
  overflow:hidden;
  border:2px solid rgba(15,23,42,.10);
  flex:0 0 38px;
  background:#fff;
}
.tc-avatar img{width:100%; height:100%; object-fit:cover;}
.tc-person.is-active .tc-avatar{border-color:rgba(181,18,27,.35);}
.tc-person__name{font-weight:800; font-size:.9rem; color:var(--tc-ink); white-space:nowrap;}

.timeline-clean__meta{margin-top:14px;}
.timeline-clean__results{margin:0; color:var(--tc-muted); font-weight:700;}

.timeline-clean__list{
  list-style:none;
  padding:0;
  margin:14px 0 0;
  display:grid;
  gap:14px;
}

.tc-card{
  border:1px solid rgba(15,23,42,.12);
  border-radius:18px;
  background:rgba(255,255,255,.84);
  backdrop-filter: blur(10px);
  box-shadow:0 18px 40px rgba(2,6,23,.12);
  overflow:hidden;
  display:grid;
  grid-template-columns:160px 1fr;
}

.tc-card__media{background:linear-gradient(180deg, rgba(2,6,23,.06), rgba(2,6,23,.02));}
.tc-card__media img{width:100%; height:100%; object-fit:cover; display:block;}

.tc-card__body{padding:14px 16px; display:grid; gap:8px;}
.tc-meta{display:flex; flex-wrap:wrap; gap:8px; align-items:center;}
.tc-date{font-weight:900; color:#0f172a;}
.tc-pill{
  border:1px solid rgba(15,23,42,.12);
  border-radius:999px;
  padding:4px 10px;
  font-weight:800;
  font-size:.75rem;
  background:rgba(255,255,255,.85);
  color:#223047;
}
.tc-pill--red{border-color:rgba(181,18,27,.26); background:rgba(181,18,27,.08); color:#7a0c13;}
.tc-pill--green{border-color:rgba(31,122,58,.26); background:rgba(31,122,58,.08); color:#0f4a25;}

.tc-title{margin:0; font-size:1.1rem; letter-spacing:-.01em;}
.tc-summary{margin:0; color:var(--tc-muted); line-height:1.55;}

.tc-actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:4px;}
.tc-btn{
  border:1px solid rgba(15,23,42,.12);
  background:rgba(255,255,255,.88);
  border-radius:999px;
  padding:9px 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  cursor:pointer;
  font-weight:900;
}
.tc-btn.primary{background:rgba(31,122,58,.12); border-color:rgba(31,122,58,.28); color:#0f4a25;}
.tc-btn.secondary{background:rgba(181,18,27,.10); border-color:rgba(181,18,27,.26); color:#7a0c13;}

@media (max-width: 980px){
  .timeline-clean__head h2{font-size:40px;}
  .tc-card{grid-template-columns:140px 1fr;}
}

@media (max-width: 768px){
  .timeline-clean{overflow:visible;}
  .timeline-clean__head h2{
    font-size:clamp(28px, 7vw, 56px);
    line-height:1.1;
  }
  .timeline-clean__subtitle,
  .tc-title,
  .tc-summary,
  .tc-person__name{
    white-space:normal;
    overflow:visible;
    word-break:break-word;
    overflow-wrap:anywhere;
  }
  .tc-card{grid-template-columns:1fr;}
  .tc-card__media{height:180px;}
}

@media (max-width: 420px){
  .timeline-clean__head h2{
    font-size:clamp(28px, 8.8vw, 40px);
    line-height:1.08;
  }
  .tc-card__media{height:160px;}
}

@media (max-width: 900px){
  .timeline-clean__people{
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    gap:16px;
    max-width:100%;
  }
  .timeline-clean__people > *{
    flex:0 0 auto;
    scroll-snap-align:start;
  }
  .timeline-clean__people::-webkit-scrollbar{height:6px;}
}

@media (max-width: 640px){
  .timeline-clean__people{
    display:flex;
    gap:14px;
    width:max-content;
    min-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
  }
  .timeline-clean__people > *{
    flex:0 0 auto;
    scroll-snap-align:start;
    min-width:84px;
    max-width:110px;
  }
}

@media (min-width: 900px){
  .timeline-clean__people{
    display:flex;
    justify-content:center;
    width:100%;
    overflow:visible;
    scroll-snap-type:none;
  }
}

@media (max-width: 520px){
  .timeline-clean__controls{padding:12px;}
  .tc-card{display:block;}
  .tc-card__media{
    width:100%;
    height:auto;
    aspect-ratio:16/9;
  }
  .tc-card__body{padding:12px;}
}

/* Mobile selector polish:
   - force person row into horizontal scroller
   - normalize bubble/card sizing
   - prevent per-character name wrapping (max 2 lines) */
@media (max-width: 600px){
  .timeline-clean__controls{
    min-width:0;
    max-width:100%;
  }

  .timeline-clean__people{
    display:flex;
    flex-wrap:nowrap;
    gap:10px;
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    padding:0 0 6px;
  }

  .timeline-clean__people > *{
    flex:0 0 110px;
    min-width:110px;
    max-width:110px;
    scroll-snap-align:start;
  }

  .timeline-person-tab,
  .tc-person{
    width:110px;
    min-width:110px;
    max-width:110px;
    min-height:88px;
    border-radius:16px;
    padding:8px;
    text-align:center;
    white-space:normal !important;
    word-break:normal !important;
    overflow-wrap:normal !important;
    hyphens:none;
    line-height:1.2;
    overflow:hidden;
    text-overflow:ellipsis;
    -webkit-line-clamp:2;
    line-clamp:2;
    -webkit-box-orient:vertical;
  }

  .timeline-person-tab{
    display:-webkit-box;
    align-items:initial;
    justify-content:initial;
  }

  .tc-person{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:6px;
  }

  .tc-avatar{
    width:44px;
    height:44px;
    flex:0 0 44px;
  }

  .tc-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }

  .tc-person__name{
    display:-webkit-box;
    white-space:normal !important;
    word-break:normal !important;
    overflow-wrap:normal !important;
    hyphens:none;
    line-height:1.2;
    -webkit-line-clamp:2;
    line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    text-align:center;
    max-width:100%;
  }

}

/* Chip scroller (all breakpoints):
   keep person tabs in a single horizontal row with dedicated overflow area;
   add optional desktop scroll arrows that appear only when overflow exists. */
.timeline-clean__people-wrap{
  position:relative;
}

.timeline-clean__people-viewport{
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
  scrollbar-gutter:stable;
  scroll-snap-type:x proximity;
  padding-bottom:6px;
  max-width:100%;
}

.timeline-clean__people{
  display:flex !important;
  gap:12px;
  flex-wrap:nowrap !important;
  width:max-content;
  min-width:100%;
}

.timeline-clean__people > *{
  flex:0 0 auto;
  white-space:nowrap;
  scroll-snap-align:start;
}

.chip-scroll{
  position:absolute;
  top:50%;
  transform:translateY(calc(-50% - 3px));
  width:34px;
  height:34px;
  border:1px solid rgba(15,23,42,.18);
  border-radius:999px;
  background:rgba(255,255,255,.96);
  color:#0f172a;
  box-shadow:0 8px 18px rgba(2,6,23,.12);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:5;
  cursor:pointer;
}

.chip-scroll--left{left:6px;}
.chip-scroll--right{right:6px;}

.chip-scroll:disabled{
  opacity:.45;
  cursor:default;
}

.chip-scroll[hidden]{
  display:none !important;
}

@media (min-width: 700px){
  .chip-scroll{
    display:inline-flex;
  }

  .timeline-clean__people-wrap::before,
  .timeline-clean__people-wrap::after{
    content:"";
    position:absolute;
    top:0;
    bottom:6px;
    width:28px;
    z-index:4;
    pointer-events:none;
  }

  .timeline-clean__people-wrap::before{
    left:0;
    background:linear-gradient(to right, rgba(255,255,255,.9), rgba(255,255,255,0));
  }

  .timeline-clean__people-wrap::after{
    right:0;
    background:linear-gradient(to left, rgba(255,255,255,.9), rgba(255,255,255,0));
  }

  .timeline-clean__people-viewport{
    scrollbar-width:thin;
  }

  .timeline-clean__people-viewport::-webkit-scrollbar{
    height:8px;
  }

  .timeline-clean__people-viewport::-webkit-scrollbar-thumb{
    background:rgba(15,23,42,.22);
    border-radius:999px;
  }
}

@media (max-width: 699px){
  .chip-scroll{
    display:none !important;
  }
}