/* slog-lint: one quiet line under the summary, and the Problems list it
   drops over the editor (lint.js) */

#lint {
  position: relative;
  background: var(--chrome);
  border-bottom: 1px solid var(--border);
  font-size: 11.5px;
}
.lint-head {
  display: flex; align-items: center; gap: 6px; width: 100%;
  height: 22px; padding: 0 14px; border: 0; border-radius: 0;
  background: transparent; color: var(--muted); font: inherit; text-align: left; cursor: pointer;
}
.lint-head:hover, #lint.open .lint-head { color: var(--text); }
.lint-label { color: var(--muted); }
.lint-sep { color: var(--border-strong); }
.lint-attention { color: var(--text); }
.lint-quiet { color: var(--muted); }
.lint-bad, .lint-error { color: var(--red); }

.lint-pop {
  position: absolute; z-index: 30; top: 100%; left: 8px;
  width: min(760px, calc(100% - 16px)); max-height: 55vh; overflow: auto;
  padding: 6px 0; background: white; border: 1px solid var(--border); border-radius: 6px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12); font-size: 12px; color: var(--text);
}
.lint-none, .lint-error { padding: 4px 12px; }
.lint-group-head {
  display: flex; align-items: baseline; gap: 8px; width: 100%; padding: 3px 12px;
  border: 0; background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.lint-group-head:hover { background: var(--chrome); }
.lint-twist { width: 10px; color: var(--muted); }
.lint-code { font-weight: 600; }
.lint-group.error .lint-code { color: var(--orange); }
.lint-group.warning .lint-code { color: var(--blue); }
.lint-group.info .lint-code, .lint-group.hint .lint-code { color: var(--muted); font-weight: normal; }
.lint-sample { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }

.lint-row { padding: 1px 12px 1px 30px; line-height: 1.6; }
.lint-line a { font: 11.5px var(--mono); }
.lint-row.stale { opacity: 0.55; }
.lint-line { display: flex; align-items: baseline; gap: 8px; }
.lint-line a { cursor: pointer; color: var(--blue); white-space: nowrap; }
.lint-message { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lint-line button { height: 18px; padding: 0 6px; font-size: 11px; visibility: hidden; }
.lint-row:hover .lint-line button { visibility: visible; }

.lint-why { margin: 4px 0 8px; padding: 6px 10px; border-left: 2px solid var(--border-strong); font: 12px/1.5 var(--sans, inherit); }
.lint-claim { color: var(--strong); }
.lint-step { color: var(--text); padding-left: 1em; }
.lint-why details { margin-top: 4px; color: var(--muted); }
.lint-why summary { cursor: pointer; font-size: 11px; }
.lint-why pre { margin: 4px 0 0; max-height: 24vh; overflow: auto; font: 11px/1.4 var(--mono); white-space: pre; }