:root {
  --bg: #ffffff;
  --fg: #1d2733;
  --muted: #5b6672;
  --accent: #d5e8f0;
  --border: #c9d3dc;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--fg);
  background: var(--bg);
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: var(--accent);
  border-bottom: 1px solid var(--border);
}

.brand { font-weight: 700; }
.env { font-size: 0.875rem; color: var(--muted); }
.content { max-width: 72rem; margin: 0 auto; padding: 1.5rem 1rem; }
.muted { color: var(--muted); }

.footer {
  padding: 1rem;
  font-size: 0.875rem;
  color: var(--muted);
  border-top: 1px solid var(--border);
  text-align: center;
}

a { color: #1f5f86; }
.brand { color: var(--fg); text-decoration: none; }
.usernav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; font-size: 0.9375rem; }
.who { color: var(--muted); }
.inline { display: inline; margin: 0; }

h1 { font-size: 1.5rem; margin: 0 0 1rem; }
h2 { font-size: 1.125rem; margin: 1.5rem 0 0.5rem; }
h3 { font-size: 1rem; margin: 0 0 0.5rem; }

.card {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1rem;
  background: var(--bg);
}
.narrow { max-width: 26rem; margin: 2rem auto; }
.pagehead { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }

.field { margin-bottom: 0.875rem; }
.field label, .field legend { display: block; font-weight: 600; margin-bottom: 0.25rem; }
fieldset { border: 0; padding: 0; margin: 0; }
input[type="text"], input[type="password"], input[type="email"], select {
  width: 100%;
  min-height: 44px; /* touch target on production tablets (GEN-002) */
  padding: 0.5rem 0.625rem;
  font: inherit;
  border: 1px solid var(--border);
  border-radius: 4px;
}
small { display: block; margin-top: 0.25rem; }

button, .button {
  display: inline-block;
  min-height: 44px;
  padding: 0.5rem 1rem;
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: #1f5f86;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
}
button.link { min-height: 0; padding: 0; color: #1f5f86; background: none; font-weight: 400; text-decoration: underline; }
button.danger { background: #a3262a; }

.errors, .error { color: #a3262a; }
.notice { padding: 0.5rem 0.75rem; background: #fff6d6; border: 1px solid #e8d48a; border-radius: 4px; }
.messages { list-style: none; padding: 0; margin: 0 0 1rem; }
.messages li { padding: 0.5rem 0.75rem; border-radius: 4px; margin-bottom: 0.5rem; background: var(--accent); }
.messages .msg-error { background: #fbe3e3; }

.tablewrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 0.5rem; border-bottom: 1px solid var(--border); vertical-align: top; }
th { background: #f2f2f2; }

.facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 1rem; }
.facts dt { font-weight: 600; }
.facts dd { margin: 0; }
.actions { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.secret { font-size: 1.125rem; letter-spacing: 0.1em; word-break: break-all; }
code { word-break: break-all; }

.filters { display: flex; align-items: center; gap: 0.5rem; margin: 0.5rem 0 1rem; }
.filters select { width: auto; }
.status { display: inline-block; padding: 0.125rem 0.5rem; border-radius: 999px; font-size: 0.8125rem; background: #eee; }
.status-effective { background: #dff3e4; }
.status-draft { background: #fff6d6; }
.status-archived, .status-cancelled { background: #ececec; color: var(--muted); }
.sign { margin-top: 1.5rem; border-color: #1f5f86; }
.small { font-size: 0.875rem; }
input[type="date"], input[type="file"] { min-height: 44px; font: inherit; }

.inlineform { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; margin: 0.5rem 0 1rem; }
.inlineform > div { flex: 1 1 10rem; margin: 0; }
.step { margin-bottom: 1rem; }
.step h4 { margin: 0.75rem 0 0.25rem; font-size: 0.9375rem; }
.withdraw { display: inline-block; font-size: 0.875rem; }
.withdraw form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 0.25rem; }
.withdraw input[type="text"] { width: 14rem; min-height: 36px; }

.subnav { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; font-size: 0.9375rem; }
.status-lot-quarantine { background: #fff6d6; }
.status-lot-released, .status-lot-conditional { background: #dff3e4; }
.status-lot-blocked, .status-lot-expired { background: #fbe3e3; }
.status-lot-consumed, .status-lot-disposed { background: #ececec; color: var(--muted); }

.badge { display: inline-block; min-width: 1.25rem; padding: 0 0.35rem; border-radius: 0.65rem; background: #c62828; color: #fff; font-size: 0.75rem; text-align: center; }
.sev-critical { color: #b71c1c; font-weight: 600; }
.sev-major { color: #8a5a00; font-weight: 600; }
.unread { font-weight: 600; }

.tree, .tree ul { list-style: none; padding-left: 1.25rem; border-left: 1px solid #ccc; }
.tree li { margin: 0.25rem 0; }
.checklist { list-style: none; padding-left: 0; }
.dhr table { margin-bottom: 0.75rem; }