/* Product Review Program — an operations register, so it reads like a register:
   ink on paper, ruled rows, tabular figures, and one accent used only for state. */

:root {
  --ink: #16202b;
  --ink-soft: #4d5b6b;
  --ink-faint: #8794a3;
  --paper: #f1f3f2;
  --card: #ffffff;
  --rule: #dde2e1;
  --rule-strong: #c3ccca;
  --teal: #0c5c57;
  --teal-dark: #084440;
  --teal-wash: #e4efed;
  --ok: #1e6e3c;
  --ok-wash: #e5f1e8;
  --wait: #8a5a06;
  --wait-wash: #fbf1de;
  --bad: #a3231c;
  --bad-wash: #fbe9e7;
  --radius: 3px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14.5px;
  line-height: 1.55;
}

/* ---- Shell ---- */
.shell { display: flex; min-height: 100vh; }

.rail {
  width: 236px;
  flex: 0 0 236px;
  background: var(--ink);
  color: #cfd8de;
  padding: 18px 0 32px;
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  overflow-y: auto;
}
.rail .brand { padding: 0 20px 18px; border-bottom: 1px solid #26313d; }
.rail .brand strong { display: block; color: #fff; font-size: 15px; letter-spacing: .01em; }
.rail .brand span { display: block; color: #7f8f9d; font-size: 11.5px; margin-top: 2px; }
.rail nav { padding-top: 14px; }
.rail .group {
  padding: 16px 20px 6px;
  font-size: 11px;
  color: #6d7d8c;
  letter-spacing: .06em;
}
.rail a {
  display: block;
  padding: 7px 20px;
  color: #cfd8de;
  text-decoration: none;
  border-left: 3px solid transparent;
}
.rail a:hover { background: #1e2a36; color: #fff; }
.rail a.on { background: #1e2a36; color: #fff; border-left-color: #3fa39a; }
.rail .foot { padding: 18px 20px 0; margin-top: 18px; border-top: 1px solid #26313d; font-size: 12px; color: #7f8f9d; }
.rail .foot a { display: inline; padding: 0; color: #9fb0bd; text-decoration: underline; border: 0; }

.main { flex: 1 1 auto; min-width: 0; padding: 22px 28px 60px; }

.head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.head h1 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.head .lede { color: var(--ink-soft); margin: 4px 0 0; max-width: 68ch; }
.head .spacer { flex: 1 1 auto; }
.head .actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---- Cards and tables ---- */
.card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  margin-bottom: 18px;
}
.card > h2 {
  margin: 0;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
  background: #fafbfb;
  display: flex;
  align-items: center;
  gap: 10px;
}
.card > h2 .note { font-weight: 400; color: var(--ink-faint); font-size: 12px; }
.card > h2 .spacer { flex: 1 1 auto; }
.card .body { padding: 14px 16px; }
.card .body > :last-child { margin-bottom: 0; }

table.reg { width: 100%; border-collapse: collapse; }
table.reg th, table.reg td { padding: 8px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
table.reg th {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: .03em;
  background: #fafbfb;
  border-bottom: 1px solid var(--rule-strong);
  white-space: nowrap;
}
table.reg tbody tr:hover { background: #fbfcfc; }
table.reg td.num, table.reg th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.reg .sub { color: var(--ink-faint); font-size: 12px; }
.money { font-variant-numeric: tabular-nums; }

.grid-view table { width: 100%; border-collapse: collapse; }
.grid-view th, .grid-view td { padding: 8px 16px; text-align: left; border-bottom: 1px solid var(--rule); vertical-align: top; }
.grid-view th { font-size: 11.5px; color: var(--ink-soft); background: #fafbfb; border-bottom: 1px solid var(--rule-strong); }
.grid-view th a { color: var(--ink-soft); text-decoration: none; }
.grid-view tbody tr:hover { background: #fbfcfc; }
.grid-view .sub { color: var(--ink-faint); font-size: 12px; }
.grid-view .summary { padding: 10px 16px; color: var(--ink-faint); font-size: 12.5px; }
.grid-view .empty { padding: 20px 16px; color: var(--ink-faint); }
.pagination { display: flex; gap: 4px; list-style: none; padding: 12px 16px; margin: 0; }
.pagination a { padding: 3px 9px; border: 1px solid var(--rule); border-radius: var(--radius); text-decoration: none; color: var(--ink-soft); }
.pagination .active a { background: var(--ink); color: #fff; border-color: var(--ink); }
.pagination .disabled a { color: var(--ink-faint); }

/* ---- State pills ---- */
.pill {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid transparent;
}
.pill-ok { background: var(--ok-wash); color: var(--ok); border-color: #c4dfcd; }
.pill-wait { background: var(--wait-wash); color: var(--wait); border-color: #ebd9b4; }
.pill-bad { background: var(--bad-wash); color: var(--bad); border-color: #efc8c4; }

/* ---- Stage rail: the eight stages really are a sequence, so number them ---- */
.stages { display: grid; gap: 0; }
.stage {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 14px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.stage:last-child { border-bottom: 0; }
.stage .step {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 600;
  background: #eef1f0; color: var(--ink-soft);
  border: 1px solid var(--rule-strong);
}
.stage.done .step { background: var(--teal); color: #fff; border-color: var(--teal-dark); }
.stage.now .step { background: #fff; color: var(--teal); border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-wash); }
.stage.late .step { background: var(--bad-wash); color: var(--bad); border-color: #efc8c4; }
.stage h3 { margin: 0 0 2px; font-size: 14.5px; font-weight: 600; }
.stage .meta { color: var(--ink-faint); font-size: 12.5px; }
.stage .artefact { color: var(--ink-soft); font-size: 13px; margin-top: 3px; }
.stage .right { text-align: right; font-size: 12.5px; color: var(--ink-faint); white-space: nowrap; }

.checks { list-style: none; margin: 8px 0 0; padding: 0; font-size: 13px; }
.checks li { padding: 3px 0 3px 22px; position: relative; color: var(--ink-soft); }
.checks li:before { position: absolute; left: 0; font-weight: 700; }
.checks li.yes:before { content: "✓"; color: var(--ok); }
.checks li.no:before { content: "✗"; color: var(--bad); }
.checks li .detail { color: var(--ink-faint); }

/* ---- Figures ---- */
.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--rule); }
.figure { background: #fff; padding: 13px 16px; }
.figure .v { font-size: 21px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.figure .k { font-size: 12px; color: var(--ink-faint); }
.figure.warn .v { color: var(--bad); }
.figure.good .v { color: var(--ok); }

/* ---- Forms ---- */
fieldset.section { border: 0; padding: 0; margin: 0 0 6px; }
fieldset.section > legend {
  font-size: 12px; font-weight: 600; color: var(--ink-soft);
  padding: 10px 16px; margin: 0; width: 100%;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  background: #fafbfb;
}
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 22px; padding: 14px 16px; }
.fields .wide { grid-column: 1 / -1; }
.form-group { margin-bottom: 14px; }
label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); margin-bottom: 3px; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], select, textarea {
  width: 100%;
  padding: 6px 9px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  font: inherit;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--teal); outline-offset: -1px; border-color: var(--teal); }
textarea { min-height: 74px; }
.hint { color: var(--ink-faint); font-size: 12px; margin-top: 2px; }
.help-block { color: var(--bad); font-size: 12.5px; margin-top: 2px; }
.has-error input, .has-error select, .has-error textarea { border-color: var(--bad); }
.check { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 12px; }
.check input { margin-top: 3px; }
.check label { font-weight: 500; color: var(--ink); margin: 0; }
.form-actions { padding: 14px 16px; border-top: 1px solid var(--rule); background: #fafbfb; display: flex; gap: 8px; align-items: center; }

/* ---- Buttons and links ---- */
.btn {
  display: inline-block;
  padding: 6px 13px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { background: #f4f6f6; color: var(--ink); }
.btn-primary { background: var(--teal); border-color: var(--teal-dark); color: #fff; }
.btn-primary:hover { background: var(--teal-dark); color: #fff; }
.btn-danger { background: #fff; border-color: #dcb5b1; color: var(--bad); }
.btn-danger:hover { background: var(--bad-wash); color: var(--bad); }
.btn-sm { padding: 3px 9px; font-size: 12.5px; }
.btn[disabled], .btn.off { opacity: .5; pointer-events: none; }
a { color: var(--teal); }
a:hover { color: var(--teal-dark); }

/* ---- Notices ---- */
.notice { padding: 10px 14px; border-radius: var(--radius); margin-bottom: 14px; border: 1px solid; font-size: 13.5px; }
.notice-success { background: var(--ok-wash); border-color: #c4dfcd; color: #16532e; }
.notice-error { background: var(--bad-wash); border-color: #efc8c4; color: #7f1c16; }
.notice-info { background: var(--teal-wash); border-color: #bfd8d5; color: var(--teal-dark); }
.notice ul { margin: 6px 0 0; padding-left: 18px; }

.clause {
  border-left: 3px solid var(--rule-strong);
  padding: 2px 0 2px 12px;
  color: var(--ink-soft);
  font-size: 13px;
  margin: 10px 0;
}
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; align-items: start; }
.split > .card { margin-bottom: 0; }
dl.kv { display: grid; grid-template-columns: minmax(160px, 34%) 1fr; margin: 0; }
dl.kv dt, dl.kv dd { padding: 7px 0; border-bottom: 1px solid var(--rule); margin: 0; }
dl.kv dt { color: var(--ink-soft); font-size: 13px; padding-right: 14px; }
dl.kv dd { font-variant-numeric: tabular-nums; }
.empty-state { padding: 22px 16px; color: var(--ink-faint); }

/* ---- Sign-in ---- */
.signin { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.signin .box { width: 100%; max-width: 380px; }
.signin .brand { margin-bottom: 18px; }
.signin .brand strong { font-size: 19px; display: block; }
.signin .brand span { color: var(--ink-faint); font-size: 13px; }
.signin .card { margin: 0; }
.signin .seed { margin-top: 14px; font-size: 12.5px; color: var(--ink-faint); }

@media (max-width: 860px) {
  .shell { flex-direction: column; }
  .rail { width: 100%; flex: none; height: auto; position: static; }
  .main { padding: 18px 16px 48px; }
  dl.kv { grid-template-columns: 1fr; }
  dl.kv dt { border-bottom: 0; padding-bottom: 0; }
}
@media print {
  .rail, .head .actions, .form-actions { display: none; }
  body { background: #fff; }
  .card { break-inside: avoid; }
}