/* v2 styles: home (owner W2-HOME, dph-16).
   The prototype's concept-c skin for the fund / investee home
   (templates/pilot/home_pages/home.html), layered over static/css/pilot/home.css,
   which stays loaded. Every rule is scoped `.dp-v2 .home`, one class more than
   home.css's `.home …`, so it wins at equal order without !important (the few
   !important below beat the dashboards' .fd-dash card rules, as in the
   prototype). Colours come from the v2 tokens only. */

/* palette: the old hues re-pointed at the tokens; pillar dots greyed on Home.
   --teal / --teal-dk stay on the brand: common.js reads them for Plotly. */
.dp-v2 .home{
  --ink:var(--dp-fg);--muted:var(--dp-muted-fg);--faint:var(--dp-muted-fg);--line:var(--dp-border);--bg:var(--dp-bg);
  --teal-tint:var(--dp-accent);
  --env:var(--dp-muted-fg);--soc:var(--dp-muted-fg);--gov:var(--dp-muted-fg);--fin:var(--dp-muted-fg);
  --proof-bg:var(--dp-muted);--proof-fg:var(--dp-muted-fg);--qw-bg:var(--dp-growth-tint);--qw-fg:var(--dp-growth);
  --warn-bg:var(--dp-warning-bg);--warn-fg:var(--dp-warning-fg);--riskav-bg:var(--dp-muted);--riskav-fg:var(--dp-muted-fg);
  --r-card:var(--dp-radius);--r-ctl:var(--dp-radius-ctl);--r-chip:var(--dp-radius);
  --fdfont:var(--dp-font);
  font-family:var(--dp-font);font-size:var(--dp-font-size);color:var(--dp-fg);
}
.dp-v2 .home h2{color:var(--dp-fg);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.dp-v2 .home .yn{font-size:11px;color:var(--dp-muted-fg)}
.dp-v2 .home .ahead{margin:16px 0 6px}

/* controls: shadcn button looks (primary, secondary, outline) */
.dp-v2 .home .btn,.dp-v2 .home .btn-w,.dp-v2 .home .btn-g,.dp-v2 .home .lnk-w{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;padding:0 12px;
  border-radius:var(--dp-radius);font-size:12.5px;font-weight:500;line-height:1;white-space:nowrap;text-decoration:none
}
.dp-v2 .home .btn{background:var(--bs-primary);color:var(--dp-card);border:1px solid transparent}
.dp-v2 .home .btn:hover{background:var(--dp-accent-fg);color:var(--dp-card)}
.dp-v2 .home .btn-g{background:var(--dp-card);color:var(--dp-fg);border:1px solid var(--dp-border)}
.dp-v2 .home .btn-g:hover{background:var(--dp-muted);color:var(--dp-fg)}
.dp-v2 .home .lnk{color:var(--dp-accent-fg)}
.dp-v2 .home .c.soon .btn,.dp-v2 .home .c.soon .btn:disabled{background:var(--dp-muted);color:var(--dp-muted-fg);border-color:transparent;opacity:1}

/* fund ribbon */
.dp-v2 .home .rib{background:var(--dp-accent);border-color:var(--dp-sidebar-border);border-radius:var(--dp-radius);color:var(--dp-accent-fg);font-size:12.5px;padding:8px 12px}

/* hero: the light "collection brief" card */
.dp-v2 .home .hero{
  background:
    radial-gradient(120% 140% at 0% 0%,rgba(var(--dp-primary-rgb),.14),transparent 55%),
    radial-gradient(90% 120% at 100% 20%,rgba(var(--dp-primary-rgb),.08),transparent 50%),
    linear-gradient(180deg,rgba(var(--dp-primary-rgb),.04) 0%,transparent 100%),
    var(--dp-bg);
  border:1px solid rgba(var(--dp-primary-rgb),.18);border-radius:8px;color:var(--dp-fg);
  display:flex;align-items:flex-end;flex-wrap:wrap;gap:14px;padding:16px 18px
}
.dp-v2 .home .hero .hero-copy{flex:1 1 320px;min-width:0}
.dp-v2 .home .hero .hero-title{margin:0 0 6px;font-size:1.05rem;font-weight:700;letter-spacing:-.02em;text-transform:none;color:var(--dp-fg)}
.dp-v2 .home .hero .hero-brief{margin:0 0 12px;max-width:46ch;font-size:12.5px;line-height:1.45;color:var(--dp-muted-fg)}
.dp-v2 .home .hero .hero-metrics{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin-bottom:4px}
.dp-v2 .home .hero .n{font-size:32px;font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--dp-fg)}
.dp-v2 .home .hero .n u{font-size:16px;opacity:.7;color:inherit}
.dp-v2 .home .hero .n.sm{font-size:1.05rem;max-width:none}
.dp-v2 .home .hero .lab{color:var(--dp-muted-fg)}
.dp-v2 .home .hero .leg{max-width:48ch;font-size:12.5px;color:var(--dp-muted-fg)}
/* the single-fill bar of the other hero states */
.dp-v2 .home .hero .bar{max-width:320px;height:4px;margin:6px 0;background:var(--dp-border)}
.dp-v2 .home .hero .bar .done{background:var(--bs-primary)}
/* the data-collected hero (R5-8): the bar spans the text column, as the client's image 2 */
.dp-v2 .home .hero.hero-gauge-layout .bar{max-width:none}
/* the segmented bar (`.progress-stacked.dp-progress-thin`): validated,
   in review, needs action; the track left over is the outstanding share */
.dp-v2 .home .hero .hero-bar{max-width:320px;gap:2px;margin-top:6px;background:var(--dp-border)}
.dp-v2 .home .hero .hero-bar .progress{height:100%;border-radius:var(--dp-radius-pill);background:transparent}
.dp-v2 .home .hero .hero-bar .progress-bar{border-radius:var(--dp-radius-pill);background:var(--bs-primary)}
.dp-v2 .home .hero .hero-seg-part .progress-bar{background:color-mix(in srgb,var(--bs-primary) 55%,var(--dp-card))}
.dp-v2 .home .hero .hero-seg-need .progress-bar{background:color-mix(in srgb,var(--bs-primary) 28%,var(--dp-card))}
.dp-v2 .home .hero .act{display:flex;flex-direction:column;align-items:stretch;gap:8px;min-width:160px}
.dp-v2 .home .hero .btn-w{background:var(--bs-primary);color:var(--dp-card);border:1px solid transparent}
.dp-v2 .home .hero .btn-w:hover{background:var(--dp-accent-fg);color:var(--dp-card)}
.dp-v2 .home .hero .lnk-w{background:var(--dp-muted);color:var(--dp-fg);border:1px solid transparent}
.dp-v2 .home .hero .lnk-w:hover{background:var(--dp-accent);color:var(--dp-fg);text-decoration:none}
@media (max-width:720px){
  .dp-v2 .home .hero{align-items:flex-start}
  .dp-v2 .home .hero .act{flex-direction:row;flex-wrap:wrap;min-width:0}
}

/* KPI (source) cards */
.dp-v2 .home .row3{gap:8px;margin-top:8px}
.dp-v2 .home .c{position:relative;padding:10px 12px;border:1px solid var(--dp-border)!important;border-radius:var(--dp-radius)!important;background:var(--dp-card)!important;box-shadow:none!important}
.dp-v2 .home .c .lab{padding-right:32px;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--dp-muted-fg)}
.dp-v2 .home .c .n{margin-top:2px;font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--dp-fg)}
.dp-v2 .home .c .n.sm{font-size:16px}
.dp-v2 .home .c .n.live{color:var(--dp-growth)}
.dp-v2 .home .c .l{margin-top:1px;font-size:11px;color:var(--dp-muted-fg)}
.dp-v2 .home .c .f{gap:8px;margin-top:8px}
.dp-v2 .home .c .btn{height:28px;padding:0 10px;font-size:12px}
.dp-v2 .home .c.soon{background:var(--dp-card)!important;border-style:dashed!important}
.dp-v2 .home .c.soon .n{color:var(--dp-muted-fg)}
/* the card's open/view link as a top-right icon button */
.dp-v2 .home .home-card-open{position:absolute;top:8px;right:8px;z-index:5;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:var(--dp-radius);color:var(--dp-fg);background:transparent;text-decoration:none}
.dp-v2 .home .home-card-open:hover{background:var(--dp-muted);color:var(--dp-fg)}
.dp-v2 .home .home-card-open .dp-icon{width:18px;height:18px}

/* the segment control (Performance / Trend) */
.dp-v2 .home .seg{background:var(--dp-muted);border:none;border-radius:var(--dp-radius);padding:2px}
.dp-v2 .home .seg button{border-radius:var(--dp-radius-ctl);padding:3px 10px;font-size:11px;font-weight:600;color:var(--dp-muted-fg)}
.dp-v2 .home .seg button.on{background:var(--dp-card);color:var(--dp-fg)}

/* graph cards (the card style only; the grid itself is unchanged) */
.dp-v2 .home .grid2{gap:8px}
.dp-v2 .home .gmsg{border-color:var(--dp-border);border-radius:var(--dp-radius);color:var(--dp-muted-fg);font-size:12.5px}
.dp-v2 .home .gcard{min-height:168px;padding:0 0 8px;overflow:hidden;border:1px solid var(--dp-border)!important;border-radius:var(--dp-radius)!important;background:var(--dp-card)!important;box-shadow:none!important}
.dp-v2 .home .gcard .gh{margin:0;gap:6px;padding:8px 12px;background:var(--dp-muted);border-bottom:1px solid var(--dp-border)}
.dp-v2 .home .gcard .gs,.dp-v2 .home .gcard .gbody{padding-left:12px;padding-right:12px}
.dp-v2 .home .gcard .gs{margin:6px 0 2px;font-size:10.5px;color:var(--dp-muted-fg)}
.dp-v2 .home .gcard .dot{width:6px;height:6px}
.dp-v2 .home .gcard .gt{font-size:12px;font-weight:700;color:var(--dp-fg)}
.dp-v2 .home .gcard .gswap{border-color:var(--dp-border);border-radius:var(--dp-radius-ctl);background:var(--dp-card);color:var(--dp-muted-fg);font-size:11px}
.dp-v2 .home .gcard .gbody{min-height:96px;justify-content:flex-start;color:var(--dp-muted-fg);font-size:12px}
.dp-v2 .home .gcard .gbody.plot{min-height:210px}
.dp-v2 .home .gcard .gbody>div>div:first-child{font-size:28px!important;font-weight:700!important;line-height:1.05!important;letter-spacing:-.03em;color:var(--dp-fg)!important}
/* the factories' stat cards (.statwrap .bignum .blabel) sit at the card's left edge, as the prototype's value + unit */
.dp-v2 .home .gcard .statwrap{min-height:0;align-items:flex-start;text-align:left}
.dp-v2 .home .gcard .statwrap .bignum,.dp-v2 .home .gcard .statwrap .blabel{text-align:left}
.dp-v2 .home .gcard .statwrap .blabel{margin-top:6px;font-size:13px;color:var(--dp-muted-fg)}
.dp-v2 .home .gcard .gnote{border-radius:var(--dp-radius-ctl);background:var(--dp-warning-bg);color:var(--dp-warning-fg)}
.dp-v2 .home .home-picker{border-color:var(--dp-border);border-radius:var(--dp-radius);box-shadow:var(--dp-shadow-md)}
.dp-v2 .home .home-picker .pgi{font-size:12.5px}
.dp-v2 .home .home-picker .pgi:hover{background:var(--dp-muted)}
.dp-v2 .home .home-picker .pgi.cur{color:var(--dp-fg);font-weight:600}

/* investee list: search, filter pills, rows, status chips */
.dp-v2 .home .list{border:1px solid var(--dp-border)!important;border-radius:var(--dp-radius)!important;background:var(--dp-card)!important;box-shadow:none!important}
.dp-v2 .home .lh{gap:10px;padding:6px 10px;background:var(--dp-card)}
.dp-v2 .home .srch{height:28px;min-height:28px;padding:0 10px;border-color:var(--dp-border);border-radius:var(--dp-radius);background:var(--dp-card)}
.dp-v2 .home .srch:focus-within{box-shadow:0 0 0 2px var(--dp-ring)}
.dp-v2 .home .srch input{height:100%;font-size:12.5px;line-height:1.2;padding:0;box-shadow:none;background:transparent}
.dp-v2 .home .fp{gap:2px}
.dp-v2 .home .fp button{border-radius:var(--dp-radius);padding:4px 9px;font-size:11px;font-weight:600;color:var(--dp-fg)}
.dp-v2 .home .fp button:hover{background:var(--dp-bg)}
.dp-v2 .home .fp button.on{background:var(--dp-muted);color:var(--dp-fg)}
.dp-v2 .home .inv-row{gap:10px;padding:7px 10px;border-bottom-color:var(--dp-border)}
.dp-v2 .home .inv-row:hover{background:var(--dp-bg)}
.dp-v2 .home .inv-row .iav{width:24px;height:24px;border-radius:var(--dp-radius-ctl);background:var(--dp-muted);color:var(--dp-muted-fg);font-size:9px;font-weight:700}
.dp-v2 .home .inv-row .nm{font-size:12.5px;font-weight:600}
.dp-v2 .home .inv-row .nm em{font-size:11px;color:var(--dp-muted-fg)}
.dp-v2 .home .inv-row .yrs{font-size:11.5px;color:var(--dp-muted-fg)}
.dp-v2 .home .inv-row .inv-request{color:var(--dp-accent-fg)}
.dp-v2 .home .inv-row .inv-open{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border-radius:var(--dp-radius);color:var(--dp-muted-fg)}
.dp-v2 .home .inv-row .inv-open:hover{background:var(--dp-muted);color:var(--dp-fg);text-decoration:none}
/* status chips, as the `.dp-status-*` badges */
.dp-v2 .home .chip{border-radius:var(--dp-radius-pill);font-size:11px;font-weight:500;padding:.3em .55em}
.dp-v2 .home .chip-completed{background:var(--dp-growth-tint);color:var(--dp-growth)}
.dp-v2 .home .chip-submitted{background:var(--dp-accent);color:var(--dp-accent-fg)}
.dp-v2 .home .chip-requires-action{background:var(--dp-warning-bg);color:var(--dp-warning-fg)}
.dp-v2 .home .chip-requested,.dp-v2 .home .chip-not-requested,.dp-v2 .home .chip-invited,.dp-v2 .home .chip-never-reported{background:var(--dp-muted);color:var(--dp-muted-fg)}
.dp-v2 .home .lf{padding:8px 10px}
.dp-v2 .home .lf .ct,.dp-v2 .home .mt{color:var(--dp-muted-fg)}
.dp-v2 .home .lf .btn-g{height:28px;padding:0 10px;font-size:12px}

/* hero, "nothing requested yet" state: it keeps the old flat markup (.n / .m / .act as direct
   children of .hero, no .hero-copy), so centre the three on one row and give the label weight. */
.dp-v2 .home .hero > .n,
.dp-v2 .home .hero > .m,
.dp-v2 .home .hero > .act{align-self:center}
.dp-v2 .home .hero[data-state="empty"] > .n{color:var(--dp-muted-fg)}
.dp-v2 .home .hero > .m{flex:1 1 240px;min-width:0}
.dp-v2 .home .hero > .m > .lab{margin-bottom:4px;font-size:14px;font-weight:600;color:var(--dp-fg)}
.dp-v2 .home .hero > .act{flex-direction:row;flex-wrap:wrap;align-items:center;min-width:0}

/* ── Round 3 (dph-16, B1 + B2): the fund hero as the prototype's ring gauge ──
   `section.hero.hero-gauge-layout`: gauge | copy | actions. The ring's
   conic-gradient is built in the template
   (the one collected segment, `summary.hero.pct`); the colours are defined here. */
.dp-v2 .home{
  --hero-gauge-done:var(--bs-primary);
  --hero-gauge-rest:color-mix(in srgb,var(--bs-primary) 28%,white);
}
.dp-v2 .home .hero.hero-gauge-layout{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;flex-wrap:unset;
  gap:18px;padding:16px 18px;border-radius:8px;
  border-color:color-mix(in srgb,var(--bs-primary) 18%,var(--dp-border));
}
.dp-v2 .home .hero-gauge{position:relative;display:grid;place-items:center;flex:none;width:132px;height:132px;border-radius:50%}
.dp-v2 .home .hero-gauge::before{content:"";position:absolute;inset:12px;border-radius:50%;background:var(--dp-card)}
.dp-v2 .home .hero-gauge-inner{position:relative;z-index:1;text-align:center}
.dp-v2 .home .hero-gauge-pct{font-size:1.65rem;font-weight:700;line-height:1;letter-spacing:-.03em;color:var(--dp-fg)}
.dp-v2 .home .hero-gauge-pct u{font-size:.85rem;text-decoration:none;opacity:.65}
.dp-v2 .home .hero-gauge-cap{margin-top:4px;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--dp-muted-fg)}
.dp-v2 .home .hero.hero-gauge-layout .hero-copy{min-width:0}
.dp-v2 .home .hero.hero-gauge-layout .hero-title{font-weight:400;text-transform:uppercase}
.dp-v2 .home .hero.hero-gauge-layout .act .btn-w{height:36px;min-width:160px;padding:0 24px;font-weight:400}
.dp-v2 .home .hero.hero-gauge-layout .hero-brief{max-width:42ch}
@media (max-width:800px){
  .dp-v2 .home .hero.hero-gauge-layout{grid-template-columns:1fr;justify-items:start}
  .dp-v2 .home .hero.hero-gauge-layout .hero-gauge{margin:0 auto}
  .dp-v2 .home .hero.hero-gauge-layout .act{flex-flow:row wrap;min-width:0}
}

/* ── Round 3 (D7): the four filters in a bordered rounded frame, as the
   prototype's `#home-filters` tabs list; the 32px teal-tint initials badge ── */
.dp-v2 .home #home-filters.fp{
  display:inline-flex;flex-wrap:wrap;align-items:center;gap:0;width:fit-content;padding:4px;
  border:1px solid var(--dp-border);border-radius:10px;background:var(--dp-card)
}
.dp-v2 .home #home-filters .inv-filter{
  display:inline-flex;align-items:center;justify-content:center;padding:4px 9px;border:0;border-radius:6px;
  background:transparent;font-size:11px;font-weight:600;line-height:1.3;color:var(--dp-fg);white-space:nowrap
}
.dp-v2 .home #home-filters .inv-filter:hover{background:var(--dp-bg)}
.dp-v2 .home #home-filters .inv-filter.on{background:var(--dp-muted);color:var(--dp-fg)}
.dp-v2 .home #home-filters .inv-filter:focus-visible{outline:2px solid var(--dp-ring);outline-offset:1px}
.dp-v2 .home .inv-row .iav{
  display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:6px;
  background:var(--dp-accent);color:var(--dp-accent-fg);font-size:11px;font-weight:500
}

/* ── Round 3 sweep: the investee / SME home (visual alignment only) ──
   The owed / earned / no-disclosure heroes keep their flat markup
   (.n / .m / .act); give the label weight and the bar the brand fill. */
.dp-v2 .home[data-scope="investee"] .hero > .n{font-size:28px}
.dp-v2 .home[data-scope="investee"] .hero > .n.sm{font-size:1.05rem;font-weight:700}
.dp-v2 .home[data-scope="investee"] .hero > .m .bar{display:flex;max-width:320px;height:6px;border-radius:var(--dp-radius-pill);overflow:hidden;background:color-mix(in srgb,var(--bs-primary) 18%,white)}
.dp-v2 .home[data-scope="investee"] .hero > .m .bar .done{border-radius:var(--dp-radius-pill);background:var(--bs-primary)}
.dp-v2 .home[data-scope="investee"] .hero > .m > .leg{font-size:12.5px;color:var(--dp-muted-fg)}
/* the year dropdown, as the prototype's small select */
.dp-v2 .home .home-year{display:flex;justify-content:flex-end;margin:0 0 8px}
.dp-v2 .home .home-year .yearctl{display:inline-flex;align-items:center;gap:8px;margin:0;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--dp-muted-fg)}
.dp-v2 .home .home-year select{height:28px;padding:0 26px 0 10px;border:1px solid var(--dp-input-border);border-radius:var(--dp-radius);background-color:var(--dp-card);font-family:var(--dp-font);font-size:12.5px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--dp-fg)}
.dp-v2 .home .home-year select:focus-visible{outline:2px solid var(--dp-ring);outline-offset:1px}
/* "View analytics" beside the Analytics heading */
.dp-v2 .home #home-view-analytics{height:28px;padding:0 10px;font-size:12px}