/* ═══════════════════════════════════════════════════════════════
   CRAFT Measurements (CIP + PAS) — page-specific styles
   (design tokens + shared components come from styles.css)
   ═══════════════════════════════════════════════════════════════ */

/* ── status pills (CIP) ── */
.spill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font: 800 10.5px var(--font-body);
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.s-done { background: #E7F6EC; color: #14672F; }
.s-ok   { background: #E3F4F1; color: #0B6E62; }
.s-prog { background: #E8F0FE; color: #1D46BC; }
.s-risk { background: #FDECEC; color: #A33A3A; }
.s-none { background: #EEF1F8; color: #5D6785; }

.sum-note { display: block; font-size: 11px; font-weight: 700; color: var(--muted); margin-top: 3px; white-space: normal; }

/* ── CIP goal cards ── */
.cip-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.cip-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 18px;
  background: linear-gradient(180deg, #FDFDFF, #F7FBF8);
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.cip-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.cip-head h3 {
  margin: 0;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--c-green);
}
.cip-goal { margin: 0; font-weight: 700; font-size: 13.5px; line-height: 1.55; }

.cip-prog { display: flex; align-items: center; gap: 10px; }
.cip-track { flex: 1; height: 9px; border-radius: 999px; background: #E8ECF6; overflow: hidden; }
.cip-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #107036, var(--c-green2)); transition: width 0.8s ease; }
.cip-pct { font-family: var(--font-disp); font-weight: 600; font-size: 16px; color: var(--c-green); }
.cip-steps-label { font-size: 11px; font-weight: 800; color: var(--muted); margin-top: -4px; }

.cip-steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; }
.cip-steps li { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; font-weight: 700; }
.cip-steps li.done { color: var(--muted); text-decoration: line-through; }
.step-box {
  width: 16px; height: 16px; flex: none;
  border: 2px solid #C7D4F0; border-radius: 5px;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 800; color: #fff;
  margin-top: 1px;
}
.cip-steps li.done .step-box { background: var(--c-green); border-color: var(--c-green); }

.cip-update { margin: 0; font-size: 12.5px; font-weight: 700; color: #4C3A05; background: #FFF8E6; border: 1px solid #F1DFA8; border-radius: 10px; padding: 8px 12px; }
.cip-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 11px; font-weight: 700; color: var(--muted); }
.cip-meta span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* ── PAS subscale bars ── */
.sub-list { display: flex; flex-direction: column; gap: 8px; padding: 4px 2px; }
.sub-row { display: flex; align-items: center; gap: 10px; }
.sub-name { flex: 0 0 190px; font-size: 11.5px; font-weight: 800; color: var(--ink); text-align: right; }
.sub-track { flex: 1; height: 10px; border-radius: 999px; background: #E8ECF6; overflow: hidden; }
.sub-fill { height: 100%; border-radius: 999px; transition: width 0.8s ease; }
.sub-val { flex: 0 0 34px; font-family: var(--font-disp); font-weight: 600; font-size: 14px; }

/* 25-item horizontal chart needs height */
.chart-items { height: 560px; }

/* ── responsive / print ── */
@media (max-width: 860px) {
  .cip-grid { grid-template-columns: 1fr; }
  .sub-name { flex-basis: 130px; font-size: 10.5px; }
}
@media print {
  .cip-card, .tr-cell { break-inside: avoid; }
  #pasPanel { break-before: page; }
  .chart-items { height: 480px; }
}