/* Shareholder Yield Leaders page.
   Shares the hero, bands, controls, chips and accordions with the Sustainable Dividend page
   (css/sustainable-dividends.css, loaded first) and the scorecard-row idea with Earnings Quality;
   this file adds the headline tiles, the "Most bought back" toggle, the yield rows with their
   diverging net-yield bar, the share-count and buyback-by-year sparklines, and the explainer cards.

   Colour: one diverging pair, blue (good for owners: cash comes back, the share count falls) against
   red (bad for owners: stock comp outruns payouts, the share count grows), neutral grey between.
   Every state also carries an arrow, and numbers stay in plain ink: colour is never the only signal. */

.sy-notes{ grid-template-columns: minmax(0,1fr); }
.sy-th-table{ width:100%; border-collapse:collapse; font-size:12.5px; line-height:1.45; margin:4px 0 6px; }
.sy-th-table th, .sy-th-table td{ padding:8px 10px; text-align:left; border-bottom:1px solid rgba(255,255,255,0.1); vertical-align:top; }
.sy-th-table thead th{ font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color: rgba(255,255,255,0.5); }
.sy-th-table tbody th{ font-weight:700; color:#fff; white-space:nowrap; }
.sy-th-table td{ color: var(--ink-soft); }

/* ---------------- headline tiles ---------------- */
.sy-stats{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:12px; margin: 0 0 26px; }
.sy-stat{ display:flex; flex-direction:column; gap:5px; padding:16px 18px; border-radius:var(--radius-sm); background: rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); }
.sy-stat b{ font-family:'Instrument Sans', sans-serif; font-size:clamp(24px, 3vw, 32px); font-weight:600; line-height:1.05; color:#fff; font-variant-numeric: tabular-nums; }
.sy-stat span{ font-size:13px; line-height:1.35; color:#fff; }
.sy-stat small{ font-size:11.5px; line-height:1.4; color: rgba(255,255,255,0.5); }

/* ---------------- the 15-year button ---------------- */
.sy-lens{ position:relative; z-index:1; display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; margin: 0 0 20px; padding:16px 18px; border-radius:var(--radius-sm); background: rgba(139,127,255,0.10); border:1px solid rgba(139,127,255,0.3); }
.sy-long-btn{
  display:inline-flex; align-items:center; gap:9px; height:44px; padding:0 20px 0 14px; border-radius:var(--radius-pill); cursor:pointer;
  font:inherit; font-size:15px; font-weight:800; color:#fff; background: rgba(255,255,255,0.08); border:1.5px solid rgba(255,255,255,0.35); transition: background .15s ease, border-color .15s ease;
}
.sy-long-btn i{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; font-style:normal; font-size:11px; background: rgba(255,255,255,0.14); }
.sy-long-btn:hover{ border-color:#fff; }
.sy-long-btn:focus-visible{ outline:2px solid #8B7FFF; outline-offset:3px; }
.sy-long-btn.active{ background:#fff; color:#11161A; border-color:#fff; }
.sy-long-btn.active i{ background:#11161A; color:#fff; }
.sy-lens-note{ flex:1 1 280px; margin:0; font-size:13px; line-height:1.55; color: rgba(255,255,255,0.7); }
.sy-lens-note b{ color:#fff; }
.sy-full{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; color: rgba(255,255,255,0.75); cursor:pointer; }
.sy-full input{ width:16px; height:16px; accent-color:#8B7FFF; }

.sy-n{ font-size:11px; font-weight:600; opacity:.7; font-variant-numeric: tabular-nums; }

/* ---------------- yield rows ---------------- */
.sy-table{ position:relative; z-index:1; border-top:1px solid rgba(255,255,255,0.1); }
.sy-head-row, .sy-row{
  display:grid; align-items:center; column-gap:14px;
  grid-template-columns: 40px minmax(190px, 1.5fr) 150px repeat(4, minmax(86px, 1fr)) 96px;
}
.sy-table--long .sy-head-row, .sy-table--long .sy-row{ grid-template-columns: 40px minmax(190px, 1.4fr) 140px repeat(4, minmax(86px, 1fr)) 210px; }
.sy-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); }
.sy-head-row .c-cells, .sy-row .c-cells{ display:contents; }
.sy-row{ padding:15px 6px; border-bottom:1px solid rgba(255,255,255,0.08); cursor:pointer; transition: background .15s ease; animation: sd-in .35s ease both; }
.sy-row:hover{ background: rgba(255,255,255,0.035); }
@media (prefers-reduced-motion: reduce){ .sy-row{ animation:none; } }

.sy-c, .sy-net{ display:flex; flex-direction:column; gap:3px; min-width:0; cursor:help; }
.sy-c-lbl{ display:none; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color: rgba(255,255,255,0.45); }
.sy-c b, .sy-net b{ display:flex; align-items:center; gap:6px; font-size:15px; font-weight:800; font-variant-numeric: tabular-nums; color:#fff; white-space:nowrap; }
.sy-net b{ font-size:19px; }
.sy-c small, .sy-net small{ font-size:11px; line-height:1.3; color: rgba(255,255,255,0.46); }
.sy-c b small{ font-weight:600; }
.sy-c--na b, .sy-net-na{ color: rgba(255,255,255,0.5); font-weight:700; }
.sy-yrs{ font-size:11px; color: rgba(255,255,255,0.42); white-space:nowrap; }
.sy-why{ display:block; margin-top:4px; font-size:11.5px; line-height:1.4; color: rgba(255,255,255,0.62); }
.sy-row .c-tail{ text-align:right; }
.sy-head-row .c-tail, .sy-head-row .c-spark{ text-align:right; }

/* an arrow says which way the number points; blue = good for the owner, red = bad. The number beside it stays in ink. */
.sy-arrow{ display:inline-flex; align-items:center; justify-content:center; flex:none; width:16px; height:16px; font-style:normal; font-size:11px; line-height:1; }
.sy-arrow--up-good, .sy-arrow--down{ color:#6CA8F2; }
.sy-arrow--down-bad, .sy-arrow--up{ color:#F28A86; }
.sy-arrow--flat{ color: rgba(255,255,255,0.5); }

/* the net yield bar: zero in the middle, blue to the right for a positive yield, red to the left for a negative one */
.sy-net-track{ position:relative; display:block; height:8px; margin-top:4px; border-radius:4px; background: rgba(255,255,255,0.08); }
.sy-net-zero{ position:absolute; left:50%; top:-2px; bottom:-2px; width:1.5px; background: rgba(255,255,255,0.4); }
.sy-net-fill{ position:absolute; top:0; bottom:0; }
.sy-net-fill--pos{ background:#3987E5; border-radius:0 4px 4px 0; }
.sy-net-fill--neg{ background:#E66767; border-radius:4px 0 0 4px; }

/* sparklines */
.sy-row .c-spark{ display:flex; flex-direction:column; align-items:flex-end; gap:3px; }
.sy-spark{ display:block; overflow:visible; }
.sy-spark--none{ font-size:11px; color: rgba(255,255,255,0.45); }
.sy-spark-base{ stroke: rgba(255,255,255,0.28); stroke-width:1; stroke-dasharray:2,3; }
.sy-spark-line{ fill:none; stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.sy-spark-line--down{ stroke:#6CA8F2; }
.sy-spark-line--up{ stroke:#F28A86; }
.sy-spark-dot{ fill:#fff; }
.sy-bar{ fill: rgba(255,255,255,0.5); }

/* ---------------- the buyback treadmill ---------------- */
.sy-tm{ position:relative; z-index:1; border-top:1px solid rgba(255,255,255,0.1); }
.sy-tm-row{
  display:grid; align-items:center; column-gap:18px; padding:14px 6px; border-bottom:1px solid rgba(255,255,255,0.08); cursor:pointer; transition: background .15s ease;
  grid-template-columns: 40px minmax(170px, 1.2fr) minmax(130px, 1fr) minmax(130px, 1fr) 110px;
}
.sy-tm-row:hover{ background: rgba(255,255,255,0.035); }
.sy-tm-nums{ display:flex; flex-direction:column; gap:3px; }
.sy-tm-nums b{ display:flex; align-items:center; gap:6px; font-size:19px; font-weight:800; color:#fff; font-variant-numeric: tabular-nums; }
.sy-tm-nums small{ font-size:11px; line-height:1.35; color: rgba(255,255,255,0.5); }
.sy-tm-spark{ display:flex; justify-content:flex-end; }

/* ---------------- how to read it ---------------- */
.sy-how{ position:relative; z-index:1; display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:14px; margin-top:6px; }
.sy-card{ padding:20px 22px; border-radius:var(--radius-sm); background: rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); }
.sy-card h3{ font-family:'Instrument Sans', sans-serif; font-weight:600; font-size:20px; line-height:1.2; margin:0 0 8px; color:#fff; }
.sy-card p{ margin:0 0 8px; font-size:13.5px; line-height:1.6; color: rgba(255,255,255,0.72); }
.sy-card p:last-child{ margin-bottom:0; }
.sy-card b{ color:#fff; }
.sy-worked{ position:relative; z-index:1; margin:16px 0 0; padding:16px 20px; border-radius:var(--radius-sm); background: rgba(57,135,229,0.10); border:1px solid rgba(57,135,229,0.35); font-size:14px; line-height:1.65; color: rgba(255,255,255,0.8); }
.sy-worked b{ color:#fff; }

/* ---------------- responsive ---------------- */
@media (max-width: 1080px){
  .sy-head-row, .sy-row{ grid-template-columns: 34px minmax(150px, 1.3fr) 130px repeat(4, minmax(74px, 1fr)) 80px; column-gap:10px; }
  .sy-table--long .sy-head-row, .sy-table--long .sy-row{ grid-template-columns: 34px minmax(150px, 1.3fr) 120px repeat(4, minmax(74px, 1fr)) 200px; }
}
@media (max-width: 960px){
  .sy-stats{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .sy-how{ grid-template-columns: minmax(0,1fr); }
  .sy-head-row{ display:none; }
  .sy-row, .sy-table--long .sy-row{
    grid-template-columns: 34px minmax(0,1fr) auto; column-gap:12px; row-gap:14px; padding:18px 4px;
    grid-template-areas: "rank id net" "cells cells cells" "tail tail tail";
  }
  .sy-row .c-rank{ grid-area:rank; font-size:22px; align-self:start; }
  .sy-row .c-id{ grid-area:id; }
  .sy-row .sy-net{ grid-area:net; align-self:start; min-width:112px; }
  .sy-row .c-cells{ grid-area:cells; display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:14px 12px; }
  .sy-row .c-tail, .sy-row .c-spark{ grid-area:tail; text-align:left; }
  .sy-row .c-spark{ flex-direction:row; align-items:center; gap:18px; flex-wrap:wrap; }
  .sy-c-lbl{ display:block; }
  .sy-tm-row{ grid-template-columns: 34px minmax(0,1fr) auto; row-gap:10px; grid-template-areas: "rank id spark" "n1 n2 n2"; }
  .sy-tm-row .c-rank{ grid-area:rank; font-size:22px; }
  .sy-tm-row .c-id{ grid-area:id; }
  .sy-tm-row .sy-tm-spark{ grid-area:spark; }
  .sy-tm-row .sy-tm-nums--bb{ grid-area:n1; }
  .sy-tm-row .sy-tm-nums--sh{ grid-area:n2; }
}
@media (max-width: 480px){
  .sy-stats{ grid-template-columns: minmax(0,1fr); }
  .sy-th-table tbody th{ white-space:normal; }
  .sy-lens{ padding:14px; }
}