/*
 * control/dashboard: the dashboard's own layer over renox-ui.css (loaded
 * first; packages/ui/README.md). Only what no other app needs: log lines.
 * Logical properties only, for the Arabic pages (#336).
 */

/* Log lines: monospace, one ledger row each, the level as a short label. */
.logs { font-family: var(--rx-font-mono); font-size: .8125rem; }
.logs td { padding-block: .35rem; }
.logs td.when { white-space: nowrap; color: var(--rx-muted); }
.logs td.msg { word-break: break-word; font-family: var(--rx-font-sans); font-size: .875rem; }
.logs .level { font-weight: 600; font-size: .75rem; color: var(--rx-muted); }
/* The row's class names the level; only the label takes the colour. */
.logs tr.warn, .logs tr.error { color: inherit; }
.logs tr.warn .level { color: var(--rx-warn); }
.logs tr.error .level { color: var(--rx-bad); }
.logs tr.error { background: color-mix(in srgb, var(--rx-bad-bg) 60%, transparent); }
/* A stack frame inside a log line, not the page frame. */
.logs small.frame { display: block; max-inline-size: none; }

/* The overview's short list of recent lines. */
ul.logs { list-style: none; padding: 0; }
ul.logs li { display: flex; gap: var(--rx-3); padding: .4rem 0; border-block-end: 1px solid var(--rx-rule); word-break: break-word; }
ul.logs li > .muted:first-child { flex: none; }
ul.logs .level { flex: none; min-inline-size: 3rem; }

/* Stack frames of a browser error group. */
.frames { padding-inline-start: var(--rx-5); font-family: var(--rx-font-mono); font-size: .8125rem; }
.frames li { padding-block: .15rem; }

/* Below 40rem a log line is a small block: time and level, the message, then
   the request id with its source (app-screens rule: fields move, none dropped). */
@media (max-width: 40rem) {
  table.logs, table.logs tbody { display: block; }
  table.logs tr { display: grid; grid-template-columns: auto 1fr; gap: .15rem var(--rx-3); padding-block: var(--rx-2); border-block-end: 1px solid var(--rx-rule); }
  table.logs td { display: block; padding: 0; border: 0; }
  /* The message right under its time; the id and source after it. */
  table.logs td.msg { grid-column: 1 / -1; order: 1; }
  table.logs td:nth-child(3), table.logs td:nth-child(4) { order: 2; grid-column: 1 / -1; font-size: .75rem; color: var(--rx-muted); word-break: break-all; }
}

/* Overview: the finding under the title, then the live version as the screen's largest block
   (taste-skill app-screens 2.2: the screen's question answered first, its one finding read first). */
.finding { margin-block: 0 var(--rx-4); color: var(--rx-ink-2); }
.finding::before { content: ""; display: inline-block; inline-size: .6rem; block-size: .6rem; margin-inline-end: var(--rx-2); border-radius: var(--rx-r-cell); background: var(--rx-accent); vertical-align: .05em; }
.finding.bad { color: var(--rx-bad); }
.finding.bad::before { background: var(--rx-bad); }
.finding a { color: inherit; font-weight: 600; }
.live-panel { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--rx-5); padding: var(--rx-5); margin-block-end: var(--rx-5); background: var(--rx-surface); border: 1px solid var(--rx-rule); border-radius: var(--rx-r-panel); }
.live-cell { inline-size: 3.5rem; block-size: 3.5rem; border-radius: var(--rx-r-control); background: var(--rx-accent); }
.live-main > * { margin: 0; }
.live-label { font-size: .8125rem; color: var(--rx-muted); }
.live-hash { margin-block: .1rem var(--rx-2); }
.live-hash code { padding: 0; background: none; font-size: 1.75rem; font-weight: 600; letter-spacing: -.01em; color: var(--rx-ink); }
.live-main .meta { margin: 0; font-size: .875rem; }
@media (max-width: 40rem) {
  .live-panel { grid-template-columns: auto 1fr; }
  .live-cell { inline-size: 2.5rem; block-size: 2.5rem; }
  .live-act { grid-column: 1 / -1; }
}