/* ══════════════════════════════════════════════════════════════════════
   UNIT TYPE PRICING CARD — editorial Frontier vocabulary
   ----------------------------------------------------------------------
   Replaces the legacy .unit-type-card blue-bordered Bootstrap chrome
   with a calmer surface where the per-section signal colors (gauge ring,
   occupancy %, rent delta, market dot) carry the at-a-glance message.
   The top-edge rule is always amber (brand chrome, not a signal).
   ══════════════════════════════════════════════════════════════════════ */

.ut-card {
    background: var(--fr-surface);
    border: 1px solid var(--fr-hairline-strong);
    border-top: 3px solid var(--fr-accent);
    border-left: 3px solid var(--fr-accent);
    border-radius: var(--fr-r-md);
    overflow: hidden;
    transition: border-color 120ms ease, box-shadow 140ms ease;
    position: relative;
    margin-bottom: 14px;
    box-shadow: 0 1px 2px rgba(20, 24, 29, 0.04);
    content-visibility: auto;
    contain-intrinsic-size: auto 320px;
}
.ut-card:hover {
    border-top-color: var(--fr-accent-strong);
    border-left-color: var(--fr-accent-strong);
    box-shadow: 0 1px 0 rgba(20, 24, 29, 0.04), 0 6px 18px rgba(20, 24, 29, 0.04);
}

/* zero-availability variant: drop the amber bracket, unify to hairline */
.ut-card.is-empty {
    background: var(--fr-bg);
    border-color: var(--fr-hairline-strong);
}


/* ── header strip ────────────────────────────────────────────────── */
.ut-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 24px 13px;
    background: var(--fr-bg);
    border-bottom: 1px solid var(--fr-hairline-strong);
    flex-wrap: wrap;
    font-family: var(--fr-font-sans);
}
.ut-head .ut-code {
    position: relative;
    font-family: var(--fr-font-sans);
    font-size: 24px;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--fr-ink);
    font-weight: 700;
    padding-left: 12px;
}
.ut-head .ut-code::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 1.05em;
    background: var(--fr-accent);
    border-radius: 2px;
}
/* Phase chip — combined (multi-phase) properties only. Sits between the
   unit-type code and the availability stat; same uppercase micro-label
   vocabulary as the .l labels so it reads as metadata, not a headline. */
.ut-head .ut-phase-badge {
    font-family: var(--fr-font-sans);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--fr-ink-3);
    border: 1px solid var(--fr-hairline-strong);
    border-radius: 3px;
    padding: 3px 7px 2px;
    white-space: nowrap;
}

.ut-head .ut-availability {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding-left: 14px;
    border-left: 1px solid var(--fr-hairline);
    margin-right: 6px;
}
.ut-head .ut-availability .v {
    font-family: var(--fr-font-sans);
    font-size: 14px;
    font-weight: 600;
    color: var(--fr-ink);
    letter-spacing: -0.005em;
}
.ut-head .ut-availability .l {
    font-family: var(--fr-font-sans);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--fr-ink-3);
    margin-left: 4px;
}

/* occupancy / leased — Cards header (mirrors .ut-availability, own left divider) */
.ut-head .ut-occupancy {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding-left: 14px;
    border-left: 1px solid var(--fr-hairline);
}
.ut-head .ut-occupancy .v {
    font-family: var(--fr-font-sans);
    font-size: 14px;
    font-weight: 600;
    color: var(--fr-ink);
    letter-spacing: -0.005em;
}
.ut-head .ut-occupancy .l {
    font-family: var(--fr-font-sans);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--fr-ink-3);
    margin-left: 4px;
}
.ut-head .ut-occupancy .sep {
    color: var(--fr-hairline-strong);
    font-weight: 600;
    margin: 0 2px;
}

/* sparkline pill — "+2.5% 30d base rents" */
.ut-spark-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 11px 5px 8px;
    background: var(--fr-positive-tint-2);
    border: 1px solid rgba(31, 122, 77, 0.15);
    border-radius: 100px;
    font-family: var(--fr-font-sans);
    font-size: 11px;
    font-weight: 600;
    color: var(--fr-positive-deep);
    cursor: default;
}
.ut-spark-pill.is-down {
    background: rgba(185, 28, 28, 0.08);
    border-color: rgba(185, 28, 28, 0.18);
    color: var(--fr-negative);
}
.ut-spark-pill.is-flat {
    background: var(--fr-bg);
    border-color: var(--fr-hairline-strong);
    color: var(--fr-ink-3);
}
.ut-spark-pill svg { display: block; }
.ut-spark-pill .delta {
    font-family: var(--fr-font-sans);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: -0.005em;
}
.ut-spark-pill .lbl {
    font-family: var(--fr-font-sans);
    font-size: 9.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    opacity: 0.85;
}

/* needed / forecast pills */
.ut-stat-pill {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 5px 11px;
    background: #FBF9F4;
    border: 1px solid var(--fr-hairline-strong);
    border-radius: 100px;
}
.ut-stat-pill .l {
    font-family: var(--fr-font-sans);
    font-size: 9.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--fr-ink-3);
}
.ut-stat-pill .v {
    font-family: var(--fr-font-sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--fr-ink);
    letter-spacing: -0.005em;
}
.ut-stat-pill .horizon {
    font-family: var(--fr-font-mono);
    font-size: 10px;
    color: var(--fr-ink-3);
    letter-spacing: -0.01em;
}

/* combined needed+forecast chip — two hover halves split by a hairline */
.ut-stat-pill--combined .ut-stat-half {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    cursor: default;
}
.ut-stat-pill--combined .ut-stat-divider {
    display: inline-block;
    align-self: center;
    width: 1px;
    height: 15px;
    background: var(--fr-hairline-strong);
}

/* live indicator (right-pinned) */
.ut-head .ut-live-pip {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px 5px 10px;
    background: var(--fr-positive-tint-2);
    border-radius: 100px;
    font-family: var(--fr-font-sans);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fr-positive-deep);
}
.ut-head .ut-live-pip .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--fr-positive);
    box-shadow: 0 0 0 3px var(--fr-positive-tint);
}


/* ── body — 3 equal columns ──────────────────────────────────────── */
.ut-body {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: stretch;
}
.ut-col {
    padding: 18px 22px 20px;
    border-right: 1px solid var(--fr-hairline);
    display: flex;
    flex-direction: column;
    min-height: 200px;
    position: relative;
    font-family: var(--fr-font-sans);
}
/* Split col (COL 1) has half-eyebrows inside each half rather than a
   single outer .ut-col-eyebrow. The padding is the same; layout is identical. */
.ut-col:last-child { border-right: none; }

.ut-col-eyebrow {
    font-family: var(--fr-font-sans);
    font-size: 9.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--fr-ink-3);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}


/* ── COL 1 — left strip: occupancy + gauge + traffic ────────────── */
.ut-left-strip {
    display: flex;
    align-items: stretch;
    flex: 1;
    width: 100%;
}

/* availability timing — no-hover urgency readout (replaces the donut).
   Left half of COL 1; the traffic block (its own border-left) is the right
   half. Headline count + proportional urgency bar + always-4-row legend
   (zero-count buckets dimmed, never dropped, so heights stay aligned). */
.ut-avail-timing {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 13px;
    padding-right: 18px;
}
.ut-avail-headline { display: flex; align-items: baseline; gap: 7px; }
.ut-avail-headline .big {
    font-family: var(--fr-font-sans);
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--fr-ink);
}
.ut-avail-headline .sub {
    font-family: var(--fr-font-mono);
    font-size: 11px;
    font-weight: 500;
    color: var(--fr-ink-3);
    letter-spacing: -0.01em;
}
.ut-avail-bar {
    display: flex;
    height: 8px;
    border-radius: 100px;
    overflow: hidden;
    background: #EDEBE4;
}
.ut-avail-bar .seg { height: 100%; min-width: 3px; }
.ut-avail-legend { display: flex; flex-direction: column; gap: 7px; }
.ut-avail-legend-row {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: var(--fr-font-sans);
}
.ut-avail-legend-row .dot {
    width: 9px; height: 9px;
    border-radius: 2px;
    flex: 0 0 auto;
}
.ut-avail-legend-row .lab {
    flex: 1 1 auto;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--fr-ink-2);
}
.ut-avail-legend-row .cnt {
    font-family: var(--fr-font-sans);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--fr-ink);
    min-width: 16px;
    text-align: right;
    line-height: 1;
}
.ut-avail-legend-row.is-zero { opacity: 0.4; }
.ut-avail-legend-row.is-zero .cnt { font-weight: 600; }
.ut-avail-none {
    font-family: var(--fr-font-serif);
    font-style: italic;
    font-size: 12.5px;
    color: var(--fr-ink-3);
    padding: 6px 0;
}

/* traffic funnel — right half of COL 1 (no bars). The head is a left-aligned
   eyebrow + a right-aligned 7d/30d toggle; the rows span the full width so the
   block fills its half rather than huddling in the middle. */
.ut-traffic-block {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    border-left: 1px solid var(--fr-hairline);
    padding: 4px 0 4px 22px;
    min-width: 0;
}
/* Eyebrow row: "Traffic" label flush-left (matching the AVAILABILITY eyebrow),
   7d/30d toggle pushed to the right edge. */
.ut-traffic-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 22px;
}
.ut-traffic-head .lbl {
    font-family: var(--fr-font-sans);
    font-size: 9.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.20em;
    color: var(--fr-ink-3);
}
/* Editorial pill toggle for the dbc.ButtonGroup inside the traffic head.
   The callback continues to set outline=true/false and active=true/false on
   the buttons; we restyle Bootstrap's defaults to match the .ut-* vocabulary. */
.ut-traffic-head .ut-traffic-toggle {
    border-radius: 100px;
    overflow: hidden;
    background: #FBF9F4;
    border: 1px solid var(--fr-hairline);
    padding: 1px;
    box-shadow: none;
}
.ut-traffic-head .ut-traffic-toggle .btn {
    background: transparent !important;
    border: 0 !important;
    color: var(--fr-ink-3) !important;
    font-family: var(--fr-font-sans);
    font-size: 9px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    padding: 2px 9px !important;
    border-radius: 100px !important;
    box-shadow: none !important;
    transition: background 120ms ease, color 120ms ease;
    line-height: 1.3 !important;
}
.ut-traffic-head .ut-traffic-toggle .btn:hover {
    color: var(--fr-ink-2) !important;
}
.ut-traffic-head .ut-traffic-toggle .btn.active,
.ut-traffic-head .ut-traffic-toggle .btn:active {
    background: var(--fr-ink) !important;
    color: #F6F2E5 !important;
}

.ut-traffic-rows {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ut-traffic-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.ut-traffic-row .lbl {
    flex: 0 0 auto;
    font-family: var(--fr-font-sans);
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--fr-ink-2);
}
/* value + YoY delta grouped, pinned to the right edge of the row */
.ut-traffic-row .vals {
    display: flex;
    align-items: baseline;
    gap: 9px;
}
.ut-traffic-row .v {
    font-family: var(--fr-font-sans);
    font-size: 16px;
    font-weight: 600;
    color: var(--fr-ink);
    letter-spacing: -0.005em;
    line-height: 1;
    min-width: 18px;
    text-align: right;
}
.ut-traffic-row .delta {
    font-family: var(--fr-font-sans);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    min-width: 22px;
    text-align: right;
}
.ut-traffic-row .delta.is-up   { color: var(--fr-positive-deep); }
.ut-traffic-row .delta.is-down { color: var(--fr-negative); }
.ut-traffic-row .delta.is-flat { color: #B5B2A8; }

/* The legacy global rule .traffic-7d/.traffic-30d uses display:inline,
   which would force flex children inline and break the row layout.
   Override inside our new vocabulary so flex layout is preserved. */
.ut-traffic-row .traffic-7d,
.ut-traffic-row .traffic-30d {
    display: inline-block !important;
}
.ut-traffic-row .traffic-30d {
    display: none !important;
}
.traffic-show-30d .ut-traffic-row .traffic-7d {
    display: none !important;
}
.traffic-show-30d .ut-traffic-row .traffic-30d {
    display: inline-block !important;
}


/* ── COL 2 — RENT ────────────────────────────────────────────────── */
.ut-rent-hero-wrap {
    background: var(--fr-positive-tint-2);
    border: 1px solid rgba(31, 122, 77, 0.10);
    border-radius: var(--fr-r-md);
    padding: 6px 14px 7px;
    text-align: center;
    margin-bottom: 14px;
}
.ut-rent-hero-wrap.is-down,
.ut-card.is-negative .ut-rent-hero-wrap {
    background: rgba(185, 28, 28, 0.06);
    border-color: rgba(185, 28, 28, 0.15);
}
.ut-rent-hero-wrap.is-warn,
.ut-card.is-warning .ut-rent-hero-wrap {
    background: var(--fr-warning-tint);
    border-color: rgba(181, 112, 31, 0.15);
}
.ut-rent-hero-wrap.is-flat {
    background: var(--fr-bg);
    border-color: var(--fr-hairline-strong);
}

.ut-rent-hero {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
}
.ut-rent-hero .delta {
    font-family: var(--fr-font-sans);
    font-size: 30px;
    line-height: 1;
    letter-spacing: -0.015em;
    font-weight: 600;
}
.ut-rent-hero .delta.is-up   { color: var(--fr-positive-deep); }
.ut-rent-hero .delta.is-down { color: var(--fr-negative); }
.ut-rent-hero .delta.is-warn { color: var(--fr-warning-deep); }
.ut-rent-hero .delta.is-flat { color: var(--fr-ink-2); }
.ut-rent-hero .delta-trail {
    font-family: var(--fr-font-mono);
    font-size: 12px;
    color: var(--fr-ink-2);
    padding-bottom: 6px;
    letter-spacing: -0.01em;
}
.ut-rent-hero .delta-trail.is-up   { color: var(--fr-positive-deep); opacity: 0.85; }
.ut-rent-hero .delta-trail.is-down { color: var(--fr-negative); opacity: 0.85; }
.ut-rent-hero .delta-trail.is-warn { color: var(--fr-warning-deep); opacity: 0.85; }
.ut-rent-hero-sub {
    margin-top: 2px;
    font-family: var(--fr-font-sans);
    font-size: 9.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.20em;
    color: var(--fr-ink-3);
}

.ut-rent-stats {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    margin-top: auto;
}
.ut-rent-stats .stat {
    text-align: center;
    padding: 0 4px;
    border-right: 1px solid var(--fr-hairline);
}
.ut-rent-stats .stat:last-child { border-right: none; }
.ut-rent-stats .stat .lbl {
    font-family: var(--fr-font-sans);
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--fr-ink-3);
    margin-bottom: 6px;
}
.ut-rent-stats .stat .v {
    font-family: var(--fr-font-sans);
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    color: var(--fr-ink);
    letter-spacing: -0.005em;
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
}
.ut-rent-stats .stat .v .delta-inline {
    font-family: var(--fr-font-sans);
    font-size: 11px;
    font-weight: 600;
}
.ut-rent-stats .stat .v .delta-inline.is-up   { color: var(--fr-positive-deep); }
.ut-rent-stats .stat .v .delta-inline.is-down { color: var(--fr-negative); }
.ut-rent-stats .stat .sub {
    margin-top: 4px;
    font-family: var(--fr-font-mono);
    font-size: 10px;
    color: var(--fr-ink-3);
    letter-spacing: -0.01em;
}


/* ── COL 3 — MARKET ──────────────────────────────────────────────── */
/* Header row — eyebrow on the left, View Chart link on the right. */
.ut-mkt-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}
.ut-mkt-header .ut-col-eyebrow {
    margin-bottom: 0;
    flex: 0 1 auto;
}
.ut-mkt-header .view-link {
    font-family: var(--fr-font-sans);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--fr-accent);
    cursor: pointer;
    text-decoration: none;
    border: none;
    background: transparent;
    padding: 0;
    flex: 0 0 auto;
    white-space: nowrap;
    transition: color 120ms ease;
}
.ut-mkt-header .view-link:hover { color: var(--fr-accent-strong); }

/* Gradient row — $low endpoint | bar stack | $high endpoint.
   Endpoint labels anchor the range numbers to their visual position on
   the gradient instead of floating above it. Pushed to the bottom area
   of the column so the percentile chip lands underneath. */
.ut-mkt-gradient-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: auto;
    margin-bottom: 18px;
}
.ut-mkt-endpoint {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Match the gradient bar's height so align-items:center puts the
       value's visual midline exactly on the bar's centerline. The 16px
       glyph spills 1px above and 1px below symmetrically — the *middle*
       of the number lands on the *middle* of the bar. */
    height: 14px;
    min-width: 50px;
}
.ut-mkt-endpoint .val {
    font-family: var(--fr-font-sans);
    font-size: 16px;
    font-weight: 600;
    color: var(--fr-ink);
    letter-spacing: -0.005em;
    line-height: 1;
}

/* Bar stack — wraps the gradient bar and pins a YOU label below it
   at the same percentile position as the caret on the bar. The padding
   reserves space for the pin label without disrupting bar height. */
.ut-mkt-bar-stack {
    flex: 1 1 auto;
    position: relative;
    min-width: 0;
    padding-bottom: 30px;
}
.ut-mkt-you-pin {
    position: absolute;
    top: 22px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
}
.ut-mkt-you-pin .val {
    font-family: var(--fr-font-sans);
    font-size: 12px;
    font-weight: 600;
    color: var(--fr-ink);
    letter-spacing: -0.005em;
}
.ut-mkt-you-pin .lbl {
    font-family: var(--fr-font-sans);
    font-size: 8.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.20em;
    color: var(--fr-ink-3);
    margin-top: 3px;
}
.ut-mkt-bar {
    position: relative;
    height: 14px;
    border-radius: 100px;
    cursor: pointer;
    background: linear-gradient(
        to right,
        rgba(185, 28, 28, 0.30) 0%,
        rgba(181, 112, 31, 0.32) 40%,
        rgba(31, 122, 77, 0.32) 75%,
        rgba(31, 122, 77, 0.42) 100%
    );
    box-shadow: inset 0 0 0 1px var(--fr-hairline);
}
.ut-mkt-bar .comp {
    position: absolute;
    top: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--fr-surface);
    border: 1px solid rgba(20, 24, 29, 0.35);
    transform: translate(-50%, -50%);
    z-index: 3;
}
.ut-mkt-bar .you {
    position: absolute;
    top: 50%;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--fr-ink);
    border: 3px solid var(--fr-surface);
    box-shadow: 0 0 0 1px var(--fr-ink), 0 4px 10px rgba(20, 24, 29, 0.18);
    transform: translate(-50%, -50%);
    z-index: 5;
}
.ut-card.is-positive .ut-mkt-bar .you {
    background: var(--fr-positive-deep);
    box-shadow: 0 0 0 1px var(--fr-positive-deep), 0 4px 10px rgba(31, 122, 77, 0.30);
}
.ut-card.is-warning .ut-mkt-bar .you {
    background: var(--fr-warning-deep);
    box-shadow: 0 0 0 1px var(--fr-warning-deep), 0 4px 10px rgba(140, 86, 24, 0.30);
}
.ut-card.is-negative .ut-mkt-bar .you {
    background: var(--fr-negative);
    box-shadow: 0 0 0 1px var(--fr-negative), 0 4px 10px rgba(185, 28, 28, 0.30);
}

.ut-mkt-bar .you-caret {
    position: absolute;
    bottom: 100%;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--fr-ink);
    transform: translate(-50%, -2px);
    z-index: 6;
}
.ut-card.is-positive .ut-mkt-bar .you-caret { border-top-color: var(--fr-positive-deep); }
.ut-card.is-warning  .ut-mkt-bar .you-caret { border-top-color: var(--fr-warning-deep); }
.ut-card.is-negative .ut-mkt-bar .you-caret { border-top-color: var(--fr-negative); }

/* Percentile chip — the right-zone punchline. Same chip vocabulary as
   the +X% rent hero in the middle zone: rounded pill on warm-paper bg,
   a hairline border, big number leading a small ordinal and an eyebrow
   label. Left-aligned so it lands at a consistent x-anchor card-to-card. */
.ut-mkt-pct-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 8px 14px;
    background: #FBF9F4;
    border: 1px solid var(--fr-hairline-strong);
    border-radius: 100px;
    align-self: flex-start;
    font-family: var(--fr-font-sans);
}
.ut-mkt-pct-chip .num {
    font-size: 24px;
    font-weight: 700;
    color: var(--fr-ink);
    letter-spacing: -0.015em;
    line-height: 1;
}
.ut-mkt-pct-chip .ord {
    font-size: 11px;
    font-weight: 600;
    color: var(--fr-ink);
    line-height: 1;
    align-self: flex-start;
    margin-left: -2px;
    margin-top: 4px;
}
.ut-mkt-pct-chip .lbl {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--fr-ink-3);
    margin-left: 8px;
}

/* market column placeholder when no comps configured */
.ut-mkt-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: var(--fr-font-serif);
    font-style: italic;
    font-size: 14px;
    color: var(--fr-ink-3);
    line-height: 1.5;
    padding: 20px 8px;
}


/* ── footer reveal — show units table ────────────────────────────── */
/* The "Show N units" reveal is the primary call-to-action on the card —
   enter pricing. On the warm-paper drawer a near-white bar disappeared, so
   it's an amber action bar: pale-amber fill + a strong amber top border +
   bold amber text, with the chevron sliding right on hover. Unmissable, and
   clearly the thing to click. */
.ut-foot {
    border-top: 1px solid var(--fr-accent);
    background: #FBF3E2;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    user-select: none;
    transition: background 120ms ease;
    font-family: var(--fr-font-sans);
}
.ut-foot:hover { background: #F8EDD0; }
.ut-foot:hover .chev { transform: translateX(4px); }
.ut-foot .lbl {
    font-family: var(--fr-font-sans);
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--fr-accent-strong);
}
.ut-foot .count {
    font-family: var(--fr-font-mono);
    font-size: 11.5px;
    color: var(--fr-accent);
    letter-spacing: -0.01em;
}
.ut-foot .spacer { flex: 1; }
.ut-foot .chev {
    font-family: var(--fr-font-serif);
    font-size: 18px;
    font-weight: 700;
    color: var(--fr-accent-strong);
    transition: transform 200ms ease;
}
.ut-card.units-open .ut-foot { background: #F8EDD0; }
.ut-card.units-open .ut-foot .chev {
    transform: rotate(90deg);
    color: var(--fr-accent-strong);
}


/* responsive: collapse 3 columns to a stack on narrow viewports */
@media (max-width: 1100px) {
    .ut-body { grid-template-columns: 1fr; }
    .ut-col {
        border-right: none;
        border-bottom: 1px solid var(--fr-hairline);
    }
    .ut-col:last-child { border-bottom: none; }
}


/* ══════════════════════════════════════════════════════════════════════
   EXPANDED UNIT TABLE — appears below .ut-foot when "SHOW UNITS" is open.
   Designed to read as a quiet extension of the card chrome: the same
   warm-paper header tint as .ut-head, hairline row dividers, and the
   same fr-* button vocabulary used elsewhere. Most cells set their own
   inline styles (set in hover_table.py per-cell), so the rules below
   use !important sparingly to override the legacy DataTable defaults
   without rewriting every cell builder.
   ══════════════════════════════════════════════════════════════════════ */

.ut-units-table-wrap {
    font-family: var(--fr-font-sans);
    padding: 14px 18px 18px;
    background: var(--fr-surface);
    border-top: 1px solid var(--fr-hairline);
}

/* The bulk-action button rows above the table */
.ut-units-table-wrap > div:not(.ut-units-table-scroll) .btn {
    font-family: var(--fr-font-sans);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 6px;
    border: 1px solid var(--fr-hairline-strong);
    box-shadow: none;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.ut-units-table-wrap > div:not(.ut-units-table-scroll) .btn-secondary,
.ut-units-table-wrap > div:not(.ut-units-table-scroll) .btn-outline-secondary {
    background: var(--fr-surface);
    color: var(--fr-ink-2);
    border-color: var(--fr-hairline-strong);
}
.ut-units-table-wrap > div:not(.ut-units-table-scroll) .btn-secondary:hover,
.ut-units-table-wrap > div:not(.ut-units-table-scroll) .btn-outline-secondary:hover {
    background: var(--fr-bg);
    color: var(--fr-ink);
    border-color: var(--fr-ink-3);
}
.ut-units-table-wrap > div:not(.ut-units-table-scroll) .btn-primary {
    background: var(--fr-accent);
    color: #FFFFFF;
    border-color: var(--fr-accent);
}
.ut-units-table-wrap > div:not(.ut-units-table-scroll) .btn-primary:hover {
    background: var(--fr-accent-strong);
    border-color: var(--fr-accent-strong);
}

/* Outer scroll container — replaces the legacy gray border */
.ut-units-table-scroll {
    border: 1px solid var(--fr-hairline-strong);
    border-radius: var(--fr-r-sm, 4px);
    overflow: auto;
    max-height: 500px;
    /* Tells the browser this scroll container's paint can't escape its
       box, so it doesn't reconsider the whole page during local scrolls. */
    contain: content;
}

/* The table itself */
.ut-units-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--fr-surface);
    font-family: var(--fr-font-sans);
    font-variant-numeric: tabular-nums;
}

/* Header row — eyebrow style on warm-paper bg, matches .ut-head */
.ut-units-table thead th {
    background: var(--fr-bg) !important;
    color: var(--fr-ink-3) !important;
    font-family: var(--fr-font-sans) !important;
    font-size: 9.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    text-align: center !important;
    padding: 10px 8px !important;
    border: none !important;
    border-bottom: 1px solid var(--fr-hairline-strong) !important;
    position: sticky;
    top: 0;
    z-index: 2;
}
.ut-units-table thead th [id*="sort-header"] {
    color: var(--fr-ink-3);
}

/* Body cells — keep their inline padding/font-size/color rules from
   hover_table.py (vacancy red, muted "last published", etc. are
   intentional signals) but neutralize the legacy 1px gray border so
   we get clean hairline row dividers from the table itself. */
.ut-units-table tbody td {
    border: none !important;
    border-bottom: 1px solid var(--fr-hairline) !important;
    font-family: var(--fr-font-sans) !important;
}
.ut-units-table tbody tr:last-child td {
    border-bottom: none !important;
}

/* Zone divider — separates the "reference" columns (Unit, Date, Sq Ft,
   Prior Rent, Current Advertised) from the "action" columns (Recommended,
   Override, Adjusted, Term, etc.). Applied via .ut-section-end class on
   both the header Th and the body Td so the line runs continuously
   from header through the last row. Higher specificity than the base
   .ut-units-table tbody td rule, so it wins despite the !important reset. */
.ut-units-table thead th.ut-section-end,
.ut-units-table tbody td.ut-section-end {
    border-right: 1px solid var(--fr-hairline-strong) !important;
}
/* Default text color — only applied where no inline color override exists.
   Cells that set their own color (vacancy red, "Last Published" mute) win. */
.ut-units-table tbody { color: var(--fr-ink); }

/* Zebra striping — subtle warm tint on even rows so the eye has a rail to
   follow across the 14-column width. Lighter than --fr-bg so hover still
   reads as a distinct elevation above the zebra. Inline cell tints
   (vacancy red, never-published) win at normal specificity; hover wins via
   !important and momentarily unifies the row. */
.ut-units-table tbody tr:nth-child(even) td {
    background-color: #FBFAF6;
}

/* Row hover — single quiet cue, layered above zebra. Note: this
   momentarily covers cell-level signal tints (e.g. red for never-published
   units, green for "Published Rate" in Leasing Hub). Acceptable trade-off:
   those signals still read clearly on non-hovered rows, and hover unifies
   the row for readability.
   No transition: at large row counts the per-row style observer adds
   measurable scroll cost for an effect users don't notice anyway. */
.ut-units-table tbody tr:hover td {
    background: var(--fr-bg) !important;
}

/* Inputs that live in cells (BPO, Review Override) — match fr palette */
.ut-units-table tbody td input[type="number"],
.ut-units-table tbody td input[type="text"] {
    font-family: var(--fr-font-sans);
    font-variant-numeric: tabular-nums;
    border-color: var(--fr-hairline-strong) !important;
    background: var(--fr-surface) !important;
    color: var(--fr-ink) !important;
}
.ut-units-table tbody td input[type="number"]:focus,
.ut-units-table tbody td input[type="text"]:focus {
    border-color: var(--fr-accent) !important;
    outline: none;
    box-shadow: 0 0 0 2px var(--fr-accent-soft);
}
/* Disabled inputs (e.g. Review Override on the analyst view) — solid gray fill so they read as locked */
.ut-units-table tbody td input[type="number"]:disabled,
.ut-units-table tbody td input[type="text"]:disabled {
    background: #d6d8db !important;
    border-color: #d6d8db !important;
    color: #495057 !important;
    cursor: not-allowed !important;
}