/* The Gantt block (js/gantt.js): % meter, dates, month timeline, milestones, and the project card it sits in. Greyscale. */
.proj { overflow: hidden; }
.proj__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 12px; border-bottom: 1.5px solid var(--line);
  background: repeating-linear-gradient(#fff 0 1px, #d6d6d6 1px 3px); }
.proj__bar h2 { margin: 0; padding: 0 6px; background: #fff; font: 700 16px/1.2 var(--font-ui); }
.proj__status { padding: 1px 8px; background: #fff; border: 1px solid var(--ink); border-radius: 999px; font: 16px/1.2 var(--font-lcd); white-space: nowrap; }
.proj__body { padding: 14px; }
.proj__sum { margin: 0 0 12px; font-size: 15px; }
.meter { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; margin-bottom: 4px; }
.meter__track { height: 16px; border: 1.5px solid var(--ink); border-radius: 3px; background: #fff; overflow: hidden; }
.meter__fill { height: 100%; width: var(--p); background: repeating-linear-gradient(90deg, #101010 0 6px, #313131 6px 8px); }
.meter__num { font: 26px/1 var(--font-lcd); }
.proj__dates { margin: 0 0 14px; font: 17px/1 var(--font-lcd); color: #636363; }
.gantt__h { margin: 16px 0 8px; font: 700 14px/1 var(--font-ui); text-transform: uppercase; letter-spacing: .04em; color: #424242; }

/* month timeline */
.tl { --n: 3; display: grid; grid-template-columns: minmax(96px, 30%) repeat(var(--n), minmax(0, 1fr)); row-gap: 6px; font-size: 13px; }
.tl__m { font: 16px/1 var(--font-lcd); color: #636363; padding-bottom: 2px; border-bottom: 1px solid #cecece; overflow: hidden; white-space: nowrap; }
.tl__y { font-size: 13px; }                              /* the year span in the corner when months are letters */
.tl__m--jan { box-shadow: inset 1px 0 #9c9c9c; padding-left: 2px; }         /* year boundary */
.tl--years .tl__m { overflow: visible; font-size: 13px; } /* '26 sits on January and runs into the next months */
.tl__name { grid-column: 1; align-self: center; padding-right: 8px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl__bar { position: relative; min-width: 4px; height: 18px; align-self: center; border: 1.5px solid var(--ink); border-radius: 3px; background: #fff; overflow: hidden; }
.tl__bar::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p); background: #101010; }
.tl__bar--active { background: repeating-linear-gradient(45deg, #fff 0 4px, #dedede 4px 8px); }
.tl__bar--done::before { width: 100%; }

.ms { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ms li { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px dotted #bdbdbd; }
.ms__dot { width: 12px; height: 12px; transform: rotate(45deg); border: 1.5px solid var(--ink); background: #fff; justify-self: center; }
.ms li.is-done .ms__dot { background: #101010; }
.ms__m { font: 16px/1 var(--font-lcd); color: #636363; }