/* FD Bench base page rules, layered on the Press tokens (press.css).
   Pages use the full browser width, with --pad-x as the side gutter. */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh;
  background: var(--paper);
  color: var(--text-strong);
  font-family: var(--font);
}
.page { padding: 48px var(--pad-x); }
.page > * { margin: 0; }
.page > * + * { margin-top: 24px; }
.measure { max-width: 60ch; }

/* Phase 1b pages: sign-in, dashboard, workspace, settings, admin. The component library
   replaces these rules in phase 1e. Pages use the full width; only forms are held narrow,
   because a text field wider than about 60ch is harder to read, not easier. */
.bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: baseline;
  justify-content: space-between;
  padding: 16px var(--pad-x);
  border-bottom: 1px solid var(--ink);
}
.bar a { color: inherit; }
.bar form { display: inline; }
.stack > * + * { margin-top: 16px; }
.card {
  max-width: 520px;
  padding: 24px;
  background: var(--surface-card);
  border: 1px solid var(--ink);
}
.field { display: block; margin-top: 16px; }
.field-label {
  display: block;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-label);
}
.input {
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  font: inherit;
  color: var(--text-strong);
  background: var(--surface-input);
  border: 1px solid var(--ink);
}
.btn {
  margin-top: 20px;
  padding: 10px 18px;
  font: inherit;
  font-weight: 700;
  color: var(--accent-on);
  background: var(--accent);
  border: 1px solid var(--ink);
  cursor: pointer;
}
.btn--quiet { color: var(--text-strong); background: transparent; }
.notice {
  margin-top: 16px;
  padding: 10px 12px;
  color: var(--accent-deep);
  border: 1px solid var(--accent-deep);
}
.muted { color: var(--text-muted); }
/* A table's columns (an ID, several names) can't all shrink to fit 360px; the row scrolls
   instead of forcing the whole page wider or wrapping the id awkwardly mid-character. */
.table-wrap { width: 100%; overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; }
.table th,
.table td {
  padding: 8px 12px 8px 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--hairline);
}
.code { font-size: 28px; letter-spacing: .18em; font-weight: 700; }
@media (max-width: 600px) {
  .card { padding: 16px; }
}