/* Palette: Ink Black #0D1821, Yale Blue #344966, Powder Blue #B4CDED,
   Porcelain #F0F4EF, Dry Sage #BFCC94 (from COLOR_PALETTE.png).
   Semantic colors (done/info/warn/error) are derived from the palette where
   a natural fit exists (Dry Sage -> "done", Powder Blue -> "in progress")
   but kept distinct from the brand accent per usual practice. */
:root {
  --bg: #f0f4ef;
  --card-bg: #ffffff;
  --fg: #0d1821;
  --muted: #55677a;
  --muted-2: #8b9aa8;
  --border: #d7e1dc;

  --accent: #344966;
  --accent-strong: #24344a;
  --accent-contrast: #ffffff;

  --sage-bg: #e4ead1;
  --sage-fg: #5b6b34;
  --powder-bg: #e3edf8;
  --powder-fg: #2f5171;
  --slate-bg: #dde4ec;
  --slate-fg: #344966;

  --warn-bg: #fbefd7;
  --warn-fg: #8a5a12;
  --error-bg: #f7e0de;
  --error-fg: #9b3a2e;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d1821;
    --card-bg: #16232f;
    --fg: #f0f4ef;
    --muted: #9fb0be;
    --muted-2: #6c7e8c;
    --border: #24374b;

    --accent: #b4cded;
    --accent-strong: #d3e3f5;
    --accent-contrast: #0d1821;

    --sage-bg: #2b3323;
    --sage-fg: #c7d79e;
    --powder-bg: #1c2f42;
    --powder-fg: #bbd6f0;
    --slate-bg: #223247;
    --slate-fg: #b4cded;

    --warn-bg: #3a2e12;
    --warn-fg: #e8c77a;
    --error-bg: #3a1e1a;
    --error-fg: #e8998a;
  }
}

* { box-sizing: border-box; }

body {
  font-family: Calibri, Candara, "Segoe UI", Optima, Arial, sans-serif;
  background: var(--bg);
  color: var(--fg);
  margin: 0;
  line-height: 1.5;
}

.wrap {
  max-width: 860px;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}

h1 { font-size: 1.6rem; margin-bottom: 0.25rem; }
h2 { font-size: 1.15rem; margin-top: 0; color: var(--accent); }
.subtitle { color: var(--muted); margin-top: 0; }

.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
}

form label {
  display: block;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  color: var(--muted);
}

form input[type="text"], form input[type="email"], form input[type="file"], form select {
  display: block;
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--fg);
  background: var(--bg);
}

button {
  background: var(--accent);
  color: var(--accent-contrast);
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: 6px;
  font-size: 0.95rem;
  font-family: inherit;
  cursor: pointer;
}
button:hover { opacity: 0.9; }

.banner {
  border-radius: 8px;
  padding: 0.9rem 1.1rem;
  margin: 1rem 0;
  font-size: 0.9rem;
}
.banner-warn { background: var(--warn-bg); color: var(--warn-fg); }
.banner-error { background: var(--error-bg); color: var(--error-fg); }
.banner code { background: rgba(13, 24, 33, 0.08); padding: 0.1em 0.3em; border-radius: 4px; }

table.jobs { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
table.jobs th, table.jobs td { text-align: left; padding: 0.5rem 0.4rem; border-bottom: 1px solid var(--border); }
table.jobs a { color: var(--accent); text-decoration: none; }
table.jobs a:hover { text-decoration: underline; }

.status { font-weight: 600; font-size: 0.8rem; padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--border); }
.status-done { background: var(--sage-bg); color: var(--sage-fg); }
.status-failed { background: var(--error-bg); color: var(--error-fg); }
.status-new, .status-extracted, .status-evaluated, .status-scored { background: var(--powder-bg); color: var(--powder-fg); }

.mock-tag, .archived-tag, .step2-tag, .deleted-tag {
  font-size: 0.7rem; font-weight: 700; padding: 0.1rem 0.4rem; border-radius: 4px; margin-left: 0.3rem;
}
.mock-tag { background: var(--warn-bg); color: var(--warn-fg); }
.archived-tag { background: var(--slate-bg); color: var(--slate-fg); }
.step2-tag { background: var(--accent); color: var(--accent-contrast); }
.deleted-tag { background: var(--error-bg); color: var(--error-fg); }

.fitting { font-weight: 600; }

.actions a { color: var(--accent); text-decoration: none; font-size: 0.9rem; }
.actions a:hover { text-decoration: underline; }

.report-section {
  border-top: 1px solid var(--border);
  padding: 1.25rem 0;
}
.report-section:first-child { border-top: none; }

.summary-block {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.1rem 1.4rem;
}
.summary-block h2 { margin-top: 0; }
.summary-block ul { margin: 0; padding-left: 1.2rem; }
.summary-block li { margin-bottom: 0.4rem; font-size: 0.92rem; }

/* Section text is rendered from Markdown (see main.py's `markdown` filter)
   into real <p>/<strong>/<ul> etc, not preformatted text, so no
   white-space: pre-wrap here - the HTML elements carry their own spacing. */
.prose p { margin: 0 0 0.8em; }
.prose p:last-child { margin-bottom: 0; }
.prose ul, .prose ol { margin: 0 0 0.8em; padding-left: 1.4rem; }
.prose li { margin-bottom: 0.3em; }
.prose strong { font-weight: 700; }

table.scores, table.funding-table {
  border-collapse: collapse;
  margin-top: 0.6rem;
  font-size: 0.9rem;
}
table.scores td { padding: 0.2rem 0.8rem 0.2rem 0; }
table.funding-table { width: 100%; }
table.funding-table th, table.funding-table td {
  border: 1px solid var(--border);
  padding: 0.4rem 0.6rem;
  text-align: left;
  font-size: 0.85rem;
}

ul.refs { font-size: 0.85rem; color: var(--muted); }

.muted { color: var(--muted); }
.tag { font-size: 0.85rem; color: var(--muted); }

@media print {
  .no-print, .card, form, .actions, .topnav { display: none !important; }
  body { background: white; }
}

/* Short Summary's graphical abstract: force it onto its own printed page
   (page 1) ahead of the narrative sections that follow it. */
.graphical-abstract-page { page-break-after: always; }
.graphical-abstract-page svg { max-width: 100%; height: auto; display: block; }

/* --- Navigation --- */
.topnav {
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
}
.topnav-inner {
  max-width: 860px;
  margin: 0 auto;
  padding: 0.9rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand { font-weight: 700; color: var(--fg); text-decoration: none; font-size: 1.05rem; display: flex; align-items: center; gap: 0.6rem; }
.nav-logo { height: 26px; width: auto; }
.topnav-links { display: flex; align-items: center; gap: 1.2rem; }
.topnav-links a { color: var(--muted); text-decoration: none; font-size: 0.9rem; }
.topnav-links a:hover { color: var(--accent); }

.link-button {
  background: none; border: none; padding: 0; margin: 0;
  color: var(--accent); font-size: 0.9rem; cursor: pointer; text-decoration: none;
  font-family: inherit;
}
.link-button:hover { text-decoration: underline; opacity: 1; }
.inline-form { display: inline; }
.delete-button { color: var(--error-fg); font-size: 0.85rem; }

/* --- Landing / login --- */
.landing {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}
.landing-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 2.5rem;
  max-width: 480px;
  text-align: center;
}
.login-card { text-align: left; }
.login-card h1 { text-align: center; }

.brand-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
/* Single combined Feast Ventures / 5P Future of Health image (~16:9,
   includes location captions + taxonomy tagline). 70px/56px was too small;
   3x'd on request (the earlier "cap at button width" constraint is
   superseded here, so the max-width cap is raised to match). */
.brand-logos img { width: 210px; max-width: 210px; height: auto; }
.report-logos { justify-content: flex-start; margin-bottom: 1rem; }
.report-logos img { width: 168px; height: auto; }

.landing-card h1 { font-size: 1.4rem; margin-bottom: 0.2rem; }
.landing-card h2 { font-size: 1rem; color: var(--muted); font-weight: 500; margin-bottom: 1.2rem; }
.landing-desc { color: var(--fg); line-height: 1.6; margin-bottom: 1.5rem; }
.landing-links { margin-top: 1.2rem; font-size: 0.9rem; }
.landing-links a { color: var(--accent); }
.credit { margin-top: 0.9rem; font-size: 0.78rem; color: var(--muted); }

a.button {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-contrast);
  text-decoration: none;
  padding: 0.7rem 1.4rem;
  border-radius: 8px;
  font-weight: 600;
}
a.button:hover { opacity: 0.9; }

/* --- Dropzone --- */
.dropzone {
  border: 2px dashed var(--border);
  border-radius: 10px;
  padding: 1.5rem;
  text-align: center;
  margin-bottom: 1rem;
  color: var(--muted);
  font-size: 0.9rem;
}
.dropzone-active { border-color: var(--accent); background: var(--powder-bg); }

/* --- Upcoming expiry widget --- */
.upcoming-card { border-color: var(--warn-fg); }
.upcoming-card h2 { color: var(--warn-fg); }

/* --- Filters --- */
.filter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  align-items: flex-end;
}
.filter-form label {
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 0;
}
.filter-form input {
  display: block;
  margin-top: 0.3rem;
  padding: 0.4rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.9rem;
  font-family: inherit;
  background: var(--card-bg);
  color: var(--fg);
}
.filter-form button { padding: 0.5rem 1rem; }
.clear-link { font-size: 0.85rem; color: var(--muted); align-self: center; }

.inline-label { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--muted); }
.inline-label select { padding: 0.25rem; border-radius: 6px; border: 1px solid var(--border); font-family: inherit; background: var(--card-bg); color: var(--fg); }
.archive-form { display: inline-flex; align-items: center; gap: 0.4rem; }

.small { font-size: 0.78rem; }
.actions-card { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; font-size: 0.9rem; }
.actions-card a { color: var(--accent); text-decoration: none; }
.actions-card a:hover { text-decoration: underline; }