/* Devaland Deal OS — institutional theme (navy/brass), light + dark. */

:root {
  --bg: #f7f6f3;
  --surface: #ffffff;
  --text: #1a2332;
  /* #6b7280 was only ~4.48:1 on --bg (failed WCAG AA for small print, e.g. the
     login footer links). #5e6675 is ~5.4:1 and still reads as muted vs --text. */
  --muted: #5e6675;
  --border: #e2e0da;
  --navy: #1a2332;
  --brass: #b08d57;
  /* #8f7041 was only ~4.26:1 as TEXT on --bg cream (failed WCAG AA, e.g. the
     /pricing comparison-table headers + money-back line). #876534 is ~4.9:1 and
     still reads as brass; as a button BG with #fff it improves to ~5.3:1. */
  --brass-dark: #876534;
  --danger: #b03030;
  --ok: #2e7d4f;
}
[data-theme="dark"] {
  --bg: #14181f;
  --surface: #1d232d;
  --text: #e8e6e1;
  --muted: #9aa1ab;
  --border: #2c333e;
  --navy: #e8e6e1;
  /* On the dark bg the original brass reads fine as text (~4.9:1) AND as a
     button bg with white (~4.6:1); keep it so darkening light mode doesn't
     regress dark mode. */
  --brass-dark: #8f7041;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.5;
}

nav {
  display: flex;
  align-items: center;
  /* Wrap at all widths: the admin nav has ~16 links, which otherwise overflow
     horizontally on desktop and push Log out off the right edge. */
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 12px 24px;
  background: var(--surface);
  border-bottom: 2px solid var(--brass);
}
nav .brand { font-size: 18px; letter-spacing: 0.02em; }
nav .brand strong { color: var(--brass-dark); }
nav a { color: var(--text); text-decoration: none; font-size: 14px; }
nav a:hover, nav a[aria-current="page"] { color: var(--brass-dark); }
nav .spacer { flex: 1; }
.theme-toggle { background: none; border: none; cursor: pointer; font-size: 16px; color: var(--muted); }

main { max-width: 1180px; margin: 0 auto; padding: 28px 24px; }

h1, h2, h3 { font-weight: 600; color: var(--navy); }
h1 { font-size: 26px; margin: 0 0 18px; }

.flash {
  background: var(--surface);
  border-left: 4px solid var(--brass);
  padding: 10px 16px;
  margin-bottom: 18px;
}

.kpi-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 16px 22px;
  min-width: 160px;
}
.kpi-value { font-size: 28px; font-weight: 700; color: var(--brass-dark); }
.kpi-label { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.kpi-hint { font-size: 12px; color: var(--muted); margin-top: 4px; }

table { width: 100%; border-collapse: collapse; background: var(--surface); }
th, td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--border); font-size: 14px; }
th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }

/* Key/value "prose" tables (label cell + long explanatory cell), e.g. the
   pricing page's "How AI usage works" and FAQ. The label reads as a sub-heading
   (not the tiny uppercase grid header), and on phones each row stacks: label on
   its own line, answer beneath it — full width, wrapping normally. */
.kv-table { background: transparent; }
.kv-table th, .kv-table td {
  vertical-align: top;
  padding: 14px 16px 14px 0;
  font-size: 15px;
  line-height: 1.55;
  border-bottom: 1px solid var(--border);
}
.kv-table th {
  width: 230px;
  font-size: 15px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text);
}
.kv-table td { color: var(--text); }
@media (max-width: 640px) {
  .kv-table, .kv-table tbody, .kv-table tr, .kv-table th, .kv-table td { display: block; width: 100%; }
  .kv-table tr { padding: 4px 0; border-bottom: 1px solid var(--border); }
  .kv-table th { padding: 14px 0 4px; border-bottom: none; color: var(--brass-dark); }
  .kv-table td { padding: 0 0 14px; border-bottom: none; }
}

.badge {
  display: inline-block;
  padding: 2px 10px;
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: 3px;
  text-transform: capitalize;
}

.btn {
  display: inline-block;
  background: var(--navy);
  color: var(--bg);
  border: none;
  padding: 8px 18px;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
}
[data-theme="dark"] .btn { background: var(--brass); color: #14181f; }
.btn:hover { background: var(--brass-dark); color: #fff; }

form label { display: block; font-size: 13px; color: var(--muted); margin: 12px 0 4px; }
input, select, textarea {
  width: 100%;
  max-width: 480px;
  padding: 8px 10px;
  /* 16px: anything smaller makes iOS Safari zoom on focus. */
  font-size: 16px;
  font-family: inherit;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
}

.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--muted);
  background: var(--surface);
  border: 1px dashed var(--border);
}

.muted { color: var(--muted); }

.filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.filters select, .filters input { width: auto; min-width: 160px; }

.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
@media (max-width: 900px) { .detail-grid { grid-template-columns: 1fr; } }

.status-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }

.timeline { list-style: none; padding: 0; margin: 12px 0 0; }
.timeline li {
  background: var(--surface);
  border-left: 3px solid var(--brass);
  padding: 8px 14px;
  margin-bottom: 8px;
  font-size: 14px;
}
.timeline .note-body { white-space: pre-wrap; margin-top: 4px; }

code { font-size: 13px; background: var(--bg); padding: 1px 6px; border: 1px solid var(--border); }

/* Long quotes, filenames, and citations must not overflow on phones. */
pre, blockquote, .note-body, .timeline li { overflow-wrap: break-word; word-break: break-word; }

.kanban { display: flex; gap: 12px; align-items: flex-start; overflow-x: auto; }
.kanban-col {
  flex: 1;
  min-width: 170px;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 10px 12px;
}
.kanban-col h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 10px; }
.kanban-card {
  border: 1px solid var(--border);
  border-left: 3px solid var(--brass);
  padding: 8px 10px;
  margin-bottom: 8px;
  font-size: 14px;
  background: var(--bg);
}
.card-moves { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px; }
.card-moves button {
  font-size: 11px;
  padding: 2px 7px;
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
}
.card-moves button:hover { color: var(--brass-dark); border-color: var(--brass); }

.impersonation-banner {
  background: var(--brass);
  color: #14181f;
  padding: 8px 24px;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Reusable scroll container for wide tables (admin grids, data rooms). */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --- Mobile (phones / narrow tablets) ----------------------------------- */
@media (max-width: 640px) {
  /* Nav wraps instead of overflowing; the spacer collapses so links flow. */
  nav { flex-wrap: wrap; gap: 10px 14px; padding: 10px 16px; }
  nav .spacer { flex-basis: 100%; height: 0; }
  nav .brand { font-size: 16px; }

  main { padding: 18px 16px; }
  h1 { font-size: 22px; }

  /* Any data table becomes horizontally scrollable instead of forcing the
     whole page to scroll sideways. Targets every table under <main> — including
     ones nested in wrappers (e.g. the HTMX-polled #documents-table) that a
     `main > table` selector would miss — but excludes .kv-table, which has its
     own label-over-value stacking for prose key/value tables. */
  main table:not(.kv-table) {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  /* Comfortable tap targets (Apple/Google guidance ~44px). */
  .btn { padding: 11px 18px; min-height: 44px; }
  .card-moves button, .status-actions .btn { min-height: 36px; }

  /* Filters and inline forms stack full-width and stop overflowing. */
  .filters { flex-direction: column; align-items: stretch; }
  .filters select, .filters input { width: 100%; min-width: 0; }

  .kpi { flex: 1 1 100%; }
}

/* Drag-and-drop upload zone (progressive enhancement over a multi-file input). */
.dropzone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  border: 1.5px dashed #b9c2cf;
  border-radius: 8px;
  background: #fafbfc;
  cursor: pointer;
  color: #5a6573;
  font-size: 13px;
  transition: border-color .15s, background .15s;
}
.dropzone:hover { border-color: #8a97a8; }
.dropzone.dragover { border-color: #1a73e8; background: #eef4ff; color: #1a73e8; }
.dropzone input[type=file] { max-width: 220px; }

/* Diligence "what to upload next" checklist. */
.checklist { margin: 4px 0 14px; }
.checklist-items { list-style: none; padding: 0; margin: 0; }
.checklist-items li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 0;
  font-size: 14px;
}
.checklist-items .check { width: 1.1em; flex: none; text-align: center; }
.checklist-items li.done .check { color: #1a7f37; }
.checklist-items li.pending .check { color: #9a6700; }
.checklist-items li.todo { color: #57606a; }
.checklist-items li.todo .check { color: #b9c2cf; }
.checklist-desc { font-size: 12px; }

/* Diligence coverage bar (compare view). */
.coverage-bar {
  display: inline-block;
  width: 70px;
  height: 7px;
  border-radius: 4px;
  background: #e6e9ee;
  overflow: hidden;
  vertical-align: middle;
  margin-right: 6px;
}
.coverage-bar > span {
  display: block;
  height: 100%;
  background: #1a73e8;
}

/* Team notes (comments) on a deal. */
.comments { list-style: none; padding: 0; margin: 0 0 14px; max-width: 620px; }
.comments li {
  padding: 10px 12px;
  border: 1px solid var(--border, #e6e9ee);
  border-radius: 8px;
  margin-bottom: 8px;
  background: var(--surface, #fff);
}
.comment-meta { font-size: 12px; margin-bottom: 4px; }
.comment-body { white-space: pre-wrap; font-size: 14px; }
.comment-form textarea { display: block; margin-bottom: 8px; }

/* Financial highlights spotted in spreadsheets. */
.fin-list { list-style: none; padding: 0; margin: 0; max-width: 720px; }
.fin-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  border-bottom: 1px solid var(--border, #e6e9ee);
  font-size: 13px;
}
.fin-list .fin-line { font-variant-numeric: tabular-nums; }
.fin-list .fin-src { font-size: 11px; white-space: nowrap; }

/* Print-to-PDF brief export (no server-side PDF engine needed). */
.print-header { display: none; }
@media print {
  .no-print, nav, .support-widget { display: none !important; }
  .print-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 2px solid #1a73e8;
    padding-bottom: 8px;
    margin-bottom: 18px;
  }
  .print-header .ph-title { font-size: 18px; font-weight: 700; }
  .print-header .ph-meta { font-size: 11px; color: #57606a; }
  /* citations: open details print cleanly, drop the disclosure marker */
  summary { list-style: none; cursor: default; }
  summary::-webkit-details-marker { display: none; }
  a { color: inherit; text-decoration: none; }
  details, blockquote, .timeline { break-inside: avoid; }
  @page { margin: 18mm 14mm; }
}

/* markdown headings shifted up one level (md(2)) keep the size they had as h3/h4/h5 (13.10.2026) */
.md-h3{font-size:1.17em;margin:1em 0}
.md-h4{font-size:1em;margin:1.33em 0}
.md-h5{font-size:.83em;margin:1.67em 0}