/* ═══════════════════════════════════════════════════════════════════
   32 — Unit Type Strip (walkthrough layout)

   Styles for app/components/unit_type_strip.py only. Every selector is
   namespaced .uts-*, so this file cannot affect the Cards (.ut-card) or
   Rows (.ut-row) layouts in 30_unit_type_cards.css; deleting this file
   and the component leaves those two exactly as they are.

   Loads after 30_ so it can restyle the two pieces it deliberately
   borrows from the other layouts — the sparkline pill and the traffic
   column — when they appear inside a strip.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Making sticky possible inside the bedroom accordion ────────────
   15_legacy_base.css clips .accordion-item with `overflow: hidden` for
   its rounded corners. `hidden` makes the item a scroll container, and a
   sticky descendant then resolves against *it* rather than the page — so
   the strip would silently never stick. `clip` clips identically but does
   NOT create a scroll container. Scoped to the walkthrough modifier so
   the Cards and Rows layouts keep the original rule untouched. */
.bedroom-group-accordion.is-walkthrough .accordion-item {
  overflow: clip !important;
}

/* One unit type = one bounded object. The accent rule runs the full height,
   strip AND table, which is what separates consecutive types. Without it a
   type with zero available units — whose "Show units" band is hidden — butts
   straight into the next one and the two read as a single block. */
/* Outer wrapper carries no border: it exists so the popovers can live outside
   the clipped box below and still open past its edges. */
.uts-type { margin-bottom: 14px; }

.uts-box {
  background: var(--fr-surface);
  /* A hairline amber outline all the way round — the horizontal top and
     bottom edges are what actually cut one unit type from the next when the
     eye is scanning down the middle of the screen. The left rule alone sits
     outside the scan path and was doing nothing there. */
  border: 1px solid var(--fr-accent);
  border-left: 3px solid var(--fr-accent);
  border-radius: var(--fr-r-sm);
  /* `clip` not `hidden`: it clips the last child's square corner to the
     rounded border (otherwise the cream "Show units" band paints over the
     corner and leaves a notch in the amber line) WITHOUT creating a scroll
     container, which `hidden` would — and that would silently kill the
     sticky strip inside. Same distinction as the accordion rule above. */
  overflow: clip;
}

/* Zero available is a fact about the unit type, not a disabled state, so it
   keeps full contrast and the same accent rule — only the ground changes,
   matching .ut-card.is-empty in 30_. */
.uts-box.is-empty { background: var(--fr-bg); }
.uts-box.is-empty .uts-strip { background: var(--fr-bg); }

/* ── The strip ──────────────────────────────────────────────────────
   Sticks under the navbar while its own unit table is being worked, so
   the rent anchors and the type name stay on screen during pricing.   */
.uts-strip {
  /* The Frontier navbar scrolls away with the page (it is not fixed), so
     there is no permanent top chrome to clear — the strip pins flush. */
  position: sticky;
  top: 0;
  /* Above the unit table's own sticky thead (z-index 2 in 30_), below the
     navbar (1040) and Bootstrap's drawer/modal layers. */
  z-index: 20;
  background: var(--fr-bg);
  border-bottom: 1px solid var(--fr-hairline);
  border-radius: var(--fr-r-sm) var(--fr-r-sm) 0 0;
  padding: 11px 16px 9px;
}

.uts-row1 { display: flex; align-items: center; }
.uts-row2 { display: flex; align-items: center; margin-top: 5px; }

.uts-reg { padding-right: 16px; min-width: 0; }
.uts-reg + .uts-reg { padding-left: 16px; border-left: 1px solid var(--fr-hairline-strong); }
.uts-row2 .uts-reg { border-left-color: transparent; display: flex; align-items: center; gap: 10px; overflow: hidden; }

/* Fixed bases so the columns line up vertically down the whole page —
   that alignment is what lets the eye learn one scan path and reuse it. */
/* Four regions sized to what they actually hold, then ONE elastic region.
   That is the whole trick: several fixed regions plus leftover width always
   pools as dead gaps, wherever you align the contents. With a single elastic
   region every spare pixel lands somewhere it does work — here, a longer
   market scale. */
/* Sized for the WORST case across properties, not the friendliest one. Unit
   type names run from "A1" to "2 Bed + 1 Bath Plus", and rents from 3 to 4
   digits plus a signed pill — both blow out a region tuned to short names. */
.uts-r-name  { flex: 0 0 264px; }
.uts-r-occ   { flex: 0 0 116px; }
/* Wider than its text needs: the aging bar spans the region, so extra width
   buys real resolution on the vacant / 30 / 60 / 90 split. */
.uts-r-avail { flex: 0 0 240px; }
.uts-r-rent  { flex: 0 0 484px; }
.uts-r-mkt   { flex: 1 1 auto; min-width: 320px; padding-right: 0; }

/* ── Shared type ────────────────────────────────────────────────────
   Labels are lower-case rather than tracked caps: at twelve always-open
   strips, caps labels alone were a third of the page's visual mass.     */
/* Sizes run ~12% above the other layouts: at 100% browser zoom on a large or
   high-DPI monitor the old scale read as too small, and asking people to zoom
   is not a fix. See the note in the strip's docstring about the app-wide
   version of this problem. */
.uts-lbl  { font-size: 11.5px; color: var(--fr-ink-3); font-weight: 500; }
.uts-foot { font-size: 11.5px; color: var(--fr-ink-3); white-space: nowrap; }
.uts-foot b { color: var(--fr-ink-2); font-weight: 600; }
.uts-big  { font-size: 21px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }

/* ── Name ───────────────────────────────────────────────────────────── */
.uts-r-name { display: flex; align-items: center; gap: 8px; }
/* Heavy sans, matching .ut-head .ut-code (Cards) and .ut-row-type .code
   (Rows) exactly — the same "workman" treatment used for a unit type name
   everywhere else in the app. The serif was also fighting the bedroom-group
   heading above it: same typeface, smaller size, so the name read as a
   subordinate caption instead of the label you navigate by. */
.uts-code {
  font-family: var(--fr-font-sans);
  font-weight: 700;
  font-size: 23px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--fr-ink);
  /* Last-resort guard only: the region is sized for the longest real name, but
     a longer one must truncate rather than shove the occupancy column sideways.
     The full name is on the element's title. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.uts-chip {
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 2.5px 6px; border-radius: 3px; white-space: nowrap;
}
.uts-chip.pub    { background: var(--fr-bg); color: var(--fr-ink-3); border: 1px solid var(--fr-hairline-strong); }
.uts-chip.notpub { background: var(--fr-accent-soft); color: var(--fr-accent-strong); }
.uts-phase { font-size: 10px; color: var(--fr-ink-3); text-transform: uppercase; letter-spacing: 0.04em; }

/* ── Occupancy — the triage anchor, the one coloured figure on line 1 ── */
.uts-occ.is-strong .uts-big { color: var(--fr-positive); }
.uts-occ.is-watch  .uts-big { color: var(--fr-warning); }
.uts-occ.is-soft   .uts-big { color: var(--fr-negative); }
.uts-r-occ .uts-lbl { display: block; margin-top: 3px; }

/* ── Availability + aging bar ───────────────────────────────────────── */
.uts-avail-head { display: flex; align-items: baseline; gap: 5px; white-space: nowrap; }
/* The wrapper is the hover target, not the bar: vertical padding gives it a
   ~20px hit area so you don't have to land on a 5px line to open the
   breakdown. The padding is transparent, so the bar still reads as a hairline. */
.uts-agewrap { position: relative; margin-top: 4px; padding: 7px 0; cursor: help; }
.uts-agewrap.is-flat { cursor: default; }
.uts-agewrap.is-flat:hover .uts-agebar { box-shadow: none; }
.uts-agebar {
  display: flex; gap: 1px; height: 7px; border-radius: 99px;
  background: var(--fr-hairline); overflow: hidden;
}
.uts-agewrap:hover .uts-agebar { box-shadow: 0 0 0 3px rgba(20, 24, 29, 0.05); }
.uts-agebar .seg { display: block; }
.uts-agebar .seg.is-empty { flex: 1; background: var(--fr-hairline); }

/* Matches the other popovers on the page — light surface, hairline border,
   soft shadow — rather than the inverted black chip it used to be. */
.uts-agetip {
  position: absolute; left: 0; top: calc(100% + 2px); z-index: 30;
  /* `max-content` is the fix for the clipped labels: an absolutely positioned
     box otherwise shrink-to-fits its containing block (the ~208px aging-bar
     wrapper), which squeezed the four columns until the text overlapped the
     next swatch. This sizes to the content and ignores the parent's width. */
  width: max-content;
  display: grid; grid-auto-flow: column; column-gap: 22px;
  background: var(--fr-surface); color: var(--fr-ink);
  border: 1px solid var(--fr-hairline);
  border-radius: var(--fr-r-sm); padding: 10px 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
  opacity: 0; pointer-events: none; transition: opacity 0.12s ease;
}
.uts-agewrap:hover .uts-agetip,
.uts-agewrap:focus-within .uts-agetip { opacity: 1; }
/* Each bucket is its own column: swatch + label on one line, count beneath.
   Full ink on every row — a zero count is information, and dimming it just
   made the panel harder to read. */
.uts-agetip .row { display: block; }
/* Flex with a gap, so the swatch reserves its own track and the label can
   never sit on top of it — the previous inline swatch + text run relied on
   the swatch holding its width, and it did not. */
.uts-agetip .lab {
  display: flex; align-items: center; gap: 8px;
  white-space: nowrap; font-size: 12px; color: var(--fr-ink-2);
}
.uts-agetip b {
  display: block; margin-top: 5px; margin-left: 17px;
  font-size: 16px; font-weight: 600; color: var(--fr-ink);
  font-variant-numeric: tabular-nums;
}

/* ── Rent — a four-column table, not a run of numbers ────────────────
   Fixed grid columns mean every figure sits at the same x-position on every
   row down the page. That repetition is what makes a dense zone read as a
   table rather than as text that happens to contain digits. Both strip lines
   share the template, so the footnotes align under the values they qualify. */
.uts-r-rent {
  display: grid;
  grid-template-columns: 76px 76px 146px 108px;
  column-gap: 14px;
  align-items: start;
}
/* The hero's tint bleeds 8px into the gap on each side, which left the trend
   column pressed right up against it. This pads the trend away so it sits
   between the tinted box and the region's edge rather than hugging one of them. */
.uts-rent-trend { padding-left: 12px; }
.uts-row2 .uts-r-rent { display: grid; align-items: center; }
.uts-rent-foot-a { grid-column: 1 / 3; min-width: 0; }
.uts-rent-foot-b { grid-column: 3 / 5; min-width: 0; }

.uts-rent-cell { min-width: 0; }
/* Fixed-height value row is what keeps all four labels on ONE line. Left to
   size themselves, a taller figure pushes its own label down and the label row
   breaks — which is what happened when the hero was a different size from its
   neighbours. Bottom-aligned, so the figures sit on a common line too. */
.uts-cell-val { display: flex; align-items: flex-end; gap: 6px; height: 27px; white-space: nowrap; }
.uts-rent-cell .uts-lbl { display: block; margin-top: 5px; }

.uts-money { font-size: 18px; font-weight: 600; letter-spacing: -0.012em; line-height: 1; font-variant-numeric: tabular-nums; }
.uts-money.is-none { color: var(--fr-ink-3); }

/* The hero — emphasis from colour and a tinted cell, not from size.
   21px is a step the strip already uses (occupancy, available count); the
   earlier 25px belonged to nothing else on the page, which is exactly why it
   read as out of place. */
.uts-hero { font-size: 21px; font-weight: 700; line-height: 1; letter-spacing: -0.018em; font-variant-numeric: tabular-nums; }
.uts-hero-sub { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Tint is painted by a pseudo-element rather than as cell padding, so it
   cannot shift the value or the label out of the shared grid rows. Down a
   page of unit types this makes the delta column a stripe of green and red
   you can triage without reading a single number. */
/* Centred inside the tint, unlike every other cell on the strip. A visible
   box with its contents shoved left and a gap trailing right reads as
   unfinished; the tint is a fixed width on every row, so centring keeps the
   column stripe uniform while giving the figure room on both sides. */
.uts-rent-cell.is-hero { position: relative; text-align: center; }
.uts-rent-cell.is-hero .uts-cell-val { justify-content: center; }
.uts-rent-cell.is-hero::before {
  content: "";
  position: absolute;
  inset: -7px -8px -6px -8px;
  border-radius: var(--fr-r-sm);
  z-index: 0;
}
.uts-rent-cell.is-hero > * { position: relative; z-index: 1; }

.uts-rent-cell.is-hero.is-up::before   { background: var(--fr-positive-tint-2); }
.uts-rent-cell.is-hero.is-flat::before { background: rgba(20, 24, 29, 0.05); }
.uts-rent-cell.is-hero.is-warn::before { background: var(--fr-warning-tint-2); }
.uts-rent-cell.is-hero.is-down::before { background: var(--fr-negative-tint-2); }

.uts-rent-cell.is-hero.is-up   .uts-hero, .uts-rent-cell.is-hero.is-up   .uts-hero-sub { color: var(--fr-positive-deep); }
.uts-rent-cell.is-hero.is-flat .uts-hero, .uts-rent-cell.is-hero.is-flat .uts-hero-sub { color: var(--fr-ink-2); }
.uts-rent-cell.is-hero.is-warn .uts-hero, .uts-rent-cell.is-hero.is-warn .uts-hero-sub { color: var(--fr-warning-deep); }
.uts-rent-cell.is-hero.is-down .uts-hero, .uts-rent-cell.is-hero.is-down .uts-hero-sub { color: var(--fr-negative-deep); }

/* The rent region holds two stacked blocks: the rent pair, then the trend.
   Each gets its own label underneath, so neither label runs sideways into
   the region next door. */
/* Line 2's footnotes stay grouped and flush left in every region, the market
   included. Pushing its pair to the outer edges spread them across ~600px and
   read as two unrelated stray links rather than one footnote line. */
.uts-row2 .uts-r-mkt { justify-content: flex-start; }

/* Borrowed sparkline pill: inside a strip it is a plain number you click to
   open the full chart. The thumbnail is dropped — its `display: block` is an
   INLINE style on the <img>, so only !important can override it. The pill and
   its popover are otherwise untouched: same component, same callback. */
.uts-rent-trend .ut-spark-pill {
  background: none; border: 0; padding: 0; gap: 0;
  display: inline-flex; flex-direction: column; align-items: flex-start;
}
.uts-rent-trend .ut-spark-pill img { display: none !important; }
/* Matches .uts-cell-val exactly so the trend's label lands on the same line
   as the other three, and its figure on the same baseline. Sized like the
   dollar figures: the trend is context here, not the headline. */
.uts-rent-trend .ut-spark-pill .delta {
  display: flex; align-items: flex-end; height: 27px;
  font-size: 18px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums;
}
.uts-rent-trend .ut-spark-pill .lbl {
  margin-top: 5px;
  font-size: 11.5px; color: var(--fr-ink-3); font-weight: 500;
  text-transform: lowercase; letter-spacing: 0; white-space: nowrap;
}
.uts-rent-trend .ut-spark-pill:hover .delta { text-decoration: underline; text-underline-offset: 3px; }

/* ── Market rail — the one element given real room ──────────────────── */
/* Top-aligned, because the rail's stack is taller than the rail itself (it
   reserves room for the You pin). The small negative margins optically centre
   the endpoint figures and the percentile on the 8px rail. */
.uts-r-mkt { display: flex; align-items: flex-start; gap: 11px; }
.uts-r-mkt .uts-cap    { margin-top: -3px; }
.uts-r-mkt .uts-pctile { margin-top: -6px; }
.uts-r-mkt.is-empty { align-items: center; }
.uts-cap { font-size: 12.5px; color: var(--fr-ink-2); font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* The rail plus room beneath it for the You pin. This is the one elastic
   element in the strip — it takes every pixel the fixed regions don't use, so
   the row always terminates flush at the right edge with no dead zone, and a
   longer scale is a more precise scale. */
.uts-track-stack { position: relative; flex: 1 1 auto; min-width: 120px; padding-bottom: 20px; }
.uts-track {
  position: relative; height: 8px; border-radius: 99px; cursor: pointer;
  background: linear-gradient(90deg, #E8C3BD 0%, #EADFC6 50%, #BFDCC8 100%);
}
.uts-track:hover { box-shadow: 0 0 0 3px rgba(20, 24, 29, 0.06); }

/* You pin — our advertised rent, positioned rather than restated in text.
   At the extremes a centred label would hang off the rail, so the two
   modifiers anchor it to the near edge instead. */
.uts-you-pin {
  position: absolute; top: 12px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; line-height: 1.15;
  white-space: nowrap; pointer-events: none;
}
.uts-you-pin.at-start { transform: translateX(-6px); align-items: flex-start; }
.uts-you-pin.at-end   { transform: translateX(calc(-100% + 6px)); align-items: flex-end; }
.uts-you-pin .val { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.uts-you-pin .lab { font-size: 10px; color: var(--fr-ink-3); font-weight: 500; }
.uts-comp {
  position: absolute; top: 50%; width: 7px; height: 7px; border-radius: 99px;
  background: var(--fr-surface); border: 1px solid rgba(20, 24, 29, 0.30);
  transform: translate(-50%, -50%);
}
.uts-you {
  position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 99px;
  background: var(--fr-ink); border: 2.5px solid var(--fr-bg);
  transform: translate(-50%, -50%); box-shadow: 0 0 0 1px var(--fr-ink);
}
.uts-pctile { font-size: 17.5px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.uts-pctile sup { font-size: 10px; font-weight: 500; }
.uts-pctile em  { font-style: normal; font-size: 11.5px; color: var(--fr-ink-3); font-weight: 500; margin-left: 2px; }

/* ── The drill-in trigger ────────────────────────────────────────────
   One affordance, reused for every panel: the footnote that names the
   data is also the control that opens it, so the secondary metrics cost
   no permanent space on the strip.                                     */
.uts-more {
  font-size: 11.5px; font-weight: 500; color: var(--fr-ink-2);
  white-space: nowrap; cursor: pointer;
  border-bottom: 1px solid var(--fr-hairline-strong);
  padding: 1px 0;
}
.uts-more:hover { color: var(--fr-ink); border-bottom-color: var(--fr-ink-3); }
.uts-more .car { color: var(--fr-ink-3); margin-left: 2px; }
.uts-more:hover .car { color: var(--fr-ink); }
.uts-more:focus-visible { outline: 2px solid var(--fr-accent); outline-offset: 2px; border-radius: 2px; }

/* ── Popover interiors ──────────────────────────────────────────────── */
.uts-pop { padding: 2px; }
.uts-pop-title { font-size: 12px; font-weight: 600; color: var(--fr-ink); margin-bottom: 8px; }
.uts-pop-empty { font-size: 12px; color: var(--fr-ink-3); }
.uts-pop-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.uts-pop-table td { padding: 5px 0; border-bottom: 1px solid var(--fr-hairline); }
.uts-pop-table tr:last-child td { border-bottom: 0; }
.uts-pop-table .m { color: var(--fr-ink-3); font-size: 11px; }
.uts-pop-table .r { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.uts-pop-foot {
  margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--fr-hairline);
  font-size: 10.5px; color: var(--fr-ink-3);
}
/* The borrowed traffic column drops its own framing inside a popover. */
.uts-pop-traffic .ut-traffic { border: 0; padding: 0; margin: 0; }

/* ── Narrow screens ─────────────────────────────────────────────────
   Below the point where all five regions fit, the strip wraps and stops
   sticking — a wrapped strip is tall enough that pinning it would cost
   more screen than it returns.                                         */
@media (max-width: 1320px) {
  .uts-strip { position: static; }
  .uts-row1, .uts-row2 { flex-wrap: wrap; row-gap: 9px; }
  .uts-reg + .uts-reg { border-left: 0; padding-left: 0; }
  .uts-reg { padding-right: 22px; }
  .uts-r-mkt { flex: 1 1 100%; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .uts-agetip { transition: none; }
}