/*
 * Caliber Studio - Quality Dashboard and DXL Rules (caliber_quality.js, caliber_quality_rules.js).
 * Carbon tokens only; every colour follows the theme. Below 1056 px the card grid stacks to one column and wide tables
 * scroll inside their own region, so nothing overflows the page at 1024 px or at phone width.
 */
.cal-q-bar { align-items: flex-end; margin: 0 0 var(--cds-spacing-05); }
/* [K5] a requirement keeps a readable width; on a phone its table scrolls inside its own region */
.cal-root .hx-table .cal-q-req { min-inline-size: 14rem; }
/* [K5] the dashboard's tab strip (Overview, Findings to Fix, Structure) */
.cal-root [data-ref="tabs"] .hx-tabs { margin: 0 0 var(--cds-spacing-05); }
.cal-q-of { font-size: var(--f-sm); color: var(--mut); margin-inline-start: var(--cds-spacing-01); }
.cal-q-grades { display: flex; flex-wrap: wrap; gap: var(--cds-spacing-02); font-size: var(--f-sm); }
.cal-q-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cds-spacing-05); margin: 0 0 var(--cds-spacing-06); }
.cal-q-grid .hx-h3 { margin: 0 0 var(--cds-spacing-03); }

.cal-q-trend { margin: 0 0 var(--cds-spacing-05); max-width: 760px; }
.cal-q-trend svg { width: 100%; height: auto; background: var(--cds-layer-01, var(--panel)); border: 1px solid var(--border); }
.cal-q-trend__axis { stroke: var(--border-strong); stroke-width: 1; }
.cal-q-trend__goal { stroke: var(--mut); stroke-width: 1; stroke-dasharray: 6 4; }
.cal-q-trend__line { fill: none; stroke: var(--cds-interactive); stroke-width: 3; }
.cal-q-trend__dot { fill: var(--cds-interactive); }
.cal-q-trend__lbl { fill: var(--mut); font-size: 12px; }

.cal-q-check { max-width: 960px; }
.cal-q-check .hx-textarea { min-height: 5.5em; }
.cal-q-result { margin-top: var(--cds-spacing-05); }
.cal-q-score { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--cds-spacing-03); margin: 0 0 var(--cds-spacing-04); }
.cal-q-score__n { font-size: var(--f-2xl, 2rem); font-weight: var(--fw-regular); font-variant-numeric: tabular-nums; color: var(--cds-text-primary); }
.cal-q-stmt { padding: var(--cds-spacing-04); background: var(--cds-layer-02, var(--cds-layer-01, var(--panel))); border-inline-start: 3px solid var(--border-strong); white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.7; }
.cal-q-mark { background: transparent; color: inherit; padding: 0 1px; border-bottom: 2px solid var(--cds-support-info, var(--cds-interactive)); }
.cal-q-mark--warning { border-bottom-color: var(--hx-yellow-30); background: var(--cds-layer-accent-01, transparent); }
.cal-q-mark--error { border-bottom-color: var(--hx-red-60); background: var(--cds-layer-accent-01, transparent); }
.cal-q-dims { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 130px), 1fr)); gap: var(--cds-spacing-03); margin: 0 0 var(--cds-spacing-05); }
.cal-q-dims div { padding: var(--cds-spacing-03); border: 1px solid var(--border); }
.cal-q-dims dt { font-size: var(--f-sm); color: var(--mut); }
.cal-q-dims dd { margin: 0; font-size: var(--f-lg, 1.25rem); font-variant-numeric: tabular-nums; }
.cal-q-findings { margin: 0 0 var(--cds-spacing-05); padding-inline-start: var(--cds-spacing-06); display: grid; gap: var(--cds-spacing-04); }
.cal-q-findings p { margin: var(--cds-spacing-02) 0 0; overflow-wrap: anywhere; }
.cal-q-rewrite { display: grid; gap: var(--cds-spacing-02); padding: var(--cds-spacing-04); border: 1px dashed var(--border-strong); }
.cal-q-ok { color: var(--cds-text-primary); }
.cal-q-ok::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-inline-end: var(--cds-spacing-03); border-radius: 50%; background: var(--hx-green-50); vertical-align: middle; }

.cal-q-diags { margin: var(--cds-spacing-03) 0; padding-inline-start: var(--cds-spacing-06); display: grid; gap: var(--cds-spacing-03); }
.cal-q-diags li { overflow-wrap: anywhere; }
.cal-q-diags__at { font-family: var(--mono); font-size: var(--f-sm); color: var(--mut); }
.cal-q-diags code, .cal-root .hx-table code { font-family: var(--mono); font-size: var(--f-sm); }
.cal-q-code, .hx-dialog .cal-q-code { font-family: var(--mono); font-size: var(--f-sm); min-height: 14em; white-space: pre; tab-size: 2; }
.cal-q-src { margin: 0; padding: var(--cds-spacing-04); max-height: 50vh; overflow: auto; font-family: var(--mono); font-size: var(--f-sm); line-height: 1.6; background: var(--cds-layer-02, var(--cds-layer-01, var(--panel))); border: 1px solid var(--border); }
.cal-q-src:focus-visible { outline: var(--hx-focus-ring-width) solid var(--cds-focus); outline-offset: var(--hx-focus-ring-inset); }
.cal-q-src__n { display: inline-block; min-width: 3ch; margin-inline-end: var(--cds-spacing-04); text-align: end; color: var(--mut); user-select: none; }
.cal-root .hx-table tr.is-selected > * { background: var(--cds-layer-selected-01, var(--cds-layer-accent-01, transparent)); }

@media (max-width: 1055px) {
  .cal-q-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 671px) {
  .cal-q-bar { align-items: stretch; }
  .cal-q-findings, .cal-q-diags { padding-inline-start: var(--cds-spacing-05); }
}