/* CI log analyzer styles — single column at every width (DESIGN.md 4.3). */
.kw-cla { display: grid; gap: var(--kw-space-5); }

.kw-cla__input { display: grid; gap: var(--kw-space-3); }
.kw-cla__drop { position: relative; }
.kw-cla__drop.is-dragover .kw-cla__textarea { border-color: var(--kw-accent); }
.kw-cla__textarea {
  width: 100%;
  min-height: 200px;
  padding: var(--kw-space-3) var(--kw-space-4);
  border: 2px dashed var(--kw-line-strong);
  border-radius: var(--kw-radius-md);
  background: var(--kw-surface);
  color: var(--kw-text);
  font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  resize: vertical;
}
.kw-cla__textarea:focus-visible { outline: 2px solid var(--kw-focus); outline-offset: 1px; }
.kw-cla__drop-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: var(--kw-radius-md);
  background: color-mix(in srgb, var(--kw-primary-soft) 88%, transparent);
  color: var(--kw-primary-ink);
  font-weight: 600;
}
.kw-cla__inline { align-self: center; color: var(--kw-text-2); font-size: var(--kw-fs-sm); }
.kw-cla__select {
  padding: 8px 10px;
  border: 1px solid var(--kw-line-strong);
  border-radius: var(--kw-radius-md);
  background: var(--kw-surface);
  color: var(--kw-text);
  font: inherit;
  font-size: var(--kw-fs-sm);
}
.kw-cla__progress {
  position: relative;
  height: 22px;
  border-radius: var(--kw-radius-full);
  background: var(--kw-surface-2);
  overflow: hidden;
}
.kw-cla__progress-bar { height: 100%; width: 0; background: var(--kw-accent); transition: width 120ms linear; }
.kw-cla__progress span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--kw-text-2);
  font-size: var(--kw-fs-xs);
}

.kw-cla__results { display: grid; gap: var(--kw-space-4); }
.kw-cla__verdict {
  padding: var(--kw-space-4) var(--kw-space-5);
  border: 1px solid color-mix(in srgb, var(--kw-danger) 45%, transparent);
  border-left: 4px solid var(--kw-danger);
  border-radius: var(--kw-radius-md);
  background: var(--kw-danger-soft);
}
.kw-cla__verdict.is-ok {
  border-color: var(--kw-line);
  border-left-color: var(--kw-success);
  background: var(--kw-surface);
}
.kw-cla__v-type { font-weight: 700; }
.kw-cla__v-warn { color: var(--kw-warn, #8a6100); font-weight: 600; }
.kw-cla__v-meta { margin-top: 2px; color: var(--kw-text-2); font-size: var(--kw-fs-sm); }

.kw-cla__stats { display: flex; flex-wrap: wrap; gap: var(--kw-space-2) var(--kw-space-4); }
.kw-cla__stat { color: var(--kw-text-2); font-size: var(--kw-fs-sm); font-variant-numeric: tabular-nums; }
.kw-cla__stat b { color: var(--kw-text); }

.kw-cla__types { display: flex; flex-wrap: wrap; gap: var(--kw-space-2); }
.kw-cla__type-tag { cursor: pointer; }
.kw-cla__type-tag.is-active { background: var(--kw-primary-soft); color: var(--kw-primary-ink); }

.kw-cla__card {
  padding: var(--kw-space-5);
  border: 1px solid var(--kw-line);
  border-radius: var(--kw-radius-lg);
  background: var(--kw-surface);
}
.kw-cla__card h2 { margin: 0 0 var(--kw-space-3); font-size: var(--kw-fs-xl); }
.kw-cla__flaky { border-color: color-mix(in srgb, var(--kw-warn, #8a6100) 45%, transparent); }
.kw-cla__flaky ul { margin: 0; padding-left: 20px; }

.kw-cla__table-wrap { overflow-x: auto; }
.kw-cla__card table { width: 100%; border-collapse: collapse; font-size: var(--kw-fs-sm); }
.kw-cla__card th, .kw-cla__card td { padding: 8px 10px; border-bottom: 1px solid var(--kw-line); text-align: left; vertical-align: top; }
.kw-cla__card th { color: var(--kw-text-2); font-weight: 600; }
.kw-cla__job-fail { color: var(--kw-danger); font-weight: 700; }
.kw-cla__job-ok { color: var(--kw-success); }

.kw-cla__roots { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--kw-space-3); }
.kw-cla__rc { display: grid; gap: 4px; }
.kw-cla__rc-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px var(--kw-space-2);
  color: var(--kw-text-2);
  font-size: var(--kw-fs-xs);
}
.kw-cla__rc-line {
  margin: 0;
  padding: var(--kw-space-2) var(--kw-space-3);
  border-radius: var(--kw-radius-md);
  background: var(--kw-surface-2);
  font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.kw-cla__mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--kw-fs-sm); }
.kw-cla__muted { color: var(--kw-text-2); }

.kw-cla__agent {
  margin: 0;
  padding: var(--kw-space-4);
  border: 1px solid var(--kw-line);
  border-radius: var(--kw-radius-md);
  background: var(--kw-surface-2);
  font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.kw-cla__copy-feedback { align-self: center; color: var(--kw-success); font-size: var(--kw-fs-sm); font-weight: 600; }
.kw-cla__words { color: var(--kw-text-2); font-family: ui-monospace, Menlo, Consolas, monospace; }

@media (max-width: 767px) {
  .kw-cla__controls { display: grid; grid-template-columns: 1fr 1fr; }
  .kw-cla__controls .kw-btn--primary { grid-column: 1 / -1; width: 100%; }
  .kw-cla__inline { padding-left: 2px; }
}


