/* Progress board: one column per project, at most four visible; more scroll sideways. */

.progress__updated { color: var(--mute); font-size: .95rem; margin: 0 0 1.25rem; }

/* filter: three quiet pills */
.pfilter { display: flex; gap: .5rem; margin: 0 0 2rem; }
.pfilter__btn {
  background: none; border: 1px solid var(--hair-2); border-radius: 999px; padding: .35rem 1rem; cursor: pointer;
  color: var(--paper-dim); font: 400 1rem/1.2 var(--f-body);
  transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.pfilter__btn:hover { color: var(--paper); border-color: var(--mute); }
.pfilter__btn[aria-pressed="true"] { color: var(--ink-0); background: var(--paper); border-color: var(--paper); }
.pfilter__btn:focus-visible { outline: 1px solid var(--gold-soft); outline-offset: 3px; }

/* board */
.pboard {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3 * 1.5rem) / 4);
  gap: 1.5rem;
  align-items: start;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: .75rem;
  scrollbar-width: thin;
  scrollbar-color: var(--hair-2) transparent;
}
.pcol {
  scroll-snap-align: start; min-width: 0; position: relative; /* keeps .vh labels inside the scroller */
  background: var(--ink-1); border: 1px solid var(--hair); border-radius: 10px;
  padding: 1.25rem 1.25rem 1rem;
}
.pcol.is-active { border-color: var(--gold-soft); }

.pcol__head { display: grid; gap: .35rem; padding-bottom: 1rem; margin-bottom: .5rem; border-bottom: 1px solid var(--hair); }
.pcol__name {
  display: inline-flex; align-items: center; gap: .5rem; width: max-content; max-width: 100%;
  font-family: var(--f-display); font-size: 1.65rem; line-height: 1.15; color: var(--paper); text-decoration: none;
}
.pcol__name .ico { width: .7em; height: .7em; margin: 0; color: var(--mute); transition: color .3s var(--ease); }
.pcol__name:hover .ico { color: var(--gold); }
.pcol__up { font-size: .95rem; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ppkg {
  display: inline-flex; align-items: center; gap: .4rem; width: max-content; max-width: 100%;
  padding: .2rem .65rem; border: 1px solid var(--gold-soft); border-radius: 999px;
  font-size: .95rem; color: var(--gold); text-decoration: none;
}
.ppkg .ico { width: 1rem; height: 1rem; margin: 0; }
.ppkg:hover { color: var(--paper); border-color: var(--gold); }
.pcol__stats { display: flex; gap: 1.1rem; margin-top: .35rem; }
.pstat { display: inline-flex; align-items: center; gap: .35rem; color: var(--paper-dim); font-size: 1rem; }
.pstat .ico { width: 1.05rem; height: 1.05rem; margin: 0; color: var(--mute); }
.pstat b { font-weight: 500; color: var(--paper); }
.pstat:first-child .ico { color: var(--paper-dim); }

/* groups inside a column */
.pgroup { margin-top: .9rem; }
.pgroup__label { margin: 0 0 .25rem; font: 500 .8rem/1.4 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }

/* items: icon + title, no clutter; full title and date on hover */
.pcol__list { list-style: none; margin: 0; padding: 0; }
.pitem__link {
  display: grid; grid-template-columns: 1.1rem 1fr; align-items: start; gap: .6rem;
  padding: .4rem .5rem; margin: 0 -.5rem; border-radius: 6px;
  color: var(--paper-dim); text-decoration: none; font-size: 1rem; line-height: 1.4;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.pitem__link:hover { background: var(--hair); color: var(--paper); }
.pitem__ico { width: 1.1rem; height: 1.1rem; margin: .1rem 0 0; color: var(--mute); }
.pitem__title { overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pitem--working .pitem__ico, .pitem--review .pitem__ico { color: var(--gold); }
.pitem--working .pitem__title, .pitem--review .pitem__title { color: var(--paper); }
.pitem--working .pitem__ico { animation: spin 2.4s linear infinite; }
.pitem--empty { color: var(--mute); margin: .75rem 0 0; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes breathe { 0%, 100% { opacity: .3; } 50% { opacity: .95; } }

.pcol__more {
  margin-top: .5rem; padding: .3rem 0; background: none; border: 0; cursor: pointer;
  font: 400 .95rem/1.4 var(--f-body); color: var(--gold);
}
.pcol__more:hover { color: var(--paper); }

.pboard__hint { margin: .75rem 0 0; font-size: .95rem; color: var(--mute); }
.pboard.is-scrollable:not(.is-end) { -webkit-mask-image: linear-gradient(to right, #000 94%, transparent); mask-image: linear-gradient(to right, #000 94%, transparent); }

/* home page summary: one cell per project */
.psum { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); border-top: 1px solid var(--hair); border-left: 1px solid var(--hair); }
.psum__item {
  display: grid; gap: .3rem; align-content: start; padding: 1.1rem 1.2rem; border: solid var(--hair); border-width: 0 1px 1px 0;
  color: var(--paper-dim); text-decoration: none; transition: background .3s var(--ease);
}
.psum__item:hover { background: var(--ink-1); }
.psum__name { display: flex; align-items: center; gap: .5rem; font-family: var(--f-display); font-size: 1.5rem; line-height: 1.2; color: var(--paper); }
.psum__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); animation: breathe 4.5s ease-in-out infinite; }
.psum__merged { font-size: 17px; color: var(--paper); }
.psum__working { font-family: var(--f-mono); font-size: 13px; }
.psum__item.is-active .psum__working { color: var(--gold); }
.psum__pkg { margin-top: .2rem; font-size: .95rem; color: var(--gold); }
.psum__all { display: inline-block; margin-top: 1.25rem; font-size: 17px; }

/* progress.html */
.ppage { max-width: calc(1180px + 2 * var(--gutter)); margin: 0 auto; padding: clamp(7rem, 12vw, 9rem) var(--gutter) 0; }
.ppage__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: 2rem; margin-bottom: 1.5rem; }
.ppage__title { font-family: var(--f-display); font-weight: 400; font-size: clamp(2.6rem, 6vw, 4rem); line-height: 1.1; margin: 0 0 1rem; color: var(--paper); }
.ppage__intro { font-size: 1.15rem; line-height: 1.6; color: var(--paper-dim); max-width: 40rem; margin: 0 0 .75rem; }

.tiles__fallback { color: var(--paper-dim); }

/* section illustrations: masked so they dissolve into the night */
.section-art { display: block; pointer-events: none; }
.section-art img {
  width: 100%; height: auto;
  -webkit-mask-image: radial-gradient(closest-side ellipse at 50% 50%, #000 55%, transparent 100%);
          mask-image: radial-gradient(closest-side ellipse at 50% 50%, #000 55%, transparent 100%);
}
.progress__top { display: grid; grid-template-columns: minmax(0, var(--measure)) minmax(0, 1fr); align-items: center; gap: 2rem; }
.progress__top .section-art { margin: 1rem -1rem -1rem 0; }

@media (max-width: 1000px) { .pboard { grid-auto-columns: calc((100% - 1.5rem) / 2); } }
@media (max-width: 760px) {
  .progress__top, .ppage__head { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .progress__top .section-art, .ppage__head .section-art { margin: -.5rem calc(-1 * var(--gutter)) 0; }
}
@media (max-width: 640px) { .pboard { grid-auto-columns: 86%; gap: 1rem; } }
@media (prefers-reduced-motion: reduce) { .pitem--working .pitem__ico, .psum__dot { animation: none; } }