/* ============================================================
   PIPELINE MILESTONE TRACKER  -  ftb-pipeline.css
   Paste into your master WordPress style.css.
   All selectors are prefixed "plt-" (Pipeline Tracker)
   to avoid collisions with existing theme styles.
   ============================================================ */


/* -- ROOT WRAPPER --------------------------------------------- */
#pipeline-root {
  font-family: inherit;
  background: transparent;
  width: 100%;
  max-width: 100vw;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#pipeline-root * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border-color: transparent;
}


/* -- OUTER TABLE ---------------------------------------------- */
/*
  border-spacing provides the white-gap "margin" between cells.
  border-collapse must be separate (not collapse) for spacing to work.
*/
.plt-table {
  width: 100%;
  min-width: 75rem;
  max-width: 100%;
  border-collapse: separate;
  border-spacing: 3px;
  table-layout: fixed;
}


/* -- HEADER ROW - TRANSPARENT SPACER (above left two columns) -- */
.plt-header-banner-spacer {
  background: transparent;
  padding: 0;
}


/* -- HEADER ROW - BANNER ("Development Stage…") -------------- */
.plt-header-banner {
  background: #014F59;
  color: #ffffff;
  text-align: center;
  font-size: 1.3em;
  font-weight: 500;
  padding: 10px 12px !important;
  border-radius: 1px;
  letter-spacing: 0.01em;
}


/* -- HEADER ROW - COLUMN LABEL CELLS ------------------------- */
/* Phase columns (IND Enabling, Phase 1, Phase 2, Phase 3) */
.plt-header-phase-label {
  /*background: #014f591c;*/
  background: #737B4C;
  color: #FFFFFF;
  font-size: 1em;
  font-weight: 600;
  line-height: 1em;
  padding: 10px 12px !important;
  text-align: center;
  border-radius: 1px;
}

/* Left static columns (Antibody Program, Therapeutic Indication) */
.plt-header-static-label {
  background: #333333;
  color: #ffffff;
  font-size: 1em;
  font-weight: 600;
  line-height: 1em;
  padding: 10px 12px !important;
  text-align: center;
  border-radius: 1px;
}


/* -- DATA CELL - ANTIBODY PROGRAM NAME ----------------------- */
.plt-cell-program {
  background: #e1e1e1;
  text-align: center;
  padding: 10px 12px !important;
  border-radius: 1px;
  vertical-align: middle;
  height: 56px;
}

.plt-program-name {
  display: block;
  font-size: 1em;
  font-weight: 600;
  color: #333333;
  line-height: 1.3;
}

.plt-program-mechanism {
  display: block;
  font-size: .7em;
  line-height: 1.2em;
  color: #333;
  margin-top: 2px;
}


/* -- DATA CELL - THERAPEUTIC INDICATION ---------------------- */
.plt-cell-indication {
  background: #f1f1f1;
  text-align: center;
  padding: 10px 8px;
  border-radius: 1px;
  vertical-align: middle;
  font-size: .8em;
  color: #333;
}


/* -- DATA CELL - ANIMATED BLUE BAR --------------------------- */
/*
  The bar cell fills the entire cell background with #014F59.
  JS sets colspan so it can span one or two phase columns.
  The bar animates via scaleX on an inner ::before pseudo, which
  lets us slide left-to-right without affecting cell geometry.
*/
.plt-cell-bar {
  background: transparent;
  border-radius: 1px;
  padding: 0;
  vertical-align: middle;
  height: 56px;
  position: relative;
  overflow: hidden;
}

/* The sliding bar element injected by JS */
.plt-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #014F59;
  border-radius: 1px;
  transform: scaleX(0);
  transform-origin: left center;
  /* duration driven by CSS custom property written by JS */
  transition: transform var(--plt-bar-duration, 700ms) cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.plt-bar.plt-bar--active {
  transform: scaleX(1);
}


/* -- DATA CELL - MILESTONE TEXT ------------------------------- */
/*
  Light blue cell that appears after the bar stops sliding.
  Fades in via opacity transition on the inner text element.
*/
.plt-cell-milestone {
  /*background: #014f591c;*/
  background: #CDEA8059;
  border-radius: 1px;
  vertical-align: middle;
  text-align: center;
  padding: 10px 12px !important;
}

.plt-milestone-text {
  font-size: .8em;
  color: #222;
  line-height: 1.2em;
}
.plt-milestone-text p {
  margin-bottom: 8px !important;
}
.plt-milestone-text p:last-child {
  margin-bottom: 0 !important;
}

.plt-cell-program,
.plt-cell-indication,
.plt-cell-bar,label
.plt-cell-milestone {
  height: auto;
}
.plt-milestone-text.plt-milestone-text--visible {
  visibility: visible;
  opacity: 1;
}


/* -- DATA CELL - EMPTY PHASE COLUMN --------------------------- */
.plt-cell-empty {
  background: transparent;
  padding: 0;
}

/* -- SCROLL HINT ----------------------------------------------- */
.plt-scroll-hint {
  display: flex;
  margin-left: 43px !important;
  align-items: center;
  justify-content: start;
  gap: 6px;
  padding: 6px 4px 4px;
  color: #888780;
}

.plt-scroll-hint-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
  margin: 0 2px;
}

.plt-scroll-hint-arrow-right {
  margin-left: 1px;
}

@media (min-width: 1025px) {
  .plt-scroll-hint { display: none; }
}


/* -- RESPONSIVE ------------------------------------------------ */
@media (max-width: 767px) {
  .plt-header-banner      { font-size: 11px; padding: 8px 8px; }
  .plt-header-phase-label,
  .plt-header-static-label { font-size: 10px; padding: 5px 4px; }
  .plt-program-mechanism       { font-size: 11px; }
  .plt-program-mechanism  { font-size: 9px; }
  .plt-cell-indication    { font-size: 10px; }
  .plt-milestone-text     { font-size: 9px; }
  .plt-cell-program,
  .plt-cell-indication,
  .plt-cell-bar,
  .plt-cell-milestone     { height: 48px; }
}