/* Differential Factor — print-quality research desk.
   Eight tokens, three families, no radius/shadow/gradient. Shared by the
   static surfaces (feedback, management portal); the React app in
   competition-for-capital carries the same system in its GlobalStyles. */

:root {
  --df-ox: #8C2B49;
  --df-ink: #141414;
  --df-paper: #F7F5F0;
  --df-panel: #ECE7DE;
  --df-hairline: #DAD5CB;
  --df-lead: #2C2A2F;
  --df-body: #464349;
  --df-meta: #65616B;

  --df-ease: 160ms cubic-bezier(0.22, 1, 0.36, 1);

  --font-head: "Archivo", system-ui, sans-serif;
  --font-read: "Spectral", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--df-paper);
  color: var(--df-body);
  font-family: var(--font-read);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.6;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}

/* Focus is never removed — 2px oxblood, 2px offset, on everything. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--df-ox);
  outline-offset: 2px;
}

/* ---- header / footer lockups ------------------------------------------- */

.df-nav {
  border-bottom: 1px solid var(--df-ink);
  background: var(--df-paper);
}
.df-nav-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 24px 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.df-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
}
.df-logo-mark { width: 34px; height: 34px; display: block; }
.df-wordmark {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: -0.02em;
  color: var(--df-ink);
}
.df-navlinks {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 17px;
}
.df-navlinks a {
  color: var(--df-ink);
  text-decoration: none;
  transition: color var(--df-ease);
}
.df-navlinks a:hover { color: var(--df-ox); }

.df-footer {
  background: var(--df-ink);
  color: var(--df-paper);
  margin-top: 96px;
}
.df-footer-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 40px 80px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.df-footer .df-wordmark { color: var(--df-paper); }
.df-footer-note {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: rgba(247, 245, 240, 0.62);
}

/* ---- page frame -------------------------------------------------------- */

.df-wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 72px 80px 0;
}
.df-narrow { max-width: 700px; }

.df-eyebrow {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--df-ox);
}
.df-eyebrow--muted { color: var(--df-meta); }

.df-rule-top {
  width: 56px;
  height: 1px;
  background: var(--df-ox);
  border: 0;
  margin: 0 0 20px;
}

h1.df-h1 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 56px;
  line-height: 1.05;
  letter-spacing: -0.042em;
  color: var(--df-ink);
  text-wrap: balance;
  margin: 12px 0 0;
}
h2.df-h2 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--df-ink);
  text-wrap: balance;
  margin: 0;
}
h3.df-h3 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 25px;
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: var(--df-ink);
  text-wrap: balance;
  margin: 0;
}

.df-lead {
  font-family: var(--font-read);
  font-weight: 300;
  font-size: 26px;
  line-height: 1.5;
  color: var(--df-lead);
  max-width: 840px;
  margin: 24px 0 0;
}
.df-meta {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.8;
  letter-spacing: 0.08em;
  color: var(--df-meta);
}

.df-section {
  padding-top: 48px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.df-divider {
  height: 1px;
  background: var(--df-ink);
  border: 0;
  margin: 48px 0 0;
}

/* The only card in the system: panel ground, 8px oxblood left edge. */
.df-panel {
  background: var(--df-panel);
  border-left: 8px solid var(--df-ox);
  padding: 26px 30px;
}
.df-panel--plain { border-left: 0; padding: 26px 30px; }
.df-panel--ink { border-left-color: var(--df-ink); }

/* Queue item: a panel with a title/meta/body/actions stack. */
.df-queue { display: flex; flex-direction: column; gap: 16px; }
.df-item-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 21px;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--df-ink);
}
.df-item-body {
  font-size: 17px;
  line-height: 1.6;
  color: var(--df-body);
  white-space: pre-wrap;
  max-width: 700px;
}
.df-flag {
  display: inline-block;
  margin-left: 10px;
  padding: 3px 8px;
  background: var(--df-ox);
  color: var(--df-paper);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  vertical-align: middle;
}
.df-controls { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.df-empty {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--df-meta);
}

/* Tool card — panel ground, 8px oxblood edge, mono "Open tool ↗". */
.df-tools { display: flex; flex-direction: column; gap: 18px; }
.df-tool {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--df-panel);
  border-left: 8px solid var(--df-ox);
  padding: 26px 30px;
  text-decoration: none;
  color: inherit;
}
.df-tool-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 25px;
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: var(--df-ink);
  transition: color var(--df-ease);
}
.df-tool:hover .df-tool-title { color: var(--df-ox); }
.df-tool-dek { font-size: 18px; line-height: 1.55; color: var(--df-body); max-width: 700px; }
.df-tool-open {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--df-ox);
}

/* ---- forms ------------------------------------------------------------- */

.df-label {
  display: block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--df-ink);
  margin: 0 0 8px;
}
.df-label .df-hint {
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: none;
  color: var(--df-meta);
}

.df-field { display: flex; flex-direction: column; }
.df-form { display: flex; flex-direction: column; gap: 26px; }

.df-input,
.df-select,
.df-textarea {
  width: 100%;
  padding: 14px 16px;
  background: var(--df-paper);
  border: 1px solid var(--df-ink);
  border-radius: 0;
  color: var(--df-ink);
  font-family: var(--font-read);
  font-size: 19px;
  line-height: 1.5;
  transition: border-color var(--df-ease);
}
.df-input::placeholder,
.df-textarea::placeholder {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--df-meta);
}
.df-textarea { min-height: 180px; resize: vertical; }
.df-select {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.04em;
  appearance: none;
  background-image: none;
}

/* Buttons: square, mono caps. Ink → oxblood on hover, and the reverse. */
.df-btn {
  display: inline-block;
  width: 100%;
  padding: 14px 20px;
  border: 0;
  border-radius: 0;
  background: var(--df-ink);
  color: var(--df-paper);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--df-ease), color var(--df-ease);
}
.df-btn:hover { background: var(--df-ox); }
.df-btn:disabled { opacity: 0.5; cursor: default; }
.df-btn:disabled:hover { background: var(--df-ink); }

.df-btn--ox { background: var(--df-ox); }
.df-btn--ox:hover { background: var(--df-ink); }
.df-btn--inline { width: auto; padding: 10px 17px; }

/* Ghost button for secondary row actions (reject, back). */
.df-btn--ghost {
  background: transparent;
  color: var(--df-ink);
  border: 1px solid var(--df-ink);
}
.df-btn--ghost:hover { background: var(--df-ink); color: var(--df-paper); }

/* ---- messages ---------------------------------------------------------- */

.df-msg {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  padding: 14px 16px;
}
.df-msg:empty { display: none; }
.df-msg--error { border-left: 4px solid var(--df-ox); background: var(--df-panel); color: var(--df-ink); }
.df-msg--success { border-left: 4px solid var(--df-ink); background: var(--df-panel); color: var(--df-ink); }

.df-footnote {
  font-family: var(--font-read);
  font-size: 17px;
  line-height: 1.6;
  color: var(--df-meta);
  max-width: 700px;
}

/* ---- lists / tables ---------------------------------------------------- */

.df-list { display: flex; flex-direction: column; }
.df-row {
  display: grid;
  grid-template-columns: 128px 1fr;
  gap: 32px;
  padding: 30px 0;
  border-bottom: 1px solid var(--df-hairline);
}
.df-row:first-child { border-top: 1px solid var(--df-hairline); }

/* Wide content scrolls inside its own container — the page never does. */
.df-tablewrap { overflow-x: auto; }
/* min-width so a many-column table scrolls in its container instead of
   squeezing its headers into each other. */
.df-table { width: 100%; min-width: 880px; border-collapse: collapse; }
.df-table th {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--df-meta);
  text-align: left;
  padding: 0 20px 12px 0;
  border-bottom: 1px solid var(--df-ink);
  white-space: nowrap;
}
.df-table td {
  padding: 18px 20px 18px 0;
  border-bottom: 1px solid var(--df-hairline);
  font-size: 17px;
  vertical-align: middle;
}
.df-table td.df-num,
.df-table th.df-num {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.04em;
  text-align: right;
  padding-right: 0;
}

.df-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--df-ox);
}
.df-tag--muted { color: var(--df-meta); }

/* Body links are ink with an oxblood hover — never oxblood by default. */
.df-link {
  color: var(--df-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--df-ease);
}
.df-link:hover { color: var(--df-ox); }

/* ---- responsive -------------------------------------------------------- */

@media (max-width: 900px) {
  .df-nav-inner, .df-footer-inner { padding-left: 32px; padding-right: 32px; }
  .df-wrap { padding: 48px 32px 0; }
  h1.df-h1 { font-size: 40px; }
  .df-lead { font-size: 21px; }
  .df-row { grid-template-columns: 1fr; gap: 10px; }
  .df-footer-note { margin-left: 0; }
  .df-footer-inner { flex-wrap: wrap; }
}