/* ~/lab/microprofiler: the dump viewer. Shared window, palette and controls come from ../base.css. */
.cols { margin: 16px clamp(18px, 4vw, 40px) 0; }

.verdict { margin: 0; font-size: 15px; color: var(--white); line-height: 1.55; }
.verdict b { color: var(--accent); }
.notes { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.notes li { font-size: 13px; color: var(--mist); padding: 8px 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.02); border-radius: 6px; }
.notes li::before { content: "# "; color: var(--blue); }

/* ---------- frame chart ---------- */
.stats { border-collapse: collapse; font-size: 13px; margin-bottom: 14px; }
.stats th, .stats td { padding: 4px 14px 4px 0; text-align: right; font-weight: 400; }
.stats th { color: var(--dim); }
.stats td:first-child, .stats th:first-child { text-align: left; color: var(--dim); }
.stats td { color: var(--white); font-variant-numeric: tabular-nums; }
.chart-wrap, .flame-wrap { position: relative; }
#frameChart { width: 100%; height: 170px; display: block; cursor: pointer; border-radius: 6px; }
#flame { width: 100%; display: block; cursor: crosshair; border-radius: 6px; }
.tip {
  position: absolute; z-index: 5; pointer-events: none; max-width: 340px; padding: 6px 10px; border-radius: 10px;
  font-size: 12px; color: var(--white); background: rgba(9, 18, 27, 0.96); border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); white-space: normal; overflow-wrap: anywhere;
}
.tip b { color: var(--accent); font-weight: 500; }
.legend { margin: 10px 0 0; font-size: 12px; color: var(--mist); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; }
.k-cpu { background: #0e8d96; }
.k-spike { background: #e2eef3; }
.k-gpu { background: none; border-top: 2px solid var(--blue); height: 0; width: 14px; border-radius: 0; }
.k-engine { background: #1d6f8f; }
.k-script { background: #2f8a63; }
.k-idle { background: #2b3a44; }

/* ---------- selected frame ---------- */
.thread-pick { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--dim); }
.thread-pick select { max-width: 220px; }
.frame-sum { margin: 0 0 12px; font-size: 13px; color: var(--mist); }
.frame-sum b { color: var(--white); font-weight: 500; }
.frame-sum .grew { color: var(--white); }

/* ---------- tables ---------- */
.cols { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 16px; }
.cols > .pane { margin: 0; }

.timers { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.timers li { display: grid; grid-template-columns: 6ch minmax(0, 1fr); gap: 2px 12px; }
.timers .ms { color: var(--white); text-align: right; font-variant-numeric: tabular-nums; }
.timers .t-name { color: var(--white); overflow-wrap: anywhere; }
.timers .t-name .grp { color: var(--dim); font-size: 12px; margin-left: 6px; }
.timers .bar { grid-column: 2; height: 4px; border-radius: 999px; background: rgba(52, 224, 234, 0.08); }
.timers .bar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; opacity: 0.7; }
.why { grid-column: 2; font-size: 12px; color: var(--mist); line-height: 1.5; }
.src { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 6px; font-size: 12px; font-style: normal; white-space: nowrap; border: 1px solid var(--line); }
.src.docs { color: var(--mint); border-color: rgba(134, 239, 172, 0.35); }
.src.likely { color: var(--blue); border-color: rgba(96, 165, 250, 0.3); }
.src.unsure { color: var(--dim); }

.spikes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.spikes button {
  width: 100%; text-align: left; font: inherit; font-size: 13px; color: var(--mist); cursor: pointer;
  padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.02);
  transition: border-color 0.2s;
}
.spikes button:hover, .spikes button[aria-current="true"] { border-color: var(--accent); }
.spikes b { color: var(--white); font-weight: 700; }
.spikes .grew { color: var(--white); }
.spikes .split { display: block; margin-top: 2px; font-size: 12px; color: var(--dim); }

.table-wrap { overflow-x: auto; }
.grid { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.grid th, .grid td { padding: 6px 12px; text-align: right; white-space: nowrap; border-bottom: 1px solid rgba(52, 224, 234, 0.07); }
.grid th { color: var(--dim); font-weight: 400; position: sticky; top: 0; background: #08121c; }
.grid th button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.grid th button:hover, .grid th[aria-sort] button { color: var(--accent); }
.grid td { color: var(--text); font-variant-numeric: tabular-nums; }
.grid .name, .grid th.name { text-align: left; white-space: normal; min-width: 22ch; }
.grid td.name { color: var(--white); overflow-wrap: anywhere; }
.grid td.grp { text-align: left; color: var(--dim); }
.grid tr:hover td { background: rgba(8, 145, 178, 0.06); }
.grid .zero { color: rgba(127, 154, 166, 0.6); }
.pane-foot { padding: 10px 14px; }

.caller { margin: 0 0 14px; font-size: 13px; }
.caller h3 { margin: 0 0 4px; font-size: 13px; color: var(--white); }
.caller h3 .dim { font-weight: 400; }
.caller ul { margin: 0; padding-left: 18px; color: var(--mist); }
.caller li { margin: 2px 0; overflow-wrap: anywhere; }
.caller .kids { color: var(--dim); font-size: 12px; margin-top: 4px; }


@media (max-width: 900px) {
  .cols { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .facts { grid-template-columns: 1fr; gap: 0; }
  .facts dd { margin-bottom: 6px; }
  .pane-head { flex-wrap: wrap; }
}