/* ═══════════════════════════════════════════════════════════════════
   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;
  /* White on the cream page is a lighter patch of the same plane until
     something lifts it. Weighted like .ut-row:hover rather than a card-kit
     drop shadow — it only has to separate the box from the ground. */
  box-shadow: 0 2px 14px rgba(20, 24, 29, 0.05);
}

/* Zero available is a fact about the unit type, not a disabled state: nothing
   here is dimmed, and every figure keeps full contrast — reduced opacity would
   read as DISABLED, which is a different and wrong claim.

   What changes is the three things that together say "there is work in this
   box": the white ground, the amber edge, and the lift. Amber on all twelve
   strips was not a signal, it was the page's texture; spending it only on the
   types you can actually price is what makes one live type findable in a run
   of ten dead ones. Same trade as .ut-card.is-empty / .ut-row.is-empty in 30_
   and 70_, so the three layouts agree on what "nothing to do here" looks like.

   `border-color` (0,2,0) outranks the shorthands above (0,1,0), so it recolors
   all four edges INCLUDING the 3px left rule — which stays 3px, because the
   left rule is what keeps the boxes reading as one column down the page. */
.uts-box.is-empty {
  background: var(--fr-bg);
  border-color: var(--fr-hairline-strong);
  box-shadow: none;
}
.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;
  /* Sticky, so this has to be opaque — and it is the ground you actually see,
     since the strip covers the box edge to edge. It was pinned to --fr-bg,
     which quietly made every strip cream and cancelled the white/cream split
     .uts-box was drawing underneath it. The empty override is above. */
  background: var(--fr-surface);
  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; }
/* Line 2's market slot is deliberately empty — the zone keeps its caption
   stacked over its own rail. It still ships as a spacer so the four footnotes
   to its left keep their region widths; `overflow: hidden` there must not clip
   the You pin, which hangs down out of line 1 into this space. */
.uts-row2 .uts-r-mkt { overflow: visible; }

/* 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. */
/* The word "base" on the two dollar labels is paid for out of the grid's own
   slack, not by borrowing from the market rail: 450px of columns and gaps
   inside a 452px content box. "advertised base" needs ~86px where
   "advertised" needed ~64px. The fourth column keeps enough room for
   "30d base rents", which is the sparkline pill's own text and shortens
   honestly to "20d" / "8d" while history fills toward 30 days. */
.uts-r-rent {
  display: grid;
  grid-template-columns: 84px 94px 146px 84px;
  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; }
/* nowrap, not ellipsis: a rent label that wraps pushes its own column taller
   and breaks the shared label row the four cells sit on. */
.uts-rent-cell .uts-lbl { display: block; margin-top: 5px; white-space: nowrap; }

.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); }
/* No advertised rent means there is no delta to triage, and a grey tint behind
   a dash is a filled block claiming "zero delta" when it means "no reading".
   Down a page of zero-available types those blocks were the heaviest object on
   the strip after the type name. The cell stays — the grid depends on it —
   and the stripe of colour goes back to meaning only what it says. */
.uts-rent-cell.is-hero.is-void::before { background: none; }

.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); }
.uts-rent-cell.is-hero.is-void .uts-hero { color: var(--fr-ink-3); }

/* 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. */
/* 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; }

/* ── The collapsed line (zero available) ────────────────────────
   One line instead of two, and four regions instead of five. It keeps the
   live strip's region widths on purpose — the name, occupancy, count and
   in-place figure land on the same x-positions either way, so the eye keeps
   one scan path down a page that mixes both shapes. See _collapsed_strip for
   what comes off and why.                                              */
.uts-strip.is-collapsed { padding: 10px 16px; }
/* Recent base spans the advertised + delta columns: it carries a figure and
   an inline delta, which will not sit in 94px, and there is nothing else
   competing for the width. Its label still starts at the same x as
   "advertised base" does on a live strip. */
.uts-strip.is-collapsed .uts-rent-recent { grid-column: 2 / 4; }
/* The slot the comp rail occupies on a live strip, holding the one drill-in
   worth keeping. Centred on the figures rather than top-aligned (there is no
   rail here to align to), and with no divider: the note explains the recent
   base beside it, so it belongs to that zone rather than standing as one of
   its own. Selector is .uts-strip.is-collapsed-scoped because .uts-r-mkt's
   own `align-items: flex-start` is declared further down this file and would
   otherwise win on source order at equal specificity. */
.uts-strip.is-collapsed .uts-r-mkt {
  /* Back to a row: the live zone is a column stack (caption over rail), and
     inheriting that here would centre the note in its own column. */
  flex-direction: row;
  align-self: center;
  align-items: center;
  justify-content: flex-start;
  border-left: 0;
  padding-left: 0;
  min-width: 0;
}

/* Inline dollar delta beside "recent base" — same weight and colours as the
   hero's sub-figure, so a delta reads the same wherever it appears. */
.uts-rent-delta { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.uts-rent-delta.is-up   { color: var(--fr-positive-deep); }
.uts-rent-delta.is-down { color: var(--fr-negative); }

/* ── 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. */
/* The zone is a stack, not a row: caption over rail, with the You pin hanging
   below into the second line's now-empty market slot. That is what puts the
   rail on the strip's vertical centre — it is not nudged there, it simply has
   something above it and something below it for the first time. */
.uts-r-mkt {
  display: flex;
  flex-direction: column;
  gap: 7px;
  /* Stretch to fill line 1 rather than centre inside it. .uts-row1 is
     align-items:center, which shrink-wraps every region; stretched, the
     caption pins to the top of the line, the rail sits under it, and the
     leftover height at the bottom is exactly the room the You pin hangs into.
     Nothing here is a tuned number — the rail's position falls out of the line
     height that the rent zone beside it already sets. */
  align-self: stretch;
  /* 13px, not the 7px this started at. The caption and the rail's endpoint
     figures are both small type; at 7px they read as one cramped block rather
     than as a caption over a scale, and this zone carries four text tiers
     where every other zone on the strip carries two. The room is already in
     the zone — caption + gap + rail is ~43 inside a 49px line — and spending
     it here also drops the rail onto the strip's vertical centre. */
  gap: 13px;
}
/* Conclusion left, provenance right. A rank and a dollar figure sitting a few
   pixels apart (the old "$1,619  65th pctile") read as one run of numbers; on
   its own line at the head of the zone the percentile is read once and the
   eye moves on. */
.uts-mkt-head { display: flex; align-items: baseline; gap: 12px; }
.uts-mkt-meta { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* Stepped down from 17.5px now that it leads a caption line rather than
   competing with the rail's endpoint figures. It is a precision readout of
   something the marker's position already shows, so it does not need to be
   the largest number in the zone — it needs a place of its own. */
.uts-pctile { font-size: 15px; line-height: 1; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.uts-pctile sup { font-size: 9px; font-weight: 500; }
.uts-pctile em  { font-style: normal; font-size: 11.5px; color: var(--fr-ink-3); font-weight: 500; margin-left: 3px; }

.uts-mkt-rail { display: flex; align-items: flex-start; gap: 11px; }
/* Endpoints centre on the RAIL, not on the stack that holds it — the stack is
   four times the rail's height because it reserves room for the You pin.
   Cards does this with `height: 14px; align-items: center` on its endpoint;
   here it is a known line-height and half the difference as a negative
   margin. Value is (RAIL_H - own height) / 2. */
.uts-mkt-rail .uts-cap { margin-top: -1.5px; }
.uts-r-mkt.is-empty { flex-direction: row; align-items: center; }
/* Stepped up from 12.5px/500/ink-2 toward the Cards endpoint (16px/600/ink).
   The range numbers are the rail's scale — at the old size they read as a
   caption on the bar rather than as the two figures it runs between. */
.uts-cap {
  font-size: 15px; line-height: 1; color: var(--fr-ink); font-weight: 600;
  letter-spacing: -0.005em; 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. */
/* No padding-bottom: the You pin is absolutely positioned and now hangs into
   line 2's empty market slot, so reserving in-flow room for it here would add
   that height to line 1 twice over. Reserving 36px was what pushed the strip
   from 91px to 125px when the caption moved above the rail. */
.uts-track-stack { position: relative; flex: 1 1 auto; min-width: 120px; }
.uts-track {
  position: relative; height: 12px; border-radius: 99px; cursor: pointer;
  /* The Cards bar's gradient verbatim (.ut-mkt-bar), including the inset
     hairline. Flat pastel hexes at 8px read as a smear; these are tinted
     rgba over the surface with a real ring around them, which is most of why
     the Cards rail looks like an instrument and this one did not. Sharing the
     formula also means "cheap end" and "expensive end" look identical in
     every layout. */
  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);
}
.uts-track:hover { box-shadow: inset 0 0 0 1px var(--fr-hairline), 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: 17px; 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: 12.5px; font-weight: 600; color: var(--fr-ink); font-variant-numeric: tabular-nums; }
/* Tracked caps, matching .ut-mkt-you-pin .lbl exactly. This is the one place
   the strip keeps a caps label: at 8.5px with 0.20em of tracking it reads as
   a tick mark on the rail rather than as text, and lower-case "you" under a
   dollar figure read as part of the figure. */
.uts-you-pin .lab {
  font-size: 8.5px; font-weight: 600; color: var(--fr-ink-3);
  text-transform: uppercase; letter-spacing: 0.20em; margin-top: 3px;
}
/* box-sizing is stated on both markers rather than inherited from Bootstrap's
   global reset, because _rail_left in the component insets them by half their
   diameter and reads that diameter from these `width`s. Under content-box the
   borders would add 2px and 6px, the constants would be wrong, and the end
   markers would hang off the rail by exactly the border width. */
.uts-comp {
  position: absolute; top: 50%; width: 9px; height: 9px; box-sizing: border-box;
  border-radius: 99px;
  background: var(--fr-surface); border: 1px solid rgba(20, 24, 29, 0.35);
  transform: translate(-50%, -50%); z-index: 3;
}
/* The ring is --fr-surface, not --fr-bg: the strip's ground is white now (it
   was cream when this was written), and a cream ring on a white rail left a
   dirty halo around the marker. */
.uts-you {
  position: absolute; top: 50%; width: 17px; height: 17px; box-sizing: border-box;
  border-radius: 99px;
  background: var(--fr-ink); border: 3px solid var(--fr-surface);
  transform: translate(-50%, -50%); z-index: 5;
  box-shadow: 0 0 0 1px var(--fr-ink), 0 4px 10px rgba(20, 24, 29, 0.18);
}

/* ── 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; align-self: auto; }
  /* Wrapped, the market zone is on a row of its own and line 2 is no longer
     beneath it — so the pin needs its own reserved room again. */
  .uts-track-stack { padding-bottom: 30px; }
}

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