/* SERP Preview Checker. The result keeps Google's fonts, colours and column
   widths, so it truncates where a real result truncates. */

.sp-out{margin-top:34px}

.sp-tabs{display:flex;justify-content:center;gap:4px}
.sp-tab{padding:7px 18px;background:transparent;border:1px solid transparent;
  font-size:13px;font-weight:600;letter-spacing:-.005em;color:var(--dim)}
.sp-tab:hover{color:var(--ink-2)}
.sp-tab.is-on{background:#fff;border-color:var(--t-line-2);color:var(--ink)}

/* The result keeps its width on every screen — a narrower box would cut the
   title somewhere Google never would — so a small screen scrolls instead. */
.sp-stage{margin-top:14px;padding:28px 20px;overflow-x:auto;
  background:var(--t-soft);border:1px solid var(--t-line)}
.sp-result{width:636px;margin:0 auto;padding:18px;background:#fff;border:1px solid var(--t-line);
  font-family:Arial,'Helvetica Neue',Helvetica,sans-serif;text-align:left}
.sp-stage[data-view="mobile"] .sp-result{width:397px}
@media (max-width:760px){.sp-stage{padding:16px 12px}}

.sp-site{display:flex;align-items:center;gap:12px}
.sp-fav{flex:none;display:grid;place-items:center;width:26px;height:26px;
  background:#fff;border:1px solid #ecedef;border-radius:50%;overflow:hidden}
.sp-fav img{width:18px;height:18px;object-fit:contain}
.sp-fav.is-empty img{display:none}
.sp-fav.is-empty::after{content:'';width:13px;height:13px;border:1.5px solid #9aa0a6;border-radius:50%}
.sp-lines{min-width:0}
.sp-name{display:block;font-size:14px;line-height:20px;color:#202124;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-url{display:block;font-size:12px;line-height:18px;color:#4d5156;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.sp-title{margin-top:5px;font-size:20px;line-height:1.3;font-weight:400;color:#1a0dab;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-desc{margin-top:3px;font-size:14px;line-height:1.58;color:#4d5156;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.sp-desc.is-generated{color:#80868b;font-style:italic}

.sp-stage[data-view="mobile"] .sp-title{font-size:18px;line-height:1.35;white-space:normal;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.sp-stage[data-view="mobile"] .sp-desc{-webkit-line-clamp:3}

.sp-notes{margin-top:12px;font-size:13px;line-height:1.65;color:var(--dim);text-align:center}
.sp-notes span{display:block}

.sp-meta{margin-top:16px;font-size:13px;line-height:1.65;color:var(--dim);text-align:center}
.sp-meta b{font-weight:600;color:var(--ink-2)}