/* ==========================================================================
   JEAN LLESES — computation tool, dark theme
   --------------------------------------------------------------------------
   The tool shipped as a light page (#F5F7FA) with a navy header, on a site
   that is otherwise near-black. It read as a different product. This brings it
   onto the site's palette without touching a line of its 63KB of working
   calculation logic.

   The page is token-driven, but two of its tokens do double duty, so a
   straight flip does not work:

     --white   background on .card / select / .opt-card / .val-panel,
               AND text colour on the navy bands.
     --navy    background on 19 selectors (header, hero, agent band, footer),
               AND text colour on 31 (headings, figures, labels).

   So the tokens that have ONE job are flipped, and the two that have two jobs
   are left alone and their selectors handled explicitly below. Loaded after
   the page's own <style>, so :root here wins.
   ========================================================================== */

:root {
  /* Single-role tokens — safe to flip. */
  --off: #07090F;            /* page ground        (background only) */
  --surface: #0D1220;        /* section ground     (background only) */
  --text: #C8CDD8;           /* body ink           (colour only)     */
  --muted: #8A94A8;          /* secondary ink      (colour only)     */
  --border: rgba(143, 184, 223, .20);

  --shadow: 0 14px 44px rgba(0, 0, 0, .55);
  --shadow-sm: 0 3px 14px rgba(0, 0, 0, .40);

  /* The stray warm gold left over from the source palette. */
  --gold2: #5980A6;
  --gold-dark: #5980A6;

  --radius: 10px;
  --radius-sm: 6px;
}

/* --------------------------------------------------------------------------
   Surfaces that used --white as a GROUND. --white itself stays #fff so the
   text on the navy bands is unaffected.
   -------------------------------------------------------------------------- */
.card, .opt-card, .val-panel {
  background: #121929;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
select, input, textarea {
  background: #0D1220 !important;
  color: #E8EEF6 !important;
  border: 1px solid var(--border) !important;
}
select:focus, input:focus, textarea:focus { border-color: var(--gold) !important; outline: none; }
select option { background: #0D1220; color: #E8EEF6; }

/* --------------------------------------------------------------------------
   Text that used --navy as INK. On the light page this was near-black on
   white; here it has to be near-white on dark. Enumerated rather than done
   by flipping the token, because --navy is also 19 backgrounds.
   -------------------------------------------------------------------------- */
.field-group label, .area-val, .cRow.hl .cL, .cRow.hl .cV, .balance-row .bv,
.dp-term-row .term-val, .bf-title, .bf-term, .bf-amt, .cf-title, .cf-amt,
.cf-pct, .empty h2, .no-comp strong, .pdf-opts-title, .pdf-opts-row > label,
#clientName, .term-pick, .ha-card-title, .ha-opt-h, .ha-total span,
.ha-terms-title, .ha-perks-title, .val-gallery-btn {
  color: #E8EEF6;
}
/* Figures are the point of this page — they take the display face and the
   accent, the way prices do everywhere else on the site. */
.cRow.hl .cV, .balance-row .bv, .bf-amt, .cf-amt, .ha-total span {
  font-family: 'Cormorant Garamond', Georgia, serif;
  color: var(--gold);
}
.bf-title, .cf-title, .ha-card-title, .empty h2 {
  font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400;
}
.field-group label, .pdf-opts-title, .ha-terms-title, .ha-perks-title {
  font-family: 'Montserrat', system-ui, sans-serif; font-size: 10px;
  font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold);
}

/* Chips that sit ON a navy band already — they keep dark ink on a light
   chip, which is correct and must NOT be lifted with the block above. */
.unit-hero .prop-badge, .opt-head .dp-tag, .ha-badge, .cred-badge .cb-num {
  color: #07090F;
}

/* --------------------------------------------------------------------------
   Bands. The source navy is lighter than the site ground, so each band is
   pulled to the site's own surface colours to sit in the same family.
   -------------------------------------------------------------------------- */
header, .contact-strip, .footer-bar, .agent-section { background: #0D1220; }
.unit-hero, .opt-head, .val-panel-hd, .ha-head, .ha-preq-hd { background: #121929; }
.monthly-box, .ha-lease-hero {
  background: linear-gradient(135deg, #16223A, #0D1220);
  border: 1px solid var(--border);
}
header { border-bottom: 1px solid var(--border); }
.footer-bar { border-top: 1px solid var(--border); }

/* Buttons follow the site: accent fill takes near-black type. */
.btn-primary { background: var(--gold); color: #07090F; border: 1px solid var(--gold); }
.btn-primary:hover { background: var(--gold-light); color: #07090F; border-color: var(--gold-light); }
.btn-outline { border: 1px solid var(--border); color: #E8EEF6; background: transparent; }
.btn-outline:hover { border-color: var(--gold); color: var(--gold); background: rgba(143,184,223,.08); }
.fab-main { background: var(--gold); color: #07090F; }

/* --------------------------------------------------------------------------
   Empty state — the first thing every visitor sees, and it was a grey blank.
   -------------------------------------------------------------------------- */
.empty {
  border: 1px solid var(--border); background: linear-gradient(180deg, #0D1220, #07090F);
  padding: clamp(40px, 7vw, 76px) 24px;
}
.empty h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); color: #E8EEF6; }
.empty p { color: var(--muted); }

/* Table rows read as a ledger rather than a grid of boxes. */
.cRow { border-bottom: 1px solid rgba(143, 184, 223, .10); }
.cRow.hl { background: rgba(143, 184, 223, .06); }

/* --------------------------------------------------------------------------
   Print — buyers print these sheets, and paper is white.
   -------------------------------------------------------------------------- */
@media print {
  :root { --off: #fff; --surface: #fff; --text: #111; --muted: #555; --border: #ccc; }
  body { background: #fff !important; color: #111 !important; }
  .card, .opt-card, .val-panel, .empty { background: #fff !important; box-shadow: none !important; }
  header, .contact-strip, .footer-bar, .agent-section, .unit-hero,
  .opt-head, .monthly-box { background: #f2f4f8 !important; }
  .field-group label, .area-val, .cRow.hl .cL, .cRow.hl .cV, .balance-row .bv,
  .bf-title, .bf-amt, .cf-title, .cf-amt, .empty h2 { color: #111 !important; }
  .cRow.hl .cV, .bf-amt, .cf-amt { color: #1C3557 !important; }
  .fab-main, .fab-options, .btn, select { display: none !important; }
}