/* Insights: What's working card and its toast */
.insights-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.insights-video { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px 0; border-top: 1px solid var(--line); }
.insights-video:first-child { border-top: 0; padding-top: 2px; }
.insights-video-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 14px; flex: 1 1 320px; min-width: 0; }
.insights-multiple { font-family: var(--font-display); font-stretch: 75%; font-weight: 900; font-size: 1.9rem; line-height: 1; min-width: 2.6ch; color: var(--post-ink); }
.insights-video-body { min-width: 0; }
.insights-video-title { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.insights-video-title a { color: var(--ink); text-decoration: none; }
.insights-video-title a:hover { text-decoration: underline; }
.insights-video-meta { font-size: 0.8rem; }
.insights-chip[data-tone="good"] { color: var(--good); background: color-mix(in srgb, var(--good) 13%, transparent); }
.insights-chip[data-tone="muted"] { color: var(--muted); }
.insights-chip[data-tone="warn"] { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); }
.insights-again { min-height: 38px; font-size: 0.86rem; }

.insights-common { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 14px 18px; }
.insights-common .v small { font-size: 0.6em; font-weight: 650; }
.insights-note { font-size: 0.8rem; }
.insights-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.insights-tags .chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

.insights-tips { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.insights-tips li { position: relative; padding-left: 18px; }
.insights-tips li::before { content: ""; position: absolute; left: 2px; top: 0.5em; width: 7px; height: 7px; border-radius: 50%; background: var(--ring-create); }

.insights-enter { animation: insights-in 0.45s var(--ease) both; }
.insights-enter .insights-video { animation: insights-in 0.45s var(--ease) both; }
.insights-enter .insights-video:nth-child(2) { animation-delay: 0.06s; }
.insights-enter .insights-video:nth-child(3) { animation-delay: 0.12s; }
@keyframes insights-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.insights-toast { position: fixed; left: 50%; bottom: 24px; z-index: 40; transform: translate(-50%, 12px); max-width: calc(100vw - 32px); padding: 10px 18px; border-radius: 999px; background: var(--ink); color: var(--bg); font-weight: 650; font-size: 0.9rem; box-shadow: 0 16px 36px -14px rgba(0, 0, 0, 0.6); opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.3s var(--spring); }
.insights-toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 719px) {
	.insights-toast { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 420px) {
	.insights-video-head { grid-template-columns: auto minmax(0, 1fr); }
	.insights-chip { grid-column: 2; grid-row: 1; justify-self: start; margin: 0; }
	.insights-video-body { grid-column: 1 / -1; }
	.insights-again { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
	.insights-enter, .insights-enter .insights-video { animation: none; }
	.insights-toast { transition: none; }
}