/* NPD Playbook — the NPD-specific layer.
 *
 * The app loads, in order: Strategic-Playbook.css, Strategic-Playbook-enhance.css, and
 * M-A-Playbook.css. It inherits the whole design grammar from them (sp-* classes, brand
 * variables, the section/widget/table/matrix styling) AND the shared playbook grammar that
 * ended up living in the M&A sheet under the ma- prefix — the gate strip, the lifecycle lane,
 * the rating pills, the degree cards, the scoring matrix, the table roll-up footers, the OA
 * quadrant map, and the fixed "viewing as" header.
 *
 * Those ma-* rules are generic to a gated playbook rather than specific to M&A, which is why
 * this app reuses them rather than re-implementing them under an npd- prefix: two copies of the
 * same grammar drift apart within a release. If any of them is ever genuinely M&A-specific, the
 * right fix is to promote it into a shared playbook sheet, not to fork it here.
 *
 * This sheet adds ONLY what is genuinely NPD-specific, under an npd- prefix.
 *
 * All colours come from the VisionOne brand variables — no new palette.
 */

/* ── Development approach: vehicle and rigor, side by side ──────────
   Two decisions that govern everything downstream, shown as a pair because reading one without
   the other is how a breakthrough product ends up ring-fenced but run on derivative-grade
   paperwork (or the reverse). */
.npd-approach-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
  margin: 10px 0 14px;
}
.npd-approach-box {
  background: var(--vo-surface, #fff);
  border: 1px solid var(--vo-border, #dfe4ea);
  border-top: 3px solid var(--vo-blue, #0081B7);
  border-radius: 8px;
  padding: 13px 15px;
}
.npd-approach-box:nth-child(2) { border-top-color: var(--vo-purple, #7a5ea8); }
.npd-approach-box .sp-appx-label { margin-top: 0; }
.npd-approach-box .ma-degree-chosen { margin-top: 4px; }
.npd-approach-box .sp-intro-p { margin-bottom: 8px; }

/* ── Seven stages, not six ──────────────────────────────────────────
   The lifecycle lane and the intro flow are inherited from M-A-Playbook.css, which was tuned
   for six phases. Seven cards at the same minimum width wrap awkwardly at common laptop widths
   — one card alone on a second row — so the minimum is reduced here to let all seven sit on one
   row on a wide screen and wrap 4+3 rather than 6+1 on a narrower one. */
.ma-lifecycle { grid-template-columns: repeat(auto-fit, minmax(186px, 1fr)); }
.ma-phase-card { flex: 1 1 132px; min-width: 132px; }

/* The intro flow band is a 3-segment spend escalation here rather than the M&A
   pre/announcement/post split, so the segments are weighted differently. */
.ma-phase-band-seg.pre { flex: 3; }
.ma-phase-band-seg.ann { flex: 2; }
.ma-phase-band-seg.post { flex: 2; }

/* ── Six gates on the dashboard strip ───────────────────────────────
   Six gate tiles rather than three. At the inherited 280px minimum they render as two rows of
   three on most screens, which is fine — but the tiles carry less text here (the gate question
   is shorter), so they can be tighter and fit three-up more often. */
.ma-gate-strip { grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); }

/* Gate tabs: six of them wrap onto two rows on a laptop. Tighten the padding so they usually
   do not. */
.ma-gate-tab { padding: 6px 12px; }

/* ── The alignment quadrant map, NPD framing ────────────────────────
   The map is inherited. What differs is what the two pins MEAN: in the M&A playbook they are
   two real companies, here one pin is the company as it is and the other is a requirement the
   product implies. The "product needs" pin is therefore drawn as an outline rather than a solid
   fill — it is a target, not an observation, and showing them identically invited the reading
   that both were measured facts. */
.ma-quad-pin.them {
  background: transparent;
  color: var(--vo-purple, #7a5ea8);
  border: 2px dashed var(--vo-purple, #7a5ea8);
  padding: 1px 7px;
}
.ma-quad-cell.is-them {
  background: repeating-linear-gradient(
    45deg,
    #efe9f7,
    #efe9f7 8px,
    #f6f2fb 8px,
    #f6f2fb 16px
  );
}
/* Both in the same quadrant is the good case and should read as solid, not striped. */
.ma-quad-cell.is-both {
  background: var(--vo-green-tint, #e6efe2);
  box-shadow: inset 0 0 0 2px var(--vo-green, #649954);
}

/* ── Requirement traceability emphasis ──────────────────────────────
   The Product Definition section's must/should/could lists are the most consequential content
   in the playbook — an unstable definition is a leading cause of NPD failure — so the
   out-of-scope cell in particular gets a visual weight the generic warn accent does not carry.
   It is the list that stops an 18-month programme becoming a platform project. */
.sp-w-cell.warn .sp-w-label { color: #8f231c; }

/* ── The portfolio funnel ───────────────────────────────────────────
   One column per stage. The point of the layout is the SHAPE: an empty Discovery column next to
   a crowded Development column is a pipeline that stops producing in eighteen months, and that
   is legible here in a way it is not in a list sorted by name. */
.npd-funnel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin: 6px 0 22px;
}
.npd-funnel-col {
  background: var(--vo-surface, #fff);
  border: 1px solid var(--vo-border, #dfe4ea);
  border-top: 3px solid var(--vo-blue, #0081B7);
  border-radius: 8px;
  padding: 10px 11px;
  min-width: 0;
}
/* An empty stage is drawn deliberately faint but NOT hidden — the gap is the finding. */
.npd-funnel-col.empty { border-top-color: var(--vo-muted, #b9c2cc); background: var(--vo-canvas, #f7f9fb); }
.npd-funnel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.npd-funnel-stage { font-weight: 700; font-size: 12.5px; color: var(--vo-ink, #22303c); }
.npd-funnel-count {
  font-family: var(--vo-font-heading, Sanchez, serif);
  font-size: 17px; color: var(--vo-blue-dark, #005f87);
}
.npd-funnel-col.empty .npd-funnel-count { color: var(--vo-muted, #b9c2cc); }
.npd-funnel-timing {
  font-size: 10.5px; line-height: 1.35; color: var(--vo-ink-soft, #5b6b7a);
  margin: 2px 0 8px; text-transform: uppercase; letter-spacing: .03em;
}
.npd-funnel-chip {
  display: block; width: 100%; text-align: left;
  background: var(--vo-canvas, #f7f9fb);
  border: 1px solid var(--vo-border, #dfe4ea);
  border-radius: 6px;
  padding: 7px 9px; margin-bottom: 5px;
  font: inherit; cursor: pointer; color: inherit;
}
.npd-funnel-chip:hover { border-color: var(--vo-blue, #0081B7); }
.npd-funnel-chip.current { border-color: var(--vo-blue, #0081B7); background: var(--vo-blue-tint, #e0f1f8); }
.npd-funnel-chip-name { display: block; font-weight: 700; font-size: 12.5px; }
.npd-funnel-chip-meta { display: block; font-size: 11px; color: var(--vo-ink-soft, #5b6b7a); }

/* ── Portfolio table ─────────────────────────────────────────────── */
.npd-portfolio-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin: 18px 0 8px;
}
.npd-portfolio-head h3 { margin: 0; }
.npd-portfolio-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.sp-tbl-row.npd-row-current { background: var(--vo-blue-tint, #e0f1f8); }
.npd-row-flag { font-size: 11px; font-weight: 700; color: #a4761c; margin-top: 2px; }
.npd-gate-name { font-size: 12.5px; font-weight: 700; }
.npd-pct { min-width: 92px; }
.npd-pct .sp-progress { margin: 4px 0 0; }

/* The all-products link under the sidebar switcher. */
.npd-side-all {
  display: block; width: 100%; margin-top: 6px;
  background: none; border: 0; padding: 2px 0;
  font: inherit; font-size: 11.5px; font-weight: 700;
  color: var(--vo-blue-dark, #005f87);
  text-align: left; cursor: pointer;
}
.npd-side-all:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .npd-funnel { grid-template-columns: repeat(2, 1fr); }
}

/* ── Print (PDF export) ──────────────────────────────────────────── */
@media print {
  .npd-approach-pair { display: block; }
  .npd-approach-box { break-inside: avoid; margin-bottom: 10px; }
  .ma-quad-cell.is-them { background: #f6f2fb; }
  .npd-funnel { grid-template-columns: repeat(4, 1fr); }
  .npd-portfolio-actions { display: none; }
}


/* ── Scrolling pane ───────────────────────────────────────────────────────────
 * Ported from the M&A Playbook so all four playbooks scroll identically.
 * The scrolling box is #spScroll and it is FULL WIDTH, so its scrollbar sits at the
 * right edge of the pane where anyone would look for it. #spView keeps its reading
 * width as a column inside. Scrolling #spView directly puts the scrollbar at the edge
 * of that column — mid-screen on a wide display, which reads as missing. */
html body .sp-main {
  display: flex;
  flex-direction: column;
  overflow: hidden !important;      /* the pane no longer scrolls — #spScroll does */
  padding-bottom: 0 !important;     /* the shared rule's 110px moves onto #spScroll */
}
html body #spScroll {
  flex: 1 1 auto;
  min-height: 0;                    /* required, or a flex item refuses to shrink */
  overflow-y: scroll;               /* always reserve the track, so the layout never shifts */
  overscroll-behavior: contain;
  padding-right: 6px;
  padding-bottom: 110px;
  scrollbar-width: auto;
  scrollbar-color: var(--vo-green, #649954) var(--vo-green-tint, #e6efe2);
}
html body #spScroll::-webkit-scrollbar { width: 12px; }
html body #spScroll::-webkit-scrollbar-track {
  background: var(--vo-green-tint, #e6efe2);
  border-radius: 6px;
}
html body #spScroll::-webkit-scrollbar-thumb {
  background: var(--vo-green, #649954);
  border-radius: 6px;
  border: 2px solid var(--vo-green-tint, #e6efe2);
}
html body #spScroll::-webkit-scrollbar-thumb:hover { background: var(--vo-green-dark, #4a7340); }
/* #spView is now just the content column — it must not scroll or cap the pane's height. */
html body #spView { overflow: visible; }