/* dividend-yield-trap: falling price pumps the yield; a cut shows the real income. */
.dividend-yield-trap-root.dividend-yield-trap-root > * + * { margin-top: var(--s4); }
.dividend-yield-trap-root .dividend-yield-trap-readouts { display: grid; gap: var(--s4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dividend-yield-trap-root .dividend-yield-trap-readouts .w-readout { align-content: start; }
.dividend-yield-trap-root .dividend-yield-trap-readouts .dividend-yield-trap-yield { grid-column: 1 / -1; }
.dividend-yield-trap-root .dividend-yield-trap-readouts .is-hot { animation: dividend-yield-trap-pop .45s var(--ease); }
@media (min-width: 48rem) {
  .dividend-yield-trap-root .dividend-yield-trap-readouts { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); }
  .dividend-yield-trap-root .dividend-yield-trap-readouts .dividend-yield-trap-yield { grid-column: auto; }
}
.dividend-yield-trap-root .dividend-yield-trap-meter { position: relative; margin: var(--s5) 0 var(--s6); }
.dividend-yield-trap-root .dividend-yield-trap-meterlabel { display: block; margin-bottom: var(--s3); font: 700 var(--fs-small)/1.3 var(--font-ui); color: var(--ink-2); }
.dividend-yield-trap-root .dividend-yield-trap-track { position: relative; display: block; height: 8px; background: var(--mist-2); overflow: hidden; }
.dividend-yield-trap-root .dividend-yield-trap-fill, .dividend-yield-trap-root .dividend-yield-trap-ghost { position: absolute; left: 0; top: 0; bottom: 0; transition: width .35s var(--ease); }
.dividend-yield-trap-root .dividend-yield-trap-fill { background: var(--ink); }
.dividend-yield-trap-root .dividend-yield-trap-fill.is-hot { background: var(--brand); }
.dividend-yield-trap-root .dividend-yield-trap-fill.is-real { background: var(--down); }
.dividend-yield-trap-root .dividend-yield-trap-ghost { background: repeating-linear-gradient(135deg, var(--down) 0 2px, var(--down-wash) 2px 6px); }
.dividend-yield-trap-root .dividend-yield-trap-mark { position: absolute; bottom: -4px; height: 16px; width: 2px; margin-left: -1px; background: var(--ink); }
.dividend-yield-trap-root .dividend-yield-trap-mark > span { position: absolute; top: 20px; left: 0; transform: translateX(-50%); white-space: nowrap; font: 400 var(--fs-small)/1.2 var(--font-ui); font-variant-numeric: tabular-nums; color: var(--ink-2); }
.dividend-yield-trap-root .dividend-yield-trap-mark.is-double > span { color: var(--ink); font-weight: 700; }
.dividend-yield-trap-root .dividend-yield-trap-formula { margin: 0; font: 700 var(--fs-ui)/1.3 var(--font-ui); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.dividend-yield-trap-root .dividend-yield-trap-actions { display: flex; flex-wrap: wrap; gap: var(--s3); }
.dividend-yield-trap-root .dividend-yield-trap-toggle[aria-pressed="true"] { background: var(--down); border-color: var(--down); color: var(--on-ink); }
.dividend-yield-trap-root .dividend-yield-trap-toggle[aria-pressed="true"]::before { content: "✓"; }
.dividend-yield-trap-root .dividend-yield-trap-story { margin-top: var(--s4); padding: 2px 0 2px var(--s3); border-left: 2px solid var(--ink); font: 400 var(--fs-ui)/1.5 var(--font-ui); }
@keyframes dividend-yield-trap-pop { 0% { transform: scale(1); } 40% { transform: scale(1.04); } 100% { transform: scale(1); } }
/* keep shared notes small even inside page rules like ".prose p" */
.dividend-yield-trap-root.dividend-yield-trap-root .w-note { margin: var(--s3) 0 0; font-size: var(--fs-small); line-height: 1.5; }