/* 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; }
/* a list longer than its window shows whole rows only: it takes the window's remaining height, and the rows that do not fit wrap
   into a second column beside it, outside the clip; no row is ever cut in half, at any width (a row struck out lets the next one up) */
#origination .ui-table, #debt .loans, .lf-list, .api-json, .scr .fc-next, .scr .cm-ev, .scr .pm-list, .scr .jt-sec, .scr .om-checks, .scr .ar-calls {
  flex: 1 1 0; min-height: 0; display: flex; flex-flow: column wrap; align-content: flex-start; column-gap: 40px; overflow: hidden; }  /* the gap puts the second column past any padding */
#origination .ui-table > *, #debt .loans > *, .lf-list > *, .api-json > .jl, .scr .fc-next > *, .scr .cm-ev > *, .scr .pm-list > *, .scr .jt-sec > *,
  .scr .om-checks > *, .scr .ar-calls > * { flex: none; box-sizing: border-box; width: 100%; }
.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 10.5px/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 10.5px/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 10.5px 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, 30%) 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: 13px; }
.cr { display: grid; grid-template-columns: 20px minmax(0, 1fr) 92px 38px 60px 68px 66px; 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: 12.5px; color: var(--app-muted); }
.cr > span:nth-child(n+3) { font: 500 12.5px 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 10.5px var(--sans); letter-spacing: .05em; 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 10.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: 12.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 10.5px 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 10.5px 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: 13px; color: var(--tx-1); }
.pm-row p small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; 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 12.5px 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: 12.5px; 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: 12.5px; color: var(--app-ink-2); }
.pm-near li b { grid-area: 1 / 2; font: 500 12.5px 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 10.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: 12.5px; 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 10.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; line-height: 1.35; font-size: 12.5px; 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 11px 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: 13px 16px 24px 15px; 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 > * { justify-self: stretch; text-align: center; }  /* each figure as wide as its day */
.fc-d small { font: 500 10.5px var(--sans); color: var(--tx-4); }
.fc-d b { font: 500 12.5px 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 10.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: 12.5px; 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 12.5px var(--mono); color: var(--tx-2); }
.fn b { font-weight: 500; color: var(--tx-1); }
.fn span:nth-of-type(2) { font: 500 12.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, 1fr) minmax(0, 1fr); grid-template-rows: 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 186px 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: 226px; width: calc(100% - 272px); 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 11px 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: 13px; color: var(--tx-1); }
.ls-row p small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; 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 10px; 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 10.5px var(--sans); letter-spacing: .04em; 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; line-height: 1.35; font-size: 12.5px; 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; min-height: 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: 5px 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; flex-wrap: wrap; align-items: baseline; column-gap: 8px; min-width: 0; white-space: nowrap; }
.lf b { font-weight: 500; font-size: 13px; color: var(--tx-1); }
.lf p > span { font: 500 12.5px var(--mono); color: var(--app-ink-2); }
.lf small { line-height: 1.35; font-size: 12.5px; color: var(--app-muted); }
.lf .lf-r { text-align: right; }
.lf time { font: 500 12.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 10.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: 12.5px; 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-side > * { flex: none; }
.cm-side > .cm-ev { flex: 1 1 0; }  /* the events take what the codes leave, whole rows */
.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 11px var(--mono); color: var(--red-t); }
.cm-codes b { font-weight: 500; font-size: 13px; color: var(--tx-1); }
.cm-codes small { font-size: 12.5px; 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: 66px 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 12.5px var(--mono); color: var(--app-muted); white-space: nowrap; }
.cm-ev b { font-weight: 500; font-size: 13px; color: var(--tx-1); }
.cm-ev li.bad b { color: var(--red-t); }
.cm-ev small { grid-column: 2; font-size: 12.5px; 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 10.5px 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 { line-height: 1.35; font-size: 12.5px; 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: 12.5px; }
.tax-kv dt { color: var(--app-muted); } .tax-kv dd { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 12.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 12.5px var(--mono); color: var(--tx-1); }
.tax-hist span { line-height: 1.35; font-size: 12.5px; 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: 318px minmax(0, 1fr); column-gap: 36px; 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: 12.5px; }
.om-pt { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 6px; border-bottom: 1px solid rgb(42 47 54 / 25%); }
.om-pt b { font: 700 10.5px var(--sans); letter-spacing: .12em; white-space: nowrap; }
.om-pt span { font-size: 10.5px; letter-spacing: 0; white-space: nowrap; 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 13px 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: 12.5px; color: #4b535e; }
.om-sum dd { margin: 0; padding: 1px 6px; border-radius: 2px; font: 600 12.5px 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="2"] dd { background: rgb(50 164 103 / 30%); box-shadow: inset 0 0 0 1.5px rgb(24 120 72 / 85%); }
.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, .om-sum [data-c="4"] 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: 46px; padding: 3px 6px 3px 8px; line-height: 1.4; border-bottom: 1px solid var(--line); }
.oc.oc-h { min-height: 0; height: 28px; background: var(--card-2); font: 500 10.5px 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 10.5px var(--mono); color: var(--tx-1); }
.oc-claim { font-weight: 500; font-size: 13px; color: var(--tx-1); }
.oc-rec { display: grid; font-size: 12.5px; color: var(--app-ink-2); }
.oc-rec small { font-size: 12.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: 12.5px; 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) 300px; 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 10.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; line-height: 1.35; font-size: 12.5px; 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 12.5px var(--mono); color: var(--app-ink-2); }
.rm > * { text-align: right; } .rm > b { text-align: left; font: 500 13px 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 10.5px 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 10.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 10.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: 12.5px; color: var(--app-ink-2); }
.jt-sec span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jt-sec b { font: 500 12.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: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin: auto 0 0; padding-top: 9px; border-top: 1px solid var(--line); }
.jt-traffic dt { font: 500 10.5px/1.35 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: 12.5px; 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.4fr) 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 12.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: 12.5px/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 12.5px 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: 12.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: 13px; color: var(--tx-1); }
.ar-axis, .ar-calls li { display: grid; grid-template-columns: 128px minmax(0, 1fr) 52px; column-gap: 10px; align-items: center; }
.ar-axis { margin-top: 4px; font: 500 10.5px 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 12.5px var(--mono); color: var(--tx-1); }
.ar-calls small { font: 500 11px 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 12.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 11px 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: 13px; 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) {
  .scr > .ui-head .ui-muted { display: none; }  /* the address is the record's, over the stage */
  .comps .ui-filters .flt:nth-child(n+4) { display: none; }
  .cr { grid-template-columns: 20px minmax(0, 1fr) 38px 60px 68px 66px; }
  .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: 204px minmax(0, 1fr) 64px; }  /* the longest permit whole */
  .pm-grid { left: 230px; width: calc(100% - 320px); }
  .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; } .om-pt span { display: none; }
  .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) 250px; } .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: 10.5px; white-space: normal; }
  .cmp-body { display: flex; flex-direction: column; border-bottom: 0; }
  .cmp-mapbox { flex: none; height: 180px; 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) 64px 58px; gap: 8px; height: 34px; padding: 0 12px; font-size: 12.5px; }
  .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: 12.5px; }
  .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: 13.5px; 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; }
  .scr .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: 42px minmax(0, 1fr); grid-template-rows: 128px 20px; }
  .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), .scr .cm-ev { display: none; }
  .cm-codes { grid-template-columns: 1fr 1fr; gap: 6px 10px; } .cm-codes small { display: none; } .cm-codes b { font-size: 12.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: 48px minmax(0, 1fr); grid-template-rows: 132px 20px; }
  .tax-plot .gap-t, .tax-plot .jv-t { display: none; }
  .cm-y, .cm-x span { font-size: 12.5px; }  /* phone axes at the body size */
  .tax-chart .cm-x span:last-child { position: relative; visibility: hidden; } .tax-chart .cm-x span:last-child::after { content: "Sold"; position: absolute; inset: 0; visibility: visible; }
  .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: 11px; 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: 22px minmax(0, 1fr) auto; gap: 10px; min-height: 0; padding: 7px 12px; }
  .oc-n { width: 22px; height: 22px; font-size: 12.5px; } #om .chips em { font-size: 12.5px; }
  .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: 54px minmax(0, 1fr); grid-template-rows: 138px 20px; }
  .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: 11px; }
  .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+4) { display: none; }
  .api-call { min-height: 0; padding: 9px 12px; font-size: 12.5px; white-space: pre-wrap; overflow-wrap: anywhere; }
  .api-tabs span { padding: 7px 12px; font-size: 12.5px; }
  .api-st { padding: 6px 12px; font-size: 10.5px; }
  .api-json { padding: 8px 12px; font-size: 12.5px; line-height: 1.55; white-space: normal; }  /* one key a line, wrapped under itself */
  .api-json .jl { padding-left: 2ch; text-indent: -2ch; }
  /* the maps' small street and tag labels cannot stay legible at phone scale: the numbers they carry are in the panels below */
  .cmp-map .m-lab, .jt-map .m-lab, .jt-map .m-subj text, .jt-aadt, .jt-iso-t { display: none; }
  .cmp-pt text, .m-subj text, .m-ring-t { font-size: 10px; }
  .jt-traffic { display: grid; }
  .fc-d b, .fc-d em { font-size: 12.5px; }
}

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

@container (max-width: 900px) { .ls-sum dt { letter-spacing: 0; } }  /* "Before the lender" whole in a third of the stack */
/* a narrow console (a 1000 px window): the columns that do not fit whole go, the plaintiff's name takes two lines */
@container (max-width: 760px) {
  .fc-facts dd { white-space: normal; }
  #origination .tr { grid-template-columns: minmax(0, 1.6fr) .8fr .45fr 1.15fr .75fr; } #origination .tr > :nth-child(4), #origination .tr > :nth-child(6) { display: none; }
  .cr { grid-template-columns: 20px minmax(0, 1fr) 60px 68px; } .cr > :nth-child(4), .cr > :nth-child(7) { display: none; }
}

@container (max-width: 700px) {
  .tax-chart .scr-k span { display: none; }  /* the chart labels its own lines */
  .fn { grid-template-columns: 50px minmax(0, 1.3fr) minmax(0, 1.2fr); } .fn span:nth-of-type(1) { display: none; }
}
@container (max-width: 600px) { #origination .tr { grid-template-columns: minmax(0, 1.6fr) .45fr 1.15fr .75fr; } #origination .tr > :nth-child(2) { display: none; } }

/* ---------- a short stage (owner 2026-10-06: the whole room on one screen, down to a 640 px window). The stage's screen is a size
   container (eng, landing.css); as it gets shorter each engine sheds its tertiary parts, as it does when it gets narrower, and
   its lists show whole rows (above). Laptops (about 400 to 520 px of screen), short windows (to about 340), and the shortest. */
@container eng (max-height: 520px) {
  .cmp-body, .pm-body, .jt-body, .om-body, .api-body { grid-template-rows: minmax(0, 1fr); }  /* the part keeps the screen's height */
  .cr { height: 34px; } .cr.cm { height: 34px; } .cr small { display: none; }  /* comps: one line a sale */
  .chain-list { gap: 10px; } .node + .node::before { top: -11px; height: 11px; }
  .node { padding-top: 7px; padding-bottom: 7px; }
  .node:not(.person) .tag, .node:not(.person) b { display: inline; } .node:not(.person) .tag { margin-right: 10px; }  /* the role and the name on one line */
  .pm-rows { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
}
@container eng (max-height: 420px) {
  .comps > .ui-filters, .pm-key, .pm-sig, .jt-traffic, .om-ask, .om-photo, .fc-cal, .tax-hist, .tax-kv, .cr.cm { display: none; }
  .cr { height: 30px; }  /* the median is the strip's figure; the sales show whole rows */
  .fc-facts small { display: none; }
  .cmp-tbl { display: flex; flex-direction: column; }
  .cmp-tbl > .cmp-rows { flex: 1 1 0; min-height: 0; display: flex; flex-flow: column wrap; align-content: flex-start; column-gap: 40px; overflow: hidden; }
  .cmp-rows > * { flex: none; width: 100%; box-sizing: border-box; }
  .cm-charts .scr-k:nth-of-type(2), .cm-chart.occ { display: none; }  /* the occupancy figure is in the card's head */
  .cm-codes small { display: none; }
  .pm-row { height: 36px; } .pm-row p small { display: none; }
  .pm-near ul { gap: 5px; }
  .jt-side { gap: 6px; }
  .oc { min-height: 38px; } .oc-rec small, .oc-h { display: none; }  /* all six claims, without the column heads */
  .node:not(.person) small { display: none; }
  .om-page > :nth-child(n+7) { display: none; }  /* the memorandum's page down to its highlights */
  .pm-near li svg { display: none; }
  .lien-stack > .scr-k, .ls-foot { display: none; }
  .ar-sum { display: none; }
  .ar-calls li { height: 30px; }
  .rt-mix .rm { height: 26px; }
  .ls-row { height: 34px; } .ls-row p small, .ls-sum small { display: none; }
  .wall-chart { height: 150px; }
}
@container eng (max-height: 320px) {
  .scr > .ui-head .ui-muted, #origination .ui-filters, #origination .ui-foot, .wall-key, .fc-tl, .cm-side, .cmp-strip, .pm-near, .pm-head,
    .tax-bills, .jt-mapbox .jt-key, .rt-mix, .lien-files, .ls-sum, .om-doc, .om-links, .oc.ok, .api-run,
    .scr .fc-next, .lien-stack > .ls-axis:first-of-type { display: none; }
  .comps .cmp-ph { display: inline; color: var(--warm); }  /* the median rides in the head */
  .cm-body, .tax-body, .om-body, .api-body, .lien-body { grid-template-columns: minmax(0, 1fr); }
  .cm-charts, .tax-chart { padding-top: 8px; border-right: 0; }
  .cm-charts > .scr-k, .tax-chart > .scr-k { display: none; }
  .wall-chart { height: 112px; }
  .ls-row { height: 30px; }
  .lien-stack { padding-top: 8px; padding-bottom: 8px; }
  .rt-body { border-bottom: 0; } .rt-kpis { grid-template-columns: minmax(0, 1fr); }
  .rt-kpis small, .rt-kpis div:not(:nth-child(2)):not(:nth-child(3)) { display: none; }  /* this property and its loss to lease; the market is on the chart */
  .rt-chart > .scr-k { display: none; }
  .jt-side > .scr-k:nth-of-type(2) { display: none; }
  .om-body { padding-top: 8px; } .oc { min-height: 34px; }
}
@container eng (max-height: 290px) {  /* the chain from the owner of record: its sponsor and the person who signs */
  .node:first-child, .node:nth-child(3), .p-pill, .node.person small:first-of-type { display: none; }
}