/* MapTracts MMS — Royalty Screen CSS
 *
 * v2.14.0.0 R1: design-token bedrock + collapsible-section chassis + the
 *               V6 Header, Rollup tiles, and AI1 Asset Info section styles.
 *
 * Tokens ported verbatim from docs/design_handoff_mms_royalty_screen/
 * Header Explorations.html. Reconciled with the existing tokens in
 * css/asset-detail.css — the few legacy variables that overlap
 * (--mt-tan, --mt-brown) use the values the design now expects.
 *
 * This file is loaded ONLY for Royalty / Mineral category holdings.
 * Other categories continue to use the legacy css/asset-detail.css
 * via the `generic` fallback template, so nothing they render changes.
 *
 * Subsequent R phases append to this file:
 *   R2 → Tracts section + calculators + U/N/O selector + Count toggle
 *   R3 → Legal Description editor + preview pane
 *   R4 → Breakdown polish (most of BD1 already lives here under .bd-*)
 *   R5 → Map section + floating layer controls
 *   R6 → Comments column + threading + @-mentions
 */

/* ============================================================
 * Design tokens (Header Explorations.html top of file)
 * ============================================================ */

:root {
    /* Browns + tans (warm palette) */
    --mt-brown-900: #5a3a1d;
    --mt-brown-800: #7a4d27;
    --mt-brown-700: #8a5a2f;
    --mt-brown-600: #b96c28;   /* primary action / burnt orange */
    --mt-brown-500: #d17b2f;
    --mt-tan-300:   #d4c5b0;
    --mt-tan-200:   #ede4d4;
    --mt-tan-100:   #f5efe8;
    --mt-cream-100: #faf6ed;
    --mt-cream-50:  #fbf7f1;

    /* Status semantics */
    --mt-done-bg:   #eef7ed;
    --mt-done-bd:   #9bc89a;
    --mt-done-fg:   #2e7d32;
    --mt-kill:      #b00020;

    /* Category accents */
    /* v2.14.0.9: Mineral + Royalty merged. Both legacy vars retained as
       aliases so any in-flight render with the old class names still
       resolves to the combined green. */
    --cat-mineralroyalty: #1a8c44;
    --cat-mineral:    #1a8c44;
    --cat-royalty:    #1a8c44;
    --cat-wi:         #6b5b95;
    --cat-realestate: #2a6fdb;
    --cat-other:      #6b7280;

    /* Interest-type colors (used in R2 Tracts section) */
    --int-executive:  #b96c28;
    --int-nemi:       #1a8c44;
    --int-orri:       #6b5b95;
    --int-npri:       #a1577c;

    /* U/N/O status pill (R2) */
    --status-u: #a14040;
    --status-n: #1d6fa6;
    --status-o: #d68a1a;
}

/* ============================================================
 * Section chassis — every section uses .bd-section
 *
 * Header (chevron + title + meta + right-side actions) sits at the top;
 * body collapses with a max-height + opacity transition. Chevron rotates
 * −90° when collapsed.
 *
 * Chevron is positioned so every section's chevron aligns vertically at
 * 35px from the modal left edge (modal body padding 22 + card border 1
 * + head padding 12 = ~35).
 * ============================================================ */

.rs-modal {
    display: block;
    background: var(--mt-cream-50);
    padding: 18px 22px;
    /* v1.5.1.0: no pixel cap — fill the dialog (which now spans the monitor)
       so wide tract tables aren't squeezed into a 1500px column. */
    max-width: none;
    margin: 0 auto;
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI",
                 Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #2a1f12;
}

/* v2.14.0.32: the entire Asset/Prospect Details dialog scrolls as one
   page. Earlier passes (v2.14.0.30 `display: contents`, v2.14.0.31
   nested `flex: 1` + inner `overflow-y: auto`) made the top sections
   feel locked while only the lower sections (Breakdown / Tracts /
   Documents) scrolled — user feedback: "everything doesn't appear to
   be connected to each other."
   `.rs-modal-frame` is now the single scroll container; its parent
   `.asset-detail-dialog` (display:flex, max-height:92vh,
   overflow:hidden) constrains it and `min-height: 0` lets it shrink.
   Inside the frame, .rs-top and .asset-detail-content stack normally
   and scroll together. */
.rs-modal-frame {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* Top sections and legacy .asset-detail-content both shrink to fit
   their content while inside the royalty frame — the FRAME owns the
   scroll, no nested scrollers. */
.rs-modal-frame .rs-top,
.rs-modal-frame .asset-detail-content {
    flex: 0 0 auto;
    overflow: visible;
}

.bd-section {
    background: #fff;
    border: 1px solid var(--mt-tan-300);
    border-radius: 8px;
    /* v2.14.0.5 R1 hotfix — match the 12px inset used by .v6-header,
       .v6-breadcrumb, .v6-spotlight, .rs-rollup. The Asset Info card
       lives in the same .rs-modal-frame parent and previously hugged
       the modal edge; now all royalty sections sit at consistent
       inset. */
    margin-left: 12px;
    margin-right: 12px;
    margin-bottom: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.bd-section-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--mt-cream-100);
    border-bottom: 1px solid var(--mt-tan-200);
    cursor: pointer;
    user-select: none;
}

.bd-section-chevron {
    width: 22px;
    height: 22px;
    border: none;
    background: transparent;
    color: var(--mt-brown-800);
    font-size: 13px;
    cursor: pointer;
    transition: transform 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.bd-section.collapsed .bd-section-chevron {
    transform: rotate(-90deg);
}

.bd-section-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mt-brown-800);
    flex: 0 0 auto;
}

.bd-section-meta {
    font-size: 12px;
    color: #888;
    flex: 1 1 auto;
    text-align: right;
    padding-right: 6px;
}

.bd-section-body {
    transition: max-height 0.25s ease, opacity 0.25s ease, padding 0.25s ease;
    max-height: 4000px;
    opacity: 1;
    padding: 14px;
}

.bd-section.collapsed .bd-section-body {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
}

/* ============================================================
 * Breakdown BD1 (Section 4 — Mineral/Royalty only)
 * Per docs/design_handoff_mms_royalty_screen — two side-by-side
 * tables (By Interest Type · By County) + Areas of Interest pill row.
 * `.bd-section`, `.bd-section-head`, `.bd-section-chevron`,
 * `.bd-section-title`, `.bd-section-meta`, `.bd-section-body`
 * are already defined above and shared with Asset Info / future
 * sections.
 * ============================================================ */

.bd-subhead {
    font-size: 11px;
    font-weight: 700;
    color: var(--mt-brown-700);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding-bottom: 6px;
    margin-bottom: 8px;
    border-bottom: 1px dashed var(--mt-tan-200);
}
.bd-count { color: #999; font-weight: 500; }

.bd-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}
.bd-table th {
    text-align: left;
    padding: 6px 8px;
    background: var(--mt-cream-100);
    color: #6b5236;
    font-weight: 600;
    font-size: 13px;
    border-bottom: 1px solid var(--mt-tan-200);
}
.bd-table td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--mt-tan-200);
    color: #2c1d0a;
    vertical-align: middle;
}
.bd-table tbody tr:last-child td { border-bottom: none; }
.bd-table tbody tr:hover { background: var(--mt-cream-50); }
.bd-table th.bd-num,
.bd-table td.bd-num {
    text-align: right;
}
.bd-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.bd-total td {
    background: var(--mt-cream-50);
    border-top: 1px solid var(--mt-tan-300);
    font-weight: 700;
    color: var(--mt-brown-800);
}

.bd-int-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px 2px 6px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid currentColor;
    line-height: 1;
    white-space: nowrap;
}
.bd-int-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.bd-aoi-row {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--mt-tan-200);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.bd-aoi-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--mt-brown-700);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.bd-aoi-pills { display: flex; gap: 4px; flex-wrap: wrap; }
.bd-aoi-pill {
    background: var(--mt-cream-100);
    border: 1px solid var(--mt-tan-300);
    color: var(--mt-brown-800);
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 500;
}
.bd-aoi-empty {
    font-size: 12px;
    color: #b3a487;
    font-style: italic;
}

.bd1-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.bd1-col { min-width: 0; }

/* Do Not Count mirror — the Count-Off lines' own By Interest Type / By County
   tables, rendered under the counted grid (same dashed-divider idiom as
   .bd-aoi-row). */
.bd1-excluded {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed var(--mt-tan-200);
}
.bd1-excluded-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--mt-brown-700);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
}

/* v2.14.1.1: align the lower sections (BD1 Breakdown, legacy Tracts,
   Documents/Comments row) with the top sections (V6 Header / Rollup /
   Asset Info) at a consistent 12px inset from the modal edge. The
   legacy `.asset-detail-content` adds 16px 20px padding which pushes
   its children to 32px inset, mismatched with the 12px inset the
   top sections use via .bd-section / .v6-header margins. Zero its
   horizontal padding when it lives inside the royalty frame and let
   each child section carry its own 12px margin. */
.rs-modal-frame .asset-detail-content {
    padding-left: 0;
    padding-right: 0;
}
.rs-modal-frame .asset-detail-content > .asset-detail-section,
.rs-modal-frame .asset-detail-content > .asset-detail-bottom-row {
    margin-left: 12px;
    margin-right: 12px;
}

/* ============================================================
 * Legal Description LD4 (Section 5)
 * Per docs/design_handoff_mms_royalty_screen — editor + preview pane
 * split layout. Re-uses .bd-section for the outer card so chevron +
 * 12px modal inset match the other sections.
 * ============================================================ */

/* Header — lock badge + edit/save/cancel/copy/preview-toggle row. */
.ld-section-head {
    /* No overrides — uses .bd-section-head as-is. The .ld-actions group
       at the right is the only LD-specific addition. */
}
.ld-lock-badge {
    font-size: 11px;
    font-weight: 600;
    color: var(--mt-brown-700);
    background: var(--mt-cream-100);
    border: 1px solid var(--mt-tan-300);
    padding: 2px 8px;
    border-radius: 999px;
    margin-left: 4px;
    white-space: nowrap;
}
.ld-edit-badge {
    color: #b96c28;
    border-color: #b96c28;
    background: #fff7eb;
    animation: ld-edit-pulse 2s ease-in-out infinite;
}
@keyframes ld-edit-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(185,108,40,0.0); }
    50%      { box-shadow: 0 0 0 4px rgba(185,108,40,0.18); }
}

.ld-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
}
.ld-icon {
    background: transparent;
    border: 1px solid var(--mt-tan-300);
    color: var(--mt-brown-800);
    padding: 4px 8px;
    border-radius: 5px;
    font-size: 12px;
    cursor: pointer;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.ld-icon:hover {
    background: var(--mt-cream-50);
    border-color: var(--mt-brown-600);
    color: var(--mt-brown-900);
}
.ld-icon.ld-icon-on {
    background: var(--mt-brown-600);
    color: #fff;
    border-color: var(--mt-brown-600);
}
.ld-icon.ld-icon-on:hover { background: var(--mt-brown-700); }
.ld-save-btn { color: #2e7d32; border-color: #9bc89a; }
.ld-save-btn:hover { background: #eef7ed; }
.ld-cancel-btn { color: #b91c1c; border-color: #f0b8b8; }
.ld-cancel-btn:hover { background: #fee2e2; }

/* Body — split-pane (editor + preview). */
.ld-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    transition: grid-template-columns 0.25s ease;
}
/* v2.14.3.12: when preview is off, collapse to a single column so the
   editor doesn't widen behind a thin sliver. The pane itself is also
   `display: none`'d via `[hidden]` below — the column count change
   here keeps the grid gap from showing as empty space. */
.ld-split.ld-preview-closed {
    grid-template-columns: 1fr;
}
.ld-pane {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
/* v2.14.3.12: `.ld-pane { display: flex }` has equal specificity to
   the UA stylesheet's `[hidden] { display: none }` and wins on source
   order, so previewPane.hidden = true left the pane visible as a
   sliver. Restore the hide. */
.ld-pane[hidden] { display: none; }
.ld-pane-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: #888;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.ld-pane-head > span:first-child { flex: 1; }
.ld-pane-close {
    background: transparent;
    border: 1px solid var(--mt-tan-300);
    color: #888;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.ld-pane-close:hover {
    background: var(--mt-cream-100);
    border-color: var(--mt-brown-600);
    color: var(--mt-brown-900);
}

/* Editor textarea. Serif so it visually matches the legal-doc body. */
.ld-textarea {
    width: 100%;
    min-height: 40px;
    padding: 10px 12px;
    border: 1px solid var(--mt-tan-300);
    border-radius: 6px;
    background: #fff;
    color: #2c1d0a;
    font-family: ui-serif, Georgia, "Times New Roman", serif;
    font-size: 13px;
    line-height: 1.5;
    resize: vertical;
    /* v2.14.3.12: autoGrow now caps at ~10 lines (LD_AUTOGROW_MAX_PX
       in legalDescription.js). Show a scrollbar past the cap so 100-
       tract Legal Descriptions don't take over the screen. */
    overflow: auto;
}
.ld-textarea:hover { border-color: var(--mt-brown-600); }
.ld-textarea:focus {
    outline: none;
    border-color: var(--mt-brown-600);
    box-shadow: 0 0 0 2px rgba(185,108,40,0.15);
}
.ld-textarea[readonly] {
    background: var(--mt-cream-50);
    border-style: dashed;
    cursor: default;
}
.ld-textarea::placeholder {
    color: #b3a487;
    font-style: italic;
}

/* Preview pane — mocked offer / notification doc. */
.ld-preview {
    background: var(--mt-cream-50);
    border: 1px dashed var(--mt-tan-300);
    border-radius: 6px;
    padding: 12px 14px;
    min-height: 220px;
}
.ld-preview-doc {
    font-family: ui-serif, Georgia, "Times New Roman", serif;
    color: #2c1d0a;
}
.ld-preview-eyebrow {
    font-size: 11px;
    letter-spacing: 0.06em;
    color: #888;
    text-transform: uppercase;
    font-family: ui-sans-serif, system-ui, sans-serif;
}
.ld-preview-divider {
    margin: 8px 0 12px;
    border: none;
    border-top: 1px solid #ddd;
}
.ld-preview-lead {
    margin: 0 0 8px;
    font-size: 12px;
    line-height: 1.5;
    color: #555;
}
.ld-preview-lead:last-child {
    margin: 8px 0 0;
}
.ld-preview-legal {
    font-size: 12px;
    padding: 8px 12px;
    background: #fff;
    border-left: 3px solid var(--mt-brown-600);
    border-radius: 0 4px 4px 0;
    margin: 6px 0;
    line-height: 1.5;
    min-height: 32px;
}
.ld-preview-empty { color: #aaa; }

.ld-hint {
    margin-top: 10px;
    font-size: 11.5px;
    color: #6b5236;
    font-style: italic;
}

/* ============================================================
 * Compose-from-tracts modal (v2.14.3.0 R5.1)
 * On prospects: 🧱 button always visible.
 * On assets: 🧱 hidden unless the dialog has `.admin-edit-mode`
 * (the global Admin Edit toggle from the Actions menu).
 * ============================================================ */

.ld-compose-btn { display: inline-flex; }
.ld-section.ld-locked .ld-compose-btn { display: none; }
.admin-edit-mode .ld-section.ld-locked .ld-compose-btn { display: inline-flex; }

/* v2.14.3.8: per user spec, ✎ Edit / ✕ Cancel / ✓ Save are ALL gated
   behind Admin Edit on the asset side. Without Admin Edit selected, the
   locked Legal Description shows none of them. The MutationObserver in
   attachLegalDescription auto-cancels any in-flight edit if admin-edit-
   mode is removed mid-edit, so we don't have to worry about Cancel/Save
   being stranded visible after the gate flips. CSS uses the .ld-editing
   class state (Edit when not editing, Cancel+Save when editing) so the
   right button(s) show in each mode without fighting the JS [hidden]
   attribute. */
.ld-section.ld-locked .ld-edit-btn,
.ld-section.ld-locked .ld-cancel-btn,
.ld-section.ld-locked .ld-save-btn { display: none; }
.admin-edit-mode .ld-section.ld-locked:not(.ld-editing) .ld-edit-btn { display: inline-flex; }
.admin-edit-mode .ld-section.ld-locked.ld-editing .ld-cancel-btn,
.admin-edit-mode .ld-section.ld-locked.ld-editing .ld-save-btn { display: inline-flex; }

.ld-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.ld-modal-backdrop[hidden] { display: none; }
.ld-modal {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
    width: min(640px, 100%);
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.ld-modal-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--mt-tan-200);
    background: var(--mt-cream-100);
}
.ld-modal-title {
    flex: 1;
    font-size: 14px;
    font-weight: 700;
    color: var(--mt-brown-800);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.ld-modal-close {
    background: transparent;
    border: 1px solid var(--mt-tan-300);
    width: 26px;
    height: 26px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    color: var(--mt-brown-800);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ld-modal-close:hover {
    background: var(--mt-cream-100);
    border-color: var(--mt-brown-600);
}
.ld-modal-body {
    padding: 14px 16px;
    overflow-y: auto;
    flex: 1;
}
.ld-modal-empty {
    margin: 0;
    color: #6b5236;
    font-style: italic;
}
.ld-modal-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--mt-tan-200);
    background: var(--mt-cream-50);
}

.ld-compose-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--mt-tan-200);
}
.ld-compose-count {
    margin-left: auto;
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.ld-compose-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 6px;
    border-radius: 6px;
    cursor: pointer;
}
.ld-compose-row:hover { background: var(--mt-cream-50); }
.ld-compose-row input[type="checkbox"] {
    margin-top: 3px;
    accent-color: var(--mt-brown-600);
}
.ld-compose-row-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
.ld-compose-row-ident {
    font-size: 12px;
    font-weight: 600;
    color: var(--mt-brown-800);
}
.ld-compose-row-blurb {
    font-size: 12px;
    color: #2c1d0a;
    font-family: ui-serif, Georgia, "Times New Roman", serif;
    line-height: 1.4;
}

.ld-btn-primary {
    background: var(--mt-brown-600);
    color: #fff;
    border: 1px solid var(--mt-brown-600);
    padding: 7px 14px;
    border-radius: 5px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}
.ld-btn-primary:hover { background: var(--mt-brown-700); }
.ld-btn-secondary {
    background: #fff;
    color: var(--mt-brown-800);
    border: 1px solid var(--mt-tan-300);
    padding: 7px 14px;
    border-radius: 5px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}
.ld-btn-secondary:hover { background: var(--mt-cream-100); border-color: var(--mt-brown-600); }
.ld-btn-ghost {
    background: transparent;
    color: #6b5236;
    border: 1px solid transparent;
    padding: 7px 12px;
    border-radius: 5px;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
}
.ld-btn-ghost:hover { background: var(--mt-cream-100); border-color: var(--mt-tan-300); }

/* ============================================================
 * V6 Header (Section 1)
 * Three sub-rows: hero identity · breadcrumb · spotlight
 * ============================================================ */

.v6-header {
    position: relative;
    display: flex;
    align-items: stretch;
    background: var(--mt-cream-100);
    border: 1px solid var(--mt-tan-300);
    border-radius: 8px 8px 0 0;
    padding: 18px 16px 16px 26px;
    /* v2.14.0.5 R1 hotfix: inset V6 sections + rollup from the modal
       edges so they visually match the Asset Info .bd-section card
       below. v2.14.0.11: added margin-top so the cream header card
       doesn't hug the modal's top edge — earlier passes mistakenly
       bumped only the INTERNAL top padding, which the user pointed
       out (correctly) doesn't address the gap between the toolbar
       and the cream card. Internal padding-top eased back to 18px
       now that the breathing room comes from the outside. */
    margin-top: 16px;
    margin-left: 12px;
    margin-right: 12px;
    margin-bottom: 0;
    overflow: hidden;
}

.v6-accent {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 6px;
    background: var(--cat-other);
}

.v6-accent--mineralroyalty { background: var(--cat-mineralroyalty); }
.v6-accent--royalty  { background: var(--cat-mineralroyalty); }   /* legacy alias */
.v6-accent--mineral  { background: var(--cat-mineralroyalty); }   /* legacy alias */
.v6-accent--workinginterest { background: var(--cat-wi); }
.v6-accent--realestate { background: var(--cat-realestate); }

.v6-identity {
    flex: 1 1 auto;
    min-width: 0;
}

.v6-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: #7a6048;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}

.v6-eyebrow .sep { color: #c4b29a; }

/* v2.14.3.20 — terminal-state badge in the header identity row.
   Red for KILLED / LOST / PASSED so the user can tell at a glance
   they're looking at an inactive (non-converted) holding — especially
   when hunting through the Inactive list for test prospects to delete.
   DIVESTED uses a neutral gray because it's a legitimate end state
   (asset retired), not a "something went wrong" outcome. */
.v6-kill-badge {
    background: #c4392f;
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.4;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.v6-kill-badge--divested {
    background: #6b6258;
}

.cat-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    background: var(--cat-other);
    letter-spacing: 0.02em;
}

.cat-chip--mineralroyalty { background: var(--cat-mineralroyalty); }
.cat-chip--royalty       { background: var(--cat-mineralroyalty); } /* legacy alias */
.cat-chip--mineral       { background: var(--cat-mineralroyalty); } /* legacy alias */
.cat-chip--workinginterest { background: var(--cat-wi); }
.cat-chip--realestate    { background: var(--cat-realestate); }

.v6-name {
    margin: 0;
    font-size: 22px;
    font-weight: 650;
    color: var(--mt-brown-900);
    line-height: 1.2;
    outline: none;
    padding: 1px 2px;
    border-radius: 4px;
}

.v6-name[contenteditable="true"]:hover {
    background: #fff8ec;
}

.v6-name[contenteditable="true"]:focus {
    background: #fff;
    box-shadow: 0 0 0 2px var(--mt-brown-600);
}

.v6-sub {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    font-size: 13px;
    color: #5a4327;
}

.v6-sub .sep { color: #c4b29a; }
.v6-sub b { color: var(--mt-brown-900); font-weight: 600; }

.v6-tools {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-left: 12px;
}

.v6-tools .iconbtn {
    border: 1px solid var(--mt-tan-300);
    background: #fff;
    color: var(--mt-brown-800);
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
}

.v6-tools .iconbtn:hover {
    background: var(--mt-tan-100);
}

.v6-tools .iconbtn.close {
    color: #444;
}

/* v2.14.0.7: Actions dropdown menu + Admin Edit mode */

.v6-actions-wrap {
    position: relative;
    display: inline-block;
}

.v6-actions-menu {
    /* v2.14.0.29: position:fixed (was absolute) so the dropdown is not
       clipped by .v6-header's overflow:hidden. JS sets top/left from
       the Actions button's getBoundingClientRect when the menu opens
       (handleActionsButtonClick in js/ui/royaltyScreen/v6Header.js). */
    position: fixed;
    z-index: 1000;
    min-width: 220px;
    background: #fff;
    border: 1px solid var(--mt-tan-300);
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    padding: 4px;
}

.v6-actions-menu[hidden] { display: none; }

.v6-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    background: transparent;
    color: var(--mt-brown-900);
    font-size: 13px;
    text-align: left;
    border-radius: 4px;
    cursor: pointer;
}

.v6-menu-item:hover { background: var(--mt-tan-100); }
.v6-menu-item .v6-menu-icon { font-size: 14px; }
.v6-menu-item .v6-menu-label { flex: 1; }
.v6-menu-item .v6-menu-hint {
    font-size: 10px;
    color: #999;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Admin-only menu items: hidden unless the dialog scope is flagged
   `is-admin` (set by wireActionsMenu when window.mtCurrentUser.is_admin
   is true). */
.v6-menu-item[data-admin-only] { display: none; }
.is-admin .v6-menu-item[data-admin-only] { display: flex; }

/* v2.14.0.18 (R3): disabled menu items (sequential gating —
   e.g. COO can't sign until Acq Mgr has sent for price approval).
   Stay visible so the user sees the order, but unclickable. */
.v6-menu-item--disabled,
.v6-menu-item[disabled] {
    cursor: not-allowed;
    opacity: 0.45;
}
.v6-menu-item--disabled:hover,
.v6-menu-item[disabled]:hover {
    background: transparent;
}

/* Danger-styled menu items (Kill prospect, Admin Delete). */
.v6-menu-item--danger { color: #b91c1c; }
.v6-menu-item--danger:hover { background: #fee2e2; }

/* Visual separator between menu groups. */
.v6-menu-separator {
    height: 1px;
    background: var(--mt-tan-300);
    margin: 4px 0;
}

/* v2.14.3.22: dedicated "🔓 Admin Edit · Done" pill that sits next to
   the Actions button while admin-edit-mode is on. Previously the
   Actions button itself was relabeled as "Done" which hid the rest of
   the Actions menu (Delete prospect / Reactivate / etc.). The Actions
   button now stays put as "⚙ Actions ▾"; only this pill toggles. */
.v6-tools .iconbtn-admin-exit {
    background: #fff5d6;
    border-color: #d4a64a;
    color: #6e4d12;
    font-weight: 600;
}
.v6-tools .iconbtn-admin-exit:hover { background: #ffe9a8; }

/* v2.14.3.22 — menu items that require admin-edit-mode to be active
   before they're clickable (e.g. Delete prospect on the Inactive
   menu). Hidden by default; revealed only when the dialog container
   has the `.admin-edit-mode` class. Because admin-edit-mode itself
   can only be turned on via the `data-admin-only`-gated Admin Edit
   item, this implicitly also restricts to admins — no separate
   `data-admin-only` needed. The selectors below use !important to
   beat the existing `.is-admin .v6-menu-item[data-admin-only]` rule
   when an item carries both attributes. */
.v6-menu-item[data-needs-admin-edit] { display: none !important; }
.admin-edit-mode .v6-menu-item[data-needs-admin-edit] { display: flex !important; }

/* Legacy class kept for backwards compatibility in case anything else
   in the codebase still toggles it; same visual treatment. */
.v6-tools .iconbtn-admin-active {
    background: #fff5d6;
    border-color: #d4a64a;
    color: #6e4d12;
    font-weight: 600;
}
.v6-tools .iconbtn-admin-active:hover { background: #ffe9a8; }

/* In admin-edit-mode, the previously-🔒 rollup tile looks editable. */
.admin-edit-mode .rs-tile-locked {
    border-style: dashed;
    border-color: #d4a64a;
    background: #fffaee;
    cursor: pointer;
}
.admin-edit-mode .rs-tile-locked:hover {
    background: #fff5d6;
}

/* Breadcrumb */

.v6-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0;
    background: #fff;
    border-left: 1px solid var(--mt-tan-300);
    border-right: 1px solid var(--mt-tan-300);
    padding: 10px 16px;
    /* v2.14.0.5 R1 hotfix — see comment on .v6-header */
    margin-left: 12px;
    margin-right: 12px;
    overflow-x: auto;
    flex-wrap: nowrap;
}

.v6-bc {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    color: #7a6048;
    background: #fff;
    border: 1px solid var(--mt-tan-300);
    white-space: nowrap;
    flex: 0 0 auto;
}

.v6-bc--done {
    background: var(--mt-done-bg);
    border-color: var(--mt-done-bd);
    color: var(--mt-done-fg);
}

.v6-bc--current {
    background: var(--mt-brown-800);
    border-color: var(--mt-brown-800);
    color: #fff;
    font-weight: 600;
}

/* v2.14.0.17: dates moved from inline `· MM/DD` chip inside the pill
   to a second line UNDER each pill. The wrapper is inline-flex column
   so the breadcrumb row stays horizontal but the per-pill date
   stacks below it. Empty placeholder keeps the row aligned when a
   stage has no associated date yet. */
.v6-bc-wrap {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 auto;
    gap: 2px;
}

.v6-bc-date {
    font-size: 10.5px;
    color: var(--mt-brown-800);
    opacity: 0.75;
    min-height: 12px;
    white-space: nowrap;
}

.v6-bc-date--empty {
    visibility: hidden;
}

/* v2.14.0.19: 3 sub-step chips under the Pending Mgmt Approval pill
   showing each of the 3 sequential sign-offs (Acq Mgr → COO → CFO).
   Replaces the single date under the pill; shows even when the stage
   is current so the user sees what's outstanding mid-stage. */
.v6-bc-substeps {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
}

.v6-bc-substep {
    font-size: 9.5px;
    padding: 1px 5px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--mt-tan-300);
    color: #999;
    white-space: nowrap;
}

.v6-bc-substep--done {
    background: var(--mt-done-bg);
    border-color: var(--mt-done-bd);
    color: var(--mt-done-fg);
}

.v6-bc-sep {
    width: 12px;
    height: 1px;
    background: var(--mt-tan-300);
    flex: 0 0 auto;
    margin: 8px 2px 0;
    align-self: flex-start;
}

.v6-bc-sep--done {
    background: var(--mt-done-bd);
}

/* Spotlight card */

.v6-spotlight {
    background: #fff;
    border: 1px solid var(--mt-tan-300);
    border-top: none;
    border-radius: 0 0 8px 8px;
    padding: 0;
    /* v2.14.0.5 R1 hotfix — see comment on .v6-header */
    margin-left: 12px;
    margin-right: 12px;
    margin-bottom: 14px;
    overflow: hidden;
    position: relative;
}

.v6-spotlight-collapse {
    position: absolute;
    top: 8px;
    left: 12px;
    width: 22px;
    height: 22px;
    border: none;
    background: transparent;
    color: var(--mt-brown-800);
    cursor: pointer;
    z-index: 2;
    transition: transform 0.2s ease;
}

.v6-spotlight.collapsed .v6-spotlight-collapse {
    transform: rotate(-90deg);
}

.v6-spotlight-pin {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 8px 16px 8px 40px;
    font-size: 12px;
    color: #7a6048;
    background: var(--mt-cream-100);
    border-bottom: 1px solid var(--mt-tan-200);
}

.v6-spotlight.collapsed .v6-spotlight-pin {
    display: flex;
}

.v6-spotlight-pin .pin-dot {
    width: 8px;
    height: 8px;
    background: var(--mt-brown-600);
    border-radius: 50%;
    animation: v6-pulse 2s ease-in-out infinite;
}

.v6-spotlight-pin .pin-label {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 10px;
    color: #999;
}

.v6-spotlight-pin .pin-title {
    font-weight: 600;
    color: var(--mt-brown-900);
}

@keyframes v6-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.55; transform: scale(1.25); }
}

.v6-spotlight-body {
    display: grid;
    grid-template-columns: 1fr minmax(240px, 380px);
    gap: 18px;
    padding: 14px 18px 14px 40px;
    transition: max-height 0.25s ease, padding 0.25s ease, opacity 0.25s ease;
    max-height: 800px;
    opacity: 1;
}

.v6-spotlight.collapsed .v6-spotlight-body {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    overflow: hidden;
}

.v6-cur-row {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.v6-cur-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--mt-cream-100);
    border: 1px solid var(--mt-tan-300);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    flex: 0 0 52px;
}

.v6-cur-eyebrow {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #888;
    margin-bottom: 4px;
}

.v6-cur-eyebrow .dot {
    width: 6px;
    height: 6px;
    background: var(--mt-brown-600);
    border-radius: 50%;
    animation: v6-pulse 2s ease-in-out infinite;
}

.v6-cur-title {
    font-size: 19px;
    font-weight: 600;
    color: var(--mt-brown-900);
    line-height: 1.2;
    margin-bottom: 4px;
}

.v6-cur-detail {
    font-size: 12.5px;
    color: #5a4327;
    line-height: 1.4;
}

.v6-action {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: stretch;
}

.v6-action-label {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #888;
}

.v6-action-group {
    display: flex;
    gap: 6px;
    align-items: center;
}

.v6-action-group input[type="date"] {
    flex: 1 1 auto;
    padding: 6px 8px;
    border: 1px solid var(--mt-tan-300);
    border-radius: 5px;
    font-size: 13px;
    background: #fff;
    color: var(--mt-brown-900);
}

.v6-action-submit, .v6-action-button {
    flex: 0 0 auto;
    padding: 8px 14px;
    background: var(--mt-brown-600);
    color: #fff;
    border: 1px solid var(--mt-brown-700);
    border-radius: 5px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.v6-action-submit:hover, .v6-action-button:hover {
    background: var(--mt-brown-500);
}

.v6-action-secondary {
    background: transparent;
    border: 1px solid var(--mt-tan-300);
    color: var(--mt-brown-800);
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 11.5px;
    cursor: pointer;
}

.v6-action-secondary:hover {
    background: var(--mt-tan-100);
}

/* ============================================================
 * Rollup KPI tiles (Section 2)
 * Six tiles in a single horizontal row. Editable tiles get a
 * dashed orange border + a ✎ glyph. Locked tiles get 🔒.
 * ============================================================ */

.rs-rollup {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    /* v2.14.0.5 R1 hotfix — match the inset used by .v6-header /
       .v6-breadcrumb / .v6-spotlight + .bd-section above and below. */
    margin-left: 12px;
    margin-right: 12px;
    margin-bottom: 14px;
}

@media (max-width: 1100px) {
    .rs-rollup { grid-template-columns: repeat(3, 1fr); }
}

.rs-tile {
    background: #fff;
    border: 1px solid var(--mt-tan-300);
    border-radius: 6px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
}

.rs-tile-value {
    font-size: 16px;
    font-weight: 600;
    color: var(--mt-brown-800);
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
}

.rs-tile-label {
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #999;
    margin-top: 3px;
}

.rs-tile-editable {
    border-style: dashed;
    border-color: var(--mt-brown-600);
    cursor: text;
}

.rs-tile-editable:hover {
    background: #fff8ec;
}

.rs-tile-editable .rs-tile-pencil {
    font-size: 11px;
    opacity: 0.6;
    margin-left: 4px;
}

.rs-tile-editing input {
    width: 100%;
    border: none;
    background: #fff;
    color: var(--mt-brown-800);
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    outline: 1px solid var(--mt-brown-600);
    border-radius: 4px;
    padding: 1px 2px;
    font-variant-numeric: tabular-nums;
}

.rs-tile-locked .rs-tile-pencil {
    color: #999;
}

/* ============================================================
 * AI1 Asset Info (Section 3)
 * Collapsible section wrapping a 4-card grid.
 * ============================================================ */

.ai1-grid {
    display: grid;
    /* Details · Stakeholders (wide — absorbs the old middle Recordings
       column) · right column with Recordings stacked over Payments. */
    grid-template-columns: 1fr 2fr 1fr;
    gap: 12px;
    padding: 14px;
}

/* Right column: Recordings on top, Payments on the bottom, splitting the
   column height between them. */
.ai-rp-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}
.ai-rp-stack > * { flex: 1 1 auto; min-height: 0; }

@media (max-width: 1100px) {
    .ai1-grid { grid-template-columns: 1fr; }
}

.ai-card {
    background: #fff;
    border: 1px solid var(--mt-tan-300);
    border-radius: 6px;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.ai-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--mt-cream-100);
    border-bottom: 1px solid var(--mt-tan-200);
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mt-brown-800);
    font-weight: 700;
}

.ai-card-head .meta {
    font-size: 10px;
    color: #999;
    font-weight: 400;
    letter-spacing: 0.02em;
    text-transform: none;
}

.ai-card-locked {
    opacity: 0.85;
}

.ai-card-locked-body {
    padding: 24px 14px;
    text-align: center;
    color: #888;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.ai-card-locked-icon {
    font-size: 28px;
    opacity: 0.5;
}

.ai-card-locked-title {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--mt-brown-800);
}

.ai-card-locked-detail {
    font-size: 11px;
    color: #999;
    line-height: 1.4;
}

/* Field rows inside cards */

.ai-field {
    display: grid;
    grid-template-columns: 1fr 2fr;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-bottom: 1px solid var(--mt-tan-200);
    font-size: 12px;
}

.ai-field:last-child { border-bottom: none; }

.ai-field-label {
    color: #888;
    font-size: 11px;
    letter-spacing: 0.02em;
}

.ai-field-value {
    color: var(--mt-brown-900);
    min-height: 18px;
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: default;
}

.ai-field-value.empty {
    color: #b3a487;
    font-style: italic;
}

.ai-field-value.empty:hover {
    color: var(--mt-brown-600);
}

.ai-field-value.editable {
    cursor: text;
}

.ai-field-value.editable:hover {
    background: var(--mt-cream-100);
    border-radius: 4px;
    padding: 1px 6px;
    margin: -1px -6px;
}

.ai-field-value.editable:hover::after {
    content: '✎';
    font-size: 10px;
    color: var(--mt-brown-600);
    margin-left: 4px;
}

.ai-field-value.dropdown:hover::after {
    content: '▾';
}

.ai-field-value.locked {
    color: #555;
}

.ai-field-value.derived {
    color: var(--mt-brown-800);
    background: var(--mt-cream-100);
    border: 1px dashed var(--mt-tan-300);
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 600;
    cursor: help;
}

.ai-field-value.derived::after {
    content: ' ↻';
    font-size: 10px;
    opacity: 0.7;
}

/* Inline edit input (replaces .ai-field-value while editing) */

.ai-field-input {
    width: 100%;
    border: 1px solid var(--mt-brown-600);
    background: #fff;
    color: var(--mt-brown-900);
    font-size: 12px;
    border-radius: 4px;
    padding: 3px 6px;
    outline: none;
    font-family: inherit;
}

/* Recordings mini-table */

.ai-recording-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11.5px;
}

.ai-recording-table th {
    background: var(--mt-cream-100);
    color: #888;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 10px;
    padding: 4px 8px;
    text-align: left;
    border-bottom: 1px solid var(--mt-tan-200);
}

.ai-recording-table td {
    padding: 4px 8px;
    border-bottom: 1px solid var(--mt-tan-200);
}

.ai-recording-table .county-cell {
    color: var(--mt-brown-900);
    font-weight: 600;
}

.ai-recording-table td.editable {
    cursor: text;
}

.ai-recording-table td.editable:hover {
    background: var(--mt-cream-100);
}

.ai-table-hint {
    padding: 6px 12px;
    font-size: 10.5px;
    color: #999;
    background: var(--mt-cream-50);
    border-top: 1px solid var(--mt-tan-200);
}

.ai-recording-table-empty {
    padding: 18px 12px;
    text-align: center;
    color: #999;
    font-size: 11.5px;
}

/* Payments mini-stack */

.ai-payment-stack {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ai-payment-bar {
    height: 6px;
    background: var(--mt-tan-200);
    border-radius: 3px;
    overflow: hidden;
}

.ai-payment-bar-fill {
    height: 100%;
    background: var(--mt-brown-600);
    transition: width 0.3s ease;
}

.ai-payment-row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
}

.ai-payment-row .l {
    color: #888;
}

.ai-payment-row .v.amt {
    color: var(--mt-brown-900);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.ai-payment-row .v.muted {
    color: #999;
    font-size: 11px;
}

.ai-payment-hint {
    font-size: 10.5px;
    color: #999;
    font-style: italic;
    margin-top: 2px;
}

/* ============================================================
 * Saved-list dropdown (typeahead with recent options)
 * ============================================================ */

.rs-saved-dropdown-wrap {
    position: relative;
    width: 100%;
}

.rs-saved-dropdown-menu {
    position: fixed;          /* set via inline coords from getBoundingClientRect */
    z-index: 5000;
    background: #fff;
    border: 1px solid var(--mt-tan-300);
    border-radius: 5px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    max-height: 240px;
    overflow-y: auto;
    min-width: 180px;
}

.rs-saved-dropdown-item {
    padding: 6px 10px;
    font-size: 12px;
    color: var(--mt-brown-900);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.rs-saved-dropdown-item:hover {
    background: var(--mt-cream-100);
}

.rs-saved-dropdown-item.add-new {
    background: var(--mt-cream-100);
    color: var(--mt-brown-600);
    font-weight: 600;
    border-top: 1px solid var(--mt-tan-200);
}

.rs-saved-dropdown-empty {
    padding: 10px;
    color: #999;
    font-size: 11px;
    font-style: italic;
    text-align: center;
}

/* ============================================================
 * Section 6 — Map preview (M3 floating-controls)
 *
 * v2.14.4.0 R6. In-modal mapbox-gl preview. The map content matches the
 * host MapTracts map (status-colored tracts); only the CONTROL chrome
 * uses the Apple-Maps-style floating treatment. See js/ui/royaltyScreen/
 * map.js + docs/design_handoff_mms_royalty_screen/map-variations.jsx (M3).
 * ============================================================ */

.mapw-section .bd-section-body { padding: 0; }

/* "Tracts changed — update map" pill (v1.9.15). Shown on the Map section
 * header after a QC-editor tract edit; the map deliberately does NOT rebuild
 * on every save (the flicker). Clicking the pill (or turning off Tracts Edit
 * mode) refreshes the map in place. flex:0 0 auto so it sits at the far right
 * of the header, left of the collapse chevron's row, without stealing the
 * meta label's space. */
.mapw-stale-pill {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 6px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.01em;
    color: #7a4b00;
    background: #fde9c4;
    border: 1px solid #e2b866;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.mapw-stale-pill:hover {
    background: #f9dca1;
    border-color: #d9a24e;
}

.mapw-map-wrap {
    position: relative;
    width: 100%;
    height: 460px;
    overflow: hidden;
    background: var(--mt-tan-100);
}

/* Full-screen toggle (⛶) — pin the wrap over the whole viewport. Must
   sit above .asset-detail-backdrop (z-index 9100 in asset-detail.css),
   or the semi-transparent backdrop covers the full-screen map and eats
   clicks (PR #112 codex P2). */
.mapw-map-wrap.mapw-fs {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    border-radius: 0;
}

.mapw-canvas {
    position: absolute;
    inset: 0;
}

.mapw-canvas .mapboxgl-map { width: 100%; height: 100%; }

.mapw-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #888;
    font-size: 13px;
    font-style: italic;
    padding: 24px;
    text-align: center;
}

/* ---- Bottom-left legend pill ---- */
.mapw-legend {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 30;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    max-width: calc(100% - 90px);
    padding: 7px 11px;
    background: var(--mt-cream-50);
    border: 1px solid var(--mt-tan-300);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
    font-size: 11.5px;
    color: var(--mt-brown-900);
}

.mapw-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.mapw-legend-swatch {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    flex: 0 0 auto;
}

/* ---- Top-left floating Layers button + popover ---- */
.mapw-float-tl {
    position: absolute;
    left: 12px;
    top: 12px;
    z-index: 40;
}

.mapw-float-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: #fff;
    border: 1px solid var(--mt-tan-300);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--mt-brown-800);
    cursor: pointer;
}

.mapw-float-btn:hover { background: var(--mt-cream-100); }

.mapw-float-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    background: var(--mt-brown-600);
    color: #fff;
    border-radius: 9px;
    font-size: 10.5px;
    font-weight: 700;
}

.mapw-float-menu {
    position: absolute;
    left: 0;
    top: calc(100% + 6px);
    width: 244px;
    background: #fff;
    border: 1px solid var(--mt-tan-300);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.mapw-float-menu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 12px;
    background: var(--mt-cream-100);
    border-bottom: 1px solid var(--mt-tan-200);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mt-brown-800);
}

.mapw-float-menu-close {
    border: none;
    background: transparent;
    color: var(--mt-brown-700);
    font-size: 13px;
    cursor: pointer;
    padding: 2px 4px;
}

.mapw-float-menu-body { padding: 8px 10px 10px; }

.mapw-layer-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 4px;
    font-size: 12.5px;
    color: var(--mt-brown-900);
    cursor: pointer;
    border-radius: 5px;
}

.mapw-layer-row:hover { background: var(--mt-cream-100); }

.mapw-layer-row.disabled {
    cursor: default;
    color: #9a8f80;
    opacity: 0.8;
}

.mapw-layer-row.disabled:hover { background: transparent; }

.mapw-layer-swatch {
    width: 13px;
    height: 13px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    flex: 0 0 auto;
}

.mapw-layer-label { flex: 1 1 auto; }

.mapw-layer-tag {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--mt-tan-200);
    color: var(--mt-brown-700);
    white-space: nowrap;
}

.mapw-layer-tag.soon {
    background: #f2e6d2;
    color: #97713a;
}

.mapw-panel-sep {
    height: 1px;
    background: var(--mt-tan-200);
    margin: 8px 0;
}

.mapw-panel-subhead {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #998;
    margin: 2px 0 6px 4px;
}

.mapw-basemap-toggle {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 4px;
}

.mapw-basemap-toggle label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    color: var(--mt-brown-900);
    cursor: pointer;
}

/* ---- Bottom-right floating control stack ---- */
.mapw-zoom {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mapw-zoom-btn {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--mt-tan-300);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
    font-size: 16px;
    color: var(--mt-brown-800);
    cursor: pointer;
    line-height: 1;
}

.mapw-zoom-btn:hover { background: var(--mt-cream-100); }

/* ============================================================
 * Section 7 — Tracts (T1 grouped table)
 * v2.16.0 Slice 2. See docs/.../tract-variations.jsx · T1
 * ============================================================ */

.trk-section .trk-head-actions {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.trk-lock-badge,
.trk-edit-badge { white-space: nowrap; }

/* Loading / empty / error placeholders */
.trk-loading {
    padding: 16px 18px;
    color: var(--mt-brown-700);
    font-size: 13px;
}
.trk-loading.trk-error { color: var(--mt-kill); }

/* Horizontal scroll wrapper — the table is wide. */
.trk-table-wrap {
    overflow-x: auto;
    width: 100%;
}

/* The Tracts table renders one row per interest line, so a large prospect
   (e.g. the 424-tract Crescent import) is easily 15,000px+ tall. The shared
   `.bd-section-body { max-height: 4000px }` collapse-transition cap combined
   with `.bd-section { overflow: hidden }` silently CLIPPED everything past
   ~row 100 with no scrollbar — the ".rs-modal-frame" owns the page scroll, so
   the body must not clip. Uncap the Tracts body specifically; the whole
   grouped table then renders and scrolls with the dialog frame. The section-
   collapse chevron still works: `.bd-section.collapsed .bd-section-body`
   (specificity 0,3,0) beats this (0,2,0) and forces max-height:0. */
.trk-section .bd-section-body {
    max-height: none;
}
.trk-table {
    border-collapse: collapse;
    width: 100%;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
}

/* Group header band — brown gradient. */
.trk-group-head th {
    text-align: left;
    padding: 7px 12px;
    background: linear-gradient(90deg, var(--mt-brown-800), var(--mt-brown-600));
    color: #fff;
    font-weight: 600;
    border-top: 1px solid var(--mt-brown-900);
}
/* Orphaned-interest-lines band (issue #23) — a loud red data-error flag.
   Should never appear post-fix; when it does, the user must see it. */
.trk-group-head.trk-group-orphan th {
    background: linear-gradient(90deg, #8f1d1d, #c0392b);
    border-top: 1px solid #6e1414;
}
.trk-group-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.18);
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 11px;
    line-height: 1;
    width: 18px; height: 18px;
    padding: 0;
    border-radius: 4px;
    margin-right: 8px;
    vertical-align: middle;
    font-family: inherit;
}
.trk-group-toggle:hover { background: rgba(255,255,255,0.32); }
.trk-group-title { font-size: 13px; }
.trk-group-meta {
    float: right;
    font-size: 11px;
    font-weight: 500;
    opacity: 0.92;
}

/* Column header — cream uppercase tracking-wide. */
.trk-col-head th {
    padding: 6px 8px;
    background: var(--mt-cream-100);
    color: var(--mt-brown-800);
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: left;
    border-bottom: 1px solid var(--mt-tan-300);
    white-space: nowrap;
}
.trk-col-head .trk-cell-num { text-align: right; }
.trk-col-head .trk-cell-section,
.trk-col-head .trk-cell-count,
.trk-col-head .trk-cell-uno { text-align: center; }

/* Body cells */
.trk-table tbody td {
    padding: 3px 8px;
    border-bottom: 1px solid var(--mt-tan-200);
    vertical-align: middle;
}
.trk-table tbody tr:hover { background: var(--mt-cream-50); }
.trk-cell-num { text-align: right; }
.trk-cell-section { text-align: center; white-space: nowrap; width: 40px; }
.trk-cell-section b { font-size: 14px; color: var(--mt-brown-900); }

/* Per-column sizing for the Royalty/Mineral grid (max content is known, so
   columns are capped to their real maxima instead of stretching). Applied to
   both the <th> and the matching <td> via shared width classes.
     · $/Acre        → $##,###            (≤ 7 chars)
     · Gross Acres   → ###.## (usually XXX) — capped, can shrink to content
     · Decimal/NRI/NPRI/ORRI Int → #.######## (8-dp, ≤ 10 chars)
     · Lease Royalty → 0.1875 / 0.25      (≤ 4-dp, ≤ 6 chars)
     · NMA / NRA     → ###.##             (≤ 6 chars)
   The WI variant reuses the same classes (WI % / NRI are 8-dp columns, Unit
   Acres / Net Acres are acre columns) so both grids size identically. */
.trk-w-money { width: 104px; min-width: 104px; }  /* $99,999.99 never clipped */
.trk-w-gross { width: 80px; min-width: 80px; }     /* XXX.XX never clipped */
.trk-w-dec   { width: 118px; min-width: 118px; }  /* 0.00000000 + ½/ƒx button, never clipped */
.trk-w-roy   { width: 88px; min-width: 88px; }   /* 0.1875 — lease royalty, ≤ 4 dp */
.trk-w-acre  { width: 64px; }
/* Let the capped numeric headers wrap (e.g. "Net Royalty Int") so a long
   label can't force the column past its width cap. */
.trk-col-head th.trk-w-money,
.trk-col-head th.trk-w-gross,
.trk-col-head th.trk-w-dec,
.trk-col-head th.trk-w-roy,
.trk-col-head th.trk-w-acre { white-space: normal; }

/* Header centred over its own column rather than right-aligned with the
   numerals under it. The 8-dp ownership columns (WI % / NRI) are wide enough
   that a right-aligned label drifts to the far edge and stops reading as a
   caption for the column — centring it puts the label over the decimal it
   names (owner request, 2026-08-27). Beats .trk-col-head .trk-cell-num's
   right-align on specificity; the dialog skin re-asserts it id-scoped. */
.trk-col-head th.trk-h-center { text-align: center; }

/* v1.5.1.0 — responsive shrink tiers (spec item 1): as the monitor gets
   smaller, reduce font sizes + column caps so the 8-decimal columns still
   fit un-clipped before the wrapper falls back to horizontal scroll. */
@media (max-width: 1600px) {
    .trk-table { font-size: 11.5px; }
    .trk-table .trk-input { font-size: 11.5px; padding: 3px 4px; }
    .trk-w-dec { width: 106px; min-width: 106px; }
    .trk-w-roy { width: 80px; min-width: 80px; }
    .trk-w-money { width: 96px; min-width: 96px; }
    .trk-w-gross { width: 74px; min-width: 74px; }
    .trk-input-qtr { min-width: 110px; }
}
@media (max-width: 1280px) {
    .trk-table { font-size: 10.5px; }
    .trk-table .trk-input { font-size: 10.5px; padding: 2px 3px; }
    .trk-table tbody td { padding: 3px 5px; }
    .trk-col-head th { padding: 5px 5px; font-size: 8.5px; }
    .trk-w-dec { width: 96px; min-width: 96px; }
    .trk-w-roy { width: 72px; min-width: 72px; }
    .trk-w-money { width: 88px; min-width: 88px; }
    .trk-w-gross { width: 66px; min-width: 66px; }
    .trk-w-acre { width: 54px; }
    .trk-input-qtr { min-width: 90px; }
}

/* Tighten the gap between Count and U/N/O (they read as a pair). */
.trk-col-head .trk-cell-count,
.trk-table tbody td.trk-cell-count { padding-right: 2px; }
.trk-col-head .trk-cell-uno,
.trk-table tbody td.trk-cell-uno { padding-left: 2px; }

/* AOI — a wrapping textarea so a long value flows onto a second line and the
   text auto-shrinks instead of stretching the row. Auto-height via CSS
   field-sizing where supported, with a JS fallback (autoGrowAoi).
   v1.5.1.0: max-height cap removed per the spacing spec — the full AOI is
   always viewable (the row grows instead of scrolling inside the cell). */
.trk-cell-aoi { max-width: 130px; width: 130px; }
/* Responsive AOI column caps — declared AFTER the base rule above so the
   same-specificity media overrides win the cascade (codex P3, PR #12). */
@media (max-width: 1600px) {
    .trk-cell-aoi { width: 110px; max-width: 110px; }
}
@media (max-width: 1280px) {
    .trk-cell-aoi { width: 96px; max-width: 96px; }
}
.trk-input-aoi {
    font-size: 11px;
    line-height: 1.25;
    resize: none;
    overflow-y: hidden;
    white-space: pre-wrap;
    word-break: break-word;
    field-sizing: content;
}
.trk-input-aoi::placeholder { color: var(--mt-tan-400, #a08a6e); }

/* v1.5.1.0 — QTR Call + Depth are wrapping textareas too (spec items 3-4:
   both must be readable in their entirety; long calls word-wrap onto extra
   lines instead of clipping in a one-line input). Same auto-grow machinery
   as AOI (.trk-autogrow + field-sizing/JS fallback), no height cap. */
.trk-input-wrap {
    line-height: 1.3;
    resize: none;
    overflow-y: hidden;
    white-space: pre-wrap;
    word-break: break-word;
    field-sizing: content;
}
.trk-input-wrap::placeholder { color: var(--mt-tan-400, #a08a6e); }
.trk-cell-depth { min-width: 90px; }

/* Sub-interest row offset (↳ before the section). */
.trk-sub-interest { background: var(--mt-cream-50); }
.trk-sub-arrow {
    color: var(--mt-brown-600);
    margin-right: 3px;
    font-weight: 700;
}

/* Inline inputs */
.trk-input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid transparent;
    background: transparent;
    border-radius: 4px;
    padding: 3px 5px;
    font-size: 12.5px;
    font-family: inherit;
    color: var(--mt-brown-900);
}
.trk-input:hover:not([readonly]):not(:disabled) { border-color: var(--mt-tan-300); }
.trk-input:focus {
    outline: none;
    border-color: var(--mt-brown-600);
    background: #fff;
}
.trk-input[readonly] { color: var(--mt-brown-800); cursor: default; }
.trk-input-num { text-align: right; }
.trk-input-qtr { min-width: 140px; }
.trk-save-error { border-color: var(--mt-kill) !important; background: #fdecef; }

/* Dimmed (non-live) interest fields — red 45deg hatching + locked input.
   Which columns are dimmed is driven by the row's Type (isInterestDimmed):
   the hashed cells are not editable for that interest type. */
.trk-dim {
    background-image: repeating-linear-gradient(
        45deg, transparent, transparent 4px,
        rgba(190, 58, 46, 0.16) 4px, rgba(190, 58, 46, 0.16) 8px);
}
.trk-dim .trk-input {
    color: var(--mt-tan-300);
    background: transparent;
    cursor: not-allowed;
}
.trk-dim .trk-input:disabled { cursor: not-allowed; }

/* Derived (read-only) NMA / NRA cells — auto-solved from the interest Type +
   inputs (deriveInterestAcres), never typed. Distinguished from editable
   inputs by a faint tint + muted, right-aligned value. */
.trk-cell-derived { text-align: right; }
.trk-cell-derived .trk-derived-val {
    display: inline-block;
    padding: 2px 6px;
    color: var(--mt-ink, #2b2b2b);
    font-variant-numeric: tabular-nums;
    background: rgba(0, 0, 0, 0.035);
    border-radius: 3px;
    cursor: default;
}

/* Decimal Int / Net Royalty Int calculator cell. */
.trk-calc-cell { display: flex; align-items: center; gap: 3px; }
/* QTR Call cell: input only (the ✎ edit-tract button moved to the leading
   Tract ID cell). */
.trk-qtr-cell { display: flex; align-items: center; gap: 4px; }
.trk-qtr-cell .trk-input-qtr { min-width: 0; flex: 1 1 auto; }

/* Leading Tract ID cell, in the order [✎ edit][T-0001]. */
.trk-cell-tractid { white-space: nowrap; }
.trk-tractid-cell { display: flex; align-items: center; gap: 5px; }
.trk-tractid-label {
    font-variant-numeric: tabular-nums;
    color: var(--mt-brown-700);
    font-size: 12px;
}
.trk-tract-edit {
    flex: 0 0 auto;
    border: 1px solid var(--mt-tan-300);
    background: var(--mt-cream-100);
    color: var(--mt-brown-700);
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 11px;
    cursor: pointer;
}
.trk-tract-edit:hover:not(:disabled) { background: var(--mt-tan-100, #f0e6d6); }
/* The ✎ tract-editor icon only appears while the Tracts table is in edit mode
   — i.e. after the top ✎ Edit button is clicked (which adds `trk-editing`).
   This applies to prospects AND assets: the icon is hidden by default and
   disappears again when Edit is toggled off / the asset is re-locked. */
.trk-tract-edit { display: none; }
.trk-editing .trk-tract-edit { display: inline-flex; }

/* The top ✎ Edit toggle itself (mirrors Legal Description's admin-edit gate):
   - Prospects (section NOT .trk-locked): always visible — 2-step edit
     (✎ Edit → per-row ✎).
   - Assets (.trk-locked): hidden until the dialog's Admin Edit (⚙ Actions) is
     on, then it appears — 3-step edit (Admin Edit → ✎ Edit → per-row ✎). */
.trk-section.trk-locked .trk-edit-btn { display: none; }
.admin-edit-mode .trk-section.trk-locked .trk-edit-btn { display: inline-flex; }
.trk-calc-btn {
    flex: 0 0 auto;
    border: 1px solid var(--mt-tan-300);
    background: var(--mt-cream-100);
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 11px;
    color: var(--mt-brown-700);
    cursor: pointer;
}
.trk-calc-btn:hover:not(:disabled) { background: var(--mt-tan-100, #f0e6d6); }
.trk-calc-btn:disabled { cursor: not-allowed; opacity: 0.45; }
/* Burnt-orange when a fraction/burden expression is stored. */
.trk-calc-btn-set {
    background: #b96c28;
    border-color: #9a5520;
    color: #fff;
    font-weight: 700;
}
.trk-calc-btn-set:hover:not(:disabled) { background: #a85f22; }

/* ½ / ƒx calculator popover (portal to body, escapes table overflow). */
.trk-calc-pop {
    position: fixed;
    z-index: 12000;
    width: 280px;
    background: #fff;
    border: 1px solid var(--mt-tan-300);
    border-radius: 8px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
    padding: 12px;
    font-size: 13px;
    color: var(--mt-brown-700);
}
.trk-calc-pop-title { font-weight: 700; margin-bottom: 8px; }
.trk-calc-pop-input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--mt-tan-300);
    border-radius: 5px;
    padding: 6px 8px;
    font-size: 14px;
    font-family: inherit;
}
.trk-calc-pop-input:focus { outline: none; border-color: #b96c28; }
.trk-calc-pop-preview {
    margin-top: 8px;
    font-size: 12px;
    color: var(--mt-brown-600, #6b5440);
    min-height: 16px;
    word-break: break-word;
}
.trk-calc-pop-preview.trk-calc-pop-err { color: #be3a2e; }
.trk-calc-pop-hint { margin-top: 6px; font-size: 11px; color: var(--mt-tan-400, #a08a6e); }
/* Σ standalone-NRI popover rows (shares the .trk-calc-pop chrome). */
.trk-nri-pop-formula { font-size: 11.5px; color: var(--mt-brown-800, #5a4632); margin-bottom: 8px; }
.trk-nri-pop-row { display: flex; align-items: baseline; gap: 10px; padding: 3px 0; font-size: 12px; }
.trk-nri-pop-lease { flex: 1 1 auto; color: var(--mt-brown-700); }
.trk-nri-pop-r { color: var(--mt-tan-400, #a08a6e); font-variant-numeric: tabular-nums; }
.trk-nri-pop-val { font-weight: 700; font-variant-numeric: tabular-nums; color: #2c1d0a; }
.trk-calc-pop-actions { display: flex; align-items: center; gap: 6px; margin-top: 12px; }
.trk-calc-pop-spacer { flex: 1 1 auto; }
.trk-calc-pop-btn {
    border: 1px solid var(--mt-tan-300);
    background: var(--mt-cream-100);
    border-radius: 5px;
    padding: 5px 12px;
    font-size: 12px;
    cursor: pointer;
    color: var(--mt-brown-700);
}
.trk-calc-pop-btn:hover { background: var(--mt-tan-100, #f0e6d6); }
.trk-calc-pop-clear { color: #be3a2e; }
.trk-calc-pop-apply {
    background: #b96c28;
    border-color: #9a5520;
    color: #fff;
    font-weight: 700;
}
.trk-calc-pop-apply:hover:not(:disabled) { background: #a85f22; }
.trk-calc-pop-apply:disabled { opacity: 0.5; cursor: not-allowed; }

/* Type color pills (select). */
.trk-type-select {
    border: 1px solid var(--mt-tan-300);
    border-radius: 5px;
    padding: 3px 4px;
    font-weight: 600;
    cursor: pointer;
    background: #fff;
    min-width: 90px;
}
.trk-type-executive { color: #b96c28; border-color: #b96c28; }
.trk-type-nemi      { color: #1a8c44; border-color: #1a8c44; }
.trk-type-orri      { color: #6b5b95; border-color: #6b5b95; }
.trk-type-npri      { color: #a1577c; border-color: #a1577c; }
.trk-type-wi        { color: #6b5b95; border-color: #6b5b95; }
.trk-type-carry     { color: #8a5a2f; border-color: #8a5a2f; }
.trk-type-unknown   { color: var(--mt-brown-700); }

/* WI variant (Slice 5) text columns + payout pill. */
.trk-cell-operator { min-width: 110px; }
.trk-cell-afe      { min-width: 90px; }
.trk-cell-payout   { text-align: center; white-space: nowrap; }
.trk-col-head .trk-cell-payout { text-align: center; }
.trk-payout-sel .trk-uno-opt { width: 36px; }
.trk-payout-bpo.on { background: #1d6fa6; }
.trk-payout-apo.on { background: #b96c28; }

/* Count toggle — a real sliding switch: green "On" ⇄ red "Off". The knob
   travels the full width of the track (animated) and the whole pill turns
   green when counted / red when excluded, so an Off tract is unmistakable. */
.trk-count-toggle {
    position: relative;
    display: inline-block;
    width: 56px;
    height: 22px;
    border: 1px solid var(--mt-tan-300);
    border-radius: 999px;
    padding: 0;
    background: #ececec;
    cursor: pointer;
    vertical-align: middle;
    transition: background 0.18s ease, border-color 0.18s ease;
}
.trk-count-toggle .trk-count-knob {
    position: absolute;
    top: 50%;
    left: 3px;
    width: 16px; height: 16px;
    margin-top: -8px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    transition: left 0.18s ease, background 0.18s ease;
}
.trk-count-toggle .trk-count-label {
    position: absolute;
    top: 0;
    line-height: 22px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    pointer-events: none;
}
/* ON — green track, knob slid RIGHT, "On" label on the left. */
.trk-count-toggle.on {
    background: var(--mt-done-bg);
    border-color: var(--mt-done-bd);
}
.trk-count-toggle.on .trk-count-knob { left: calc(100% - 19px); background: var(--mt-done-fg); }
.trk-count-toggle.on .trk-count-label { left: 8px; color: var(--mt-done-fg); }
/* OFF — red track, knob LEFT, "Off" label on the right. */
.trk-count-toggle.off {
    background: #fdeceb;
    border-color: #e0a49e;
}
.trk-count-toggle.off .trk-count-knob { left: 3px; background: var(--mt-kill); }
.trk-count-toggle.off .trk-count-label { right: 8px; color: var(--mt-kill); }

/* U/N/O three-segment pill. */
.trk-uno-sel {
    display: inline-flex;
    border: 1px solid var(--mt-tan-300);
    border-radius: 999px;
    overflow: hidden;
}
.trk-uno-opt {
    border: none;
    background: #fff;
    color: var(--mt-brown-700);
    width: 22px;
    padding: 3px 0;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    border-right: 1px solid var(--mt-tan-200);
}
.trk-uno-opt:last-child { border-right: none; }
.trk-uno-opt.on { color: #fff; }
.trk-uno-U.on { background: #a14040; }
.trk-uno-N.on { background: #1d6fa6; }
.trk-uno-O.on { background: #d68a1a; }

/* Locked controls (toggles/pills) when the asset table is read-only. */
.trk-control-locked { opacity: 0.55; pointer-events: none; }

/* Row action buttons. */
.trk-row-act {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
    padding: 2px 4px;
    border-radius: 4px;
    color: var(--mt-brown-700);
}
.trk-row-act:hover:not(:disabled) { background: var(--mt-cream-100); }
.trk-row-act:disabled { opacity: 0.4; cursor: not-allowed; }
.trk-row-act-danger:hover:not(:disabled) { background: #fdecef; }
.trk-cell-actions { white-space: nowrap; text-align: right; }

/* Σ standalone-NRI (TNRI) info button — always visible; display-only, so never
   disabled by the edit-lock (it intentionally has no data-trk-act). */
.trk-line-nri { opacity: 1; font-size: 12px; font-weight: 700; }

/* Actions column layout: Σ (TNRI) sits in its own zone on the LEFT — centered
   between the U/N/O column and the clone button — with clone + delete grouped
   on the RIGHT. The header (th.trk-cell-tnri) mirrors the same two zones so the
   "TNRI" label lands directly above the Σ icon. The flex lives on an inner
   wrapper so the <td>/<th> keep their table-cell behavior. */
.trk-act-wrap { display: flex; align-items: center; white-space: nowrap; }
.trk-act-nri { min-width: 38px; text-align: center; flex: 0 0 auto; }
.trk-act-nri:empty { min-width: 0; } /* WI variant has no Σ — collapse the zone */
/* ⎘ Clone + 🗑 Delete are structural edit actions — hidden until ✎ Edit
   unlocks the table (same `trk-editing` gating as the per-row ✎ editor and
   the checkbox column), for prospects AND assets alike, so they can't be
   triggered outside Edit mode. The Σ Tract-NRI popover (.trk-act-nri) stays
   visible — it's display-only. */
.trk-act-edit { display: none; align-items: center; gap: 2px; margin-left: auto; }
.trk-editing .trk-act-edit { display: inline-flex; }

/* Bulk-select checkbox column + selected-row highlight. The column appears
   only after ✎ Edit unlocks the table (same `trk-editing` gating as the
   per-row ✎ tract editor) — collapsed entirely when read-only. */
.trk-cell-check { width: 34px; text-align: center; padding: 0 4px; display: none; }
.trk-editing .trk-cell-check { display: table-cell; }
.trk-row-check { cursor: pointer; }
.trk-row-check:disabled { cursor: not-allowed; }
.trk-row-selected { background: var(--mt-tan-100, #f3ead9) !important; }

/* Bulk-action ribbon (shown when interest rows are selected). */
.trk-bulk-ribbon {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    background: var(--mt-brown-700, #5a4632);
    color: #fff;
    border-radius: 6px 6px 0 0;
    font-size: 12px;
}
.trk-bulk-count { font-weight: 700; }
.trk-bulk-spacer { flex: 1 1 auto; }
.trk-bulk-btn {
    border: 1px solid rgba(255,255,255,0.4);
    background: rgba(255,255,255,0.12);
    color: #fff;
    border-radius: 5px;
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
}
.trk-bulk-btn:hover:not(:disabled) { background: rgba(255,255,255,0.24); }
.trk-bulk-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.trk-bulk-btn-danger { border-color: #f3b0b8; color: #ffd9de; }
.trk-bulk-btn-danger:hover:not(:disabled) { background: rgba(190,58,46,0.55); }

/* ⎘ Clone chooser modal — sits above the asset-detail dialog (z-index 9100). */
.trk-clone-overlay {
    position: fixed;
    inset: 0;
    z-index: 9700;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.35);
}
.trk-clone {
    background: #fff;
    border-radius: 10px;
    padding: 18px 20px;
    max-width: 440px;
    width: calc(100% - 48px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.3);
    font-size: 13px;
    color: #2c1d0a;
}
.trk-clone-head {
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 8px;
    color: var(--mt-brown-700, #5a4632);
}
.trk-clone-body { margin: 0 0 16px; line-height: 1.5; }
.trk-clone-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.trk-clone-btn {
    border: 1px solid var(--mt-tan-300, #d9c8a9);
    background: #fff;
    color: var(--mt-brown-700, #5a4632);
    border-radius: 6px;
    padding: 7px 14px;
    font-size: 13px;
    cursor: pointer;
}
.trk-clone-btn:hover { background: var(--mt-cream-100, #f7f1e5); }
.trk-clone-btn-primary {
    background: var(--mt-brown-700, #5a4632);
    border-color: var(--mt-brown-700, #5a4632);
    color: #fff;
}
.trk-clone-btn-primary:hover { background: var(--mt-brown-900, #3a2a18); }
.trk-clone-btn-ghost { border-color: transparent; color: #8a7a5f; }

/* ==========================================================================
 * Tracts → Leases expander (Feature 1 of the Tracts/Leases handoff).
 *   (a) far-left +/- expander column on each tract row (present in Locked +
 *       Edit modes — it sits before the edit-only bulk-select checkbox)
 *   (b) inline lease panel dropped beneath the tract row
 * See js/ui/royaltyScreen/leases.js. Uses the existing --mt-* tokens; the
 * lease maroon accent (--lz-maroon) is feature-local.
 * ========================================================================== */

.trk-table { --lz-maroon: #97485b; --lz-maroon-d: #7d3a4a; }

/* (a) Expander column — first, before the bulk-select checkbox. */
.trk-col-head .trk-cell-exp { width: 30px; text-align: center; }
.trk-cell-exp { width: 30px; text-align: center; padding-left: 6px !important; padding-right: 0 !important; }
.trk-exp {
    position: relative;
    width: 20px; height: 20px; padding: 0;
    border: 1px solid var(--mt-tan-300); background: #fff;
    color: var(--mt-brown-800); border-radius: 4px; cursor: pointer;
    font-size: 13px; line-height: 1; font-family: ui-monospace, Menlo, monospace;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .12s, border-color .12s;
}
.trk-exp:hover { background: var(--mt-cream-100); border-color: var(--mt-brown-600); }
.trk-exp.open { background: var(--mt-brown-600); color: #fff; border-color: #9a5520; }
.trk-exp .badge {
    position: absolute; top: -7px; right: -8px;
    background: var(--lz-maroon); color: #fff;
    font-size: 8.5px; font-weight: 700; line-height: 1;
    padding: 1px 4px; border-radius: 999px; font-family: inherit;
}
/* background-COLOR (not the shorthand): the type-driven .trk-dim hatching is
   a background-image on the same <td>, and the shorthand was wiping it the
   moment a tract was expanded to show its leases. */
.trk-table tbody tr.trk-lease-expanded > td { background-color: var(--mt-cream-100); }

/* (b) Lease detail row + panel. */
tr.trk-lease-row > td {
    padding: 0 !important;
    background: var(--mt-cream-50) !important;
    border-bottom: 2px solid var(--mt-tan-300) !important;
}
.lz-wrap { padding: 10px 16px 13px 40px; border-left: 3px solid var(--lz-maroon); }
.lz-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.lz-title {
    font-size: 11px; font-weight: 700; color: var(--mt-brown-800);
    text-transform: uppercase; letter-spacing: 0.06em;
    display: inline-flex; align-items: center; gap: 7px;
}
.lz-count {
    background: var(--lz-maroon); color: #fff; font-size: 10px; font-weight: 700;
    padding: 1px 7px; border-radius: 999px; font-variant-numeric: tabular-nums;
}
.lz-count.zero { background: var(--mt-tan-300); color: #6b5236; }
.lz-sub { font-size: 11px; color: #8a7050; }
.lz-actions { margin-left: auto; display: flex; gap: 6px; }
.lz-act {
    background: #fff; border: 1px solid var(--mt-tan-300); color: var(--mt-brown-800);
    padding: 4px 10px; font-size: 11.5px; font-weight: 500; border-radius: 5px;
    cursor: pointer; line-height: 1; display: inline-flex; align-items: center; gap: 5px;
    font-family: inherit;
}
.lz-act:hover { background: var(--mt-cream-100); border-color: var(--mt-brown-600); }
.lz-act.primary { background: var(--mt-brown-600); color: #fff; border-color: #9a5520; }
.lz-act.primary:hover { background: var(--mt-brown-700); }

.lz-table-wrap { background: #fff; border: 1px solid var(--mt-tan-300); border-radius: 6px; overflow: hidden; }
.lz-table { border-collapse: collapse; width: 100%; font-size: 12px; }
.lz-table thead th {
    text-align: left; padding: 7px 10px; font-size: 10.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap;
    background: var(--mt-cream-100); color: var(--mt-brown-800);
    border-bottom: 1px solid var(--mt-tan-300);
}
.lz-table th.num, .lz-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.lz-table tbody td { padding: 6px 10px; border-bottom: 1px solid var(--mt-tan-200); color: #2c1d0a; vertical-align: middle; }
.lz-table tbody tr:last-child td { border-bottom: none; }
.lz-table tbody tr:hover { background: var(--mt-cream-50); }

.lz-id {
    display: inline-flex; align-items: center; gap: 4px; background: transparent; border: none;
    color: var(--lz-maroon); font-weight: 700; font-family: ui-monospace, Menlo, monospace;
    font-size: 12px; cursor: pointer; padding: 2px 5px; margin: -2px -5px; border-radius: 4px;
}
.lz-id:hover { background: color-mix(in oklab, var(--lz-maroon) 10%, #fff); text-decoration: underline; }
.lz-id .arr { font-size: 10px; opacity: .7; }

.lz-rec { display: inline-flex; align-items: center; gap: 7px; font-variant-numeric: tabular-nums; }
.lz-rec .s { color: #c0ac8e; margin: 0 3px; }
.lz-doc {
    background: transparent; border: 1px solid var(--mt-tan-300); color: var(--mt-brown-700);
    width: 20px; height: 20px; border-radius: 4px; cursor: pointer; font-size: 10px;
    display: inline-flex; align-items: center; justify-content: center;
}
.lz-doc:hover { background: var(--mt-cream-100); border-color: var(--mt-brown-600); }
.lz-rec-empty { color: #b3a487; font-style: italic; cursor: pointer; font-size: 11.5px; }
.lz-rec-empty:hover { color: var(--mt-brown-600); text-decoration: underline; }

.lz-num { display: inline-flex; align-items: center; gap: 5px; justify-content: flex-end; }
.lz-frac {
    background: var(--mt-cream-100); border: 1px solid var(--mt-tan-300); color: var(--mt-brown-800);
    border-radius: 3px; width: 18px; height: 18px; font-size: 10px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; font-family: inherit;
}
.lz-frac:hover { background: var(--mt-brown-600); color: #fff; border-color: #9a5520; }
.lz-frac.has { background: var(--mt-brown-600); color: #fff; border-color: #9a5520; }

.lz-status {
    display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 7px;
    border-radius: 999px; font-size: 10.5px; font-weight: 600; line-height: 1.4;
    white-space: nowrap; border: 1px solid;
}
.lz-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.lz-status.active  { color: #1a8c44; background: #eef7ed; border-color: #9bc89a; }
.lz-status.hbp     { color: #2a6fdb; background: #eaf1fc; border-color: #a9c5ee; }
.lz-status.pending { color: #b07d18; background: #fbf2dc; border-color: #e0c389; }
.lz-status.expired { color: #b00020; background: #fdecec; border-color: #e3a9a9; }

.lz-acts { text-align: center; white-space: nowrap; }
.lz-rowact {
    background: transparent; border: 1px solid var(--mt-tan-300); color: var(--mt-brown-800);
    width: 24px; height: 24px; border-radius: 4px; cursor: pointer; font-size: 12px; margin-left: 2px;
}
.lz-rowact:hover { background: var(--mt-cream-100); border-color: var(--mt-brown-600); }
.lz-rowact.danger { color: #b91c1c; }
.lz-rowact.danger:hover { background: #fee2e2; border-color: #b91c1c; }

.lz-add { display: flex; align-items: center; gap: 8px; padding: 8px 2px 0; }
.lz-add-link {
    background: transparent; border: 1px dashed var(--mt-tan-300); color: var(--mt-brown-700);
    font-size: 11.5px; font-weight: 600; padding: 5px 12px; border-radius: 6px; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px; font-family: inherit;
}
.lz-add-link:hover { background: #fff; border-color: var(--mt-brown-600); color: var(--mt-brown-800); }
.lz-add .note { font-size: 11px; color: #b3a487; font-style: italic; }

/* Empty / capture state for a tract with no leases yet. */
.lz-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; gap: 8px; padding: 22px 16px; background: #fff;
    border: 1px dashed var(--mt-tan-300); border-radius: 6px;
}
.lz-empty .ico { font-size: 24px; opacity: .42; }
.lz-empty .t { font-size: 12.5px; font-weight: 600; color: #8a7050; }
.lz-empty .acts { display: flex; gap: 8px; margin-top: 2px; }

/* Transient toast for stubbed actions (From Map / Clone / ½ / recording) and
 * error surfaces. Phase-2 stand-in until a shared toast utility exists. */
.lz-toast {
    position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(8px);
    background: var(--mt-brown-900, #5a3a1d); color: #fff;
    font-size: 12.5px; line-height: 1.4; padding: 10px 16px; border-radius: 8px;
    max-width: 440px; box-shadow: 0 10px 28px rgba(0,0,0,0.28);
    opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 100000;
}
.lz-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ===========================================================================
 * Lease Detail screen (Feature 2 of the Tracts/Leases handoff) — `lp-*`.
 *
 * A full-screen modal opened from a lease's "#NNNN ↗" link in the Feature-1
 * expander (js/ui/royaltyScreen/leaseDetail.js). Header + expiration banner +
 * 10-tab chrome; Summary + Terms are live, the remaining tabs are placeholders
 * filled in by later slices. Ported from the design handoff's `Lease Details.
 * html` lp-* classes; uses the same --mt-* tokens as the rest of this file.
 * ======================================================================== */
.lp-overlay {
    position: fixed; inset: 0; z-index: 99990; overflow-y: auto;
    background: rgba(40, 25, 10, 0.46); padding: 22px;
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #2c1d0a;
}
.lp-overlay .mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-variant-numeric: tabular-nums; }
.lp-overlay .num { text-align: right; font-variant-numeric: tabular-nums; }
.lp-overlay .lp-muted { color: #8a7050; }
#lp-root {
    max-width: 1320px; margin: 0 auto; background: #fff;
    border-radius: 9px; overflow: hidden; box-shadow: 0 12px 40px rgba(0,0,0,0.3);
}

/* ---- Header ---- */
.lp-head { display: flex; align-items: center; gap: 14px; padding: 13px 18px; background: linear-gradient(to bottom, #b96c28, #7a4d27); color: #fff; }
.lp-back { background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3); color: #fff; width: 30px; height: 30px; border-radius: 6px; cursor: pointer; font-size: 16px; line-height: 1; flex-shrink: 0; }
.lp-back:hover { background: rgba(255,255,255,0.28); }
.lp-head-id { flex: 1; min-width: 0; }
.lp-head-name { font-size: 18px; font-weight: 600; line-height: 1.2; }
.lp-head-sub { display: flex; align-items: center; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.lp-idbadge { background: rgba(255,255,255,0.2); padding: 2px 8px; border-radius: 10px; font-size: 11px; font-family: ui-monospace, Menlo, monospace; }
.lp-head-entity { font-size: 12px; color: #ffe6cc; }
.lp-close { background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3); color: #fff; font-size: 20px; line-height: 1; padding: 3px 12px; border-radius: 5px; cursor: pointer; flex-shrink: 0; }
.lp-close:hover { background: rgba(255,255,255,0.3); }

/* ---- Expiration banner ---- */
.lp-banner { display: flex; align-items: stretch; gap: 0; background: #fff; border-bottom: 1px solid var(--mt-tan-300); flex-wrap: wrap; }
.lp-bstat { padding: 9px 16px; border-right: 1px solid var(--mt-tan-200); display: flex; flex-direction: column; gap: 3px; }
.lp-bstat.grow { flex: 1; min-width: 160px; }
.lp-bstat:last-child { border-right: none; }
.lp-bl { font-size: 9.5px; color: #999; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.lp-bv { font-size: 13px; color: #2c1d0a; }
.lp-days { font-weight: 700; font-variant-numeric: tabular-nums; }
.lp-days-green { color: #1a8c44; }
.lp-days-amber { color: #b07d18; }
.lp-days-red { color: #b00020; }

/* ---- Tabs ---- */
.lp-tabs { display: flex; gap: 2px; flex-wrap: wrap; padding: 0 12px; background: var(--mt-cream-100); border-bottom: 1px solid var(--mt-tan-300); }
.lp-tab { background: transparent; border: none; border-bottom: 2px solid transparent; padding: 10px 13px; font-size: 12.5px; font-weight: 600; color: #8a7050; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-family: inherit; }
.lp-tab:hover { color: var(--mt-brown-800); background: #fff; }
.lp-tab.active { color: var(--mt-brown-900); border-bottom-color: var(--mt-brown-600); background: #fff; }
.lp-tabcount { background: var(--mt-tan-200); color: #6b5236; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 999px; }
.lp-tab.active .lp-tabcount { background: var(--mt-brown-600); color: #fff; }

/* ---- Content + cards ---- */
.lp-content { padding: 14px 16px 20px; background: #faf6f0; }
.lp-sumbar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.lp-editbar { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.lp-ro-note { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; padding: 7px 12px; font-size: 12px; color: #6b5236; background: var(--mt-cream-100); border: 1px solid var(--mt-tan-300); border-radius: 6px; }
.lp-ro-note b { color: var(--mt-brown-800); }
.lp-editbtn { background: #fff; border: 1px solid var(--mt-tan-300); color: var(--mt-brown-800); padding: 5px 12px; font-size: 12px; font-weight: 600; border-radius: 6px; cursor: pointer; font-family: inherit; }
.lp-editbtn:hover { background: var(--mt-cream-100); border-color: var(--mt-brown-600); }
.lp-switch { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--mt-brown-800); cursor: pointer; user-select: none; }
.lp-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.lp-switch-track { width: 34px; height: 18px; border-radius: 999px; background: var(--mt-tan-300); position: relative; transition: background .15s; flex-shrink: 0; }
.lp-switch-knob { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.25); transition: transform .15s; }
.lp-switch input:checked + .lp-switch-track { background: var(--mt-brown-600); }
.lp-switch input:checked + .lp-switch-track .lp-switch-knob { transform: translateX(16px); }
.lp-sumland { margin-top: 4px; }
.lp-sumland-rule { font-size: 11px; font-weight: 700; color: var(--mt-brown-700); text-transform: uppercase; letter-spacing: 0.08em; border-top: 1px dashed var(--mt-tan-300); padding-top: 12px; margin-bottom: 8px; }
.lp-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lp-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 1000px) { .lp-grid-3, .lp-grid-2 { grid-template-columns: 1fr; } }

.lp-card { background: #fff; border: 1px solid var(--mt-tan-300); border-radius: 8px; overflow: hidden; margin-bottom: 12px; }
.lp-card-head { display: flex; align-items: baseline; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--mt-tan-200); background: var(--mt-cream-50); }
.lp-card-head h3 { margin: 0; font-size: 12px; font-weight: 700; color: var(--mt-brown-800); text-transform: uppercase; letter-spacing: 0.06em; }
.lp-card-meta { margin-left: auto; font-size: 11px; color: #999; font-style: italic; }
.lp-card-body { padding: 12px 14px; }

/* Summary provenance affordances */
.lp-cardedit { background: #fff; border: 1px solid var(--mt-tan-300); color: var(--mt-brown-800); padding: 3px 9px; font-size: 11px; font-weight: 600; font-style: normal; letter-spacing: 0; text-transform: none; border-radius: 5px; cursor: pointer; font-family: inherit; }
.lp-cardedit:hover { background: var(--mt-cream-100); border-color: var(--mt-brown-600); }
.lp-jump { background: transparent; border: 1px solid var(--mt-tan-200); color: var(--mt-brown-700); width: 18px; height: 18px; border-radius: 4px; font-size: 10px; line-height: 1; cursor: pointer; flex-shrink: 0; }
.lp-jump:hover { background: var(--mt-cream-100); border-color: var(--mt-brown-600); }
.lp-derived { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 4px; background: var(--mt-cream-100); border: 1px solid var(--mt-tan-300); color: var(--mt-brown-700); font-style: italic; font-size: 10px; cursor: help; }
.lp-derived:hover { background: var(--mt-brown-600); color: #fff; border-color: #9a5520; }
.lp-cardmeta-hint { font-size: 11px; color: #b3a487; font-style: italic; }
.lp-provenance-key { font-size: 10.5px; color: #8a7050; font-style: italic; display: inline-flex; align-items: center; gap: 5px; }
.lp-provenance-key .lp-derived, .lp-provenance-key .lp-jump { width: 15px; height: 15px; cursor: default; }

/* ---- Field grid ---- */
.lp-fields { display: grid; grid-template-columns: 1fr; gap: 1px 0; }
.lp-f { display: grid; grid-template-columns: 168px 1fr; gap: 4px 12px; align-items: baseline; padding: 5px 0; border-bottom: 1px solid var(--mt-tan-100); }
.lp-f:last-child { border-bottom: none; }
.lp-l { font-size: 12px; color: #777; font-weight: 500; }
.lp-req { color: #b96c28; margin-left: 2px; font-weight: 700; }
.lp-v { font-size: 13px; color: #2c1d0a; display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.lp-v.mono { font-family: ui-monospace, Menlo, monospace; }
.lp-na { color: #b3a487; font-style: italic; font-size: 12px; }
.lp-frac { color: #8a7050; font-size: 11px; background: var(--mt-cream-100); border: 1px solid var(--mt-tan-200); border-radius: 3px; padding: 0 5px; }

/* ---- Status chips / pills ---- */
.lp-status, .lp-pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 1.5; white-space: nowrap; border: 1px solid; }
.lp-status.big { font-size: 12.5px; padding: 4px 12px; }
.lp-status-green, .lp-pill.green { color: #1a8c44; background: #eef7ed; border-color: #9bc89a; }
.lp-status-blue, .lp-pill.blue { color: #2a6fdb; background: #eaf1fc; border-color: #a9c5ee; }
.lp-status-amber, .lp-pill.amber { color: #b07d18; background: #fbf2dc; border-color: #e0c389; }
.lp-status-red, .lp-pill.red { color: #b00020; background: #fdecec; border-color: #e3a9a9; }
.lp-status-neutral, .lp-pill.neutral { color: #6b5236; background: var(--mt-cream-100); border-color: var(--mt-tan-300); }
.lp-pill.on-dark { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.35); color: #fff; }
.lp-head .lp-status { box-shadow: 0 1px 2px rgba(0,0,0,0.15); }

/* ---- Placeholder (tabs not yet built) ---- */
.lp-placeholder { background: #fff; border: 1px dashed var(--mt-tan-300); border-radius: 8px; padding: 30px 22px; text-align: center; color: #8a7050; }
.lp-placeholder .ico { font-size: 26px; opacity: .4; }
.lp-placeholder .t { font-size: 13.5px; font-weight: 600; color: var(--mt-brown-800); margin-top: 8px; }
.lp-placeholder .d { font-size: 12px; margin-top: 4px; }
.lp-tbd { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 600; color: #9a6a12; background: #fcf3da; border: 1px dashed #d9b466; border-radius: 999px; padding: 1px 7px; }

/* ---- Loading / error frames ---- */
.lp-loading, .lp-error { padding: 60px 22px; text-align: center; color: #8a7050; font-size: 13.5px; }
.lp-error { color: #b00020; }
.lp-errorframe { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 50px 22px 56px; }
.lp-errorframe .lp-error { padding: 0; }

/* ---- Add / Edit drawer ---- */
.lp-drawer-overlay { position: fixed; inset: 0; background: rgba(40,25,10,0.38); z-index: 99995; display: flex; justify-content: flex-end; }
.lp-drawer { width: 480px; max-width: 94vw; height: 100%; background: #fff; box-shadow: -10px 0 40px rgba(0,0,0,0.25); display: flex; flex-direction: column; animation: lp-slide .18s ease; }
@keyframes lp-slide { from { transform: translateX(24px); opacity: .5; } to { transform: none; opacity: 1; } }
.lp-drawer-head { display: flex; align-items: center; gap: 10px; padding: 13px 16px; background: linear-gradient(to bottom, #b96c28, #7a4d27); color: #fff; flex-shrink: 0; }
.lp-drawer-eyebrow { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.85; }
.lp-drawer-title { font-size: 16px; font-weight: 600; margin-top: 1px; }
.lp-drawer-x { margin-left: auto; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3); color: #fff; width: 28px; height: 28px; border-radius: 5px; font-size: 18px; line-height: 1; cursor: pointer; flex-shrink: 0; }
.lp-drawer-x:hover { background: rgba(255,255,255,0.3); }
.lp-drawer-body { flex: 1; overflow-y: auto; padding: 14px 16px; background: #faf6f0; }
.lp-form { display: flex; flex-direction: column; gap: 12px; }
.lp-fld { display: flex; flex-direction: column; gap: 5px; }
.lp-fld-l { font-size: 11.5px; font-weight: 600; color: #6b5236; }
.lp-fld input, .lp-fld select, .lp-fld textarea { border: 1px solid var(--mt-tan-300); border-radius: 6px; padding: 8px 10px; font-size: 13px; font-family: inherit; color: #2c1d0a; background: #fff; width: 100%; }
.lp-fld input:focus, .lp-fld select:focus, .lp-fld textarea:focus { outline: none; border-color: var(--mt-brown-600); box-shadow: 0 0 0 2px rgba(185,108,40,0.15); }
.lp-fld textarea { resize: vertical; }
.lp-fld .mono { font-family: ui-monospace, Menlo, monospace; }
.lp-fld-hint { font-size: 11px; color: #b3a487; font-style: italic; }
.lp-inrow { display: flex; gap: 6px; align-items: center; }
.lp-inrow .lp-calc { width: 30px; height: 36px; flex-shrink: 0; }
.lp-calc { background: var(--mt-cream-100); border: 1px solid var(--mt-tan-300); color: var(--mt-brown-800); border-radius: 5px; font-size: 12px; cursor: pointer; line-height: 1; font-family: inherit; }
.lp-calc:hover { background: var(--mt-brown-600); color: #fff; border-color: #9a5520; }
.lp-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lp-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: #2c1d0a; cursor: pointer; padding: 7px 0; }
.lp-check input { width: auto; }
.lp-form-hint { margin-top: 4px; font-size: 11.5px; color: #8a7050; font-style: italic; background: var(--mt-cream-100); border: 1px solid var(--mt-tan-200); border-radius: 6px; padding: 8px 11px; }
.lp-drawer-foot { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: var(--mt-cream-100); border-top: 1px solid var(--mt-tan-300); flex-shrink: 0; }
.lp-btn-primary { background: var(--mt-brown-600); color: #fff; border: 1px solid #9a5520; padding: 8px 16px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
.lp-btn-primary:hover { background: var(--mt-brown-700); }
.lp-btn-primary[disabled] { opacity: .6; cursor: default; }
.lp-btn-ghost { background: #fff; border: 1px solid var(--mt-tan-300); color: #6b5236; padding: 8px 14px; border-radius: 6px; font-size: 13px; cursor: pointer; font-family: inherit; }
.lp-btn-ghost:hover { background: var(--mt-cream-50); }

/* ---- Fraction calculator popover ---- */
.lp-fracpop { position: absolute; z-index: 99999; background: #fff; border: 1px solid var(--mt-brown-600); border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); padding: 10px; width: 230px; }
.lp-fracpop-h { font-size: 11px; font-weight: 700; color: var(--mt-brown-800); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; }
.lp-fracpop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.lp-fracopt { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; background: var(--mt-cream-50); border: 1px solid var(--mt-tan-300); border-radius: 5px; padding: 5px 8px; cursor: pointer; font-family: inherit; }
.lp-fracopt:hover { background: var(--mt-brown-600); border-color: #9a5520; }
.lp-fracopt:hover b, .lp-fracopt:hover span { color: #fff; }
.lp-fracopt b { font-size: 13px; color: var(--mt-brown-900); }
.lp-fracopt span { font-size: 10px; color: #8a7050; font-family: ui-monospace, Menlo, monospace; }
.lp-fracpop-custom { display: flex; gap: 5px; margin-top: 8px; }
.lp-fracpop-custom input { flex: 1; min-width: 0; border: 1px solid var(--mt-tan-300); border-radius: 5px; padding: 5px 7px; font-size: 12px; font-family: inherit; }
.lp-fracpop-custom button { background: var(--mt-brown-600); color: #fff; border: none; border-radius: 5px; padding: 5px 10px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; }
.lp-fracpop-note { font-size: 10.5px; color: #8a7050; font-style: italic; margin-top: 7px; }

/* ---- Child-record tables (Parties grid + later slices) ---- */
.lp-tablewrap { overflow-x: auto; border: 1px solid var(--mt-tan-200); border-radius: 6px; }
.lp-table { border-collapse: collapse; width: 100%; font-size: 12px; min-width: 720px; }
.lp-table thead th { text-align: left; padding: 7px 10px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--mt-brown-800); background: var(--mt-cream-100); border-bottom: 1px solid var(--mt-tan-300); white-space: nowrap; }
.lp-table th.num, .lp-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.lp-table tbody td { padding: 7px 10px; border-bottom: 1px solid var(--mt-tan-200); color: #2c1d0a; vertical-align: top; }
.lp-table tbody tr:last-child td { border-bottom: none; }
.lp-table tbody tr:hover { background: var(--mt-cream-50); }
.lp-table .lp-strong { font-weight: 600; }
/* Covered Tracts — Asset/Prospect group header + per-group subtotal rows. */
.lp-table tr.lp-subhead td {
    padding: 5px 10px; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.04em; color: var(--mt-brown-800); background: var(--mt-cream-100);
    border-bottom: 1px solid var(--mt-tan-300);
}
.lp-table tr.lp-subtotal td {
    padding: 5px 10px; font-size: 11.5px; font-weight: 600; color: var(--mt-brown-800);
    background: var(--mt-cream-50); border-bottom: 1px solid var(--mt-tan-300);
}
.lp-table tbody tr.lp-subhead:hover td, .lp-table tbody tr.lp-subtotal:hover td { background: var(--mt-cream-100); }
.lp-table .lp-notes { color: #6b5236; font-size: 11.5px; max-width: 260px; }
.lp-rowedit { cursor: pointer; }
.lp-acts { white-space: nowrap; text-align: right; }
.lp-rowact { background: transparent; border: 1px solid var(--mt-tan-200); color: var(--mt-brown-700); border-radius: 5px; padding: 2px 7px; font-size: 12px; cursor: pointer; }
.lp-rowact:hover { background: var(--mt-cream-100); border-color: var(--mt-brown-600); }
.lp-rowact.danger { color: #b00020; border-color: #e3a9a9; }
.lp-rowact.danger:hover { background: #fdecec; }

/* ---- Empty state + add-row footer ---- */
.lp-empty { text-align: center; padding: 26px 16px; background: #fff; border: 1px dashed var(--mt-tan-300); border-radius: 6px; }
.lp-empty .t { font-size: 12.5px; font-weight: 600; color: #8a7050; }
.lp-addrow { display: flex; align-items: center; gap: 10px; padding: 10px 2px 0; flex-wrap: wrap; }
.lp-add { background: var(--mt-brown-600); color: #fff; border: 1px solid #9a5520; padding: 5px 12px; font-size: 11.5px; font-weight: 600; border-radius: 5px; cursor: pointer; font-family: inherit; }
.lp-add:hover { background: var(--mt-brown-700); }
.lp-hint { font-size: 11px; color: #b3a487; font-style: italic; }

/* ---- Counterparty picker (combobox) ---- */
.lp-combo { position: relative; }
.lp-combo-input { width: 100%; }
.lp-combo-menu { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; background: #fff; border: 1px solid var(--mt-brown-600); border-radius: 8px; box-shadow: 0 10px 28px rgba(0,0,0,0.18); max-height: 248px; overflow-y: auto; padding: 4px; }
.lp-combo-item { display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left; background: transparent; border: none; border-radius: 6px; padding: 7px 9px; cursor: pointer; font-family: inherit; }
.lp-combo-item:hover { background: var(--mt-cream-100); }
.lp-combo-name { font-size: 13px; font-weight: 600; color: var(--mt-brown-900); }
.lp-combo-meta { font-size: 11px; color: #6b5236; }
.lp-combo-src { font-size: 10.5px; color: #b3a487; font-style: italic; }
.lp-combo-empty { font-size: 11px; color: #8a7050; font-style: italic; padding: 7px 9px; border-top: 1px dashed var(--mt-tan-200); margin-top: 2px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lp-combo-new { border-top: 1px dashed var(--mt-tan-200); margin-top: 2px; border-radius: 0 0 6px 6px; }
.lp-combo-new .lp-combo-name { color: var(--mt-brown-700); }

/* ---- Land / Legal: recital + format-classifier groups ---- */
.lp-legal-text { font-family: "Iowan Old Style", Georgia, "Times New Roman", serif; font-size: 13.5px; line-height: 1.6; color: #2c1d0a; white-space: pre-wrap; }
.lp-legal-text.lp-legal-empty { font-family: inherit; font-style: italic; color: #8a7050; font-size: 12.5px; }
.lp-legal-notes { margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--mt-tan-200); font-size: 12px; color: #6b5236; }
.lp-legal-notes b { color: var(--mt-brown-800); }
/* Format-specific field group in the tract drawer (shown/hidden by classifier) */
.lp-fmtgrp { border: 1px solid var(--mt-tan-200); border-radius: 7px; padding: 10px 11px 4px; margin: 2px 0 4px; background: var(--mt-cream-50); }
.lp-fmtgrp-l { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--mt-brown-700); margin-bottom: 6px; }

/* ---- Recording rule + Documents (file link, drop zone) ---- */
.lp-rule { margin-top: 11px; padding-top: 10px; border-top: 1px dashed var(--mt-tan-200); font-size: 11.5px; color: #6b5236; line-height: 1.5; }
.lp-rule b { color: var(--mt-brown-800); }
.lp-file { color: var(--mt-brown-700); font-weight: 600; text-decoration: none; cursor: pointer; }
.lp-file:hover { text-decoration: underline; }
.lp-file-sub { font-size: 10.5px; color: #b3a487; margin-top: 1px; }
.lp-drop { margin-top: 10px; padding: 16px; text-align: center; font-size: 12px; color: #8a7050; background: var(--mt-cream-50); border: 1.5px dashed var(--mt-tan-300); border-radius: 8px; transition: background 0.12s, border-color 0.12s; }
.lp-drop a { color: var(--mt-brown-700); font-weight: 600; cursor: pointer; text-decoration: underline; }
.lp-drop.drag { background: var(--mt-cream-100); border-color: var(--mt-brown-600); color: var(--mt-brown-800); }

/* ---- Obligations: due-in-30/60/90 widget + overdue badge ---- */
.lp-due-widget { display: flex; gap: 10px; align-items: stretch; margin-bottom: 12px; flex-wrap: wrap; }
.lp-due { flex: 0 0 auto; min-width: 92px; text-align: center; padding: 10px 14px; background: #fff; border: 1px solid var(--mt-tan-300); border-radius: 8px; }
.lp-due.hot { border-color: #e0c389; background: #fbf2dc; }
.lp-due-n { font-size: 22px; font-weight: 800; color: var(--mt-brown-800); font-variant-numeric: tabular-nums; line-height: 1.1; }
.lp-due.hot .lp-due-n { color: #b07d18; }
.lp-due-l { font-size: 10.5px; color: #6b5236; text-transform: uppercase; letter-spacing: 0.03em; margin-top: 2px; }
.lp-due-note { flex: 1 1 200px; align-self: center; font-size: 11.5px; color: #8a7050; font-style: italic; padding-left: 4px; }
.lp-od { display: inline-block; margin-left: 6px; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #b00020; background: #fdecec; border: 1px solid #e3a9a9; border-radius: 999px; padding: 0 5px; vertical-align: middle; }

/* ---- History: audit timeline ---- */
.lp-timeline { list-style: none; margin: 0; padding: 2px 0 0 4px; }
.lp-tl { position: relative; display: flex; gap: 12px; padding: 0 0 16px 0; }
.lp-tl:not(:last-child)::before { content: ''; position: absolute; left: 5px; top: 14px; bottom: 0; width: 2px; background: var(--mt-tan-200); }
.lp-tl-dot { flex: 0 0 auto; width: 12px; height: 12px; margin-top: 3px; border-radius: 999px; background: var(--mt-tan-300); border: 2px solid #fff; box-shadow: 0 0 0 1.5px var(--mt-tan-300); }
.lp-tl-dot.green { background: #1a8c44; box-shadow: 0 0 0 1.5px #9bc89a; }
.lp-tl-dot.blue { background: #2a6fdb; box-shadow: 0 0 0 1.5px #a9c5ee; }
.lp-tl-dot.red { background: #b00020; box-shadow: 0 0 0 1.5px #e3a9a9; }
.lp-tl-body { min-width: 0; flex: 1; }
.lp-tl-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.lp-tl-top b { font-size: 13px; color: var(--mt-brown-900); }
.lp-tl-date { font-size: 11px; color: #8a7050; font-variant-numeric: tabular-nums; }
.lp-tl-who { font-size: 11px; color: #6b5236; background: var(--mt-cream-100); border: 1px solid var(--mt-tan-200); border-radius: 999px; padding: 0 7px; }
.lp-tl-detail { margin-top: 2px; font-size: 12px; color: #6b5236; line-height: 1.45; }

/* ---- Ownership "not final" warning banner ---- */
.lp-warn { margin-top: 14px; background: #fbf2dc; border: 1px solid #e0c389; border-radius: 8px; padding: 11px 14px; font-size: 12px; color: #7a5410; line-height: 1.5; }
.lp-warn-note { margin-top: 6px; font-size: 11.5px; color: #6b5236; font-style: italic; }