/* Framework rendering fixes + view styling. Loaded AFTER styles.css so it can
   override specific renderer rules without editing styles.css (kept separate so
   the design session owns styles.css cleanly). */

/* VRIO verdicts — three distinct states: ✓ yes / ✗ no / — unknown.
   Previously "No" and "missing" both showed a bare em-dash, so a real No was
   indistinguishable from unassessed. */
.vrio-row .binary.yes { color: #547b3e; background: #e5eee1; }
.vrio-row .binary.no { color: #9f5c50; background: #f4e6e2; }
.vrio-row .binary.unknown { color: #9aa39b; background: transparent; }

/* Plot nodes (stakeholder, BCG, GE, competitor, risk): a numbered dot sits at
   the coordinate with the full label BELOW it — the old design packed the name
   inside a fixed circle with overflow:hidden, truncating "CPO partne…". */
.plot-node {
  width: auto; height: auto; padding: 0; background: none; border: 0;
  box-shadow: none; overflow: visible; border-radius: 0;
  transform: translate(-50%, 50%);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.plot-node .node-dot {
  display: grid; place-items: center; flex: none;
  border-radius: 50%; background: var(--node-color, #17352d); color: #fff;
  border: 2px solid var(--surface, #fffdf8); box-shadow: 0 4px 12px rgba(23,53,45,.22);
  font-weight: 700; font-variant-numeric: tabular-nums;
}
.plot-node .node-label {
  max-width: 150px; line-height: 1.15; font-weight: 600; text-align: center;
  color: var(--ink, #17352d);
  background: color-mix(in srgb, var(--surface, #fffdf8) 90%, transparent);
  padding: 2px 7px; border-radius: 7px; box-shadow: 0 1px 3px rgba(0,0,0,.08);
  white-space: normal; word-break: break-word;
}

/* Roadmap — real Gantt: workstream rows on an aligned time axis, initiative bars
   that span periods with a progress fill (the "timeline" view). */
.roadmap-gantt { display: flex; flex-direction: column; gap: 6px; }
.gantt-axis, .gantt-lane { display: grid; grid-template-columns: 150px 1fr; align-items: stretch; gap: 10px; }
.gantt-lane-label { display: flex; align-items: center; font-size: 12px; font-weight: 700; color: var(--ink, #17352d); padding: 6px 0; }
.gantt-axis .gantt-lane-label { min-height: 0; }
.gantt-periods { display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: 10px; }
.gantt-periods span { display: flex; flex-direction: column; gap: 2px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted, #6f7b74); padding-bottom: 6px; border-bottom: 2px solid var(--line, #e3ddcb); }
.gantt-periods b { font-family: "Fraunces", serif; font-size: 15px; color: var(--ink, #17352d); }
.gantt-track { display: grid; grid-auto-rows: minmax(34px, auto); gap: 6px 10px; padding: 4px 0; border-left: 1px dashed var(--line, #e3ddcb); }
.gantt-bar { position: relative; overflow: hidden; display: flex; align-items: center; gap: 6px; min-width: 0; padding: 5px 10px; border-radius: 8px; background: var(--sage, #dce9df); border: 1px solid color-mix(in srgb, var(--ink, #17352d) 14%, transparent); box-shadow: 0 1px 2px rgba(23,53,45,.08); }
.gantt-bar[data-impact="positive"], .gantt-bar[data-impact="opportunity"] { background: color-mix(in srgb, var(--lime, #c6ff3a) 26%, var(--surface, #fffdf8)); }
.gantt-bar[data-impact="negative"], .gantt-bar[data-impact="threat"] { background: color-mix(in srgb, #d98a6a 26%, var(--surface, #fffdf8)); }
.gantt-fill { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--ink, #17352d) 12%, transparent); z-index: 0; pointer-events: none; }
.gantt-label { position: relative; z-index: 1; display: flex; align-items: baseline; gap: 6px; min-width: 0; font-size: 12px; }
.gantt-label strong { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gantt-label em { font-style: normal; font-size: 10px; color: var(--muted, #6f7b74); white-space: nowrap; }
.gantt-pct { position: relative; z-index: 1; margin-left: auto; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink, #17352d); }
.gantt-empty { grid-column: 1 / -1; }
@media (max-width: 640px) { .gantt-axis, .gantt-lane { grid-template-columns: 90px 1fr; gap: 6px; } }