/* ============================================================
   Pro Forma — CRE Financial Model
   Aesthetic: precise, sober finance tool. Cool slate neutrals,
   confident indigo-blue accent, tabular data, generous whitespace.
   ============================================================ */

/* ---------- Tokens ---------- */
:root, [data-theme="light"] {
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
  --text-sm: clamp(0.8125rem, 0.78rem + 0.2vw, 0.875rem);
  --text-base: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
  --text-lg: clamp(1.125rem, 1rem + 0.4vw, 1.375rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.1vw, 2.125rem);

  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem;
  --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem;
  --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem;
  --space-16: 4rem; --space-20: 5rem;

  /* Surfaces — cool, near-white slate */
  --color-bg: #f4f6f9;
  --color-surface: #ffffff;
  --color-surface-2: #fafbfc;
  --color-surface-offset: #eef1f5;
  --color-border: #dde2ea;
  --color-divider: #e8ecf1;

  /* Text — slate ink */
  --color-text: #131b2b;
  --color-text-muted: #5a6679;
  --color-text-faint: #97a1b3;
  --color-text-inverse: #f7f9fc;

  /* Accent — Alpha Strategic Funds orange */
  --color-primary: #e8772e;
  --color-primary-hover: #d2651f;
  --color-primary-active: #b85618;
  --color-primary-soft: #fcecdf;
  --color-ink: #111111;

  /* Semantic */
  --color-positive: #1f9e6e;
  --color-positive-soft: #e2f5ee;
  --color-negative: #d23b54;
  --color-negative-soft: #fbe7eb;

  --radius-sm: 0.375rem; --radius-md: 0.625rem; --radius-lg: 0.875rem; --radius-xl: 1.125rem;
  --radius-full: 9999px;

  --transition-interactive: 170ms cubic-bezier(0.16, 1, 0.3, 1);

  --shadow-sm: 0 1px 2px rgba(19, 27, 43, 0.06);
  --shadow-md: 0 6px 20px rgba(19, 27, 43, 0.07);
  --shadow-lg: 0 18px 48px rgba(19, 27, 43, 0.12);

  --content-wide: 1280px;

  --font-display: 'General Sans', 'Inter', sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

[data-theme="dark"] {
  --color-bg: #0c0f16;
  --color-surface: #141925;
  --color-surface-2: #181e2c;
  --color-surface-offset: #1d2433;
  --color-border: #2a3344;
  --color-divider: #232b3a;

  --color-text: #e7ebf2;
  --color-text-muted: #98a3b6;
  --color-text-faint: #65718a;
  --color-text-inverse: #0c0f16;

  --color-primary: #f0954f;
  --color-primary-hover: #f4a868;
  --color-primary-active: #e8772e;
  --color-primary-soft: #3a2515;
  --color-ink: #f7f9fc;

  --color-positive: #3dc88f;
  --color-positive-soft: #14271f;
  --color-negative: #f0697f;
  --color-negative-soft: #2a1620;

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

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg: #0c0f16; --color-surface: #141925; --color-surface-2: #181e2c;
    --color-surface-offset: #1d2433; --color-border: #2a3344; --color-divider: #232b3a;
    --color-text: #e7ebf2; --color-text-muted: #98a3b6; --color-text-faint: #65718a;
    --color-primary: #f0954f; --color-primary-hover: #f4a868; --color-primary-soft: #3a2515;
    --color-positive: #3dc88f; --color-negative: #f0697f;
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; scroll-behavior: smooth; scroll-padding-top: 5rem;
}
body {
  min-height: 100dvh; line-height: 1.55;
  font-family: var(--font-body); font-size: var(--text-base);
  color: var(--color-text); background-color: var(--color-bg);
}
svg { display: block; }
button { cursor: pointer; background: none; border: none; font: inherit; color: inherit; }
input { font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }
h1, h2, h3 { text-wrap: balance; line-height: 1.18; font-family: var(--font-display); }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: var(--radius-sm); }

a, button, input { transition: color var(--transition-interactive), background var(--transition-interactive),
  border-color var(--transition-interactive), box-shadow var(--transition-interactive); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
}

.wrap { width: 100%; max-width: var(--content-wide); margin-inline: auto; padding-inline: clamp(var(--space-4), 4vw, var(--space-12)); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--color-surface) 88%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--color-border);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text); text-decoration: none; }
.brand-mark { color: var(--color-primary); }
.brand-mark-img { display: block; height: 30px; width: auto; }
.brand-name { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); letter-spacing: -0.01em; }

/* Theme-aware Alpha logo swap: ink (black) logo on light, light (white) logo on dark */
.brand-logo { display: block; height: auto; }
.brand-logo-light { display: none; }
[data-theme="dark"] .brand-logo-ink { display: none; }
[data-theme="dark"] .brand-logo-light { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .brand-logo-ink { display: none; }
  :root:not([data-theme]) .brand-logo-light { display: block; }
}
.header-actions { display: flex; align-items: center; gap: var(--space-3); }
.header-tag {
  font-size: var(--text-xs); font-weight: 500; color: var(--color-text-muted);
  padding: var(--space-1) var(--space-3); border: 1px solid var(--color-border);
  border-radius: var(--radius-full); background: var(--color-surface-2);
}
@media (max-width: 560px) { .header-tag { display: none; } }
.brand-switch {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 3px; border: 1px solid var(--color-border);
  border-radius: var(--radius-full); background: var(--color-surface-2);
}
.brand-switch-label {
  font-size: var(--text-xs); font-weight: 500; color: var(--color-text-muted);
  padding-left: var(--space-2);
}
.brand-opt {
  font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted);
  padding: var(--space-1) var(--space-3); border: 1px solid transparent;
  border-radius: var(--radius-full); background: transparent; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.brand-opt:hover { color: var(--color-text); }
.brand-opt.is-active {
  color: #fff; background: var(--color-primary);
  border-color: var(--color-primary);
}
@media (max-width: 720px) { .brand-switch-label { display: none; } }
@media (max-width: 480px) { .brand-switch { display: none; } }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--radius-md);
  color: var(--color-text-muted); border: 1px solid var(--color-border); background: var(--color-surface-2);
}
.icon-btn:hover { color: var(--color-text); border-color: var(--color-text-faint); }

/* ---------- Hero ---------- */
.hero { padding-block: clamp(var(--space-8), 5vw, var(--space-16)) var(--space-6); }
.hero-title { font-size: var(--text-xl); font-weight: 700; letter-spacing: -0.02em; }
.hero-sub { margin-top: var(--space-3); max-width: 60ch; color: var(--color-text-muted); font-size: var(--text-base); }

/* ---------- Mode switch (top-level lever) ---------- */
.mode-switch {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3);
  margin-top: var(--space-6); max-width: 760px;
}
@media (max-width: 560px) { .mode-switch { grid-template-columns: 1fr; } }
.mode-btn {
  text-align: left; padding: var(--space-4) var(--space-5);
  border: 1.5px solid var(--color-border); border-radius: var(--radius-lg);
  background: var(--color-surface); box-shadow: var(--shadow-sm);
}
.mode-btn:hover { border-color: var(--color-text-faint); }
.mode-btn.is-active {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft), var(--shadow-sm);
}
.mode-btn-title { display: block; font-family: var(--font-display); font-weight: 600; font-size: var(--text-base); color: var(--color-text); }
.mode-btn.is-active .mode-btn-title { color: var(--color-primary); }
.mode-btn-desc { display: block; font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 2px; line-height: 1.45; }

/* ---------- Horizon chips ---------- */
.horizon-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.horizon-row[hidden] { display: none; }
.horizon-label { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); }
.horizon-chips { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.sellout-value { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 600; color: var(--color-primary); }
.horizon-chip {
  font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 500;
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-full);
  border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-muted);
}
.horizon-chip:hover { border-color: var(--color-text-faint); color: var(--color-text); }
.horizon-chip.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

/* ---------- Sticky capital-stack summary (sneak peek) ----------
   Full card at the top; on scroll it collapses to a slim sticky strip.
   Sits directly under the 64px site header and updates live from
   renderCapstack(). */
.summary-sticky {
  position: sticky; top: 64px; z-index: 18;
  background: color-mix(in srgb, var(--color-surface) 94%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  transition: padding var(--transition-interactive), box-shadow var(--transition-interactive);
}
.summary-sticky[hidden] { display: none; }
.summary-sticky-inner { padding-block: var(--space-4); }
.summary-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-3); margin-bottom: var(--space-3);
  transition: max-height var(--transition-interactive), opacity var(--transition-interactive), margin var(--transition-interactive);
  overflow: hidden; max-height: 32px;
}
.summary-eyebrow {
  font-size: var(--text-xs); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--color-primary);
}
.summary-peakmonth { font-size: var(--text-xs); color: var(--color-text-faint); font-family: var(--font-mono); }
.summary-tiles {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3);
}
.summary-tile {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-2); border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: padding var(--transition-interactive), background var(--transition-interactive);
}
.summary-tile-label {
  font-size: var(--text-xs); font-weight: 500; color: var(--color-text-muted);
  line-height: 1.25;
}
.summary-tile-value {
  font-family: var(--font-mono); font-weight: 600; font-size: var(--text-lg);
  letter-spacing: -0.01em; color: var(--color-text); line-height: 1.1;
}
.summary-tile-value.neg { color: var(--color-negative); }
.summary-tile-value.pos { color: var(--color-positive); }

/* Condensed state — applied via JS once the user scrolls past the hero. */
.summary-sticky.is-condensed { box-shadow: var(--shadow-md); }
.summary-sticky.is-condensed .summary-sticky-inner { padding-block: var(--space-2); }
.summary-sticky.is-condensed .summary-head {
  max-height: 0; opacity: 0; margin-bottom: 0;
}
.summary-sticky.is-condensed .summary-tile {
  flex-direction: row; align-items: baseline; gap: var(--space-2);
  padding: var(--space-1) var(--space-3); background: transparent; border-color: transparent;
}
.summary-sticky.is-condensed .summary-tile-label { font-size: var(--text-xs); }
.summary-sticky.is-condensed .summary-tile-value { font-size: var(--text-base); }

@media (max-width: 760px) {
  .summary-tiles { grid-template-columns: repeat(2, 1fr); }
  .summary-sticky.is-condensed .summary-tiles { grid-template-columns: repeat(2, 1fr); }
  .summary-sticky.is-condensed .summary-tile { flex-direction: column; }
}
@media (max-width: 420px) {
  .summary-tiles { grid-template-columns: 1fr 1fr; }
  .summary-tile-value { font-size: var(--text-base); }
}

/* ---------- Floating jump-to-results FAB ---------- */
.jump-fab {
  position: fixed; right: clamp(var(--space-4), 4vw, var(--space-12));
  bottom: var(--space-8); z-index: 30;
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  background: var(--color-primary); color: #fff;
  border-radius: var(--radius-full); box-shadow: var(--shadow-lg);
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm);
  border: none; cursor: pointer;
  transition: transform var(--transition-interactive), background var(--transition-interactive), opacity var(--transition-interactive);
}
.jump-fab[hidden] { display: none; }
.jump-fab:hover { background: var(--color-primary-hover); transform: translateY(-1px); }
.jump-fab svg { color: #fff; }
@media (max-width: 480px) { .jump-fab .jump-fab-text { display: none; } .jump-fab { padding: var(--space-3); } }

/* ---------- Layout (full-width stacked: inputs first, results last) ---------- */
.stacked-layout {
  display: flex; flex-direction: column; gap: var(--space-8);
  align-items: stretch; padding-bottom: var(--space-20);
}

/* Form panel is now full width; constrain field rows so inputs don't sprawl
   edge-to-edge on wide screens, while still reading top-to-bottom. */
.form-panel { position: static; width: 100%; }

.results-anchor { display: block; height: 0; scroll-margin-top: 88px; }
.results-col { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }

/* Multi-column field grid INSIDE each fieldset so a full-width form stays
   compact and scannable instead of one tall single-file column. */
.form-panel .model-form { padding: var(--space-5) var(--space-6) var(--space-6); }
.form-panel .field-group { max-width: var(--content-wide); }
.form-panel .field-group > .field {
  display: inline-block; width: 100%; vertical-align: top;
}
@media (min-width: 720px) {
  .form-panel .field-grid,
  .form-panel .field-group:not(.equity-sources) {
    /* lay simple labelled fields out in a responsive 2-3 col grid */
  }
  .form-panel .field-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-2) var(--space-5); align-items: start;
  }
  .form-panel .field-group > legend,
  .form-panel .field-group > .field-wide,
  .form-panel .field-group > p,
  .form-panel .field-group > .presold-lots-block,
  .form-panel .field-group > .amenity-block,
  .form-panel .field-group > .spec-block,
  .form-panel .field-group > .apartment-block,
  .form-panel .field-group > .btrbed-block,
  .form-panel .field-group > .offsite-block,
  .form-panel .field-group > .costsched-block,
  .form-panel .field-group > .allin-summary,
  .form-panel .field-group > .market-study-cta,
  .form-panel .field-group > .takedown-recon,
  .form-panel .field-group > .equity-sources,
  .form-panel .field-group > #buildRows,
  .form-panel .field-group > .build-head,
  .form-panel .field-group > .build-timing-note,
  .form-panel .field-group > .takedown-head,
  .form-panel .field-group > #takedownRows,
  .form-panel .field-group > #addTrancheBtn,
  .form-panel .field-group > #addBuildBtn {
    grid-column: 1 / -1;
  }
}

/* ---------- Panels ---------- */
.panel {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.panel-head { padding: var(--space-5) var(--space-5) var(--space-4); border-bottom: 1px solid var(--color-divider); }
.panel-head.row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.results-head-panel .panel-head { border-bottom: none; }
.panel-title { font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.01em; }
.panel-subtitle { font-size: var(--text-base); font-weight: 600; }
.panel-desc { margin-top: 2px; font-size: var(--text-xs); color: var(--color-text-faint); }

/* ---------- Form ---------- */
#model-form { padding: var(--space-4) var(--space-5) var(--space-5); }
.field-group { border: none; margin-bottom: var(--space-5); }
.field-group legend {
  font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--color-primary); padding-bottom: var(--space-2); width: 100%;
  border-bottom: 1px solid var(--color-divider); margin-bottom: var(--space-3);
}
.field { display: block; margin-bottom: var(--space-3); }
/* Progressive disclosure: gated questions hide when their identifying question
   isn't answered affirmatively. The explicit [hidden] rule is required because
   the display declarations above otherwise override the HTML hidden attribute. */
.field[hidden], .field-group[hidden] { display: none; }
.field-label { display: block; font-size: var(--text-sm); font-weight: 500; margin-bottom: var(--space-1); }
.field-label em { font-style: normal; font-weight: 400; color: var(--color-text-faint); }
.field input, .field select {
  width: 100%; padding: var(--space-3) var(--space-3); font-family: var(--font-mono); font-size: var(--text-sm);
  background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  color: var(--color-text);
}
/* Read-only auto-calculated readouts (average lot price, earnest %) */
.field-output {
  display: block; width: 100%; padding: var(--space-3) var(--space-3);
  font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 600;
  background: color-mix(in srgb, var(--color-primary-soft) 55%, var(--color-surface));
  border: 1px dashed var(--color-border); border-radius: var(--radius-md);
  color: var(--color-primary);
}
.field-readonly .field-label em { color: var(--color-primary); opacity: .8; }
/* Per-unit breakdown line beneath land / infra inputs */
.field-breakdown {
  display: block; margin-top: var(--space-1);
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500;
  color: var(--color-text-muted); letter-spacing: -0.01em;
}
/* All-in (land + infrastructure) summary block */
.allin-summary {
  margin: var(--space-2) 0 var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border); border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-primary-soft) 45%, var(--color-surface));
}
.allin-title { font-size: var(--text-sm); font-weight: 600; color: var(--color-text); }
.allin-sub { font-weight: 400; color: var(--color-text-faint); }
.allin-value {
  display: block; margin-top: 2px;
  font-family: var(--font-mono); font-size: var(--text-base); font-weight: 700;
  color: var(--color-primary); letter-spacing: -0.01em;
}
.allin-note { margin-top: var(--space-1); font-size: var(--text-xs); color: var(--color-text-muted); }
/* Show native steppers on number inputs so values can be typed OR nudged up/down */
.field input[type="number"] { -moz-appearance: auto; }
.field input[type="number"]::-webkit-outer-spin-button,
.field input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: inner-spin-button; opacity: 1; height: 1.6rem;
}
.field select {
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--space-3) center; padding-right: var(--space-5); cursor: pointer;
}
/* Input + unit toggle row (for %/$ toggleable fields) */
.field-input { display: flex; align-items: stretch; gap: var(--space-2); }
.field-input input { flex: 1; min-width: 0; }
.unit-toggle {
  display: inline-flex; flex: 0 0 auto; align-self: stretch;
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  overflow: hidden; background: var(--color-surface-2);
}
.unit-opt {
  font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 600; line-height: 1;
  min-width: 2.4rem; padding: 0 var(--space-3); cursor: pointer;
  background: transparent; border: none; color: var(--color-text-faint);
}
.unit-opt + .unit-opt { border-left: 1px solid var(--color-border); }
.unit-opt:hover { color: var(--color-text); }
.unit-opt.is-active { background: var(--color-primary); color: #fff; }
.unit-opt:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }

.field input:hover, .field select:hover { border-color: var(--color-text-faint); }
.field input:focus, .field select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft); background-color: var(--color-surface); }
.field input.invalid { border-color: var(--color-negative); box-shadow: 0 0 0 3px var(--color-negative-soft); }
.field-error { display: block; margin-top: var(--space-1); font-size: var(--text-xs); line-height: 1.4; color: var(--color-negative); }
.field-error[hidden] { display: none; }

/* Free-text project summary + AI market-study controls */
.field textarea {
  width: 100%; padding: var(--space-3) var(--space-3); font-family: var(--font-sans, inherit); font-size: var(--text-sm);
  background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  color: var(--color-text); line-height: 1.5; resize: vertical; min-height: 5.5rem;
}
.field textarea:hover { border-color: var(--color-text-faint); }
.field textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft); background-color: var(--color-surface); }
.field-toggle select { max-width: 100%; }
.market-study-cta { margin-top: var(--space-3); }
.market-study-cta .btn { width: 100%; }
.market-study-cta[hidden] { display: none; }
.market-study-hint {
  margin-top: var(--space-2); font-size: var(--text-xs); line-height: 1.5;
  color: var(--color-text-faint);
}
.market-study-hint strong { color: var(--color-primary); font-weight: 600; }

/* AI market-study run status (mirrors intake-status) */
.market-study-status {
  margin-top: var(--space-3); font-size: var(--text-xs); line-height: 1.55;
  color: var(--color-text-muted); padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md); background: var(--color-surface); border: 1px solid var(--color-border);
}
.market-study-status[hidden] { display: none; }
.market-study-status strong { color: var(--color-text); font-weight: 600; }
.market-study-status.is-working strong { color: var(--color-primary); }
.market-study-status.is-success { color: #067647; border-color: #b9e6cc; background: #ecfdf3; }
.market-study-status.is-success strong { color: #067647; }
.market-study-status.is-error { color: #b42318; border-color: #f3c4bd; background: #fef3f2; }
.market-study-status.is-error strong { color: #b42318; }

/* Deck photo slots (built-in stock + upload-to-replace) */
.deck-photos-panel { margin-top: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-2); padding: var(--space-2) var(--space-3); }
.deck-photos-panel > summary { cursor: pointer; font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); list-style: revert; }
.deck-photos-panel > summary em { font-style: normal; font-weight: 400; color: var(--color-text-faint); }
.deck-photos-panel[open] > summary { margin-bottom: var(--space-2); }
.deck-photos-note { margin: 0 0 var(--space-3); font-size: var(--text-xs); line-height: 1.5; color: var(--color-text-faint); }
.deck-photo-slots { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
.deck-photo-slot { display: flex; flex-direction: column; gap: var(--space-2); }
.deck-photo-thumb { aspect-ratio: 16 / 10; width: 100%; overflow: hidden; border-radius: var(--radius-sm); border: 1px solid var(--color-border); background: var(--color-surface); display: flex; align-items: center; justify-content: center; }
.deck-photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.deck-photo-thumb .deck-photo-empty { font-size: var(--text-xs); color: var(--color-text-faint); }
.deck-photo-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.deck-photo-label { font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deck-photo-upload { flex: none; font-size: var(--text-xs); font-weight: 600; color: var(--color-primary); cursor: pointer; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); border: 1px solid var(--color-border); background: var(--color-surface); }
.deck-photo-upload:hover { border-color: var(--color-primary); background: var(--color-primary-soft); }
@media (max-width: 560px) { .deck-photo-slots { grid-template-columns: 1fr; } }

/* ---------- Project Intake (AI document extraction) ---------- */
.intake-card { margin-top: var(--space-4); padding: var(--space-4); background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.intake-head { margin-bottom: var(--space-3); }
.intake-drop {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 96px; padding: var(--space-4);
  border: 1.5px dashed var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface); cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.intake-drop:hover, .intake-drop.is-drag { border-color: var(--color-primary); background: var(--color-surface-2); }
.intake-drop-text { font-size: var(--text-xs); line-height: 1.6; color: var(--color-text-faint); }
.intake-drop-text strong { color: var(--color-text); font-weight: 600; font-size: var(--text-sm); }
.intake-files { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.intake-files[hidden] { display: none; }
.intake-file { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: var(--text-xs); }
.intake-file .intake-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text); }
.intake-file .intake-file-size { color: var(--color-text-faint); font-family: var(--font-mono); flex: none; }
.intake-file-rm { flex: none; width: 1.5rem; height: 1.5rem; border: none; background: transparent; color: var(--color-text-faint); cursor: pointer; font-size: var(--text-base); line-height: 1; border-radius: var(--radius-sm); }
.intake-file-rm:hover { color: var(--color-text); background: var(--color-surface-2); }
.intake-context-wrap { margin-top: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.intake-context-label { font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 600; }
.intake-context-label em { font-style: normal; font-weight: 400; color: var(--color-text-faint); }
.intake-context { width: 100%; box-sizing: border-box; resize: vertical; min-height: 4.5rem; padding: var(--space-2) var(--space-3); font-family: inherit; font-size: var(--text-sm); line-height: 1.55; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.intake-context:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent); }
.intake-context::placeholder { color: var(--color-text-faint); }
.intake-actions { display: flex; gap: var(--space-3); margin-top: var(--space-3); }
.intake-actions .btn { flex: 1; }
.intake-actions .btn[hidden] { display: none; }
.intake-status { margin-top: var(--space-3); font-size: var(--text-xs); line-height: 1.55; color: var(--color-text-muted); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--color-surface); border: 1px solid var(--color-border); }
.intake-status[hidden] { display: none; }
.intake-status.is-error { color: #b42318; border-color: #f3c4bd; background: #fef3f2; }
.intake-status.is-ok { color: #067647; border-color: #b9e6cc; background: #ecfdf3; }
.intake-status.is-working strong { color: var(--color-primary); }
.intake-review { margin-top: var(--space-3); }
.intake-review[hidden] { display: none; }
.intake-review h4 { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-faint); margin: 0 0 var(--space-2); }
.intake-review-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; background: var(--color-border); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.intake-review-row { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: var(--space-3); align-items: center; padding: var(--space-2) var(--space-3); background: var(--color-surface); font-size: var(--text-xs); }
.intake-review-row .intake-review-label { color: var(--color-text-muted); }
.intake-review-row .intake-review-val { color: var(--color-text); font-weight: 600; overflow: hidden; min-width: 0; }
.intake-review-row .intake-review-note { display: block; margin-top: 2px; font-weight: 400; font-style: italic; color: var(--color-text-faint); }
.intake-conf { font-family: var(--font-mono); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.03em; padding: 1px var(--space-2); border-radius: var(--radius-full); flex: none; color: var(--color-text-faint); background: var(--color-surface-2); }
.intake-conf.is-high { color: #067647; background: #ecfdf3; }
.intake-conf.is-med { color: #b54708; background: #fffaeb; }
.intake-conf.is-low { color: #b42318; background: #fef3f2; }
.intake-review-foot { margin-top: var(--space-2); font-size: var(--text-xs); line-height: 1.55; color: var(--color-text-faint); font-style: italic; }

.form-actions { display: flex; gap: var(--space-3); margin-top: var(--space-2); }

/* ---------- Lot takedown schedule ---------- */
#takedownGroup[hidden] { display: none; }
.takedown-hint { font-size: var(--text-xs); color: var(--color-text-faint); line-height: 1.5; margin: 0 0 var(--space-3); }
.takedown-head { display: grid; grid-template-columns: 0.7fr 0.9fr 1.5fr 2rem; gap: var(--space-2); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-faint); margin-bottom: var(--space-1); }
.takedown-head span:last-child { width: 2rem; }
.tranche-row { display: grid; grid-template-columns: 0.7fr 0.9fr 1.5fr 2rem; gap: var(--space-2); margin-bottom: var(--space-2); align-items: center; }
.tranche-row input, .tranche-row select { width: 100%; padding: var(--space-2) var(--space-3); font-family: var(--font-mono); font-size: var(--text-sm); background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text); }
.tranche-row select { font-family: var(--font-sans); cursor: pointer; }
.tranche-row select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft); background-color: var(--color-surface); }
.tranche-row input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft); background-color: var(--color-surface); }
.tranche-del { width: 2rem; height: 2rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-2); color: var(--color-text-faint); font-size: var(--text-base); line-height: 1; cursor: pointer; }
.tranche-del:hover { color: var(--color-negative); border-color: var(--color-negative); }
.btn-sm { padding: var(--space-2) var(--space-4); font-size: var(--text-xs); margin-top: var(--space-1); }
.takedown-recon { font-size: var(--text-xs); font-weight: 600; margin-top: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); }
.takedown-recon.ok { color: var(--color-positive); background: var(--color-positive-soft); }
.takedown-recon.warn { color: var(--color-negative); background: var(--color-negative-soft); }
#commercialTrancheField { margin-top: var(--space-3); }
#commercialTrancheField[hidden] { display: none; }

/* ---------- Build / delivery schedule ---------- */
#buildScheduleGroup[hidden] { display: none; }
.build-head { display: grid; grid-template-columns: 1.3fr 0.7fr 0.85fr 0.7fr 0.8fr 2rem; gap: var(--space-2); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-faint); margin-bottom: var(--space-1); }
.build-head span:last-child { width: 2rem; }
.build-row { display: grid; grid-template-columns: 1.3fr 0.7fr 0.85fr 0.7fr 0.8fr 2rem; gap: var(--space-2); margin-bottom: var(--space-2); align-items: center; }
.build-row input, .build-row select { width: 100%; padding: var(--space-2) var(--space-3); font-family: var(--font-mono); font-size: var(--text-sm); background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text); }
.build-row select { font-family: var(--font-sans); }
.build-row input:focus, .build-row select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft); background-color: var(--color-surface); }
.build-del { width: 2rem; height: 2rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-2); color: var(--color-text-faint); font-size: var(--text-base); line-height: 1; cursor: pointer; }
.build-del:hover { color: var(--color-negative); border-color: var(--color-negative); }
#buildRecon { line-height: 1.6; }
.build-timing-note { margin-top: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--color-surface-2); border: 1px solid var(--color-border); border-left: 3px solid var(--color-primary); border-radius: var(--radius-md); font-size: var(--text-sm); line-height: 1.65; color: var(--color-text-muted); white-space: normal; }
.build-timing-note strong { color: var(--color-text); font-weight: 600; }

/* ---------- Feature list editors (presold lots, amenities, apartments,
   BTR bed-types, spec batches) ----------
   These mirror the .tranche-row / .build-row grid pattern: a heading row of
   column labels (.*-head), then one editable row per entry (.*-row), then a
   small “×” delete button (.*-del) on the right. Each editor has its own
   grid-template-columns tuned to its field count. The shared input/select and
   delete-button styling is consolidated below to avoid repetition. */
.presold-lots-block, .amenity-block, .apartment-block, .btrbed-block, .spec-block { margin-top: var(--space-3); }
.presold-lots-block[hidden], .amenity-block[hidden], .apartment-block[hidden], .btrbed-block[hidden], .spec-block[hidden] { display: none; }

/* Column-label heading rows */
.presold-head, .amenity-head, .apartment-head, .btrbed-head, .spec-head {
  display: grid; gap: var(--space-2); margin: var(--space-2) 0 var(--space-1);
  font-size: var(--text-xs); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--color-text-faint);
}
.presold-head span:last-child, .amenity-head span:last-child,
.apartment-head span:last-child, .btrbed-head span:last-child,
.spec-head span:last-child { width: 2rem; }

/* Editable data rows */
.presold-row, .amenity-row, .apartment-row, .btrbed-row, .spec-row {
  display: grid; gap: var(--space-2); margin-bottom: var(--space-2); align-items: center;
}

/* Per-editor column geometry (label/data … trailing 2rem delete column) */
.presold-head, .presold-row   { grid-template-columns: 1.4fr 0.7fr 1fr 2rem; }
.amenity-head, .amenity-row   { grid-template-columns: 1.4fr 1fr 0.7fr 0.7fr 2rem; }
.apartment-head, .apartment-row { grid-template-columns: 1fr 0.7fr 0.8fr 0.9fr 0.9fr 2rem; }
.btrbed-head, .btrbed-row     { grid-template-columns: 1fr 0.7fr 0.8fr 0.9fr 2rem; }
.spec-head, .spec-row         { grid-template-columns: 1.1fr 0.7fr 0.7fr 0.7fr 0.8fr 0.9fr 2rem; }

/* Shared input + select styling (matches .build-row) */
.presold-row input, .presold-row select,
.amenity-row input, .amenity-row select,
.apartment-row input, .apartment-row select,
.btrbed-row input, .btrbed-row select,
.spec-row input, .spec-row select {
  width: 100%; padding: var(--space-2) var(--space-3);
  font-family: var(--font-mono); font-size: var(--text-sm);
  background: var(--color-surface-2); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); color: var(--color-text);
}
.presold-row select, .amenity-row select, .apartment-row select,
.btrbed-row select, .spec-row select { font-family: var(--font-sans); }
.presold-row input:focus, .presold-row select:focus,
.amenity-row input:focus, .amenity-row select:focus,
.apartment-row input:focus, .apartment-row select:focus,
.btrbed-row input:focus, .btrbed-row select:focus,
.spec-row input:focus, .spec-row select:focus {
  outline: none; border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft); background-color: var(--color-surface);
}

/* Shared delete buttons */
.presold-del, .amenity-del, .apartment-del, .btrbed-del, .spec-del {
  width: 2rem; height: 2rem; border: 1px solid var(--color-border);
  border-radius: var(--radius-md); background: var(--color-surface-2);
  color: var(--color-text-faint); font-size: var(--text-base); line-height: 1; cursor: pointer;
}
.presold-del:hover, .amenity-del:hover, .apartment-del:hover,
.btrbed-del:hover, .spec-del:hover { color: var(--color-negative); border-color: var(--color-negative); }

/* ---------- FEATURE 5: off-site improvements + cost schedules ---------- */
/* The off-site editor mirrors the amenity editor (label/cost/month/year/del);
   the cost-schedule editors are compact (amount/month/year/del) since there
   are several of them in the Ongoing Expenses panel. */
.offsite-block, .costsched-block { margin-top: var(--space-3); }
.offsite-block[hidden], .costsched-block[hidden] { display: none; }
.offsite-head, .costsched-head {
  display: grid; gap: var(--space-2); margin: var(--space-2) 0 var(--space-1);
  font-size: var(--text-xs); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--color-text-faint);
}
.offsite-head span:last-child, .costsched-head span:last-child { width: 2rem; }
.offsite-row, .costsched-row {
  display: grid; gap: var(--space-2); margin-bottom: var(--space-2); align-items: center;
}
.offsite-head, .offsite-row     { grid-template-columns: 1.4fr 1fr 0.7fr 0.7fr 2rem; }
.costsched-head, .costsched-row { grid-template-columns: 1.2fr 0.8fr 0.8fr 2rem; }
.offsite-row input, .offsite-row select,
.costsched-row input, .costsched-row select {
  width: 100%; padding: var(--space-2) var(--space-3);
  font-family: var(--font-mono); font-size: var(--text-sm);
  background: var(--color-surface-2); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); color: var(--color-text);
}
.offsite-row select, .costsched-row select { font-family: var(--font-sans); }
.offsite-row input:focus, .offsite-row select:focus,
.costsched-row input:focus, .costsched-row select:focus {
  outline: none; border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft); background-color: var(--color-surface);
}
.offsite-del, .costsched-del {
  width: 2rem; height: 2rem; border: 1px solid var(--color-border);
  border-radius: var(--radius-md); background: var(--color-surface-2);
  color: var(--color-text-faint); font-size: var(--text-base); line-height: 1; cursor: pointer;
}
.offsite-del:hover, .costsched-del:hover { color: var(--color-negative); border-color: var(--color-negative); }

/* Inputs derived from a table (e.g. BTR-driven avg-unit fields) read-only look */
.field.is-derived input { opacity: 0.55; cursor: not-allowed; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-5); font-size: var(--text-sm); font-weight: 600;
  border-radius: var(--radius-md); border: 1px solid transparent; white-space: nowrap;
}
.btn-primary { background: var(--color-primary); color: #fff; flex: 1; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--color-primary-hover); box-shadow: var(--shadow-md); }
.btn-primary:active { background: var(--color-primary-active); }
.btn-ghost { color: var(--color-text-muted); border-color: var(--color-border); background: var(--color-surface-2); }
.btn-ghost:hover { color: var(--color-text); border-color: var(--color-text-faint); }
.btn-soft { color: var(--color-primary); background: var(--color-primary-soft); }
.btn-soft:hover { background: color-mix(in srgb, var(--color-primary-soft) 75%, var(--color-primary)); }
.export-actions { display: flex; gap: var(--space-2); }

/* ---------- KPI cards ---------- */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); }
.kpi {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--space-4); box-shadow: var(--shadow-sm);
}
.kpi-label { font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 500; }
.kpi-value { font-family: var(--font-mono); font-size: var(--text-lg); font-weight: 600; margin-top: var(--space-1); letter-spacing: -0.02em; }
.kpi-sub { font-size: var(--text-xs); color: var(--color-text-faint); margin-top: 2px; }
.kpi-value.pos { color: var(--color-positive); }
.kpi-value.neg { color: var(--color-negative); }

/* ---------- Tables ---------- */
.table-panel { overflow: hidden; }
.table-scroll { overflow-x: auto; }
.data-table { font-size: var(--text-sm); }
.data-table th, .data-table td {
  padding: var(--space-3) var(--space-4); text-align: right; white-space: nowrap;
  border-bottom: 1px solid var(--color-divider);
}
.data-table thead th {
  font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--color-text-muted); background: var(--color-surface-offset);
  position: sticky; top: 0;
}
.data-table th:first-child, .data-table td:first-child {
  text-align: left; font-weight: 500; position: sticky; left: 0;
  background: var(--color-surface); z-index: 1;
}
.data-table thead th:first-child { background: var(--color-surface-offset); z-index: 2; }
.data-table tbody td { font-family: var(--font-mono); color: var(--color-text); }
.data-table tbody tr:hover td { background: var(--color-surface-2); }
.data-table tbody tr:hover td:first-child { background: var(--color-surface-2); }
.data-table tr.row-emphasis td { font-weight: 600; background: var(--color-surface-offset); }
.data-table tr.row-emphasis:hover td { background: var(--color-surface-offset); }
.data-table tr.row-emphasis td:first-child { background: var(--color-surface-offset); }
.data-table .val-pos { color: var(--color-positive); }
.data-table .val-neg { color: var(--color-negative); }
.cap-tag {
  display: inline-block; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600;
  color: var(--color-primary); background: var(--color-primary-soft);
  padding: 2px var(--space-2); border-radius: var(--radius-sm);
}

/* Compact variant for the dense monthly capital-stack table */
.data-table-compact { font-size: var(--text-xs); }
.data-table-compact th, .data-table-compact td { padding: var(--space-2) var(--space-3); }
.data-table-compact thead th strong, .data-table-compact td strong { font-weight: 700; }
.kpi-grid-compact { margin-bottom: var(--space-4); }
.capstack-note {
  margin-top: var(--space-3); font-size: var(--text-xs); line-height: 1.6;
  color: var(--color-text-muted); max-width: 95ch;
}
.capstack-note strong { color: var(--color-text); font-weight: 600; }
.capstack-note em { font-style: normal; color: var(--color-primary); font-weight: 600; }

/* ---------- Editable capital-stack grid (transposed) ---------- */
.panel-head #capstackResetAll { margin-top: var(--space-2); }
.cs-rowhead {
  text-align: left !important; white-space: nowrap;
  position: sticky; left: 0; z-index: 1;
  background: var(--color-surface); font-weight: 500;
  min-width: 170px;
}
.data-table thead th.cs-rowhead { z-index: 3; background: var(--color-surface-offset); }
.cs-rowhead em { font-style: normal; color: var(--color-text-faint); font-weight: 400; }
.cs-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cs-reset { width: 26px; padding-left: 0 !important; padding-right: 0 !important; position: sticky; left: 170px; background: var(--color-surface); z-index: 1; }
.data-table thead th.cs-reset { z-index: 3; background: var(--color-surface-offset); }
.cs-reset-row {
  font-size: var(--text-sm); line-height: 1; color: var(--color-text-faint);
  padding: 2px 4px; border-radius: var(--radius-sm);
}
.cs-reset-row:hover { color: var(--color-primary); background: var(--color-primary-soft); }
.cs-cell {
  width: 84px; text-align: right; font-family: var(--font-mono);
  font-size: var(--text-xs); padding: 3px 6px;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  background: transparent; color: var(--color-text-muted);
}
.cs-cell:hover { border-color: var(--color-divider); }
.cs-cell:focus { outline: none; border-color: var(--color-primary); background: var(--color-surface-2); color: var(--color-text); }
.cs-cell.is-edited {
  background: var(--color-primary-soft); color: var(--color-text);
  font-weight: 600; border-color: var(--color-primary);
}
/* Multi-input manual override: amber marker so the divergence from the
   auto schedule is always visible (hover the cell for the exact delta). */
.cs-cell.is-override {
  background: rgba(217, 144, 38, 0.16); border-color: #d99026;
  box-shadow: inset 2px 0 0 #d99026;
}
/* Source input flash when a grid edit back-solves and writes to it, so the
   user sees exactly where the synced value landed. */
@keyframes syncedFlash {
  0%   { background: var(--color-primary-soft); border-color: var(--color-primary); }
  100% { background: transparent; }
}
input.synced-flash { animation: syncedFlash 0.9s ease-out; }
.cs-calc { font-family: var(--font-mono); color: var(--color-text-faint); font-style: italic; }
.cs-total-col {
  position: sticky; right: 0; background: var(--color-surface-offset);
  font-weight: 600; border-left: 1px solid var(--color-divider);
}
.data-table thead th.cs-total-col { z-index: 3; }
.cs-section td {
  background: var(--color-surface-offset-2, var(--color-surface-offset));
  font-size: var(--text-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--color-text-muted);
  text-align: left !important; padding: var(--space-2) var(--space-3);
  position: sticky; left: 0;
}
.cs-totalrow td { font-weight: 600; background: var(--color-surface-2); }
.cs-totalrow .cs-rowhead { background: var(--color-surface-2); }
.data-table .val-muted { color: var(--color-text-faint); }

/* Capital-stack funding groups: equity / pre-lender (our money, NOT a lender
   outflow) vs lender-funded / post-loan (what the facility actually pays). The
   colored left rule makes the boundary unmissable on the cap stack. */
.cs-section-equity td {
  box-shadow: inset 4px 0 0 var(--color-text-faint);
  color: var(--color-text-muted);
}
.cs-section-lender td {
  box-shadow: inset 4px 0 0 var(--color-primary);
  color: var(--color-primary);
}

/* Collection-only months: build + infra complete, ongoing stopped, just
   collecting presold takedowns. Tinted green (pure inflow) so the waiting-and-
   collecting tail is obvious at a glance. */
.data-table td.cs-collect,
.data-table th.cs-collect {
  background: color-mix(in srgb, var(--color-positive-soft) 70%, var(--color-surface)) !important;
}
.data-table .cs-totalrow td.cs-collect {
  background: color-mix(in srgb, var(--color-positive-soft) 85%, var(--color-surface-2)) !important;
}
.data-table th.cs-collect { box-shadow: inset 0 -2px 0 var(--color-positive); }
.cs-collect .cs-cell { background: transparent; }
.cs-collect-dot { color: var(--color-positive); font-size: 0.7em; vertical-align: middle; }
.cs-collect-key {
  display: inline-block; margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  background: var(--color-positive-soft); color: var(--color-text-muted);
  border-left: 3px solid var(--color-positive);
}

.disclaimer { font-size: var(--text-xs); color: var(--color-text-faint); max-width: 90ch; line-height: 1.6; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--color-border); padding-block: var(--space-8); }
.site-footer p { font-size: var(--text-sm); color: var(--color-text-faint); text-align: center; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---------- Profit bridge inline notes ---------- */
/* The first cell holds a label + a wrapping explanatory note; override the
   data-table's nowrap so the note flows onto multiple lines instead of
   being clipped at the cell edge. */
#bridgeTable td:first-child,
#bridgeTable th:first-child {
  white-space: normal;
  max-width: 60ch;
}
.bridge-note {
  display: block;
  margin-top: 3px;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 400;
  line-height: 1.45;
  color: var(--color-text-muted);
  white-space: normal;
}

/* ============================================================
   SAVED PROJECTS BAR
   ============================================================ */
.projects-bar-wrap { margin-top: var(--space-5); }
.projects-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-3) var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.projects-bar-main { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); }
.projects-open { display: inline-flex; align-items: center; gap: var(--space-2); }
.projects-open-label {
  font-size: var(--text-xs); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--color-text-muted);
}
.projects-select {
  min-width: 220px; max-width: 320px;
  padding: var(--space-2) var(--space-3); font-family: var(--font-body);
  font-size: var(--text-sm); color: var(--color-text);
  background: var(--color-surface-2); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); cursor: pointer;
}
.projects-status-pick { display: inline-flex; align-items: center; gap: var(--space-2); }
.projects-select-status { min-width: 150px; max-width: 220px; }
.projects-actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.projects-actions .btn-sm { margin-top: 0; }
.projects-sep { width: 1px; height: 22px; background: var(--color-border); margin-inline: var(--space-1); }
.projects-bar-meta { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.projects-current { font-size: var(--text-xs); font-weight: 600; color: var(--color-text); }
.projects-status {
  font-size: var(--text-xs); color: var(--color-primary); font-weight: 500;
  opacity: 0; transform: translateY(-2px); transition: opacity .25s ease, transform .25s ease;
  min-height: 1em;
}
.projects-status.is-visible { opacity: 1; transform: translateY(0); }
.projects-note { margin-top: var(--space-2); font-size: var(--text-xs); color: var(--color-text-faint); }
.projects-howto { margin-top: var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); }
.projects-howto > summary {
  cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-1);
  font-weight: 600; color: var(--color-primary); list-style: none; width: fit-content;
  padding: 2px 0; user-select: none;
}
.projects-howto > summary::-webkit-details-marker { display: none; }
.projects-howto > summary::before { content: "\25B8"; transition: transform .15s ease; display: inline-block; }
.projects-howto[open] > summary::before { transform: rotate(90deg); }
.projects-howto-body {
  margin-top: var(--space-2); padding: var(--space-3) var(--space-4);
  background: var(--color-surface-2); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); line-height: 1.55; max-width: 760px;
}
.projects-howto-body p { margin: 0 0 var(--space-2); }
.projects-howto-body ul { margin: 0 0 var(--space-2); padding-left: var(--space-4); }
.projects-howto-body li { margin-bottom: var(--space-1); }
.projects-howto-body p:last-child { margin-bottom: 0; }
.projects-howto-stages { color: var(--color-text-faint); }

@media (max-width: 760px) {
  .projects-bar { flex-direction: column; align-items: stretch; }
  .projects-bar-meta { align-items: flex-start; text-align: left; }
  .projects-open, .projects-status-pick { display: flex; }
  .projects-select, .projects-select-status { max-width: none; flex: 1; }
}

/* ===== Account / cloud-sync bar + auth modal ===== */
.account-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-3); margin-bottom: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.account-state { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; }
.account-dot {
  width: 9px; height: 9px; border-radius: var(--radius-full);
  background: var(--color-text-faint); flex: none;
}
.account-bar.is-online .account-dot { background: var(--color-positive); }
.account-label { font-size: var(--text-sm); color: var(--color-text-muted); }
.account-bar.is-online .account-label { color: var(--color-text); }
.account-actions { display: inline-flex; align-items: center; gap: var(--space-2); }

.auth-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(12, 18, 30, 0.55); padding: var(--space-4);
}
.auth-modal[hidden] { display: none; }
.auth-card {
  position: relative; width: 100%; max-width: 380px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-xl); padding: var(--space-6);
  box-shadow: 0 20px 60px rgba(12, 18, 30, 0.35);
}
.auth-close {
  position: absolute; top: var(--space-3); right: var(--space-3);
  width: 30px; height: 30px; border: none; background: transparent;
  font-size: 1.4rem; line-height: 1; color: var(--color-text-faint); cursor: pointer;
  border-radius: var(--radius-sm);
}
.auth-close:hover { color: var(--color-text); background: var(--color-surface-offset); }
.auth-title { font-size: var(--text-lg); margin: 0 0 var(--space-1); color: var(--color-text); }
.auth-sub { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0 0 var(--space-4); }
.auth-tabs {
  display: flex; gap: var(--space-1); margin-bottom: var(--space-4);
  background: var(--color-surface-offset); padding: 3px; border-radius: var(--radius-md);
}
.auth-tab {
  flex: 1; border: none; background: transparent; cursor: pointer;
  padding: var(--space-2); font-size: var(--text-sm); font-weight: 600;
  color: var(--color-text-muted); border-radius: calc(var(--radius-md) - 2px);
}
.auth-tab.is-active { background: var(--color-surface); color: var(--color-text); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.auth-field { display: block; margin-bottom: var(--space-3); }
.auth-field span { display: block; font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); margin-bottom: 4px; }
.auth-field input {
  width: 100%; box-sizing: border-box; padding: var(--space-2) var(--space-3);
  font-size: var(--text-base); color: var(--color-text);
  background: var(--color-surface-2); border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.auth-field input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft); }
.auth-error { min-height: 1.1em; margin: 0 0 var(--space-3); font-size: var(--text-sm); color: var(--color-negative); }
.auth-card .btn-primary { width: 100%; justify-content: center; }
.auth-hint { font-size: var(--text-sm); color: var(--color-text-muted); margin: var(--space-3) 0 0; text-align: center; }
.linklike { border: none; background: none; padding: 0; color: var(--color-primary); cursor: pointer; font: inherit; text-decoration: underline; }

/* ===== FULL-SITE LOGIN GATE ===== */
/* Covers the whole viewport until the visitor authenticates. When the gate is
   active we also lock body scroll via the .gate-locked class. */
.gate {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-5);
  background: var(--color-bg);
  background-image: radial-gradient(120% 120% at 50% 0%, var(--color-surface-offset) 0%, var(--color-bg) 60%);
  overflow-y: auto;
}
.gate[hidden] { display: none; }
body.gate-locked { overflow: hidden; }
.gate-card {
  width: 100%; max-width: 420px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: 0 24px 60px rgba(12, 15, 22, 0.18);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}
.gate-brand {
  display: flex; align-items: center; justify-content: center; gap: 0.6rem;
  color: var(--color-primary); margin-bottom: var(--space-5);
}
.gate-brand .brand-logo { width: 150px; max-width: 60%; }
.gate-brand-name { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; color: var(--color-text); }
.gate-title { font-size: clamp(1.4rem, 3vw, 1.7rem); font-weight: 700; margin: 0 0 var(--space-2); color: var(--color-text); }
.gate-sub { margin: 0 0 var(--space-5); color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.5; }
.gate-tabs { display: flex; gap: 0.25rem; padding: 0.25rem; background: var(--color-surface-offset); border-radius: var(--radius-md); margin-bottom: var(--space-5); }
.gate-tab {
  flex: 1; border: none; background: none; cursor: pointer;
  padding: 0.55rem 0.5rem; border-radius: var(--radius-sm);
  font: inherit; font-weight: 600; font-size: var(--text-sm); color: var(--color-text-muted);
  transition: background 0.15s, color 0.15s;
}
.gate-tab.is-active { background: var(--color-surface); color: var(--color-text); box-shadow: 0 1px 2px rgba(12, 15, 22, 0.08); }
.gate-field { display: block; margin-bottom: var(--space-4); }
.gate-field span { display: block; font-size: var(--text-sm); font-weight: 600; color: var(--color-text); margin-bottom: 0.35rem; }
.gate-field input {
  width: 100%; box-sizing: border-box;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface-2); color: var(--color-text);
  font: inherit; font-size: var(--text-base);
}
.gate-field input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft); }
.gate-error { min-height: 1.1em; margin: 0 0 var(--space-3); font-size: var(--text-sm); color: var(--color-negative); }
.gate-submit { width: 100%; justify-content: center; padding: 0.75rem; font-size: var(--text-base); }
.gate-hint { font-size: var(--text-sm); color: var(--color-text-muted); margin: var(--space-4) 0 0; text-align: center; }

/* While we confirm the session on load, keep the app hidden to avoid a flash
   of the private workspace before the gate appears. wireGate() removes this
   class once the auth check resolves (whether signed in or not). */
body.auth-checking .site-header,
body.auth-checking main { visibility: hidden; }

/* Re-download last deck — appears only after a deck has been generated.
   Lets the user grab the exact prior .pptx without a new AI market-study run. */
.market-study-redownload { margin-top: var(--space-2); }
.market-study-redownload[hidden] { display: none; }
.market-study-redownload-note {
  margin: var(--space-2) 0 0; font-size: var(--text-sm);
  color: var(--color-text-muted); line-height: 1.4;
}
.market-study-redownload-note[hidden] { display: none; }
.market-study-redownload-note strong { color: var(--color-text); font-weight: 600; }

/* ===== TEMPORARY: hide "Connect Google Drive" feature until Google OAuth verification is approved =====
   To RE-ENABLE the Drive import feature after verification:
   remove the "drive-feature-off" class from <body> in index.html (the CSS below will then no longer apply).
   This hides both intake Drive panels (sales + rent) without touching the underlying logic. */
body.drive-feature-off #intakeDrivePanel,
body.drive-feature-off #rentIntakeDrivePanel {
  display: none !important;
}