/* TriRepo live tools: Crash (stack trace → source) and Bump (dependency radar).
 * Uses the tokens in site.css. */

.live-tool:empty { display: none; }
.live-tool { margin-bottom: 8px; }

.lt-intro { margin: -6px 0 16px; color: var(--muted); font-size: 14px; }
.lt-muted { color: var(--faint); }
.lt-note { margin-top: 10px; color: var(--faint); font-size: 12px; }

.lt-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.lt-row label { min-width: 36px; color: var(--muted); font-size: 13px; font-weight: 600; }

.lt-input, .lt-textarea {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 11px;
  color: var(--text);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.lt-input { flex: 1; min-width: 0; height: 40px; padding: 0 12px; font-size: 14px; }
.lt-textarea {
  width: 100%;
  min-height: 150px;
  padding: 12px 14px;
  resize: vertical;
  overflow: auto;
  background: var(--surface-3);
  font: 12.5px/1.55 var(--font);
  white-space: pre;
}
.lt-input:focus, .lt-textarea:focus { border-color: var(--green-600); box-shadow: 0 0 0 4px var(--green-100); }
.lt-input::placeholder, .lt-textarea::placeholder { color: var(--faint); }

.lt-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 12px 0 18px; }
.lt-status { color: var(--muted); font-size: 13px; }
.lt-status.error { color: var(--red-700); }
.lt-status.ok { color: var(--green-700); font-weight: 500; }
.lt-status code, .lt-card code, .lt-table code {
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--code-inline);
  font-size: 12.5px;
}

.btn.lt-mini { height: 30px; padding: 0 11px; border-radius: 8px; font-size: 12.5px; }

.lt-card {
  margin: 14px 0;
  padding: 16px 18px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.lt-card h4 {
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.lt-card h4 a { color: var(--green-700); font-family: var(--font); letter-spacing: 0; text-transform: none; }
.lt-card p { margin: 0; }
.lt-card a { color: var(--green-700); text-decoration: none; }
.lt-card a:hover { text-decoration: underline; }
.lt-error { color: var(--red-700); font: 500 13px var(--font); word-break: break-word; }
.lt-hint { background: var(--amber-50); border-color: var(--amber-border); border-left: 3px solid var(--amber-600); }
.lt-hint p { color: var(--text); }

.lt-tag {
  padding: 1px 7px;
  border-radius: 5px;
  background: var(--amber-50);
  border: 1px solid var(--amber-border);
  color: var(--amber-700);
  font: 700 10px var(--font);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* Code excerpts with line numbers (dark, like the report code blocks) */
.lt-code {
  margin-top: 8px;
  padding: 6px 0;
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid var(--code-border);
  background: var(--code-bg);
  font: 12.5px/1.65 var(--font);
}
.lt-code .ln { display: flex; min-width: max-content; white-space: pre; }
.lt-code .ln .no {
  flex: 0 0 54px;
  padding-right: 14px;
  color: #6f8b7c;
  text-align: right;
  text-decoration: none;
  user-select: none;
}
.lt-code .ln .no:hover { color: var(--green-400); }
.lt-code .ln .src { padding-right: 18px; color: var(--code-text); }
.lt-code .ln.hit { background: rgba(248, 113, 113, 0.2); }
.lt-code .ln.hit .no { color: #fca5a5; font-weight: 700; }
.lt-code .ln.near { background: rgba(251, 191, 36, 0.16); }
.lt-code .ln.near .no { color: #fcd34d; }

/* Tables */
.lt-table-wrap { overflow-x: auto; }
.lt-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface);
  font-size: 13.5px;
}
.lt-table th {
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}
.lt-table td { padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.lt-table tr:last-child td { border-bottom: 0; }
.lt-table tr.lt-dim td { color: var(--faint); }
.lt-table tr.lt-dim td a { color: var(--muted); }
.lt-table tr.lt-origin td { background: var(--red-50); }
.lt-table a { color: var(--green-700); text-decoration: none; word-break: break-all; }
.lt-table a:hover { text-decoration: underline; }

.lt-kind { font: 600 11.5px var(--font); white-space: nowrap; }
.lt-kind-app { color: var(--text); }
.lt-kind-dependency, .lt-kind-runtime { color: var(--faint); }

/* Version gap pills */
.gap {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font: 700 11px var(--font);
  white-space: nowrap;
}
.gap-major { background: var(--red-50); color: var(--red-700); }
.gap-minor { background: var(--amber-50); color: var(--amber-700); }
.gap-patch { background: var(--slate-50); color: var(--slate-600); }
.gap-current { background: var(--green-50); color: var(--green-700); }
.gap-unknown, .gap-na { background: var(--surface); border: 1px solid var(--border); color: var(--faint); }

.lt-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 12px; font-size: 14px; }
.lt-summary > span:first-child { margin-right: 6px; }

.lt-hit-file { margin: 16px 0 4px; font: 12.5px var(--font); }
.lt-hit-file a { color: var(--green-700); font-weight: 600; }

.lt-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 40px 0 22px;
  color: var(--faint);
  font-size: 12.5px;
  text-align: center;
}
.lt-divider::before, .lt-divider::after { content: ''; flex: 1; border-top: 1px dashed var(--border-strong); }

/* Long identifiers in the report prose wrap instead of widening the page. */
.md-body code, .live-results code { overflow-wrap: anywhere; }

@media (max-width: 640px) {
  .lt-row { flex-wrap: wrap; }
  .lt-row label { min-width: 0; }
}