/* ══════════════════════════════════════════════════════════════════════
   LEASING HUB — Frontier vocabulary (Phase 1: visual shell)
   Editorial folder/card layout for the read-only site-team page.
   Uses the global --fr-* tokens; namespaced under .fr-leasing-*.
   Tier ramp + rate-change badge styles arrive in Phase 2/3.
   ══════════════════════════════════════════════════════════════════════ */

/* Page-width cap. Editorial layouts read better in a centered column than
   stretched edge-to-edge on ultrawide monitors. The expiration chart
   (defined separately in app/layouts/main.py) mirrors this width so the
   two regions stay visually aligned. */
.fr-leasing-page,
#leasing-hub-expiration-chart {
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
}

/* property line + page title */
.fr-leasing-prop-line {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 4px;
}
.fr-leasing-prop-name {
    font-family: var(--fr-font-serif);
    font-size: 36px;
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--fr-ink);
}
.fr-leasing-prop-meta {
    font-family: var(--fr-font-sans);
    font-size: 13px;
    color: var(--fr-ink-3);
    letter-spacing: 0.02em;
}
.fr-leasing-prop-meta .dot {
    display: inline-block;
    width: 3px; height: 3px;
    border-radius: 50%;
    background: #B5B2A8;
    margin: 0 8px 2px;
    vertical-align: middle;
}

.fr-leasing-title {
    margin-top: 18px;
    display: flex;
    align-items: baseline;
    gap: 14px;
}
.fr-leasing-title h1 {
    font-family: var(--fr-font-serif);
    font-size: 30px;
    font-weight: 400;
    letter-spacing: -0.005em;
    color: var(--fr-ink);
    margin: 0;
}
.fr-leasing-title .updated {
    font-family: var(--fr-font-sans);
    font-size: 12px;
    color: var(--fr-ink-3);
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.fr-leasing-title .updated .live-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--fr-positive);
    box-shadow: 0 0 0 3px var(--fr-positive-tint);
}
/* View Market Charts + Export-to-Excel cluster at the right edge of
   the title row so the controls row below (Search · Sort ·
   Expand/Collapse) keeps its original breathing room. margin-left:auto
   on the first right-aligned button absorbs the free space; the second
   button sits next to it via the flex gap. align-self:center keeps the
   44px buttons visually balanced against the H1's baseline-aligned
   siblings. */
.fr-leasing-title .fr-leasing-market-chart-btn {
    margin-left: auto;
    align-self: center;
}
.fr-leasing-title .fr-leasing-export-btn {
    align-self: center;
}
.fr-leasing-market-chart-arrow {
    font-size: 14px;
    line-height: 1;
    transform: translateY(-1px);
}

.fr-leasing-sub {
    margin-top: 6px;
    font-family: var(--fr-font-sans);
    font-size: 13.5px;
    color: var(--fr-ink-2);
    max-width: 720px;
}

/* search + actions row */
.fr-leasing-controls {
    margin-top: 28px;
    display: flex;
    gap: 14px;
    align-items: center;
}
.fr-leasing-search {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    background: var(--fr-surface);
    border: 1px solid var(--fr-hairline-strong);
    border-radius: var(--fr-r-md);
    padding: 0 14px;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.fr-leasing-search:focus-within {
    border-color: var(--fr-accent);
    box-shadow: 0 0 0 3px rgba(180, 83, 9, 0.10);
}
.fr-leasing-search-label {
    font-family: var(--fr-font-sans);
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--fr-ink-3);
    padding-right: 10px;
    border-right: 1px solid var(--fr-hairline);
}
.fr-leasing-search input,
.fr-leasing-search input.form-control {
    flex: 1;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    font-family: var(--fr-font-sans);
    font-size: 14px;
    color: var(--fr-ink);
    box-shadow: none !important;
    padding: 0 !important;
    height: auto !important;
}
.fr-leasing-search input::placeholder {
    color: #B5B2A8;
    font-style: italic;
}

.fr-leasing-ghost-btn {
    height: 44px;
    padding: 0 16px;
    background: var(--fr-surface);
    border: 1px solid var(--fr-hairline-strong);
    border-radius: var(--fr-r-md);
    font-family: var(--fr-font-sans);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--fr-ink-2);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.fr-leasing-ghost-btn:hover {
    background: #FBF9F4;
    color: var(--fr-ink);
    border-color: #C9C5B8;
}
.fr-leasing-ghost-btn .chev {
    font-size: 14px;
    line-height: 1;
    transform: translateY(-1px);
}

/* Primary CTA in the controls row — amber fill so the export action
   reads as the one branded button among the ghost buttons. */
.fr-leasing-export-btn {
    height: 44px;
    padding: 0 18px;
    background: var(--fr-accent);
    border: 1px solid var(--fr-accent);
    border-radius: var(--fr-r-md);
    font-family: var(--fr-font-sans);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #FFFFFF;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
.fr-leasing-export-btn:hover {
    background: var(--fr-accent-strong);
    border-color: var(--fr-accent-strong);
    box-shadow: 0 2px 6px rgba(180, 83, 9, 0.18);
}
.fr-leasing-export-btn:active {
    transform: translateY(1px);
    box-shadow: none;
}
.fr-leasing-export-btn .dl {
    font-size: 16px;
    line-height: 1;
    transform: translateY(-1px);
}

/* Sort control — segmented pills inline with Search/Expand/Collapse.
   Soft amber active state matches the editorial palette without shouting. */
.fr-leasing-sort {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.fr-leasing-sort-label {
    font-family: var(--fr-font-sans);
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--fr-ink-3);
    margin-right: 4px;
}
.fr-leasing-sort-pill {
    height: 32px;
    padding: 0 14px;
    background: var(--fr-surface);
    border: 1px solid var(--fr-hairline-strong);
    border-radius: 100px;
    font-family: var(--fr-font-sans);
    font-size: 12px;
    font-weight: 500;
    color: var(--fr-ink-2);
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.fr-leasing-sort-pill:hover {
    background: var(--fr-bg);
    color: var(--fr-ink);
    border-color: #C9C5B8;
}
.fr-leasing-sort-pill.is-active {
    background: var(--fr-accent-soft);
    color: var(--fr-accent-strong);
    border-color: rgba(180, 83, 9, 0.30);
    box-shadow: inset 0 0 0 1px rgba(180, 83, 9, 0.08);
}
.fr-leasing-sort-pill .dir {
    font-size: 11px;
    line-height: 1;
    font-weight: 700;
    margin-left: 2px;
}

/* unit-type folders */
.fr-leasing-folders {
    margin-top: 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.fr-leasing-folder {
    background: var(--fr-surface);
    border: 1px solid var(--fr-hairline);
    border-left: 3px solid var(--fr-accent);
    border-radius: var(--fr-r-md);
    overflow: hidden;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}
.fr-leasing-folder:hover {
    box-shadow: 0 1px 0 rgba(20, 24, 29, 0.04), 0 6px 18px rgba(20, 24, 29, 0.04);
}
.fr-leasing-folder.is-open {
    box-shadow: 0 1px 0 rgba(20, 24, 29, 0.04), 0 8px 28px rgba(20, 24, 29, 0.05);
}

.fr-leasing-folder-head {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 16px 22px;
    cursor: pointer;
    user-select: none;
}
.fr-leasing-folder-head .name {
    /* Workman vocabulary: heavy sans + 3px amber bar (matches .ut-head .ut-code
       on the New Leases unit-type cards) so the leasing hub headers read as a
       sister surface rather than an editorial display. */
    position: relative;
    font-family: var(--fr-font-sans);
    font-size: 24px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--fr-ink);
    padding-left: 12px;
    min-width: 70px;
}
.fr-leasing-folder-head .name::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 1.05em;
    background: var(--fr-accent);
    border-radius: 2px;
}
.fr-leasing-folder-head .count {
    font-family: var(--fr-font-sans);
    font-size: 13.5px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--fr-ink-3);
}
.fr-leasing-folder-head .count strong {
    font-weight: 700;
    color: var(--fr-ink);
    margin-right: 6px;
}
/* Price range sits adjacent to the count, not pinned to the right edge.
   The chev (below) gets margin-left:auto instead, so any future badge
   between count and range slots in cleanly. */
.fr-leasing-folder-head .range {
    font-family: var(--fr-font-mono);
    font-size: 13px;
    color: var(--fr-ink-2);
    letter-spacing: -0.01em;
}
.fr-leasing-folder-head .range em {
    font-style: normal;
    color: var(--fr-ink-3);
    margin: 0 8px;
    font-size: 11px;
}
.fr-leasing-folder-head .chev {
    margin-left: auto;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: #FBF9F4;
    border: 1px solid var(--fr-hairline);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--fr-ink-2);
    font-family: var(--fr-font-serif);
    font-size: 18px;
    line-height: 1;
    transition: transform 200ms ease, background 140ms ease, color 140ms ease;
}
.fr-leasing-folder.is-open .fr-leasing-folder-head .chev {
    transform: rotate(90deg);
    background: var(--fr-accent-soft);
    color: var(--fr-accent-strong);
    border-color: rgba(180, 83, 9, 0.20);
}

.fr-leasing-folder-body {
    background: #FBF9F4;
    border-top: 1px solid var(--fr-hairline);
    padding: 14px;
}

/* group meta strip */
.fr-leasing-group-meta {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 6px 8px 14px;
    flex-wrap: wrap;
}
.fr-leasing-group-meta .lbl {
    font-family: var(--fr-font-sans);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--fr-ink-3);
}
.fr-leasing-group-meta .v {
    font-family: var(--fr-font-mono);
    font-size: 12px;
    color: var(--fr-ink);
    margin-left: 4px;
}
.fr-leasing-group-meta .sep {
    width: 1px;
    height: 14px;
    background: var(--fr-hairline-strong);
}

/* unit cards */
.fr-leasing-units {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.fr-leasing-unit {
    display: grid;
    /* Unit | Available | Rent | Amenities | Spacer | Status — rent sits next to
       the date so the eye scans unit → date → price as one cluster. Amenities
       are clamped (minmax cap) so the pills cluster to the left instead of
       stretching the full width; the Spacer (1fr) absorbs the leftover width so
       the pills clamp left and the status column stays flush right. The Notes
       button lives inside the status column on the same line as Matrix (see
       .fr-leasing-actions), so it sits right next to Matrix without growing the
       row taller. */
    grid-template-columns: 130px 200px 170px minmax(0, 640px) 1fr auto;
    align-items: start;
    gap: 22px;
    padding: 16px 18px;
    background: var(--fr-surface);
    border: 1px solid var(--fr-hairline);
    border-radius: var(--fr-r-md);
    transition: border-color 120ms ease, transform 140ms ease, box-shadow 140ms ease;
}
.fr-leasing-unit:hover {
    border-color: var(--fr-hairline-strong);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(20, 24, 29, 0.04);
}

.fr-leasing-unit .id { padding-top: 2px; }
.fr-leasing-unit .id .num {
    font-family: var(--fr-font-sans);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    color: var(--fr-ink);
}
.fr-leasing-unit .id .sqft {
    margin-top: 4px;
    font-family: var(--fr-font-sans);
    font-size: 11px;
    color: var(--fr-ink-3);
    letter-spacing: 0.04em;
}

.fr-leasing-unit .avail { padding-top: 4px; }
.fr-leasing-unit .avail .when {
    font-family: var(--fr-font-sans);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--fr-ink);
    letter-spacing: -0.005em;
}
.fr-leasing-unit .avail .when.is-soon { color: var(--fr-accent-strong); }
.fr-leasing-unit .avail .when.is-now  { color: var(--fr-positive); }
.fr-leasing-unit .avail .when.is-far  { color: var(--fr-ink-2); }
.fr-leasing-unit .avail .date {
    margin-top: 2px;
    font-family: var(--fr-font-mono);
    font-size: 11.5px;
    color: var(--fr-ink-3);
    letter-spacing: -0.01em;
}

/* pills (Phase 1 — uniform; tier ramp arrives in Phase 2) */
.fr-leasing-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    padding-top: 2px;
}
.fr-leasing-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px 5px;
    background: #F2EEE3;
    color: var(--fr-ink-2);
    font-family: var(--fr-font-sans);
    font-size: 11.5px;
    font-weight: 500;
    border-radius: 100px;
    letter-spacing: 0.01em;
    white-space: nowrap;
}
.fr-leasing-pill .price {
    margin-left: 6px;
    padding-left: 6px;
    border-left: 1px solid rgba(0, 0, 0, 0.12);
    font-family: var(--fr-font-mono);
    font-size: 10.5px;
    font-weight: 600;
    opacity: 0.85;
    letter-spacing: -0.01em;
}

/* Upgrade-tier ramp — quiet → cool → warm → inverted.
   Each tier pill answers "what level of finish is this unit?" at a glance,
   without needing the agent to read the full label. */
.fr-leasing-pill.tier-modest {
    background: #EFE9DA;
    color: #6B5C3F;
}
.fr-leasing-pill.tier-modest .price { border-left-color: rgba(107, 92, 63, 0.30); }

.fr-leasing-pill.tier-silver {
    background: #DDDCD3;
    color: #3F4147;
}
.fr-leasing-pill.tier-silver .price { border-left-color: rgba(63, 65, 71, 0.30); }

.fr-leasing-pill.tier-premium {
    background: var(--fr-accent-soft);
    color: var(--fr-accent-strong);
    box-shadow: inset 0 0 0 1px rgba(180, 83, 9, 0.20);
}
.fr-leasing-pill.tier-premium .price { border-left-color: rgba(146, 64, 14, 0.30); }

.fr-leasing-pill.tier-platinum {
    background: var(--fr-ink);
    color: #F6F2E5;
}
.fr-leasing-pill.tier-platinum .price {
    border-left-color: rgba(255, 255, 255, 0.30);
    opacity: 0.95;
}

/* "+N additional features" expander chip.
   Looks like a pill but with a dashed outline + italic label, signalling
   it's interactive. Click toggles .is-expanded on the parent .amenities. */
.fr-leasing-pill.std-chip {
    background: transparent;
    color: var(--fr-ink-3);
    border: 1px dashed var(--fr-hairline-strong);
    padding: 3px 10px 4px;
    cursor: pointer;
    font-style: italic;
    transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
    user-select: none;
}
.fr-leasing-pill.std-chip:hover {
    color: var(--fr-ink-2);
    border-color: var(--fr-ink-3);
    background: rgba(255, 255, 255, 0.5);
}
.fr-leasing-pill.std-chip .chev {
    margin-left: 6px;
    font-size: 10px;
    font-style: normal;
    transition: transform 180ms ease;
    display: inline-block;
}
.fr-leasing-amenities.is-expanded .fr-leasing-pill.std-chip .chev {
    transform: rotate(180deg);
}

/* The dropped-in additional-features subtitle.
   Hidden by default; revealed when parent .amenities has .is-expanded. */
.fr-leasing-additional {
    display: none;
    margin-top: 8px;
    padding: 8px 12px;
    background: var(--fr-bg);
    border: 1px solid var(--fr-hairline);
    border-radius: var(--fr-r-sm);
    font-family: var(--fr-font-sans);
    font-size: 12px;
    color: var(--fr-ink-2);
    line-height: 1.6;
    letter-spacing: 0.01em;
}
.fr-leasing-amenities.is-expanded .fr-leasing-additional {
    display: block;
}
.fr-leasing-additional .sep {
    color: #B5B2A8;
    margin: 0 7px;
}

/* rent block (left-aligned now that it sits between date and amenities,
   so the price reads as the natural continuation of the data cluster) */
.fr-leasing-unit .rent {
    text-align: left;
}
.fr-leasing-unit .rent .price {
    font-family: var(--fr-font-sans);
    font-size: 21px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--fr-ink);
    letter-spacing: -0.015em;
    font-variant-numeric: tabular-nums;
}
.fr-leasing-unit .rent .term {
    margin-top: 4px;
    font-family: var(--fr-font-sans);
    font-size: 11px;
    color: var(--fr-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.14em;
}
.fr-leasing-unit .rent .term strong {
    color: var(--fr-ink-2);
    font-weight: 600;
}

/* status column */
.fr-leasing-unit .status {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    padding-top: 6px;
}
.fr-leasing-status-dot {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--fr-font-sans);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--fr-ink-2);
}
.fr-leasing-status-dot::before {
    content: "";
    width: 7px; height: 7px;
    border-radius: 50%;
}
.fr-leasing-status-dot.is-live::before {
    background: var(--fr-positive);
    box-shadow: 0 0 0 3px var(--fr-positive-tint);
}
.fr-leasing-status-dot.is-pending::before {
    background: var(--fr-warning);
    box-shadow: 0 0 0 3px var(--fr-warning-tint);
}

.fr-leasing-matrix-link {
    font-family: var(--fr-font-sans);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--fr-ink-3);
    text-decoration: none;
    border: none;
    background: transparent;
    border-bottom: 1px solid var(--fr-hairline-strong);
    padding: 0 0 1px;
    transition: color 120ms ease, border-color 120ms ease;
    cursor: pointer;
}
.fr-leasing-matrix-link:hover {
    color: var(--fr-accent);
    border-color: var(--fr-accent);
}

/* Action line inside the status column — holds [Notes] Matrix on one row,
   right-aligned, so Notes sits immediately left of Matrix. Baseline-aligned so
   the amber Notes pill and the underlined Matrix link read as one cluster. */
.fr-leasing-actions {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

/* Notes button — amber-tinted so it reads as "there's extra context here",
   distinct from the plain Matrix link. Only rendered for units that actually
   carry Availability-report notes. */
.fr-leasing-notes-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--fr-font-sans);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--fr-accent);
    background: var(--fr-accent-soft);
    border: 1px solid transparent;
    border-radius: var(--fr-r-sm, 6px);
    padding: 3px 9px;
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease;
}
.fr-leasing-notes-link:hover {
    border-color: var(--fr-accent);
    background: var(--fr-accent-soft);
}
.fr-leasing-notes-link .ic {
    font-size: 12px;
    line-height: 1;
}

/* Notes modal — read-only Entrata Availability-report notes */
.fr-leasing-notes-modal .modal-title .lbl {
    color: var(--fr-ink-3);
    font-weight: 500;
    margin-right: 4px;
}
.fr-leasing-notes-body {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.fr-leasing-notes-section-label {
    font-family: var(--fr-font-sans);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--fr-ink-3);
    margin-bottom: 6px;
}
.fr-leasing-notes-section-body {
    font-family: var(--fr-font-sans);
    font-size: 14px;
    line-height: 1.5;
    color: var(--fr-ink);
    white-space: pre-wrap;
}
.fr-leasing-notes-empty {
    font-family: var(--fr-font-sans);
    font-size: 14px;
    color: var(--fr-ink-2);
    font-style: italic;
}

/* legend */
.fr-leasing-legend {
    margin: 28px 4px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    font-family: var(--fr-font-sans);
    font-size: 11.5px;
    color: var(--fr-ink-3);
    letter-spacing: 0.01em;
}
.fr-leasing-legend .item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.fr-leasing-legend .item::before {
    content: "";
    width: 7px; height: 7px;
    border-radius: 50%;
}
.fr-leasing-legend .item.live::before {
    background: var(--fr-positive);
    box-shadow: 0 0 0 3px var(--fr-positive-tint);
}
.fr-leasing-legend .item.pending::before {
    background: var(--fr-warning);
    box-shadow: 0 0 0 3px var(--fr-warning-tint);
}

/* compact layout for narrower screens */
@media (max-width: 1100px) {
    .fr-leasing-unit {
        grid-template-columns: 110px 170px 140px 1fr auto auto;
        gap: 16px;
    }
    .fr-leasing-unit .id .num { font-size: 16px; }
    .fr-leasing-unit .rent .price { font-size: 19px; }
}

/* empty state */
.fr-leasing-empty {
    margin-top: 28px;
    padding: 28px;
    background: var(--fr-surface);
    border: 1px dashed var(--fr-hairline-strong);
    border-radius: var(--fr-r-md);
    text-align: center;
    font-family: var(--fr-font-sans);
    color: var(--fr-ink-2);
    font-size: 13px;
}

/* ── PHASE 3: rate-change story ────────────────────────────────────── */

/* Page-level "what changed today" strip — only renders when something
   actually changed. Soft amber, sits above the folders. */
.fr-leasing-change-strip {
    margin-top: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    background: var(--fr-accent-soft);
    border: 1px solid rgba(180, 83, 9, 0.20);
    border-radius: var(--fr-r-md);
    font-family: var(--fr-font-sans);
    font-size: 12.5px;
    color: var(--fr-accent-strong);
}
.fr-leasing-change-strip .ic {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: rgba(180, 83, 9, 0.15);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}
.fr-leasing-change-strip strong { font-weight: 600; }
.fr-leasing-change-strip .units {
    font-family: var(--fr-font-mono);
    font-size: 11.5px;
    margin-left: 6px;
    color: var(--fr-accent-strong);
}

/* Per-folder "N updated" badge in the folder head */
.fr-leasing-folder-head .changed-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px 4px;
    background: var(--fr-accent-soft);
    color: var(--fr-accent-strong);
    border-radius: 100px;
    font-family: var(--fr-font-sans);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}

/* Subtle amber outline on cards whose rate changed today */
.fr-leasing-unit.is-changed {
    border-color: rgba(180, 83, 9, 0.35);
    box-shadow: 0 0 0 3px rgba(180, 83, 9, 0.05);
}
.fr-leasing-unit.is-changed:hover {
    border-color: rgba(180, 83, 9, 0.50);
    box-shadow: 0 0 0 3px rgba(180, 83, 9, 0.07), 0 4px 16px rgba(20, 24, 29, 0.04);
}

/* Per-unit rate-change badge under the rent + term */
.fr-leasing-rate-change {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px 4px;
    border-radius: 100px;
    font-family: var(--fr-font-sans);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: help;
    position: relative;
}
.fr-leasing-rate-change.is-up {
    background: var(--fr-positive-tint);
    color: var(--fr-positive-deep, #155C39);
}
.fr-leasing-rate-change.is-down {
    background: rgba(185, 28, 28, 0.08);
    color: var(--fr-negative);
}
.fr-leasing-rate-change .arrow {
    font-size: 11px;
    line-height: 1;
}
.fr-leasing-rate-change .when {
    font-weight: 500;
    opacity: 0.78;
    margin-left: 3px;
    padding-left: 7px;
    border-left: 1px solid currentColor;
    border-color: rgba(0, 0, 0, 0.18);
}

/* Hover tooltip — full was/now/timestamp story.
   Anchored to the badge's left edge now that the rent block sits in the
   middle of the row (was right-anchored when rent was the rightmost column). */
.fr-leasing-rate-change .fr-rate-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    background: var(--fr-ink);
    color: #F6F2E5;
    font-family: var(--fr-font-sans);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.01em;
    padding: 8px 11px;
    border-radius: var(--fr-r-sm);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 140ms ease, transform 140ms ease;
    transform: translateY(4px);
    box-shadow: 0 6px 20px rgba(20, 24, 29, 0.18);
    z-index: 5;
}
.fr-leasing-rate-change .fr-rate-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 14px;
    border: 5px solid transparent;
    border-top-color: var(--fr-ink);
}
.fr-leasing-rate-change .fr-rate-tooltip strong {
    font-family: var(--fr-font-serif);
    font-size: 13px;
    margin: 0 2px;
}
.fr-leasing-rate-change .fr-rate-tooltip .arrow-mid {
    color: #B5B2A8;
    margin: 0 5px;
}
.fr-leasing-rate-change:hover .fr-rate-tooltip,
.fr-leasing-rate-change:focus-within .fr-rate-tooltip {
    opacity: 1;
    transform: translateY(0);
}