/* Compare Fundamentals page.
   Shares the hero and bands with the Sustainable Dividend page (css/sustainable-dividends.css) and the input card, buttons and
   headings with the Portfolio Doctor (css/portfolio-doctor.css, loaded first); this file adds the picker chips and the year-by-year tables. */

.cf-picker{ display:grid; grid-template-columns: minmax(160px, 1fr) auto auto; gap:12px; align-items:end; }
.cf-field label, .cf-years label{ display:block; margin-bottom:8px; font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color: rgba(255,255,255,0.55); }
.cf-field input, .cf-years select{
  width:100%; height:42px; padding:0 14px; border-radius:12px; border:1px solid rgba(255,255,255,0.16); background: rgba(8,10,20,0.6);
  color:#fff; font:600 16px/1 inherit; font-family:inherit;
}
.cf-years select{ padding-right:30px; font-size:14px; }
.cf-field input::placeholder{ color: rgba(255,255,255,0.35); }
.cf-field input:focus-visible, .cf-years select:focus-visible{ outline:2px solid #8B7FFF; outline-offset:2px; }
.cf-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; min-height:36px; }
.cf-chip{ display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 6px 0 14px; border-radius:999px; background: rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.18); color:#fff; }
.cf-chip b{ font-size:14px; font-weight:800; }
.cf-chip small{ max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; color: rgba(255,255,255,0.55); }
.cf-chip button{ width:28px; height:28px; border-radius:50%; border:0; background:transparent; color: rgba(255,255,255,0.6); font-size:18px; line-height:1; cursor:pointer; }
.cf-chip button:hover{ background: rgba(255,255,255,0.14); color:#fff; }
.cf-chip button:focus-visible, .cf-tk:focus-visible{ outline:2px solid #8B7FFF; outline-offset:2px; }
.cf-count{ margin-left:10px; font-size:12px; font-weight:700; color: rgba(255,255,255,0.5); }
.cf-msg{ min-height:1.4em; margin:10px 2px 0; font-size:13px; line-height:1.55; color: rgba(255,255,255,0.78); }
.cf-empty{ position:relative; z-index:1; margin:0; padding:22px 4px; font-size:15px; line-height:1.6; color: rgba(255,255,255,0.7); }

.cf-group{ position:relative; z-index:1; margin-bottom:34px; }
.cf-scroll{ margin:0 0 18px; }
.cf-table{ width:100%; border-collapse:collapse; font-size:14px; font-variant-numeric: tabular-nums; }
.cf-table caption{ caption-side:top; text-align:left; padding:0 4px 8px; font-size:12px; line-height:1.5; color: rgba(255,255,255,0.5); }
.cf-table th, .cf-table td{ padding:10px 12px; border-bottom:1px solid rgba(255,255,255,0.08); white-space:nowrap; }
.cf-table thead th{ font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color: rgba(255,255,255,0.5); text-align:left; border-bottom:1px solid rgba(255,255,255,0.18); }
.cf-table thead th:first-child{ color:#fff; font-size:12px; }
.cf-table tbody th{ text-align:left; font-weight:700; color:#fff; min-width:150px; }
.cf-table tbody th small{ display:block; margin-top:2px; max-width:170px; overflow:hidden; text-overflow:ellipsis; font-size:11px; font-weight:500; color: rgba(255,255,255,0.46); }
.cf-num{ text-align:right !important; }
.cf-table td{ color: rgba(255,255,255,0.86); }
.cf-sum{ font-weight:700; color:#fff !important; border-left:1px solid rgba(255,255,255,0.12); }
.cf-lead{ color:#fff !important; font-weight:800; box-shadow: inset 0 -2px 0 #8B7FFF; }
.cf-tk{ padding:0; border:0; background:none; color:#fff; font:800 15px/1.2 inherit; font-family:inherit; cursor:pointer; }
.cf-tk:hover{ text-decoration:underline; }
.cf-note{ position:relative; z-index:1; margin:6px 2px 0; font-size:13px; line-height:1.6; color: rgba(255,255,255,0.65); }

@media (max-width: 760px){
  .cf-picker{ grid-template-columns: minmax(0,1fr) auto; }
  .cf-picker .cf-years{ grid-column: 1 / -1; }
  .cf-table th, .cf-table td{ padding:9px 9px; }
}