/* The capabilities on a timeline (#/capabilities, views/capabilities.js). The arrivals chart, then the catalog drawn with
   the lens kit's Gantt (.dg, css/views/department.css) with taller rows: name, maturity, who, what it does. */

/* in use by the end of each quarter: a column each, the ones new in it on top */
.cw-arr { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; }
.cw-arr .eyebrow { margin: 0; }
.cw-cols { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; align-items: end; margin-top: 4px; }
.cw-col { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 4px 0; border: 0; border-radius: 6px;
  background: transparent; color: var(--fg); font: inherit; cursor: pointer; }
.cw-col.z { cursor: default; }
.cw-col:not(.z):hover { background: color-mix(in srgb, var(--panel2) 70%, transparent); }
.cw-col:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cw-cv { font-size: .95rem; font-weight: 600; }
.cw-bar { display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; width: min(46px, 70%); height: 150px; }
.cw-bar i { display: block; flex: none; min-height: 0; }
.cw-bar i.new { background: var(--accent); border-radius: 4px 4px 0 0; }
.cw-bar i.old { background: color-mix(in srgb, var(--accent) 28%, transparent); }
.cw-bar i[style^="height:0.00"] { display: none; }
.cw-bar i.new[style^="height:0.00"] + i.old { border-radius: 4px 4px 0 0; }
.cw-cn { font-size: .8rem; color: var(--muted); }
.cw-cl { font-size: .74rem; font-weight: 600; letter-spacing: .06em; color: var(--muted); white-space: nowrap; }
.cw-key { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: .8rem; color: var(--muted); }
.cw-key span { display: inline-flex; align-items: center; gap: 7px; }
.cw-key i { width: 12px; height: 12px; border-radius: 3px; }
.cw-key i.new { background: var(--accent); }
.cw-key i.old { background: color-mix(in srgb, var(--accent) 28%, transparent); }
.cw-key .nb { margin-left: auto; }

/* the catalog on the roadmap: wider label column, a row is two or three lines */
.cw-g { --dg-lw: 46%; }
.cw-g .dg-r.cw-r { align-items: center; }
.cw-g .cw-r .dg-n { display: block; padding: 9px 16px 9px 0; }
.cw-g .cw-r .dg-n span { white-space: normal; overflow: visible; }
a.dg-r.cw-r:hover .dg-n span { color: inherit; text-decoration: none; }
a.dg-r.cw-r:hover .cw-h b { color: var(--accent); text-decoration: underline; }
.cw-n { display: grid; gap: 3px; min-width: 0; }
.cw-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.cw-h b { font-size: .92rem; }
.cw-h .chip { font-style: normal; font-size: .64rem; padding: 1px 7px; }
.cw-n small { font-size: .74rem; letter-spacing: 0; text-transform: none; color: var(--muted); }
.cw-g .cw-r .dg-n .cw-d { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  font-size: .8rem; line-height: 1.35; color: var(--muted); }
.cw-g .dg-lane { min-height: 36px; margin-top: 6px; border-top: 2px solid var(--line); scroll-margin-top: 80px; }
.cw-g .dg-lane b { font-size: .98rem; }
.cw-g .dg-lane .dg-n > * { position: relative; z-index: 1; padding-right: 4px; background: color-mix(in srgb, var(--panel) 50%, var(--bg2)); }
.cw-g .cw-r .dg-t > .dd:only-child { font-style: italic; }

/* a capability on a pilot show now */
.cw-n .cw-pn { font-style: normal; color: var(--accent); }

@media (max-width: 900px) {
  .cw-g { --dg-lw: 52%; }
  .cw-g .cw-r .dg-n .cw-d { display: none; }
  .cw-bar { height: 110px; }
  .cw-cl { font-size: .66rem; letter-spacing: 0; }
  .cw-key .nb { margin-left: 0; }
}