/* Keyword Clustering. Colours come from the theme tokens only. */
.cl-form { display: grid; gap: 14px; }
.cl-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 12px; align-items: end; }
.cl-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 6px; }
.cl-intents { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 14px; margin-top: 12px; }
.cl-int { display: grid; gap: 6px; }
.cl-int-h { display: flex; gap: 10px; align-items: center; }
.cl-bar { height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.cl-bar i { display: block; height: 100%; border-radius: 99px; }
.cl-i { --k: var(--gen-fg); --kb: var(--gen-bg); }
.cl-c { --k: var(--gap-fg); --kb: var(--gap-bg); }
.cl-t { --k: var(--cov-fg); --kb: var(--cov-bg); }
.cl-n { --k: var(--mis-fg); --kb: var(--mis-bg); }
.cl-bar i { background: var(--k); }
.cl-badge { display: inline-block; padding: 3px 12px; border-radius: 99px; font-size: .82rem; font-weight: 800; background: var(--kb); color: var(--k); white-space: nowrap; }
.cl-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; background: var(--k); }
.cl-type { display: block; margin-top: 2px; font-size: .8rem; color: var(--muted); }
.cl-merged { color: var(--accent); font-weight: 700; }
.cl-kws summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.cl-kws ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; max-height: 260px; overflow: auto; }
.cl-table td { vertical-align: top; }
/* tool.css gives the first column of a .tbl a 300px minimum: here the first column is the small "#". The group column takes the free width; the number columns shrink to their content. */
.cl-table > thead th:first-child, .cl-table > tbody > tr > td:first-child { min-width: 0; width: 1%; white-space: nowrap; }
.cl-table > thead th:nth-child(2), .cl-table > tbody > tr > td:nth-child(2) { width: auto; min-width: 280px; }
.cl-table > thead th:nth-child(n+3), .cl-table > tbody > tr > td:nth-child(n+3) { width: 1%; white-space: nowrap; }
@media (max-width: 720px) { .cl-actions .btn { flex: 1 1 auto; } }

/* Phones and small laptops: each group becomes a card instead of a wide table */
@media (max-width: 1100px) {
  .cl-table { min-width: 0; display: block; }
  .cl-table > thead { display: none; }
  .cl-table > tbody { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .cl-table > tbody > tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
  .cl-table > tbody > tr > td { display: block; width: auto !important; min-width: 0 !important; padding: 0; border: 0; white-space: normal !important; text-align: left; }
  .cl-table > tbody > tr > td:first-child { display: none; }
  .cl-table > tbody > tr > td:nth-child(2) { grid-column: 1 / -1; min-width: 0; }
  .cl-table > tbody > tr > td:nth-child(3) { grid-column: 1 / -1; }
  .cl-table > tbody > tr > td:nth-child(n+4)::before, .cl-table > tbody > tr > td:nth-child(3)::before { content: attr(data-label); display: block; font-size: .66rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 700; }
}