/* ---- pages/debug_tables.py ---- */

/* Fixed layout with one shared column set, so every route table lines up and
   nothing forces the page to scroll sideways. */
.aucra-debug-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 12px;
}
.aucra-debug-table th {
  text-align: left;
  font-weight: 600;
  opacity: 0.65;
}
.aucra-debug-table th,
.aucra-debug-table td {
  border-bottom: 1px solid var(--line);
  padding: 4px 8px;
  vertical-align: top;
}
.aucra-debug-mono {
  font-family: "IBM Plex Mono", Consolas, monospace;
}
.aucra-debug-clip {
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aucra-debug-value {
  word-break: break-word;
  overflow-wrap: anywhere;
}
.aucra-debug-broken {
  color: var(--warn);
  font-weight: 600;
}
.aucra-debug-json {
  max-height: 22rem;
  overflow: auto;
  min-width: 0;
  max-width: 100%;
}
.aucra-debug-json pre,
.aucra-debug-json code {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.aucra-debug-json,
.aucra-debug-json pre,
.aucra-debug-json code,
.aucra-debug-json span {
  font-family: "IBM Plex Mono", Consolas, monospace !important;
  font-size: 12px !important;
  color: var(--text) !important;
}
.aucra-debug-json .nt,
.aucra-debug-json .na {
  color: var(--ink) !important;
}
.aucra-debug-json .s,
.aucra-debug-json .s1,
.aucra-debug-json .s2 {
  color: var(--gold-deep) !important;
}
.aucra-debug-json .m,
.aucra-debug-json .mi,
.aucra-debug-json .mf {
  color: var(--pass) !important;
}
.aucra-debug-json .k,
.aucra-debug-json .kc {
  color: var(--warn) !important;
}
.aucra-debug-json .p,
.aucra-debug-json .w {
  color: var(--muted) !important;
}
/* inset, so the marker stays inside the panel's 10px radius */
.aucra-debug-alert {
  box-shadow: inset 3px 0 0 var(--warn);
}
.aucra-debug-live {
  opacity: 0.75;
}
.aucra-debug-open {
  text-decoration: none;
  white-space: nowrap;
  color: var(--gold-deep);
}
.aucra-debug-open:hover {
  text-decoration: underline;
}
/* The outcome of the last Call, above the table it was called from. */
.aucra-debug-outcome {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--mist);
}
/* A row with a Call button has to be as tall as one without, or the table
   stripes by callability: the button fits the row, and the cell drops its own
   text strut. */
.aucra-debug-table .q-btn.aucra-debug-call {
  min-height: 18px;
  padding: 0 6px;
  line-height: 18px;
  vertical-align: top;
}
.aucra-debug-table td.aucra-debug-call-cell {
  line-height: 0;
}

/* ---- pages/debug_suggestions.py: the Suggestions tab (assistant D10) ---- */

/* The Debug artboard's own tables: a head band on the head wash, a rule above
   every row, the first cell in the text ink and the rest muted. Both tables and
   the log band are pulled out to the panel's edge (p-4 is 16px), so their bands
   run the panel's full width as the drawing does. */
.aucra-debug-suggest {
  width: calc(100% + 32px);
  margin: 0 -16px;
  font-size: 12.5px;
}
.aucra-debug-suggest th {
  background: var(--wash-head);
  border-top: 1px solid var(--line);
  border-bottom: none;
  padding: 8px 10px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 1;
  /* The heading reads whole: where a column is too narrow for it at some width
     it wraps rather than ending in an ellipsis (section 13, D25). */
  white-space: normal;
}
.aucra-debug-suggest td {
  border-top: 1px solid var(--line);
  border-bottom: none;
  padding: 9px 10px;
  color: var(--muted);
  vertical-align: middle;
}
/* 18px at the two ends, so the band starts and ends where the head above it
   does, and 10px between, which is what leaves "Mean confidence" its own line
   in a panel this wide. */
.aucra-debug-suggest th:first-child,
.aucra-debug-suggest td:first-child {
  padding-left: 18px;
}
.aucra-debug-suggest th:last-child,
.aucra-debug-suggest td:last-child {
  padding-right: 18px;
}
.aucra-debug-lead {
  color: var(--text);
}
/* The two files the tables above are read from. */
.aucra-debug-logs {
  width: calc(100% + 32px);
  margin: 0 -16px;
  padding: 14px 18px;
  border-top: 1px solid var(--line);
  background: var(--wash-head);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.aucra-debug-logs .aucra-mono {
  font-size: 12px;
  color: var(--muted);
}