/*
 * Caliber Studio - trace analytics (caliber_trace_analytics.js, screen 'trace-analytics').
 * Carbon tokens only; every colour follows the theme. Canonical breakpoints (672 / 1056); at phone width the filters
 * and chains reflow to one column, and the matrix scrolls inside its own region, never the page.
 */
.cta-panel { min-width: 0; }
.cta-panel:focus { outline: none; }

/* filters */
.cta-filter { display: flex; flex-direction: column; gap: var(--cds-spacing-04); margin: 0 0 var(--cds-spacing-06); padding: var(--cds-spacing-05);
  background: var(--cds-layer-01); border: 1px solid var(--cds-border-subtle-01); min-width: 0; }
.cta-filter__go { display: flex; flex-wrap: wrap; gap: var(--cds-spacing-03); }
.cta-types { border: 0; margin: 0; padding: 0; min-width: 0; }
.cta-types__list { display: flex; flex-wrap: wrap; gap: var(--cds-spacing-02) var(--cds-spacing-05); margin-top: var(--cds-spacing-02); }
.cta-pick { min-width: 0; }

/* chains of requirements (cycles and paths) */
.cta-cycles { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--cds-spacing-04); }
.cta-card { background: var(--cds-layer-01); border: 1px solid var(--cds-border-subtle-01); padding: var(--cds-spacing-04) var(--cds-spacing-05); min-width: 0; }
.cta-chain { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--cds-spacing-02) var(--cds-spacing-03); }
.cta-chain__node { min-width: 0; max-width: 100%; padding: var(--cds-spacing-02) var(--cds-spacing-03); background: var(--cds-layer-02, var(--cds-layer-accent-01));
  border: 1px solid var(--cds-border-subtle-01); overflow-wrap: anywhere; }
.cta-chain__edge { font-size: var(--f-sm); color: var(--cds-text-secondary); white-space: nowrap; }
.cta-chain__edge.is-suspect { color: var(--cds-text-error); }
.cta-chain__back { border-style: dashed; }
.cta-flag { display: inline-block; font-size: var(--f-xs); padding: 0 var(--cds-spacing-02); border: 1px solid var(--cds-support-warning); color: var(--cds-text-primary); }

/* blast radius bars */
.cta-bars { list-style: none; margin: 0 0 var(--cds-spacing-05); padding: 0; display: grid; gap: var(--cds-spacing-03); max-width: 720px; }
.cta-bar { display: grid; grid-template-columns: 6rem minmax(0, 1fr) 4rem; align-items: center; gap: var(--cds-spacing-04); }
.cta-bar__label { font-size: var(--f-sm); color: var(--cds-text-secondary); }
.cta-bar__track { height: var(--cds-spacing-04); background: var(--cds-layer-accent-01); display: block; }
.cta-bar__fill { display: block; height: 100%; background: var(--cds-support-warning); }
.cta-bar__value { text-align: end; font-variant-numeric: tabular-nums; }
.cta-level { margin: 0 0 var(--cds-spacing-03); }
.cta-level > summary { cursor: pointer; padding: var(--cds-spacing-03) 0; }
.cta-notes { max-width: 80ch; margin: 0 0 var(--cds-spacing-05); }

/* suggestions */
.cta-score { display: inline-flex; align-items: center; gap: var(--cds-spacing-03); font-variant-numeric: tabular-nums; }
.cta-score__bar { width: 2.5rem; height: var(--cds-spacing-03); background: var(--cds-layer-accent-01); display: inline-block; }
.cta-score__bar > span { display: block; height: 100%; background: var(--cds-support-info); }
.cta-propose { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--cds-spacing-02); }
.cta-propose .hx-select { width: auto; min-width: 9rem; }

/* baseline compare */
.cta-deltas { list-style: none; margin: 0; padding: 0; font-size: var(--f-sm); }

/* the matrix */
.cta-legend { display: flex; flex-wrap: wrap; gap: var(--cds-spacing-02) var(--cds-spacing-05); font-size: var(--f-sm); margin: 0 0 var(--cds-spacing-04); }
.cta-matrix-wrap { max-height: 70vh; overflow: auto; }
.cta-matrix { border-collapse: separate; border-spacing: 0; }
.cta-matrix thead th { position: sticky; top: 0; z-index: 2; background: var(--cds-layer-accent-01); }
.cta-matrix__corner { left: 0; z-index: 3 !important; min-width: 14rem; }
.cta-matrix__row { position: sticky; left: 0; z-index: 1; background: var(--cds-layer-01); min-width: 14rem; max-width: 22rem; }
.cta-matrix__col { text-align: center; white-space: nowrap; }
.cta-matrix__cell { text-align: center; min-width: 3.5rem; border-inline-start: 1px solid var(--cds-border-subtle-01); }
.cta-matrix__cell[data-self] { background: var(--cds-layer-accent-01); }
.cta-matrix__cell.is-linked { background: var(--cds-layer-selected-01); }
.cta-l { display: block; font-size: var(--f-xs); font-family: var(--cds-code-01-font-family); white-space: nowrap; }
.cta-l.is-suspect { color: var(--cds-text-error); text-decoration: underline wavy; }
.cta-gap > th { box-shadow: inset 3px 0 0 var(--cds-support-warning); }

@media (max-width: 671px) {
  .cta-filter { padding: var(--cds-spacing-04); }
  .cta-bar { grid-template-columns: 4.5rem minmax(0, 1fr) 3rem; gap: var(--cds-spacing-03); }
  .cta-matrix__corner, .cta-matrix__row { min-width: 9rem; max-width: 12rem; }
  .cta-chain__edge { white-space: normal; }
}
@media (forced-colors: active) {
  .cta-bar__fill, .cta-score__bar > span { background: CanvasText; }
  .cta-matrix__cell.is-linked { outline: 1px solid CanvasText; }
}