/* Inventory: an architect's elevation. Hairline drawing, mono level marks, cells as drawn rectangles.
   States read by fill, border and glyph together, never by hue alone. Amber appears only as the AI dot. */
.inv{display:flex;flex-direction:column;gap:var(--s4);min-width:0}
.inv .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.inv .faint{color:var(--faint)}
.inv-h{font:600 13px/1.3 var(--body);color:var(--ink);margin:0}

/* project tabs and toolbar */
.inv-proj{align-self:flex-start;max-width:100%}
.inv-proj .inv-pn{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inv-bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2)}
.inv-f{height:28px;border:1px solid var(--line-2);border-radius:var(--r1);background:var(--surface);color:var(--ink);font:inherit;font-size:12px;padding:0 var(--s2);max-width:200px}
.inv-f:focus-visible{outline:2px solid var(--act);outline-offset:1px}

/* key: state counts double as a filter */
.inv-key{display:flex;flex-wrap:wrap;align-items:center;gap:2px var(--s1);font-size:12px;color:var(--ink-2)}
.inv-k-t{font-size:12px;color:var(--muted);margin-right:var(--s1)}
.inv-k{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 var(--s2);border-radius:var(--r1);cursor:default;white-space:nowrap}
button.inv-k{cursor:pointer;transition:background-color 120ms ease,opacity 120ms ease}
button.inv-k:hover{background:var(--hover)}
button.inv-k:focus-visible{outline:2px solid var(--act);outline-offset:1px}
.inv-k b{font:500 11px var(--mono);color:var(--muted);font-variant-numeric:tabular-nums}
.inv-k.on{background:var(--sel);color:var(--ink)} .inv-k.off{opacity:.5}
.inv-sw{position:relative;display:inline-grid;place-items:center;width:16px;height:12px;border-radius:2px;flex:none}
.inv-sw svg{width:9px;height:9px}
.inv-ramp{display:inline-block;width:96px;height:10px;border-radius:2px;background:linear-gradient(90deg,color-mix(in srgb,var(--ink) 4%,var(--surface)),color-mix(in srgb,var(--ink) 62%,var(--surface)))}

/* layout: drawing plus a docked unit panel */
.inv-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:var(--s4);align-items:start}
.inv-main{min-width:0;display:flex;flex-direction:column;gap:var(--s3)}
.inv-simbar{display:flex;align-items:center;gap:var(--s3);padding:6px var(--s2) 6px var(--s3);border:1px dashed var(--act-line);border-radius:var(--r2);font-size:12px;color:var(--ink-2)}
.inv-simbar .btn{margin-left:auto}

/* the drawing sheet */
.inv-draw{position:relative;border:1px solid var(--line);border-radius:var(--r2);background:var(--surface);overflow-x:auto;overflow-y:hidden;min-height:240px}
.inv-sheet{display:flex;align-items:flex-end;gap:40px;padding:var(--s5) var(--s5) 0;width:max-content;min-width:100%}
.inv-tw{display:flex;flex-direction:column;gap:0;position:relative}
.inv-twh{display:grid;grid-template-columns:36px auto 1fr;align-items:end;gap:0 var(--s2);margin-bottom:6px}
.inv-twn{grid-column:2;font:600 13px/1.2 var(--display);letter-spacing:-.01em;color:var(--ink);max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:6px;grid-row:1}
.inv-cols{grid-column:2;grid-row:2;display:flex;gap:4px}
.inv-cols i{font:400 10px var(--mono);font-style:normal;color:var(--faint);width:44px;text-align:center}
.inv-cols i.inv-core{width:10px}
/* roof line: a hairline parapet above the top floor */
.inv-body{display:flex;flex-direction:column;gap:4px;padding:8px 0 6px;position:relative}
/* roof: a parapet over the cells only */
.inv-tw{--w:calc(var(--per,4) * 48px + 10px)}
.inv-cols{position:relative;padding-bottom:8px;border-bottom:2px solid var(--ink-2);width:var(--w)}
.inv-cols::after{content:"";position:absolute;left:-6px;right:-6px;bottom:-2px;height:5px;border:1px solid var(--line-2);border-bottom:0;transform:translateY(-100%);pointer-events:none}
.inv-row{display:grid;grid-template-columns:36px auto minmax(0,1fr);align-items:center;gap:var(--s2)}
.inv-lv{all:unset;box-sizing:border-box;height:34px;display:grid;place-items:center end;padding-right:4px;font:500 11px var(--mono);color:var(--muted);cursor:pointer;border-radius:var(--r1);font-variant-numeric:tabular-nums}
.inv-lv:hover{color:var(--ink);background:var(--hover)}
.inv-lv:focus-visible{outline:2px solid var(--act);outline-offset:1px}
.inv-cells{display:flex;gap:4px}
.inv-cells.ph{justify-content:center;width:calc(var(--per,2) * 48px)}
.inv-cells.ph .inv-cell{width:auto;flex:1}
.inv-core{display:block;width:10px;flex:none;align-self:stretch;margin:-4px 0;background:repeating-linear-gradient(0deg,transparent 0 5px,var(--line) 5px 6px)}
.inv-fsum{font:400 11px var(--mono);color:var(--muted);white-space:nowrap;padding-left:var(--s2);font-variant-numeric:tabular-nums}
.inv-fsum .kes{font-size:.85em}
/* ground: a hatched plinth under every building */
.inv-ground{height:14px;margin-left:44px;width:var(--w);border-top:2px solid var(--ink-2);background:repeating-linear-gradient(135deg,transparent 0 5px,var(--line-2) 5px 6px)}
.inv-twf{margin:6px 0 var(--s4) 44px;font:400 11px var(--mono);color:var(--muted);max-width:320px}

/* a unit */
.inv-cell{all:unset;box-sizing:border-box;position:relative;width:44px;height:34px;flex:none;border-radius:3px;border:1px solid var(--line-2);background:var(--surface);
  display:flex;flex-direction:column;justify-content:center;padding:0 4px;cursor:pointer;color:var(--ink);transition:background-color 160ms var(--ease-out),opacity 160ms var(--ease-out),color 160ms var(--ease-out)}
.inv-cell .u-no{font:500 10.5px/1.1 var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:clip}
.inv-cell .u-t{font:400 9px/1.1 var(--mono);color:var(--muted)}
.inv-cell .u-mk{position:absolute;right:3px;bottom:3px;width:9px;height:9px;display:grid;place-items:center;font-style:normal}
.inv-cell .u-mk svg,.inv-sw svg{width:9px;height:9px;display:block}
@media (hover:hover){.inv-cell:hover{border-color:var(--ink-2)}}
.inv-cell:focus-visible{outline:2px solid var(--act);outline-offset:2px}
.inv-cell.on{outline:2px solid var(--ink);outline-offset:2px;z-index:1}
.inv-cell.sim{outline:2px dashed var(--act);outline-offset:1px}
.inv-cell.cmp::after{content:"";position:absolute;left:3px;top:3px;width:5px;height:5px;border:1px solid currentColor;border-radius:1px}
.inv-cell.dim{opacity:.2}
/* states: fill, border and glyph */
.st-available{background:var(--surface);border-color:var(--ink-2);color:var(--ink)}
.st-available .u-no{font-weight:600}
@media (hover:hover){.inv-cell.st-available:hover{background:var(--hover)}}
.st-held{background:color-mix(in srgb,var(--act) 12%,var(--surface));border:1.5px solid var(--act);color:var(--ink)}
.st-held .u-mk,.inv-sw.st-held{color:var(--act)}
.st-neg{background:color-mix(in srgb,var(--act) 28%,var(--surface));border:1.5px solid var(--act);color:var(--ink)}
.st-neg .u-mk,.inv-sw.st-neg{color:var(--act)}
/* gone units recede: available stock is what should catch the eye */
.st-reserved{background:color-mix(in srgb,var(--ink) 16%,var(--surface));border-color:transparent;color:var(--ink-2);
  background-image:repeating-linear-gradient(135deg,transparent 0 4px,color-mix(in srgb,var(--ink) 22%,transparent) 4px 5px)}
.st-sold{background:color-mix(in srgb,var(--ink) 16%,var(--surface));border-color:transparent;color:var(--muted)}
.st-reserved .u-t,.st-sold .u-t{color:var(--muted)}
.st-nr{background:repeating-linear-gradient(45deg,transparent 0 5px,var(--line) 5px 6px);border:1px dashed var(--line-2);color:var(--faint);cursor:default}
.st-nr .u-t{color:var(--faint)}
.inv-cell.st-nr{cursor:pointer}
.inv-sw.st-available{border:1px solid var(--line-2);background:var(--surface)}
.inv-sw.st-reserved,.inv-sw.st-sold{color:var(--muted)}
/* interest overlay: a four-step jacaranda ramp */
.inv-draw[data-ov="interest"] .inv-cell:is(.st-available,.st-held,.st-neg),.inv-sw.ht{background:var(--surface);border:1px solid var(--line-2);color:var(--ink)}
.inv-draw[data-ov="interest"] .inv-cell[data-h="1"],.inv-sw.ht[data-h="1"]{background:color-mix(in srgb,var(--act) 16%,var(--surface))}
.inv-draw[data-ov="interest"] .inv-cell[data-h="2"],.inv-sw.ht[data-h="2"]{background:color-mix(in srgb,var(--act) 40%,var(--surface))}
.inv-draw[data-ov="interest"] .inv-cell[data-h="3"],.inv-sw.ht[data-h="3"]{background:color-mix(in srgb,var(--act) 72%,var(--surface));color:var(--on-act);border-color:transparent}
.inv-draw[data-ov="interest"] .u-mk{opacity:.55}
/* price overlay: ink wash by price within the project */
.inv-draw[data-ov="price"] .inv-cell:not(.st-nr){background:color-mix(in srgb,var(--ink) calc(var(--p,0) * 62% + 3%),var(--surface));border:1px solid var(--line-2);color:var(--ink)}
.inv-draw[data-ov="price"] .inv-cell[data-hi]{color:var(--bg);border-color:transparent}
.inv-draw[data-ov="price"] .u-mk{opacity:.55}

/* villas: a site plan */
.inv-draw.site .inv-sheet{display:block;padding:var(--s5)}
.inv-site{position:relative;display:flex;flex-direction:column;gap:var(--s2)}
.inv-park{height:28px;border:1px dashed var(--good);border-radius:var(--r2);display:grid;place-items:center;font:400 11px var(--mono);color:var(--good);background:color-mix(in srgb,var(--good) 6%,transparent)}
.inv-site .inv-body{border-top:0;padding:0;gap:6px}
.inv-site .inv-body::before{display:none}
.inv-plots{display:flex;gap:6px}
.inv-plots .inv-cell{width:72px;height:52px;border-radius:2px}
.inv-road{height:28px;display:flex;align-items:center;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);background:repeating-linear-gradient(90deg,transparent 0 14px,var(--line) 14px 22px) center/100% 1px no-repeat}
.inv-road span{margin-left:var(--s2);padding:0 6px;background:var(--surface);font:400 10px var(--mono);color:var(--muted)}
.inv-site .inv-twf{margin-left:0}

/* title block and north arrow */
.inv-foot{position:sticky;left:0;display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s4);padding:0 var(--s5) var(--s4);width:100%;box-sizing:border-box}
.inv-titleblock{display:grid;grid-template-columns:auto auto auto;border:1px solid var(--line-2);font:400 10px/1.3 var(--mono);color:var(--muted);max-width:100%}
.inv-titleblock>*{padding:4px 8px;border-left:1px solid var(--line-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:280px}
.inv-titleblock>:first-child{border-left:0;color:var(--ink);font-weight:500}
.inv-north{width:120px;height:36px;color:var(--muted);flex:none;font-family:var(--mono)}

/* unit panel */
.inv-pan{position:sticky;top:0;border:1px solid var(--line);border-radius:var(--r2);background:var(--surface);max-height:calc(100vh - 140px);overflow:auto;overscroll-behavior:contain}
.inv-pan-h{position:sticky;top:0;z-index:1;display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s2);padding:var(--s3) var(--s3) var(--s2) var(--s4);background:var(--surface);border-bottom:1px solid var(--line)}
.inv-pan-tt{min-width:0}
.inv-pan-tt .small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inv-pan-t{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;margin:2px 0 0;font:600 20px/1.2 var(--display);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.inv-pan-b{padding:var(--s3) var(--s4) var(--s4);display:flex;flex-direction:column;gap:var(--s4)}
.inv-facts{display:grid;grid-template-columns:120px minmax(0,1fr);gap:var(--s3);align-items:start}
.inv-thumb{width:120px;height:72px;color:var(--ink-2);border:1px solid var(--line);border-radius:2px;background:var(--bg);font-family:var(--mono)}
.inv-dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px var(--s2);margin:0;font-size:12px}
.inv-dl dt{color:var(--muted)} .inv-dl dd{margin:0;color:var(--ink);overflow-wrap:anywhere}
.inv-price{display:flex;flex-direction:column;gap:4px}
.inv-split{display:flex;gap:2px;height:6px;margin-top:4px}
.inv-split i{border-radius:1px} .inv-split .s0{background:var(--ink)} .inv-split .s1{background:color-mix(in srgb,var(--ink) 40%,var(--surface))} .inv-split .s2{background:var(--line-2)}
.inv-split-l{display:flex;justify-content:space-between}
.inv-sec{display:flex;flex-direction:column;gap:var(--s2);padding-top:var(--s3);border-top:1px solid var(--line)}
.inv-claim{display:flex;flex-direction:column;gap:var(--s2)}
.inv-claimline{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0;font-size:13px}
.inv-exp{display:inline-flex;align-items:center;gap:6px;margin-left:auto;font:500 11px var(--mono);color:var(--ink-2);white-space:nowrap}
.inv-exp i{position:relative;display:block;width:40px;height:3px;background:var(--line);border-radius:2px;overflow:hidden}
.inv-exp i::after{content:"";position:absolute;inset:0;width:calc(var(--f,1) * 100%);background:var(--act)}
.inv-exp.soon{color:var(--warn)} .inv-exp.soon i::after{background:var(--warn)}
.inv-exp.paused{color:var(--muted)}
.inv-acts{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}
.inv-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.inv-list li{display:flex;align-items:center;gap:var(--s2);min-height:32px;border-bottom:1px solid var(--line);font-size:13px}
.inv-list li:last-child{border-bottom:0}
.inv-list .fn{margin-left:auto;white-space:nowrap}
.inv-wn{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inv-aisay{margin:0;padding:2px 0 2px var(--s3)}
.inv-aisay blockquote{margin:0 0 4px;font-size:14px;line-height:1.45;color:var(--ink)}
.inv-hist{list-style:none;margin:0;padding:0 0 0 var(--s3);border-left:1px solid var(--line-2);display:flex;flex-direction:column;gap:var(--s2)}
.inv-hist li{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;font-size:12px;position:relative}
.inv-hist li::before{content:"";position:absolute;left:calc(-1 * var(--s3) - 3px);top:5px;width:5px;height:5px;border-radius:50%;background:var(--surface);border:1px solid var(--ink-2)}
.inv-grip{display:none}

/* floor plan */
.inv-fp{display:flex;flex-direction:column;gap:var(--s3);border:1px solid var(--line);border-radius:var(--r2);background:var(--surface);padding:var(--s3) var(--s4) var(--s4)}
.inv-fp-h{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3)}
.inv-fp-h .btn{gap:4px}
.inv-back svg{transform:rotate(180deg);display:block}
.inv-fp-draw{position:relative}
.inv-plan{width:100%;height:auto;display:block;max-height:60vh;font-family:var(--mono)}
.inv-plan .wall{fill:none;stroke:var(--ink-2);stroke-width:3}
.inv-plan .corr{fill:var(--bg);stroke:var(--line-2)}
.inv-plan .core rect{fill:var(--bg);stroke:var(--ink-2)} .inv-plan .core path{stroke:var(--line-2)}
.inv-room{cursor:pointer;outline:none}
.inv-room rect{stroke:var(--ink-2);stroke-width:1;fill:var(--surface);transition:fill 160ms var(--ease-out)}
.inv-room .door{fill:none;stroke:var(--muted);stroke-width:1}
.inv-room text{fill:var(--ink)} .inv-room .rn{font-size:13px;font-weight:500} .inv-room .rt,.inv-room .rs{font-size:10px;fill:var(--muted)}
.inv-plan text.rs{font-size:10px;fill:var(--muted)}
.inv-room.st-held rect{fill:color-mix(in srgb,var(--act) 12%,var(--surface));stroke:var(--act);stroke-width:1.5}
.inv-room.st-neg rect{fill:color-mix(in srgb,var(--act) 28%,var(--surface));stroke:var(--act);stroke-width:1.5}
.inv-room.st-reserved rect,.inv-room.st-sold rect{fill:color-mix(in srgb,var(--ink) 16%,var(--surface));stroke:var(--line-2)}
.inv-room.st-reserved text,.inv-room.st-sold text{fill:var(--muted)}
.inv-room.st-nr rect{fill:var(--bg);stroke-dasharray:4 3;stroke:var(--line-2)}
.inv-room.st-nr text{fill:var(--faint)}
.inv-room:hover rect{stroke:var(--ink)}
.inv-room:focus-visible rect,.inv-room.on rect{stroke:var(--ink);stroke-width:3}
.inv-room.dim{opacity:.25}
.inv-fp .inv-north{display:block;margin:4px 0 0 auto}
.inv-fp-list{display:none;list-style:none;margin:0;padding:0}
.inv-fp-list li{display:flex;align-items:center;gap:var(--s2);min-height:40px;border-bottom:1px solid var(--line);font-size:13px}
.inv-fp-list .stamp{margin-left:auto}

/* ledger */
.inv-ledger{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:var(--s4) var(--s6);padding-top:var(--s4);border-top:1px solid var(--line)}
.inv-led-hero{grid-column:1;display:flex;flex-direction:column;gap:6px}
.inv-hero{display:flex;align-items:baseline;gap:var(--s2);margin:0;font-size:14px;color:var(--ink-2)}
.inv-led-tbl{grid-column:2;grid-row:1;overflow-x:auto}
.inv-tbl{width:100%;border-collapse:collapse;font-size:12px}
.inv-tbl th,.inv-tbl td{padding:6px var(--s2);border-bottom:1px solid var(--line);text-align:right;font-variant-numeric:tabular-nums}
.inv-tbl td{font-family:var(--mono)}
.inv-tbl th:first-child{text-align:left;font-weight:500;color:var(--ink)}
.inv-tbl thead th{font-weight:500;color:var(--muted);font-size:11px;border-bottom:1px solid var(--line-2)}
.inv-tbl td.zero{color:var(--bad)}


/* compare tray */
.inv-tray{position:sticky;bottom:0;z-index:5;align-self:center;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);padding:6px 6px 6px var(--s3);background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r3);box-shadow:var(--shadow-2)}
.inv-tray .chip{gap:2px;padding-right:2px}
.inv-x{all:unset;box-sizing:border-box;width:18px;height:18px;display:grid;place-items:center;border-radius:50%;cursor:pointer;color:var(--muted)}
.inv-x:hover{background:var(--hover);color:var(--ink)} .inv-x svg{width:12px;height:12px}
.inv-cmpt td,.inv-cmpt th{text-align:left}
.inv-cmpt tr.diff td{background:var(--sel);font-weight:600}

/* narrower desktops: the panel stays docked but slimmer, floor summaries hide */
@media (max-width:1280px){.inv-grid{grid-template-columns:minmax(0,1fr) 320px}.inv-fsum{display:none}.inv-sheet{gap:40px}}
@media (max-width:1100px){.inv-ledger{grid-template-columns:minmax(0,1fr)}.inv-led-tbl{grid-column:1;grid-row:auto}}
/* phone: the panel becomes a bottom sheet above the tab bar */
@media (max-width:760px){
  .inv-grid{grid-template-columns:minmax(0,1fr)}
  .inv-draw{max-height:none;min-height:0}
  .inv-sheet{padding:var(--s4) var(--s3) 0;gap:8px;flex-direction:column;align-items:flex-start}
  .inv-cell{width:40px;height:40px}
  .inv-cols i{width:40px}
  .inv-cells.ph{width:calc(var(--per,2) * 44px)}
  .inv-plots .inv-cell{width:56px;height:48px}
  .inv-foot{padding:0 var(--s3) var(--s3)} .inv-titleblock{display:none}
  .inv-key{gap:0}
  .inv-pan:not(.open){position:static;max-height:none}
  .inv-pan.open{position:fixed;top:auto;left:0;right:0;bottom:calc(58px + env(safe-area-inset-bottom,0px));z-index:40;max-height:72dvh;border-radius:var(--r3) var(--r3) 0 0;border-bottom:0;box-shadow:var(--shadow-3)}
  .inv-pan.open .inv-grip{display:block;width:36px;height:4px;border-radius:2px;background:var(--line-2);margin:6px auto 0;position:sticky;top:0}
  .inv-pan-h{top:0}
  .inv-facts{grid-template-columns:96px minmax(0,1fr)} .inv-thumb{width:96px;height:58px}
  .inv-plan{display:none}.inv-fp .inv-north{display:none}.inv-fp-list{display:block}
  .inv-tray{bottom:calc(64px + env(safe-area-inset-bottom,0px))}
}
@media (prefers-reduced-motion:reduce){.inv-cell,.inv-room rect,button.inv-k{transition:none}}


/* ===== motion (MOTION.md § Inventory, emil-polish) — pairs with the "motion hooks (emil-polish)" block at the end of inventory.js =====
   select: the ring is instant; arrow keys move focus with no motion; press gives 3%; the selected unit sits lifted (spring in JS). */
.inv-cell{transition-property:background-color,border-color,color,opacity,transform;transition-duration:160ms,120ms,160ms,160ms,var(--dur-press);transition-timing-function:var(--ease-out)}
/* hover and press stay off transform in a dense grid: an ink inset line (80ms) and a 4% darken (100ms) */
@media (hover:hover){.inv-cell:hover{box-shadow:inset 0 0 0 1px var(--ink)}}
.inv-cell{transition-duration:160ms,120ms,160ms,160ms,var(--dur-press)}
@media (pointer:fine){.inv-cell:active{filter:brightness(.96);transition:filter 100ms ease}}
/* the selection ring is its own layer so it can spring in without scaling the cell's neighbours */
.inv-ring{position:absolute;inset:-4px;border-radius:5px;border:2px solid var(--ink);pointer-events:none}
.inv-cell:focus-visible{transition-property:background-color,border-color,color,opacity}
.inv-cell.on{transform:scale(1.04);transition-timing-function:var(--spring-settle)}
.inv-cell.on{outline-color:transparent}
.inv-cell.on::before{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 4px 10px -4px color-mix(in srgb,var(--ink) 35%,transparent);pointer-events:none}

/* overlay switch: one view transition on the drawing; the old picture is masked away by a soft 30% edge sweeping left to right (240ms) */
html.vt-inv .inv-draw{view-transition-name:inv-draw}
html.vt-inv::view-transition-old(root),html.vt-inv::view-transition-new(root){animation:none}
html.vt-inv::view-transition-group(inv-draw){animation:none}
html.vt-inv::view-transition-new(inv-draw){animation:none}
html.vt-inv::view-transition-old(inv-draw){z-index:1;-webkit-mask-image:linear-gradient(90deg,transparent 0 35%,#000 65%);mask-image:linear-gradient(90deg,transparent 0 35%,#000 65%);
  -webkit-mask-size:300% 100%;mask-size:300% 100%;animation:inv-sweep 240ms var(--ease-out) both}
@keyframes inv-sweep{from{-webkit-mask-position:100% 0;mask-position:100% 0}to{-webkit-mask-position:0 0;mask-position:0 0}}
html.vt-inv.vt-fade::view-transition-old(inv-draw){-webkit-mask-image:none;mask-image:none;animation:inv-fadeout 150ms ease-out both}
@keyframes inv-fadeout{to{opacity:0}}

/* release advance: a hatch layer laid over each newly released unit, wiped away by JS (clip-path) */
.inv-hatch{position:absolute;inset:-1px;border-radius:inherit;border:1px dashed var(--line-2);background:var(--surface) repeating-linear-gradient(45deg,transparent 0 5px,var(--line) 5px 6px);pointer-events:none;z-index:2}

/* heat overlay: a soft wash. Flat tints, no borders on warm cells, no glow. The hue stays jacaranda because interest is people (art direction) */
.inv-draw[data-ov="interest"] .inv-cell[data-h="1"],.inv-draw[data-ov="interest"] .inv-cell[data-h="2"],.inv-draw[data-ov="interest"] .inv-cell[data-h="3"]{border-color:transparent}
.inv-draw[data-ov="interest"] .inv-cell[data-h="3"],.inv-sw.ht[data-h="3"]{background:color-mix(in srgb,var(--act) 62%,var(--surface))}

/* phone sheet: the grip is a real handle (wider hit area, no browser scroll on it); core.js drives the drag */
@media (max-width:760px){
  .inv-pan.open .inv-grip{touch-action:none;cursor:grab;padding:8px 0;margin:0 auto;width:72px;height:auto;background:none;position:sticky;top:0}
  .inv-pan.open .inv-grip::before{content:"";display:block;width:36px;height:4px;margin:0 auto;border-radius:2px;background:var(--line-2)}
  .inv-pan.open .inv-pan-h{touch-action:pan-x}
}
@media (prefers-reduced-motion:reduce){.inv-cell{transition-property:background-color,border-color,color,opacity}.inv-cell:active{transform:none}.inv-cell.on{transform:none}}
/* summary numbers that changed: a neutral wash that fades (never amber) */
.inv-k b.inv-wash{border-radius:3px}
/* inv-critic P1-4: the composition sits centred in its card; the card hugs its content */
.inv-sheet{justify-content:center}
.inv-draw.site .inv-sheet{display:flex;justify-content:center}
.inv-grid > :first-child{align-self:start}

/* inv-critic round 1 */
/* Free now index */
.inv-free{border-top:0;padding-top:0}
.inv-free-r{display:grid;grid-template-columns:92px minmax(0,1fr);gap:var(--s2);padding:6px 0;border-bottom:1px solid var(--line);align-items:start}
.inv-free-t{font-size:12px;color:var(--ink-2);padding-top:5px}
.inv-free-t b{font:500 11px var(--mono);color:var(--muted);margin-left:2px}
.inv-free-c{display:flex;flex-wrap:wrap;gap:4px}
.inv-fc{height:24px!important;padding:0 8px!important;font:500 11px var(--mono)!important}
.inv-leads .stamp{flex:none;min-width:76px;justify-content:center}
/* floor summaries wrap instead of clipping */
.inv-fsum{white-space:normal;max-width:96px;line-height:1.25}
/* unit number stays visible under the interest and price overlays */
.inv-cell .u-id{position:absolute;left:3px;bottom:2px;font:400 8.5px/1 var(--mono);opacity:.7}
.inv-draw[data-ov="interest"] .inv-cell .u-no,.inv-draw[data-ov="price"] .inv-cell .u-no{margin-top:-6px}
/* phone sheet: the claim actions stay reachable at the bottom */
@media (max-width:760px){
  .inv-pan.open .inv-pan-b{padding-bottom:calc(var(--s4) + env(safe-area-inset-bottom,0px))}
  .inv-free-r{grid-template-columns:76px minmax(0,1fr)}
}
.inv-cell.on.inv-pre{transform:none}.inv-cell.on.inv-pre::before{opacity:0}
/* inv-critic P2-15: on a phone the sheet's actions read as one decision: the primary spans the row, the rest share one quiet row */
@media (max-width:600px){
  .inv-pan.open .inv-acts{flex-wrap:wrap;gap:var(--s2)}
  .inv-pan.open .inv-acts>.btn.primary{flex:1 1 100%;order:-1}
  .inv-pan.open .inv-acts>.btn:not(.primary){flex:1 1 0;min-width:0;padding:0 var(--s2)}
  .inv-pan.open .inv-acts>.btn.ghost{flex:0 0 auto}
  .inv-pan.open .inv-acts>[data-act="invCmp"]{flex:0 0 auto}
}

/* inv-critic round 2: phone "Free now" row and a sticky action footer in the unit sheet */
.inv-free-m,.inv-pan-f{display:none}
@media (max-width:760px){
  .inv-free-m{display:block;border:1px solid var(--line);border-radius:var(--r2);background:var(--surface)}
  .inv-free-m>summary{list-style:none;display:flex;align-items:center;gap:var(--s2);min-height:44px;padding:0 var(--s3);cursor:pointer;font-size:13px}
  .inv-free-m>summary::-webkit-details-marker{display:none}
  .inv-free-m>summary span{color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .inv-free-m>summary span b{font:500 11px var(--mono);color:var(--muted)}
  .inv-free-m>summary::after{content:"";margin-left:auto;flex:none;width:7px;height:7px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(-45deg)}
  .inv-free-m[open]>summary::after{transform:rotate(45deg)}
  .inv-free-m .inv-free{padding:0 var(--s3) var(--s2)}
  .inv-pan:not(.open) .inv-free{display:none}
  .inv-pan.open .inv-pan-f{display:flex;gap:var(--s2);position:sticky;bottom:0;z-index:2;background:var(--surface);border-top:1px solid var(--line);padding:var(--s2) var(--s4) calc(var(--s2) + env(safe-area-inset-bottom,0px))}
  .inv-pan-f .btn{flex:1}
}

/* inv-critic round 3 */
/* P1-16: with a unit open on narrower desktops the elevation tightens, and an overflow fade and hint appear */
.inv-drawwrap{position:relative;min-width:0}
.inv-drawwrap::after{content:"";position:absolute;top:1px;right:1px;bottom:1px;width:48px;border-radius:0 var(--r2) var(--r2) 0;pointer-events:none;opacity:0;background:linear-gradient(90deg,transparent,var(--surface))}
.inv-drawwrap:has(.inv-draw.ovf-r)::after{opacity:1}
/* the edge fade animates only once the drawing has been scrolled; a re-render (filter, overlay) shows it instantly instead of re-fading */
.inv-drawwrap:has(.inv-draw.ovf-l)::after{transition:opacity 160ms var(--ease-out)}
.inv-more{all:unset;box-sizing:border-box;position:absolute;right:12px;top:12px;z-index:2;height:28px;padding:0 10px;border:1px solid var(--line-2);border-radius:999px;background:var(--surface);font:500 12px var(--body);color:var(--ink-2);cursor:pointer;box-shadow:var(--shadow-1)}
.inv-more:hover{color:var(--ink);background:var(--hover)} .inv-more:focus-visible{outline:2px solid var(--act);outline-offset:2px}
.inv-more[hidden]{display:none}
@media (min-width:761px) and (max-width:1366px){
  .inv-grid.has-sel .inv-cell{width:36px;height:30px;padding:0 3px}
  .inv-grid.has-sel .inv-cell .u-t{display:none}
  .inv-grid.has-sel .inv-cell .u-no{font-size:9.5px;margin-top:-6px}
  .inv-grid.has-sel .inv-cell .u-mk{right:2px;bottom:2px}
  .inv-grid.has-sel .inv-cols i{width:36px}
  .inv-grid.has-sel .inv-tw{--w:calc(var(--per,4) * 40px + 10px)}
  .inv-grid.has-sel .inv-cells.ph{width:calc(var(--per,2) * 40px)}
  .inv-grid.has-sel .inv-lv{height:30px}
  .inv-grid.has-sel .inv-fsum{display:none}
  .inv-grid.has-sel .inv-sheet{gap:28px}
  .inv-grid.has-sel .inv-twf{max-width:var(--w)}
}
/* P2-17: on phone the sheet footer carries the main action, so the in-flow copies hide; Dismiss, Compare and Extend stay */
@media (max-width:760px){
  .inv-pan.open:has(.inv-pan-f) .inv-pan-b .inv-acts .btn:not([data-act="invCmp"]){display:none}
}