/* pocket/web-v2/css/projects.css — Projects (design §4.2, unit P02). Tokens and the bar/chg/absence
   primitives come from kit.css; nothing here is inline in the markup (CSP). */

.ptab { display: grid; gap: 4px; margin-top: 8px; }
.prow {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
  grid-template-areas: "nm gcol acts" "st gp counts" "cpd cpd cpd" "plan plan plan";
  gap: 6px 20px;
  align-items: center;
  padding: 14px 4px;
  border-bottom: 1px solid var(--line);
}
.prow .nm { grid-area: nm; text-align: left; font-size: 16px; font-weight: 600; color: var(--ink); background: none; border: 0; padding: 0; }
.prow .st { grid-area: st; font-size: 13px; color: var(--ink3); }
.prow .st.flying { color: var(--ink); }
.prow .bar { grid-area: gcol; }
.prow .gp, .prow .absence { grid-area: gp; font-size: 12px; color: var(--ink3); }
.prow .counts { grid-area: counts; font-size: 12px; color: var(--ink3); justify-self: end; }
.prow .cpd { grid-area: cpd; font-size: 12px; color: var(--ink3); }
.prow .plan { grid-area: plan; font-size: 12px; color: var(--ink3); min-width: 0; overflow-wrap: anywhere; }
.prow .plan code { font-family: var(--mono, ui-monospace, monospace); color: var(--ink); user-select: all; }
.prow .acts { grid-area: acts; display: flex; flex-wrap: wrap; gap: 6px; justify-self: end; align-items: center; }
.prow .chg { justify-self: start; }
.prow.sealed { opacity: .7; }
.prow.sealed .nm { cursor: default; }

.phead { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.phead .lede { flex: 1 1 320px; margin: 0; }

.unadopted { display: grid; margin-top: 4px; }
.unadopted .srow .nm { font-size: 15px; color: var(--ink); }

@media (max-width: 640px) {
  .prow { grid-template-columns: minmax(0, 1fr); grid-template-areas: "nm" "st" "gcol" "gp" "counts" "cpd" "plan"; gap: 4px; }
  .prow .counts { justify-self: start; }
}