/* Home Value workspace (see assets/homevalue.js). Built on the Money design
   system: the .money-app shell and .m-* parts from money.css, the pl- sidebar
   pieces from pipeline.css, and the hv- pieces below. Designed in Figma, page
   "Home Value" (dashboard, clients, client report, automations). Every colour
   is a money token, so the dark theme follows. */

.hv-app .m-nav .soon { margin-left: auto; font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 2px 6px; border-radius: 999px; background: var(--m-surface-2); color: var(--m-faint); }
.hv-app .m-nav .pl-navcount + .soon { margin-left: 6px; }
.hv-status { font-size: 11.5px; color: var(--m-faint); }
.hv-h2 { margin: 0; font-size: 16px; font-weight: 700; }
.hv-h4 { margin: 0; font-size: 13px; font-weight: 600; }
.hv-section { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin-top: 4px; }
.hv-section .pl-sub { margin-top: 2px; }
.hv-samplepill { margin-top: 6px; }
.hv-pad { padding: 14px 20px; }
.hv-fine { font-size: 11px; line-height: 1.5; margin-top: 12px; }
.hv-val { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hv-sub { font-size: 11px; color: var(--m-faint); }
.hv-chg { font-size: 11px; font-weight: 600; }
.hv-chg.pos { color: var(--m-pos); } .hv-chg.neg { color: var(--m-neg); }
.hv-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.hv-cell { min-width: 0; }
.hv-cell .t { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hv-cell .s { font-size: 11px; color: var(--m-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* In the clients table the cell has no width of its own, so a 5,000 letter
   name widened the table and pushed the value and actions out of view.
   The Share ledger had the same with a long link title. */
.hv-row .hv-cell, .hv-table .hv-cell { max-width: 360px; }
.hv-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px; background: var(--m-surface-2); font-size: 11px; font-weight: 500; color: var(--m-muted); white-space: nowrap; }
.hv-linkbtn { border: 0; background: none; padding: 0; cursor: pointer; font: inherit; }
.hv-linkbtn[disabled] { opacity: .5; cursor: default; }
.hv-app .pl-link.danger { color: var(--m-neg); }
.hv-app .m-empty { padding: 32px 20px; }
.hv-photo { position: relative; height: 120px; border-radius: 10px 10px 0 0; background: var(--m-surface-2) center / cover no-repeat; }
.hv-photo.tall { height: 130px; }
.hv-photo.ph { display: flex; align-items: center; justify-content: center; color: var(--m-faint); }
.hv-app .hv-photo.ph svg.i { width: 26px; height: 26px; stroke-width: 1.4; }

/* ---- sidebar ---- */
.hv-lists { display: flex; flex-direction: column; gap: 1px; }
.hv-list { display: flex; align-items: center; gap: 9px; width: 100%; padding: 5px 10px; border: 0; border-radius: 7px; background: none; font: inherit; color: var(--m-ink); text-align: left; cursor: pointer; }
.hv-list:hover { background: var(--m-surface-2); }
.hv-list.active { background: var(--m-accent-soft); }
.hv-list .t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hv-list .a, .hv-list .c { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hv-list .a { font-size: 12px; font-weight: 500; }
.hv-list .c { font-size: 10.5px; color: var(--m-faint); }
.hv-list.active .a { color: var(--m-accent); font-weight: 600; }
.hv-foot { gap: 8px; }
.hv-foot .hv-chip { align-self: flex-start; }
.hv-foot-note { font-size: 11px; line-height: 1.45; color: var(--m-faint); }

/* ---- dashboard ---- */
.hv-door .hv-person { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; background: var(--m-surface-2); margin-top: 8px; flex-wrap: wrap; }
.hv-person-empty { color: var(--m-faint); font-size: 12.5px; }
.hv-person-t { flex: 1; min-width: 180px; }
.hv-person-n { font-weight: 600; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hv-person-m { font-size: 11.5px; color: var(--m-faint); margin-top: 2px; }
.hv-person-note { color: var(--m-muted); font-style: italic; margin-top: 3px; }
.hv-declined { margin-top: 10px; }
.hv-listgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.hv-listcard { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border: 1px solid var(--m-line); border-radius: 14px; background: var(--m-surface); box-shadow: var(--m-shadow); font: inherit; color: var(--m-ink); text-align: left; cursor: pointer; min-width: 0; }
.hv-listcard:hover { border-color: var(--m-accent); }
.hv-listcard-top { display: flex; align-items: baseline; gap: 6px; }
.hv-listcard-n { font-size: 24px; font-weight: 700; line-height: 1; color: var(--m-accent); }
.hv-listcard-n.warn { color: var(--m-warn); } .hv-listcard-n.pos { color: var(--m-pos); } .hv-listcard-n.soon { color: var(--m-faint); }
.hv-listcard-u { font-size: 11.5px; color: var(--m-faint); }
.hv-listcard-arrow { margin-left: auto; width: 28px; height: 28px; border-radius: 999px; border: 1px solid var(--m-line); display: inline-flex; align-items: center; justify-content: center; color: var(--m-accent); }
.hv-app .hv-listcard-arrow svg.i { width: 13px; height: 13px; }
.hv-listcard-t { font-size: 14px; font-weight: 600; margin-top: 4px; }
.hv-listcard-b { font-size: 12px; color: var(--m-muted); }
.hv-allcard { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; padding: 18px 22px; border-radius: 14px; background: var(--m-accent); color: var(--m-surface); }
.hv-allcard-l { font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.hv-allcard-v { font-size: 13px; margin-top: 6px; opacity: .9; }
.hv-allcard-v b { font-size: 26px; font-weight: 700; margin-right: 6px; color: var(--m-surface); }
.hv-app .hv-allcard-btn { background: var(--m-surface); color: var(--m-accent); border-color: transparent; font-weight: 600; }
.hv-snapcard .m-card-head { margin-bottom: 0; }
.hv-snap { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin: 14px -20px -18px; border-top: 1px solid var(--m-line); }
.hv-snap-col { padding: 14px 20px; border-left: 1px solid var(--m-line); }
.hv-snap-col:first-child { border-left: 0; }
.hv-snap-col .lbl { font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--m-faint); }
.hv-snap-col .val { font-size: 22px; font-weight: 700; margin-top: 6px; }
.hv-snap-col .sub { font-size: 11.5px; color: var(--m-muted); margin-top: 3px; }

/* ---- clients ---- */
.hv-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.hv-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--m-line); border-radius: 999px; background: var(--m-surface); font: inherit; font-size: 12px; font-weight: 500; color: var(--m-muted); cursor: pointer; white-space: nowrap; }
.hv-pill b { font-weight: 600; color: var(--m-faint); }
.hv-pill:hover { color: var(--m-ink); border-color: var(--m-faint); }
.hv-pill.on { background: var(--m-accent-soft); border-color: var(--m-accent); color: var(--m-accent); font-weight: 600; }
.hv-pill.on b { color: var(--m-accent); }
.hv-tablehead { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; padding: 14px 20px; border-bottom: 1px solid var(--m-line); }
.hv-search { display: flex; align-items: center; gap: 8px; flex: 1; max-width: 380px; min-width: 200px; padding: 0 10px; border-radius: 8px; background: var(--m-surface-2); color: var(--m-faint); }
.hv-search-in { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 12.5px; padding: 8px 0; color: var(--m-ink); outline: none; }
.hv-search-in::placeholder { color: var(--m-faint); }
.hv-table td { vertical-align: middle; }
.hv-table .hv-row.open td { background: var(--m-surface-2); border-bottom-color: transparent; }
.hv-quickbtn { border: 0; background: none; padding: 0; font: inherit; font-size: 12px; font-weight: 600; color: var(--m-accent); cursor: pointer; white-space: nowrap; }
.hv-quickrow td { background: var(--m-surface-2); padding: 4px 20px 18px; }
.hv-app .m-table tbody tr.hv-quickrow:hover td { background: var(--m-surface-2); }
.hv-quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px 24px; }
.hv-quick-col { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; min-width: 0; }
.hv-quick-col .m-sectionlabel { margin-bottom: 4px; }
.hv-quick-col .pl-link { margin-top: 4px; align-self: flex-start; }
.hv-pcheck { color: var(--m-ink); }
.hv-pnote { font-size: 11.5px; line-height: 1.45; margin-top: 6px; }
.hv-basis { line-height: 1.5; }

/* ---- partners ---- */
.hv-prow.sel { background: var(--m-accent-soft); }
/* A long company name widened the phone page to 677px. */
.hv-pcard .m-card-head > div:first-child { min-width: 0; overflow-wrap: anywhere; }
.hv-pgroups { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-top: 8px; }
.hv-pgroup { display: flex; flex-direction: column; gap: 6px; }
.hv-pclient { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--m-line-soft); min-width: 0; }
.hv-pclient .hv-cell { flex: 1; }

/* ---- automations ---- */
.hv-cols { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.hv-valcard { display: flex; flex-direction: column; gap: 12px; }
.hv-valcard .m-card-head { margin-bottom: 0; }
.hv-typeahead { position: relative; }
.hv-dd { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; background: var(--m-surface); border: 1px solid var(--m-line); border-radius: 10px; box-shadow: 0 12px 32px rgba(17, 20, 39, .14); overflow: hidden; }
.hv-dd-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 9px 12px; border: 0; border-top: 1px solid var(--m-line-soft); background: none; font: inherit; color: var(--m-ink); text-align: left; cursor: pointer; }
.hv-dd-row.first { border-top: 0; background: var(--m-accent-soft); }
.hv-dd-row:hover { background: var(--m-surface-2); }
.hv-dd-row .a { font-weight: 600; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hv-dd-row .s { font-size: 11px; color: var(--m-faint); white-space: nowrap; }
.hv-cityrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.hv-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 10px; }
.hv-feats { display: flex; flex-wrap: wrap; gap: 8px; }
.hv-feat { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--m-line); border-radius: 999px; background: var(--m-surface); font: inherit; font-size: 12px; font-weight: 500; color: var(--m-muted); cursor: pointer; }
.hv-feat:hover { border-color: var(--m-faint); color: var(--m-ink); }
.hv-feat.on { background: var(--m-accent-soft); border-color: var(--m-accent); color: var(--m-accent); font-weight: 600; }
.hv-app .hv-feat svg.i { width: 13px; height: 13px; }
.hv-runrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* The facts changed since the report was computed: an amber ring says so
   instead of re-running by itself. */
.hv-app .hv-runbtn.hv-stale { background: var(--m-surface); color: var(--m-warn); border: 2px solid var(--m-warn); }
.hv-app .hv-runbtn.hv-stale:hover { background: var(--m-warn-soft); }
.hv-picked { display: flex; align-items: center; gap: 6px; font-size: 11.5px; }
.hv-enrollform { padding: 12px 20px 14px; border-bottom: 1px solid var(--m-line); display: flex; flex-direction: column; gap: 10px; }
.hv-enrolled .m-card-head { margin-bottom: 10px; }
.hv-subs { display: flex; flex-direction: column; }
.hv-sub-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--m-line-soft); }
.hv-sub-main { flex: 1; min-width: 0; }
.hv-sub-main .t { font-weight: 600; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; overflow-wrap: anywhere; }
.hv-sub-main .s { font-size: 11px; color: var(--m-faint); margin-top: 1px; overflow-wrap: anywhere; }
.hv-sub-right { text-align: right; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.hv-sub-right .hv-val { font-size: 14px; }
.hv-sub-acts { display: flex; gap: 10px; margin-top: 6px; }
.hv-report { display: flex; flex-direction: column; gap: 14px; }
.hv-report .m-card-head { margin-bottom: 0; }
.hv-repttl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hv-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.hv-hero-tile { padding: 14px 16px; border-radius: 12px; background: var(--m-surface-2); }
.hv-hero-tile .lbl { font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--m-faint); }
.hv-hero-tile .val { font-size: 24px; font-weight: 700; margin-top: 6px; letter-spacing: -.01em; }
.hv-hero-tile .val.pos { color: var(--m-pos); } .hv-hero-tile .val.neg { color: var(--m-neg); } .hv-hero-tile .val.warn { color: var(--m-warn); } .hv-hero-tile .val.accent { color: var(--m-accent); }
.hv-hero-tile .sub { font-size: 11.5px; color: var(--m-muted); margin-top: 4px; line-height: 1.4; }
.hv-mchips { display: flex; flex-wrap: wrap; gap: 6px; }
.hv-mchips .m-chip { padding: 4px 10px; }
.hv-trend .m-legend { display: none; }
.hv-compgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.hv-comp { position: relative; display: flex; flex-direction: column; padding: 0; border: 1px solid var(--m-line); border-radius: 12px; background: var(--m-surface); font: inherit; color: var(--m-ink); text-align: left; cursor: pointer; overflow: hidden; min-width: 0; }
.hv-comp:hover { border-color: var(--m-accent); }
.hv-comp-pills { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.hv-comp-pills .m-pill { background: var(--m-ink); color: var(--m-bg); }
.hv-comp-pills .m-pill.neg { background: var(--m-neg); color: var(--m-surface); }
.hv-comp-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 2px; }
.hv-comp-price { font-size: 15px; font-weight: 700; }
.hv-comp-addr { font-size: 12px; font-weight: 500; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- client home report ---- */
.hv-preview { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; padding: 12px 18px; border-radius: 12px; background: var(--m-warn-soft); color: var(--m-warn); font-size: 12.5px; font-weight: 500; }
.hv-preview b { font-weight: 700; }
.hv-avrow { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; padding: 10px 14px; border-radius: 10px; border: 1px dashed var(--m-line); }
.hv-avrow.open { display: block; }
.hv-top { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); gap: 18px; align-items: stretch; }
.hv-kicker { font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--m-accent); }
.hv-kicker-2 { margin-top: 14px; }
.hv-value { display: flex; flex-direction: column; gap: 6px; padding: 22px 24px; }
.hv-street { margin: 4px 0 0; font-size: 26px; font-weight: 700; letter-spacing: -.01em; line-height: 1.15; }
.hv-locality { font-size: 13px; color: var(--m-muted); margin-bottom: 10px; }
.hv-bigrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hv-big { font-size: 44px; font-weight: 700; letter-spacing: -.02em; line-height: 1.05; color: var(--m-accent); }
.hv-big.sm { font-size: 24px; color: var(--m-ink); }
.hv-big.pos { color: var(--m-pos); } .hv-big.neg { color: var(--m-neg); } .hv-big.warn { color: var(--m-warn); }
.hv-delta { font-size: 11.5px; padding: 4px 9px; }
.hv-avnote { font-style: italic; }
.hv-track { position: relative; height: 6px; margin-top: 14px; border-radius: 3px; background: var(--m-surface-2); }
.hv-track::before { content: ""; position: absolute; left: 14%; right: 14%; top: 0; bottom: 0; border-radius: 3px; background: var(--m-accent); opacity: .85; }
.hv-track i { position: absolute; top: -3px; width: 12px; height: 12px; margin-left: -6px; border-radius: 999px; background: var(--m-surface); border: 3px solid var(--m-accent); }
.hv-range { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--m-faint); margin-top: 6px; }
.hv-range .c { color: var(--m-accent); font-weight: 600; }
.hv-cta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.hv-equity { background: var(--m-accent); color: var(--m-surface); border-color: transparent; padding: 22px 24px; display: flex; flex-direction: column; gap: 6px; }
.hv-equity .hv-kicker, .hv-equity .hv-big { color: var(--m-surface); }
.hv-equity .hv-kicker { opacity: .8; }
.hv-equity .hv-big { font-size: 36px; }
.hv-eq-sub { font-size: 12px; opacity: .85; }
.hv-eq-rows { display: flex; flex-direction: column; margin-top: 10px; }
.hv-eq-rows > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid color-mix(in srgb, var(--m-surface) 25%, transparent); font-size: 12.5px; }
.hv-eq-rows > div.tot { font-weight: 700; }
.hv-eq-rows b { font-variant-numeric: tabular-nums; }
.hv-pi { height: 6px; margin-top: 8px; border-radius: 3px; background: color-mix(in srgb, var(--m-surface) 25%, transparent); overflow: hidden; }
.hv-pi i { display: block; height: 100%; border-radius: 3px; background: var(--m-pos); }
.hv-pi-lbl { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; opacity: .9; margin-top: 6px; }
.hv-pi-lbl .p { color: var(--m-pos-soft); font-weight: 600; }
.hv-eq-note { font-size: 11px; line-height: 1.5; opacity: .8; margin-top: 10px; }
.hv-conf { display: flex; flex-direction: column; gap: 6px; padding: 22px 24px; }
.hv-conf .hv-big { font-size: 36px; }
.hv-conf .hv-eq-sub { color: var(--m-muted); opacity: 1; }
.hv-conf .hv-eq-note { color: var(--m-faint); opacity: 1; }
.hv-reasons { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--m-muted); line-height: 1.5; }
.hv-chartcard .m-card-head { align-items: flex-start; }
.hv-chart .m-legend { display: none; }
.hv-carousel { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: thin; }
.hv-card { position: relative; flex: 0 0 236px; scroll-snap-align: start; display: flex; flex-direction: column; padding: 0; border: 1px solid var(--m-line); border-radius: 12px; background: var(--m-surface); font: inherit; color: var(--m-ink); text-align: left; cursor: pointer; overflow: hidden; }
.hv-card:hover { border-color: var(--m-accent); }
.hv-cardpill { position: absolute; top: 10px; left: 10px; background: var(--m-ink); color: var(--m-bg); }
.hv-cardpill.pos { background: var(--m-pos); color: var(--m-surface); }
.hv-card-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 2px; }
.hv-card-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.hv-card-row b { font-size: 15px; font-weight: 700; }
.hv-card-addr { font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hv-ask { padding: 32px 24px; }
.hv-ask-in { max-width: 560px; margin: 0 auto; text-align: center; }
.hv-ask-in .hv-h2 { font-size: 22px; margin: 4px 0 6px; }
.hv-askrow { display: flex; gap: 8px; margin-top: 16px; }
.hv-askrow .m-input { flex: 1; }

/* ---- modals ---- */
.hv-modal-comp { display: flex; flex-direction: column; gap: 8px; }
.hv-modal-comp .hv-photo { border-radius: 10px; }
.hv-adjtable { margin-top: 6px; }
.hv-adjtable th:first-child, .hv-adjtable td:first-child { padding-left: 0; }
.hv-adjtable th:last-child, .hv-adjtable td:last-child { padding-right: 0; }
.hv-adjtable td.pos { color: var(--m-pos); } .hv-adjtable td.neg { color: var(--m-neg); }
.hv-iframe { display: block; width: 100%; height: 70vh; border: 1px solid var(--m-line); border-radius: 10px; background: var(--m-surface); }

/* ---- share ---- */
.hv-sharekinds { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.hv-shareform { align-items: start; }
.hv-shareform .m-field { min-width: 0; }
.hv-shareblock { margin-top: 10px; font-size: 12.5px; }
.hv-shareacts { margin-top: 14px; align-items: center; flex-wrap: wrap; }
.hv-sharenote { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 14px; padding: 10px 14px; border: 1px solid var(--m-line); border-radius: 10px; background: var(--m-surface-2); font-size: 12.5px; }
.hv-sharenote.bad { border-color: var(--m-neg); color: var(--m-neg); background: none; }
.hv-sharenote code { font-size: 11.5px; color: var(--m-muted); word-break: break-all; }

/* ---- video ---- */
.hv-vnew { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 22px; align-items: center; }
.hv-vstage { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; border: 1px solid var(--m-line); background: #0d1117; overflow: hidden; }
.hv-vstage-el { width: 100%; height: 100%; object-fit: cover; background: #0d1117; }
.hv-vstage-el.off { display: none; }
.hv-vstage-note { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 0 24px; text-align: center; font-size: 12.5px; color: rgba(255, 255, 255, .6); }
.hv-vstage-el:not(.off) ~ .hv-vstage-note { display: none; }
.hv-vrec { position: absolute; left: 12px; top: 12px; display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 999px; background: rgba(0, 0, 0, .6); font-size: 11.5px; font-weight: 600; color: #fff; }
.hv-vrec i { width: 8px; height: 8px; border-radius: 50%; background: var(--m-neg); animation: hv-blink 1.2s infinite; }
@keyframes hv-blink { 50% { opacity: .25; } }
.hv-vside { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.hv-vtitle { width: 100%; }
.hv-verr { font-size: 12.5px; }
.hv-vgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.hv-vcard { display: flex; flex-direction: column; border: 1px solid var(--m-line); border-radius: 12px; background: var(--m-surface); overflow: hidden; min-width: 0; }
.hv-vcard-top { position: relative; aspect-ratio: 16 / 9; background: var(--m-surface-2); }
.hv-vcard-top video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.hv-vcard-top .hv-photo { height: 100%; border-radius: 0; }
.hv-vdur { position: absolute; right: 8px; bottom: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(0, 0, 0, .7); font-size: 11px; font-weight: 600; color: #fff; }
.hv-vcard-body { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; min-width: 0; }
.hv-vname { padding: 0; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--m-ink); text-align: left; cursor: pointer; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hv-vname:hover { text-decoration: underline; }
.hv-vrename { display: flex; gap: 8px; align-items: center; }
.hv-vrename .m-input { flex: 1; min-width: 0; }
.hv-snapfoot { margin-top: 16px; font-size: 11.5px; }
.hv-snap-col .sub b.pos { color: var(--m-pos); } .hv-snap-col .sub b.neg { color: var(--m-neg); }

@media (max-width: 1100px) {
  .hv-cols, .hv-top { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .hv-vnew { grid-template-columns: minmax(0, 1fr); }
  /* one column that may shrink below its content; the lists and the footer leave the rail */
  .hv-app { grid-template-columns: minmax(0, 1fr); align-content: start; }
  .hv-side .hv-lists, .hv-side .hv-foot, .hv-side .pl-newbtn { display: none; }
  .hv-quickrow td { padding-left: 14px; padding-right: 14px; }
  .hv-snap { margin-left: -16px; margin-right: -16px; }
  .hv-big { font-size: 34px; }
  .hv-value, .hv-equity, .hv-conf { padding: 18px 16px; }
  .hv-cityrow { grid-template-columns: minmax(0, 1fr); }
  .hv-askrow { flex-direction: column; }
}

/* =====================================================================
   The client's report, 2026-09-20 (Figma "Client: Home Value only v2").
   Self-contained hvc- styles on the client portal's own gray / navy / amber,
   so the page draws the same under the client bar and inside the agent's
   preview. The chart, the carousels and the comp pop-up are the shared hv-
   pieces, re-tinted here through the m- tokens they already read.
   ===================================================================== */
.hvc-app { display: block; background: #f5f6f8; min-height: calc(100vh - 60px); }
.hvc {
  --m-accent: #1d2733; --m-ink: #111827; --m-muted: #6b7280; --m-faint: #9ca3af; --m-line: #e5e7eb; --m-surface: #ffffff;
  max-width: 1160px; margin: 0 auto; padding: 32px 24px 56px; display: flex; flex-direction: column; gap: 20px;
  overflow-wrap: anywhere;   /* a 5,000 letter name or street wraps instead of widening the page */
  color: #111827; font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
}
/* Inside the agent shell .hv-main is a flex column: with auto margins the
   report sized to its content and ran 7px past the window. */
.hvc-inpreview { padding: 8px 0 24px; width: 100%; box-sizing: border-box; }
.hvc-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 24px; }
.hvc-h1 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -0.01em; }
.hvc-h2 { margin: 0; font-size: 18px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.hvc-h3 { margin: 0; font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hvc-sub { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; color: #6b7280; }
.hvc-faint { font-size: 12px; color: #6b7280; line-height: 1.45; }
.hvc-kicker { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #6b7280; }
.hvc-kicker.gold { color: #92400e; }
.hvc-new { font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #92400e; background: #fef3c7; border-radius: 999px; padding: 2px 7px; }
.hvc-sent { font-size: 13px; font-weight: 600; color: #065f46; background: #d1fae5; border-radius: 8px; padding: 9px 12px; }

.hvc-greet { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.hvc-greet-l { flex: 1 1 320px; min-width: 0; }
.hvc-greet-r { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hvc-switch { display: flex; gap: 2px; padding: 4px; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; max-width: 100%; overflow-x: auto; }
.hvc-switch button { border: 0; background: none; font: inherit; font-size: 12px; font-weight: 600; color: #4b5563; padding: 7px 12px; border-radius: 7px; cursor: pointer; white-space: nowrap; }
.hvc-switch button.on { background: #1d2733; color: #fff; }
.hvc-email { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 12px; font-weight: 600; color: #1d2733; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 10px 12px; cursor: pointer; }
.hvc-email i { width: 8px; height: 8px; border-radius: 50%; background: #059669; }
.hvc-email.off { color: #6b7280; }
.hvc-email.off i { background: #d1d5db; }
.hvc-email:disabled { cursor: default; opacity: 0.7; }

.hvc-hero { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 20px; align-items: stretch; }
.hvc-value { display: flex; flex-direction: column; gap: 6px; padding: 28px; }
.hvc-street { margin: 0; font-size: 30px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; }
.hvc-locality { font-size: 13px; color: #6b7280; margin-bottom: 10px; }
.hvc-bigrow { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hvc-big { font-size: 52px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; color: #1d2733; font-variant-numeric: tabular-nums; }
.hvc-track { height: 8px; border-radius: 999px; background: #e5e7eb; margin-top: 10px; overflow: hidden; }
.hvc-track i { display: block; height: 100%; border-radius: 999px; background: #1d2733; }
.hvc-range { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: #6b7280; }
.hvc-range b { color: #1d2733; font-weight: 600; }
.hvc-av { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; padding: 12px 14px; background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; }
.hvc-av b { font-size: 22px; font-weight: 700; color: #1d2733; white-space: nowrap; }
.hvc-av-note { font-size: 12px; color: #78350f; margin-top: 2px; line-height: 1.45; }
.hvc-cta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.hvc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-size: 13px; font-weight: 600; color: #1d2733; background: #fff; border: 1px solid #d1d5db; border-radius: 8px; padding: 10px 16px; cursor: pointer; text-decoration: none; min-height: 40px; }
.hvc-btn.primary { background: #1d2733; border-color: #1d2733; color: #fff; }
.hvc-btn.gold { background: #f59e0b; border-color: #f59e0b; color: #1d2733; }
.hvc-btn.ghost { background: transparent; border-color: rgba(255,255,255,0.3); color: #fff; }
.hvc-btn:disabled { opacity: 0.55; cursor: default; }
.hvc-btn:focus-visible, .hvc-email:focus-visible, .hvc-switch button:focus-visible, .hvc-opt:focus-visible { outline: 2px solid #f59e0b; outline-offset: 2px; }

.hvc-equity { background: #1d2733; border-color: #1d2733; color: #fff; display: flex; flex-direction: column; gap: 8px; padding: 28px; }
.hvc-equity .hvc-kicker { color: #fbbf24; }
.hvc-equity .hvc-big { color: #fff; font-size: 40px; }
.hvc-eq-sub { font-size: 13px; color: rgba(255,255,255,0.75); }
.hvc-eq-rows { margin-top: 8px; }
.hvc-eq-rows > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid rgba(255,255,255,0.15); font-size: 13px; color: rgba(255,255,255,0.8); }
.hvc-eq-rows b { color: #fff; font-weight: 600; }
.hvc-eq-rows .tot span { color: #fff; font-weight: 600; }
.hvc-pi { height: 8px; border-radius: 999px; background: rgba(255,255,255,0.18); overflow: hidden; }
.hvc-pi i { display: block; height: 100%; border-radius: 999px; background: #34d399; }
.hvc-pi-lbl { display: flex; justify-content: space-between; font-size: 12px; color: rgba(255,255,255,0.8); }
.hvc-pi-lbl .p { color: #34d399; font-weight: 600; }
.hvc-eq-note { font-size: 12px; line-height: 1.5; color: rgba(255,255,255,0.65); }
.hvc-eq-empty { font-size: 18px; font-weight: 600; line-height: 1.35; }
.hvc-equity .hvc-btn { align-self: flex-start; margin-top: 6px; }

.hvc-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.hvc-tile { padding: 18px; display: flex; flex-direction: column; gap: 6px; border-radius: 12px; }
.hvc-tile-v { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.hvc-tile-v.pos { color: #059669; } .hvc-tile-v.neg { color: #dc2626; }

.hvc-sec { display: flex; flex-direction: column; gap: 4px; }
.hvc-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 10px; }
.hvc-opt { display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: 12px; color: inherit; text-decoration: none; }
.hvc-opt:hover { border-color: #1d2733; }
.hvc-opt-v { font-size: 26px; font-weight: 700; color: #1d2733; font-variant-numeric: tabular-nums; }
.hvc-link { font-size: 13px; font-weight: 600; color: #1d2733; margin-top: auto; padding-top: 8px; }

.hvc-hero > *, .hvc-row2 > *, .hvc-row3 > * { min-width: 0; }
.hvc-row2 { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 20px; align-items: stretch; }
.hvc-row2 > .m-card { margin: 0; border-radius: 14px; border-color: #e5e7eb; box-shadow: none; min-width: 0; }
.hvc .hv-chart .m-chart path[fill-opacity] { fill: #f59e0b; fill-opacity: 0.16; }
.hvc .hv-chart .m-chart path[stroke] { stroke: #1d2733; }
.hvc-conf { display: flex; flex-direction: column; gap: 10px; }
.hvc-grade { display: flex; align-items: center; gap: 12px; }
.hvc-grade b { font-size: 15px; }
.hvc-grade-b { display: inline-flex; align-items: center; justify-content: center; min-width: 52px; height: 48px; border-radius: 12px; font-size: 28px; font-weight: 700; background: #f3f4f6; color: #374151; }
.hvc-grade-b.pos { background: #d1fae5; color: #065f46; } .hvc-grade-b.accent { background: #dbeafe; color: #1e40af; }
.hvc-grade-b.warn { background: #fef3c7; color: #92400e; } .hvc-grade-b.neg { background: #fee2e2; color: #991b1b; }
.hvc-reasons { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hvc-reasons li { position: relative; padding-left: 20px; font-size: 13px; line-height: 1.45; color: #374151; }
.hvc-reasons li::before { content: ""; position: absolute; left: 2px; top: 5px; width: 9px; height: 5px; border-left: 2px solid #059669; border-bottom: 2px solid #059669; transform: rotate(-45deg); }

.hvc .hv-section { margin-top: 4px; }
.hvc .hv-card { border-radius: 12px; }
.hvc-adj { margin-top: 4px; padding-top: 6px; border-top: 1px solid #f0f2f4; }

.hvc-row3 { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.1fr); gap: 20px; align-items: stretch; }
.hvc-row3 > section { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.hvc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hvc-chips span { font-size: 12px; font-weight: 500; color: #374151; background: #f3f4f6; border-radius: 999px; padding: 6px 12px; }
.hvc-input { width: 100%; box-sizing: border-box; font: inherit; font-size: 14px; color: #111827; background: #fff; border: 1px solid #d1d5db; border-radius: 8px; padding: 10px 12px; resize: vertical; }
.hvc-input:focus { outline: 2px solid #f59e0b; outline-offset: 1px; border-color: #1d2733; }
.hvc-agent { background: #1d2733; border-color: #1d2733; color: #fff; }
.hvc-agent p { margin: 0; font-size: 13px; line-height: 1.5; color: rgba(255,255,255,0.85); }
.hvc-agent-h { display: flex; align-items: center; gap: 12px; }
.hvc-agent-ph { width: 48px; height: 48px; border-radius: 50%; background: #f59e0b; color: #1d2733; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; flex: 0 0 auto; }
.hvc-agent-sub { font-size: 12px; color: rgba(255,255,255,0.7); margin-top: 2px; }
.hvc-agent-btns { display: flex; gap: 8px; margin-top: auto; }
.hvc-fine { font-size: 11px; line-height: 1.5; color: #9ca3af; }

@media (max-width: 1100px) {
  .hvc-hero, .hvc-row2 { grid-template-columns: minmax(0, 1fr); }
  .hvc-row3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hvc-row3 > .hvc-agent { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .hvc { padding: 16px 14px 40px; gap: 14px; }
  .hvc-h1 { font-size: 22px; }
  .hvc-card, .hvc-value, .hvc-equity { padding: 18px 16px; }
  .hvc-street { font-size: 22px; }
  .hvc-big { font-size: 40px; }
  .hvc-equity .hvc-big { font-size: 32px; }
  .hvc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .hvc-opts, .hvc-row3 { grid-template-columns: minmax(0, 1fr); }
  .hvc-cta .hvc-btn { width: 100%; }
  .hvc-greet-r { width: 100%; }
  /* The chart keeps its four tabs on a phone: the tab strip scrolls sideways
     under the title instead of squeezing beside it. */
  .hvc .hv-chartcard { min-width: 0; max-width: 100%; overflow: hidden; }
  .hvc .hv-chartcard .m-card-head { flex-direction: column; align-items: stretch; gap: 10px; }
  .hvc .hv-chartcard .m-card-head > * { min-width: 0; max-width: 100%; }
  .hvc .hv-chartcard .m-actions { overflow-x: auto; scrollbar-width: none; }
  .hvc .hv-chartcard .m-seg { overflow-x: auto; max-width: 100%; flex-wrap: nowrap; scrollbar-width: none; }
  .hvc .hv-chartcard .m-seg .m-btn { white-space: nowrap; flex: 0 0 auto; }
  .hvc .hv-chart { overflow: hidden; }
}

/* The value chart (valueChart in homevalue.js). Only the curve is SVG and it
   stretches; everything with type in it is HTML, so labels stay one size. */
.hvx { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 240px auto; column-gap: 12px; row-gap: 10px; font-family: inherit; }
.hvx-y { position: relative; min-width: 44px; }
.hvx-y span { position: absolute; right: 0; transform: translateY(-50%); font-size: 11px; color: #9ca3af; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hvx-plot { position: relative; min-width: 0; }
.hvx-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.hvx-grid { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed #e5e7eb; }
.hvx-grid:last-of-type, .hvx-grid:first-of-type { border-top-style: solid; }
.hvx-dot { position: absolute; right: -6px; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: #f59e0b; border: 2.5px solid #fff; box-shadow: 0 0 0 1px rgba(29,39,51,0.18), 0 2px 6px rgba(29,39,51,0.2); box-sizing: border-box; }
.hvx-tag { position: absolute; right: 0; transform: translateY(calc(-100% - 12px)); font-size: 12px; font-weight: 700; color: #fff; background: #1d2733; border-radius: 6px; padding: 3px 8px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hvx-tag.below { transform: translateY(12px); }
.hvx-hits { position: absolute; inset: 0; display: flex; }
.hvx-hits span { flex: 1 1 0; position: relative; }
.hvx-hits span:hover { background: rgba(29,39,51,0.04); }
.hvx-hits span:hover::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 1px solid rgba(29,39,51,0.25); }
.hvx-x { grid-column: 2; display: flex; justify-content: space-between; font-size: 11px; color: #9ca3af; }
.hv-chartcard .hv-chart { padding: 6px 6px 0 0; }
@media (max-width: 700px) {
  .hvx { grid-template-rows: 190px auto; column-gap: 8px; }
  .hvx-y { min-width: 38px; }
  .hvx-x span:nth-child(even) { display: none; }
}