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


/* -- COLOR PALETTE -------------------------------------------------------
   Edit these variables to adjust the two program color schemes.
   "warm" = Jemperli (orange), "cool" = Imsidolimab (green).           */
:root {
  --anab-warm-bar        : #0079A5;   /* animated bar fill — Jemperli      */
  --anab-warm-milestone  : #0079a54a;   /* milestone cell background          */
  --anab-warm-header     : #0079A5;   /* banner background                  */

  --anab-cool-bar        : #4A7C2F;   /* animated bar fill — Imsidolimab   */
  --anab-cool-milestone  : #D4E8BE;   /* milestone cell background          */
  --anab-cool-header     : #4A7C2F;   /* (reserved for future use)          */
}


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

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


/* -- OUTER TABLE ---------------------------------------------- */
.anab-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) -- */
.anab-header-banner-spacer {
  background: transparent;
  padding: 0;
}


/* -- HEADER ROW — BANNER --------------------------------------- */
.anab-header-banner {
  background: var(--anab-warm-header);
  color: #ffffff;
  text-align: center;
  font-size: 1.3em;
  font-weight: 700;
  padding: 10px 12px !important;
  border-radius: 1px;
  letter-spacing: 0.01em;
}


/* -- HEADER ROW — COLUMN LABEL CELLS ------------------------- */
.anab-header-phase-label {
  background: #e8e8e8;
  color: #333333;
  font-size: 1em;
  font-weight: 600;
  line-height: 1em;
  padding: 10px 12px !important;
  text-align: center;
  border-radius: 1px;
}

.anab-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 (left column) ---------------- */
.anab-cell-program {
  background: #e1e1e1;
  text-align: center;
  padding: 10px 12px !important;
  border-radius: 1px;
  vertical-align: middle;
}

.anab-program-name {
  display: block;
  font-size: 1em;
  font-weight: 700;
  font-style: italic;
  color: #333333;
  line-height: 1.3;
}

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

/* Logo placeholder sits below name and mechanism */
.anab-program-logo {
  display: block;
  margin: 6px auto 0;
  padding: 5px 20%;
  height: auto;
}


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

/* Italic indication text (e.g. chemo-free regimen) */
.anab-cell-indication em {
  font-style: italic;
}


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

/* The sliding bar element — color class applied by JS */
.anab-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 1px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--anab-bar-duration, 700ms) cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.anab-bar.anab-bar--warm { background: var(--anab-warm-bar); }
.anab-bar.anab-bar--cool { background: var(--anab-cool-bar); }

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

/* -- BAR OVERLAY TEXT -----------------------------------------
   Text that sits inside the bar itself (e.g. CNPV note).
   Fades in after the bar finishes animating.                  */
.anab-bar-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8em;
  font-style: italic;
  font-weight: 500;
  color: #ffffff;
  padding: 6px 12px;
  text-align: center;
  line-height: 1.3;
  opacity: 0;
  transition: opacity 300ms ease;
  pointer-events: none;
  z-index: 1;
}

.anab-bar-overlay.anab-bar-overlay--visible {
  opacity: 1;
}


/* -- DATA CELL — MILESTONE TEXT ------------------------------- */
.anab-cell-milestone {
  border-radius: 1px;
  vertical-align: middle;
  text-align: center;
  padding: 10px 12px !important;
}

.anab-cell-milestone--warm { background: var(--anab-warm-milestone); }
.anab-cell-milestone--cool { background: var(--anab-cool-milestone); }

.anab-milestone-text {
  font-size: .8em;
  color: #333;
  line-height: 1.3em;
}

.anab-milestone-text p {
  margin-bottom: 8px !important;
}

.anab-milestone-text p:last-child {
  margin-bottom: 0 !important;
}


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


/* -- ROW GROUP DIVIDER ----------------------------------------- */
/* Adds extra visual spacing between the two program groups      */
.anab-group-divider td {
  padding: 4px 0 !important;
  background: transparent;
}


/* -- RESPONSIVE ------------------------------------------------ */
@media (max-width: 900px) {
  .anab-header-banner       { font-size: 1.1em; padding: 8px 8px !important; }
  .anab-header-phase-label,
  .anab-header-static-label { font-size: .85em; padding: 6px 6px !important; }
  .anab-program-name        { font-size: .9em; }
  .anab-program-mechanism   { font-size: .65em; }
  .anab-cell-indication     { font-size: .75em; }
  .anab-milestone-text      { font-size: .75em; }
  .anab-bar-overlay         { font-size: .75em; }
}

/* -- SCROLL HINT ------------------------------------------------
   Rendered in the upper-left spacer cell when showScrollHint is
   true in the data layer. Use the media query below to show on
   mobile and hide on desktop, or adjust to your breakpoints.    */
.anab-scroll-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 4px 4px;
  color: #888780;
}

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

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

/* Show on mobile, hide on desktop */
.anab-scroll-hint { display: flex; }

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