/* Reset and typography. */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font: 400 var(--text-base)/1.55 var(--font-sans);
  letter-spacing: .005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
#root { height: 100%; }

h1, h2, h3, h4 { margin: 0; font-weight: 400; color: var(--text-strong); }
h1 { font-size: var(--text-2xl); line-height: 1.2; letter-spacing: -.015em; }
h2 { font-size: var(--text-lg); line-height: 1.4; font-weight: 500; }
h3 { font-size: var(--text-base); font-weight: 500; }
p { margin: 0; }
b, strong { font-weight: 500; color: var(--text-strong); }

a { color: var(--text-strong); text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }

code, pre, kbd { font-family: var(--font-mono); font-size: .9em; }
code { background: var(--code-bg); border-radius: var(--radius-sm); padding: .1em .35em; color: var(--text-strong); }
pre {
  background: var(--bg-sunken);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  padding: var(--s-3) var(--s-4);
  margin: var(--s-2) 0;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: var(--text-sm);
  line-height: 1.6;
}
pre code { background: none; padding: 0; }
kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px;
  border: 1px solid var(--rule-strong); border-radius: var(--radius-sm);
  font-size: 10px; color: var(--text-faint); background: transparent; line-height: 1;
}

button, input, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
:focus-visible { outline: none; box-shadow: var(--focus); }

::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); }

* { scrollbar-width: thin; scrollbar-color: var(--rule-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--rule-strong); border: 3px solid transparent; background-clip: content-box; }

/* The structural voice: mono, small caps, tracked. */
.label {
  font-family: var(--font-mono); font-size: var(--text-label); font-weight: 400;
  text-transform: uppercase; letter-spacing: var(--label-tracking);
  color: var(--text-faint); line-height: 1.3;
}

/* Utilities, kept few. */
.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); }
.strong { color: var(--text-strong); }
.mono { font-family: var(--font-mono); font-size: .92em; }
.small { font-size: var(--text-sm); }
.num { font-variant-numeric: tabular-nums; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.row { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
.stack { display: flex; flex-direction: column; gap: var(--s-2); }
.grow { flex: 1; min-width: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Rendered Markdown from messages and reports. */
.prose { line-height: 1.65; word-break: break-word; }
.prose p { margin: 0 0 var(--s-2); }
.prose p:last-child { margin-bottom: 0; }
.prose pre { margin: var(--s-2) 0; }