/* Engines 07-16 of the engine room (docs/design/website-motion.md, revision 7e). Owner, 2026-10-05: 01-06 are great, "after Copilot
   it just looks like ass". Each of the ten is now a product screen at the console's size, as dense as 01-06 and in the same
   charcoals, hairlines and 2 px corners; colour only where the data means it: warm white the live or selected thing, red distress,
   orange upside or a warning, green verified. Each replays a short script when selected (landing.js LOOPS); start states apply only
   under body.motion, so reduced motion and no script show the finished screen. Layouts follow the screen's own width (container
   queries): the console's narrower sizes drop tertiary parts, phones stack and drop columns. Loaded after landing.css. */
.scr { box-sizing: border-box; height: 100%; margin: 0; display: flex; flex-direction: column; overflow: hidden; container-type: inline-size; }
.scr > .ui-head { flex: none; white-space: nowrap; }
.scr > .ui-head .ui-muted { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.scr > .ui-head .chips { flex: none; display: flex; gap: 4px; }
.scr > .ui-filters { flex: none; min-height: 0; flex-wrap: nowrap; overflow: hidden; }
.scr-k { font: 500 10px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--app-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chips .c-green { color: var(--green-t); border-color: rgb(50 164 103 / 45%); background: rgb(50 164 103 / 12%); }
.chips .c-warm { color: var(--warm); border-color: rgb(244 233 214 / 40%); background: rgb(244 233 214 / 7%); }
.scr svg { overflow: visible; }

/* the two maps: the flood map's dark base */
.m-ground { fill: #1e2329; }
.m-st { fill: none; stroke: #2a3038; stroke-width: 1; }
.m-water { fill: #1f3245; stroke: #29425a; stroke-width: .8; }
.m-creek { fill: none; stroke: #1f3245; stroke-width: 3; }
.m-art-c { fill: none; stroke: #1a1e23; stroke-width: 4.6; }
.m-art { fill: none; stroke: #434b56; stroke-width: 2.4; }
.m-exp-c { fill: none; stroke: #1a1e23; stroke-width: 7.4; }
.m-exp { fill: none; stroke: #59626f; stroke-width: 4.4; }
.m-lab { font: 500 8.5px var(--sans); letter-spacing: .03em; fill: var(--tx-4); paint-order: stroke; stroke: #1e2329; stroke-width: 3px; }
.m-ring { fill: none; stroke: #fff; stroke-opacity: .3; stroke-dasharray: 3 4; }
.m-ring-t { font: 600 9px var(--sans); fill: var(--tx-2); paint-order: stroke; stroke: #1e2329; stroke-width: 3px; }
.m-subj rect { fill: var(--warm); stroke: #1e2329; stroke-width: 2; }
.m-subj text { font: 600 9.5px var(--sans); fill: var(--tx-1); paint-order: stroke; stroke: #1e2329; stroke-width: 3.5px; }
/* charts: the plot is a stretched svg (paths, non-scaling strokes) under round points and labels placed in percent */
.cm-chart { flex: 1; min-height: 0; display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 20px; column-gap: 8px; }
.cm-y { grid-row: 1; display: flex; flex-direction: column; justify-content: space-between; margin: -6px 0; font: 500 10px/12px var(--mono); color: var(--app-muted); text-align: right; }
.cm-chart > svg { grid-column: 2; grid-row: 1; display: block; width: 100%; height: 100%; }
.cm-x { grid-column: 2; grid-row: 2; display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; align-items: end; font: 500 10px var(--mono); color: var(--app-muted); text-align: center; white-space: nowrap; }
.scr .g { stroke: var(--line); vector-effect: non-scaling-stroke; }
.cm-chart > svg text { paint-order: stroke; stroke: var(--card); stroke-width: 4px; stroke-linejoin: round; }  /* labels read over the lines */

/* 07 sales and comps: the comp map, the table and the price per unit strip */
.cmp-body { flex: 1; min-height: 0; overflow: hidden; display: grid; grid-template-columns: minmax(0, 36%) minmax(0, 1fr); border-bottom: 1px solid var(--app-line); }
.cmp-mapbox { min-height: 0; overflow: hidden; border-right: 1px solid var(--app-line); }
.cmp-map { display: block; width: 100%; height: 100%; }
.cmp-ln { fill: none; stroke: var(--cool); stroke-opacity: .5; stroke-width: 1; stroke-dasharray: 1; transition: stroke-dashoffset .5s var(--out); transition-delay: calc(var(--i, 0) * .55s + .75s); }
.cmp-pt { transform-box: fill-box; transform-origin: center; transition: transform .45s var(--out), opacity .2s; transition-delay: calc(var(--i, 0) * .55s + .5s); }
.cmp-pt circle { fill: var(--card-2); stroke: var(--cool); stroke-width: 1.4; }
.cmp-pt text { font: 600 8.5px var(--mono); fill: var(--tx-1); text-anchor: middle; }
.cmp-tbl { min-width: 0; overflow: hidden; font-size: 12.5px; }
.cr { display: grid; grid-template-columns: 20px minmax(0, 2fr) minmax(0, 1fr) minmax(0, .5fr) minmax(0, .62fr) minmax(0, .62fr) minmax(0, .62fr); gap: 10px; align-items: center;
  height: 41px; padding: 0 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.cr > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cr b { display: block; overflow: hidden; text-overflow: ellipsis; font-weight: 500; color: var(--tx-1); }
.cr small { display: block; overflow: hidden; text-overflow: ellipsis; font-size: 11px; color: var(--app-muted); }
.cr > span:nth-child(n+3) { font: 500 12px var(--mono); font-variant-numeric: tabular-nums; color: var(--app-ink-2); }
.cr > span:nth-child(n+4) { text-align: right; }
.cr > span:nth-child(6) { color: var(--tx-1); }
.cr.ch { height: 30px; background: var(--card-2); }
.cr.ch > span { font: 500 10px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--app-muted); }
.cn { display: grid; place-items: center; width: 18px; height: 18px; box-sizing: border-box; border-radius: 50%; border: 1px solid var(--cool); font: 600 9.5px var(--mono); color: var(--tx-1); }
.cr.cm { height: 40px; border-bottom: 0; background: rgb(244 233 214 / 5%); box-shadow: inset 2px 0 0 var(--warm); }
.cr.cm b, .cr.cm > span:nth-child(6) { color: var(--warm); }
.cmp-rows .cr { transition: opacity .4s var(--out), transform .4s var(--out); transition-delay: calc(var(--i, 0) * .55s + .5s); }
.cmp-strip { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) 210px; }
.cmp-pp { display: grid; gap: 4px; min-width: 0; padding: 12px 24px 6px 18px; }
.cmp-axis { display: block; width: 100%; height: 58px; }
.cmp-axis .ax, .cmp-axis .tk { stroke: var(--line-3); }
.cmp-axis .tk-t { font: 500 10px var(--mono); fill: var(--tx-4); text-anchor: middle; }
.cmp-axis .iqr { fill: rgb(204 217 232 / 8%); stroke: rgb(204 217 232 / 22%); }
.pp { transition: opacity .3s; transition-delay: calc(var(--i, 0) * .55s + .6s); }
.pp circle { fill: var(--card-2); stroke: var(--cool); stroke-width: 1.4; }
.pp text { font: 600 9px var(--mono); fill: var(--tx-2); text-anchor: middle; }
.cmp-axis .med { stroke: var(--warm); stroke-width: 1.6; transform-box: fill-box; transform-origin: bottom; transition: transform .6s var(--out) 3.9s; }
.med-t { font: 600 11px var(--mono); fill: var(--warm); transition: opacity .4s 4.3s; }
.cmp-val { display: grid; align-content: center; gap: 2px; padding: 10px 16px; border-left: 1px solid var(--app-line); transition: opacity .5s 4.5s; }
.cmp-val b { font: 400 30px/1.05 var(--sans); letter-spacing: -0.03em; color: var(--warm); font-variant-numeric: tabular-nums; }
.cmp-val small { font-size: 11.5px; color: var(--app-muted); }
.cmp-ph { display: none; font-style: normal; }

/* 08 building permits: the parcel's and the block's permits on one 24-month timeline, and the mile around it by type */
.pm-key { flex: none; display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 0 16px 10px; border-bottom: 1px solid var(--app-line); font: 500 10px var(--sans); letter-spacing: .06em;
  text-transform: uppercase; color: var(--app-muted); white-space: nowrap; }
.pm-key span::before { content: ""; display: inline-block; width: 10px; height: 8px; margin-right: 6px; }
.k-self::before { background: var(--cool); } .k-blk::before { background: var(--tx-4); } .k-new::before { background: var(--orange); }
.pm-key .k-ap { margin-left: auto; } .k-ap::before { height: 0 !important; border-top: 1px dashed var(--tx-2); vertical-align: 3px; }
.k-is::before { height: 6px !important; background: var(--tx-2); } .k-fin::before { width: 8px !important; border-radius: 50%; background: var(--green); }
.pm-body { flex: 1; min-height: 0; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) 230px; }
.pm-tl { display: flex; flex-direction: column; min-width: 0; border-right: 1px solid var(--app-line); }
.pm-head, .pm-row { display: grid; grid-template-columns: 210px minmax(0, 1fr) 70px; gap: 12px; align-items: center; padding: 0 14px; }
.pm-head { flex: none; height: 30px; background: var(--card-2); border-bottom: 1px solid var(--app-line); font: 500 10px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--app-muted); }
.pm-head > span:last-child { text-align: right; }
.pm-axis { display: block; width: 100%; height: 18px; }
.pm-axis text { font: 500 10px var(--mono); letter-spacing: 0; text-transform: none; fill: var(--app-muted); text-anchor: middle; }
.pm-axis .now-t { font-family: var(--sans); font-weight: 600; font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; fill: var(--warm); text-anchor: end; }
.pm-rows { position: relative; }
.pm-grid { position: absolute; top: 0; left: 236px; width: calc(100% - 332px); height: 100%; }
.pm-grid line { stroke: var(--line); } .pm-grid .now { stroke: var(--warm); stroke-opacity: .65; stroke-dasharray: 2 3; }
.pm-row { position: relative; height: 41px; border-bottom: 1px solid var(--line); }
.pm-row p { display: grid; min-width: 0; }
.pm-row p b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; font-size: 12.5px; color: var(--tx-1); }
.pm-row p small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--app-muted); }
.pm-row.self { box-shadow: inset 2px 0 0 var(--cool); }
.pm-bar { display: block; width: 100%; height: 32px; transition: clip-path 1.1s var(--out); transition-delay: calc(var(--i, 0) * .22s + .35s); clip-path: inset(-4px -8px -4px -8px); }
.pm-bar .ap { stroke: var(--tx-3); stroke-dasharray: 3 3; }
.pm-bar .ap-d { fill: var(--tx-3); }
.pm-bar .is { fill: var(--tx-4); } .self .pm-bar .is { fill: var(--cool); } .new .pm-bar .is { fill: var(--orange); }
.pm-bar .fin { fill: var(--green); stroke: var(--card); stroke-width: 1.5; }
.pm-row em { font: 500 11px var(--sans); font-style: normal; text-align: right; color: var(--tx-2); white-space: nowrap; }
.pm-row em.ok { color: var(--green-t); } .pm-row em.warn { color: var(--orange-t); }
.pm-near { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 12px 16px; }
.pm-total { font-size: 12px; color: var(--app-muted); }
.pm-total b { margin-right: 6px; font: 400 30px/1 var(--sans); letter-spacing: -0.03em; color: var(--tx-1); font-variant-numeric: tabular-nums; }
.pm-near ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pm-near li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; font-size: 12px; color: var(--app-ink-2); }
.pm-near li b { grid-area: 1 / 2; font: 500 12px var(--mono); color: var(--tx-1); }
.pm-near li svg { grid-column: 1 / -1; display: block; width: 100%; height: 14px; }
.pm-near li rect { fill: var(--tx-3); transform-box: fill-box; transform-origin: left; transition: transform .8s var(--out); transition-delay: calc(var(--i, 0) * .12s + 1.1s); }
.pm-near li.warn rect { fill: var(--orange); } .pm-near li.warn b { color: var(--orange-t); }
.pm-supply { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: auto 0 0; padding-top: 10px; border-top: 1px solid var(--line); }
.pm-supply dt { font: 500 9.5px/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--app-muted); }
.pm-supply dd { margin: 4px 0 0; font: 400 20px/1 var(--sans); letter-spacing: -0.02em; color: var(--orange-t); }
.pm-sig { flex: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px 12px; border-top: 1px solid var(--app-line); transition: opacity .5s 2.4s; }

/* 09 foreclosure and auctions: the docket on a timeline with today and the countdown, and the county's month of sales */
.fc-top { flex: none; display: grid; grid-template-columns: 236px minmax(0, 1fr); border-bottom: 1px solid var(--app-line); }
.fc-clock { display: grid; align-content: center; gap: 4px; padding: 10px 16px; border-right: 1px solid var(--app-line); background: rgb(205 66 70 / 7%); }
.fc-cd { font: 400 25px/1.1 var(--mono); letter-spacing: -0.03em; color: var(--red-t); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fc-clock small { font-size: 11px; color: var(--app-ink-2); }
.fc-facts { margin: 0; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, .9fr) minmax(0, 1.5fr) minmax(0, 1fr); }
.fc-facts div { min-width: 0; padding: 10px 14px; border-right: 1px solid var(--line); }
.fc-facts div:last-child { border-right: 0; }
.fc-facts dt { font: 500 9.5px/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--app-muted); }
.fc-facts dd { margin: 5px 0 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 14px var(--mono); color: var(--tx-1); }
.fc-facts div:nth-child(3) dd, .fc-facts div:nth-child(4) dd { font: 500 13.5px var(--sans); }
.fc-facts small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--app-muted); }
.fc-facts small.warm { color: var(--warm); }
.fc-tl { flex: none; padding: 10px 24px 4px 18px; border-bottom: 1px solid var(--app-line); }
.fc-svg { display: block; width: 100%; height: 110px; }
.fc-svg .base { stroke: var(--line-2); stroke-width: 2; }
.fc-svg .done { stroke: var(--tx-3); stroke-width: 2; }
.fc-svg .left { stroke: var(--red); stroke-width: 2; stroke-dasharray: 4 3; }
.fc-svg .mt { stroke: var(--line-3); }
.fc-svg .mo { font: 500 10px var(--mono); fill: var(--tx-4); text-anchor: middle; }
.fc-ev { transition: opacity .35s var(--out); transition-delay: calc(var(--i, 0) * .45s + .9s); }
.fc-ev line { stroke: var(--line-3); }
.fc-ev circle { fill: var(--card); stroke: var(--tx-2); stroke-width: 1.6; }
.fc-ev text { font: 500 11.5px var(--sans); fill: var(--tx-1); text-anchor: middle; }
.fc-ev .sub { font: 500 10.5px var(--mono); fill: var(--app-muted); }
.fc-ev.end text { text-anchor: end; }
.fc-ev.auc circle { fill: var(--red); stroke: var(--red-t); }
.fc-ev.auc text { fill: var(--red-t); } .fc-ev.auc .sub { fill: var(--red-t); }
.fc-now { transition: opacity .4s 2.5s; }
.fc-now line { stroke: var(--warm); stroke-dasharray: 2 2; }
.fc-now text { font: 600 9.5px var(--sans); letter-spacing: .08em; text-transform: uppercase; fill: var(--warm); text-anchor: middle; }
.fc-pulse { fill: none; stroke: var(--red-t); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.fc-svg .done, .fc-svg .left { transition: clip-path 2s var(--out) .3s; clip-path: inset(-4px 0 -4px 0); }
.fc-cal { flex: none; display: grid; gap: 7px; padding: 10px 18px 12px; border-bottom: 1px solid var(--app-line); }
.fc-days { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(31, minmax(0, 1fr)); gap: 3px; }
.fc-d { display: grid; grid-template-rows: 11px 15px 24px 13px; justify-items: center; align-items: end; padding: 4px 0 3px; border-radius: 2px; background: var(--card-2);
  font-variant-numeric: tabular-nums; transition: opacity .3s; transition-delay: calc(var(--i, 0) * 35ms + 1.6s); }
.fc-d small { font: 500 8.5px var(--sans); color: var(--tx-4); }
.fc-d b { font: 500 11px var(--mono); color: var(--tx-2); }
.fc-d svg { display: block; width: 8px; height: 24px; }
.fc-d rect { fill: var(--tx-3); }
.fc-d em { font: 600 9.5px var(--mono); font-style: normal; color: var(--tx-2); }
.fc-d.past b, .fc-d.past em, .fc-d.past small { opacity: .45; }
.fc-d.today { box-shadow: inset 0 0 0 1px var(--warm); } .fc-d.today b { color: var(--warm); }
.fc-d.auc { background: rgb(205 66 70 / 16%); box-shadow: inset 0 0 0 1px rgb(205 66 70 / 65%); }
.fc-d.auc rect { fill: var(--red-t); } .fc-d.auc b, .fc-d.auc em { color: var(--red-t); }
.fc-next { flex: 1; min-height: 0; display: grid; align-content: start; }
.fn { display: grid; grid-template-columns: 56px minmax(0, 1.25fr) minmax(0, 1.1fr) minmax(0, 1.05fr) minmax(0, 1.1fr); gap: 10px; align-items: center; height: 33px; padding: 0 16px;
  border-bottom: 1px solid var(--line); font-size: 12px; color: var(--app-ink-2); white-space: nowrap; transition: opacity .4s; transition-delay: calc(var(--i, 0) * .15s + 2.6s); }
.fn > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.fn time { font: 500 11.5px var(--mono); color: var(--tx-2); }
.fn b { font-weight: 500; color: var(--tx-1); }
.fn span:nth-of-type(2) { font: 500 11.5px var(--mono); }
.fn.this { background: rgb(205 66 70 / 7%); box-shadow: inset 2px 0 0 var(--red); }
.fn.this time, .fn.this span:nth-of-type(2) { color: var(--red-t); }

/* 10 liens and UCC: the stack in the order a sale pays it, beside the filings */
.lien-body { flex: 1; min-height: 0; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); }
.lien-stack { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 12px 16px; border-right: 1px solid var(--app-line); }
.ls-axis, .ls-row { display: grid; grid-template-columns: 20px 168px minmax(0, 1fr); gap: 10px; align-items: center; }
.ls-axis { padding-right: 46px; }
.ls-axis svg { display: block; width: 100%; height: 16px; }
.ls-axis text { font: 500 10px var(--mono); fill: var(--app-muted); text-anchor: middle; }
.ls-axis text:first-child { text-anchor: start; }
.ls-axis .val-t { fill: var(--warm); text-anchor: end; }
.ls-axis .refi-t { fill: var(--cool); }
.ls-grid { position: relative; }
.ls-lines { position: absolute; top: 0; left: 208px; width: calc(100% - 254px); height: 100%; }
.ls-lines line { stroke: var(--line); }
.ls-lines .refi { stroke: var(--cool); stroke-opacity: .75; stroke-dasharray: 3 3; }
.ls-lines .val { stroke: var(--warm); stroke-opacity: .75; }
.ls-rows { position: relative; display: grid; padding-right: 46px; }
.ls-row { height: 52px; border-bottom: 1px solid var(--line); }
.ls-row:last-child { border-bottom: 0; }
.ls-n { display: grid; place-items: center; width: 20px; height: 20px; box-sizing: border-box; border-radius: 2px; background: var(--card-2); border: 1px solid var(--line-3);
  font: 600 10.5px var(--mono); color: var(--tx-1); }
.ls-row p { display: grid; min-width: 0; }
.ls-row p b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; font-size: 12.5px; color: var(--tx-1); }
.ls-row p small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--app-muted); }
.ls-bar { display: block; width: 100%; height: 30px; }
.ls-bar rect { fill: #5f6b7c; transform-box: fill-box; transform-origin: left; transition: transform .7s var(--out); transition-delay: calc(var(--i, 0) * .6s + .5s); }
.ls-row.red rect { fill: var(--red); } .ls-row.amber rect { fill: var(--orange); }
.ls-row.red .ls-n { border-color: rgb(205 66 70 / 70%); color: var(--red-t); }
.ls-bar .amt { font: 500 11.5px var(--mono); fill: var(--tx-1); transition: opacity .3s; transition-delay: calc(var(--i, 0) * .6s + 1s); }
.ls-row.red .amt { fill: var(--red-t); } .ls-row.amber .amt { fill: var(--orange-t); }
.ls-row.eq rect { fill: rgb(50 164 103 / 10%); stroke: var(--green-t); stroke-dasharray: 3 3; }
.ls-row.eq .amt { fill: var(--green-t); }
.ls-bar .when { font: 500 10px var(--mono); fill: var(--app-muted); transition: opacity .3s; transition-delay: calc(var(--i, 0) * .6s + 1.1s); }
.ls-row.eq p b { color: var(--green-t); }
.ls-foot { margin-top: 2px; } .ls-foot svg { height: 32px; }
.ls-sum { margin: auto 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line-2); border-radius: 2px; }
.ls-sum div { min-width: 0; padding: 8px 11px; border-right: 1px solid var(--line); } .ls-sum div:last-child { border-right: 0; }
.ls-sum dt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 9.5px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--app-muted); }
.ls-sum dd { margin: 4px 0 1px; font: 400 20px/1.05 var(--sans); letter-spacing: -0.02em; color: var(--tx-1); font-variant-numeric: tabular-nums; }
.ls-sum small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--app-muted); }
.ls-sum .red dd, .ls-sum .red small { color: var(--red-t); }
.lien-files { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding-top: 12px; }
.lien-files > .scr-k { padding: 0 16px; }
.lf { display: grid; grid-template-columns: minmax(0, 1fr) auto 66px; gap: 10px; align-items: center; padding: 6px 16px; border-bottom: 1px solid var(--line);
  transition: opacity .4s var(--out), transform .4s var(--out); transition-delay: calc(var(--i, 0) * .14s + .4s); }
.lf > div { display: grid; min-width: 0; }
.lf p { display: flex; align-items: baseline; gap: 8px; min-width: 0; white-space: nowrap; }
.lf b { overflow: hidden; text-overflow: ellipsis; font-weight: 500; font-size: 12.5px; color: var(--tx-1); }
.lf p > span { font: 500 11.5px var(--mono); color: var(--app-ink-2); }
.lf small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--app-muted); }
.lf .lf-r { text-align: right; }
.lf time { font: 500 11.5px var(--mono); color: var(--app-ink-2); white-space: nowrap; }
.lf .chips { justify-content: flex-end; }

/* 11 CMBS surveillance: one securitized loan's card */
.cm-kpis { flex: none; margin: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-bottom: 1px solid var(--app-line); }
.cm-kpis div { min-width: 0; padding: 9px 14px; border-right: 1px solid var(--line); }
.cm-kpis div:last-child { border-right: 0; }
.cm-kpis dt { font: 500 9.5px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--app-muted); }
.cm-kpis dd { margin: 4px 0 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 19px/1.1 var(--sans); letter-spacing: -0.02em; color: var(--tx-1); font-variant-numeric: tabular-nums; }
.cm-kpis small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--app-muted); }
.cm-kpis .bad dd, .cm-kpis .bad small { color: var(--red-t); }
.cm-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 286px; grid-template-rows: minmax(0, 1fr); }
.cm-charts { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 12px 22px 8px 16px; border-right: 1px solid var(--app-line); }
.cm-chart.occ { flex: .42; grid-template-rows: minmax(0, 1fr); }
.cm-chart.occ .cm-x { display: none; }
.cm-plot .below { fill: rgb(205 66 70 / 10%); }
.cm-plot .thr { stroke: var(--red); stroke-opacity: .75; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.cm-plot .ln, .cm-occ-plot .ln { fill: none; stroke: var(--cool); stroke-width: 1.8; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.cm-plot .ln.red { stroke: var(--red-t); }
.cm-occ-plot .ln.o { stroke: var(--tx-2); stroke-width: 1.5; }
.cm-occ-plot .thr-o { stroke: var(--orange); stroke-opacity: .8; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.cm-draw { transition: clip-path 2.4s linear .3s; clip-path: inset(-6px -6px -6px -6px); }
.cm-pts circle { fill: var(--card); stroke: var(--cool); stroke-width: 1.4; transition: opacity .2s; transition-delay: calc(var(--i, 0) * .3s + .35s); }
.cm-pts circle:nth-child(n+7) { stroke: var(--red-t); }
.cm-cross { fill: var(--red); stroke: var(--card); stroke-width: 1.5; transition: opacity .3s 2.1s; }
.cm-pulse { fill: none; stroke: var(--red-t); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.cm-chart text { font: 500 10px var(--sans); }
.cm-plot .thr-t, .cm-occ-plot .thr-t { fill: var(--red-t); }
.cm-occ-plot .thr-t { fill: var(--orange-t); }
.cm-plot .end-t, .cm-occ-plot .end-t { font: 600 12px var(--mono); fill: var(--red-t); text-anchor: end; transition: opacity .3s 2.7s; }
.cm-occ-plot .end-t { font-size: 11px; fill: var(--tx-1); }
.cm-side { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 12px 16px; }
.cm-codes { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 6px; }
.cm-codes li { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 9px; align-items: center; transition: opacity .35s var(--out), transform .35s var(--out);
  transition-delay: calc(var(--i, 0) * .18s + 2.4s); }
.cm-codes code { grid-row: 1 / 3; padding: 3px 0; border-radius: 2px; border: 1px solid rgb(205 66 70 / 50%); background: rgb(205 66 70 / 12%); text-align: center; font: 600 10.5px var(--mono); color: var(--red-t); }
.cm-codes b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; font-size: 12.5px; color: var(--tx-1); }
.cm-codes small { font-size: 11px; color: var(--app-muted); }
.cm-ev { list-style: none; margin: 0; padding: 0; display: grid; }
.cm-ev li { position: relative; display: grid; grid-template-columns: 54px minmax(0, 1fr); column-gap: 8px; margin-left: 4px; padding: 3px 0 7px 13px; border-left: 1px solid var(--line-2);
  transition: opacity .35s var(--out); transition-delay: calc(var(--i, 0) * .16s + 3s); }
.cm-ev li:last-child { border-left-color: transparent; }
.cm-ev li::before { content: ""; position: absolute; left: -4px; top: 6px; width: 7px; height: 7px; box-sizing: border-box; border-radius: 50%; background: var(--card); border: 1px solid var(--tx-3); }
.cm-ev li.bad::before { background: var(--red); border-color: var(--red-t); }
.cm-ev time { font: 500 11px var(--mono); color: var(--app-muted); white-space: nowrap; }
.cm-ev b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; font-size: 12.5px; color: var(--tx-1); }
.cm-ev li.bad b { color: var(--red-t); }
.cm-ev small { grid-column: 2; font-size: 11px; color: var(--app-muted); }

/* 12 tax and assessment: just value against the capped assessment, the bill now and after a sale, the payment history */
.tax-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 290px; grid-template-rows: minmax(0, 1fr); }
.tax-chart { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 12px 22px 8px 16px; border-right: 1px solid var(--app-line); }
.tax-chart .scr-k span { margin-left: 12px; }
.k-jv::before, .k-av::before { content: ""; display: inline-block; width: 14px; margin-right: 6px; vertical-align: 3px; border-top: 1.6px dashed var(--tx-2); }
.k-av::before { border-top: 2px solid var(--cool); }
.tax-plot .gap { fill: url(#tax-hatch); }
#tax-hatch .h { stroke: var(--line-3); stroke-width: 1.4; }
.tax-plot path.jv { fill: none; stroke: var(--tx-2); stroke-width: 1.6; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.tax-plot path.av { fill: none; stroke: var(--cool); stroke-width: 2; vector-effect: non-scaling-stroke; }
.tax-plot .jvx { fill: none; stroke: var(--tx-3); stroke-width: 1.4; stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; }
.tax-plot .jump { fill: none; stroke: var(--orange-t); stroke-width: 2; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; transition: opacity .5s 2.4s; }
.tax-draw { transition: clip-path 2s var(--out) .3s; clip-path: inset(-6px -6px -6px -6px); }
.tax-pts circle { fill: var(--card); stroke-width: 1.4; transition: opacity .2s; }
.tax-pts .jv { stroke: var(--tx-2); } .tax-pts .av { stroke: var(--cool); }
.tax-plot .reset { fill: var(--orange); stroke: var(--orange-t); stroke-width: 1.4; transition: opacity .3s 2.8s; }
.tax-plot .lab { font: 500 11px var(--sans); fill: var(--tx-2); text-anchor: end; transition: opacity .4s 2.2s; }
.tax-plot .av-t { fill: var(--cool); }
.tax-plot .gap-t { font-size: 10.5px; fill: var(--tx-3); text-anchor: middle; paint-order: stroke; stroke: var(--card); stroke-width: 4px; }
.tax-plot .jump-t { font-weight: 600; fill: var(--orange-t); transition-delay: 2.9s; }
.tax-bills { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 12px 16px; }
.tb { display: grid; gap: 2px; padding: 8px 11px; border: 1px solid var(--line-2); border-radius: 2px; background: var(--card-2); }
.tb span { font: 500 10px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--app-muted); }
.tb b { font: 400 22px/1.15 var(--sans); letter-spacing: -0.02em; color: var(--tx-1); font-variant-numeric: tabular-nums; }
.tb small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--app-muted); }
.tb.bad { border-color: rgb(205 66 70 / 45%); background: rgb(205 66 70 / 8%); } .tb.bad b, .tb.bad small { color: var(--red-t); }
.tb.up { border-color: rgb(200 118 25 / 50%); background: rgb(200 118 25 / 9%); transition: opacity .5s 1.9s; } .tb.up b, .tb.up small { color: var(--orange-t); }
.tax-kv { margin: auto 0 0; display: grid; gap: 4px; }
.tax-kv div { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 8px; font-size: 11.5px; }
.tax-kv dt { color: var(--app-muted); } .tax-kv dd { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 11.5px var(--mono); color: var(--app-ink-2); }
.tax-hist { flex: none; display: grid; gap: 7px; padding: 10px 16px 12px; border-top: 1px solid var(--app-line); }
.tax-hist ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.tax-hist li { display: grid; gap: 2px; min-width: 0; padding: 6px 9px; border-radius: 2px; border-top: 2px solid var(--tx-4); background: var(--card-2);
  transition: opacity .35s; transition-delay: calc(var(--i, 0) * .12s + 2.6s); }
.tax-hist li.ok { border-top-color: var(--green); }
.tax-hist li.bad { border-top-color: var(--red); background: rgb(205 66 70 / 10%); }
.tax-hist b { font: 500 12px var(--mono); color: var(--tx-1); }
.tax-hist span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--app-muted); }
.tax-hist li.bad span { color: var(--red-t); }

/* 13 OM truth-check: the memorandum's page, its claims highlighted, each joined to its verdict */
.om-body { position: relative; flex: 1; min-height: 0; overflow: hidden; display: grid; grid-template-columns: 290px minmax(0, 1fr); column-gap: 40px; padding: 12px 14px 0 16px; }
.om-doc { position: relative; min-height: 0; overflow: hidden; border-radius: 2px 2px 0 0; }
.om-page { box-sizing: border-box; height: 100%; display: flex; flex-direction: column; gap: 9px; padding: 14px 16px; background: #d9d5cd; color: #2a2f36; font-size: 11px; }
.om-pt { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 6px; border-bottom: 1px solid rgb(42 47 54 / 25%); }
.om-pt b { font: 700 10px var(--sans); letter-spacing: .2em; }
.om-pt span { font-size: 8.5px; letter-spacing: .05em; text-transform: uppercase; color: #5b636e; }
.om-photo { overflow: hidden; } .om-photo svg { display: block; width: 100%; height: 84px; }
.om-photo .sky { fill: #a9b6c2; } .om-photo .bld { fill: #cdc6b9; } .om-photo .roof { fill: #7f7366; } .om-photo .w { fill: #5d6f80; } .om-photo .tree { fill: #6e8066; }
.om-h { font: 600 12.5px var(--sans); letter-spacing: -0.01em; }
.om-sum { margin: -3px 0 0; display: grid; }
.om-sum div { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 3px 0; border-bottom: 1px solid rgb(42 47 54 / 14%); }
.om-sum dt { font-size: 10.5px; color: #4b535e; }
.om-sum dd { margin: 0; padding: 1px 6px; border-radius: 2px; font: 600 11px var(--sans); color: #20252c; transition: background-color .4s, box-shadow .3s; }
.om-txt { display: grid; gap: 5px; }
.om-txt i { height: 5px; border-radius: 1px; background: rgb(42 47 54 / 15%); } .om-txt i.s { width: 58%; }
.om-scan { position: absolute; left: 0; right: 0; top: 100%; height: 34px; opacity: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgb(244 233 214 / 26%) 88%, var(--warm) 88% 92%, transparent 92%); }
/* each value marked as the scan reaches it, then tinted with its verdict */
.om-sum [data-c="1"] dd, .om-sum [data-c="4"] dd { background: rgb(50 164 103 / 30%); box-shadow: inset 0 0 0 1.5px rgb(24 120 72 / 85%); }
.om-sum [data-c="2"] dd, .om-sum [data-c="5"] dd, .om-sum [data-c="6"] dd { background: rgb(205 66 70 / 26%); box-shadow: inset 0 0 0 1.5px rgb(172 47 51 / 85%); }
.om-sum [data-c="3"] dd { background: rgb(200 118 25 / 30%); box-shadow: inset 0 0 0 1.5px rgb(160 92 14 / 85%); }
.om-checks { display: grid; align-content: start; min-width: 0; }
.oc { display: grid; grid-template-columns: 20px minmax(0, .8fr) minmax(0, 1.55fr) 108px; gap: 12px; align-items: center; min-height: 50px; padding: 4px 6px 4px 8px; border-bottom: 1px solid var(--line); }
.oc.oc-h { min-height: 0; height: 28px; background: var(--card-2); font: 500 10px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--app-muted); }
.oc-n { display: grid; place-items: center; width: 20px; height: 20px; box-sizing: border-box; border-radius: 50%; border: 1px solid var(--line-3); background: var(--card-2); font: 600 10px var(--mono); color: var(--tx-1); }
.oc-claim { font-weight: 500; font-size: 12.5px; color: var(--tx-1); }
.oc-rec { display: grid; font-size: 12px; color: var(--app-ink-2); }
.oc-rec small { font-size: 10.5px; color: var(--app-muted); }
.oc .chips { justify-content: flex-end; }
.oc.ok .oc-n { border-color: var(--green); } .oc.bad .oc-n { border-color: var(--red); } .oc.warn .oc-n { border-color: var(--orange); }
.oc.ok em { color: var(--green-t); border-color: rgb(50 164 103 / 45%); background: rgb(50 164 103 / 12%); }
.oc.bad em { color: var(--red-t); border-color: rgb(205 66 70 / 50%); background: rgb(205 66 70 / 12%); }
.oc.warn em { color: var(--orange-t); border-color: rgb(200 118 25 / 50%); background: rgb(200 118 25 / 12%); }
.om-ask { display: grid; gap: 6px; margin: 12px 0 0 38px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 2px; background: var(--card-2); transition: opacity .5s 5s; }
.om-ask ul { margin: 0; padding: 0 0 0 16px; display: grid; gap: 3px; font-size: 12px; color: var(--app-ink-2); }
.om-ask li::marker { color: var(--orange-t); }
.om-links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.om-links path { fill: none; stroke-width: 1.2; stroke-opacity: .8; stroke-dasharray: 1; transition: stroke-dashoffset .5s var(--out); transition-delay: calc(var(--i, 0) * .5s + 1.7s); }
.om-links .ok { stroke: var(--green-t); } .om-links .bad { stroke: var(--red-t); } .om-links .warn { stroke: var(--orange-t); }
.oc-rec, .oc .chips { transition: opacity .35s var(--out); }
.oc[data-c="1"] .oc-rec { transition-delay: 1.6s; } .oc[data-c="1"] .chips { transition-delay: 2s; }
.oc[data-c="2"] .oc-rec { transition-delay: 2.1s; } .oc[data-c="2"] .chips { transition-delay: 2.5s; }
.oc[data-c="3"] .oc-rec { transition-delay: 2.6s; } .oc[data-c="3"] .chips { transition-delay: 3s; }
.oc[data-c="4"] .oc-rec { transition-delay: 3.1s; } .oc[data-c="4"] .chips { transition-delay: 3.5s; }
.oc[data-c="5"] .oc-rec { transition-delay: 3.6s; } .oc[data-c="5"] .chips { transition-delay: 4s; }
.oc[data-c="6"] .oc-rec { transition-delay: 4.1s; } .oc[data-c="6"] .chips { transition-delay: 4.5s; }

/* 14 rents and demand: twelve months of asking rent in the market's middle half, the unit mix against the market */
.rt-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 280px; grid-template-rows: minmax(0, 1fr); border-bottom: 1px solid var(--app-line); }
.rt-chart { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 12px 22px 6px 16px; border-right: 1px solid var(--app-line); }
.rt-chart .cm-chart { grid-template-columns: 46px minmax(0, 1fr); }
.rt-plot .band { fill: rgb(204 217 232 / 8%); }
.rt-plot .p { fill: none; stroke: var(--line-3); stroke-width: 1; vector-effect: non-scaling-stroke; }
.rt-plot .mkt { fill: none; stroke: var(--cool); stroke-width: 1.8; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.rt-plot .subj { fill: none; stroke: var(--warm); stroke-width: 2.2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.rt-draw { transition: clip-path 1.8s var(--out) .5s; clip-path: inset(-6px -6px -6px -6px); }
.rt-draw.s { transition-delay: 1.2s; }
.rt-plot .band { transition: opacity .8s .2s; }
.rt-plot .mkt-d { fill: var(--cool); transition: opacity .3s 2.1s; } .rt-plot .subj-d { fill: var(--warm); transition: opacity .3s 2.8s; }
.rt-plot .lab { font: 600 11px var(--sans); text-anchor: end; }
.rt-plot .mkt-t { fill: var(--cool); transition: opacity .3s 2.2s; } .rt-plot .subj-t { fill: var(--warm); transition: opacity .3s 2.9s; }
.rt-plot .band-t { font-weight: 500; font-size: 10.5px; fill: var(--tx-3); text-anchor: start; transition: opacity .4s .8s; }
.rt-kpis { margin: 0; display: grid; grid-template-columns: 1fr 1fr; align-content: start; }
.rt-kpis div { min-width: 0; padding: 8px 13px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.rt-kpis div:nth-child(2n) { border-right: 0; }
.rt-kpis dt { font: 500 9.5px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--app-muted); }
.rt-kpis dd { margin: 3px 0 1px; font: 400 19px/1.05 var(--sans); letter-spacing: -0.02em; color: var(--tx-1); font-variant-numeric: tabular-nums; }
.rt-kpis small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--app-muted); }
.rt-kpis small.ok { color: var(--green-t); }
.rt-kpis div:nth-child(2) dd { color: var(--warm); }
.rt-kpis .up { background: rgb(200 118 25 / 8%); } .rt-kpis .up dd, .rt-kpis .up small { color: var(--orange-t); }
.rt-kpis div:nth-child(n+7) { border-bottom: 0; }
.rt-mix { flex: none; }
.rm { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .6fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, .7fr); gap: 10px; align-items: center; height: 29px; padding: 0 16px;
  border-bottom: 1px solid var(--line); font: 500 12px var(--mono); color: var(--app-ink-2); }
.rm > * { text-align: right; } .rm > b { text-align: left; font: 500 12.5px var(--sans); color: var(--tx-1); }
.rm span:nth-of-type(2) { color: var(--warm); }
.rm em { font-style: normal; color: var(--orange-t); }
.rm.rh { height: 28px; background: var(--card-2); font: 500 10px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--app-muted); }
.rm.rh > *, .rm.rh b { font: inherit; color: inherit; }
.rm.all { border-bottom: 0; background: rgb(244 233 214 / 4%); }
.rt-rows .rm { transition: opacity .35s var(--out), transform .35s var(--out); transition-delay: calc(var(--i, 0) * .12s + 2.4s); }

/* 15 jobs and traffic: drive-time rings, where the jobs are, the traffic on the roads */
.jt-body { flex: 1; min-height: 0; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); }
.jt-mapbox { position: relative; min-height: 0; overflow: hidden; border-right: 1px solid var(--app-line); }
.jt-map { display: block; width: 100%; height: 100%; }
.jt-iso path { stroke: var(--cool); stroke-width: 1.1; stroke-linejoin: round; transform-box: view-box; transform-origin: 250px 222px; transition: transform 1.3s var(--out), opacity .5s; }
.jt-iso .i15 { fill: rgb(204 217 232 / 5%); stroke-opacity: .35; transition-delay: 1.1s; }
.jt-iso .i10 { fill: rgb(204 217 232 / 7%); stroke-opacity: .5; transition-delay: .7s; }
.jt-iso .i5 { fill: rgb(244 233 214 / 10%); stroke: var(--warm); stroke-opacity: .7; transition-delay: .3s; }
.jt-dots path { fill: none; stroke: var(--cool); stroke-linecap: round; stroke-opacity: .5; transition: opacity 1s 1.6s; }
.jt-dots .d0 { stroke-width: 2.2; } .jt-dots .d1 { stroke-width: 2.8; } .jt-dots .d2 { stroke-width: 3.6; stroke-opacity: .6; } .jt-dots .d3 { stroke-width: 4.6; stroke-opacity: .7; }
.jt-iso-t text { font: 600 8.5px var(--sans); letter-spacing: .08em; text-transform: uppercase; fill: var(--tx-2); text-anchor: middle; paint-order: stroke; stroke: #1e2329; stroke-width: 3px; transition: opacity .4s 2s; }
.jt-aadt rect { fill: #161a1f; stroke: var(--line-3); }
.jt-aadt text { font: 600 9.5px var(--mono); fill: var(--tx-1); text-anchor: middle; }
.jt-aadt .tag { transform-box: fill-box; transform-origin: center; transition: transform .35s var(--out), opacity .2s; transition-delay: calc(var(--i, 0) * .12s + 2.3s); }
.jt-key { position: absolute; left: 10px; bottom: 10px; display: flex; gap: 12px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 2px; background: rgb(28 33 39 / 88%);
  font: 500 9.5px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--tx-3); white-space: nowrap; }
.k-dot::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 6px; border-radius: 50%; background: var(--cool); vertical-align: 1px; }
.k-aadt::before { content: ""; display: inline-block; width: 13px; height: 8px; margin-right: 6px; border: 1px solid var(--line-3); background: #161a1f; vertical-align: -1px; }
.jt-side { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 12px 16px; }
.jt-rings { margin: 0 0 4px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line-2); border-radius: 2px; }
.jt-rings div { min-width: 0; padding: 8px 10px; border-right: 1px solid var(--line); }
.jt-rings div:first-child { background: rgb(244 233 214 / 5%); } .jt-rings div:last-child { border-right: 0; }
.jt-rings dt { font: 500 9.5px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--app-muted); }
.jt-rings dd { margin: 3px 0 0; font: 400 21px/1.05 var(--sans); letter-spacing: -0.02em; color: var(--tx-1); font-variant-numeric: tabular-nums; }
.jt-rings div:first-child dd { color: var(--warm); }
.jt-sec { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.jt-sec li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; font-size: 12px; color: var(--app-ink-2); }
.jt-sec span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jt-sec b { font: 500 11.5px var(--mono); color: var(--tx-1); font-variant-numeric: tabular-nums; }
.jt-sec svg { grid-column: 1 / -1; display: block; width: 100%; height: 10px; }
.jt-sec rect { fill: var(--tx-3); transform-box: fill-box; transform-origin: left; transition: transform .8s var(--out); transition-delay: calc(var(--i, 0) * .1s + 1.6s); }
.jt-sec li:first-child rect { fill: var(--cool); }
.jt-traffic { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: auto 0 0; padding-top: 9px; border-top: 1px solid var(--line); }
.jt-traffic dt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 9.5px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--app-muted); }
.jt-traffic dd { margin: 3px 0 1px; font: 500 16px var(--mono); color: var(--tx-1); }
.jt-traffic small { font-size: 11px; color: var(--green-t); }

/* 16 API and MCP: the call in three tabs, the record streaming back, an agent's tool calls */
.api-body { flex: 1; min-height: 0; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.api-code { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-right: 1px solid var(--app-line); background: #181c21; }
.api-tabs { flex: none; display: flex; border-bottom: 1px solid var(--line); background: var(--card); }
.api-tabs span { padding: 8px 14px; border-right: 1px solid var(--line); font: 500 11.5px var(--sans); color: var(--app-muted); }
.api-tabs .on { color: var(--tx-1); background: #181c21; box-shadow: inset 0 2px 0 var(--warm); }
.api-call { flex: none; box-sizing: border-box; min-height: 82px; margin: 0; padding: 11px 14px; overflow: hidden; border-bottom: 1px solid var(--line); font: 12px/1.6 var(--mono); color: var(--tx-1); white-space: pre; }
.api-call code:not(.on) { display: none; }
.api-call.typing code.on::after { content: "▍"; color: var(--warm); }
.api-st { flex: none; padding: 7px 14px; border-bottom: 1px solid var(--line); font: 500 11px var(--mono); color: var(--app-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .3s; }
.api-st em { margin-right: 4px; font-style: normal; color: var(--green-t); }
.api-json { flex: 1; min-height: 0; margin: 0; padding: 10px 14px; overflow: hidden; font: 11.5px/1.6 var(--mono); color: var(--tx-4); white-space: pre; }
.api-json .jl { display: block; transition: opacity .2s, transform .2s; transition-delay: calc(var(--i, 0) * 80ms + .15s); }
.api-json i { font-style: normal; } .api-json .k { color: var(--tx-2); } .api-json .s { color: var(--warm); } .api-json .n { color: var(--blue-t); }
.api-run { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 12px 16px; }
.ar-q { padding: 7px 10px; border: 1px solid var(--line-2); border-radius: 2px; background: var(--card-2); font-size: 12.5px; color: var(--tx-1); }
.ar-axis, .ar-calls li { display: grid; grid-template-columns: 112px minmax(0, 1fr) 52px; column-gap: 10px; align-items: center; }
.ar-axis { margin-top: 4px; font: 500 10px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--app-muted); }
.ar-axis svg { display: block; width: 100%; height: 14px; }
.ar-axis text { font: 500 10px var(--mono); letter-spacing: 0; text-transform: none; fill: var(--app-muted); text-anchor: middle; }
.ar-axis text:first-child { text-anchor: start; } .ar-axis text:last-child { text-anchor: end; }
.ar-calls { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
.ar-calls li { height: 36px; border-bottom: 1px solid var(--line); }
.ar-calls p { display: grid; min-width: 0; }
.ar-calls code { overflow: hidden; text-overflow: ellipsis; font: 500 11.5px var(--mono); color: var(--tx-1); }
.ar-calls small { font: 500 10.5px var(--mono); color: var(--app-muted); }
.ar-calls svg { display: block; width: 100%; height: 22px; }
.ar-calls rect { fill: var(--cool); transform-box: fill-box; transform-origin: left; transition: transform .55s var(--out); transition-delay: calc(var(--i, 0) * .22s + 1.1s); }
.ar-calls li:first-child rect { fill: var(--warm); }
.ar-calls b { font: 500 11.5px var(--mono); color: var(--tx-2); text-align: right; transition: opacity .3s; transition-delay: calc(var(--i, 0) * .22s + 1.5s); }
.ar-sum { display: flex; flex-wrap: wrap; gap: 4px 14px; font: 500 10.5px var(--sans); letter-spacing: .04em; color: var(--app-muted); transition: opacity .4s 2.4s; }
.ar-ans { display: grid; gap: 4px; margin-top: auto; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 2px; background: var(--card-2); font-size: 12.5px; line-height: 1.5;
  color: var(--app-ink-2); transition: opacity .5s var(--out), transform .5s var(--out); transition-delay: 2.7s; }
.ar-ans b { font-weight: 600; color: var(--tx-1); }

/* ---------- motion: the start states (only with body.motion) and the one-shot pulses */
@media (prefers-reduced-motion: no-preference) {
  .api-call.typing code.on::after { animation: caret 1s steps(1) infinite; }  /* the caret blinks only where motion is welcome */
  .motion #sales:not(.in) .cmp-pt { transform: scale(0); opacity: 0; }
  .motion #sales:not(.in) .cmp-ln { stroke-dashoffset: 1; }
  .motion #sales:not(.in) .cmp-rows .cr { opacity: 0; transform: translateX(-14px); }
  .motion #sales:not(.in) .pp, .motion #sales:not(.in) .med-t, .motion #sales:not(.in) .cmp-val { opacity: 0; }
  .motion #sales:not(.in) .cmp-axis .med { transform: scaleY(0); }
  .motion #permits:not(.in) .pm-bar { clip-path: inset(-4px 100% -4px -8px); }
  .motion #permits:not(.in) .pm-near li rect { transform: scaleX(0); }
  .motion #permits:not(.in) .pm-sig { opacity: 0; }
  .motion #distress:not(.in) .fc-svg .done, .motion #distress:not(.in) .fc-svg .left { clip-path: inset(-4px 100% -4px 0); }
  .motion #distress:not(.in) .fc-ev, .motion #distress:not(.in) .fc-now, .motion #distress:not(.in) .fc-d, .motion #distress:not(.in) .fn { opacity: 0; }
  .motion #distress.in .fc-pulse { animation: eng-pulse 1.4s var(--out) 3.2s forwards; }
  .motion #liens:not(.in) .ls-bar rect { transform: scaleX(0); }
  .motion #liens:not(.in) .ls-bar .amt, .motion #liens:not(.in) .ls-bar .when { opacity: 0; }
  .motion #liens:not(.in) .lf { opacity: 0; transform: translateX(10px); }
  .motion #liens .ls-lines .refi, .motion #liens .ls-lines .val, .motion #liens .ls-foot { transition: opacity .5s 3.3s; }
  .motion #liens:not(.in) .ls-lines .refi, .motion #liens:not(.in) .ls-lines .val, .motion #liens:not(.in) .ls-foot { opacity: 0; }
  .motion #cmbs:not(.in) .cm-draw { clip-path: inset(-6px 100% -6px -6px); }
  .motion #cmbs:not(.in) .cm-pts circle, .motion #cmbs:not(.in) .cm-cross, .motion #cmbs:not(.in) .end-t { opacity: 0; }
  .motion #cmbs:not(.in) .cm-codes li { opacity: 0; transform: translateX(10px); }
  .motion #cmbs:not(.in) .cm-ev li { opacity: 0; }
  .motion #cmbs .cm-plot .below { transition: opacity .6s 2.1s; }
  .motion #cmbs:not(.in) .cm-plot .below { opacity: 0; }
  .motion #cmbs.in .cm-pulse { animation: eng-pulse 1.4s var(--out) 2.1s forwards; }
  .motion #tax:not(.in) .tax-draw { clip-path: inset(-6px 100% -6px -6px); }
  .motion #tax .tax-pts circle { transition-delay: 2s; }
  .motion #tax .tax-plot .gap { transition: opacity .6s 1.6s; }
  .motion #tax:not(.in) .tax-pts circle, .motion #tax:not(.in) .tax-plot .gap, .motion #tax:not(.in) .tax-plot .lab, .motion #tax:not(.in) .tax-plot .jump,
  .motion #tax:not(.in) .tax-plot .reset, .motion #tax:not(.in) .tb.up, .motion #tax:not(.in) .tax-hist li { opacity: 0; }
  .motion #om:not(.in) .om-scan { top: -34px; opacity: 1; }
  .motion #om .om-scan { transition: top 2.6s linear .3s, opacity .4s 2.9s; }
  .motion #om:not(.in) .om-sum dd { background-color: transparent; box-shadow: inset 0 0 0 1.5px transparent; }
  .motion #om .om-sum [data-c="1"] dd { transition-delay: 2s, 1.1s; } .motion #om .om-sum [data-c="2"] dd { transition-delay: 2.5s, 1.25s; }
  .motion #om .om-sum [data-c="3"] dd { transition-delay: 3s, 1.4s; } .motion #om .om-sum [data-c="4"] dd { transition-delay: 3.5s, 1.55s; }
  .motion #om .om-sum [data-c="5"] dd { transition-delay: 4s, 1.7s; } .motion #om .om-sum [data-c="6"] dd { transition-delay: 4.5s, 1.85s; }
  .motion #om:not(.in) .oc-rec, .motion #om:not(.in) .oc .chips { opacity: 0; }
  .motion #om:not(.in) .om-links path { stroke-dashoffset: 1; }
  .motion #om:not(.in) .om-ask { opacity: 0; }
  .motion #rents:not(.in) .rt-draw { clip-path: inset(-6px 100% -6px -6px); }
  .motion #rents:not(.in) .rt-plot .band, .motion #rents:not(.in) .rt-plot .mkt-d, .motion #rents:not(.in) .rt-plot .subj-d, .motion #rents:not(.in) .rt-plot .lab { opacity: 0; }
  .motion #rents:not(.in) .rt-rows .rm { opacity: 0; transform: translateY(6px); }
  .motion #market:not(.in) .jt-iso path { transform: scale(.15); opacity: 0; }
  .motion #market:not(.in) .jt-dots path, .motion #market:not(.in) .jt-iso-t text { opacity: 0; }
  .motion #market:not(.in) .jt-aadt .tag { transform: scale(.4); opacity: 0; }
  .motion #market:not(.in) .jt-sec rect { transform: scaleX(0); }
  .motion #api:not(.got) .api-st, .motion #api:not(.got) .jl, .motion #api:not(.got) .ar-calls b, .motion #api:not(.got) .ar-sum { opacity: 0; }
  .motion #api:not(.got) .jl { transform: translateY(4px); }
  .motion #api:not(.got) .ar-calls rect { transform: scaleX(0); }
  .motion #api:not(.got) .ar-ans { opacity: 0; transform: translateY(6px); }
  @keyframes eng-pulse { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(3.6); } }
}

/* ---------- the console's narrower sizes: tertiary parts go first */
@container (max-width: 900px) { .oc-rec small { display: none; } .oc { min-height: 46px; } }
@container (max-width: 820px) {
  .comps .ui-head .ui-muted, .comps .ui-filters .flt:nth-child(n+4) { display: none; }
  .cr { grid-template-columns: 20px minmax(0, 2fr) minmax(0, .5fr) minmax(0, .62fr) minmax(0, .62fr) minmax(0, .62fr); }
  .cr > :nth-child(3) { display: none; }
  .cr small { display: none; }
  .pm-body { grid-template-columns: minmax(0, 1fr); }
  .pm-near { display: none; }
  .pm-head, .pm-row { grid-template-columns: 180px minmax(0, 1fr) 64px; }
  .pm-grid { left: 206px; width: calc(100% - 296px); }
  .fc-top { grid-template-columns: 210px minmax(0, 1fr); } .fc-cd { font-size: 21px; }
  .fc-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fc-facts div:nth-child(4) { display: none; } .fc-facts div:nth-child(3) { border-right: 0; }
  .fc-ev .sub { display: none; }
  .fn { grid-template-columns: 50px minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.1fr); } .fn span:nth-of-type(3) { display: none; }
  .lien-body { grid-template-columns: minmax(0, 1fr); }
  .lien-files { display: none; }
  .cm-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } .cm-kpis div:nth-child(n+5) { display: none; } .cm-kpis div:nth-child(4) { border-right: 0; }
  .cm-body { grid-template-columns: minmax(0, 1fr) 230px; }
  .tax-body { grid-template-columns: minmax(0, 1fr) 240px; }
  .tax-hist span { white-space: normal; }
  .om-body { grid-template-columns: 220px minmax(0, 1fr); column-gap: 30px; }
  .oc { grid-template-columns: 20px minmax(0, 1fr) 104px; } .oc-rec, .oc-h > p:nth-of-type(2) { display: none; }
  .rt-body { grid-template-columns: minmax(0, 1fr) 200px; } .rt-kpis { grid-template-columns: 1fr; } .rt-kpis div { border-right: 0; } .rt-kpis div:nth-child(n+5) { display: none; }
  .jt-body { grid-template-columns: minmax(0, 1fr) 230px; } .jt-rings dd { font-size: 17px; } .jt-traffic { display: none; }
  .api-body { grid-template-columns: minmax(0, 1fr); } .api-run { display: none; }
}

/* ---------- phones (and the narrowest console): each screen stacks its parts and keeps the figures that carry it */
@container (max-width: 600px) {
  .scr > .ui-head { flex-wrap: wrap; row-gap: 2px; padding: 11px 12px 9px; }
  .scr > .ui-head .ui-muted { display: none; }
  .scr > .ui-head .ui-count { margin-left: auto; }
  .scr > .ui-filters, .pm-key { display: none; }
  .scr-k { font-size: 9.5px; }
  .cmp-body { display: flex; flex-direction: column; border-bottom: 0; }
  .cmp-mapbox { flex: none; height: 168px; border-right: 0; border-bottom: 1px solid var(--app-line); }
  .cmp-strip { display: none; }
  .comps .ui-count { flex-basis: 100%; margin-left: 0; } .cmp-ph { display: inline; color: var(--warm); }
  .cr { grid-template-columns: 18px minmax(0, 1fr) minmax(0, .55fr) minmax(0, .5fr); gap: 8px; height: 34px; padding: 0 12px; font-size: 12px; }
  .cr > :nth-child(4), .cr > :nth-child(5) { display: none; }
  .cr.cm { height: 34px; }
  .pm-head { display: none; }
  .pm-grid { display: none; }
  .pm-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 22px; row-gap: 0; height: auto; padding: 6px 12px 2px; }
  .pm-row p { grid-column: 1; } .pm-row em { grid-column: 2; grid-row: 1; align-self: start; }
  .pm-bar { grid-column: 1 / -1; height: 22px; }
  .pm-bar .is { y: 7px; height: 8px; } .pm-bar .ap { transform: translateY(-5px); } .pm-bar .ap-d, .pm-bar .fin { transform: translateY(-5px); }
  .pm-row p small { display: none; }
  .pm-sig { display: none; }
  .fc-top { grid-template-columns: minmax(0, 1fr); }
  .fc-clock { grid-template-columns: auto 1fr; align-items: baseline; column-gap: 10px; padding: 8px 12px; border-right: 0; border-bottom: 1px solid var(--line); }
  .fc-clock .scr-k { grid-column: 1 / -1; } .fc-cd { font-size: 20px; } .fc-clock small { font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fc-facts { grid-template-columns: 1fr 1fr; } .fc-facts div { padding: 7px 12px; } .fc-facts div:nth-child(3) { display: none; } .fc-facts div:nth-child(2) { border-right: 0; }
  .fc-facts dd { font-size: 13px; margin-top: 3px; } .fc-facts small { display: none; }
  .fc-tl { padding: 6px 16px 0 12px; } .fc-tl > .scr-k { display: none; }
  .fc-svg { height: 96px; } .fc-svg .mo { display: none; }
  .fc-ev:not(.auc) text:not(.sub) { font-size: 10.5px; }
  .fc-ev:nth-child(2), .fc-ev:nth-child(4) { display: none; }
  .fc-cal { padding: 8px 12px 10px; }
  .fc-days { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; }
  .fc-d:not(.sale), .fc-d.past { display: none; }
  .fc-ev.first text { text-anchor: start; }
  .fc-next { display: none; }
  .lien-stack { padding: 10px 12px; }
  .ls-axis, .ls-row { grid-template-columns: 18px minmax(0, 1fr); column-gap: 8px; }
  .ls-axis { padding-right: 30px; } .ls-axis > span:nth-child(2) { display: none; }
  .ls-row { grid-template-rows: auto 20px; height: auto; padding: 5px 0 3px; }
  .ls-row p { grid-column: 2; } .ls-n { grid-row: 1; }
  .ls-bar { grid-column: 2; height: 20px; } .ls-bar rect { y: 4px; } .ls-bar .amt { transform: translateY(-3px); }
  .ls-rows { padding-right: 30px; }
  .ls-row p small { display: none; }
  .ls-lines { left: 26px; width: calc(100% - 56px); }
  .ls-axis svg, .ls-foot svg { grid-column: 2; }
  .ls-foot .refi-t { display: none; }
  .cm-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cm-kpis div { padding: 7px 10px; } .cm-kpis div:nth-child(n+4) { display: none; }
  .cm-kpis dd { font-size: 16px; } .cm-kpis div:nth-child(3) { border-right: 0; }
  .cm-body { display: flex; flex-direction: column; }
  .cm-charts { padding: 10px 14px 4px 10px; border-right: 0; } .cm-chart { flex: none; grid-template-columns: 34px minmax(0, 1fr); grid-template-rows: 128px 18px; }
  .cm-x span:nth-child(even) { visibility: hidden; }
  .cm-charts > .scr-k:nth-of-type(2), .cm-chart.occ { display: none; }
  .cm-side { padding: 8px 12px; border-top: 1px solid var(--app-line); } .cm-side > .scr-k:nth-of-type(2), .cm-ev { display: none; }
  .cm-codes { grid-template-columns: 1fr 1fr; gap: 6px 10px; } .cm-codes small { display: none; } .cm-codes b { font-size: 11.5px; white-space: normal; line-height: 1.25; }
  .cm-codes code { grid-row: 1; }
  .tax-body { display: flex; flex-direction: column; }
  .tax-chart { padding: 10px 14px 4px 10px; border-right: 0; } .tax-chart .scr-k span { display: none; }
  .tax-chart .cm-chart { flex: none; grid-template-columns: 34px minmax(0, 1fr); grid-template-rows: 132px 18px; }
  .tax-plot .gap-t, .tax-plot .jv-t { display: none; }
  .cm-x span { font-size: 9.5px; }
  .tax-chart .cm-x span:last-child { font-size: 0; } .tax-chart .cm-x span:last-child::after { content: "Sold"; font-size: 9.5px; }
  .tax-bills { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px 12px; border-top: 1px solid var(--app-line); }
  .tax-bills > .scr-k, .tax-kv, .tb:nth-of-type(2) { display: none; }
  .tb { padding: 6px 9px; } .tb b { font-size: 18px; } .tb small { white-space: normal; font-size: 10.5px; line-height: 1.3; }
  .tax-hist { display: none; }
  .om-body { grid-template-columns: minmax(0, 1fr); padding: 0; }
  .om-doc, .om-links { display: none; }
  .oc { grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; min-height: 0; padding: 7px 12px; }
  .oc.oc-h { display: none; }
  .oc-claim { display: grid; } .oc-rec { display: none; }
  .rt-body { display: flex; flex-direction: column; border-bottom: 0; }
  .rt-chart { padding: 10px 14px 4px 10px; border-right: 0; } .rt-chart .cm-chart { flex: none; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: 138px 18px; }
  .rt-chart .cm-x span:nth-child(even) { visibility: hidden; }
  .rt-plot .band-t { display: none; }
  .rt-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--app-line); } .rt-kpis div { padding: 7px 10px; border-right: 1px solid var(--line); }
  .rt-kpis div:nth-child(n+4) { display: none; } .rt-kpis div:nth-child(3) { border-right: 0; }
  .rt-kpis dd { font-size: 17px; } .rt-kpis small { white-space: normal; line-height: 1.25; font-size: 10.5px; }
  .rt-mix { display: none; }
  .jt-body { display: flex; flex-direction: column; }
  .jt-mapbox { flex: none; height: 178px; border-right: 0; border-bottom: 1px solid var(--app-line); }
  .jt-key { display: none; }
  .jt-side { padding: 10px 12px; } .jt-rings dd { font-size: 17px; }
  .jt-sec li:nth-child(n+5) { display: none; }
  .api-call { min-height: 0; padding: 9px 12px; font-size: 10.5px; white-space: pre-wrap; word-break: break-all; }
  .api-tabs span { padding: 7px 12px; font-size: 11px; }
  .api-st { padding: 6px 12px; font-size: 10px; }
  .api-json { padding: 8px 12px; font-size: 10px; line-height: 1.6; white-space: pre-wrap; }
  .api-json .jl { padding-left: 2ch; text-indent: -2ch; }
}

/* ---------- the short console (860 px and under, 400 px tall): the strips that only fit the tall one go */
@media (max-width: 860px) {
  .pm-sig, .tax-hist, .rt-mix, .fc-next, .ls-sum, .om-ask, .cm-chart.occ, .cm-charts > .scr-k:nth-of-type(2) { display: none; }
  .pm-row { height: 36px; }
  .cmp-strip .cmp-val small:last-child { display: none; }
}