/* Project steering plan, Gantt in a project window (includes/visuals/gantt.php) */
.gt { --gt-lab: 260px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 34px 70px -44px rgba(12, 43, 21, .45); overflow: hidden; }
.gt-top { display: flex; align-items: center; gap: 14px; padding: 12px 20px; background: var(--forest); color: var(--white); }
.gt-win { display: inline-flex; gap: 6px; flex: none; }
.gt-win i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .28); }
.gt-title { margin: 0; min-width: 0; font-size: 14.5px; font-weight: 600; }
.gt-status { margin: 0 0 0 auto; flex: none; padding: 3px 10px; border-radius: 999px; background: rgba(150, 248, 120, .16); color: var(--green); font-size: 12.5px; font-weight: 700; }
.gt-tabs { list-style: none; margin: 0; padding: 0 20px; display: flex; gap: 26px; border-bottom: 1px solid var(--line); background: var(--paper); font-size: 13.5px; color: var(--ink-2); overflow: hidden; }
.gt-tabs li { padding: 11px 0 10px; border-bottom: 2px solid transparent; white-space: nowrap; }
.gt-tabs .is-on { color: var(--forest); font-weight: 700; border-bottom-color: var(--forest); }
.gt-body { padding: 24px 28px 22px; padding: clamp(16px, 2.4vw, 32px); padding-top: 48px; }

/* grid: label column + 24 weeks */
.gt-plan { position: relative; }
.gt-head, .gt-row { display: grid; grid-template-columns: var(--gt-lab) minmax(0, 1fr); }
.gt-track, .gt-over, .gt-months { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); }
.gt-s1 { grid-column-start: 1; } .gt-s2 { grid-column-start: 2; } .gt-s3 { grid-column-start: 3; } .gt-s4 { grid-column-start: 4; }
.gt-s5 { grid-column-start: 5; } .gt-s6 { grid-column-start: 6; } .gt-s7 { grid-column-start: 7; } .gt-s8 { grid-column-start: 8; }
.gt-s9 { grid-column-start: 9; } .gt-s10 { grid-column-start: 10; } .gt-s11 { grid-column-start: 11; } .gt-s12 { grid-column-start: 12; }
.gt-s13 { grid-column-start: 13; } .gt-s14 { grid-column-start: 14; } .gt-s15 { grid-column-start: 15; } .gt-s16 { grid-column-start: 16; }
.gt-s17 { grid-column-start: 17; } .gt-s18 { grid-column-start: 18; } .gt-s19 { grid-column-start: 19; } .gt-s20 { grid-column-start: 20; }
.gt-s21 { grid-column-start: 21; } .gt-s22 { grid-column-start: 22; } .gt-s23 { grid-column-start: 23; } .gt-s24 { grid-column-start: 24; }
.gt-e1 { grid-column-end: 2; } .gt-e2 { grid-column-end: 3; } .gt-e3 { grid-column-end: 4; } .gt-e4 { grid-column-end: 5; }
.gt-e5 { grid-column-end: 6; } .gt-e6 { grid-column-end: 7; } .gt-e7 { grid-column-end: 8; } .gt-e8 { grid-column-end: 9; }
.gt-e9 { grid-column-end: 10; } .gt-e10 { grid-column-end: 11; } .gt-e11 { grid-column-end: 12; } .gt-e12 { grid-column-end: 13; }
.gt-e13 { grid-column-end: 14; } .gt-e14 { grid-column-end: 15; } .gt-e15 { grid-column-end: 16; } .gt-e16 { grid-column-end: 17; }
.gt-e17 { grid-column-end: 18; } .gt-e18 { grid-column-end: 19; } .gt-e19 { grid-column-end: 20; } .gt-e20 { grid-column-end: 21; }
.gt-e21 { grid-column-end: 22; } .gt-e22 { grid-column-end: 23; } .gt-e23 { grid-column-end: 24; } .gt-e24 { grid-column-end: 25; }

.gt-head { align-items: end; height: 40px; border-bottom: 1px solid var(--line); }
.gt-head-l { padding-bottom: 10px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.gt-months span { grid-column: span 4; padding: 0 0 10px 8px; border-left: 1px solid var(--line); font-size: 12.5px; font-weight: 600; color: var(--forest); white-space: nowrap; }
.gt-rows { list-style: none; margin: 0; padding: 0; }
.gt-row { align-items: center; min-height: 58px; border-bottom: 1px solid var(--line); }
.gt-lab { min-width: 0; padding: 9px 16px 9px 0; }
.gt-name { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--forest); }
.gt-meta { margin: 1px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--ink-2); }
.gt-state, .gt-ms { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.gt-track { align-self: stretch; align-items: center; background-image: linear-gradient(to right, rgba(217, 213, 207, .5) 1px, transparent 1px), linear-gradient(to right, var(--line) 1px, transparent 1px); background-size: calc(100% / 24) 100%, calc(100% / 6) 100%; }
.gt-track > * { grid-row: 1; }
.gt-bar { height: 14px; border-radius: 7px; margin: 0 1px; }
.gt-bar--done { background: var(--forest); }
.gt-bar--todo { background: var(--mint); box-shadow: inset 0 0 0 1.5px var(--green-2); }
.gt-bar--l { border-radius: 7px 0 0 7px; margin-right: 0; }
.gt-bar--r { border-radius: 0 7px 7px 0; margin-left: 0; }
.gt-dm { position: relative; z-index: 1; justify-self: end; width: 20px; height: 20px; margin-right: -10px; }
.gt-dm svg { display: block; width: 100%; height: 100%; overflow: visible; }
.gt-dm path { fill: var(--forest); stroke: var(--white); stroke-width: 2.5; }
.gt-dm--go { width: 26px; height: 26px; margin-right: -13px; }
.gt-dm--go path { fill: var(--green); stroke: var(--forest); stroke-width: 2; }
.gt-ml { padding-left: 16px; font-size: 12.5px; font-weight: 700; color: var(--forest); white-space: nowrap; }
.gt-ml--left { padding: 0 8px 0 0; text-align: right; }
.gt-dm--go + .gt-ml { padding-left: 22px; }
.gt-cp { justify-self: center; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--white); box-shadow: inset 0 0 0 2px var(--forest); font-size: 12px; font-weight: 700; color: var(--forest); }
.gt-row--copil { border-bottom: 0; }
.gt-row--copil .gt-name { font-weight: 600; }

/* today line */
.gt-over { position: absolute; top: -30px; bottom: 0; left: var(--gt-lab); right: 0; pointer-events: none; }
.gt-now { position: relative; grid-row: 1; border-left: 2px solid var(--green-text); }
.gt-now-t { position: absolute; top: 0; left: -1px; transform: translateX(-50%); padding: 3px 9px; border-radius: 999px; background: var(--green-text); color: var(--white); font-size: 12px; font-weight: 700; white-space: nowrap; }
.gt-today-m { display: none; }

/* legend */
.gt-legend { margin-top: 18px; font-size: 13.5px; }
.gt-k { display: inline-block; flex: none; }
.gt-k--done, .gt-k--todo { width: 22px; height: 10px; border-radius: 5px; background: var(--forest); }
.gt-k--todo { background: var(--mint); box-shadow: inset 0 0 0 1.5px var(--green-2); }
.gt-k--ms, .gt-k--go { width: 11px; height: 11px; transform: rotate(45deg); background: var(--forest); }
.gt-k--go { background: var(--green); box-shadow: inset 0 0 0 1.5px var(--forest); }
.gt-k--cp { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--forest); }
.gt-k--now { width: 0; height: 16px; border-left: 2px solid var(--green-text); }

/* animation: the bars grow phase after phase from their start, the milestones and committees pop in,
   then the today line comes down; the go / no-go diamond keeps a soft pulse */
.js .vz-figure .gt-bar { transform: scaleX(0); transform-origin: left; transition: transform .55s cubic-bezier(.45, 0, .3, 1); }
.js .vz-figure .gt-dm, .js .vz-figure .gt-cp { opacity: 0; transform: scale(.3); transition: opacity .3s ease, transform .45s cubic-bezier(.3, 1.5, .5, 1); }
.js .vz-figure .gt-ml { opacity: 0; transition: opacity .4s ease; }
.js .vz-figure .gt-now { opacity: 0; transform: scaleY(0); transform-origin: top; transition: opacity .3s ease 2.1s, transform .6s cubic-bezier(.2, .7, .2, 1) 2.1s; }
.js .vz-figure .gt-now-t { opacity: 0; transition: opacity .4s ease 2.5s; }
.js .vz-figure .gt-d1 .gt-bar { transition-delay: 0.15s; } .js .vz-figure .gt-d1 .gt-bar--r { transition-delay: 0.45s; } .js .vz-figure .gt-d1 .gt-dm, .js .vz-figure .gt-d1 .gt-ml { transition-delay: 0.65s; }
.js .vz-figure .gt-d2 .gt-bar { transition-delay: 0.35s; } .js .vz-figure .gt-d2 .gt-bar--r { transition-delay: 0.65s; } .js .vz-figure .gt-d2 .gt-dm, .js .vz-figure .gt-d2 .gt-ml { transition-delay: 0.85s; }
.js .vz-figure .gt-d3 .gt-bar { transition-delay: 0.55s; } .js .vz-figure .gt-d3 .gt-bar--r { transition-delay: 0.85s; } .js .vz-figure .gt-d3 .gt-dm, .js .vz-figure .gt-d3 .gt-ml { transition-delay: 1.05s; }
.js .vz-figure .gt-d4 .gt-bar { transition-delay: 0.75s; } .js .vz-figure .gt-d4 .gt-bar--r { transition-delay: 1.05s; } .js .vz-figure .gt-d4 .gt-dm, .js .vz-figure .gt-d4 .gt-ml { transition-delay: 1.25s; }
.js .vz-figure .gt-d5 .gt-bar { transition-delay: 0.95s; } .js .vz-figure .gt-d5 .gt-bar--r { transition-delay: 1.25s; } .js .vz-figure .gt-d5 .gt-dm, .js .vz-figure .gt-d5 .gt-ml { transition-delay: 1.45s; }
.js .vz-figure .gt-d6 .gt-bar { transition-delay: 1.15s; } .js .vz-figure .gt-d6 .gt-bar--r { transition-delay: 1.45s; } .js .vz-figure .gt-d6 .gt-dm, .js .vz-figure .gt-d6 .gt-ml { transition-delay: 1.65s; }
.js .vz-figure .gt-d7 .gt-bar { transition-delay: 1.35s; } .js .vz-figure .gt-d7 .gt-bar--r { transition-delay: 1.65s; } .js .vz-figure .gt-d7 .gt-dm, .js .vz-figure .gt-d7 .gt-ml { transition-delay: 1.85s; }
.js .vz-figure .gt-cp1 { transition-delay: 1.55s; }
.js .vz-figure .gt-cp2 { transition-delay: 1.65s; }
.js .vz-figure .gt-cp3 { transition-delay: 1.75s; }
.js .vz-figure .gt-cp4 { transition-delay: 1.85s; }
.js .vz-figure.is-visible .gt-bar, .js .vz-figure.is-visible .gt-dm, .js .vz-figure.is-visible .gt-cp,
.js .vz-figure.is-visible .gt-now { opacity: 1; transform: none; }
.js .vz-figure.is-visible .gt-ml, .js .vz-figure.is-visible .gt-now-t { opacity: 1; }
.vz-figure.is-visible .gt-dm--go svg { animation: gt-pulse 2.6s ease-in-out 3s infinite; }
@keyframes gt-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }

/* narrower screens: a shorter label column */
@media (max-width: 1100px) {
  .gt { --gt-lab: 200px; }
  .gt-tabs { gap: 20px; }
  .gt-ml { padding-left: 13px; font-size: 12px; }
}

/* phones: a vertical timeline (the week grid, the bars and the today line give way to the rows' text) */
@media (max-width: 759px) {
  .gt-top { padding: 11px 16px; gap: 10px; flex-wrap: wrap; }
  .gt-win { display: none; }
  .gt-title { font-size: 13.5px; flex-basis: 100%; }
  .gt-status { margin-left: 0; }
  .gt-tabs { padding: 0 16px; gap: 18px; font-size: 13px; }
  .gt-tabs li:nth-child(n+3) { display: none; }
  .gt-body { padding-top: 20px; }
  .gt-head, .gt-over, .gt-track { display: none; }
  .gt-rows { position: relative; padding-left: 28px; }
  .gt-rows::before { content: ""; position: absolute; left: 8px; top: 14px; bottom: 14px; width: 2px; background: var(--line); }
  .gt-row { display: block; position: relative; min-height: 0; border-bottom: 0; }
  .gt-row::before { content: ""; position: absolute; left: -26px; top: 13px; width: 14px; height: 14px; border-radius: 50%; background: var(--white); box-shadow: inset 0 0 0 2px var(--forest); }
  .gt-row--done::before { background: var(--forest); }
  .gt-row--now::before { background: var(--green); }
  .gt-row--copil { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--line); }
  .gt-row--copil::before { top: 19px; }
  .gt-lab { padding: 8px 0 10px; }
  .gt-name { font-size: 15.5px; }
  .gt-meta { font-size: 13px; }
  .gt-state { position: static; width: auto; height: auto; margin: 0 0 0 8px; overflow: visible; clip: auto; display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--paper); color: var(--forest); font-size: 11.5px; font-weight: 700; vertical-align: 1px; }
  .gt-row--now .gt-state { background: var(--mint); }
  .gt-ms { position: static; width: auto; height: auto; margin: 6px 0 0; overflow: visible; clip: auto; white-space: normal; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--forest); }
  .gt-ms::before { content: ""; flex: none; width: 10px; height: 10px; transform: rotate(45deg); background: var(--forest); }
  .gt-ms--go::before { background: var(--green); box-shadow: inset 0 0 0 1.5px var(--forest); }
  .gt-today-m { display: flex; align-items: center; gap: 10px; margin: 4px 0 8px -28px; }
  .gt-today-m::after { content: ""; flex: 1; height: 2px; background: var(--green-text); }
  .gt-today-m span { padding: 3px 10px; border-radius: 999px; background: var(--green-text); color: var(--white); font-size: 12px; font-weight: 700; }
  .gt-legend > span:nth-child(-n+2) { display: none; }
  .js .vz-figure .gt-row, .js .vz-figure .gt-today-m { opacity: 0; transform: translateY(10px); transition: opacity .45s ease, transform .5s ease; }
  .js .vz-figure.is-visible .gt-row, .js .vz-figure.is-visible .gt-today-m { opacity: 1; transform: none; }
  .js .vz-figure .gt-d1 { transition-delay: 0.10s; }
  .js .vz-figure .gt-d2 { transition-delay: 0.22s; }
  .js .vz-figure .gt-d3 { transition-delay: 0.34s; }
  .js .vz-figure .gt-d4 { transition-delay: 0.46s; }
  .js .vz-figure .gt-d5 { transition-delay: 0.58s; }
  .js .vz-figure .gt-d6 { transition-delay: 0.70s; }
  .js .vz-figure .gt-d7 { transition-delay: 0.82s; }
  .js .vz-figure .gt-today-m { transition-delay: .55s; }
  .js .vz-figure .gt-row--copil { transition-delay: .95s; }
}