/* Test with sample records: on its own page as figures, a list and a zone per direction; in a compact side panel while
   an integration is set up. Also the AI agent's test of what it can read. */

.sync-test-spin { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; color: var(--brand-text); animation: sync-test-spin 1s linear infinite; }
.sync-test-spin svg { width: 20px; height: 20px; }
@keyframes sync-test-spin { to { transform: rotate(360deg); } }

/* ---------- The test page ---------- */
.in-legs { --rl-cols: minmax(0, 1fr) minmax(0, 1fr) repeat(5, 92px); --rl-cols-md: minmax(0, 1fr) 92px 92px; }
.in-legs .rl-num.right, .in-panel-list .rl-num.right { font-size: var(--fs-m); font-weight: 600; color: var(--ink); }
.rl-num.in-n.ok { color: var(--ok); }
.rl-num.in-n.warn { color: var(--warn); }
.rl-num.in-n.bad { color: var(--bad); }

/* Why records were left out: one line per reason, toned by what it means. */
.in-reasons { display: grid; border-top: 1px solid var(--line-soft); }
.in-reasons:empty { display: none; }
.in-reason {
  --edge: transparent;
  position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; align-items: baseline;
  padding-top: 11px; padding-bottom: 11px; padding-left: var(--zl, var(--pad-x)); padding-right: var(--zr, var(--pad-x));
  border-bottom: 1px solid var(--line-soft); font-size: var(--fs-s); color: var(--ink-2);
}
.in-reason::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--edge); }
.in-reason b { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.in-reason[data-tone="bad"] { --edge: var(--bad); background: color-mix(in srgb, var(--bad) 5%, var(--bad-base)); }
.in-reason[data-tone="bad"] b { color: var(--bad); }
.in-reason[data-tone="warn"] { --edge: var(--warn); background: color-mix(in srgb, var(--warn) 6%, var(--panel)); }
.in-reason[data-tone="warn"] b { color: var(--warn); }

/* Example records that open. */
.in-subh {
  margin: 0; padding: 16px var(--zr, var(--pad-x)) 6px var(--zl, var(--pad-x));
  font-size: var(--fs-2xs); font-weight: 600; letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--ink-4);
}
.in-sample { border-top: 1px solid var(--line-soft); }
.in-sample summary {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; list-style: none; cursor: pointer;
  padding: 12px var(--zr, var(--pad-x)) 12px var(--zl, var(--pad-x)); font-size: var(--fs-s); font-weight: 600; color: var(--ink);
}
.in-sample summary::-webkit-details-marker { display: none; }
.in-sample summary:hover { background: var(--panel-2); }
.in-sample-t { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.in-sample-t svg { width: 15px; height: 15px; color: var(--ink-4); transition: transform .15s ease; }
.in-sample[open] .in-sample-t svg { transform: rotate(90deg); }
.in-sample .kv { padding: 2px var(--zr, var(--pad-x)) 16px calc(var(--zl, var(--pad-x)) + 23px); }
.in-none { margin: 0; padding: 8px var(--zr, var(--pad-x)) 20px var(--zl, var(--pad-x)); font-size: var(--fs-s); color: var(--ink-4); }

/* ---------- The side panel while setting up: one surface inside the panel too ---------- */
.in-testpanel { --pad-x: 20px; }
.in-testpanel .sidepanel-body { gap: 0; padding: 0; background: var(--panel); }
.in-panel-ic { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: var(--r-l); background: var(--paper); color: var(--accent-teal); }
.in-panel-ic svg { width: 19px; height: 19px; }
.in-wait { display: flex; align-items: flex-start; gap: 12px; padding: 22px var(--pad-x); }
.in-wait b { font-size: var(--fs-m); }
.in-wait p { margin: 2px 0 0; font-size: var(--fs-s); color: var(--ink-4); }
.in-panel-list { --rl-cols: minmax(0, 1fr) 64px 92px; }
.in-panel-list .rl-row { min-height: 52px; }