/* ============================================================
   Fortress AMS — Tabbed-Dossier Asset Detail
   docs/design_handoff_prospect_crm (Layout C, breadcrumb variant).

   Two parts:
   1. RESKIN — a scoped remap of the royalty template's local cream/tan/
      brown tokens (the mt- and cat- custom properties defined in
      royalty-screen.css :root) onto the Fortress palette. Recolors the
      existing header, tiles, cards, breakdown, tracts and documents
      WITHOUT touching their markup or editing wiring.
      NOTE: never write a token name ending in *[slash] inside these
      comments — an asterisk-slash sequence terminates the comment and
      silently swallows the next rule (that exact bug shipped once).
   2. CHROME — the new tab bar, tab panels, and Overview-only additions
      (gold Current-Stage card, relationship strip, Activity/CRM stub).

   Requires fortress-tokens.css first; loaded after royalty-screen.css.
   ============================================================ */

/* ---- 1. Reskin remap (scoped to the dialog) ---------------- */
#asset-detail-dialog {
    /* warm backgrounds → cool Fortress neutrals */
    --mt-cream-100: var(--bg-surface);
    --mt-cream-50:  var(--bg-surface);
    /* tans are used as SOLID colors (borders, dividers, some fills/text
       accents) — map to solid cool grays, NOT the near-transparent alpha
       border tokens, or anything drawn with them washes out to invisible. */
    --mt-tan-100:   var(--bg-tertiary);
    --mt-tan-200:   var(--ink-200);
    --mt-tan-300:   var(--ink-300);
    /* brown text → ink ramp */
    --mt-brown-900: var(--ink-900);
    --mt-brown-800: var(--text-secondary);
    --mt-brown-700: var(--gold-text);
    /* burnt-orange accent/action → gold. brown-600 is the template's
       ACTION fill and carries white text in many components (stage CTA,
       Legal Description buttons, map badges, tract actions) — map it to
       the darker --gold-text (#8a6d34, ≥4.5:1 with white) so those labels
       stay WCAG AA (codex P2 on #70). brown-500 (hover/accent) stays on
       the brighter gold. */
    --mt-brown-600: var(--gold-text);
    /* brown-500's ONLY use is the :hover fill on the same white-text CTAs
       (.v6-action-submit/.v6-action-button) — keep it AA too, one step
       darker than rest so hover still reads (codex P2 follow-up). */
    --mt-brown-500: var(--gold-800);
    /* WI accent: legacy purple → Fortress WI blue (design uses blue) */
    --cat-wi: var(--badge-wi);
    /* semantic greens/reds (done/kill) + M&R green kept as-is */
    background: var(--bg-surface);
    /* Base UI font: the dialog otherwise inherits the app body's legacy
       Segoe/system stack (core-layout.css) — FONTS.md says Inter. */
    font-family: var(--font-body);
}

/* The template's section heads used the cream tint via --mt-cream-100;
   with the remap they become white. Keep a hairline separation. */
#asset-detail-dialog .bd-section-head { background: var(--bg-tertiary); }

/* ---- TRACTS tab — design skin (user's target screenshot #4) -----
   COLORS/TYPE/BORDERS ONLY — no display/size/height properties, so no
   data can be hidden and all columns/editing behave exactly as before.
   (The earlier zero-height Qtr Call clip was the hidden-panel autogrow
   bug, fixed in activateDossierTab — not colors.) */
#asset-detail-dialog .trk-group-head th {
    background: linear-gradient(180deg, var(--ink-800), var(--ink-950));
    color: var(--text-inverse);
    border-color: var(--ink-950);
}
#asset-detail-dialog .trk-group-head.trk-group-orphan th {
    background: linear-gradient(180deg, #6e6e73, #424245);
}
#asset-detail-dialog .trk-group-meta {
    background: hsla(0, 0%, 100%, .15);
    color: var(--text-inverse);
    border-radius: 999px;
}
#asset-detail-dialog .trk-group-toggle {
    background: hsla(0, 0%, 100%, .12);
    color: var(--text-inverse);
}
#asset-detail-dialog .trk-group-toggle:hover { background: hsla(0, 0%, 100%, .25); }
/* Bulk-action ribbon → navy command bar with outline chips */
#asset-detail-dialog .trk-bulk-ribbon {
    background: linear-gradient(180deg, var(--ink-800), var(--ink-950));
    color: var(--text-inverse);
    border-color: var(--ink-950);
}
#asset-detail-dialog .trk-bulk-count { color: var(--gold); }
#asset-detail-dialog .trk-bulk-btn {
    background: hsla(0, 0%, 100%, .08);
    color: var(--text-inverse);
    border: 1px solid hsla(0, 0%, 100%, .25);
    border-radius: 6px;
}
#asset-detail-dialog .trk-bulk-btn:hover { background: hsla(0, 0%, 100%, .18); }
#asset-detail-dialog .trk-bulk-btn.trk-bulk-btn-danger {
    /* --error-text (#b3261e) keeps the 12px white label >= 4.5:1 (codex P2);
       the bright --error is reserved for dots/tints, not text-bearing fills. */
    background: var(--error-text);
    border-color: var(--error-text);
    color: #fff;
}
/* COUNT toggle on-state (user reference crop): lighter green pill,
   darker green outline, dark green "On" label, solid green knob */
#asset-detail-dialog .trk-count-toggle.on {
    background: #dff3e7;
    border-color: var(--badge-mr);
}
#asset-detail-dialog .trk-count-toggle.on .trk-count-label { color: var(--badge-mr); }
#asset-detail-dialog .trk-count-toggle.on .trk-count-knob { background: var(--success); }
/* U/N/O segmented — active fills scoped per option because the BPO/APO
   payout pill reuses .trk-uno-opt (codex P2; a generic .trk-uno-opt.on
   rule here would flatten BPO/APO into one color). N = darker WI blue
   (user spec); U = the COUNT slider's Off red (--mt-kill #b00020, same
   as the Off knob/label); O = its On green (--badge-mr #1a7f45, same as
   the On outline/label). White letter stays >= 4.5:1 on every fill. */
#asset-detail-dialog .trk-uno-opt.trk-uno-N.on { background: var(--badge-wi); color: #fff; }
#asset-detail-dialog .trk-uno-opt.trk-uno-U.on { background: var(--mt-kill); color: #fff; }
#asset-detail-dialog .trk-uno-opt.trk-uno-O.on { background: var(--badge-mr); color: #fff; }
/* BPO/APO payout pill — keep the two states visually distinct on the
   Fortress palette (base was #1d6fa6 blue / #b96c28 MapTrax burnt
   orange): BPO = WI blue, APO = text-safe gold. */
#asset-detail-dialog .trk-payout-bpo.on { background: var(--badge-wi); color: #fff; }
#asset-detail-dialog .trk-payout-apo.on { background: var(--gold-text); color: #fff; }
/* Editing — unsaved pill → gold wash */
#asset-detail-dialog .trk-edit-badge {
    background: var(--gold-050);
    border-color: var(--gold-300);
    color: var(--gold-800);
}

/* ---- 1b. Fonts (docs/design_handoff_prospect_crm/FONTS.md) --
   The template hardcodes MapTrax-era font literals (Segoe/system base,
   ui-serif titles, Menlo monos). Repoint every literal at the three
   Fortress tokens: Playfair (titles + large numerals), Inter (all UI),
   mono (record IDs, legal/tract descriptors). */
#asset-detail-dialog .rs-modal { font-family: var(--font-body); color: var(--text-primary); }
#asset-detail-dialog button,
#asset-detail-dialog input,
#asset-detail-dialog select,
#asset-detail-dialog textarea { font-family: var(--font-body); }
/* Asset title — Playfair, not the inherited system sans. */
#asset-detail-dialog .v6-name { font-family: var(--font-display); font-weight: 700; }
/* Record id spans in the header eyebrow (#37 · MMS-1083) — mono. The
   :not([class]) guard keeps the category chip / stage pill / separators
   on Inter. */
#asset-detail-dialog .v6-eyebrow > span:not([class]) { font-family: var(--font-mono); }
/* Legal description = "legal/tract descriptors" → mono per FONTS.md
   (was ui-serif Georgia). */
#asset-detail-dialog .ld-textarea,
#asset-detail-dialog .ld-preview-doc,
#asset-detail-dialog .ld-compose-row-blurb { font-family: var(--font-mono); }
#asset-detail-dialog .ld-preview-eyebrow { font-family: var(--font-body); }
/* Lease-detail overlay: Segoe base + Menlo monos → tokens. NOT scoped to
   the dialog — openLeaseDetail() mounts .lp-overlay on document.body
   (codex P2), so a dialog-ancestor selector would never match. */
.lp-overlay { font-family: var(--font-body); }
.lp-overlay .mono,
.lp-overlay .lp-idbadge,
.lp-overlay .lz-id { font-family: var(--font-mono); }

/* ---- 2. Tab chrome ----------------------------------------- */
/* The tab bar + panels live INSIDE .asset-detail-content (the existing
   flex:1 scroll region), so the modal's proven layout is unchanged. */
/* Scoped to .rs-modal-frame so the legacy (non-royalty-template) dialog
   keeps its own padding/background (codex P2). */
#asset-detail-dialog .rs-modal-frame .asset-detail-content { background: var(--bg-surface); padding: 0; }

/* Rollup tiles: serif gold numerals per the design (Playfair + gold). */
#asset-detail-dialog .rs-tile-value {
    font-family: var(--font-display, Georgia, serif);
    color: var(--gold-muted);
    font-weight: 700;
}

/* Header stays pinned above the tab bar while long panels scroll
   (codex P2): .rs-top sticks at 0; the tab bar sticks just below it,
   offset by the header's measured height (--ad-header-h, set by
   renderRoyalty after each render). */
#asset-detail-dialog .rs-modal-frame .rs-top {
    position: sticky;
    top: 0;
    z-index: 8;
    background: var(--bg-surface);
}
.ad-tabbar {
    display: flex; gap: 2px; padding: 0 22px;
    border-bottom: 1px solid var(--border-primary); background: var(--bg-surface);
    position: sticky; top: var(--ad-header-h, 0px); z-index: 6; overflow-x: auto;
}
.ad-tabbar button {
    appearance: none; background: none; border: 0; border-bottom: 2px solid transparent;
    margin-bottom: -1px; padding: 12px 15px; font-family: inherit; font-size: 13px; font-weight: 600;
    color: var(--text-muted); cursor: pointer; white-space: nowrap;
    display: inline-flex; align-items: center; gap: 7px; transition: color .12s ease, border-color .12s ease;
}
.ad-tabbar button:hover { color: var(--text-secondary); }
.ad-tabbar button.on { color: var(--text-primary); border-bottom-color: var(--gold); }
.ad-tabbar button .ct {
    font-size: 10px; font-weight: 700; background: var(--bg-tertiary); color: var(--text-tertiary);
    border-radius: 999px; padding: 1px 7px; line-height: 1.6;
}
.ad-tabbar button.on .ct { background: var(--gold-subtle); color: var(--gold-800); }

.ad-tabpanel { padding: 20px 22px; }
.ad-tabpanel.ad-hidden { display: none !important; }
.ad-tabpanel > * + * { margin-top: 16px; }

/* Compact header: current-stage pill in the eyebrow row (design pic 4 —
   the full breadcrumb + spotlight relocate into Overview). */
.ad-stage-pill {
    display: inline-flex; align-items: center; padding: 3px 11px; margin-left: 4px;
    border-radius: 999px; background: var(--primary, #0a0a0f); color: #fff;
    font-size: 11px; font-weight: 600; white-space: nowrap; letter-spacing: .01em;
}

/* Overview lifecycle block — receives the LIVE .v6-breadcrumb and
   .v6-spotlight nodes (moved, not rebuilt, so all stage-advance wiring
   keeps working). Neutralize their edge-to-edge header styling so they
   sit like cards inside the padded panel. */
[data-ad-lifecycle] { display: flex; flex-direction: column; gap: 12px; }
[data-ad-lifecycle] .v6-breadcrumb { padding-left: 0; padding-right: 0; }
[data-ad-lifecycle] .v6-spotlight {
    border: 1px solid var(--gold-300);
    border-radius: var(--radius-lg, 12px);
    background: var(--gold-050);
}

/* ---- 3. Stage card (Current Stage / Closed) ---------------- */
.ad-stage-card {
    background: var(--bg-surface); border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg, 12px); padding: 14px 16px;
}
.ad-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--text-muted); }
.ad-stage-card .ad-eyebrow { margin-bottom: 7px; }
.ad-stage-copy { font-size: 12.5px; color: var(--text-secondary); line-height: 1.45; }
.ad-stage-card.is-prospect { background: var(--gold-050); border-color: var(--gold-300); }
.ad-stage-card.is-prospect .ad-eyebrow { color: var(--gold-text); }
.ad-stage-card.is-closed { background: var(--success-bg); border-color: rgba(52, 199, 89, .3); }
.ad-stage-card.is-closed .ad-eyebrow { color: #1a8c44; }

/* ---- 4. Relationship strip (S1 stub) ----------------------- */
.ad-rel-strip {
    display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
    background: var(--bg-surface); border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg, 12px); padding: 13px 18px;
}
.ad-rel-badge {
    display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 999px;
    font-size: 12px; font-weight: 700; background: var(--status-hot-bg); color: #c2500f;
}
.ad-rel-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--status-hot); }
.ad-rel-item { display: flex; flex-direction: column; gap: 3px; padding-left: 22px; border-left: 1px solid var(--border-subtle); }
.ad-rel-k { font-size: 9px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-muted); }
.ad-rel-v { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.ad-rel-cta { margin-left: auto; }

.ad-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    border-radius: var(--radius-md, 8px); font-family: inherit; font-weight: 600; font-size: 13px;
    height: 36px; padding: 0 15px; cursor: pointer; border: 1px solid transparent;
}
.ad-btn.gold { background: var(--gold); color: #241c08; border-color: var(--gold-muted); }
.ad-btn:disabled { opacity: .55; cursor: not-allowed; }

/* ---- 5. Activity / CRM stub -------------------------------- */
.ad-activity-stub {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
    padding: 48px 24px; background: var(--bg-surface); border: 1px dashed var(--gold-300);
    border-radius: var(--radius-lg, 12px);
}
.ad-activity-stub .badge {
    width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: var(--gold-subtle); color: var(--gold-muted); font-size: 22px;
}
.ad-activity-stub h4 { margin: 0; font-family: var(--font-display, Georgia, serif); font-weight: 700; font-size: 17px; color: var(--text-primary); }
.ad-activity-stub p { margin: 0; max-width: 460px; font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.ad-activity-stub .note { font-size: 11.5px; color: var(--text-muted); }

/* Payments summary reuses .ad-stage-card + a 3-up numeric grid */
.ad-pay-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ad-pay-grid .n { font-size: 20px; font-weight: 700; color: var(--text-primary); }

/* ============================================================
   Design-fidelity restyle of the EXISTING sections (user's five
   target screenshots). Functionality and markup untouched — every
   rule below is colors / typography / borders / radii only.
   ============================================================ */

/* ---- Section chassis (collapsible bars kept, design-styled) ---- */
#asset-detail-dialog .bd-section {
    background: var(--bg-surface);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg, 12px);
}
#asset-detail-dialog .bd-section-head {
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-subtle);
}
#asset-detail-dialog .bd-section-title {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--text-muted);
}
#asset-detail-dialog .bd-section-meta { color: var(--text-muted); }
#asset-detail-dialog .bd-section-chevron { color: var(--text-muted); }

/* ---- Asset Info cards → design card + field-row look ---- */
#asset-detail-dialog .ai-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg, 12px);
}
#asset-detail-dialog .ai-card-head {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: transparent;
    border-color: var(--border-subtle);
}
#asset-detail-dialog .ai-field { border-color: var(--border-subtle); }
#asset-detail-dialog .ai-card-locked-title { color: var(--text-primary); font-weight: 700; }
#asset-detail-dialog .ai-card-locked-detail { color: var(--text-muted); }
#asset-detail-dialog .ai-card-locked-icon { color: var(--gold-muted); }

/* ---- Breakdown → design tables (gold total row, type chips) ---- */
#asset-detail-dialog .bd-subhead {
    font-size: 11px; font-weight: 600; letter-spacing: .09em;
    text-transform: uppercase; color: var(--text-muted);
}
#asset-detail-dialog .bd-table th {
    font-size: 10px; font-weight: 600; letter-spacing: .06em;
    text-transform: uppercase; color: var(--text-muted);
    border-bottom: 1px solid var(--border-primary);
}
#asset-detail-dialog .bd-table td { border-color: var(--border-subtle); }
#asset-detail-dialog .bd-num { font-variant-numeric: tabular-nums; }
#asset-detail-dialog .bd-total td,
#asset-detail-dialog tr.bd-total td {
    background: var(--gold-050);
    font-weight: 700;
    color: var(--text-primary);
}
#asset-detail-dialog .bd-int-pill {
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
}
#asset-detail-dialog .bd-count { color: var(--text-muted); }

/* ---- Documents → design category strip + rows ---- */
#asset-detail-dialog .doc-tab {
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 12px;
}
#asset-detail-dialog .doc-tab:hover { color: var(--text-secondary); }
#asset-detail-dialog .doc-tab.active {
    color: var(--text-primary);
    border-bottom-color: var(--gold);
    background: none;
}
#asset-detail-dialog .doc-tab-count {
    background: var(--bg-tertiary);
    color: var(--text-tertiary);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
}
#asset-detail-dialog .doc-tab.active .doc-tab-count {
    background: var(--gold-subtle);
    color: var(--gold-800);
}
#asset-detail-dialog .doc-tab-strip { border-bottom: 1px solid var(--border-primary); }
#asset-detail-dialog .doc-row { border-color: var(--border-subtle); }
#asset-detail-dialog .doc-row-icon { color: var(--gold-muted); }
#asset-detail-dialog .doc-row-comments-badge {
    background: var(--bg-tertiary);
    color: var(--text-tertiary);
    border-radius: 999px;
}
#asset-detail-dialog .doc-browse { color: var(--gold-text); }

/* ---- Comments → design avatars + mentions ---- */
#asset-detail-dialog .doc-comment-avatar {
    background: var(--gold-100);
    color: var(--gold-800);
    font-weight: 700;
}
#asset-detail-dialog .doc-comment-author { color: var(--text-primary); font-weight: 700; }
#asset-detail-dialog .doc-comment-ts { color: var(--text-muted); }
#asset-detail-dialog .doc-comment-text { color: var(--text-secondary); }
#asset-detail-dialog .doc-comments-title {
    font-size: 11px; font-weight: 600; letter-spacing: .09em;
    text-transform: uppercase; color: var(--text-muted);
}

/* ---- Activity tab — CRM shell (design screenshot #2) ---- */
.ad-crm { display: grid; grid-template-columns: 1.7fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 1000px) { .ad-crm { grid-template-columns: 1fr; } }
.ad-crm .ad-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg, 12px);
    padding: 14px 16px;
}
.ad-crm .ad-eyebrow { margin-bottom: 10px; }
.ad-tp-types {
    display: flex; gap: 3px; background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle); border-radius: 8px; padding: 3px; margin-bottom: 10px;
}
.ad-tp-types button {
    flex: 1; appearance: none; background: none; border: 0; border-radius: 6px;
    padding: 8px; font-family: inherit; font-size: 12px; font-weight: 600;
    color: var(--text-tertiary); cursor: pointer;
}
.ad-tp-types button.on { background: var(--bg-surface); color: var(--text-primary); box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.08)); }
.ad-tp-area {
    width: 100%; min-height: 66px; border: 1px solid var(--border-primary); border-radius: 8px;
    padding: 10px 12px; font-family: var(--font-body); font-size: 13px; color: var(--text-primary);
    resize: vertical; background: var(--bg-surface);
}
.ad-tp-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: 12px; flex-wrap: wrap; }
.ad-tp-presets { display: flex; gap: 6px; margin: 6px 0; }
.ad-chipbtn {
    font-size: 11px; font-weight: 600; padding: 5px 11px; border-radius: 999px;
    border: 1px solid var(--border-strong); background: var(--bg-surface); color: var(--text-secondary); cursor: pointer;
}
.ad-chipbtn.on { background: var(--gold-subtle); border-color: var(--gold-300); color: var(--gold-800); }
.ad-datein {
    height: 32px; padding: 0 10px; border: 1px solid var(--border-primary); border-radius: 8px;
    font-family: var(--font-body); font-size: 12.5px; color: var(--text-primary); background: var(--bg-surface);
}
.ad-tl-item { display: flex; gap: 12px; padding: 0 0 16px; position: relative; }
.ad-tl-item:not(:last-child)::before {
    content: ""; position: absolute; left: 15px; top: 31px; bottom: 0; width: 1.5px; background: var(--border-strong);
}
.ad-tl-dot {
    width: 31px; height: 31px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; color: #fff; z-index: 1; font-size: 13px;
}
.ad-tl-dot.call { background: var(--info); } .ad-tl-dot.email { background: var(--gold-muted); }
.ad-tl-dot.meeting { background: var(--viz-purple); } .ad-tl-dot.note { background: var(--text-muted); }
.ad-tl-t { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.ad-tl-m { font-size: 11px; color: var(--text-muted); margin: 1px 0 5px; }
.ad-tl-x { font-size: 12.5px; color: var(--text-secondary); }
.ad-fu-empty, .ad-cal-note { font-size: 12px; color: var(--text-muted); }
.ad-cal-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ad-cal-hd .m { font-family: var(--font-display); font-weight: 700; font-size: 14px; }
.ad-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.ad-cal-grid .wd { font-size: 9px; font-weight: 700; color: var(--text-muted); text-align: center; padding: 2px 0; }
.ad-cal-d {
    aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
    font-size: 11px; color: var(--text-secondary); border-radius: 7px;
}
/* Live CRM calendar (issue #67 S4): gold FILL = a day with an open
   follow-up due (per the handoff); today is just a gold ring so it can't
   read as a scheduled day. */
.ad-cal-d.today { box-shadow: inset 0 0 0 1.5px var(--gold); font-weight: 700; color: var(--text-primary); }
.ad-cal-d.marked { background: var(--gold); color: #241c08; font-weight: 700; }
.ad-cal-nav {
    appearance: none; background: none; border: 1px solid var(--border-primary);
    border-radius: 6px; width: 22px; height: 22px; line-height: 1; cursor: pointer;
    color: var(--text-secondary); font-size: 13px; padding: 0;
}
.ad-cal-nav:hover { background: var(--bg-tertiary); }

/* --- Live CRM additions (issue #67 S3+S4) ------------------------------ */
/* Timeline: gold chip on a touchpoint that scheduled a follow-up. */
.ad-tl-fuchip {
    display: inline-block; margin-top: 6px; padding: 3px 10px; border-radius: 999px;
    font-size: 11px; font-weight: 600;
    background: var(--gold-subtle); border: 1px solid var(--gold-300); color: var(--gold-800);
}
/* Follow-up rows: 28px state-colored icon tile + label + date + actions.
   Text-bearing colors stay >= 4.5:1 (--error-text / --gold-text / --info). */
.ad-fu-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.ad-fu-row + .ad-fu-row { border-top: 1px solid var(--border-subtle); }
.ad-fu-ic {
    width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 13px; color: #fff;
}
.ad-fu-ic.overdue { background: var(--error-text); }
.ad-fu-ic.soon { background: var(--gold-muted); }
.ad-fu-ic.upcoming { background: var(--info); }
.ad-fu-ic.done { background: var(--text-muted); }
.ad-fu-main { flex: 1; min-width: 0; }
.ad-fu-label { font-size: 12.5px; font-weight: 600; color: var(--text-primary); }
.ad-fu-date { font-size: 11px; color: var(--text-muted); }
.ad-fu-date.overdue { color: var(--error-text); font-weight: 700; }
.ad-fu-act {
    appearance: none; width: 26px; height: 26px; padding: 0; cursor: pointer;
    background: var(--bg-surface); border: 1px solid var(--border-primary);
    border-radius: 7px; color: var(--text-secondary); font-size: 12px; line-height: 1;
}
.ad-fu-act:hover { background: var(--bg-tertiary); }
.ad-fu-row.done { opacity: .4; }
.ad-fu-row.done .ad-fu-label { text-decoration: line-through; }
/* Composer inline validation/save error. */
.ad-crm-err { margin-top: 6px; font-size: 12px; color: var(--error-text); }
/* "or in N days → date" affordance next to the preset chips. */
.ad-datein-wrap { display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.ad-datein-label { font-size: 11px; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.ad-daysin {
    width: 58px; height: 32px; padding: 0 8px; text-align: center;
    border: 1px solid var(--border-primary); border-radius: 8px;
    font-family: var(--font-body); font-size: 12.5px; color: var(--text-primary); background: var(--bg-surface);
}
/* Interactive mini-calendar: clickable future days + the picked day's
   blue ring (gold FILL still means "follow-up due that day"). */
.ad-cal-d.pickable { cursor: pointer; }
.ad-cal-d.pickable:hover { background: var(--bg-tertiary); }
.ad-cal-d.marked.pickable:hover { background: var(--gold); }
.ad-cal-d.picked { box-shadow: inset 0 0 0 2px var(--info); font-weight: 700; }
/* Follow-ups card header + calendar-subscription reveal row. */
.ad-fu-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.ad-sub-btn {
    appearance: none; cursor: pointer; font-size: 11px; font-weight: 600;
    padding: 4px 10px; border-radius: 999px;
    border: 1px solid var(--border-strong); background: var(--bg-surface); color: var(--text-secondary);
}
.ad-sub-btn:hover { background: var(--gold-subtle); border-color: var(--gold-300); color: var(--gold-800); }
.ad-sub-row { margin-bottom: 10px; padding: 9px 10px; background: var(--bg-tertiary); border-radius: 8px; }
.ad-sub-hint { font-size: 11px; color: var(--text-secondary); margin-bottom: 7px; }
.ad-sub-copy { display: flex; gap: 6px; }
.ad-sub-url {
    flex: 1; min-width: 0; height: 26px; padding: 0 8px;
    border: 1px solid var(--border-primary); border-radius: 7px;
    font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); background: var(--bg-surface);
}
/* Relationship badge temperature variants (derived Hot/Warm/Cold). The
   hot pair comes from the handoff (#c2500f on --status-hot-bg). */
.ad-rel-badge.hot { background: var(--status-hot-bg, rgba(255,85,0,.12)); color: #c2500f; }
.ad-rel-badge.hot .dot { background: var(--status-hot, #ff5500); }
.ad-rel-badge.warm { background: var(--gold-subtle); color: var(--gold-800); }
.ad-rel-badge.warm .dot { background: var(--gold-muted); }
.ad-rel-badge.cold { background: var(--bg-tertiary); color: var(--text-secondary); }
.ad-rel-badge.cold .dot { background: var(--text-muted); }

/* The dossier always relocates the comments column out of the Documents
   grid, so collapse its two explicit tracks to one — otherwise the docs
   column sits in track 1 with an empty track 2 eating half the width
   (codex P2). */
#asset-detail-dialog .docw-grid { grid-template-columns: 1fr; }

/* Relocated comments column (Overview bottom / Comments tab) — reads as a
   standalone design card outside the Documents grid. */
[data-ad-comments] .docw-comments-col {
    background: var(--bg-surface);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg, 12px);
    padding: 14px 16px;
}

/* ============================================================ */
/* v1.12.0.0 — Prospect/Asset Dossier handoff (docs/design_handoff_
   prospect_asset_dossier). 9-tab bar with line icons + the Comments
   two-column grid. Everything scoped to the dialog. */

/* [hidden] must beat explicit display: values on tabs/badges/rows —
   scoped to the dialog (the prototype declared it globally). */
#asset-detail-dialog [hidden] { display: none !important; }

/* Tab bar: hidden scrollbar + icon slot. */
.ad-tabbar { scrollbar-width: none; }
.ad-tabbar::-webkit-scrollbar { display: none; }
.ad-tab-ico { display: inline-flex; opacity: .7; }
.ad-tabbar button.on .ad-tab-ico { color: var(--gold-600, var(--gold)); opacity: 1; }
.ad-tabbar button:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus-gold, 0 0 0 3px rgba(201, 169, 98, .30));
}

/* Generic dossier card (the CRM section already scopes its own copy). */
#asset-detail-dialog .ad-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle, var(--border-primary));
    border-radius: var(--radius-card, 16px);
    box-shadow: var(--shadow-sm);
    padding: 14px 16px;
}

/* Comments tab — 1.15fr/1fr two-column grid (comments | touchpoints). */
.ad-cmgrid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 1000px) { .ad-cmgrid { grid-template-columns: 1fr; } }
.ad-cmgrid-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.ad-cmgrid .ad-eyebrow { margin-bottom: 10px; }
/* The relocated live comments column already gets standalone card chrome
   (rule above) — inside the .ad-card wrapper that would double-frame it. */
.ad-cmgrid [data-ad-comments] .docw-comments-col {
    border: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
}

/* ---- Leases tab (.lse-*) — dossier handoff §6. Net-new class family
   (the tract-side expander is .lz-*, the lease overlay .lp-*). ---- */
#asset-detail-dialog .lse-filters { display: flex; gap: 7px; margin-bottom: 12px; flex-wrap: wrap; }
#asset-detail-dialog .lse-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px;
    font: inherit; font-size: 11px; font-weight: 600; letter-spacing: .04em;
    color: var(--text-tertiary); background: var(--bg-surface);
    border: 1px solid var(--border-strong); border-radius: var(--radius-full, 999px);
    cursor: pointer; transition: all .15s var(--ease-default, ease);
}
#asset-detail-dialog .lse-chip:hover { color: var(--text-primary); background: var(--bg-tertiary); }
#asset-detail-dialog .lse-chip .n { font-variant-numeric: tabular-nums; color: var(--text-muted); }
#asset-detail-dialog .lse-chip.on { color: var(--primary); background: var(--gold-subtle); border-color: var(--gold-500, var(--gold)); }
#asset-detail-dialog .lse-chip.on .n { color: var(--gold-700, #8a713a); }
#asset-detail-dialog .lse-list { display: flex; flex-direction: column; gap: 9px; }
#asset-detail-dialog .lse {
    border: 1px solid var(--border-primary); border-radius: var(--radius-lg, 12px);
    background: var(--bg-surface); box-shadow: var(--shadow-xs); overflow: hidden;
    transition: box-shadow .15s var(--ease-default, ease), border-color .15s var(--ease-default, ease);
}
#asset-detail-dialog .lse:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
#asset-detail-dialog .lse.open { box-shadow: var(--shadow-lg); }
#asset-detail-dialog .lse-head { display: flex; align-items: center; gap: 16px; padding: 11px 14px; cursor: pointer; }
#asset-detail-dialog .lse-head:focus-visible { outline: 0; box-shadow: var(--shadow-focus-gold, 0 0 0 3px rgba(201, 169, 98, .3)); }
#asset-detail-dialog .lse.open .lse-head { background: var(--bg-tertiary); border-bottom: 1px solid var(--border-primary); }
#asset-detail-dialog .lse-chev {
    display: inline-flex; flex-shrink: 0; color: var(--text-muted);
    transition: transform .15s var(--ease-default, ease), color .15s var(--ease-default, ease);
}
#asset-detail-dialog .lse.open .lse-chev { transform: rotate(90deg); color: var(--gold-600, #a68b4b); }
#asset-detail-dialog .lse-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
#asset-detail-dialog .lse-name {
    font-family: var(--font-display, Georgia, serif); font-size: 15px; font-weight: 600;
    color: var(--text-primary); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#asset-detail-dialog .lse-sub { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#asset-detail-dialog .lse-sub .mono,
#asset-detail-dialog .lse-df .mono { font-family: var(--font-mono, ui-monospace, monospace); font-size: 10px; letter-spacing: 0; }
#asset-detail-dialog .lse-party { display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; min-width: 118px; }
#asset-detail-dialog .lse-party .k,
#asset-detail-dialog .lse-m .k,
#asset-detail-dialog .lse-df .k {
    font-size: 9px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted);
}
#asset-detail-dialog .lse-party .v { font-size: 12px; font-weight: 500; color: var(--text-secondary); white-space: nowrap; }
#asset-detail-dialog .lse-pill {
    flex-shrink: 0; padding: 3px 9px; border-radius: var(--radius-full, 999px); border: 1px solid;
    font-size: 9px; font-weight: 600; letter-spacing: .08em; white-space: nowrap;
}
#asset-detail-dialog .lse-ok { color: #1d7a37; border-color: rgba(52, 199, 89, .4); background: var(--success-bg, rgba(52, 199, 89, .1)); }
#asset-detail-dialog .lse-warn { color: #9a5b00; border-color: rgba(255, 159, 10, .45); background: var(--warning-bg, rgba(255, 159, 10, .1)); }
#asset-detail-dialog .lse-bad { color: #b3271f; border-color: rgba(255, 59, 48, .4); background: var(--error-bg, rgba(255, 59, 48, .1)); }
#asset-detail-dialog .lse-metrics { display: flex; gap: 18px; flex-shrink: 0; }
#asset-detail-dialog .lse-m { display: flex; flex-direction: column; gap: 2px; align-items: flex-end; min-width: 52px; }
#asset-detail-dialog .lse-m .v {
    font-family: var(--font-display, Georgia, serif); font-size: 15px; font-weight: 600;
    color: var(--text-primary); font-variant-numeric: tabular-nums; line-height: 1.1;
}
#asset-detail-dialog .lse-tct {
    flex-shrink: 0; padding: 2px 9px; border-radius: var(--radius-full, 999px);
    background: var(--bg-tertiary); border: 1px solid var(--border-primary);
    font-size: 10px; font-weight: 600; color: var(--text-tertiary); white-space: nowrap;
}
#asset-detail-dialog .lse-body { padding: 13px 14px 14px; }
#asset-detail-dialog .lse-body[hidden] { display: none; }
#asset-detail-dialog .lse-detail {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px 18px;
    padding: 12px 14px; margin-bottom: 13px; background: var(--bg-tertiary);
    border: 1px solid var(--border-primary); border-radius: var(--radius-md, 8px);
}
#asset-detail-dialog .lse-df { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#asset-detail-dialog .lse-df .v { font-size: 12px; color: var(--text-primary); }
#asset-detail-dialog .lse-tracts-head {
    display: flex; align-items: center; gap: 8px; margin-bottom: 7px;
    font-size: 9px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted);
}
#asset-detail-dialog .lse-tracts-head .ico { display: inline-flex; color: var(--gold-600, #a68b4b); }
#asset-detail-dialog .lse-tracts-head .ct {
    padding: 0 6px; border-radius: var(--radius-full, 999px); background: var(--bg-tertiary);
    border: 1px solid var(--border-primary); color: var(--text-tertiary);
}
#asset-detail-dialog .lse-tracts { border: 1px solid var(--border-primary); border-radius: var(--radius-md, 8px); overflow: hidden; }
#asset-detail-dialog .lse-body-actions { display: flex; gap: 9px; margin-top: 11px; }
@media (max-width: 1180px) {
    #asset-detail-dialog .lse-head { flex-wrap: wrap; gap: 10px 14px; }
    #asset-detail-dialog .lse-id { flex: 1 1 100%; }
    #asset-detail-dialog .lse-metrics { gap: 14px; }
    #asset-detail-dialog .lse-detail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* "+ Add Lease" tract picker — small anchored menu below the header action. */
.lse-add-menu {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 40;
    display: flex; flex-direction: column; min-width: 240px; max-height: 300px; overflow-y: auto;
    background: var(--bg-surface); border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg, 12px); box-shadow: var(--shadow-float, 0 12px 28px rgba(0,0,0,.12));
    padding: 5px;
}
.lse-add-menu button {
    appearance: none; background: none; border: 0; border-radius: var(--radius-sm, 6px);
    padding: 8px 10px; text-align: left; font: inherit; font-size: 12px; font-weight: 500;
    color: var(--text-secondary); cursor: pointer; white-space: nowrap;
}
.lse-add-menu button:hover { background: var(--gold-050); color: var(--gold-800); }

/* ---- Overview reconcile (dossier handoff §1) ---- */
/* Lifecycle breadcrumb rendered as a card inside the panel (it was
   relocated out of the header), per the handoff. */
#asset-detail-dialog [data-ad-lifecycle] .v6-breadcrumb {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-card, 16px);
    background: var(--bg-surface);
    box-shadow: var(--shadow-sm);
    padding: 10px 14px;
}

/* Rollup tiles: Playfair display numerals; editable = dashed gold +
   pencil-goes-gold on hover + shadow lift; locked keeps a muted lock. */
#asset-detail-dialog .rs-tile {
    border-color: var(--border-subtle);
    border-radius: var(--radius-lg, 12px);
    box-shadow: var(--shadow-xs);
    transition: box-shadow .15s var(--ease-default, ease), background .15s var(--ease-default, ease);
}
#asset-detail-dialog .rs-tile-value {
    font-family: var(--font-display, Georgia, serif);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}
#asset-detail-dialog .rs-tile-label { color: var(--text-muted); }
#asset-detail-dialog .rs-tile-editable {
    border-style: dashed;
    border-color: var(--gold-300, var(--gold));
}
#asset-detail-dialog .rs-tile-editable:hover {
    background: var(--bg-surface);
    box-shadow: var(--shadow-lg);
}
#asset-detail-dialog .rs-tile-pencil { opacity: .55; color: var(--text-tertiary); margin-left: 4px; }
#asset-detail-dialog .rs-tile-editable:hover .rs-tile-pencil { opacity: 1; color: var(--gold-600, var(--gold)); }
#asset-detail-dialog .rs-tile-editing input {
    background: var(--bg-surface);
    color: var(--text-primary);
    font-family: var(--font-display, Georgia, serif);
    font-size: 20px;
    outline: none;
    border-bottom: 2px solid var(--gold-500, var(--gold));
    border-radius: 0;
}
@keyframes rsflash {
    from { background: var(--gold-subtle, rgba(201, 169, 98, .15)); }
    to   { background: var(--bg-surface); }
}
#asset-detail-dialog .rs-tile-flash { animation: rsflash .7s var(--ease-default, ease) 1; }

/* ---- Documents tab: required-for-close checklist column (handoff §8) ---- */
#asset-detail-dialog .docw-grid:has([data-docw-checklist]:not([hidden])) {
    grid-template-columns: 1.3fr 1fr;
}
#asset-detail-dialog .docw-checklist-col {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg, 12px);
    padding: 14px 16px;
    align-self: start;
}
#asset-detail-dialog .docw-req-table { width: 100%; }
#asset-detail-dialog .docw-req-table td { padding: 7px 9px; font-size: 12px; }
#asset-detail-dialog .docw-req-ok {
    background: var(--success-bg, rgba(52, 199, 89, .1));
    border-color: rgba(52, 199, 89, .35);
    color: #248a3d;
}
#asset-detail-dialog .docw-req-warn {
    background: var(--warning-bg, rgba(255, 159, 10, .1));
    border-color: rgba(255, 159, 10, .4);
    color: #a86500;
}
#asset-detail-dialog .docw-req-hint { margin-top: 9px; font-size: 11px; color: var(--text-muted); }

/* Stakeholders card → Seller tab jump link */
#asset-detail-dialog .ai-seller-link { margin-top: 8px; text-align: right; }
#asset-detail-dialog .ai-seller-link a {
    font-size: 11px; font-weight: 600; color: var(--gold-600, var(--gold)); text-decoration: none;
}
#asset-detail-dialog .ai-seller-link a:hover { color: var(--gold-700, var(--gold)); text-decoration: underline; }

/* Footer: auto-saved chip + per-tab context note (handoff shell), on the
   cool palette instead of asset-detail.css's warm default. */
#asset-detail-dialog .asset-detail-actions {
    align-items: center;
    background: var(--bg-tertiary);
    border-top: 1px solid var(--border-primary);
    padding: 11px 20px;
}
#asset-detail-dialog .ad-foot-note {
    margin-right: auto;
    font-size: 11.5px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#asset-detail-dialog .ad-foot-saved { color: #248a3d; font-weight: 600; }

/* Leases tab: the lease number is a direct link into the full Lease
   Details screen — same affordance as the tract-side expander's #NNNN. */
#asset-detail-dialog .lse-id-link {
    appearance: none; background: none; border: 0; padding: 0;
    font-family: var(--font-mono, ui-monospace, monospace); font-size: 10.5px;
    font-weight: 600; color: var(--gold-700, #8a6d34); cursor: pointer;
    display: inline-flex; align-items: center; gap: 2px;
}
#asset-detail-dialog .lse-id-link:hover { color: var(--gold-800, #7a5f2c); text-decoration: underline; }
#asset-detail-dialog .lse-id-link .arr { font-size: 9px; }