/* SERP Snippet Preview — module-specific styles.
   The preview block deliberately mimics Google's result typography
   (Arial, #1a0dab title, #4d5156 snippet) rather than the fsgt tokens,
   because it is a facsimile of a third-party UI. Everything else comes
   from the shared fsgt primitives. */

.fsgt-serp .fsgt-serp-desc-input { min-height: 84px; }

/* Counters under the inputs, colour-coded against the pixel budgets. */
.fsgt-serp .fsgt-serp-counter {
  margin: 6px 0 0;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.fsgt-serp .fsgt-serp-counter--ok { color: var(--fsgt-success); }
.fsgt-serp .fsgt-serp-counter--near { color: var(--fsgt-warn-text); }
.fsgt-serp .fsgt-serp-counter--over { color: var(--fsgt-error); }

/* Toggles row. */
.fsgt-serp .fsgt-serp-toggles {
  display: flex;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
  margin: 4px 0 12px;
}
.fsgt-serp .fsgt-serp-devices { border: 0; padding: 0; }
.fsgt-serp .fsgt-serp-devices legend { padding: 0; margin-bottom: 8px; }
.fsgt-serp .fsgt-serp-datetoggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--fsgt-text-2);
  cursor: pointer;
  padding-bottom: 10px;
}
.fsgt-serp .fsgt-serp-datetoggle input { accent-color: var(--fsgt-primary); width: 16px; height: 16px; }

/* The Google-style stage. */
.fsgt-serp .fsgt-serp-stage {
  background: var(--fsgt-surface);
  border: 1px solid var(--fsgt-border-subtle);
  border-radius: var(--fsgt-radius);
  box-shadow: var(--fsgt-shadow-soft);
  padding: 24px;
  overflow-x: auto;
}
.fsgt-serp .fsgt-serp-result {
  max-width: 600px;
  font-family: Arial, sans-serif;
}
.fsgt-serp .fsgt-serp-result--mobile { max-width: 400px; }

.fsgt-serp .fsgt-serp-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.fsgt-serp .fsgt-serp-fav {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #f1f3f4;
  border: 1px solid #ecedef;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  color: #5f6368;
  flex-shrink: 0;
}
.fsgt-serp .fsgt-serp-source { display: grid; line-height: 1.3; min-width: 0; }
.fsgt-serp .fsgt-serp-site { font-size: 14px; color: #202124; }
.fsgt-serp .fsgt-serp-url { font-size: 12px; color: #4d5156; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.fsgt-serp .fsgt-serp-title {
  display: block;
  font-size: 20px;
  line-height: 1.3;
  color: #1a0dab;
  margin-bottom: 4px;
  cursor: pointer;
}
.fsgt-serp .fsgt-serp-title:hover { text-decoration: underline; }
.fsgt-serp .fsgt-serp-snippet { display: block; font-size: 14px; line-height: 1.58; color: #4d5156; }
.fsgt-serp .fsgt-serp-result--mobile .fsgt-serp-snippet { font-size: 15px; }
.fsgt-serp .fsgt-serp-date { color: #70757a; }

@media (max-width: 640px) {
  .fsgt-serp .fsgt-serp-stage { padding: 16px; }
}