/* ============================================================================
   CCAM — brand layer
   ----------------------------------------------------------------------------
   The palette and type treatment of the Goldfinch Apartments investment
   memorandum, applied to the platform. Sampled from the deck itself:

     navy    #0E1C2F  page/ink        #18293F card on dark   #223449 hairline
     gold    #C9A96E  accent          #A98B52 accent on light
     paper   #F4F2EE  section ground  #DFDAD1 rule           #FBFAF8 card
     slate   #6C7A8A  #97A3B0  #BCC7D3  #C8D2DD   supporting text and borders

   Three things carry the look, in order of effect:
     1. Gold uppercase eyebrow labels above every section and every KPI.
     2. A serif for display figures and page titles; sans everywhere else.
        The deck does exactly this — Cambria headlines, Arial body.
     3. White cards with a warm hairline on a paper ground, not grey fills.

   LOAD ORDER: after ccam-type.css, before ccam-mobile.css. This file only
   re-points design tokens and restyles presentation. It changes no layout
   geometry that scripts measure — the 40px header, the 200px/44px nav widths
   and every element size map.html computes against are untouched.

   NOT loaded on index.html: the launcher is its own dark surface and declares
   --text:#fff against #080a10. Re-pointing tokens there would put navy ink on
   a near-black background.

   To revert: remove the <link> from the six pages. Nothing else depends on it.
   ========================================================================== */


/* ── §0  brand constants ───────────────────────────────────────────────────
   Fixed values, not theme-dependent. Everything below refers to these.      */
:root{
  --brand-navy:#0E1C2F;
  --brand-navy-2:#18293F;
  --brand-navy-3:#223449;
  --brand-slate:#6C7A8A;
  --brand-gold-hi:#C9A96E;
  --brand-gold-deep:#A98B52;
  --brand-paper:#F4F2EE;
  --brand-rule:#DFDAD1;

  /* Source Serif 4 is bundled for identical display type on Windows/macOS. */
  --ccam-serif:'Source Serif 4',Cambria,Charter,Georgia,'Times New Roman',serif;
}

/* ── §1  light theme ───────────────────────────────────────────────────────
   Surfaces stay white; the paper tone is the *section* ground, exactly as on
   the deck's light slides — white cards floating on #F4F2EE.                */
:root{
  --bg:#ffffff;--bg2:#F4F2EE;--bg3:#EBE6DD;
  --text:#0E1C2F;--text2:#5B6775;--text3:#7B8593;
  --border:#E4DFD6;--border2:#D2CCC1;

  /* "blue" is the deck's navy — it carries LP figures, links and info states. */
  --blue:#223449;--blue-bg:#EEF1F5;--blue-text:#16283C;
  --gold:#A98B52;--gold-bg:#F2E9D6;--gold-text:#7A5D28;
  --green:#2E6A52;--green-bg:#E4EFE9;--green-text:#1E5340;
  --amber:#8A6626;--amber-bg:#F6ECD9;--amber-text:#674C17;
  --purple:#4A4370;--purple-bg:#EDECF4;--purple-text:#363057;
  --red:#9B2F2F;--red-bg:#F8E9E7;--red-text:#78221F;
  --gray-bg:#EFEBE4;--gray-text:#5B6775;

  --nav-bg:#0E1C2F;--nav-bg2:#18293F;
  --brand-gold:#C9A96E;--brand-blue:#223449;

  --radius:6px;--radius-lg:10px;

  /* map.html aliases */
  --surf:#ffffff;--surf2:#F4F2EE;
  --txt:#0E1C2F;--mut:#5B6775;--bdr:#E4DFD6;
  --acc:#A98B52;--acc-bg:#F2E9D6;

  /* shell chrome — the deck's cover navy, with its gold hairline */
  --shell-bg:rgba(14,28,47,.95);
  --shell-line:rgba(201,169,110,.28);
  --shell-txt:#F4F2EE;
  --shell-mut:rgba(244,242,238,.62);
  --shell-gold:rgba(201,169,110,.85);
  --shell-gold-hi:#C9A96E;
  --shell-hair:rgba(201,169,110,.20);
  --shell-menu-bg:#0E1C2F;

  --ccam-shadow:0 1px 2px rgba(14,28,47,.05),0 8px 24px rgba(14,28,47,.06);
  --ccam-shadow-strong:0 18px 52px rgba(14,28,47,.18);

  --brand-accent-on-dark:#C9A96E;
  --btn-pri-bg:#18293F;--btn-pri-bd:#18293F;--btn-pri-fg:#ffffff;
  --btn-pri-bg-hover:#223449;
}

/* ── §2  dark theme ────────────────────────────────────────────────────────
   The deck's dark slides: navy ground, slightly lifted navy cards, gold
   figures, cool slate supporting text. Replaces the warm brown-grey dark
   theme, which shared nothing with the brand.
   Both selectors carry identical values so OS-driven and explicit dark can
   never drift, matching the convention in ccam-shell.css.                   */
@media(prefers-color-scheme:dark){
  :root:not([data-theme=light]){
    --bg:#0E1C2F;--bg2:#152538;--bg3:#1C3048;
    --text:#F4F2EE;--text2:#BCC7D3;--text3:#8B9AAB;
    --border:#223449;--border2:#2E4459;

    --blue:#9BBBDF;--blue-bg:#16283C;--blue-text:#CBDCEF;
    --gold:#C9A96E;--gold-bg:#26313F;--gold-text:#DFC38D;
    --green:#5FBF9B;--green-bg:#14302A;--green-text:#95DCC0;
    --amber:#D9A24A;--amber-bg:#33280F;--amber-text:#EDC584;
    --purple:#A49CE0;--purple-bg:#262458;--purple-text:#C8C3F0;
    --red:#E08585;--red-bg:#3A1F1F;--red-text:#F0ADAD;
    --gray-bg:#152538;--gray-text:#BCC7D3;

    --surf:#0E1C2F;--surf2:#152538;
    --txt:#F4F2EE;--mut:#BCC7D3;--bdr:#223449;
    --acc:#C9A96E;--acc-bg:#26313F;

    --ccam-shadow:0 1px 2px rgba(0,0,0,.35),0 10px 30px rgba(0,0,0,.30);
    --ccam-shadow-strong:0 18px 52px rgba(0,0,0,.50);

    --btn-pri-bg:#C9A96E;--btn-pri-bd:#C9A96E;--btn-pri-fg:#0E1C2F;
    --btn-pri-bg-hover:#DFC38D;
  }
}
:root[data-theme=dark]{
    --bg:#0E1C2F;--bg2:#152538;--bg3:#1C3048;
    --text:#F4F2EE;--text2:#BCC7D3;--text3:#8B9AAB;
    --border:#223449;--border2:#2E4459;

    --blue:#9BBBDF;--blue-bg:#16283C;--blue-text:#CBDCEF;
    --gold:#C9A96E;--gold-bg:#26313F;--gold-text:#DFC38D;
    --green:#5FBF9B;--green-bg:#14302A;--green-text:#95DCC0;
    --amber:#D9A24A;--amber-bg:#33280F;--amber-text:#EDC584;
    --purple:#A49CE0;--purple-bg:#262458;--purple-text:#C8C3F0;
    --red:#E08585;--red-bg:#3A1F1F;--red-text:#F0ADAD;
    --gray-bg:#152538;--gray-text:#BCC7D3;

    --surf:#0E1C2F;--surf2:#152538;
    --txt:#F4F2EE;--mut:#BCC7D3;--bdr:#223449;
    --acc:#C9A96E;--acc-bg:#26313F;

    --ccam-shadow:0 1px 2px rgba(0,0,0,.35),0 10px 30px rgba(0,0,0,.30);
    --ccam-shadow-strong:0 18px 52px rgba(0,0,0,.50);

    --btn-pri-bg:#C9A96E;--btn-pri-bd:#C9A96E;--btn-pri-fg:#0E1C2F;
    --btn-pri-bg-hover:#DFC38D;
}

/* ── §3  eyebrow labels ────────────────────────────────────────────────────
   The single most recognisable element of the deck: a small gold uppercase
   label with wide tracking sitting above the thing it names. Every section
   heading and every KPI label in the platform becomes one.

   .sec-label loses its coloured left bar — the deck sets sections with the
   label itself, not with a rule. ccam-qol.js only reads the class and toggles
   .ccam-sec-collapsed on it, so collapsing still works untouched.           */
.sec-label,
.dp-label,
.rw-label,
.lease-year-title,
.met-lbl,
.ca-hdr > div,
.tbl-wrap thead th,
table thead th{
  text-transform:uppercase;
  letter-spacing:.09em;
  font-weight:700;
}
.sec-label,
.dp-label,
.rw-label,
.lease-year-title{
  color:var(--gold-text);
  font-size:10.5px;
  border-left:none;
  padding-left:0;
}
.sec-label{margin:22px 0 10px}
.sec-label:first-child{margin-top:0}
/* (v33.5 band and v33.8 in-band link rules removed in v33.14 — superseded by the v33.13 section-bar block below) */
.met-lbl{
  color:var(--gold-text);
  font-size:9.5px;
  margin-bottom:5px;
}
.tbl-wrap thead th,
table thead th,
.ca-hdr > div{
  font-size:10px;
  color:var(--text2);
  letter-spacing:.07em;
}

/* ── §4  display type ──────────────────────────────────────────────────────
   Serif for figures and page titles only, exactly as the deck does it: the
   headline and the KPI number are Cambria, every table cell and paragraph is
   Arial. Deliberately NOT applied to .mono / table cells — a serif column of
   figures scans worse than a tabular sans one, and ccam-type.css's tabular
   alignment is doing real work there.                                       */
h1, h2,
.tracker-title,
.rw-title,
.dp-name,
.met-val,
.rw-intent-t,
.empty-title{
  font-family:var(--ccam-serif);
  font-weight:600;
  letter-spacing:0;
}
h1,h2,.tracker-title,.rw-title{color:var(--text)}
.met-val{
  font-family:var(--ccam-serif);
  font-size:18px;
  font-weight:600;
  letter-spacing:0;
  font-variant-numeric:tabular-nums lining-nums;
  color:var(--text);
}
.dp-name{font-size:17px}
.rw-title{font-size:20px}

/* ── §5  surfaces ──────────────────────────────────────────────────────────
   White cards, warm hairline, barely-there shadow. KPI tiles become cards in
   their own right rather than grey fills — the deck's six-tile block.       */
.card,
.tracker-panel,
.tracker-toolbar,
.crm-card,
.prop-card,
.deal-card{
  background:var(--bg);
  border:1px solid var(--border);
  box-shadow:0 1px 1px rgba(14,28,47,.03);
}
.met,
.tracker-kpis .met,
.lease-year-card{
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:12px 14px;
}
.card-surface{background:var(--bg2)}
.tbl-wrap{border:1px solid var(--border)}
.tbl-wrap thead th,
table thead th{background:var(--bg2)}
hr,.divider{border-color:var(--border)}

/* ── §6  controls ──────────────────────────────────────────────────────────
   Primary action is navy on light, gold on dark — on a navy ground a navy
   button disappears. Focus rings are gold platform-wide.                    */
.btn.pri{
  background:var(--btn-pri-bg);
  border-color:var(--btn-pri-bd);
  color:var(--btn-pri-fg);
  font-weight:600;
}
.btn.pri:hover{background:var(--btn-pri-bg-hover);border-color:var(--btn-pri-bg-hover);opacity:1}
.btn{border:1px solid var(--border2);font-weight:500}
.btn:hover{background:var(--bg2);border-color:var(--brand-gold-deep)}
.btn.dng{color:var(--red);border-color:var(--border2)}
.btn.dng:hover{background:var(--red-bg);border-color:var(--red)}
:where(button,.btn,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--brand-gold-hi);
  outline-offset:1px;
}
input:focus,select:focus,textarea:focus{border-color:var(--brand-gold-deep)}

/* ── §7  navigation ────────────────────────────────────────────────────────
   Left nav stays on the light surface; the active item is marked in gold,
   which is already the pattern — this only warms the hairline and the rail.  */
.main-nav{border-right:1px solid var(--border)}
.nav-item.active{
  color:var(--gold-text);
  background:var(--gold-bg);
  border-left-color:var(--brand-gold-hi);
  font-weight:600;
}
.nav-section{
  color:var(--text3);
  text-transform:uppercase;
  letter-spacing:.09em;
}

/* ── §8  badges ────────────────────────────────────────────────────────────
   Squared off slightly; a 20px pill reads consumer, the deck's labels are
   rectangular.                                                              */
.badge{border-radius:4px;letter-spacing:.02em;font-weight:600}

/* ── §9  detail panels ─────────────────────────────────────────────────────
   Used by the broker and pipeline side panels on the right.                 */
.detail-panel{border-left:1px solid var(--border);box-shadow:-6px 0 28px rgba(14,28,47,.10)}
.dp-hdr{background:var(--bg2);border-bottom:1px solid var(--border)}
.dp-row{border-bottom:1px solid transparent}
.dp-row-lbl{font-size:12px;color:var(--text2)}

/* ── §10  modals ───────────────────────────────────────────────────────────
   The add/edit broker dialog was 480px wide with two cramped columns; the
   fields it carries need room to read as a form rather than a phone screen.
   Geometry only — no field is added, removed or renamed.                    */
.modal-backdrop{background:rgba(14,28,47,.42)}
.broker-modal{
  width:min(760px,94vw);
  max-height:88vh;
  border:1px solid var(--border);
  box-shadow:var(--ccam-shadow-strong);
}
.broker-modal .modal-hdr{padding:20px 26px}
.broker-modal .modal-hdr h3{
  font-family:var(--ccam-serif);
  font-size:19px;
  font-weight:600;
}
.broker-modal .modal-body{
  padding:22px 26px 24px;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px 20px;
}
.broker-modal .fld{gap:6px}
.broker-modal label{
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:9.5px;
  font-weight:700;
  color:var(--gold-text);
}
.broker-modal input,
.broker-modal select{
  padding:10px 12px;
  font-size:14px;
  border:1px solid var(--border2);
  border-radius:var(--radius);
}
.broker-modal .modal-actions{padding:16px 26px;gap:10px}
@media(max-width:820px){
  .broker-modal{width:96vw}
  .broker-modal .modal-body{grid-template-columns:1fr}
}

/* ── §11  brand marks ──────────────────────────────────────────────────────
   A gold rule under the shell header, the one piece of deck furniture that
   translates directly to an application chrome.                             */
#ccam-header{border-bottom:1px solid var(--shell-line)}
::selection{background:rgba(201,169,110,.28);color:inherit}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:6px}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}

/* ══ v33.13 — section headers, platform-wide, in the Due Diligence style ═════
   A solid bar with a gold left edge: small uppercase title, any count or
   note beside it in plain gray, and the section's buttons at its right end
   as ordinary small buttons. Collapsible sections open and close by
   clicking anywhere on the bar (no arrow); a closed bar goes quiet — gray
   edge, muted title. Replaces the v33.5 tinted band and the v33.8 "text
   link inside the band" treatment. Same block in ccam-brand.css and
   ccam-ui.css so every page gets it. */
html body .sec-label{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;box-sizing:border-box;min-height:36px;
  margin:26px 0 8px;padding:4px 12px;
  background:var(--bg2);border:1px solid var(--border);border-left:3px solid var(--gold);
  border-radius:var(--radius,8px);box-shadow:none;
  font-family:var(--ccam-font);font-size:11.5px;font-weight:700;letter-spacing:.07em;line-height:1.3;
  text-transform:uppercase;color:var(--text)}
@supports not (background: color-mix(in srgb, red 5%, transparent)){html body .sec-label{background:var(--bg2)}}
html body .sec-label:first-child{margin-top:0}
html body .sec-label::after{display:none!important;content:none!important}
/* counts and notes inside the bar read as plain text, like "Escrow day 15 of 71" */
html body .sec-label :is([id$="-count"],.cnt,.sec-meta,[style*="font-weight:400"],[style*="font-weight: 400"]){
  font-size:11.5px!important;font-weight:500!important;letter-spacing:0;text-transform:none;color:var(--text2)!important}
/* collapsible: the whole bar is the toggle; no arrow */
html body .sec-label.ccam-sec-toggle::before{display:none!important;content:none!important}
html body .sec-label.ccam-sec-toggle{cursor:pointer;transition:background .12s,border-color .12s}
html body .sec-label.ccam-sec-toggle:hover{background:var(--bg3,#eceae6);opacity:1}
html body .sec-label.ccam-sec-collapsed{border-left-color:var(--border2);background:var(--bg);color:var(--text2)}
html body .sec-label.ccam-sec-collapsed:hover{background:var(--bg2)}
/* a header that shares its row with buttons or a filter ("Investors / Add
   investor", "Active deals / Sort by"): the ROW becomes the bar, so any
   number of controls sit at its right end without overlapping. */
html body :is([style*="display:flex"],[style*="display: flex"]):not([style*="column"]):has(> .sec-label){
  position:relative;align-items:center!important;gap:8px;flex-wrap:wrap;box-sizing:border-box;min-height:36px;
  margin:26px 0 8px!important;padding:4px 8px 4px 12px!important;
  background:var(--bg2);border:1px solid var(--border);border-left:3px solid var(--gold);border-radius:var(--radius,8px)}
html body :is([style*="display:flex"],[style*="display: flex"]):not([style*="column"]):has(> .sec-label:first-child):first-child{margin-top:0!important}
html body :is([style*="display:flex"],[style*="display: flex"]):not([style*="column"]) > .sec-label{
  flex:1 1 auto;min-width:0;min-height:26px;margin:0!important;padding:0!important;border:0!important;background:none!important;border-radius:0}
html body :is([style*="display:flex"],[style*="display: flex"]):not([style*="column"]) > .sec-label ~ :is(.btn,button){
  position:static;transform:none;margin:0;
  background:var(--bg)!important;border:1px solid var(--border2)!important;border-radius:6px!important;box-shadow:none!important;
  padding:4px 11px!important;font-size:12px!important;font-weight:500!important;letter-spacing:0;text-transform:none;
  color:var(--text)!important;text-decoration:none!important}
html body :is([style*="display:flex"],[style*="display: flex"]):not([style*="column"]) > .sec-label ~ :is(.btn,button):hover{
  background:var(--bg2)!important;border-color:var(--text3)!important}
html body :is([style*="display:flex"],[style*="display: flex"]):not([style*="column"]):has(> .sec-label.ccam-sec-collapsed){border-left-color:var(--border2);background:var(--bg)}
/* launcher admin sections use the same bar */
html body .admin-section-title{display:flex;align-items:center;gap:10px;min-height:36px;box-sizing:border-box;padding:4px 12px;
  background:var(--bg2);border:1px solid var(--border);border-left:3px solid var(--gold);border-radius:var(--radius,8px);
  font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text)}
/* the dashboard's Portfolio overview header and the attention panel follow suit */
html body .ov-bar{display:flex;align-items:center!important;justify-content:space-between;gap:10px;flex-wrap:wrap;box-sizing:border-box;
  min-height:36px;margin:26px 0 10px!important;padding:4px 8px 4px 12px!important;
  background:var(--bg2);border:1px solid var(--border);border-left:3px solid var(--gold);border-radius:var(--radius,8px)}
html body .ov-bar > div:first-child{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;min-width:0}
html body .ov-bar .ov-title{font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text)}
html body .ov-bar .ov-sub{margin:0;font-size:11.5px;font-weight:500;color:var(--text2)}
html body .ccam-att-hd.ccam-sec-toggle::before{display:none!important;content:none!important}
html body .ccam-att{border-left:3px solid var(--gold)}
html body .ccam-att-hd h3{font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text)}