/* The Drawer. back-room-itb.css
 *
 * The two Is this a business? modules.
 *
 * The metrics module and the arc runner share these class names, so one
 * set of rules covers both. The arc runner has to stay readable on a
 * phone while a run walks past.
 *
 * Tokens only, same as every other Back Room sheet.
 */

/* ── Headings and notes ─────────────────────────────────────────────────── */

.br-h3 {
  margin: 0 0 var(--s2);
  font-family: var(--font-display);
  font-size: var(--t-lead);
  font-weight: 700;
  font-style: var(--display-style);
  color: var(--ink);
}

.br-h4 {
  margin: var(--s3) 0 var(--s1);
  font-size: var(--t-micro);
  text-transform: var(--label-case);
  letter-spacing: var(--label-track);
  font-weight: var(--label-weight);
  color: var(--ink-faint);
}

.br-note {
  margin: 0 0 var(--s2);
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--ink-soft);
}

/* ── Stat rows ──────────────────────────────────────────────────────────── */

.br-stat-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s1) var(--s2);
  padding: 8px 0;
  border-bottom: var(--border-w) dotted var(--line);
}
.br-stat-row:last-child { border-bottom: 0; }

.br-stat-label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--t-small);
  color: var(--ink-soft);
}

.br-stat-value {
  font-size: var(--t-body);
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.br-stat-note {
  flex: 1 0 100%;
  font-size: var(--t-micro);
  color: var(--ink-faint);
}

.br-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.br-nowrap { white-space: nowrap; }

.br-spark {
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--ink);
}

/* ── Controls ───────────────────────────────────────────────────────────── */

.br-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  margin: 0 0 var(--s2);
}

.br-btn,
.br-input {
  min-height: var(--tap);
  padding: 10px 16px;
  font-family: var(--font-body);
  font-size: var(--t-small);
  color: var(--ink);
  background: var(--panel-raised);
  border: var(--border-w) solid var(--line-strong);
  border-radius: var(--radius);
}

.br-btn {
  cursor: pointer;
  font-weight: 600;
  box-shadow: var(--shadow);
}
.br-btn:active { transform: var(--press); box-shadow: none; }
.br-btn:disabled {
  cursor: default;
  color: var(--ink-faint);
  background: var(--ground-sunk);
  box-shadow: none;
  transform: none;
}
.br-btn:focus-visible,
.br-input:focus-visible { outline: var(--border-w-heavy) solid var(--focus); outline-offset: 2px; }

/* ── The transcript ─────────────────────────────────────────────────────── */

/*
 * A run prints hundreds of lines and is read on a phone. It scrolls in its
 * own box in both directions rather than stretching the page sideways, and
 * it keeps its own line breaks, because the alignment in the summary rows
 * is the whole point of them.
 */
.br-pre {
  margin: 0;
  max-height: 60vh;
  overflow: auto;
  padding: var(--s2);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.45;
  white-space: pre;
  tab-size: 2;
  color: var(--ink);
  background: var(--panel);
  border: var(--border-w) solid var(--line-strong);
  border-radius: var(--radius-lg);
  -webkit-overflow-scrolling: touch;
  /* Selectable by hand when the clipboard is not available. */
  -webkit-user-select: text;
  user-select: text;
}