/* Search result preview: neutral colours that read as a search page in light and dark themes. */
.sp { max-width: 600px; padding: 16px; border-radius: var(--r-md); background: #fff; color: #4d5156; font-family: Arial, Helvetica, sans-serif; overflow: hidden; }
.sp[data-device="mobile"] { max-width: 380px; box-shadow: 0 1px 6px rgb(32 33 36 / 0.28); }
.sp__site { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.sp__icon { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: #f1f3f4; color: #5f6368; font: 700 12px Arial, sans-serif; }
.sp__name { display: block; color: #202124; font-size: 14px; line-height: 20px; }
.sp__url { display: block; color: #4d5156; font-size: 12px; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 520px; }
.sp__title { color: #1a0dab; font-size: 20px; line-height: 26px; margin-bottom: 4px; white-space: nowrap; }
.sp[data-device="mobile"] .sp__title { white-space: normal; font-size: 18px; line-height: 24px; }
.sp__desc { font-size: 14px; line-height: 22px; overflow-wrap: anywhere; }
.sp__date { color: #70757a; }
.sp b { color: #202124; font-weight: 700; }
.sp-meter { height: 4px; border-radius: 2px; background: var(--border); overflow: hidden; }
.sp-meter span { display: block; height: 100%; width: 0; background: var(--success, #16a34a); transition: width 0.15s; }
.sp-meter span.is-warn { background: var(--warning, #d97706); }
.sp-meter span.is-bad { background: var(--danger, #dc2626); }