/* Tracker tab: flutter_app/lib/screens/pipeline/pipeline_screen.dart (:n),
   flutter_app/lib/screens/pipeline/tracker_ad_card.dart (card :n) and
   flutter_app/lib/screens/pipeline/tracker_removed_pill.dart (TRP:n). The Tracker
   has no Scaffold of its own, so the shell gradient shows (plain .k-screen).
   "Tracker" is the UI name; the code says pipeline. */

/* header (:553): padding 20,8,8,4, row min 48; bold headlineSmall + tune */
.k-tab-header { flex: none; display: flex; align-items: center; min-height: 60px; padding: 8px 8px 4px 20px; }
.k-tab-header > .k-tab-title { flex: 1; min-width: 0; font: var(--headline-small) var(--k-font); font-weight: 700; letter-spacing: var(--headline-small-tracking); }
/* the active-filter dot: M3 Badge smallSize 8 in error red, glyph's top-right */
.k-tab-header .k-icon-button > .k-dot-badge { top: 12px; right: 12px; background: var(--error); }

/* tab bar (:605, _CountTab :1811): scrollable, start-aligned, 46 + 2 indicator */
.k-tabs { flex: none; position: relative; display: flex; height: 48px; overflow: hidden; }
.k-tabs.fade-end { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
.k-tabs > div { flex: none; position: relative; display: flex; align-items: baseline; gap: 4px; height: 48px; padding: 0 16px; font: var(--title-small) var(--k-font); line-height: 46px; letter-spacing: var(--title-small-tracking); color: var(--on-surface-variant); white-space: nowrap; }
.k-tabs > div > small { font: var(--label-small) var(--k-font); font-weight: 400; line-height: 46px; letter-spacing: var(--label-small-tracking); color: rgba(110, 119, 135, .5); }
.k-tabs > .on { color: var(--primary); }
.k-tabs > .on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--primary); }

/* active filters (:635): InputChips in a wrap under the tabs; each chip is 36
   visible in a 48 box, so the visible chip starts 16 below the tabs */
.k-filter-chips { flex: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 16px 0; }
.k-filter-chips > .k-chip { margin: 6px 0; }
.k-filter-chips k-avatar { width: 18px; height: 18px; }

/* media-mode selector (:1048): white track, outline 35 %, 34-tall segments */
.k-media-mode { flex: none; display: flex; margin: 10px 16px 8px; padding: 4px; border: 1px solid rgba(133, 115, 115, .35); border-radius: 10px; background: var(--surface-container-highest); }
.k-media-mode > div { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; height: 34px; border-radius: 8px; font: var(--label-medium) var(--k-font); font-weight: 700; letter-spacing: var(--label-medium-tracking); color: var(--on-surface-variant); }
.k-media-mode > .on { background: var(--surface); color: var(--primary); box-shadow: 0 2px 10px rgba(0, 0, 0, .08); }

/* the list (:1536): top padding 4, cards 16/8; clipped 68 + P/2 above the
   bottom (123 dp with the iPhone's 34 inset), so it stops short of the nav bar */
.k-tracker-list { flex: 1; min-height: 0; margin-bottom: calc(68px + (68px + var(--k-safe-bottom) + 8px) / 2); padding-top: 4px; overflow: hidden; }

/* card (card :TrackerAdCard): white, radius 12, no border or shadow */
.k-tracker-card { margin: 8px 16px; overflow: hidden; border-radius: 12px; background: #FFFFFF; }
.k-tracker-card.gone > * { opacity: .55; }
.k-tracker-media { position: relative; height: 172px; overflow: hidden; background: #E6ECF2; }
.k-tracker-media > k-photo { position: absolute; inset: 0; }
.k-tracker-media.floor { background: #FFFFFF; }
/* "Photo 1 / 12" pill, bottom-left, and the dots pill, bottom-right
   (card :TrackerMediaFrame) */
.k-media-counter { position: absolute; left: 10px; bottom: 10px; display: flex; align-items: center; gap: 5px; padding: 6px 9px; border-radius: 8px; background: rgba(0, 0, 0, .68); font-size: 11px; font-weight: 800; color: #FFFFFF; }
.k-media-dots { position: absolute; right: 10px; bottom: 14px; display: flex; align-items: center; gap: 4px; padding: 6px 7px; border-radius: 999px; background: rgba(0, 0, 0, .42); }
.k-media-dots > i { width: 5px; height: 5px; border-radius: 999px; background: rgba(255, 255, 255, .55); }
.k-media-dots > i.on { width: 16px; background: #FFFFFF; }
/* no photo / failed photo */
.k-media-missing { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: rgba(255, 255, 255, .6); font: var(--label-medium) var(--k-font); font-weight: 700; letter-spacing: var(--label-medium-tracking); color: rgba(110, 119, 135, .72); }
.k-media-missing > k-icon { color: rgba(110, 119, 135, .55); }

/* the source on the photo (card :_MediaOverlayChip.source): top-left, in the
   counter's dark pill, 28 tall: the monogram (16), 6, the name. Drags pass
   through it. On a removed card it shares one row with the Removed pill and its
   name shortens before it reaches the pill. */
.k-media-source { position: absolute; top: 10px; left: 10px; display: flex; align-items: center; gap: 6px; padding: 6px 9px 6px 6px; border-radius: 8px; background: rgba(0, 0, 0, .68); font-size: 11px; font-weight: 800; line-height: 16px; letter-spacing: 0; color: #FFFFFF; }

/* body (card :TrackerAdCard): padding 16/14. No listing title: the card names
   the place, and the detail keeps the headline. */
.k-tracker-body { padding: 14px 16px; }
/* the price line (card :_PriceFactsLine): the price, then rooms, size and
   floor right-aligned in columns on one baseline, so each fact sits in the same
   spot on every card. A column is as wide as its longest usual value plus 10
   ("2.5 rooms", "888 m²", "Floor 20"; German's "2,5 Zi." and "20. OG" are
   narrower, .de), measured at run time. The floor reads as Review mode words
   it: "Floor 3" in English, "3. OG" in German. A longer value is set smaller,
   down to 75 %, then cut short, but a floor the site words in full
   ("Dachgeschoss") is set as small as it takes to fit whole; a smaller value
   keeps the line's height and baseline. A missing one keeps its column with a
   dash at 48 % (card :_FactCell). A sale's price per m² follows the price only
   where both fit at full size. Where a four-digit rent and the columns don't
   fit one line (large text on a narrow phone), the columns go under the price,
   start-aligned, and wrap there rather than shrink. */
.k-tracker-line { display: flex; align-items: baseline; }
.k-tracker-line > .k-tracker-price { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-tracker-line > span { flex: none; padding-left: 10px; text-align: right; font: var(--label-large) var(--k-font); font-weight: 600; letter-spacing: var(--label-large-tracking); color: var(--on-surface-variant); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-tracker-line > .rooms { width: 79px; }
.k-tracker-line > .size { width: 58px; }
.k-tracker-line > .floor { width: 67px; }
.k-tracker-line.de > .rooms { width: 54px; }
.k-tracker-line.de > .floor { width: 56px; }
.k-tracker-line > .none { color: rgba(110, 119, 135, .48); }
.k-tracker-price { font: var(--title-medium) var(--k-font); font-weight: 800; letter-spacing: var(--title-medium-tracking); }
.k-tracker-card.gone .k-tracker-price { text-decoration: line-through; }
/* the full address (card :_AddressLine): 6 under the price line, the pin (13
   at 72 %), 5, then street · district · postcode city in bodySmall w500, two
   lines at most. Non-breaking spaces keep each "·" and "10243 Berlin" whole.
   A listing with no address shows its title here instead, without the pin. */
.k-tracker-address { display: flex; align-items: flex-start; gap: 5px; margin-top: 6px; font: var(--body-small) var(--k-font); font-weight: 500; letter-spacing: var(--body-small-tracking); color: var(--on-surface-variant); }
.k-tracker-address > k-icon { margin-top: 1px; color: rgba(110, 119, 135, .72); }
.k-tracker-address > span { min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* the Removed pill (TRP:TrackerRemovedPill): the detail's status panel's, and
   the card's, top-right on the photo, in one row with the source and clear of a
   gone card's fade; a screen reader says it right after the source */
.k-removed-pill { flex: none; padding: 4px 8px; border-radius: 8px; background: #FEE2E2; font: var(--label-small) var(--k-font); font-weight: 700; letter-spacing: var(--label-small-tracking); color: #B91C1C; }
.k-tracker-card.gone { position: relative; }
.k-tracker-card.gone > .k-removed-pill { position: absolute; top: 10px; right: 10px; z-index: 1; opacity: 1; }
/* status block (card :326): attribution, then one status row */
.k-status-block { margin-top: 12px; }
.k-status-row { display: flex; align-items: flex-start; gap: 5px; font: var(--label-small) var(--k-font); letter-spacing: var(--label-small-tracking); color: rgba(110, 119, 135, .62); }
.k-status-row > k-icon { margin-top: 1px; color: rgba(110, 119, 135, .48); }
.k-status-row + .k-status-row { margin-top: 9px; }
/* the response timer: green under 3 days, amber 3-6, red 7+ */
.k-status-row.timer { color: rgba(34, 197, 94, .7); }
.k-status-row.timer > k-icon { color: rgba(34, 197, 94, .6); }
.k-status-row.timer.late { color: rgba(217, 119, 6, .7); }
.k-status-row.timer.late > k-icon { color: rgba(217, 119, 6, .6); }
.k-status-row.timer.overdue { color: rgba(239, 68, 68, .7); }
.k-status-row.timer.overdue > k-icon { color: rgba(239, 68, 68, .6); }
/* viewing block and note snippet */
.k-viewing { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px; background: rgba(26, 29, 46, .04); }
.k-viewing > k-icon { color: rgba(255, 56, 92, .72); }
.k-viewing b { display: block; font: var(--body-medium) var(--k-font); font-weight: 700; letter-spacing: var(--body-medium-tracking); }
.k-viewing span { display: block; margin-top: 1px; font: var(--label-small) var(--k-font); letter-spacing: var(--label-small-tracking); color: rgba(110, 119, 135, .62); }
.k-note-snippet { display: flex; gap: 6px; margin-top: 9px; padding: 8px; border-radius: 8px; background: #FFFBF0; font: var(--label-small) var(--k-font); letter-spacing: var(--label-small-tracking); color: rgba(26, 29, 46, .65); }
.k-note-snippet > k-icon { color: rgba(26, 29, 46, .45); }
/* action chips (card :_ActionChip): primary 28 tall, bordered 30 tall */
.k-card-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin-top: 12px; }
.k-action-chip { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border: 1px solid #E0E0E0; border-radius: 8px; background: #FFFFFF; font: var(--label-small) var(--k-font); letter-spacing: var(--label-small-tracking); color: var(--on-surface-variant); }
.k-action-chip.primary { border: 0; background: var(--primary); font-weight: 700; color: var(--on-primary); }

/* empty tab (:1623): centred, inbox 64 at 40 % */
.k-tracker-empty { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; margin-bottom: calc(68px + (68px + var(--k-safe-bottom) + 8px) / 2); padding: 32px; text-align: center; color: var(--on-surface-variant); }
.k-tracker-empty > k-icon { color: rgba(110, 119, 135, .4); }
.k-tracker-empty > .k-filled-button { margin: 0; }

/* filter sheet (:765-1046): title, section headers, 56-tall rows, one button */
.k-sheet-title { padding: 4px 20px; font: var(--title-large) var(--k-font); letter-spacing: var(--title-large-tracking); }
.k-sheet-section { display: flex; align-items: center; justify-content: space-between; min-height: 40px; padding: 4px 8px 0 20px; font: var(--title-small) var(--k-font); letter-spacing: var(--title-small-tracking); color: var(--on-surface-variant); }
.k-sheet-section > .k-text-button { margin: 0; }
.k-check-row { display: flex; align-items: center; gap: 16px; min-height: 56px; padding: 0 24px 0 16px; font: var(--body-large) var(--k-font); letter-spacing: var(--body-large-tracking); }
.k-check-row > .k-row-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-check-row > small { font: var(--body-small) var(--k-font); letter-spacing: var(--body-small-tracking); color: var(--on-surface-variant); }
.k-check-row > .k-checkbox { margin: 0 11px; }
.k-radio-row { display: flex; align-items: center; gap: 16px; min-height: 56px; padding: 0 24px 0 16px; font: var(--body-large) var(--k-font); letter-spacing: var(--body-large-tracking); }
.k-radio-row > .k-row-label { display: inline-flex; align-items: center; gap: 6px; }
.k-radio-row k-icon { color: var(--on-surface-variant); }
.k-sheet-footer { padding: 12px 16px 8px; }
.k-sheet-footer > .k-filled-button { margin: 0; }

/* ---------- Tracker detail ----------
   flutter_app/lib/screens/pipeline/tracker_detail_screen.dart (TDS:n), class
   TDS:TrackerDetailScreen: pushed full screen from a Tracker card, a Recently
   gone card or the Autopilot activity list, no nav bar, the Scaffold flat on
   #FCF7F9 (.k-screen.k-flat). Under the app bar a Column (TDS:754) stacks a
   2 dp progress bar (while the detail loads or a removal first syncs), the
   banners and the workspace; on the Card view the workspace is the status
   panel over the listing card (TDS:973; ListingCardView: .k-review-body and
   its parts in review.css). The action bar is the Scaffold's
   bottomNavigationBar. */

/* app bar (TDS:727): back, then the Card / Webpage SegmentedButton across the
   rest (titleSpacing 0 and 4 each side; the button draws 4 inside its box, so
   64 from the left and 56 from the right in a device capture), no check on
   the selected segment. The 48 action slot shows Reload only on the webpage.
   Webpage is disabled while the listing is removed or an apply runs. */
.k-app-bar.k-detail-bar { padding-right: 56px; }
.k-detail-bar > .k-segmented { flex: 1; min-width: 0; display: grid; margin-left: 12px; }
.k-detail-bar > .k-segmented > .on { padding-right: 12px; }

/* the removal banner (TDS:858): only when this device found the listing gone
   and couldn't tell the server. #FEE2E2 across the screen, padding 16,12,8,12,
   link_off_rounded in #B91C1C, 10, then "Listing removed" (titleSmall w700)
   and why it isn't synced (bodySmall) in #991B1B, 2 apart; Retry right after
   the text, a spinner while it retries. At most a third of the screen tall;
   larger text scrolls in it. A removal the server knows is only the pill. */
.k-detail-banner { flex: none; display: flex; align-items: flex-start; padding: 12px 8px 12px 16px; background: #FEE2E2; }
.k-detail-banner > k-icon { margin-right: 10px; color: #B91C1C; }
.k-detail-banner > div { flex: 1; min-width: 0; color: #991B1B; }
.k-detail-banner > div > b { display: block; font: var(--title-small) var(--k-font); font-weight: 700; letter-spacing: var(--title-small-tracking); }
.k-detail-banner > div > span { display: block; margin-top: 2px; font: var(--body-small) var(--k-font); letter-spacing: var(--body-small-tracking); }

/* status panel (TDS:1022): white, padding 18,12, where the listing stands. The
   stage icon (24, in the stage's colour from TDS:2149), 12, then 3 apart: the
   stage, with the wait while a reply can still come (titleSmall w700), and
   the Removed pill at the end of its line once the listing is gone
   (.with-pill: a Row of the stage, 8, the pill, centred, so the line is the
   pill's 24); the viewing (bodySmall w600 in primary); who applied and when
   (a 14 icon, 5, bodySmall). No notes: they open from the Notes button. */
.k-stage-panel { flex: none; display: flex; align-items: flex-start; gap: 12px; padding: 12px 18px; background: var(--surface); }
.k-stage-panel > k-icon { color: var(--on-surface-variant); }
.k-stage-panel > .k-stage-text { flex: 1; min-width: 0; }
.k-stage-title { font: var(--title-small) var(--k-font); font-weight: 700; letter-spacing: var(--title-small-tracking); }
.k-stage-title.with-pill { display: flex; align-items: center; gap: 8px; }
.k-stage-title.with-pill > span:first-child { flex: 1; min-width: 0; }
.k-stage-line { display: flex; align-items: center; gap: 5px; margin-top: 3px; font: var(--body-small) var(--k-font); letter-spacing: var(--body-small-tracking); color: var(--on-surface-variant); }
.k-stage-line.viewing { font-weight: 600; color: var(--primary); }
/* the stage icon's colour; skipped and not reviewed stay onSurfaceVariant */
.k-stage-panel > k-icon.applied { color: #0369A1; }
.k-stage-panel > k-icon.viewing { color: #7C3AED; }
.k-stage-panel > k-icon.accepted { color: #15803D; }
.k-stage-panel > k-icon.rejected { color: #B91C1C; }
.k-stage-panel > k-icon.liked { color: #BE123C; }
.k-stage-panel > k-icon.unconfirmed { color: var(--pending-foreground); }

/* action bar (TDS:779, TDS:1905): white with a line in theme.dividerColor on
   top, which M3 resolves to outline (not the #EEEEEE Divider); padding 12,8
   and the inset below. The primary action, when there is one, takes the
   width, 6, then 48 icon buttons: Move to Skipped, Notes, Share, as the
   listing allows. It is a FilledButton (Update status, Apply now, Save to
   Liked…) or, on a liked listing Easy Apply doesn't support, an outlined
   View original; a removed Liked listing has none, and a Spacer pushes the
   icons to the end. While nothing can change, the FilledButton greys out
   (.disabled), and so does Notes (M3's onSurface at 38 %) unless there is a
   saved note, which it then opens read-only. */
.k-detail-actions { flex: none; display: flex; align-items: center; padding: 8px 12px calc(8px + var(--k-safe-bottom)); background: var(--surface); border-top: 1px solid var(--outline); }
.k-detail-actions > .k-filled-button { flex: 1; min-width: 0; margin: 4px 6px 4px 0; }
.k-detail-actions > .k-outlined-button { flex: 1; min-width: 0; margin-right: 6px; }
.k-detail-actions > .k-icon-button:first-child { margin-left: auto; }
.k-detail-actions > .k-icon-button.disabled { color: rgba(26, 29, 46, .38); }