/* ============================================================
   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.2em;
  font-weight: 700;
  padding: 10px 12px !important;
  border-radius: 0;
  /*border-bottom: 3px solid #00594c !important;*/
  letter-spacing: 0.01em;
}


/* -- LEFT STATIC COLUMN HEADERS ------------------------------- */
.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;
  /*border-right: 1px solid rgba(0,0,0,.10) !important;*/
}
.plt-header-banner-spacer + .plt-header-static-label {
  /*border-left: 1px solid rgba(0,0,0,.10) !important;*/
}
.plt-header-static-label + .plt-header-phase-label {
  /*border-left: 1px solid rgba(0,0,0,.10) !important;*/
}


/* -- PHASE COLUMN LABEL CELLS ----------------------------------------- */
.plt-header-phase-label {
  background: #737B4C;
  color: #ffffff;
  font-size: 1em;
  font-weight: 600;
  line-height: 1em;
  padding: 10px 12px !important;
  text-align: center;
  border-radius: 1px;
  /*border-right: 1px solid rgba(0,0,0,.10) !important;*/
}

/* Half-width column group — single <td> containing multiple labels.
   No border-spacing gap between Phase 1a and Phase 1b.              */
.plt-header-phase-group {
  padding: 0 !important;
}

.plt-phase-group-inner {
  display: flex;
  height: 100%;
  align-items: stretch;
}

.plt-phase-group-label {
  flex: 1;
  display: flex;
  min-height: 2em;
  align-items: center;
  justify-content: center;
  padding: 6px 4px;
  font-size: 0.85em;  /* slightly smaller to fit in half-width */
  line-height: 1.2;
  text-align: center;
}

/* Thin vertical divider between grouped half-width labels */
.plt-phase-group-divider {
  width: 1px;
  background: rgba(255,255,255,0.20);
  flex-shrink: 0;
}

/* Half-width col sizing — width set dynamically by normalizeColumnWidths() in JS */
.plt-col-half {
  /* intentionally empty — JS calculates and sets width inline */
}


/* -- 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;
  font-weight: 500;
  color: #333;
}


/* -- DATA CELL - ANIMATED BAR -------------------------------- */
.plt-cell-bar {
  background: transparent;
  border-radius: 1px;
  padding: 0;
  vertical-align: middle;
  height: 56px;
  position: relative;
  overflow: visible;
}

.plt-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #014F59;
  border-radius: 1px;
  transform: scaleX(0);
  transform-origin: left center;
  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);
}


/* -- MILESTONE OVERLAY ----------------------------------------
   Absolutely positioned relative to the bar cell's left edge.
   Left offset and width are set by positionBars() in JS.
   No background — text floats over the empty columns.
   Always fades in — slide mode removed (no background to slide). */
.plt-milestone-overlay {
  position: absolute;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--plt-milestone-reveal-duration, 300ms) ease;
  /* left + width set inline by JS */
}

.plt-milestone-overlay.plt-milestone-overlay--visible {
  opacity: 1;
}

/* Invisible in-flow clone — same text, same width as overlay.
   Participates in normal layout so it pushes the row height to
   fit the text. Absolutely positioned overlay sits on top of it.
   Width is set inline by positionBars() to match the overlay.   */
.plt-milestone-sizer {
  visibility: hidden;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  /* width set inline by JS to match overlay width */
}

.plt-milestone-text {
  padding: 15px 10px !important;
  font-size: .8em;
  color: #222;
  line-height: 1.3em;
  text-align: center;
  font-weight: 500;
}
.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 {
  height: auto;
}


/* -- 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: 14px; padding: 8px 8px; }
  .plt-header-phase-label,
  .plt-header-static-label { font-size: 14px; padding: 5px 4px; }
  .plt-program-mechanism       { font-size: 11px; }
  .plt-program-mechanism  { font-size: 9px; }
  .plt-cell-indication    { font-size: 11px; }
  .plt-milestone-text     { font-size: 10px; }
  .plt-cell-program,
  .plt-cell-indication,
  .plt-cell-bar,
  .plt-cell-milestone     { height: 48px; }
}

  .plt-table {
    min-width: 900px;  /* adjust to taste */
  }

/* -- LEADER BAR ----------------------------------------------- */
/*
  Vertical label bar on the far left of the data rows.
  Toggle visibility with .plt-leader-hidden on #pipeline-root,
  or set display:none on .plt-leader-bar directly.
*/
.plt-leader-bar {
  background: #333333;
  border-radius: 1px;
  padding: 0;
  vertical-align: middle;
  text-align: center;
  /* width is controlled by leaderBar.width in the data layer (colgroup) */
}

/* Add display:none here to hide the leader bar entirely */
/* .plt-leader-bar { display: none; } */

.plt-leader-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

.plt-leader-text {
  color: #ffffff;
  font-size: 0.8em;
  font-weight: 500;
  letter-spacing: 0;
  writing-mode: vertical-rl;
  transform: rotate(180deg);  /* bottom-to-top reading direction */
  white-space: nowrap;
  line-height: 1;
}