/* Sustainable Dividend Screener page */

.sd-hero{
  position:relative; overflow:hidden; padding:56px 0 44px;
  background: var(--indigo-soft); border-bottom:1px solid var(--line);
}
.sd-orb{ position:absolute; border-radius:50%; filter:blur(100px); pointer-events:none; opacity:0.32; }
.sd-orb-1{ width:460px; height:460px; background:#2fd678; top:-200px; right:-140px; }
.sd-orb-2{ width:360px; height:360px; background:#FFC257; bottom:-180px; left:-120px; }
.sd-hero .wrap{ position:relative; z-index:1; }
.sd-hero h1{
  font-family:'Instrument Sans', sans-serif; font-weight:600; font-size:clamp(34px, 5vw, 54px); line-height:1.03;
  letter-spacing:-0.01em; margin:16px 0 18px;
}
.sd-hero .lede{ font-size:16.5px; line-height:1.65; color: var(--ink-soft); max-width:760px; margin:0 0 28px; }
.sd-hero .lede strong{ color: var(--ink); }
.sd-loading{ font-size:14px; color: rgba(255,255,255,0.5); margin:0; }

/* ---- distribution card ---- */
.sd-dist{
  padding:22px 24px 20px; border-radius:22px; margin-bottom:22px;
  background: rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.12); backdrop-filter: blur(6px);
}
.sd-dist-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:8px 24px; margin-bottom:16px; }
.sd-dist-head b{ display:block; font-size:16px; color:#fff; }
.sd-dist-head > div > span{ font-size:12.5px; color: rgba(255,255,255,0.6); }
.sd-dist-meta{ display:flex; gap:18px; font-size:12px; color: rgba(255,255,255,0.55); }
.sd-dist-meta b{ display:inline; font-size:12.5px; color:#fff; }
.sd-dist-bar{ display:flex; gap:3px; height:46px; }
.sd-seg{
  position:relative; min-width:34px; border:0; padding:0 10px; border-radius:6px; cursor:pointer;
  background: var(--seg); color:#10141A; font-weight:800; font-size:15px; font-family:inherit; text-align:left;
  display:flex; align-items:center; justify-content:flex-start;
  transition: filter .15s ease, transform .15s ease;
}
.sd-seg:first-child{ border-radius:10px 6px 6px 10px; }
.sd-seg:last-child{ border-radius:6px 10px 10px 6px; }
.sd-seg:hover{ filter: brightness(1.12); transform: translateY(-2px); }
.sd-seg:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.sd-seg:disabled{ opacity:.4; cursor:default; transform:none; }
.sd-seg-n{ font-variant-numeric: tabular-nums; }
.sd-dist-key{ display:flex; flex-wrap:wrap; gap:6px 24px; margin-top:12px; }
.sd-dist-key > span{ font-size:12px; color: rgba(255,255,255,0.62); line-height:1.4; white-space:nowrap; }
.sd-dist-key i{ display:inline-block; width:9px; height:9px; border-radius:3px; margin-right:6px; vertical-align:baseline; }
.sd-dist-key b{ color:#fff; }

/* ---- hero accordions ---- */
.sd-hero-notes{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:14px; align-items:start; }
.sd-methodology-details, .sd-limits-details{ padding:14px 18px; border-radius:16px; }
.sd-methodology-details{ background: rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.12); }
.sd-limits-details{ background: rgba(255,194,87,0.08); border:1px solid rgba(255,194,87,0.25); }
.sd-methodology-details summary, .sd-limits-details summary{
  cursor:pointer; font-size:14px; font-weight:700; color: var(--ink); list-style:none;
  display:flex; align-items:center; gap:10px;
}
.sd-methodology-details summary::-webkit-details-marker, .sd-limits-details summary::-webkit-details-marker{ display:none; }
.sd-methodology-details summary::before, .sd-limits-details summary::before{ content:"+"; font-size:18px; font-weight:800; color: var(--indigo-dark); flex:none; width:16px; }
.sd-methodology-details[open] summary::before, .sd-limits-details[open] summary::before{ content:"\2212"; }
.sd-limits-details summary, .sd-limits-details summary::before{ color:#E8C468; }
.sd-methodology-details summary:focus-visible, .sd-limits-details summary:focus-visible{ outline:2px solid #8B7FFF; outline-offset:4px; border-radius:6px; }
.sd-limits-body, .sd-methodology-body{ margin-top:14px; font-size:13.5px; line-height:1.65; color: var(--ink-soft); }
.sd-limits-body ul, .sd-methodology-body ul, .sd-methodology-body ol{ margin:10px 0; padding-left:20px; }
.sd-limits-body li, .sd-methodology-body li{ margin-bottom:8px; }
.sd-limits-body strong, .sd-methodology-body strong{ color: var(--ink); }
.sd-limits-body a, .sd-methodology-body a{ color: var(--indigo-dark); text-decoration:underline; }

/* ---------------- bands ---------------- */
.sd-band{
  position:relative; overflow:hidden; margin:0;
  padding:72px 0 60px; color:#fff;
  background: radial-gradient(140% 160% at 15% -10%, #17332C 0%, #16241F 45%, #0B0E0D 100%);
}
.sd-band--traps{ background: radial-gradient(140% 160% at 85% -10%, #3A1F2E 0%, #221521 45%, #0E0B12 100%); }
.sd-head{ position:relative; z-index:1; max-width:680px; margin-bottom:34px; }
.sd-head h2{ font-family:'Instrument Sans', sans-serif; font-weight:600; font-size:clamp(32px, 4.6vw, 52px); line-height:1.05; letter-spacing:-0.01em; margin:12px 0 14px; color:#fff; }
.sd-head p{ font-size:15.5px; line-height:1.65; color: rgba(255,255,255,0.68); margin:0; max-width:600px; }
.sd-head a{ color:#fff; text-decoration:underline; }

/* ---------------- controls ---------------- */
.sd-controls{
  position:relative; z-index:2; display:flex; flex-wrap:wrap; align-items:flex-end; gap:16px 26px;
  padding:18px 20px; border-radius:20px; background: rgba(255,255,255,0.045); border:1px solid rgba(255,255,255,0.1);
}
.sd-ctl{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.sd-ctl--search{ flex:1 1 200px; }
.sd-ctl label, .sd-ctl-lbl{ font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color: rgba(255,255,255,0.5); }
.sd-ctl input[type=search], .sd-ctl select{
  height:40px; padding:0 14px; border-radius:12px; border:1px solid rgba(255,255,255,0.16); background: rgba(8,12,11,0.55);
  color:#fff; font-size:14px; font-weight:600; font-family:inherit; min-width:0;
}
.sd-ctl select{ padding-right:30px; }
.sd-ctl input::placeholder{ color: rgba(255,255,255,0.4); font-weight:500; }
.sd-ctl input:focus-visible, .sd-ctl select:focus-visible{ outline:2px solid #8B7FFF; outline-offset:2px; }
.sd-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.sd-chip{
  display:inline-flex; align-items:center; gap:7px; height:40px; padding:0 14px; border-radius:999px; cursor:pointer;
  border:1px solid rgba(255,255,255,0.16); background:transparent; color: rgba(255,255,255,0.78); font-size:13.5px; font-weight:700; font-family:inherit;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.sd-chip i{ width:9px; height:9px; border-radius:3px; }
.sd-chip small{ font-size:11px; font-weight:600; opacity:.7; }
.sd-chip:hover{ border-color: rgba(255,255,255,0.4); color:#fff; }
.sd-chip.active{ background:#fff; color:#11161A; border-color:#fff; }
.sd-chip:focus-visible{ outline:2px solid #8B7FFF; outline-offset:2px; }
.sd-count{ position:relative; z-index:1; margin:16px 2px 12px; font-size:13px; color: rgba(255,255,255,0.62); }
.sd-count b{ color:#fff; }
.sd-reset{ background:none; border:0; padding:0; color:#B5ADFF; font:inherit; font-weight:700; text-decoration:underline; cursor:pointer; }
.sd-reset:hover{ color:#fff; }

.sd-legend{ position:relative; z-index:1; display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px; margin:0 2px 10px; font-size:12px; color: rgba(255,255,255,0.55); }
.sd-legend > span:first-child{ font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
.sd-legend-item{ display:inline-flex; align-items:center; gap:6px; }
.sd-legend-order{ flex-basis:100%; font-size:11.5px; color: rgba(255,255,255,0.45); }

/* ---------------- the table ---------------- */
.sd-table{ position:relative; z-index:1; border-top:1px solid rgba(255,255,255,0.1); }
.sd-head-row, .sd-row{
  display:grid; align-items:center; column-gap:18px;
  grid-template-columns: 44px minmax(190px, 1.5fr) 140px minmax(150px, 1fr) 82px 104px 78px;
}
.sd-head-row{ padding:12px 6px 10px; font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color: rgba(255,255,255,0.42); }
.sd-head-row .c-y, .sd-head-row .c-gr{ text-align:right; }
.sd-row{ padding:16px 6px; border-bottom:1px solid rgba(255,255,255,0.08); cursor:pointer; transition: background .15s ease; animation: sd-in .35s ease both; }
.sd-row:hover{ background: rgba(255,255,255,0.035); }
@keyframes sd-in{ from{ opacity:0; transform: translateY(6px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .sd-row{ animation:none; } }
.c-rank{ font-family:'Instrument Sans', sans-serif; font-size:24px; font-weight:600; color: rgba(255,255,255,0.28); font-variant-numeric: tabular-nums; }
.c-id{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.sd-tkr{ display:flex; align-items:center; gap:6px; }
.sd-open{ background:none; border:0; padding:0; color:#fff; font:inherit; font-size:16px; font-weight:800; cursor:pointer; letter-spacing:.01em; }
.sd-open:hover{ text-decoration:underline; }
.sd-open:focus-visible{ outline:2px solid #8B7FFF; outline-offset:3px; border-radius:4px; }
.sd-co{ font-size:12px; color: rgba(255,255,255,0.5); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sd-flagline{ display:flex; flex-direction:column; gap:1px; margin-top:3px; font-size:11.5px; line-height:1.4; color: rgba(255,255,255,0.72); }
.sd-flagline span::before{ content:"\2715\00a0"; font-size:11px; color:#FF8A75; }
.sd-rich{ margin-top:3px; font-size:11.5px; color:#FFC257; cursor:help; }
.sd-row--trap .sd-yield{ color:#fff; }

/* the six check dots: a glyph in every dot, so state never rests on colour alone */
.sd-dots{ display:inline-flex; gap:5px; }
.sd-dot{
  display:inline-flex; align-items:center; justify-content:center; width:19px; height:19px; border-radius:50%;
  font-style:normal; font-size:11px; font-weight:800; line-height:1; cursor:help;
}
.sd-dot--ok{ background: rgba(47,214,120,0.16); color:#6FE3A5; box-shadow: inset 0 0 0 1px rgba(47,214,120,0.35); }
.sd-dot--bad{ background: rgba(255,107,87,0.9); color:#240B07; box-shadow:none; }

/* payout bar: 0-150% of free cash flow, tick at 100% */
.sd-pay{ display:flex; flex-direction:column; gap:6px; }
.sd-pay-top{ display:flex; align-items:baseline; gap:6px; }
.sd-pay-top b{ font-size:14px; font-weight:800; font-variant-numeric: tabular-nums; }
.sd-pay small, .sd-gr small, .sd-yield small{ font-size:11px; font-weight:500; color: rgba(255,255,255,0.48); }
.sd-pay-track{ position:relative; height:8px; border-radius:0 4px 4px 0; background: rgba(255,255,255,0.08); }
.sd-pay-fill{ position:absolute; left:0; top:0; bottom:0; border-radius:0 4px 4px 0; }
.sd-pay-fill--cool{ background:#2FD678; }
.sd-pay-fill--warm{ background:#FFC257; }
.sd-pay-fill--hot{ background:#FF6B57; }
.sd-pay-tick{ position:absolute; left:66.667%; top:-3px; bottom:-3px; width:2px; background: rgba(255,255,255,0.7); border-radius:1px; }
.sd-pay--na{ font-size:13.5px; font-weight:700; color: rgba(255,255,255,0.7); display:flex; flex-direction:column; }
.sd-gr, .sd-yield{ display:flex; flex-direction:column; align-items:flex-end; font-size:14px; font-weight:700; font-variant-numeric: tabular-nums; line-height:1.25; }
.sd-yield{ font-size:20px; font-weight:800; color:#FFC257; }
.sd-yield small{ color: rgba(255,255,255,0.48); font-size:11px; }
.sd-drip{
  justify-self:end; height:34px; padding:0 12px; border-radius:999px; border:1px solid rgba(255,255,255,0.2); background:transparent;
  color: rgba(255,255,255,0.78); font-size:12px; font-weight:800; font-family:inherit; cursor:pointer; white-space:nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.sd-drip:hover{ background:#fff; color:#11161A; border-color:#fff; }
.sd-drip:focus-visible{ outline:2px solid #8B7FFF; outline-offset:2px; }
.sd-empty{ padding:40px 8px; text-align:center; color: rgba(255,255,255,0.6); font-size:15px; }

.sd-gray{
  position:relative; z-index:1; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 24px;
  margin-top:26px; padding:18px 22px; border-radius:18px; background: rgba(255,194,87,0.08); border:1px solid rgba(255,194,87,0.28);
}
.sd-gray p{ margin:0; font-size:14px; line-height:1.55; color: rgba(255,255,255,0.78); max-width:560px; }
.sd-gray b{ color:#fff; }
.sd-gray-btn{ height:40px; padding:0 18px; border-radius:999px; border:1px solid rgba(255,194,87,0.5); background:transparent; color:#FFD58A; font-size:13.5px; font-weight:800; font-family:inherit; cursor:pointer; }
.sd-gray-btn:hover{ background:#FFC257; color:#241A05; }
.sd-gray-btn:focus-visible{ outline:2px solid #8B7FFF; outline-offset:2px; }

.sd-disclaimer{ padding:40px 0 60px; }
.sd-disclaimer p{ font-size:12px; color: var(--ink-soft); line-height:1.7; max-width:900px; }
.sd-disclaimer a{ color: var(--ink); text-decoration:underline; }

/* ---------------- responsive ---------------- */
@media (max-width: 1040px){
  .sd-head-row, .sd-row{ grid-template-columns: 38px minmax(150px, 1.4fr) 128px minmax(120px, 1fr) 66px 88px 64px; column-gap:12px; }
  .sd-drip{ padding:0 10px; }
}
@media (max-width: 860px){
  .sd-hero-notes{ grid-template-columns: minmax(0,1fr); }
  .sd-head-row{ display:none; }
  .sd-row{
    grid-template-columns: 34px minmax(0,1fr) auto; column-gap:12px; row-gap:12px; padding:18px 4px;
    grid-template-areas: "rank id yield" "dots dots act" "pay pay gr";
  }
  .sd-row .c-rank{ grid-area:rank; font-size:22px; align-self:start; }
  .sd-row .c-id{ grid-area:id; }
  .sd-row .c-y{ grid-area:yield; align-self:start; }
  .sd-row .c-dots{ grid-area:dots; }
  .sd-row .c-pay{ grid-area:pay; }
  .sd-row .c-gr{ grid-area:gr; }
  .sd-row .c-act{ grid-area:act; display:block; }
  .sd-row .sd-gr{ align-items:flex-end; }
  .sd-dist{ padding:18px 16px 16px; }
  .sd-dist-bar{ height:40px; }
  .sd-dist-key{ gap:6px 18px; }
  .sd-controls{ padding:16px; gap:14px 18px; }
  .sd-ctl--search{ flex-basis:100%; }
}
@media (max-width: 520px){
  .sd-band{ padding:52px 0 44px; }
  .sd-chip{ padding:0 12px; }
  .sd-ctl{ flex:1 1 100%; }
  .sd-ctl:nth-last-child(-n+2){ flex:1 1 calc(50% - 9px); }      /* sector + sort share a row */
  .sd-ctl select{ width:100%; }
}

/* Phone pass (2026-10-17): the ticker button in every row (also used by Earnings Quality, Shareholder Yield, Capital-Light, Compounders and the Doctor) was 24px tall. */
@media (max-width: 720px){
  .sd-open{ padding:10px 6px; margin:-10px -6px; }
  .sd-drip{ height:44px; }
}