/* ============================================================ ScoreCard — theme.css (integration skin) Loads AFTER scorecard.css / comps.css / valuation.css and restyles the live app. Needs golden-gate.jpg + scorecard-logo.png in the same folder. must carry class="page-workspace". Overrides are scoped under body.page-workspace so they win over the existing module CSS without !important. ============================================================ */ :root{ --navy:#15294a; --navy-deep:#0f1f3a; --bgimg:url('golden-gate.jpg'); --gold:#bd9c5b; --gold-lt:#d6b878; --gold-deep:#a4854a; --gold-bar:#b3954f; --tink:#1d2433; --tink-2:#646d7e; --tink-3:#99a1b0; --tline:#e9ecf1; --tline-2:#f2f4f7; --trose-bg:#fbe9e4; --trose:#b5654a; --tok-bg:#e9f3ec; --tok:#3f8a5b; --tr:13px; --tr-sm:10px; --tshadow:0 30px 70px -30px rgba(0,0,0,.6), 0 2px 10px -2px rgba(0,0,0,.2); } body.page-workspace{font-family:'Inter',-apple-system,system-ui,sans-serif;color:#fff;background:var(--navy-deep)} .page-workspace .serif,.page-workspace .id-addr{font-family:'Playfair Display',Georgia,serif} .page-workspace .num{font-variant-numeric:tabular-nums} .page-workspace .wrap{width:100%;margin:0;padding:0 40px} /* nav row only: tabs left, offers control floated right (NOT the hero .wrap.shell-top) */ .page-workspace .tabbar .wrap{display:flex;align-items:stretch;justify-content:space-between;gap:18px} /* the original inline styles cap the shell at .app{max-width:1320px}; lift it */ .page-workspace .app{max-width:none;margin:0;padding:0} /* ---- fixed Golden Gate backdrop ---- */ .page-workspace .scene{position:fixed;inset:0;z-index:-1;background:var(--bgimg) center 40% / cover no-repeat;background-color:var(--navy-deep)} /* ---- locked header painted with the same fixed image ---- */ .page-workspace .toplock{position:sticky;top:0;z-index:30;background:var(--bgimg) center 40% / cover fixed} .page-workspace .shell-top{padding-top:26px} .page-workspace .shell-top, .page-workspace .shell-top *{text-shadow:0 2px 16px rgba(0,0,0,.6)} .page-workspace .topbar{display:flex;align-items:flex-start;justify-content:space-between} .page-workspace .logo-line{display:flex;flex-direction:column;align-items:flex-start} .page-workspace .brand-logo{height:58px;width:auto;display:block} .page-workspace .tagline{font-size:14px;color:rgba(255,255,255,.92);margin-top:1px;padding-left:47px} .page-workspace .user{display:flex;align-items:center;gap:11px} .page-workspace .ucircle{width:44px;height:44px;border-radius:50%;background:var(--gold);color:#fff;font-weight:600;font-size:16px;display:flex;align-items:center;justify-content:center;text-shadow:none} .page-workspace .uname{font-weight:600;font-size:15px;line-height:1;color:#fff} .page-workspace .signout{margin-top:7px;display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.06em;color:#fff;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.5);padding:7px 13px;border-radius:5px;cursor:pointer;text-shadow:none} /* ---- subject identity ---- */ .page-workspace .identity{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin:32px 0 24px} .page-workspace .subject-eyebrow{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-lt)} .page-workspace .id-addr{font-size:44px;font-weight:600;letter-spacing:-.01em;line-height:1.04;color:var(--gold-lt);margin-top:6px} .page-workspace .id-meta{margin-top:12px;font-size:17px;font-weight:600;color:#fff;display:flex;gap:0;flex-wrap:wrap} .page-workspace .id-meta span{margin-right:18px;position:relative} .page-workspace .id-offer{text-align:right;flex:none} .page-workspace .id-offer .lab{font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--gold-lt)} .page-workspace .id-offer .val{font-family:'Playfair Display',Georgia,serif;font-size:48px;font-weight:600;letter-spacing:-.01em;line-height:1.02;color:#fff;margin-top:4px;font-variant-numeric:tabular-nums} .page-workspace .id-offer .val .unknown{font-size:30px;color:rgba(255,255,255,.7)} .page-workspace .id-offer .offers{font-size:17px;font-weight:600;color:#fff;margin-top:8px} .page-workspace .id-offer .sub{font-size:13px;color:rgba(255,255,255,.82);margin-top:5px} /* seller path: compact net-to-seller line in the hero (replaces condition control) */ .page-workspace .id-offer .hero-net{display:inline-flex;flex-wrap:wrap;align-items:baseline;justify-content:flex-end;gap:5px 9px;margin-top:12px;padding:8px 14px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);border-radius:12px} .page-workspace .id-offer .hero-net .hn-lab{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-lt);font-weight:700} .page-workspace .id-offer .hero-net .hn-val{font-family:'Playfair Display',Georgia,serif;font-size:24px;font-weight:700;line-height:1;color:#fff;font-variant-numeric:tabular-nums} .page-workspace .id-offer .hero-net .hn-val.neg{color:#f1c9b4} .page-workspace .id-offer .hero-net .hn-verdict{flex-basis:100%;text-align:right;font-size:12px;font-weight:700} .page-workspace .id-offer .hero-net .hn-verdict.good{color:#bfe3c6} .page-workspace .id-offer .hero-net .hn-verdict.meh{color:#f0dca6} .page-workspace .id-offer .hero-net .hn-verdict.bad{color:#f1c9b4} /* ---- gold 3D nav (restyles existing .tabs/.tab) ---- */ .page-workspace .tabbar{background:linear-gradient(180deg,#dabf82 0%, var(--gold) 48%, var(--gold-bar) 100%);border-top:1px solid rgba(255,255,255,.35);border-bottom:2px solid #8c7234;box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 14px 24px -10px rgba(0,0,0,.6)} .page-workspace .tabs{display:flex;align-items:stretch;gap:0;border:0;border-radius:0;padding:0;margin:0;overflow:visible;background:transparent} .page-workspace .tabs .tab{display:flex;align-items:center;gap:8px;padding:9px 24px;font-size:15px;font-weight:600;color:#fff;cursor:pointer;white-space:nowrap;text-decoration:none;border:0;border-right:1px solid rgba(255,255,255,.16);border-radius:0;text-shadow:0 1px 1px rgba(74,54,16,.5);box-shadow:1px 0 0 rgba(120,95,40,.3);transition:background .14s;background:transparent} .page-workspace .tabs .tab:hover{background:linear-gradient(180deg,rgba(255,255,255,.20),rgba(255,255,255,.04))} .page-workspace .tabs .tab.home{border-right:1px solid rgba(120,95,40,.5);box-shadow:1px 0 0 rgba(255,255,255,.28)} .page-workspace .tabs .tab.home svg{width:17px;height:17px} .page-workspace .tabs .tab.active{color:#3c2d0c;font-weight:700;background:linear-gradient(180deg,#ecd6a0 0%, var(--gold-lt) 52%, var(--gold) 100%);border-radius:9px 9px 0 0;transform:translateY(-4px);position:relative;z-index:2;text-shadow:0 1px 0 rgba(255,255,255,.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 18px 28px -10px rgba(60,44,12,.8)} .page-workspace .tabs .tab .pill{display:inline-block;background:rgba(60,44,12,.18);color:inherit;font-size:11px;font-weight:700;padding:2px 9px;border-radius:20px;margin-left:2px} .page-workspace .tabs .tab.active .pill{background:rgba(60,44,12,.22)} /* ---- floating "offers coming in" stepper (far right of the gold nav) ---- */ .page-workspace .nav-offers{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:0 2px} .page-workspace .nav-offers .no-lab{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#5a4413;text-shadow:0 1px 0 rgba(255,255,255,.35)} .page-workspace .nav-offers .no-step{width:24px;height:24px;border-radius:7px;border:1px solid rgba(120,95,40,.5);background:linear-gradient(180deg,#f3e1ad,var(--gold-lt));color:#3c2d0c;font-size:16px;font-weight:700;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 2px 4px -1px rgba(60,44,12,.5)} .page-workspace .nav-offers .no-step:hover{filter:brightness(1.06)} .page-workspace .nav-offers .no-step:active{transform:translateY(1px)} .page-workspace .nav-offers .no-num{min-width:22px;text-align:center;font-size:16px;font-weight:800;font-variant-numeric:tabular-nums;color:#2b2008;text-shadow:0 1px 0 rgba(255,255,255,.4)} .page-workspace .nav-offers .no-num.is-ai{color:#6b5a2e;font-style:italic;font-weight:700} .page-workspace .nav-offers .no-auto{margin-left:2px;font-size:10px;font-weight:800;letter-spacing:.04em;padding:3px 7px;border-radius:20px;border:1px solid rgba(120,95,40,.45);background:rgba(60,44,12,.14);color:#4a3a14;cursor:pointer} .page-workspace .nav-offers .no-auto:hover{background:rgba(60,44,12,.22)} .page-workspace .nav-offers .no-auto.is-hidden{display:none} @media (max-width:820px){.page-workspace .nav-offers .no-lab{display:none}} /* ---- valuation pricing-mode banner (FMV vs competitive) ---- */ .page-workspace .val-pricing-banner{margin:0 0 18px;padding:16px 20px;border-radius:12px;border:1px solid var(--line)} .page-workspace .val-pricing-banner.is-fmv{background:linear-gradient(180deg,#fbf4e4,#f6ead0);border-color:var(--gold-deep);box-shadow:inset 0 0 0 1px rgba(189,156,91,.35)} .page-workspace .val-pricing-banner.is-comp{background:#f4f7fb;border-color:#d8e0ec} .page-workspace .vpb-mode{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--navy)} .page-workspace .val-pricing-banner.is-fmv .vpb-mode{color:#8a6a22} .page-workspace .vpb-reason{margin-top:5px;font-size:14px;color:var(--ink);line-height:1.45} .page-workspace .vpb-deal{margin-top:7px;font-size:14px;font-weight:700;color:var(--navy)} .page-workspace .vpb-list{margin-top:6px;font-size:12.5px;color:var(--ink-muted)} .page-workspace .vpb-list b{color:var(--ink)} /* ---- every tab-pane becomes a white floating panel ---- */ .page-workspace .tab-pane{max-width:none;margin:26px 0 90px;padding:0 40px} /* white floating panel for module-rendered panes (NOT the scorecard interior) */ .page-workspace #comps-pane > *, .page-workspace #valuation-pane > *, .page-workspace #photos-pane > *, .page-workspace #documents-pane > *{background:#fff;color:var(--tink);border-radius:var(--tr);box-shadow:var(--tshadow)} .page-workspace .placeholder{padding:60px 28px;text-align:center;color:var(--tink-2);font-size:15px} /* generic helpers shared by adapters */ .page-workspace .btn-gold,.page-workspace #val-refresh,.page-workspace .comps-row-checkbox input{accent-color:var(--gold-deep)} /* ============================================================ VALUATION module adapter (val-* from valuation.js) ============================================================ */ .page-workspace .val-root{padding:0;overflow:hidden;max-width:none;width:auto;margin:0} .page-workspace .val-hero{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:30px 30px;border-bottom:1px solid var(--tline-2);background:#fbf8f0} .page-workspace .val-hero-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.18em;color:var(--gold-deep)} .page-workspace .val-hero-value{font-family:'Playfair Display',Georgia,serif;font-size:54px;font-weight:600;color:var(--tink);line-height:1.02;margin-top:4px;font-variant-numeric:tabular-nums} .page-workspace .val-hero-formula{font-size:13px;color:var(--tink-2);margin-top:10px;max-width:560px} .page-workspace .val-hero-cta{text-align:right} .page-workspace #val-refresh{height:42px;padding:0 20px;border:0;border-radius:9px;cursor:pointer;font-family:inherit;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fdf8ee;background:linear-gradient(180deg,var(--gold-lt),var(--gold) 55%,var(--gold-deep));box-shadow:0 12px 28px -12px rgba(120,92,38,.8),inset 0 1px 0 rgba(255,255,255,.35);margin-bottom:8px} .page-workspace .val-section{border-bottom:1px solid var(--tline-2);box-shadow:none;border-radius:0;background:#fff} .page-workspace .val-section-header{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;border-bottom:1px solid var(--tline-2)} .page-workspace .val-section-title{font-size:15px;font-weight:600;color:var(--tink);font-family:'Playfair Display',Georgia,serif} .page-workspace .val-section-amount{font-size:15px;font-weight:700;color:var(--gold-deep);font-variant-numeric:tabular-nums} .page-workspace .val-section-body{padding:20px 24px} .page-workspace .val-anchor-card{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border:1px solid var(--tline);border-radius:var(--tr-sm);overflow:hidden;box-shadow:none} .page-workspace .val-anchor-card > div{padding:14px 12px;border-right:1px solid var(--tline-2);text-align:center} .page-workspace .val-anchor-card > div:last-child{border-right:0} .page-workspace .val-anchor-label{display:block;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--tink-3)} .page-workspace .val-anchor-value{display:block;font-size:19px;font-weight:600;color:var(--tink);margin-top:5px;font-variant-numeric:tabular-nums} .page-workspace .val-anchor-hint{display:block;font-size:11px;color:var(--gold-deep);margin-top:3px} .page-workspace .val-prem-table{width:100%;border-collapse:collapse;font-size:13px;background:#fff} .page-workspace .val-prem-table th{text-align:left;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--tink-3);padding:8px 0;border-bottom:1px solid var(--tline)} .page-workspace .val-prem-table td{padding:9px 0;border-bottom:1px solid var(--tline-2);color:var(--tink-2)} .page-workspace .val-prem-table td.factor-name{color:var(--tink);font-weight:500;text-transform:capitalize} .page-workspace .val-prem-table td.is-num{text-align:right;font-variant-numeric:tabular-nums;color:var(--tink)} .page-workspace .val-prem-table tr.is-total td{font-weight:700;color:var(--tink);border-top:1px solid var(--tline)} .page-workspace .val-tier{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--gold-deep);background:#f5edda;border:1px solid #e3d3a8;padding:5px 12px;border-radius:20px} .page-workspace .val-warnings{padding:18px 24px;background:#fff} .page-workspace .val-warning{font-size:13px;color:var(--trose);background:var(--trose-bg);border-radius:8px;padding:10px 14px;margin-top:8px} .page-workspace .val-empty{padding:50px 24px;text-align:center;color:var(--tink-2);background:#fff;border-radius:var(--tr)} .page-workspace .val-empty-title{font-size:16px;font-weight:600;color:var(--tink);margin-bottom:6px} .page-workspace .val-spinner{width:34px;height:34px;border:3px solid var(--tline);border-top-color:var(--gold);border-radius:50%;margin:0 auto;animation:sc-spin .8s linear infinite} @keyframes sc-spin{to{transform:rotate(360deg)}} /* ============================================================ COMPS module adapter (comps-* from comps.js) ============================================================ */ .page-workspace #comps-pane{margin:26px 0 24px} .page-workspace .comps-root{padding:0;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr);align-items:stretch;height:calc(100vh - var(--toplock-h, 320px) - 66px)} .page-workspace .comps-main-col{min-width:0;min-height:0;display:flex;flex-direction:column;border-right:1px solid var(--tline-2)} .page-workspace .comps-header{display:flex;align-items:center;gap:26px;flex-wrap:wrap;flex:0 0 auto;padding:22px 26px;border-bottom:1px solid var(--tline-2);background:#fbf8f0} .page-workspace .comps-header-main{display:flex;flex-direction:column;align-items:flex-start;gap:3px;flex:0 1 auto;min-width:150px} .page-workspace .comps-header-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--gold-deep)} .page-workspace .comps-header-value{font-family:'Playfair Display',Georgia,serif;font-size:38px;font-weight:600;color:var(--tink);line-height:1.05;font-variant-numeric:tabular-nums} .page-workspace .comps-header-range,.page-workspace .comps-header-detail,.page-workspace .comps-header-sqft-note{font-size:13px;color:var(--tink-2)} .page-workspace .comps-header-badge{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--gold-deep);background:#f5edda;border:1px solid #e3d3a8;padding:5px 12px;border-radius:20px} .page-workspace .comps-list{background:#fff;flex:1 1 auto;min-height:0;overflow-y:auto} .page-workspace .comps-list-header{position:sticky;top:0;z-index:3;display:grid;grid-template-columns:34px 30px minmax(0,1fr) 90px 90px 120px;gap:14px;padding:11px 24px;border-bottom:1px solid var(--tline);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--tink-3);background:#fff} .page-workspace .comps-row{display:grid;grid-template-columns:34px 30px minmax(0,1fr) 90px 90px 120px;gap:14px;align-items:center;padding:15px 24px;border-bottom:1px solid var(--tline-2);background:#fff} .page-workspace .comps-row.is-subject{background:#f7f3df;box-shadow:inset 3px 0 0 var(--gold-deep)} .page-workspace .comps-row.is-excluded{opacity:.5} .page-workspace .comps-row-number{color:var(--tink-3);font-size:13px;font-variant-numeric:tabular-nums} .page-workspace .comps-row-address{font-size:15px;font-weight:500;color:var(--tink)} .page-workspace .comps-row-meta{font-size:13px;color:var(--tink-2);margin-top:3px} .page-workspace .comps-row-price,.page-workspace .comps-row-ppsf,.page-workspace .comps-row-projected{font-size:15px;color:var(--tink);font-variant-numeric:tabular-nums} .page-workspace .comps-row-price{font-weight:600} .page-workspace .is-right{text-align:right} .page-workspace .comps-match-pill{display:inline-block;font-size:11px;font-weight:700;padding:3px 9px;border-radius:6px;color:var(--gold-deep);background:#efe6c9} .page-workspace .comps-match-high{color:#2f6b46;background:var(--tok-bg)} .page-workspace .comps-match-low{color:var(--trose);background:var(--trose-bg)} .page-workspace .comps-header-range{flex:1 1 240px;min-width:220px;margin-top:0} .page-workspace .comps-range{padding:0;border:0;background:transparent} .page-workspace .comps-range-empty{font-size:13px;color:var(--tink-3)} .page-workspace .comps-range-header{display:flex;justify-content:space-between;align-items:baseline;gap:14px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--tink-3);margin:0 0 6px} .page-workspace .comps-range-header-spread{color:var(--tink-2);font-weight:600;white-space:nowrap;text-transform:none;letter-spacing:.01em} .page-workspace .comps-range-track-wrap{position:relative;padding-top:48px} .page-workspace .comps-range-track{position:relative;height:14px;border-radius:8px;background:linear-gradient(90deg,var(--gold-lt) 0%,var(--gold) 36%,var(--gold-deep) 58%,#e8342a 92%);box-shadow:inset 0 1px 2px rgba(60,44,12,.22)} /* most-likely band: a soft highlight FLUSH with the bar — no floating outline */ .page-workspace .comps-range-iqr{position:absolute;top:0;bottom:0;height:14px;border-radius:8px;background:rgba(255,255,255,.22);box-shadow:inset 1.5px 0 0 rgba(255,255,255,.7),inset -1.5px 0 0 rgba(255,255,255,.7)} /* winning-offer marker: a pinned line through the bar + a pill with a pointer above it */ .page-workspace .comps-range-anchor-callout{position:absolute;top:0;height:14px;transform:translateX(-50%);z-index:2} .page-workspace .comps-range-anchor-callout::after{content:'';position:absolute;left:50%;top:-6px;transform:translateX(-50%);width:3px;height:26px;background:var(--navy);border-radius:2px;box-shadow:0 0 0 2px rgba(255,255,255,.92)} .page-workspace .comps-range-anchor-label{position:absolute;left:50%;bottom:calc(100% + 9px);transform:translateX(-50%);font-size:12px;font-weight:700;color:#fff;background:var(--navy);padding:3px 9px;border-radius:6px;white-space:nowrap;box-shadow:0 5px 12px -4px rgba(21,41,74,.7);animation:rangePop .42s cubic-bezier(.2,.8,.2,1) both} .page-workspace .comps-range-anchor-label::after{content:'';position:absolute;left:50%;top:100%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--navy)} @keyframes rangePop{from{opacity:0;transform:translateX(-50%) translateY(-5px)}to{opacity:1;transform:translateX(-50%) translateY(0)}} .page-workspace .comps-range-bounds{display:flex;justify-content:space-between;margin-top:13px} .page-workspace .comps-range-bounds-label{display:flex;flex-direction:column;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--tink-3)} .page-workspace .comps-range-bounds-label.is-right{align-items:flex-end} .page-workspace .comps-range-bounds-label span:last-child{font-size:14px;font-weight:600;color:var(--tink);text-transform:none;letter-spacing:0;font-variant-numeric:tabular-nums;margin-top:2px} .page-workspace .comps-map-wrap{padding:0;border:0;background:#fff;display:flex;flex-direction:column;min-height:0} .page-workspace #comps-map{flex:1;height:100%;min-height:0;border-radius:0;overflow:hidden;border:0} .page-workspace .comps-map-legend{display:flex;gap:16px;margin-top:0;padding:12px 20px;font-size:12px;color:var(--tink-2);border-top:1px solid var(--tline-2)} .page-workspace .comps-map-legend-item{display:flex;align-items:center;gap:6px} .page-workspace .comps-map-legend-dot{width:10px;height:10px;border-radius:50%} .page-workspace .comps-accordion{border-top:1px solid var(--tline-2);background:#fbf8f0} .page-workspace .comps-accordion summary{list-style:none;cursor:pointer;padding:14px 24px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--gold-deep);display:flex;align-items:center;gap:9px;user-select:none} .page-workspace .comps-accordion summary::-webkit-details-marker{display:none} .page-workspace .comps-accordion summary::before{content:'';width:7px;height:7px;border-right:2px solid var(--gold-deep);border-bottom:2px solid var(--gold-deep);transform:rotate(-45deg);transition:transform .15s ease} .page-workspace .comps-accordion[open] summary::before{transform:rotate(45deg)} .page-workspace .comps-accordion summary:hover{background:#f5edda} .page-workspace .comps-accordion-hint{font-size:11px;font-weight:500;text-transform:none;letter-spacing:0;color:var(--tink-3)} .page-workspace .comps-accordion-rows{background:#fff;border-top:1px solid var(--tline-2)} .page-workspace .comps-detail{padding:18px 24px;background:#fbfaf6;border-top:1px solid var(--tline-2)} .page-workspace .comps-detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px} .page-workspace .comps-detail-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--tink-3)} .page-workspace .comps-detail-value{font-size:15px;color:var(--tink);margin-top:3px;font-variant-numeric:tabular-nums} .page-workspace .comps-detail-note{font-size:12px;color:var(--tink-2);margin-top:3px} .page-workspace .comps-warnings{padding:16px 24px;background:#fff} .page-workspace .comps-warning{font-size:13px;color:var(--trose);background:var(--trose-bg);border-radius:8px;padding:10px 14px;margin-top:8px} .page-workspace .comps-empty{padding:50px 24px;text-align:center;color:var(--tink-2);background:#fff;border-radius:var(--tr)} .page-workspace .comps-spinner{width:34px;height:34px;border:3px solid var(--tline);border-top-color:var(--gold);border-radius:50%;margin:0 auto;animation:sc-spin .8s linear infinite} /* ============================================================ DOCUMENTS adapter (inline doc-card markup) ============================================================ */ .page-workspace #documents-pane{padding:0 40px} .page-workspace .docs-header{display:flex;align-items:flex-start;justify-content:space-between;padding:22px 24px;border-bottom:1px solid var(--tline-2);background:#fff;border-radius:var(--tr) var(--tr) 0 0} .page-workspace .docs-title{font-family:'Playfair Display',Georgia,serif;font-size:20px;font-weight:600;color:var(--tink)} .page-workspace .docs-sub{font-size:13px;color:var(--tink-2);margin-top:4px} .page-workspace .docs-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:22px 24px;background:#fff;border-radius:0 0 var(--tr) var(--tr)} .page-workspace .doc-card{background:#fff;border:1px solid var(--tline);border-radius:var(--tr-sm);padding:18px;box-shadow:none} .page-workspace .doc-card.full-width{grid-column:1 / -1} .page-workspace .doc-card.required{border-left:3px solid var(--gold-deep)} .page-workspace .doc-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px} .page-workspace .doc-card-title{font-size:15px;font-weight:600;color:var(--tink)} .page-workspace .doc-card-flag{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:3px 9px;border-radius:20px} .page-workspace .doc-card-flag.required{color:var(--gold-deep);background:#f5edda} .page-workspace .doc-card-flag.optional{color:var(--tink-3);background:var(--tline-2)} .page-workspace .doc-card-sub{font-size:12.5px;color:var(--tink-2);line-height:1.5} .page-workspace .doc-card-body{margin-top:10px} /* ============================================================ SCORECARD pane — wrap the WHOLE pane in ONE clean white panel and let the app's own scorecard.css drive the interior exactly as before. theme.css deliberately does NOT touch the inner markup (factors, sliders, notes) so the "old" look is preserved. ============================================================ */ .page-workspace #scorecard-pane{max-width:none;margin:26px 40px 90px;padding:28px 32px;background:#fff;color:var(--tink);border-radius:var(--tr);box-shadow:var(--tshadow)} /* Comps-style gold fill up to the thumb, ramping to bright scarlet at the top of the scale (positions ~7–10). Top layer is a neutral mask that hides the colour ramp past the thumb (--fill, set in workspace.html). */ .page-workspace .sc-score-slider{ background: linear-gradient(90deg, transparent 0 var(--fill,50%), #e9edf3 var(--fill,50%), #dfe5ee 100%), linear-gradient(90deg, var(--gold-lt) 0%, var(--gold) 42%, var(--gold-deep) 58%, #e8342a 70%, #e8342a 100%); background-size: 100% 100%; } .page-workspace .sc-score-row.sc-animating .sc-score-slider{ animation:none; background-size:100% 100%; } @media(max-width:900px){ .page-workspace .id-addr{font-size:34px} .page-workspace .val-anchor-card{grid-template-columns:repeat(2,1fr)} .page-workspace .docs-grid{grid-template-columns:1fr} .page-workspace .comps-root{grid-template-columns:1fr;grid-template-rows:auto;height:auto} .page-workspace .comps-list{overflow:visible} .page-workspace #comps-map{min-height:420px} .page-workspace .comps-main-col{border-right:0;border-bottom:1px solid var(--tline-2)} .page-workspace .comps-list-header,.page-workspace .comps-row{grid-template-columns:30px minmax(0,1fr) 80px} .page-workspace .comps-list-header span:nth-child(n+4),.page-workspace .comps-row > *:nth-child(n+5){display:none} } /* ============================================================ page-home — landing / sign-in (restyles home.html's classes) ============================================================ */ body.page-home{font-family:'Inter',-apple-system,system-ui,sans-serif;color:#fff;background:var(--navy-deep)} .page-home .serif{font-family:'Playfair Display',Georgia,serif} .page-home .scene{position:fixed;inset:0;z-index:-1;background:var(--bgimg) center 62% / cover no-repeat;background-color:var(--navy-deep)} .page-home .scene::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,31,58,.96) 0%,rgba(15,31,58,.88) 20%,rgba(15,31,58,.5) 40%,rgba(15,31,58,.12) 55%,rgba(13,20,38,.18) 80%,rgba(11,17,33,.62) 100%)} /* auth + reset gates */ .page-home .auth-gate{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:24px} .page-home .auth-gate.hidden{display:none} .page-home .auth-card{background:#17233f;color:#f4f1ea;border:1px solid rgba(255,255,255,.08);border-radius:16px;box-shadow:var(--tshadow);padding:38px 36px;max-width:420px;width:100%} .page-home .auth-brand{display:flex;justify-content:center;margin-bottom:8px} .page-home .auth-logo{height:52px;width:auto} .page-home .auth-tagline{text-align:center;font-size:13px;color:rgba(244,241,234,.6);margin-bottom:24px} .page-home .auth-eyebrow{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep)} .page-home .auth-title{font-family:'Playfair Display',Georgia,serif;font-size:30px;font-weight:600;color:#f4f1ea;margin-top:6px} .page-home .auth-sub{font-size:14px;color:rgba(244,241,234,.72);margin-top:8px;line-height:1.55} .page-home .auth-sub strong{color:var(--gold-lt)} .page-home .auth-field{margin-top:16px} .page-home .auth-field label{display:block;font-size:12px;font-weight:600;color:rgba(244,241,234,.6);margin-bottom:6px} .page-home .auth-field input{width:100%;height:46px;border:1px solid var(--tline);border-radius:9px;padding:0 14px;font-family:inherit;font-size:15px;color:var(--tink);outline:none} .page-home .auth-field input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(189,156,91,.18)} .page-home .auth-btn{width:100%;height:50px;margin-top:20px;border:0;border-radius:10px;cursor:pointer;font-family:inherit;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fdf8ee;background:linear-gradient(180deg,var(--gold-lt),var(--gold) 55%,var(--gold-deep));box-shadow:0 12px 28px -12px rgba(120,92,38,.8),inset 0 1px 0 rgba(255,255,255,.35)} .page-home .auth-msg{margin-top:14px;font-size:13px;padding:10px 12px;border-radius:8px} .page-home .auth-msg.hidden{display:none} .page-home .auth-msg.err{background:var(--trose-bg);color:var(--trose)} .page-home .auth-msg.ok,.page-home .auth-msg.success{background:var(--tok-bg);color:var(--tok)} .page-home .auth-foot{margin-top:18px;text-align:center;font-size:12px;color:rgba(244,241,234,.55)} .page-home .auth-card a{color:var(--gold-deep);font-weight:600;text-decoration:none} /* signed-in shell */ .page-home .app{position:relative;max-width:1180px;margin:0 auto;padding:30px 40px 60px} .page-home .brand-bar{display:flex;align-items:flex-start;justify-content:space-between;background:transparent;border:0;padding:0;box-shadow:none} .page-home .brand-bar .brand-logo{height:56px;width:auto;display:block} .page-home .brand-tagline{font-size:13px;color:rgba(255,255,255,.9);margin-top:3px;padding-left:2px} .page-home .user-mark{display:flex;align-items:center;gap:11px} .page-home .user-mark .avatar{width:44px;height:44px;border-radius:50%;background:var(--gold);color:#fff;font-weight:600;font-size:16px;display:flex;align-items:center;justify-content:center} .page-home #userName{color:#fff !important} .page-home .signout-btn{margin-top:6px;display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.06em;color:#fff;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.5);padding:7px 13px;border-radius:5px;cursor:pointer} /* hero */ .page-home .hero{text-align:center;max-width:840px;margin:28px auto 0} .page-home .hero .eyebrow{font-size:13px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:#fff} .page-home .hero .title{font-family:'Playfair Display',Georgia,serif;font-weight:600;font-size:58px;line-height:1.05;letter-spacing:-.01em;color:var(--gold-lt);margin-top:18px} .page-home .hero .title .italic{font-style:italic;color:#fff} .page-home .hero .tagline{font-size:16px;line-height:1.62;color:rgba(255,255,255,.9);margin:20px auto 0;max-width:730px} /* address search */ .page-home .address-form{max-width:760px;margin:34px auto 0;display:flex;flex-direction:column;gap:14px} .page-home .address-input-shell{position:relative;display:flex;align-items:center;gap:12px;background:#fff;border-radius:11px;padding:0 20px;height:66px;box-shadow:0 20px 50px -18px rgba(0,0,0,.55)} .page-home .address-icon{color:var(--gold);font-size:20px;flex:none} .page-home .address-input{flex:1;border:0;outline:0;font-family:inherit;font-size:18px;color:var(--tink);background:transparent} .page-home .address-input::placeholder{color:#9aa1ad} .page-home .address-suggestions{display:none;position:absolute;top:72px;left:0;right:0;background:#fff;border-radius:10px;box-shadow:var(--tshadow);overflow:hidden;z-index:6;text-align:left} .page-home .address-suggestions.show{display:block} .page-home .suggestion{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px;cursor:pointer;border-bottom:1px solid var(--tline-2)} .page-home .suggestion:last-child{border-bottom:0} .page-home .suggestion:hover{background:#fbf8f0} .page-home .suggestion-main{font-size:15px;color:var(--tink);font-weight:500} .page-home .suggestion-sub{font-size:12px;color:var(--tink-3)} .page-home .gp-badge{font-size:9px;font-weight:700;letter-spacing:.05em;color:var(--tink-3);white-space:nowrap} .page-home .btn-primary{height:72px;border:0;border-radius:11px;cursor:pointer;font-family:inherit;font-size:17px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fdf8ee;background:linear-gradient(180deg,var(--gold-lt) 0%,var(--gold) 52%,var(--gold-deep) 100%);box-shadow:0 18px 44px -16px rgba(120,92,38,.85),inset 0 1px 0 rgba(255,255,255,.35)} /* active properties */ .page-home .recents{margin-top:96px} .page-home .recents-header{display:flex;align-items:baseline;justify-content:space-between;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.3)} .page-home .recents-label{font-size:20px;font-weight:600;color:var(--gold-lt)} .page-home .recents-link{font-size:15px;color:var(--gold-lt)} .page-home .recent-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px} .page-home .recent-card{position:relative;background:#fff;border-radius:11px;padding:24px;box-shadow:0 24px 60px -24px rgba(0,0,0,.6);cursor:pointer;transition:transform .14s} .page-home .recent-card:hover{transform:translateY(-3px)} .page-home .recent-address{font-family:'Playfair Display',Georgia,serif;font-size:23px;font-weight:600;color:var(--tink)} .page-home .recent-meta{font-size:13px;color:var(--tink-2);margin-top:8px} .page-home .recent-status{display:inline-block;margin-top:16px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:6px 14px;border-radius:20px;background:#f5edda;color:var(--gold-deep)} .page-home .recent-status.draft{background:var(--trose-bg);color:var(--trose)} .page-home .recent-agents{display:flex;gap:5px;margin-top:16px} .page-home .tiny-avatar{width:26px;height:26px;border-radius:50%;background:var(--navy);color:#fff;font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center} .page-home .tiny-avatar.more{background:var(--tline);color:var(--tink-2)} .page-home .recent-empty{grid-column:1 / -1;text-align:center;color:rgba(255,255,255,.85);padding:30px;font-size:14px} /* next steps + footer */ .page-home .next-steps{margin-top:60px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:13px;padding:26px 30px} .page-home .next-steps-label{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-lt);margin-bottom:14px} .page-home .step-item{display:flex;gap:14px;padding:9px 0} .page-home .step-item-num{font-family:'Playfair Display',Georgia,serif;font-style:italic;color:var(--gold-lt);font-size:18px;width:30px;flex:none} .page-home .step-item-text{font-size:14px;color:rgba(255,255,255,.9);line-height:1.55} .page-home .footer{margin-top:48px;text-align:center;font-size:12px;color:rgba(255,255,255,.6)} /* loading overlay (recolor only — visibility left to existing JS/CSS) */ .page-home .loading-overlay{background:rgba(11,17,33,.94)} .page-home .loading-content{background:#fff;color:var(--tink);border-radius:16px;box-shadow:var(--tshadow);padding:34px 36px;max-width:460px} .page-home .loading-brand{font-family:'Playfair Display',Georgia,serif;font-size:24px;font-weight:600;color:var(--tink);text-align:center} .page-home .loading-brand .price{color:var(--gold-deep)} .page-home .loading-address{text-align:center;font-size:14px;color:var(--tink-2);margin-top:6px} .page-home .loading-step{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--tline-2)} .page-home .loading-step-num{font-family:'Playfair Display',Georgia,serif;font-style:italic;color:var(--gold-deep);width:26px;flex:none} .page-home .loading-step-text{font-size:14px;color:var(--tink)} .page-home .loading-step.pending{opacity:.5} @media(max-width:820px){ .page-home .hero .title{font-size:42px} .page-home .recent-grid{grid-template-columns:1fr} } /* ============================================================ Local Market Trends — chart enhancements (valuation tab) Base .trend-* layout lives in valuation.css; these add the brand recolor, hover crosshair/tooltip, and entrance animation. ============================================================ */ .page-workspace .trend-chart-area{position:relative} /* Fixed 116px tall == the 116-unit viewBox height, and the viewBox width is set to the real pixel width in JS, so the canvas is never scaled non-uniformly: dots stay round and the line keeps its true shape at any card width. */ .page-workspace .trend-svg{display:block;width:100%;height:116px} .page-workspace .trend-hit{pointer-events:all;cursor:crosshair} .page-workspace .trend-hover{opacity:0;transition:opacity .12s ease;pointer-events:none} .page-workspace .trend-hover.is-on{opacity:1} .page-workspace .trend-tooltip{position:absolute;top:2px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;line-height:1.2;background:var(--navy);color:#fff;padding:4px 9px;border-radius:6px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .12s ease;box-shadow:0 6px 16px -6px rgba(21,41,74,.75);z-index:5} .page-workspace .trend-tooltip.is-on{opacity:1} .page-workspace .trend-tooltip b{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums} .page-workspace .trend-tooltip span{font-size:9.5px;font-weight:600;opacity:.78;text-transform:uppercase;letter-spacing:.05em;margin-top:1px} .page-workspace .trend-xlabels{display:flex;justify-content:space-between;padding:5px 10px 0;font-size:10.5px;font-weight:600;color:var(--tink-3);letter-spacing:.02em;font-variant-numeric:tabular-nums} /* entrance animation */ @keyframes trendDraw{to{stroke-dashoffset:0}} @keyframes trendFadeIn{to{opacity:1}} .page-workspace .trend-line{stroke-dasharray:800;stroke-dashoffset:800;animation:trendDraw 1.05s cubic-bezier(.45,.05,.2,1) forwards} .page-workspace .trend-area{opacity:0;animation:trendFadeIn .7s .45s ease forwards} .page-workspace .trend-pt{opacity:0;animation:trendFadeIn .25s ease forwards;animation-delay:.9s} .page-workspace .trend-hover .trend-focus,.page-workspace .trend-hover .trend-cross{animation:none;opacity:1} /* DOM-by-city bars → brand palette + subject highlight + hover + grow-in */ .page-workspace .trend-bar-fill{transition:width .9s cubic-bezier(.4,.1,.2,1);background:linear-gradient(90deg,#9aa9c2,#6f86ab);border-radius:5px} .page-workspace .trend-bar-row{transition:background .12s ease;border-radius:6px} .page-workspace .trend-bar-row:hover{background:rgba(21,41,74,.05)} .page-workspace .trend-bar-row.is-subject .trend-bar-fill{background:linear-gradient(90deg,var(--gold-lt),var(--gold-deep))} .page-workspace .trend-bar-row.is-subject .trend-bar-label{color:var(--gold-deep);font-weight:700} /* report-selected card accent on-brand */ .page-workspace .trend-card.is-in-report{box-shadow:0 0 0 2px var(--gold)} /* ---- comps: pricing-mode label, highest-sold badge, ceiling marker (mig 22/23) ---- */ .page-workspace .comps-pricing-chip{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:2px 8px;border-radius:20px;vertical-align:middle;margin-left:6px} .page-workspace .comps-pricing-chip.is-fmv{background:linear-gradient(180deg,#f3e1ad,var(--gold-lt));color:#5a4413;border:1px solid var(--gold-deep)} .page-workspace .comps-pricing-chip.is-comp{background:var(--navy);color:#fff} .page-workspace .comps-pricing-note{margin-top:6px;font-size:12px;color:#8a6a22;font-weight:600;line-height:1.4} .page-workspace .comps-highest-badge{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:2px 7px;border-radius:5px;margin-left:6px;background:linear-gradient(180deg,#f3e1ad,var(--gold));color:#3c2d0c;border:1px solid var(--gold-deep);box-shadow:inset 0 1px 0 rgba(255,255,255,.6);white-space:nowrap} .page-workspace .comps-row.is-highest{background:linear-gradient(90deg,rgba(189,156,91,.12),transparent 60%)} .page-workspace .comps-row.is-highest .comps-row-address{font-weight:700} .page-workspace .comps-range-ceiling{position:absolute;top:0;bottom:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;pointer-events:auto;z-index:4} .page-workspace .comps-range-ceiling-tick{width:2px;flex:1 1 auto;background:repeating-linear-gradient(180deg,var(--gold-deep) 0 3px,transparent 3px 6px)} .page-workspace .comps-range-ceiling-flag{position:absolute;top:-16px;font-size:9px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#8a6a22;white-space:nowrap} /* ---- offers control redesign (editable number + stacked steppers + stable state slot) ---- */ .page-workspace .nav-offers .no-field{display:inline-flex;align-items:stretch;background:linear-gradient(180deg,#f3e1ad,var(--gold-lt));border:1px solid rgba(120,95,40,.5);border-radius:8px;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 2px 4px -1px rgba(60,44,12,.5);height:26px} .page-workspace .nav-offers .no-input{width:32px;border:0;background:transparent;text-align:center;font-family:inherit;font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;color:#2b2008;padding:0 2px;outline:none} .page-workspace .nav-offers .no-input.is-ai{color:#6b5a2e;font-style:italic;font-weight:700} .page-workspace .nav-offers .no-input:focus{box-shadow:inset 0 0 0 2px rgba(60,44,12,.4)} .page-workspace .nav-offers .no-steps{display:flex;flex-direction:column;border-left:1px solid rgba(120,95,40,.45)} .page-workspace .nav-offers .no-stepv{flex:1;width:20px;border:0;background:transparent;color:#3c2d0c;font-size:9px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0} .page-workspace .nav-offers .no-stepv:first-child{border-bottom:1px solid rgba(120,95,40,.35)} .page-workspace .nav-offers .no-stepv:hover{background:rgba(255,255,255,.35)} .page-workspace .nav-offers .no-stepv:active{background:rgba(60,44,12,.14)} .page-workspace .nav-offers .no-state{display:inline-flex;align-items:center;gap:6px;min-width:118px} .page-workspace .nav-offers .no-tag{font-size:10px;font-weight:700;letter-spacing:.04em;white-space:nowrap} .page-workspace .nav-offers .no-tag.is-aiest{color:#6b5a2e;font-style:italic} .page-workspace .nav-offers .no-tag.is-manual{color:#3c2d0c} .page-workspace .nav-offers .no-reset{font-size:10px;font-weight:800;letter-spacing:.02em;padding:2px 8px;border-radius:20px;border:1px solid rgba(120,95,40,.45);background:rgba(60,44,12,.14);color:#4a3a14;cursor:pointer;white-space:nowrap} .page-workspace .nav-offers .no-reset:hover{background:rgba(60,44,12,.22)}