← back to Agent Cabinet
front-page-audit/screens/crcp/repro/repro.html
464 lines
<!doctype html><html data-theme="dark"><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>CRCP repro</title>
<link rel="stylesheet" href="/crcp-theme.css">
<style>
:root { --cols:3; --drawerW:316px; }
:root { --cols:3; --drawerW:316px; }
* { box-sizing:border-box; }
:focus-visible { outline:2px solid var(--blue); outline-offset:2px; border-radius:4px; }
@media (prefers-reduced-motion: reduce){ *,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } }
body { margin:0; background:var(--bg); color:var(--ink); font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
/* ---- top bar ---- */
header { display:flex; align-items:center; gap:14px; padding:12px 20px; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:30; background:var(--headbg); backdrop-filter:blur(8px); }
.burger { display:inline-flex; align-items:center; gap:8px; background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:10px; padding:9px 13px; font-size:15px; cursor:pointer; font-weight:600; }
.burger:hover { border-color:var(--blue); }
.fcount { display:none; background:var(--blue); color:#04122b; font-size:11px; font-weight:700; border-radius:20px; padding:1px 7px; }
.fcount.on { display:inline-block; }
.htitle h1 { margin:0; font-size:18px; letter-spacing:.2px; }
.htitle .sub { color:var(--mut); font-size:12px; }
header .spacer { margin-left:auto; }
/* nav-link cluster; on wide screens it sits inline right-aligned, on tablets/phones it becomes a swipeable strip (see @media 1024) */
.topnav { display:flex; align-items:center; flex-wrap:nowrap; }
.seg { display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.seg button { background:var(--card); color:var(--ink); border:0; border-right:1px solid var(--line); padding:8px 11px; font-size:12px; cursor:pointer; }
.seg button:last-child { border-right:0; }
.seg button.active { background:#1f6feb; color:#fff; }
#drawer .seg { display:flex; width:100%; }
#drawer .seg button { flex:1; text-align:center; padding:9px 6px; }
/* ---- left drawer ---- */
#scrim { position:fixed; inset:0; background:rgba(0,0,0,.5); opacity:0; pointer-events:none; transition:opacity .2s; z-index:38; }
#scrim.on { opacity:1; pointer-events:auto; }
#drawer { position:fixed; top:0; left:0; height:100vh; width:var(--drawerW); background:var(--bg2); border-right:1px solid var(--line); transform:translateX(-100%); transition:transform .22s ease; z-index:40; overflow-y:auto; padding:0 0 40px; }
#drawer.open { transform:translateX(0); box-shadow:6px 0 30px rgba(0,0,0,.4); }
.dhead { display:flex; align-items:center; justify-content:space-between; padding:16px 18px 10px; position:sticky; top:0; background:var(--bg2); border-bottom:1px solid var(--line); z-index:2; }
.dhead b { font-size:15px; } .dhead .x { background:none; border:0; color:var(--mut); font-size:18px; cursor:pointer; }
.fsec { padding:14px 18px; border-bottom:1px solid var(--line); }
.fsec h4 { margin:0 0 9px; font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:var(--mut); }
.chips { display:flex; flex-wrap:wrap; gap:6px; }
.chip { background:var(--card); color:var(--mut); border:1px solid var(--line); border-radius:18px; padding:5px 11px; font-size:12px; cursor:pointer; user-select:none; }
.chip:hover { color:var(--ink); }
.chip.active { border-color:var(--blue); color:var(--blue); background:rgba(88,166,255,.08); }
.chip .ct { color:var(--mut); font-size:10px; margin-left:4px; }
.chip.zero { opacity:.4; }
.row2 { display:flex; gap:8px; }
.fld { flex:1; }
.fld label { display:block; font-size:10px; color:var(--mut); margin-bottom:3px; }
input[type=text], input[type=number], select { width:100%; background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:8px; padding:8px 10px; font-size:13px; }
input[type=range] { width:100%; accent-color:var(--blue); }
.rangeval { font-size:11px; color:var(--blue); float:right; }
.toggle { display:flex; align-items:center; gap:8px; font-size:13px; cursor:pointer; }
.resetbtn { width:calc(100% - 36px); margin:14px 18px 0; background:transparent; color:var(--bad); border:1px solid #7d2b28; border-radius:9px; padding:9px; font-size:13px; cursor:pointer; }
/* ---- results bar + grid ---- */
.bar { display:flex; flex-wrap:wrap; align-items:center; gap:14px; padding:11px 20px; border-bottom:1px solid var(--line); position:sticky; top:57px; background:var(--headbg); backdrop-filter:blur(6px); z-index:20; }
.bar .count { font-size:13px; color:var(--mut); } .bar .count b { color:var(--ink); }
.bar label { font-size:11px; color:var(--mut); text-transform:uppercase; letter-spacing:.5px; }
.bar .right { margin-left:auto; display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:flex-end; min-width:0; } /* wrap so the search/heat/sort controls can't overflow under the right-hand #ctrlrail when main is narrow */
.grid { display:grid; grid-template-columns:repeat(var(--cols),minmax(0,1fr)); gap:22px; padding:30px 32px 44px; }
@media (max-width:900px){ .grid{ grid-template-columns:repeat(2,minmax(0,1fr));} }
/* ---- iPad / tablet / narrow-desktop band (≤1024): keep header ONE fixed row so sticky offsets hold,
turn the nav-link cluster into a swipeable horizontal strip instead of clipping off-screen. ---- */
@media (max-width:1024px){
.grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } /* docked-drawer band: 2 cols so cards aren't crushed (iPad landscape) */
header{ flex-wrap:nowrap; gap:10px; }
header .spacer{ display:none; } /* nav no longer right-pushed; topnav flexes to fill */
.htitle{ min-width:0; flex:0 1 auto; } /* let the title shrink instead of shoving nav off-screen */
.htitle h1{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.htitle .sub{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* keep title block 2 lines → header stays ~57px so sticky bar/drawer offsets hold */
.topnav{ flex:1 1 auto; min-width:0; overflow-x:auto; overflow-y:hidden;
-webkit-overflow-scrolling:touch; scrollbar-width:none; } /* iOS momentum-scroll, hidden scrollbar */
.topnav::-webkit-scrollbar{ display:none; }
.topnav > a, .topnav > .seg{ flex:0 0 auto; } /* items keep intrinsic width; strip scrolls, nothing clips */
.topnav > a{ padding:8px 0; } /* taller touch target for finger taps */
html, body{ overflow-x:hidden; max-width:100%; } /* no horizontal page scroll on iPad (html is the scroller) */
.bar{ max-width:100%; top:auto; } /* sort/density strip: no hairline overflow; un-stick so it can't tuck under the taller (burger+title) iPad header */
}
@media (max-width:620px){ .grid{ grid-template-columns:1fr;} }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:24px; display:flex; flex-direction:column; gap:10px; position:relative; transition:box-shadow .2s,border-color .2s; }
.card.uc { opacity:.62; }
.card.flash { border-color:var(--blue); box-shadow:0 0 0 3px rgba(88,166,255,.35); }
.top { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.rank { font-size:12px; color:var(--mut); }
.score { font-size:30px; font-weight:700; line-height:1; }
.score small { font-size:11px; color:var(--mut); font-weight:400; display:block; text-align:right; }
.addr { font-weight:600; font-size:15px; }
.city { color:var(--mut); font-size:13px; }
.badges { display:flex; flex-wrap:wrap; gap:6px; }
.b { font-size:11px; padding:3px 8px; border-radius:20px; border:1px solid var(--line); color:var(--mut); }
.b.type { color:var(--blue); border-color:#284b7a; }
.b.deal-badge { font-weight:700; cursor:help; }
.b.ok { color:var(--acc); border-color:#1f6f37; }
.b.warn { color:var(--warn); border-color:#6b5320; }
.b.bad { color:var(--bad); border-color:#7d2b28; }
.b.rec-Buy { color:var(--acc); border-color:#1f6f37; font-weight:600; }
.b.rec-Watch { color:var(--warn); border-color:#6b5320; font-weight:600; }
.b.rec-Pass { color:var(--bad); border-color:#7d2b28; font-weight:600; }
.metrics { display:grid; grid-template-columns:1fr 1fr; gap:6px 14px; font-size:13px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:10px 0; }
.metrics div { display:flex; justify-content:space-between; }
.metrics .k { color:var(--mut); }
.metrics .v { font-variant-numeric:tabular-nums; font-weight:600; }
.pos { color:var(--acc); } .neg { color:var(--bad); } .na { color:var(--mut); }
.thesis { font-size:13px; color:var(--ink); }
.lst { font-size:12px; color:var(--mut); margin:2px 0 0; padding-left:16px; }
.src { font-size:12px; } .src a { color:var(--blue); text-decoration:none; }
.lcbtn,.histbtn { background:transparent; color:var(--warn); border:1px dashed #6b5320; border-radius:14px; padding:2px 8px; font-size:11px; cursor:pointer; }
.histbtn { color:var(--blue); border-color:#284b7a; }
.lcout,.histout { font-size:11px; color:var(--mut); margin-top:6px; }
.lcout a { color:var(--blue); text-decoration:none; }
.lcout .lc-item { padding:4px 0; border-top:1px solid var(--line); }
.small { font-size:11px; color:var(--mut); }
.statusline { font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; padding:5px 9px; border-radius:8px; border:1px solid var(--line); background:rgba(255,255,255,.02); }
.statusline.ok { color:var(--acc); border-color:#1f6f37; }
.statusline.warn { color:var(--warn); border-color:#6b5320; }
.statusline.bad { color:var(--bad); border-color:#7d2b28; }
.statusline.mut { color:var(--mut); }
.statusline.none { color:var(--warn); border-color:#6b5320; border-style:dashed; }
.foot { color:var(--mut); font-size:12px; padding:0 20px 8px; }
.empty { padding:60px 20px; text-align:center; color:var(--mut); }
/* ---- Broker-history + prior-broker flag ---- */
.brokerflag { display:inline-flex; align-items:center; gap:5px; font-size:11px; padding:3px 9px; border-radius:20px; background:rgba(255,159,9,.10); color:#ff9f09; border:1px solid rgba(255,159,9,.35); font-weight:700; cursor:help; margin-top:2px; }
.txhist { font-size:11px; color:var(--mut); margin-top:4px; line-height:1.5; }
.txhist .tx-row { display:flex; gap:8px; align-items:baseline; padding:2px 0; border-bottom:1px dashed rgba(255,255,255,.05); }
.txhist .tx-row:last-child { border-bottom:0; }
.txhist .tx-date { color:var(--blue); font-variant-numeric:tabular-nums; min-width:72px; }
.txhist .tx-ev { flex:1; }
.txhist .tx-price { color:var(--acc); font-weight:600; font-variant-numeric:tabular-nums; }
.brokerline { font-size:11px; padding:4px 9px; background:rgba(88,166,255,.06); border-radius:7px; border:1px solid rgba(88,166,255,.15); color:#a5c8ff; margin-top:3px; }
.brokerline strong { color:var(--blue); }
/* ---- docked chat ---- */
#chatwrap { border-top:1px solid var(--line); background:var(--bg2); padding:16px 20px 40px; }
#chatwrap h2 { font-size:15px; margin:0 0 2px; }
#chatwrap .hint { color:var(--mut); font-size:12px; margin-bottom:10px; }
#log { display:flex; flex-direction:column; gap:10px; max-height:42vh; overflow-y:auto; padding:4px 2px; }
.msg { max-width:80%; padding:9px 13px; border-radius:12px; font-size:14px; line-height:1.45; white-space:pre-wrap; word-wrap:break-word; }
.msg.u { align-self:flex-end; background:#1f6feb; color:#fff; border-bottom-right-radius:3px; }
.msg.a { align-self:flex-start; background:var(--card); border:1px solid var(--line); border-bottom-left-radius:3px; }
.msg.a code { background:var(--bg); padding:1px 5px; border-radius:4px; }
.msg.sys { align-self:center; color:var(--mut); font-size:12px; background:transparent; }
.actiontag { display:inline-block; margin-top:6px; font-size:11px; color:var(--acc); border:1px solid #1f6f37; border-radius:6px; padding:2px 7px; }
#chatform { display:flex; gap:10px; margin-top:12px; }
#q { flex:1; background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:10px; padding:11px 13px; font-size:14px; }
#send { background:#1f6feb; color:#fff; border:0; border-radius:10px; padding:0 20px; font-size:14px; font-weight:600; cursor:pointer; }
#send:disabled { opacity:.5; cursor:default; }
.examples { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.ex { font-size:12px; color:var(--blue); border:1px dashed #284b7a; border-radius:16px; padding:4px 10px; cursor:pointer; background:transparent; }
/* ---- view toggle (grid/list) ---- */
.viewseg { display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.viewseg button { background:var(--card); color:var(--mut); border:0; border-right:1px solid var(--line); padding:7px 12px; font-size:12px; cursor:pointer; }
.viewseg button:last-child { border-right:0; }
.viewseg button.active { background:#1f6feb; color:#fff; }
/* ===== nav-agent inline views: compact List / KV / Table group headers ===== */
.compacthost, .kvhost { padding:20px 32px 44px; }
.compactlist { display:flex; flex-direction:column; gap:6px; }
.crow { display:flex; align-items:center; gap:12px; background:var(--card); border:1px solid var(--line); border-radius:9px; padding:8px 12px; }
.crow .starbtn { flex:0 0 auto; }
.crow .cid { flex:0 0 220px; min-width:180px; }
.crow .cla { display:block; font-weight:600; color:var(--ink); font-size:13.5px; }
.crow .clc { display:block; color:var(--mut); font-size:11px; }
.crow .cfields { flex:1; display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; min-width:0; }
.cchip { font-size:12px; color:var(--ink); white-space:nowrap; }
.cchip .cck { color:var(--mut); font-size:10px; text-transform:uppercase; letter-spacing:.3px; margin-right:3px; }
.kvgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:16px; }
.kvcard { background:var(--card); border:1px solid var(--line); border-radius:11px; padding:12px 14px; }
.kvhead { display:flex; align-items:center; gap:8px; margin-bottom:8px; padding-bottom:8px; border-bottom:1px solid var(--line); }
.kvaddr { font-weight:600; font-size:14px; color:var(--ink); }
.kvrow { display:flex; gap:10px; padding:3px 0; font-size:12.5px; border-bottom:1px solid rgba(127,127,127,.08); }
.kvrow:last-child { border-bottom:0; }
.kvk { flex:0 0 42%; color:var(--mut); text-transform:uppercase; font-size:10px; letter-spacing:.3px; padding-top:2px; }
.kvv { flex:1; color:var(--ink); min-width:0; word-break:break-word; }
.grouphead { padding:8px 12px; margin:10px 0 4px; background:rgba(88,166,255,.08); border-left:3px solid var(--blue); border-radius:4px; font-size:12px; color:var(--mut); text-transform:uppercase; letter-spacing:.4px; }
.grouphead b { color:var(--ink); }
.kvgrid .grouphead { grid-column:1/-1; }
tr.grouprow td.groupcell { background:rgba(88,166,255,.10); font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:var(--mut); padding:7px 10px; }
tr.grouprow td.groupcell b { color:var(--ink); }
/* ===== right-hand control rail (in-flow, NOT floating) — nav-agent skill surface ===== */
#ctrlrail { flex:0 0 var(--railW,272px); width:var(--railW,272px); border-left:1px solid var(--line); background:var(--headbg); align-self:stretch; padding:12px 12px 40px; position:sticky; top:57px; max-height:calc(100vh - 57px); overflow-y:auto; }
#ctrlrail .railtitle { font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:var(--mut); margin:2px 4px 12px; display:flex; align-items:center; gap:6px; }
.rpanel { border:1px solid var(--line); border-radius:9px; margin-bottom:8px; overflow:hidden; background:var(--card); }
.rpanel > .rphead { width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px; background:transparent; color:var(--ink); border:0; padding:10px 12px; font-size:12.5px; font-weight:600; cursor:pointer; text-align:left; }
.rpanel > .rphead:hover { color:var(--blue); }
.rpanel > .rphead .caret { color:var(--mut); font-size:11px; transition:transform .15s; }
.rpanel.open > .rphead .caret { transform:rotate(90deg); color:var(--blue); }
.rpanel > .rpbody { display:none; padding:4px 12px 12px; }
.rpanel.open > .rpbody { display:block; }
.rpbody select, .rpbody input[type=text] { width:100%; background:var(--bg); color:var(--ink); border:1px solid var(--line); border-radius:7px; padding:7px 9px; font-size:12px; margin-top:6px; }
.rpbody .rlbl { font-size:11px; color:var(--mut); margin-top:8px; display:block; }
.rpbody .ftog { display:flex; width:100%; margin:0 0 4px; }
@media (max-width:1100px){ #ctrlrail { display:none; } } /* on narrow screens the left drawer already carries these controls */
/* ---- field show/hide toggles: one CARD per field, click to toggle on/off ---- */
.fieldtoggles { display:flex; flex-wrap:wrap; gap:6px; max-height:360px; overflow-y:auto; padding:2px 4px 2px 0; }
.ftog { display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--mut); cursor:pointer; padding:5px 9px;
border:1px solid var(--line); border-radius:9px; background:var(--card); user-select:none; transition:border-color .12s,color .12s,background .12s; }
.ftog input { display:none; } /* card IS the toggle; checkbox drives state via :has() */
.ftog::before { content:'○'; font-size:11px; color:var(--mut); }
.ftog:hover { border-color:var(--blue); color:var(--ink); }
.ftog:has(input:checked) { border-color:var(--blue); color:var(--blue); background:rgba(88,166,255,.10); }
.ftog:has(input:checked)::before { content:'●'; color:var(--blue); }
.ftog .colbadge { color:var(--mut); font-size:10px; }
/* panel drag-to-reorder (Fix 3) */
.ftog .flbl { flex:1; }
.ftog .fdrag { cursor:grab; color:var(--mut); font-size:12px; opacity:.5; user-select:none; line-height:1; margin-right:2px; }
.ftog:hover .fdrag { opacity:1; }
.ftog.fdragging { opacity:.45; }
.ftog.fdropT { box-shadow:inset 0 3px 0 var(--gold); }
.ftog.fdropB { box-shadow:inset 0 -3px 0 var(--gold); }
.minibtn { background:var(--card); color:var(--mut); border:1px solid var(--line); border-radius:7px; padding:4px 9px; font-size:11px; cursor:pointer; margin-right:5px; }
.minibtn:hover { border-color:var(--blue); color:var(--ink); }
/* ---- list view ---- */
.listhost { display:block; padding:20px 20px 30px; }
.listwrap { overflow:auto; border:1px solid var(--line); border-radius:12px; }
/* col-resize.js wraps the table in .cr-scroll (overflow:auto) — THAT is the th's nearest scroll
container, so bounding ITS height (not .listwrap's) is what makes the sticky header (thead
top:0) AND sticky first column (td.stick left:0) actually freeze while scrolling both axes.
--tbl-top = the sticky app-chrome height above the table (tune per layout). */
.cr-scroll { max-height:calc(100vh - var(--tbl-top, 178px)); }
/* max-content so columns size to their content and expand left/right (no artificial squish);
min-width:100% keeps it filling the pane when there are few columns; .listwrap scrolls-x. */
.listtbl { width:max-content; min-width:100%; border-collapse:collapse; font-size:12.5px; white-space:nowrap; }
.listtbl th, .listtbl td { text-align:right; padding:9px 13px; border-top:1px solid var(--line); }
.listtbl th { position:sticky; top:0; background:var(--bg2); color:var(--mut); font-size:10px; text-transform:uppercase; letter-spacing:.5px; border-top:0; z-index:2; }
.listtbl td.stick, .listtbl th.stick { text-align:left; position:sticky; left:0; background:var(--card); z-index:1; }
.listtbl th.stick { background:var(--bg2); z-index:3; } /* corner = header row + first col: highest */
.listtbl th.sortable { cursor:pointer; } .listtbl th.sortable:hover { color:var(--ink); }
/* sort arrow via CSS ::after (not literal text) so the header TEXT stays stable and col-resize's tableSig-keyed saved widths survive re-render (TK-10089) */
.listtbl th.asc::after { content:' ▲'; color:var(--gold); } .listtbl th.desc::after { content:' ▼'; color:var(--gold); }
/* draggable column reorder on the PRIMARY list table (Steve list-build rule) */
.listtbl th.dragcol { cursor:grab; }
.listtbl th.dragging { opacity:.45; }
.listtbl th.dropL { box-shadow:inset 3px 0 0 var(--blue); }
.listtbl th.dropR { box-shadow:inset -3px 0 0 var(--blue); }
.listtbl tr.lrow:hover td { background:rgba(88,166,255,.06); }
.listtbl tr.lrow:hover td.stick { background:var(--card); }
.listtbl .la { font-weight:600; color:var(--ink); text-decoration:none; }
.listtbl .la:hover { color:var(--blue); }
.listtbl .lc { color:var(--mut); font-size:11px; }
.listtbl .lsrc { margin-top:2px; }
.srclink { color:var(--blue); text-decoration:none; font-size:11px; font-weight:600; } .srclink:hover { text-decoration:underline; }
.listtbl .flink { color:var(--ink); text-decoration:none; border-bottom:1px dotted #3a4453; }
.listtbl .flink:hover { color:var(--blue); border-bottom-color:var(--blue); }
.listtbl tr.lrow { cursor:pointer; }
.listtbl .exptog { display:inline-block; width:11px; color:var(--mut); font-size:10px; transition:transform .15s; }
.listtbl tr.lrow.open td.stick { background:var(--card); }
.listtbl tr.lexp > td { padding:0; border-top:0; }
.listtbl tr.lexp .lexpbody { max-height:0; overflow:hidden; transition:max-height .25s ease; background:var(--bg); }
.listtbl tr.lexp.open .lexpbody { max-height:1200px; padding:12px 16px; border-top:1px solid var(--line); }
.lexpbody .src { text-align:left; white-space:normal; font-size:12px; }
.lexpbody .deep { text-align:left; white-space:normal; margin-top:8px; display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.lexpbody .deeplbl { color:var(--mut); font-size:10px; text-transform:uppercase; letter-spacing:.5px; margin-right:2px; }
.lexpbody .deep a, .lexpbody .deep button { font-size:11px; padding:3px 9px; border-radius:14px; border:1px solid var(--line); background:var(--card); color:var(--ink); text-decoration:none; cursor:pointer; }
.lexpbody .deep a:hover, .lexpbody .deep button:hover { border-color:var(--blue); color:var(--blue); }
.lexpbody .lcout, .lexpbody .histout { text-align:left; white-space:normal; }
/* Agent · contact column cell */
.listtbl td .agentcell { text-align:left; white-space:normal; min-width:170px; display:flex; flex-direction:column; gap:3px; }
.agentcell .amut { color:var(--mut); font-style:italic; font-size:11px; }
.agentcell .ainrow { display:flex; flex-wrap:wrap; gap:8px; }
.agentcell .ain { color:var(--mut); text-decoration:none; font-size:11px; }
.agentcell .ain:hover { color:var(--blue); }
.ain a { color:var(--blue); text-decoration:none; } .ain a:hover { text-decoration:underline; }
.tierb { font-size:9px; text-transform:uppercase; letter-spacing:.4px; color:var(--mut); border:1px solid var(--line); border-radius:4px; padding:0 4px; vertical-align:middle; }
.pocketbadge { font-size:11px; font-weight:600; color:var(--gold,#d29922); background:rgba(210,153,34,.12); border:1px solid rgba(210,153,34,.4); border-radius:5px; padding:1px 7px; white-space:nowrap; }
.agentcell .chiprow:empty { display:none; }
.agentcell .achip { display:inline-block; font-size:10px; color:var(--mut); background:var(--card); border:1px solid var(--line); border-radius:10px; padding:1px 6px; margin-right:4px; }
.agentcell .achip.done { color:#3fb950; border-color:#264f2e; }
.agentcell .acts { display:flex; flex-wrap:wrap; gap:5px; margin-top:2px; }
.abtn { font-size:10.5px; padding:2px 8px; border-radius:12px; border:1px solid var(--line); background:var(--card); color:var(--ink); cursor:pointer; }
.abtn:hover { border-color:var(--blue); color:var(--blue); }
.abtn.contactbtn { border-color:#2f5233; color:#8fdfa0; }
.abtn.markbtn { border-color:#284b7a; color:#8ec0ff; }
/* CRM block inside the inline panel */
.lexpbody .crm { margin-top:10px; border-top:1px solid var(--line); padding-top:10px; text-align:left; }
.crm-info { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.crm-info .crmf { background:var(--bg); border:1px solid var(--line); border-radius:8px; color:var(--ink); font-size:12px; padding:5px 8px; min-width:150px; }
.crm-info .crmf:focus { outline:none; border-color:var(--blue); }
.crm-acts { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:8px; }
.crm-letters { margin-top:10px; }
.crm-letters .lett { border:1px solid var(--line); border-radius:8px; padding:7px 9px; margin-top:6px; background:var(--bg); }
.crm-letters .letth { display:flex; align-items:center; gap:8px; font-size:12px; }
.crm-letters .letts { color:var(--mut); font-size:10px; }
.crm-letters .letdel { margin-left:auto; background:transparent; border:0; color:var(--mut); cursor:pointer; font-size:12px; }
.crm-letters .letdel:hover { color:var(--bad,#f85149); }
.crm-letters .lettb { white-space:pre-wrap; font-size:11.5px; color:var(--mut); margin-top:4px; }
/* Compose-letter modal */
.composeM { position:fixed; inset:0; background:rgba(0,0,0,.55); display:none; align-items:center; justify-content:center; z-index:9000; }
.composeM.on { display:flex; }
.composeCard { background:var(--card); border:1px solid var(--line); border-radius:14px; width:min(620px,92vw); max-height:88vh; overflow:auto; padding:16px; box-shadow:0 12px 40px rgba(0,0,0,.5); }
.composeH { display:flex; align-items:center; font-size:14px; margin-bottom:8px; }
.composeH .composeX { margin-left:auto; background:transparent; border:0; color:var(--mut); font-size:16px; cursor:pointer; }
.composeGate { font-size:11px; color:#e3b341; background:#241d0e; border:1px solid #5a4a1e; border-radius:8px; padding:6px 9px; margin-bottom:10px; }
.composeCard input, .composeCard textarea { width:100%; box-sizing:border-box; background:var(--bg); border:1px solid var(--line); border-radius:8px; color:var(--ink); font-size:13px; padding:8px 10px; margin-bottom:8px; font-family:inherit; }
.composeCard textarea { resize:vertical; line-height:1.5; }
.composeActs { display:flex; gap:8px; justify-content:flex-end; }
.composeActs button { font-size:12px; padding:6px 14px; border-radius:10px; border:1px solid var(--line); background:var(--card); color:var(--ink); cursor:pointer; }
.composeActs button.primary { border-color:#2f5233; color:#8fdfa0; }
.composeActs button.gated { border-color:#5a4a1e; color:#e3b341; }
.composeActs button.gated:hover:not([disabled]) { border-color:#e3b341; }
.composeActs button[disabled] { opacity:.4; cursor:not-allowed; }
/* Tabbed agent window */
.composeCard.tabwin { width:min(680px,94vw); }
.composeH .winmeta { color:var(--mut); font-size:11px; font-weight:400; margin-left:10px; }
.tabbar { display:flex; gap:2px; border-bottom:1px solid var(--line); margin:4px 0 12px; flex-wrap:wrap; }
.tabt { background:transparent; border:0; border-bottom:2px solid transparent; color:var(--mut); font-size:12.5px; padding:7px 12px; cursor:pointer; }
.tabt:hover { color:var(--ink); }
.tabt.active { color:var(--ink); border-bottom-color:var(--blue); font-weight:600; }
.tabpane { display:none; }
.tabpane.active { display:block; }
.tabmut { color:var(--mut); font-size:12px; font-style:italic; padding:8px 2px; }
.cm-row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:10px; }
.tabpane .ainrow { display:flex; flex-wrap:wrap; gap:14px; margin:8px 0; }
.tabpane .ain { color:var(--mut); text-decoration:none; font-size:12px; }
.tabpane .ain:hover { color:var(--blue); }
.findgrid { display:flex; flex-direction:column; gap:7px; }
.findlink { display:inline-block; background:var(--card); border:1px solid var(--line); border-radius:8px; color:var(--ink); text-decoration:none; font-size:12.5px; padding:8px 11px; cursor:pointer; text-align:left; }
.findlink:hover { border-color:var(--blue); color:var(--blue); }
.findlink.findloop { padding:8px 11px; }
.findlink.findloop a { color:inherit; text-decoration:none; }
.crmToast { position:fixed; bottom:22px; left:50%; transform:translateX(-50%) translateY(12px); background:var(--bg2); border:1px solid var(--line); color:var(--ink); font-size:12.5px; padding:9px 16px; border-radius:20px; opacity:0; transition:opacity .2s,transform .2s; z-index:9500; pointer-events:none; }
.crmToast.on { opacity:1; transform:translateX(-50%) translateY(0); }
/* Card-view agent-contact block (every card, every asset type) */
.card .cardagent { margin-top:8px; border-top:1px solid var(--line); padding-top:8px; font-size:12px; }
.card .cardagent .ca-top { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.card .cardagent .ainrow { display:flex; flex-wrap:wrap; gap:10px; margin-top:3px; }
.card .cardagent .ain { color:var(--mut); text-decoration:none; font-size:11px; }
.card .cardagent .ain:hover { color:var(--blue); }
.card .cardagent .acts { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
/* Full contact modal info row */
.composeCard .cm-info { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:10px; }
.composeCard .cm-info .crmf { background:var(--bg); border:1px solid var(--line); border-radius:8px; color:var(--ink); font-size:12px; padding:6px 8px; min-width:140px; flex:1 1 140px; margin:0; }
.composeCard .cm-info .crmf:focus { outline:none; border-color:var(--blue); }
.composeH .flink { font-size:11px; font-weight:400; margin-left:8px; }
/* Inline (no-outside-link) agent bits */
.aname { font-weight:600; color:var(--ink); }
a.aname { text-decoration:none; cursor:pointer; } a.aname:hover { color:var(--blue); text-decoration:underline; }
.flink { cursor:pointer; }
.listtbl td .flink { border-bottom:1px dotted #3a4453; }
.listtbl td .flink:hover { color:var(--blue); border-bottom-color:var(--blue); }
/* ── drill atom: every displayed data point filters to its deeper view ── */
.drill { cursor:pointer; border-bottom:1px dotted transparent; }
.drill:hover { border-bottom-color:currentColor; filter:brightness(1.15); }
.badges .b.drill:hover { border-bottom-color:currentColor; }
.city .drill { color:inherit; }
.city .drill:hover { color:var(--blue); border-bottom-color:var(--blue); }
.copyb { background:transparent; border:0; color:var(--mut); cursor:pointer; font-size:11px; padding:0 3px; border-radius:4px; }
.copyb:hover { color:var(--blue); }
.crm-note, .lexpbody .crm-note { margin-top:6px; font-size:12px; color:var(--mut); white-space:pre-wrap; background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:6px 9px; text-align:left; }
.composeCard .cm-notes { margin-bottom:10px; }
.composeCard .cm-notes .deeplbl { margin-bottom:4px; }
.composeCard .cm-notes textarea { width:100%; box-sizing:border-box; background:var(--bg); border:1px solid var(--line); border-radius:8px; color:var(--ink); font-size:12.5px; padding:7px 9px; font-family:inherit; resize:vertical; line-height:1.5; }
.composeCard .cm-notes textarea:focus { outline:none; border-color:var(--blue); }
/* ---- Amazon-style docked left filter rail (desktop) ---- */
.shell { display:flex; align-items:flex-start; }
main { flex:1 1 auto; min-width:0; }
@media (min-width:901px){
#burger { display:none; }
#scrim { display:none !important; }
#drawer { position:sticky; top:57px; height:calc(100vh - 57px); transform:none; flex:0 0 var(--drawerW); box-shadow:none; }
#drawer .dhead .x { display:none; }
}
/* collapsible filter tabs */
.fsec > h4 { cursor:pointer; display:flex; align-items:center; justify-content:space-between; user-select:none; }
.fsec > h4::after { content:'▾'; color:var(--mut); font-size:11px; transition:transform .15s; margin-left:8px; }
.fsec.collapsed > h4::after { transform:rotate(-90deg); }
.fsec.collapsed > *:not(h4) { display:none !important; }
.assessline { border-top:1px dashed rgba(255,255,255,.06); padding-top:6px; margin-top:2px; }
/* active-filter summary bar */
.activebar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:10px 20px; border-bottom:1px solid var(--line); background:rgba(88,166,255,.03); }
.activebar:empty { display:none; }
.activebar .lbl { font-size:11px; color:var(--mut); text-transform:uppercase; letter-spacing:.5px; }
.afchip { display:inline-flex; align-items:center; gap:6px; background:rgba(88,166,255,.10); border:1px solid rgba(88,166,255,.4); color:var(--blue); border-radius:16px; padding:4px 10px; font-size:12px; cursor:pointer; }
.afchip:hover { background:rgba(88,166,255,.2); } .afchip .xx { opacity:.65; font-weight:700; }
.afreset { background:transparent; border:1px solid #7d2b28; color:var(--bad); border-radius:14px; padding:4px 11px; font-size:12px; cursor:pointer; margin-left:auto; }
.afreset:hover { background:rgba(248,81,73,.1); }
/* shortlist stars */
.starbtn { background:none; border:0; color:var(--mut); font-size:18px; line-height:1; cursor:pointer; padding:0; }
.starbtn:hover, .starbtn.on { color:var(--warn); }
.copybtn { background:none; border:0; color:var(--mut); font-size:14px; line-height:1; cursor:pointer; padding:0; }
.copybtn:hover { color:var(--blue); }
.listtbl .starbtn { font-size:14px; margin-right:5px; vertical-align:middle; }
#shortbtn.shorton { background:rgba(210,153,34,.14); border-color:var(--warn); color:var(--warn); }
/* aggregate stats strip */
.statsbar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:9px 20px; border-bottom:1px solid var(--line); }
.statsbar:empty { display:none; }
.statpill { font-size:12px; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:8px; padding:4px 10px; }
.statpill .sl { color:var(--mut); } .statpill b { font-variant-numeric:tabular-nums; }
.heatlegend { display:none; align-items:center; gap:5px; font-size:11px; color:var(--mut); }
.heatlegend.on { display:inline-flex; }
.heatlegend .bar { width:56px; height:8px; border-radius:4px; background:linear-gradient(90deg,hsl(0,70%,45%),hsl(60,70%,45%),hsl(120,70%,45%)); }
.showmore-wrap { grid-column:1/-1; text-align:center; padding:20px 0 6px; }
.showmore { background:var(--card); border:1px solid var(--line); color:var(--blue); border-radius:10px; padding:9px 20px; font-size:13px; cursor:pointer; }
.showmore:hover { border-color:var(--blue); }
.quickstart { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:16px 0; }
.qchip { background:var(--card); border:1px solid var(--line); color:var(--ink); border-radius:18px; padding:7px 14px; font-size:13px; cursor:pointer; }
.qchip:hover { border-color:var(--blue); color:var(--blue); }
.savedrow { display:flex; gap:6px; align-items:center; margin-bottom:5px; }
.savedname { flex:1; text-align:left; background:var(--card); border:1px solid var(--line); color:var(--ink); border-radius:8px; padding:6px 9px; font-size:12px; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.savedname:hover { border-color:var(--blue); color:var(--blue); }
.saveddel { background:none; border:0; color:var(--mut); cursor:pointer; font-size:13px; }
.saveddel:hover { color:var(--bad); }
#savebtn { width:100%; background:transparent; border:1px dashed #284b7a; color:var(--blue); border-radius:8px; padding:7px; font-size:12px; cursor:pointer; margin-top:4px; }
.savedempty { color:var(--mut); font-size:11px; }
/* compare overlay */
#cmpov { display:none; position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:60; align-items:flex-start; justify-content:center; padding:40px 14px; overflow:auto; }
#cmpov.on { display:flex; }
#cmpmodal { width:min(1100px,97vw); background:var(--card); border:1px solid var(--line); border-radius:15px; padding:20px 22px; position:relative; }
.cmpx { position:absolute; top:12px; right:14px; background:none; border:0; color:var(--mut); font-size:22px; cursor:pointer; }
.cmptbl { width:100%; border-collapse:collapse; font-size:13px; }
.cmptbl th, .cmptbl td { padding:8px 11px; border-top:1px solid var(--line); text-align:right; white-space:nowrap; }
.cmptbl thead th { position:sticky; top:0; background:var(--card); text-align:right; vertical-align:bottom; color:var(--ink); }
.cmptbl .cmpk, .cmptbl thead th.cmpk { text-align:left; color:var(--mut); position:sticky; left:0; background:var(--card); }
.cmptbl thead th .cmpsub { color:var(--mut); font-size:11px; font-weight:400; }
.cmphint { color:var(--mut); padding:24px 4px; }
.cmptools { display:flex; gap:8px; justify-content:flex-end; margin-bottom:10px; }
.cmptools button { background:var(--card); border:1px solid var(--line); color:var(--blue); border-radius:8px; padding:6px 12px; font-size:12px; cursor:pointer; }
.cmptools button:hover { border-color:var(--blue); }
@media print {
body.printing-compare * { visibility:hidden; }
body.printing-compare #cmpov, body.printing-compare #cmpov * { visibility:visible; }
body.printing-compare #cmpov { position:absolute; inset:0; background:#fff; display:block; padding:0; overflow:visible; }
body.printing-compare #cmpmodal { width:100%; box-shadow:none; border:0; background:#fff; color:#000; }
body.printing-compare #cmpmodal h3 { color:#000; }
body.printing-compare .cmpx, body.printing-compare .no-print { display:none !important; }
body.printing-compare .cmptbl th, body.printing-compare .cmptbl td { color:#000; border-color:#999; }
body.printing-compare .cmptbl thead th, body.printing-compare .cmptbl .cmpk { background:#fff; color:#000; }
body.printing-compare .cmpsub { color:#444; }
}
</style>
</head><body>
<header>
<button class="burger" id="burger" aria-label="Open filters">☰ Filters <span class="fcount" id="fcount">0</span></button>
<div class="htitle">
<h1>LA County CRE — Investment Explorer</h1>
<div class="sub" id="sub">loading…</div>
</div>
<div class="spacer"></div>
<div class="topnav">
<a href="/crcp.html" style="color:var(--warn);text-decoration:none;font-size:13px;margin-right:12px" title="Commercial Real Estate Control Panel (live)">🛰️ CRCP</a>
<a href="/map.html" style="color:var(--blue);text-decoration:none;font-size:13px;margin-right:12px" title="All properties on a map, colored by type, with overhead aerial photos">🗺️ Map</a>
<a href="/mls.html" style="color:var(--blue);text-decoration:none;font-size:13px;margin-right:12px" title="Spreadsheet-style listings + grid — all property data, sortable & searchable">📋 Listings</a>
<a href="/valley-pools.html" style="color:var(--blue);text-decoration:none;font-size:13px;margin-right:12px" title="San Fernando Valley single-family pool homes under $1.2M — deal-colored map + $/sqft + price-cut signals + payment estimate">🏊 Valley Pools</a>
<a href="/deals.html" style="color:var(--blue);text-decoration:none;font-size:13px;margin-right:12px" title="Liquid-glass deal-intelligence charts">◆ Deals</a>
<a href="/deals-flow.html" style="color:var(--blue);text-decoration:none;font-size:13px;margin-right:12px" title="Closed deal flow — public-record sales + FHA + SEC REIT, source-badged">💰 Deal Flow</a>
<a href="/rent-rolls.html" style="color:var(--blue);text-decoration:none;font-size:13px;margin-right:12px" title="Rent-roll → DSCR underwriting">📑 Rent Rolls</a>
<a href="/broker-grid.html" style="color:var(--blue);text-decoration:none;font-size:13px;margin-right:12px" title="All brokers/agents — grid + list, sortable by every field">👥 Broker grid</a>
<a href="/brokers.html" style="color:var(--blue);text-decoration:none;font-size:13px;margin-right:12px" title="Broker / agent relationship mind-map">🕸️ Broker map</a>
<a href="/graphics.html" style="color:var(--blue);text-decoration:none;font-size:13px;margin-right:12px" title="Broker / firm / warrantability charts">📊 Graphics</a>
<a href="/condos.html" style="color:var(--blue);text-decoration:none;font-size:13px;margin-right:12px" title="LA condos — FHA warrantability">🏢 Condos</a>
<a href="/fha-loans.html" style="color:var(--gold,#e9c46a);text-decoration:none;font-size:13px;margin-right:12px" title="HUD/FHA multifamily loans originally ≤3.5% — historic-low-rate flagged">◆ FHA Loans</a>
<a href="/broker-grid.html" style="color:var(--blue);text-decoration:none;font-size:13px;margin-right:12px" title="Broker / agent contacts — name, company, phone, email">👤 Brokers</a>
<a href="/linkedin.html" style="color:var(--blue);text-decoration:none;font-size:13px;margin-right:12px" title="LinkedIn follow-list">🔗 LinkedIn</a>
<a href="/licensed.html" style="color:var(--blue);text-decoration:none;font-size:13px;margin-right:12px" title="Licensed directory — RE agents, firms, title & escrow + firm IG">📋 Licensed</a>
</div><!-- /.topnav -->
</header>
<div style="padding:40px 20px;color:var(--mut)">…grid would render here…</div>
<script src="/corner-nav.js" defer></script>
<script>window.addEventListener("load",function(){var s=document.getElementById("sub");if(s)s.textContent="15440 listings · 2677 condos · Los Angeles County, CA";});</script>
</body></html>