/* Diversification score page. Shares the hero, controls, chips and empty states with css/sustainable-dividends.css (loaded first). */

.dv-picks{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:14px 16px; margin:0 0 16px; }
.dv-pick select{ width:100%; text-overflow:ellipsis; }
.dv-bar{ display:flex; flex-wrap:wrap; gap:14px 22px; align-items:flex-end; margin:6px 0 10px; }
.dv-btn{ min-height:44px; padding:0 18px; border-radius:999px; border:1px solid rgba(255,255,255,0.2); background:rgba(255,255,255,0.06); color:#fff; font:inherit; font-size:14px; font-weight:700; cursor:pointer; }
.dv-btn:hover{ background:rgba(255,255,255,0.12); }
.dv-btn:focus-visible{ outline:2px solid #8B7FFF; outline-offset:2px; }

.dv-result{ position:relative; z-index:1; margin-top:22px; padding:22px; border-radius:18px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); }
.dv-score{ display:flex; flex-wrap:wrap; gap:22px; align-items:center; margin-bottom:20px; }
.dv-dial{ flex:0 0 auto; width:132px; height:132px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; border:6px solid var(--dv, #FFC257); background:rgba(255,255,255,0.03); }
.dv-dial b{ font-size:44px; font-weight:800; line-height:1; color:#fff; font-variant-numeric:tabular-nums; }
.dv-dial span{ margin-top:4px; font-size:11.5px; color:rgba(255,255,255,0.55); }
.dv-dial--concentrated{ --dv:#FF6B57; }
.dv-dial--partial{ --dv:#FFC257; }
.dv-dial--spread{ --dv:#6FE3A5; }
.dv-dial--grail{ --dv:#2FD678; }
.dv-verdict{ flex:1 1 280px; min-width:0; }
.dv-verdict h3{ margin:0 0 6px; font-size:22px; font-weight:800; color:#fff; }
.dv-verdict p{ margin:0; font-size:15px; line-height:1.55; color:rgba(255,255,255,0.78); }

.dv-stats{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; margin:0 0 18px; }
.dv-stat{ display:flex; flex-direction:column; gap:3px; padding:14px 16px; border-radius:14px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.09); }
.dv-stat span{ font-size:12px; font-weight:700; letter-spacing:.02em; color:rgba(255,255,255,0.62); }
.dv-stat b{ font-size:26px; font-weight:800; line-height:1.1; font-variant-numeric:tabular-nums; color:#fff; }
.dv-stat small{ font-size:11.5px; line-height:1.35; color:rgba(255,255,255,0.5); }
.dv-pairs{ margin:0 0 16px; font-size:14.5px; line-height:1.6; color:rgba(255,255,255,0.78); }
.dv-pairs a{ color:#B9B1FF; }

.dv-matrix{ border-collapse:separate; border-spacing:3px; margin:0 auto; font-variant-numeric:tabular-nums; }
.dv-matrix th{ padding:6px 8px; font-size:12px; font-weight:800; color:rgba(255,255,255,0.7); text-align:center; }
.dv-matrix tbody th{ text-align:right; }
.dv-matrix td{ min-width:52px; padding:9px 6px; border-radius:8px; text-align:center; font-size:13px; font-weight:700; color:#fff; }
.dv-self{ background:rgba(255,255,255,0.05); color:rgba(255,255,255,0.4) !important; }
.dv-c--good{ background:rgba(47,214,120,0.16); }
.dv-c--ok{ background:rgba(255,194,87,0.14); }
.dv-c--weak{ background:rgba(255,107,87,0.2); }

.dv-bands{ width:100%; border-collapse:collapse; font-size:14px; }
.dv-bands th, .dv-bands td{ padding:10px 12px; text-align:left; border-bottom:1px solid rgba(255,255,255,0.1); }
.dv-bands thead th{ font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:rgba(255,255,255,0.5); }

@media (max-width: 760px){
  .dv-stats{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .dv-result{ padding:16px; }
  .dv-dial{ width:112px; height:112px; }
  .dv-dial b{ font-size:36px; }
}