/* ===========================================================
   DealScreener — design system ported from EDS Capital Management.
   Editorial / financial-newspaper aesthetic.
   =========================================================== */

/* ── Tokens ─────────────────────────────────────────────────── */
:root {
  /* Surface palette */
  --paper-50:  #fcfaf2;
  --paper-100: #f8f5ec;
  --paper-200: #e2ddc9;
  --paper-300: #c8c4b5;
  --paper-400: #b0ad9a;

  /* Deep ink (text + structure) */
  --ink-950: #0d0e18;
  --ink-900: #161728;
  --ink-800: #2a2c3e;
  --ink-700: #3e4156;
  --ink-600: #585a6e;
  --ink-500: #74778a;
  --ink-400: #9c9dad;
  --ink-300: #bcbeca;
  --ink-200: #dadbe2;

  /* Navy — single accent */
  --navy-50:  #e1e7f1;
  --navy-100: #c3d0e2;
  --navy-200: #9eb2cd;
  --navy-300: #5d7ba8;
  --navy-400: #3057a0;
  --navy-500: #0f2e5c;
  --navy-600: #082145;
  --navy-700: #051630;

  /* Brass — gold highlight */
  --brass-50:  #f6ead0;
  --brass-100: #f0dba6;
  --brass-200: #ecd58a;
  --brass-300: #e7c66e;
  --brass-400: #d8b14a;
  --brass-500: #c99c2b;
  --brass-600: #8a6d22;

  /* Positive (income / gains) */
  --pos-50:  #dfeee5;
  --pos-500: #1d6b48;
  --pos-600: #13502f;

  /* Negative — navy per design, not red */
  --neg-50:  #e1e7f1;
  --neg-500: #0f2e5c;
  --neg-600: #082145;

  /* Shadows */
  --shadow-card: 0 1px 0 rgba(22,23,40,.05), 0 1px 2px rgba(22,23,40,.04);
  --shadow-page: 0 1px 0 rgba(22,23,40,.04), 0 12px 30px -16px rgba(22,23,40,.18);
  --shadow-hero: 0 12px 40px rgba(22,23,40,0.10), 0 0 0 1px rgba(22,23,40,0.05);
}

/* ── Reset + foundations ────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: "Geist", "Manrope", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  background-color: var(--paper-100);
  color: var(--ink-900);
  background-image: radial-gradient(circle at 1px 1px, rgba(22,23,40,0.045) 1px, transparent 0);
  background-size: 22px 22px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
::selection { background: var(--navy-500); color: var(--paper-50); }
a { color: var(--navy-500); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Display typography (Fraunces) ──────────────────────────── */
.font-display {
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "opsz" 96, "SOFT" 25;
}
.font-display-italic {
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-variation-settings: "opsz" 96, "SOFT" 80;
}
.font-display-tight {
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "opsz" 144, "SOFT" 25, "wght" 500;
  letter-spacing: -0.022em;
}

/* ── Number typography (Manrope, tabular) ───────────────────── */
.num, .font-num, .font-mono {
  font-family: "Manrope", system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum", "ss02", "cv11";
  letter-spacing: -0.005em;
}

/* ── Small-caps eyebrow ─────────────────────────────────────── */
.label-eyebrow {
  font-family: "Geist", "Manrope", sans-serif;
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-600);
}
.label-eyebrow.brass { color: var(--brass-500); }
.label-eyebrow.navy { color: var(--navy-500); }

/* ── Layout shell ───────────────────────────────────────────── */
.shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Masthead — double-rule editorial header */
.masthead {
  background: var(--paper-50);
  border-bottom: 1px solid var(--paper-200);
}
.masthead-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 18px 32px 16px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
  border-bottom: 3px double var(--ink-900);
}
.masthead .est {
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--navy-500);
}
.masthead .brand {
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "opsz" 144, "SOFT" 25, "wght" 500;
  letter-spacing: -0.022em;
  font-size: 36px;
  line-height: 0.92;
  color: var(--ink-900);
  text-decoration: none;
}
.masthead .brand em {
  font-style: italic;
  color: var(--navy-500);
  font-variation-settings: "opsz" 144, "SOFT" 80;
}
.masthead .who {
  font-size: 12px;
  color: var(--ink-600);
  display: flex;
  align-items: center;
  gap: 14px;
}
.masthead .who a { color: var(--ink-600); }
.masthead .who a:hover { color: var(--ink-900); }
.masthead .who form { display: inline; margin: 0; }
.masthead .who button {
  background: transparent; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--ink-600); text-decoration: underline;
}

main.page {
  flex: 1;
  max-width: 1080px;
  margin: 0 auto;
  width: 100%;
  padding: 32px;
}
@media (max-width: 768px) {
  main.page { padding: 16px 12px 64px; }
  .masthead-inner { padding: 12px 16px 10px; }
  .masthead .brand { font-size: 28px; }
  .masthead .est { font-size: 9px; letter-spacing: 0.22em; }
  .masthead .who { font-size: 11px; }
}

/* ── Section headers ────────────────────────────────────────── */
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 28px 0 14px;
  gap: 16px;
  flex-wrap: wrap;
}
.section-head .titles { display: flex; flex-direction: column; gap: 4px; }
.section-head .title {
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "opsz" 96, "SOFT" 25;
  font-size: 22px;
  line-height: 1.1;
  color: var(--ink-900);
  margin: 0;
}

/* ── Cards ──────────────────────────────────────────────────── */
.card {
  background: #ffffff;
  border: 1px solid var(--paper-200);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.card-pad { padding: 22px 24px; }
.card-header {
  padding: 16px 22px;
  border-bottom: 1px solid var(--paper-200);
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.card-header h2 {
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "opsz" 96, "SOFT" 25;
  font-size: 18px;
}

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px;
  font-family: "Geist", "Manrope", sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 4px;
  border: 1px solid var(--ink-900);
  background: #ffffff;
  color: var(--ink-900);
  transition: all 140ms ease;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}
.btn:hover { background: var(--ink-900); color: var(--paper-50); text-decoration: none; }
.btn:focus-visible { outline: 2px solid var(--navy-500); outline-offset: 2px; }
.btn-primary { background: var(--navy-500); color: #ffffff; border-color: var(--navy-500); }
.btn-primary:hover { background: var(--navy-600); border-color: var(--navy-600); color: #ffffff; }
.btn-accent { background: var(--brass-500); color: var(--ink-900); border-color: var(--brass-500); }
.btn-accent:hover { background: #b08821; border-color: #b08821; color: var(--ink-900); }
.btn-ghost { border-color: transparent; color: var(--ink-600); background: transparent; }
.btn-ghost:hover { background: rgba(22,23,40,0.06); color: var(--ink-900); }
.btn-sm { padding: 6px 12px; font-size: 10.5px; }

/* ── Form fields ────────────────────────────────────────────── */
.field-label {
  font-family: "Geist", "Manrope", sans-serif;
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-600);
  margin-bottom: 8px;
  display: block;
}
.field-input,
.field-select,
.field-textarea {
  width: 100%;
  padding: 10px 12px;
  font-family: "Geist", "Manrope", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-900);
  background: #ffffff;
  border: 1px solid var(--paper-200);
  border-radius: 9px;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.field-input:focus,
.field-select:focus,
.field-textarea:focus {
  outline: none;
  border-color: var(--navy-500);
  box-shadow: 0 0 0 3px rgba(15,46,92,0.12);
}
.field-input::placeholder, .field-textarea::placeholder { color: var(--ink-400); }
.field-textarea { resize: vertical; min-height: 140px; font-family: inherit; line-height: 1.55; }

.field-row { margin-bottom: 18px; }
.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 18px;
}
@media (max-width: 640px) { .field-grid { grid-template-columns: 1fr; gap: 14px; margin-bottom: 14px; } }
.field-help { font-size: 12px; color: var(--ink-500); margin-top: 6px; }

/* ── Mobile-specific form sizing ─────────────────────────────── */
@media (max-width: 768px) {
  .field-input, .field-select, .field-textarea {
    font-size: 16px;   /* prevents iOS auto-zoom on focus */
    padding: 12px 14px;
    border-radius: 10px;
  }
  .field-textarea { min-height: 160px; }
  .field-label { font-size: 10px; letter-spacing: 0.18em; margin-bottom: 6px; }
  .checkbox-row { padding: 14px; font-size: 14px; }
  .checkbox-row input[type="checkbox"] { width: 20px; height: 20px; }
  .btn-screen {
    width: 100%;
    padding: 16px 20px;
    font-size: 13px;
    letter-spacing: 0.12em;
    margin-top: 14px;
    border-radius: 10px;
  }
  .intro-copy { font-size: 14px; max-width: none; margin-bottom: 18px; }
  details.advanced { margin: 12px 0; }
  details.advanced > summary {
    cursor: pointer;
    padding: 10px 14px;
    background: var(--paper-50);
    border: 1px solid var(--paper-200);
    border-radius: 8px;
    font-family: "Geist", "Manrope", sans-serif;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--ink-600);
    list-style: none;
  }
  details.advanced > summary::-webkit-details-marker { display: none; }
  details.advanced > summary::before { content: "▸ "; color: var(--ink-400); }
  details.advanced[open] > summary::before { content: "▾ "; }
  .card-pad { padding: 18px 16px; }
}

/* On desktop, "Advanced" toggle just renders inline (no special summary). */
@media (min-width: 769px) {
  details.advanced > summary {
    cursor: pointer;
    font-family: "Geist", sans-serif;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--ink-600);
    padding: 4px 0;
    list-style: none;
  }
  details.advanced > summary::-webkit-details-marker { display: none; }
  details.advanced > summary::before { content: "▸ "; color: var(--ink-400); }
  details.advanced[open] > summary::before { content: "▾ "; }
}

.checkbox-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px;
  background: var(--paper-50);
  border: 1px solid var(--paper-200);
  border-radius: 9px;
  font-size: 13px;
  color: var(--ink-700);
}
.checkbox-row input[type="checkbox"] {
  margin-top: 2px;
  width: 16px; height: 16px;
  accent-color: var(--navy-500);
}

/* ── Compact header strip — verdict pill + MAO ────────────────────── */
.header-strip {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 14px 18px;
  background: #ffffff;
  border: 1px solid var(--paper-200);
  border-radius: 12px;
  margin-top: 8px;
  box-shadow: var(--shadow-card);
}
@media (max-width: 640px) {
  .header-strip { grid-template-columns: 1fr; }
  .header-strip .head-right { border-left: 0 !important; padding-left: 0 !important; border-top: 1px solid var(--paper-200); padding-top: 12px; }
}
.head-left { min-width: 0; }
.head-top {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.verdict-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  border-radius: 100px;
  font-family: "Geist", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.verdict-pill::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor;
}
.vp-go       { background: rgba(29,107,72,0.12);  color: var(--pos-500); }
.vp-nogo     { background: rgba(201,156,43,0.16); color: var(--brass-600); }
.vp-needdata { background: rgba(15,46,92,0.10);   color: var(--navy-500); }
.verdict-one-line {
  color: var(--ink-800);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
}
.head-address {
  margin-top: 6px;
  font-family: "Manrope", system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
}
.head-right {
  text-align: right;
  border-left: 1px solid var(--paper-200);
  padding-left: 18px;
  min-width: 180px;
}
.head-right .label-eyebrow { font-size: 9.5px; margin-bottom: 4px; }
.mao-display {
  font-family: "Manrope", system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum", "ss02", "cv11";
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.025em;
  font-weight: 700;
  color: var(--ink-900);
}
.mao-display.good { color: var(--pos-500); }
.mao-display.bad  { color: var(--brass-600); }
.head-right .mao-vs {
  margin-top: 6px;
  font-family: "Manrope", system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mao-arrow.good { color: var(--pos-500); }
.mao-arrow.bad  { color: var(--brass-600); }
.strong { font-weight: 700; color: var(--ink-900); }

/* ── Ledger table ───────────────────────────────────────────── */
.ledger-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  background: #ffffff;
}
.ledger-table thead th {
  font-family: "Geist", "Manrope", sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-600);
  text-align: left;
  padding: 14px 18px 10px;
  border-bottom: 1px solid var(--ink-900);
  background: transparent;
}
.ledger-table tbody td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--paper-200);
  color: var(--ink-900);
  vertical-align: middle;
}
.ledger-table tbody tr:hover td { background: var(--paper-50); }
.ledger-table tbody tr:last-child td { border-bottom: none; }
.ledger-table .num {
  text-align: right;
  font-family: "Manrope", system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum", "ss02", "cv11";
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: -0.005em;
}
.ledger-table tfoot td {
  padding: 14px 18px;
  font-weight: 700;
  color: var(--ink-900);
  border-top: 1px solid var(--ink-900);
  background: transparent;
}
.ledger-table .small-note {
  display: block;
  font-size: 11.5px;
  color: var(--ink-500);
  margin-top: 2px;
}

/* ── Pills (status / tag) ───────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: "Geist", "Manrope", sans-serif;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 100px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--navy-50);
  color: var(--navy-500);
}
.pill .pill-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.pill-pos  { background: var(--pos-50);   color: var(--pos-500); }
.pill-go   { background: var(--pos-50);   color: var(--pos-500); }
.pill-nogo { background: var(--navy-500); color: #ffffff; }
.pill-needdata { background: var(--brass-50); color: var(--brass-600); }
.pill-warn { background: var(--brass-50); color: var(--brass-600); }
.pill-outline { background: transparent; color: var(--ink-600); border: 1px solid var(--paper-200); }

/* Breakdown row tag pills (per PRD §10 item 4) */
.tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: "Geist", "Manrope", sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tag-listing { background: var(--navy-50); color: var(--navy-500); }
.tag-user { background: var(--pos-50); color: var(--pos-500); }
.tag-assumption { background: var(--brass-50); color: var(--brass-600); }
.tag-automated-estimate { background: #ece6f7; color: #5b3a9c; }
.tag-computed { background: var(--paper-50); color: var(--ink-600); border: 1px solid var(--paper-200); }

/* Confidence chip on comp metric */
.confidence {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 100px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.confidence::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.c-high { background: var(--pos-50); color: var(--pos-500); }
.c-medium { background: var(--brass-50); color: var(--brass-600); }
.c-low { background: var(--navy-50); color: var(--navy-500); }

/* Pass / fail glyphs */
.ok { color: var(--pos-500); font-weight: 700; font-size: 16px; }
.fail { color: var(--brass-600); font-weight: 700; font-size: 16px; }

/* ── Needs / verify lists ──────────────────────────────────── */
.needs, .verify {
  margin: 0;
  padding-left: 0;
  list-style: none;
  counter-reset: nl;
}
.needs li, .verify li {
  position: relative;
  padding: 14px 18px 14px 56px;
  border-bottom: 1px solid var(--paper-200);
  color: var(--ink-800);
  line-height: 1.55;
}
.needs li:last-child, .verify li:last-child { border-bottom: none; }
.needs li::before, .verify li::before {
  counter-increment: nl;
  content: counter(nl, decimal-leading-zero);
  position: absolute;
  left: 18px;
  top: 14px;
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "opsz" 96, "SOFT" 25;
  font-size: 16px;
  color: var(--brass-500);
  font-weight: 500;
}

/* ── Flags row inside comp blocks ───────────────────────────── */
.flag {
  display: inline-block;
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(15,46,92,0.06);
  color: var(--navy-500);
  border: 1px solid var(--navy-50);
  margin: 2px 4px 2px 0;
}

/* ── Metric (comp) block ────────────────────────────────────── */
.metric-block { border-top: 1px solid var(--paper-200); padding: 22px 24px; }
.metric-block:first-child { border-top: none; }
.metric-head {
  display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap;
}
.metric-head h3 {
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "opsz" 96, "SOFT" 25;
  font-size: 18px;
}
.summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 10px 0 14px;
}
@media (max-width: 720px) { .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.summary-cell {
  padding: 14px 16px;
  background: var(--paper-50);
  border: 1px solid var(--paper-200);
  border-radius: 9px;
}
.summary-cell .k {
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-600);
  font-weight: 700;
  display: block;
  margin-bottom: 8px;
}
.summary-cell .v {
  font-family: "Manrope", system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum", "ss02", "cv11";
  font-size: 18px;
  font-weight: 600;
  color: var(--ink-900);
  letter-spacing: -0.02em;
}

/* ── Login card ─────────────────────────────────────────────── */
.login-wrap {
  display: grid;
  place-items: center;
  min-height: calc(100vh - 100px);
  padding: 32px;
}
.login-card {
  background: #ffffff;
  border: 1px solid var(--paper-200);
  border-radius: 14px;
  padding: 36px;
  box-shadow: var(--shadow-page);
  max-width: 460px;
  width: 100%;
}
.login-card h1 {
  margin: 8px 0 4px;
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "opsz" 144, "SOFT" 25, "wght" 500;
  letter-spacing: -0.022em;
  font-size: 36px;
  line-height: 1;
  color: var(--ink-900);
}
.login-card .sub { color: var(--ink-600); font-size: 13.5px; margin-bottom: 22px; }
.login-card .divider {
  height: 1px;
  background: var(--paper-200);
  margin: 22px 0;
  position: relative;
}
.login-card .divider::after {
  content: "OR";
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: #ffffff;
  padding: 0 12px;
  font-size: 10px; letter-spacing: 0.22em; font-weight: 700;
  color: var(--ink-400);
}

/* ── History list ───────────────────────────────────────────── */
.history-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--paper-200);
  align-items: center;
  font-size: 13.5px;
}
.history-row:last-child { border-bottom: none; }
.history-row:hover { background: var(--paper-50); }
.history-row .addr { font-weight: 600; color: var(--ink-900); }
.history-row .meta { color: var(--ink-500); font-size: 12px; }
.history-row .link { color: var(--navy-500); font-size: 12px; font-weight: 600; }

/* ── Audit JSON viewer ──────────────────────────────────────── */
.audit-json {
  background: var(--paper-50);
  border: 1px solid var(--paper-200);
  border-radius: 9px;
  padding: 16px;
  overflow-x: auto;
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-800);
  white-space: pre-wrap;
}

/* ── Why card (NEED-DATA reasoning) ──────────────────────── */
.why-card { border-left: 4px solid var(--brass-500); }
.why-card .needs li::before { color: var(--brass-500); }

/* ── Breakdown matrix — the centerpiece ───────────────────────── */
.breakdown-matrix {
  margin-top: 20px;
  background: #ffffff;
  border: 1px solid var(--paper-200);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.matrix-header {
  padding: 18px 24px 14px;
  background: var(--paper-50);
  border-bottom: 1px solid var(--paper-200);
}
.matrix-header .label-eyebrow { font-size: 10px; }
.matrix-header .title {
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "opsz" 144, "SOFT" 25, "wght" 500;
  letter-spacing: -0.022em;
  font-size: 26px;
  margin: 4px 0 0;
  color: var(--ink-900);
}

table.matrix-table {
  width: 100%;
  border-collapse: collapse;
}

/* Row layout — 4 columns: label · value · tag · note */
table.matrix-table td {
  padding: 11px 24px;
  vertical-align: middle;
  font-size: 13.5px;
  color: var(--ink-800);
  border-bottom: 1px solid var(--paper-200);
}
table.matrix-table tr:last-child td { border-bottom: 0; }

/* Section header (full-width band) */
tr.msection-head td {
  padding: 0 !important;
  background: var(--ink-900);
  color: var(--paper-50);
  border-bottom: 0 !important;
}
.msection-head-inner {
  padding: 12px 24px;
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  border-bottom: 3px double var(--brass-300);
}
.msection-title {
  margin: 0;
  font-family: "Geist", "Manrope", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass-300);
}
.msection-head-inner .confidence { font-size: 10px; }

/* Data row columns */
td.mlabel { font-weight: 500; color: var(--ink-800); width: 32%; }
td.mlabel.primary { color: var(--ink-900); font-weight: 700; }
td.mlabel.rule-label { font-weight: 600; color: var(--ink-900); letter-spacing: 0.02em; }
.rule-glyph { display: inline-block; width: 18px; }
td.mval { width: 22%; text-align: right; }
td.mval.num {
  font-family: "Manrope", system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum", "ss02", "cv11";
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.005em;
  color: var(--ink-900);
}
td.mval.num.strong { font-size: 17px; font-weight: 700; letter-spacing: -0.015em; }
td.mval.num.warn { color: var(--brass-600); }
td.mval.num.pos  { color: var(--pos-500); }
td.mval.num.expense { color: var(--ink-700); font-weight: 500; }
td.mtag { width: 110px; }
td.mnote {
  font-size: 12px;
  color: var(--ink-500);
  line-height: 1.4;
  width: auto;
}

/* Subtotal rows (All-in, NOI, Effective MAO) */
tr.mrow-subtotal td {
  background: var(--paper-50);
  border-top: 2px solid var(--ink-900);
  border-bottom: 2px solid var(--ink-900);
  padding-top: 13px;
  padding-bottom: 13px;
}
tr.mrow-subtotal td.mlabel {
  font-weight: 700;
  color: var(--ink-900);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11.5px;
}

/* Rule check rows */
tr.mrow-rule td {
  background: #fdfaf3;
  border-top: 1px solid var(--brass-200);
  padding-top: 13px;
  padding-bottom: 13px;
}
tr.mrow-rule.rule-pass td {
  background: rgba(223, 238, 229, 0.55);
  border-top: 1px solid #b8d5c5;
}
tr.mrow-rule.rule-fail td {
  background: rgba(246, 234, 208, 0.45);
  border-top: 1px solid var(--brass-200);
}
.rule-pass .rule-glyph { color: var(--pos-500); font-weight: 700; }
.rule-fail .rule-glyph { color: var(--brass-600); font-weight: 700; }
.rule-pass td.mval.num.strong { color: var(--pos-500); }
.rule-fail td.mval.num.strong { color: var(--brass-600); }

/* Blank divider inside a section (between provider rows and computed rows) */
tr.mrow-blank td {
  height: 6px; padding: 0; background: transparent;
  border-bottom: 1px dashed var(--paper-200);
}

/* Divider between top-level sections */
tr.mrow-divider td { height: 0; padding: 0; border-bottom: 0; }

@media (max-width: 720px) and (min-width: 641px) {
  table.matrix-table td { padding: 10px 16px; font-size: 13px; }
  .msection-head-inner { padding: 10px 16px; }
  td.mlabel { width: 38%; }
  td.mtag { width: 80px; }
  td.mnote { display: none; }
  table.matrix-table .tag { font-size: 8.5px; padding: 1px 6px; }
}

/* ── Mobile: matrix table reformats to label/value cards ─────── */
@media (max-width: 640px) {
  table.matrix-table { display: block; }
  table.matrix-table tbody { display: block; }
  table.matrix-table tr { display: block; }
  table.matrix-table td { display: block; padding: 0; border-bottom: 0; }

  /* Each data row becomes a card */
  tr.mrow-data, tr.mrow-subtotal, tr.mrow-rule {
    padding: 12px 16px;
    border-bottom: 1px solid var(--paper-200);
    background: #ffffff;
    position: relative;
  }
  tr.mrow-data td.mlabel,
  tr.mrow-subtotal td.mlabel,
  tr.mrow-rule td.mlabel {
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-600);
    font-weight: 700;
    width: auto;
    margin-bottom: 4px;
    line-height: 1.3;
  }
  tr.mrow-data td.mlabel.primary,
  tr.mrow-subtotal td.mlabel { color: var(--ink-900); }
  tr.mrow-data td.mval, tr.mrow-subtotal td.mval, tr.mrow-rule td.mval {
    text-align: left;
    width: auto;
    font-size: 20px;
    font-weight: 700;
    color: var(--ink-900);
    line-height: 1.1;
  }
  tr.mrow-data td.mval.num.strong, tr.mrow-subtotal td.mval.num.strong { font-size: 24px; }
  tr.mrow-data td.mtag, tr.mrow-subtotal td.mtag, tr.mrow-rule td.mtag {
    width: auto;
    margin-top: 6px;
  }
  tr.mrow-data td.mnote, tr.mrow-subtotal td.mnote, tr.mrow-rule td.mnote {
    width: auto;
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.5;
  }

  /* Subtotal row: stronger visual break */
  tr.mrow-subtotal {
    background: var(--paper-50);
    border-top: 2px solid var(--ink-900);
    border-bottom: 2px solid var(--ink-900);
  }
  tr.mrow-subtotal td.mlabel { font-size: 10px; }
  tr.mrow-subtotal td.mval { font-size: 26px; }

  /* Rule check row: shows ✓/✗ + label inline */
  tr.mrow-rule td.mlabel.rule-label { font-size: 12px; color: var(--ink-900); display: flex; align-items: center; gap: 6px; }
  tr.mrow-rule .rule-glyph { font-size: 18px; }
  tr.mrow-rule.rule-pass { background: rgba(223,238,229,0.55); border-top: 1px solid #b8d5c5; }
  tr.mrow-rule.rule-fail { background: rgba(246,234,208,0.45); border-top: 1px solid var(--brass-200); }

  /* Section header band */
  tr.msection-head td { padding: 0; }
  .msection-head-inner {
    padding: 12px 16px;
    flex-direction: row;
  }
  .msection-title { font-size: 10.5px; letter-spacing: 0.2em; }

  /* Blank divider row */
  tr.mrow-blank td { display: none; }
  tr.mrow-divider td { display: block; height: 0; padding: 0; }
}

/* ── Mobile: header strip becomes a stacked hero card ─────────── */
@media (max-width: 640px) {
  .header-strip {
    grid-template-columns: 1fr;
    padding: 18px 18px 16px;
    gap: 14px;
    border-radius: 14px;
  }
  .head-top { gap: 10px; }
  .verdict-pill { padding: 8px 14px; font-size: 11.5px; }
  .verdict-one-line { font-size: 14px; line-height: 1.45; }
  .head-right {
    text-align: left;
    border-left: 0;
    border-top: 1px solid var(--paper-200);
    padding-left: 0;
    padding-top: 14px;
    margin-top: 4px;
  }
  .head-right .label-eyebrow { font-size: 9.5px; margin-bottom: 6px; }
  .mao-display { font-size: 42px; }
  .head-right .mao-vs {
    font-size: 13px;
    white-space: normal;
    line-height: 1.5;
    margin-top: 8px;
  }
}

/* ── AI bottom-line summary ──────────────────────────────────── */
.bottom-line {
  margin-top: 18px;
  border-left: 4px solid var(--brass-500);
  background-image: radial-gradient(ellipse 480px 240px at 100% 0%, rgba(231,198,110,0.10), transparent 60%);
}
.bottom-line-head {
  padding: 16px 22px 8px;
  border-bottom: 1px solid var(--paper-200);
}
.bottom-line-head .label-eyebrow { font-size: 10px; margin-bottom: 4px; display: block; }
.bottom-line-head .title {
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "opsz" 144, "SOFT" 25, "wght" 500;
  letter-spacing: -0.022em;
  font-size: 22px;
  color: var(--ink-900);
}
.bottom-line-body {
  padding: 14px 22px 18px;
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "opsz" 14, "SOFT" 25;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-800);
  max-width: 70ch;
}
.bottom-line-body p { margin: 0 0 12px; }
.bottom-line-body p:last-child { margin-bottom: 0; }
@media (max-width: 640px) {
  .bottom-line { margin-top: 14px; }
  .bottom-line-head { padding: 14px 16px 6px; }
  .bottom-line-head .title { font-size: 19px; }
  .bottom-line-body { padding: 10px 16px 16px; font-size: 15px; line-height: 1.6; }
}

/* ── Section card head (for verify checklist) ──────────────────── */
.section-card { margin-top: 18px; }
.section-card-head {
  padding: 14px 22px;
  border-bottom: 1px solid var(--paper-200);
  background: var(--paper-50);
}
.section-card-head .label-eyebrow { font-size: 10px; }
.section-card-head .title {
  margin: 4px 0 0;
  font-family: "Fraunces", Georgia, serif;
  font-size: 18px;
  font-variation-settings: "opsz" 96, "SOFT" 25;
}

/* ── Panel (universal accordion for all result sections) ────── */
details.panel {
  margin-top: 14px;
  background: #ffffff;
  border: 1px solid var(--paper-200);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
details.panel[open] { border-color: var(--paper-300); }
details.panel > summary.panel-summary {
  cursor: pointer;
  padding: 14px 22px;
  list-style: none;
  display: flex; justify-content: space-between; align-items: center;
  user-select: none;
  background: #ffffff;
  transition: background 120ms;
}
details.panel > summary.panel-summary::-webkit-details-marker { display: none; }
details.panel > summary.panel-summary:hover { background: var(--paper-50); }
.panel-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.panel-title .label-eyebrow { font-size: 10px; margin: 0; }
.panel-title .title {
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "opsz" 96, "SOFT" 25, "wght" 500;
  letter-spacing: -0.015em;
  font-size: 19px;
  color: var(--ink-900);
}
.panel-title .panel-count {
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-500);
  margin-left: 8px;
}
.panel-chevron {
  font-size: 14px;
  color: var(--ink-400);
  transition: transform 200ms ease;
  flex-shrink: 0;
  margin-left: 12px;
}
details.panel[open] > summary > .panel-chevron { transform: rotate(180deg); color: var(--navy-500); }

/* When a panel is the matrix, drop its inner card's own border (no double border). */
.matrix-panel > .breakdown-matrix {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  border-top: 1px solid var(--paper-200);
}
.matrix-panel > .breakdown-matrix .matrix-header { display: none; }

/* Top-of-panel content padding for non-matrix panels */
details.panel > ul.check-list,
details.panel > table.ledger-table,
details.panel > .collapsed-content {
  border-top: 1px solid var(--paper-200);
}
.num.neg { color: var(--brass-600); }
.num.pos { color: var(--pos-500); }

/* ── Verification checklist ──────────────────────────────── */
.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--paper-200);
  color: var(--ink-800); font-size: 13.5px; line-height: 1.5;
}
@media (max-width: 640px) {
  .check-list li { padding: 14px 16px; font-size: 14px; }
  .check-list .cl-box { width: 20px; height: 20px; }
}
.check-list li:last-child { border-bottom: none; }
.check-list .cl-box {
  margin-top: 3px; width: 16px; height: 16px;
  accent-color: var(--navy-500); flex-shrink: 0;
}
.check-list li:has(.cl-box:checked) { color: var(--ink-500); text-decoration: line-through; }

/* ── Comp evidence (collapsible) + comp records table ─────────── */
details.comp-detail { border-top: 1px solid var(--paper-200); }
details.comp-detail:first-of-type { border-top: 0; }
details.comp-detail > summary {
  cursor: pointer; padding: 14px 22px;
  display: flex; gap: 10px; align-items: baseline;
  list-style: none; user-select: none; outline: none;
  transition: background 120ms;
}
details.comp-detail > summary::-webkit-details-marker { display: none; }
details.comp-detail > summary::before {
  content: "▸"; color: var(--ink-400);
  display: inline-block; width: 12px;
  transition: transform 160ms ease;
}
details.comp-detail[open] > summary::before { transform: rotate(90deg); color: var(--navy-500); }
details.comp-detail > summary:hover { background: var(--paper-50); }
.comp-source { font-weight: 600; font-family: "Geist", "Manrope", sans-serif; }
.comp-detail-inner { padding: 0 22px 16px; }

/* Summary stats strip above the records table */
.comp-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin: 4px 0 14px;
}
@media (max-width: 640px) { .comp-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.comp-stats > div {
  background: var(--paper-50);
  border: 1px solid var(--paper-200);
  border-radius: 8px;
  padding: 8px 10px;
}
.comp-stats .k {
  display: block;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-600);
  font-weight: 700;
  margin-bottom: 4px;
}
.comp-stats .v {
  font-family: "Manrope", system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 13px;
  color: var(--ink-900);
}
.comp-stats .v.small { font-size: 11px; color: var(--ink-700); }

.comp-export-row {
  display: flex; justify-content: space-between; align-items: center;
  margin: 4px 0 8px;
  padding: 4px 0;
}
.comp-export-row .label-eyebrow { font-size: 9.5px; }

table.comp-records-table { width: 100%; }
table.comp-records-table th { padding-top: 10px; padding-bottom: 8px; }
table.comp-records-table td { padding: 8px 10px; font-size: 12.5px; }
table.comp-records-table tr:hover td { background: var(--paper-50); }
.flags-row { display: inline-flex; flex-wrap: wrap; gap: 4px; }

/* ── Mobile: comp records table → horizontal scroll wrapper ──── */
@media (max-width: 640px) {
  details.comp-detail > summary { padding: 14px 16px; }
  .comp-detail-inner { padding: 0 16px 14px; }
  .comp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .comp-records-table { display: block; overflow-x: auto; white-space: nowrap; }
  .comp-records-table td.small { white-space: normal; }
  .comp-export-row .btn-sm { padding: 8px 14px; font-size: 11px; }
}

/* ── Input recap table ───────────────────────────────────── */
.recap-table tbody td:first-child { width: 38%; color: var(--ink-600); font-weight: 500; }
.recap-table tbody td:nth-child(2) { font-weight: 600; color: var(--ink-900); }
.recap-table tbody td:last-child { text-align: right; width: 90px; }

/* ── Rules detail (collapsible) ──────────────────────────── */
details.rules-detail { margin-top: 18px; }
details.rules-detail > summary {
  cursor: pointer; padding: 10px 14px;
  font-family: "Geist", "Manrope", sans-serif;
  font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; font-weight: 700;
  color: var(--ink-500); background: transparent;
  border: 1px solid var(--paper-200); border-radius: 8px;
  list-style: none;
}
details.rules-detail > summary::-webkit-details-marker { display: none; }
details.rules-detail > summary::before { content: "▸ "; color: var(--ink-400); }
details.rules-detail[open] > summary::before { content: "▾ "; }
details.rules-detail > summary:hover { color: var(--ink-900); background: var(--paper-50); }
details.rules-detail > .card { margin-top: 8px; }

/* ── Misc ────────────────────────────────────────────────── */
.muted { color: var(--ink-500); }
.small { font-size: 12px; }
.spacer-sm { height: 12px; }
.spacer-md { height: 24px; }
.hidden { display: none !important; }

.error-box {
  padding: 12px 16px;
  background: var(--brass-50);
  color: var(--brass-600);
  border: 1px solid var(--brass-300);
  border-radius: 9px;
  font-weight: 600;
  font-size: 13px;
}

/* Loading state */
.loading {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--ink-500);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
}
.loading::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--brass-500);
  box-shadow: 0 0 0 4px rgba(201,156,43,0.22);
  animation: pulse-dot 2.4s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 4px rgba(201,156,43,0.22); }
  50%      { box-shadow: 0 0 0 7px rgba(201,156,43,0.10); }
}

/* Fade-in entrance for the result card */
@keyframes fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.result-card { animation: fade-in 320ms ease forwards; }

/* Print */
@media print {
  body { background: white !important; background-image: none !important; }
  .no-print { display: none !important; }
}

/* ── Admin: allowlist page ─────────────────────────────────── */
.admin-wrap {
  display: grid;
  place-items: center;
  min-height: calc(100vh - 100px);
  padding: 32px;
}
.admin-card {
  background: #ffffff;
  border: 1px solid var(--paper-200);
  border-radius: 14px;
  padding: 36px;
  box-shadow: var(--shadow-page);
  max-width: 640px;
  width: 100%;
}
.admin-heading {
  margin: 8px 0 4px;
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "opsz" 144, "SOFT" 25, "wght" 500;
  letter-spacing: -0.022em;
  font-size: 36px;
  line-height: 1;
  color: var(--ink-900);
}
.admin-card .sub { color: var(--ink-600); font-size: 13.5px; margin-bottom: 22px; }

.flash {
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 18px;
  border: 1px solid;
}
.flash-ok  { background: var(--pos-50); border-color: var(--pos-500); color: var(--pos-600); }
.flash-err { background: #f8e5d8; border-color: #b85a1a; color: #6e3410; }

.allowlist-table {
  border: 1px solid var(--paper-200);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 24px;
}
.allowlist-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--paper-200);
  font-size: 13.5px;
}
.allowlist-row:last-child { border-bottom: none; }
.allowlist-row:hover { background: var(--paper-50); }
.allowlist-email { color: var(--ink-900); font-weight: 500; }
.allowlist-action form { margin: 0; }

.badge {
  font-family: "Geist", sans-serif;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid;
}
.badge-self  { background: var(--brass-50); border-color: var(--brass-500); color: var(--brass-600); }
.badge-admin { background: var(--paper-100); border-color: var(--paper-300); color: var(--ink-600); }

.admin-section {
  border-top: 1px dashed var(--paper-200);
  padding-top: 22px;
}
.admin-section .label-eyebrow { margin-bottom: 10px; }

.invite-form {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}
.invite-form .field-input { flex: 1; margin: 0; }
.invite-form .btn { flex-shrink: 0; }

.hint { font-size: 12px; color: var(--ink-500); line-height: 1.55; margin: 6px 0 0; }
.hint code { background: var(--paper-100); padding: 1px 5px; border-radius: 3px; }

/* Access-denied page reuses .login-card; extra help block: */
.denied-help { font-size: 13px; color: var(--ink-700); margin: 8px 0 22px; }
.denied-help ul { margin: 8px 0 14px; padding-left: 22px; }
.denied-help li { margin-bottom: 8px; line-height: 1.5; }
.denied-help code { background: var(--paper-100); padding: 1px 5px; border-radius: 3px; font-size: 12px; }

@media (max-width: 640px) {
  .admin-card { padding: 24px; }
  .invite-form { flex-direction: column; }
  .invite-form .btn { width: 100%; }
}