/* DNEG AI Roadmap: css/views/outcome.css
   The By outcome lens (.lens-outcome): the outcome cards with their maturity breakdown and the capabilities to start with.
   Everything else on these pages is the shared kit (lk-* in department.css, the brief and the folded blocks in site.css) and the shared
   components. Tokens only. */

.lens-outcome .oc-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); margin-top: 1.4rem; }
.lens-outcome .oc-card { display: flex; flex-direction: column; gap: .55rem; }
.lens-outcome .oc-card p { font-size: .88rem; }
.lens-outcome .oc-card.quiet h3, .lens-outcome .oc-card.quiet p { opacity: .72; }
/* where subgrid exists, the cards of one row share their rows (name, description, counts, maturity, capabilities), so the numbers line up */
@supports (grid-template-rows: subgrid) {
  .lens-outcome .oc-card { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: .55rem; }
  .lens-outcome .oc-card .lk-dfoot { display: contents; }
  .lens-outcome .oc-card > .top { grid-row: 1; }
  .lens-outcome .oc-card > p { grid-row: 2; }
  .lens-outcome .oc-card .lk-dcounts { grid-row: 3; }
  .lens-outcome .oc-card .oc-mix { grid-row: 4; }
  .lens-outcome .oc-card .oc-start { grid-row: 5; align-content: start; }
}

/* maturity breakdown: the shared stacked bar and key, slimmer and without a value column */
.lens-outcome .oc-mix { align-content: start; gap: 8px; margin-top: 0; padding-top: 0; }
.lens-outcome .oc-mix .bar { grid-template-columns: minmax(0, 1fr); }
.lens-outcome .oc-mix .t { height: 8px; }

/* the capabilities to start with */
.lens-outcome .oc-start { display: grid; gap: .35rem; margin-top: .25rem; }
.lens-outcome .oc-caps { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.lens-outcome .oc-caps li { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: .9rem; }
.lens-outcome .oc-caps a { min-width: 0; color: var(--fg); font-weight: 500; text-decoration: none; }
.lens-outcome .oc-caps a:hover { color: var(--accent2); text-decoration: underline; }
.lens-outcome .oc-caps .chip { flex: 0 0 auto; }

/* the executive pass: tidy spacing around the shared brief and folded blocks */
.lens-outcome .lk-mbody > .oc-grid { margin-top: .6rem; }          /* the cards sit under their note inside the open block */

@media print { .lens-outcome .oc-card { break-inside: avoid; } }