/* ─────────────────────────────────────────────────────────────────────────
   Veridoc — a registry, not a chat app. Every fact here traces back to an
   addressable artifact (an evidence id, a document version, a section), so
   every identifier in the UI is set apart from prose as a small bordered
   "exhibit tag" (see .id-tag), and every citation is a little ledger tab
   (see .citation-chip) stitched to the evidence card it points at — the one
   idea the whole visual system serves. Headings use a restrained serif for
   ledger/registry gravitas; everything else uses the system sans stack;
   identifiers use monospace. The page carries a faint ruled-paper texture
   (see body background) rather than a flat fill, and surfaces sit a hair
   off the page via soft shadows instead of borders alone. Brass is the
   one warm accent, reserved for seals, active marks, and citation tabs, so
   it keeps meaning instead of becoming wallpaper. No web fonts, no build
   step — this is a static bundle served offline by Nginx. Respects
   prefers-color-scheme (a night-ledger palette) and prefers-reduced-motion.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --ink: #171b16;
  --paper: #eff1ec;
  --surface: #ffffff;
  --surface-alt: #e9ebe4;
  --rule: #d6d9cf;
  --rule-strong: #c3c7ba;
  --text-dim: #5c6058;
  --rule-line: rgba(23, 27, 22, 0.035);

  --accent: #1f5d4c;
  --accent-dark: #163f34;
  --accent-text: #163f34;
  --accent-soft: #e2ede8;

  --brass: #9c7a2e;
  --brass-dark: #7a5f22;
  --brass-soft: #f2e9d3;

  --ok: #1f5d4c;
  --ok-bg: #e2ede8;
  --warn: #8a6414;
  --warn-bg: #f2e9d3;
  --danger: #8a2e22;
  --danger-bg: #f4e1dd;
  --muted: #5c6058;
  --muted-bg: #e5e7e0;
  --restricted: #5a3f7a;
  --restricted-bg: #eae3f2;

  --radius: 3px;
  --radius-lg: 6px;

  --shadow-sm: 0 1px 2px rgba(23, 27, 22, 0.07), 0 1px 1px rgba(23, 27, 22, 0.04);
  --shadow-md: 0 6px 16px rgba(23, 27, 22, 0.09), 0 2px 5px rgba(23, 27, 22, 0.06);
  --shadow-lg: 0 16px 40px rgba(23, 27, 22, 0.16), 0 4px 12px rgba(23, 27, 22, 0.08);

  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e6e9e0;
    --paper: #12150f;
    --surface: #1a1e15;
    --surface-alt: #20241a;
    --rule: #333926;
    --rule-strong: #444b31;
    --text-dim: #9aa08d;
    --rule-line: rgba(255, 255, 255, 0.035);

    --accent: #4fae8b;
    --accent-dark: #1c6b53;
    --accent-text: #7fd1b2;
    --accent-soft: #1c3229;

    --brass: #cda758;
    --brass-dark: #9c7a2e;
    --brass-soft: #362c17;

    --ok: #4fae8b;
    --ok-bg: #1c3229;
    --warn: #d3a94e;
    --warn-bg: #362c17;
    --danger: #dd8a76;
    --danger-bg: #38211b;
    --muted: #9aa08d;
    --muted-bg: #232819;
    --restricted: #b79bda;
    --restricted-bg: #291f36;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 1px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.4), 0 2px 5px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.55), 0 6px 16px rgba(0, 0, 0, 0.35);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--ink);
  font: 14px/1.6 var(--font-body);
  background-color: var(--paper);
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 27px,
    var(--rule-line) 27px,
    var(--rule-line) 28px
  );
}

button, input, textarea, select {
  font: inherit;
  color: inherit;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; }

a { color: var(--accent-text); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
}

/* ── The signature: every identifier is an exhibit tag ─────────────────── */

.id-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 1px 6px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--surface);
  color: var(--accent-text);
  position: relative;
}
.id-tag::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 5px;
  height: 5px;
  border-top: 1px solid var(--accent);
  border-left: 1px solid var(--accent);
}

/* ── Layout ─────────────────────────────────────────────────────────── */

.app-shell {
  display: flex;
  min-height: 100vh;
}

.app-sidebar {
  width: 216px;
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--rule);
  box-shadow: var(--shadow-sm);
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 26px;
  position: relative;
  z-index: 2;
}

.brand { display: flex; flex-direction: column; gap: 4px; }
.brand-mark {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--accent-text);
  border-bottom: 2px solid var(--brass);
  padding-bottom: 5px;
  display: inline-block;
  letter-spacing: -0.01em;
}
.brand-tag { font-size: 11px; color: var(--text-dim); letter-spacing: 0.02em; }

.app-nav { display: flex; flex-direction: column; gap: 2px; }
.nav-link {
  padding: 8px 10px 8px 14px;
  border-radius: var(--radius);
  color: var(--text-dim);
  text-decoration: none;
  font-weight: 600;
  font-size: 13.5px;
  position: relative;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.nav-link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 0;
  border-radius: 2px;
  background: var(--brass);
  transition: height 0.15s ease;
}
.nav-link:hover { background: var(--surface-alt); color: var(--ink); }
.nav-link.active { background: var(--accent); color: #fff; }
.nav-link.active::before { height: 60%; }

.app-body { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.app-topbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 12px 24px;
  border-bottom: 1px solid var(--rule);
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 1;
}

.topbar-right { display: flex; align-items: center; gap: 20px; }

.app-main { flex: 1; padding: 34px 34px 60px; max-width: 980px; width: 100%; margin: 0 auto; }

.view h1 { margin: 0 0 6px; font-size: 25px; }
.view-intro { color: var(--text-dim); margin: 0 0 24px; max-width: 68ch; }
.view-header-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.section-heading {
  margin: 32px 0 14px;
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--text-dim);
  font-style: italic;
  border-top: 1px solid var(--rule);
  padding-top: 14px;
  position: relative;
}
.section-heading::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 34px;
  height: 1px;
  background: var(--brass);
}

@media (max-width: 880px) {
  .app-shell { flex-direction: column; }
  .app-sidebar {
    width: 100%;
    flex-direction: row;
    align-items: center;
    padding: 12px 16px;
    gap: 18px;
    overflow-x: auto;
    box-shadow: none;
    border-right: none;
    border-bottom: 1px solid var(--rule);
  }
  .app-nav { flex-direction: row; }
  .nav-link::before { left: 50%; top: auto; bottom: 0; transform: translateX(-50%); width: 0; height: 3px; }
  .nav-link.active::before { width: 60%; height: 3px; }
  .app-main { padding: 20px 18px 44px; }
  .app-topbar { padding: 10px 16px; flex-wrap: wrap; gap: 10px; }
  .topbar-right { flex-wrap: wrap; gap: 12px; }
}

/* ── Topbar widgets ─────────────────────────────────────────────────── */

.health-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  cursor: help;
  box-shadow: 0 0 0 3px transparent;
  transition: box-shadow 0.2s ease, background-color 0.2s ease;
}
.health-ok { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg); }
.health-degraded { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-bg); }
.health-down { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-bg); }
.health-unknown { background: var(--muted); box-shadow: 0 0 0 3px var(--muted-bg); }

.tenant-switcher { display: flex; align-items: center; gap: 8px; }
.tenant-switcher label { font-size: 12px; color: var(--text-dim); }
.tenant-select { padding: 5px 8px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); }

.user-badge { display: flex; align-items: center; gap: 10px; }
.user-name { font-weight: 700; }

.link-button {
  background: none;
  border: none;
  color: var(--accent-text);
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

/* ── Forms & buttons ────────────────────────────────────────────────── */

.primary-button, .secondary-button, .danger-button {
  padding: 8px 16px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  font-weight: 700;
  font-size: 13.5px;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}
.primary-button:active, .secondary-button:active, .danger-button:active { transform: translateY(1px); }
.primary-button { background: var(--accent); color: #fff; }
.primary-button:hover { background: var(--accent-dark); }
.primary-button:disabled { background: var(--muted); cursor: not-allowed; transform: none; }
.secondary-button { background: var(--surface); border-color: var(--rule); color: var(--ink); }
.secondary-button:hover { background: var(--surface-alt); }
.secondary-button:disabled { color: var(--muted); cursor: not-allowed; transform: none; }
.danger-button { background: var(--danger-bg); color: var(--danger); }
.danger-button:hover { filter: brightness(0.93); }

.question-input, .search-input, .token-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  resize: vertical;
  transition: border-color 0.15s ease;
}
.question-input:focus, .search-input:focus, .token-input:focus { border-color: var(--accent); }

.question-bar { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 16px; }
.question-bar .question-input, .question-bar .search-input { flex: 1; }

.form-stack { display: flex; flex-direction: column; gap: 12px; max-width: 640px; }
.form-hint { color: var(--text-dim); font-size: 12.5px; margin: 0; }
.form-error { color: var(--danger); background: var(--danger-bg); padding: 10px 12px; border-radius: var(--radius); }
.loading { color: var(--text-dim); }
.empty-state { color: var(--text-dim); font-style: italic; }

/* ── Login ──────────────────────────────────────────────────────────── */

.login-screen {
  display: flex;
  min-height: 100vh;
  background: var(--paper);
}

.login-showcase {
  flex: 1 1 46%;
  background: var(--accent-dark);
  color: #eef4f0;
  padding: 56px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
  position: relative;
  overflow: hidden;
}
.login-showcase::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 27px,
    rgba(255, 255, 255, 0.035) 27px,
    rgba(255, 255, 255, 0.035) 28px
  );
  pointer-events: none;
}
.login-showcase-mark {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.01em;
  border-bottom: 2px solid var(--brass);
  padding-bottom: 8px;
  display: inline-block;
  width: fit-content;
}
.login-showcase-lede {
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.5;
  max-width: 40ch;
  color: #dce8e1;
  margin: 0;
}
.login-exhibit {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  max-width: 420px;
  font-size: 13px;
  color: #cfe0d7;
}
.login-exhibit-line { margin: 0 0 8px; }
.login-exhibit-line:last-child { margin-bottom: 0; }
.login-exhibit .citation-chip { border-color: var(--brass); background: rgba(205, 167, 88, 0.16); color: #f2e2b8; }
.login-exhibit .id-tag { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.2); color: #cfe0d7; }
.login-exhibit .id-tag::before { border-color: var(--brass); }

.login-form-pane {
  flex: 1 1 54%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.login-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 36px;
  max-width: 460px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.login-card h1 {
  margin: 0;
  font-size: 24px;
  color: var(--accent-text);
  border-bottom: 2px solid var(--accent);
  padding-bottom: 6px;
  display: inline-block;
  width: fit-content;
}
.login-subtitle { margin: 0; color: var(--text-dim); font-style: italic; }
.login-help { font-size: 13px; color: var(--text-dim); }

@media (max-width: 860px) {
  .login-screen { flex-direction: column; }
  .login-showcase { padding: 40px 28px; }
}

/* ── Status badges ──────────────────────────────────────────────────── */

.status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.status-ok { background: var(--ok-bg); color: var(--ok); }
.status-warn { background: var(--warn-bg); color: var(--warn); }
.status-danger { background: var(--danger-bg); color: var(--danger); }
.status-muted { background: var(--muted-bg); color: var(--muted); }
.status-restricted { background: var(--restricted-bg); color: var(--restricted); }

/* A restrained ink-stamp treatment, reserved for the single largest status
   readout on a proposal (the one place this UI spends a visual flourish). */
.status-stamp {
  padding: 6px 16px;
  font-size: 13px;
  border: 2px solid currentColor;
  border-radius: 2px;
  transform: rotate(-1.5deg);
  box-shadow: inset 0 0 0 2px var(--surface);
}

/* ── Answer / citations ─────────────────────────────────────────────── */

.ask-answer-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.answer-body { display: flex; flex-direction: column; gap: 8px; }
.answer-line { margin: 0; }

/* A citation reads as a small ledger tab stitched onto the sentence — the
   notch at its foot is the thread that ties it back to its evidence card. */
.citation-chip {
  display: inline-flex;
  align-items: center;
  margin: 0 2px;
  padding: 1px 7px 3px;
  border-radius: 2px 2px 0 0;
  border: 1px solid var(--brass);
  border-bottom: none;
  background: var(--brass-soft);
  color: var(--brass-dark);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  position: relative;
  transition: transform 0.1s ease;
}
.citation-chip::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid var(--brass);
}
.citation-chip:hover { transform: translateY(-1px); }
.citation-chip.citation-missing { border-color: var(--danger); background: var(--danger-bg); color: var(--danger); }
.citation-chip.citation-missing::after { border-top-color: var(--danger); }

/* ── Evidence cards ─────────────────────────────────────────────────── */

.evidence-list { display: flex; flex-direction: column; gap: 14px; }
.evidence-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 16px;
  transition: box-shadow 0.3s, border-color 0.3s;
}
.evidence-card.evidence-highlight { border-color: var(--brass); box-shadow: 0 0 0 3px var(--brass-soft); }
.evidence-card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.evidence-id-badge {
  font-family: var(--font-mono);
  background: var(--accent);
  color: #fff;
  border-radius: 2px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
}
.evidence-title { font-weight: 700; }
.evidence-meta { color: var(--text-dim); font-size: 12px; margin-bottom: 8px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.evidence-content {
  margin: 0 0 10px;
  padding: 10px 14px;
  background: var(--surface-alt);
  border-left: 3px solid var(--accent);
  white-space: pre-wrap;
  font-family: var(--font-display);
}
.evidence-scores { display: flex; gap: 8px; flex-wrap: wrap; }
.score-tag {
  font-size: 11px;
  color: var(--text-dim);
  background: var(--muted-bg);
  padding: 2px 8px;
  border-radius: 999px;
}
.acl-tag { color: var(--restricted); background: var(--restricted-bg); }

/* ── Tables ─────────────────────────────────────────────────────────── */

.data-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.data-table th, .data-table td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--rule); }
.data-table th { background: var(--surface-alt); color: var(--text-dim); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.03em; }
.data-table tbody tr:last-child td { border-bottom: none; }
.clickable-row { cursor: pointer; transition: background-color 0.12s ease; }
.clickable-row:hover { background: var(--surface-alt); }

.table-scroll { overflow-x: auto; }

.pager { display: flex; gap: 8px; margin-top: 14px; }

/* ── Document detail ────────────────────────────────────────────────── */

.doc-meta-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 24px; margin-bottom: 8px; }
.meta-row { display: flex; flex-direction: column; gap: 3px; }
.meta-label { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.03em; }
.meta-value { font-weight: 600; }

.section-tree { display: flex; flex-direction: column; gap: 6px; }
.section-node { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 6px 12px; }
.section-node summary { cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-weight: 700; }
.section-body { padding: 10px 2px 6px; white-space: pre-wrap; color: var(--ink); font-family: var(--font-display); }

/* ── Diff ───────────────────────────────────────────────────────────── */

.diff-view {
  background: #12160f;
  color: #d6d9cf;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 14px 16px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.6;
}
.diff-add { background: rgba(50, 130, 90, 0.28); color: #a6e2c2; }
.diff-del { background: rgba(180, 80, 60, 0.28); color: #f2b5a8; }
.diff-hunk { color: #c7a95a; }
.diff-meta { color: #8b8f82; }
.diff-ctx { color: #b7bfab; }

.op-tag { background: var(--muted-bg); padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; }

/* ── Manual proposal builder ────────────────────────────────────────── */

.operation-rows { display: flex; flex-direction: column; gap: 12px; }
.operation-row {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px 14px;
  align-items: end;
  position: relative;
}
.op-field { display: flex; flex-direction: column; gap: 4px; }
.op-field label { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.03em; }
.op-select { padding: 8px 10px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); }
.op-remove { justify-self: start; }

/* ── Proposals & tabs ───────────────────────────────────────────────── */

.tab-bar { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--rule); }
.tab { background: none; border: none; padding: 9px 14px; cursor: pointer; color: var(--text-dim); font-weight: 700; border-bottom: 2px solid transparent; font-size: 13.5px; transition: color 0.15s ease, border-color 0.15s ease; }
.tab:hover { color: var(--ink); }
.tab.active { color: var(--accent-text); border-bottom-color: var(--brass); }

.action-bar { display: flex; gap: 10px; margin: 16px 0; }

/* ── Identity view ──────────────────────────────────────────────────── */

.identity-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.identity-card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.identity-card h3 { margin: 0; font-size: 14px; }
.identity-hint { font-size: 12px; color: var(--text-dim); margin: 0; }

.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { background: var(--muted-bg); color: var(--ink); padding: 4px 10px; border-radius: 999px; font-size: 12.5px; }
.chip-button { border: none; cursor: pointer; }
.chip-active { background: var(--accent); color: #fff; }