/* SERP preview (STATUS-EU), shared by the playground (/playground, tokens --uj-*) and the dashboard
   Request builder (tokens --color-* / --font-*). Markup comes from js/shared/serp-preview.js. */
.ujpg-pv-serp {
  --ujsp-line: var(--uj-line, var(--color-border, #E5E7EB));
  --ujsp-accent: var(--uj-accent, var(--color-primary, #F97316));
  --ujsp-sans: var(--uj-sans, var(--font-body, system-ui, sans-serif));
  --ujsp-mono: var(--uj-mono, var(--font-mono, ui-monospace, monospace));
  display: flex; flex-direction: column; gap: 14px;
}
.ujpg-pv-serp .ujpg-pv-serp__hit { padding: 14px 16px; border: 1px solid var(--ujsp-line); border-radius: 10px; background: #FFFFFF; transition: border-color .12s; }
.ujpg-pv-serp .ujpg-pv-serp__hit:hover { border-color: var(--ujsp-accent); }
.ujpg-pv-serp .ujpg-pv-serp__url { font-family: var(--ujsp-mono); font-size: 11.5px; color: #16A34A; overflow-wrap: anywhere; }
.ujpg-pv-serp .ujpg-pv-serp__t { font-family: var(--ujsp-sans); font-size: 15px; font-weight: 600; color: #1D4ED8; margin: 4px 0; text-decoration: none; display: block; }
.ujpg-pv-serp a.ujpg-pv-serp__t:hover { text-decoration: underline; }
.ujpg-pv-serp span.ujpg-pv-serp__t { color: #1F2937; }
.ujpg-pv-serp .ujpg-pv-serp__sn { font-family: var(--ujsp-sans); font-size: 13px; color: #4B5563; line-height: 1.6; }
.ujpg-pv-serp .ujpg-pv-serp__meta { font-family: var(--ujsp-sans); font-size: 12px; color: #6B7280; margin-top: 4px; }
.ujpg-pv-serp .ujpg-pv-serp__row { display: flex; gap: 12px; align-items: flex-start; }
.ujpg-pv-serp .ujpg-pv-serp__row > div { min-width: 0; }
.ujpg-pv-serp .ujpg-pv-serp__thumb { width: 88px; height: 60px; object-fit: cover; border-radius: 6px; flex: 0 0 88px; background: #F3F4F6; }
.ujpg-pv-serp .ujpg-pv-img-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.ujpg-pv-serp .ujpg-pv-img { display: block; border: 1px solid var(--ujsp-line); border-radius: 10px; overflow: hidden; background: #FFFFFF; text-decoration: none; }
.ujpg-pv-serp .ujpg-pv-img:hover { border-color: var(--ujsp-accent); }
.ujpg-pv-serp .ujpg-pv-img img { width: 100%; height: 120px; object-fit: cover; display: block; background: #F3F4F6; }
.ujpg-pv-serp .ujpg-pv-img span { display: block; padding: 8px 10px; font-family: var(--ujsp-sans); font-size: 12px; color: #374151; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ujpg-pv-serp .ujpg-pv-ai { font-family: var(--ujsp-sans); font-size: 14px; color: #1F2937; line-height: 1.65; padding: 16px 18px; border: 1px solid var(--ujsp-line); border-radius: 10px; background: #FFFFFF; }
.ujpg-pv-serp .ujpg-pv-ai h4 { font-size: 15px; font-weight: 700; margin: 14px 0 6px; }
.ujpg-pv-serp .ujpg-pv-ai p { margin: 0 0 10px; }
.ujpg-pv-serp .ujpg-pv-ai ul, .ujpg-pv-serp .ujpg-pv-ai ol { margin: 0 0 10px; padding-left: 20px; }
.ujpg-pv-serp .ujpg-pv-ai ul { list-style: disc; }
.ujpg-pv-serp .ujpg-pv-ai ol { list-style: decimal; }
/* the dashboard styles bare p / li (gray text, no bullets): inherit from the card like on the playground */
.ujpg-pv-serp .ujpg-pv-ai p, .ujpg-pv-serp .ujpg-pv-ai li { color: inherit; font-size: inherit; line-height: inherit; }
.ujpg-pv-serp .ujpg-pv-ai li { display: list-item; list-style: inherit; }

/* Request builder extras: section headings, People also ask, Show all. */
.ujpg-pv-serp .ujsp-h { font-family: var(--ujsp-sans); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #78716C; margin: 6px 0 -6px; }
.ujpg-pv-serp .ujsp-paa { margin: 0; padding: 0; list-style: none; border: 1px solid var(--ujsp-line); border-radius: 10px; background: #FFFFFF; }
.ujpg-pv-serp .ujsp-paa li { padding: 10px 16px; font-family: var(--ujsp-sans); font-size: 14px; color: #1F2937; }
.ujpg-pv-serp .ujsp-paa li + li { border-top: 1px solid var(--ujsp-line); }
.ujpg-pv-serp .ujsp-more:not([hidden]) { display: contents; }
.ujpg-pv-serp .ujsp-more-btn { align-self: center; grid-column: 1 / -1; justify-self: center; font: 600 13px var(--ujsp-sans); padding: 7px 16px; border: 1px solid var(--ujsp-line); border-radius: 8px; background: #FFFFFF; color: #44403C; cursor: pointer; }
.ujpg-pv-serp .ujsp-more-btn:hover { border-color: var(--ujsp-accent); color: var(--ujsp-accent); }

/* Google AI Overviews / Google AI Mode panel (STATUS-EV): answer on the left, source cards on the right (stacked
   when narrow), collapsed to about six lines with Show more. Markup: aiPanel() in js/shared/serp-preview.js. */
.ujpg-pv-serp .ujsp-ai { container-type: inline-size; position: relative; border: 1px solid var(--ujsp-line); border-radius: 12px; background: #FFFFFF; padding: 14px 16px 10px; font-family: var(--ujsp-sans); }
.ujpg-pv-serp .ujsp-ai__head { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: #1F2937; margin-bottom: 10px; }
.ujpg-pv-serp .ujsp-ai-spark { width: 18px; height: 18px; flex: 0 0 18px; fill: #4F7BF7; }
.ujpg-pv-serp .ujsp-ai--mode .ujsp-ai-spark { fill: #8B5CF6; }
.ujpg-pv-serp .ujsp-ai__count { margin-left: auto; font-size: 11.5px; font-weight: 500; color: #6B7280; }
.ujpg-pv-serp .ujsp-ai__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 34%); gap: 16px; align-items: start; }
.ujpg-pv-serp .ujsp-ai__grid.is-solo { grid-template-columns: minmax(0, 1fr); }
.ujpg-pv-serp .ujsp-ai .ujsp-ai__body { border: 0; padding: 0; border-radius: 0; background: transparent; min-width: 0; overflow-wrap: anywhere; }
.ujpg-pv-serp .ujsp-ai .ujsp-ai__body h4:first-child { margin-top: 0; }
.ujpg-pv-serp .ujsp-ai .ujsp-ai__body li { margin: 0 0 6px; }
.ujpg-pv-serp .ujsp-ai .ujsp-ai__body strong { font-weight: 700; color: #111827; }
.ujpg-pv-serp .ujsp-cite { display: inline-flex; align-items: center; gap: 3px; vertical-align: 1px; max-width: 100%; padding: 0 7px; border-radius: 999px; background: #EEF2F7; color: #475569; font-size: 11px; font-weight: 500; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.ujpg-pv-serp .ujsp-cite b { font-weight: 600; }
.ujpg-pv-serp a.ujsp-cite:hover { background: #E0E7FF; color: #1D4ED8; }
.ujpg-pv-serp .ujsp-ai-video { color: #374151; font-size: 13px; }
.ujpg-pv-serp .ujsp-ico { width: 14px; height: 14px; flex: 0 0 14px; vertical-align: -2px; }
.ujpg-pv-serp .ujsp-ico--play { width: 18px; height: 18px; vertical-align: -4px; }
.ujpg-pv-serp .ujsp-ai-prod { color: #4B5563; font-size: 12.5px; }
.ujpg-pv-serp .ujsp-ai-imgs { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 10px; }
.ujpg-pv-serp .ujsp-ai-img img { display: block; width: 112px; height: 80px; object-fit: cover; border-radius: 8px; background: #F3F4F6; }
.ujpg-pv-serp .ujsp-ai-tbl { overflow-x: auto; margin: 0 0 10px; }
.ujpg-pv-serp .ujsp-ai-tbl table { border-collapse: collapse; font-size: 13px; }
.ujpg-pv-serp .ujsp-ai-tbl th, .ujpg-pv-serp .ujsp-ai-tbl td { border: 1px solid var(--ujsp-line); padding: 6px 10px; text-align: left; vertical-align: top; }
.ujpg-pv-serp .ujsp-ai-tbl th { background: #F9FAFB; font-weight: 600; }
.ujpg-pv-serp .ujsp-ai__src { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ujpg-pv-serp .ujsp-src { display: flex; flex-direction: column; gap: 3px; padding: 9px 11px; border: 1px solid var(--ujsp-line); border-radius: 10px; background: #FFFFFF; text-decoration: none; color: inherit; scroll-margin: 12px; transition: border-color .12s, box-shadow .3s; }
.ujpg-pv-serp a.ujsp-src:hover { border-color: var(--ujsp-accent); }
.ujpg-pv-serp .ujsp-src.is-flash { box-shadow: 0 0 0 3px rgba(79, 123, 247, .35); }
.ujpg-pv-serp .ujsp-src__site { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: #4B5563; min-width: 0; }
.ujpg-pv-serp .ujsp-src__site > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ujpg-pv-serp .ujsp-fav { width: 16px; height: 16px; flex: 0 0 16px; border-radius: 50%; background: #F3F4F6; object-fit: contain; }
.ujpg-pv-serp .ujsp-fav--l { display: inline-flex; align-items: center; justify-content: center; font-size: 9.5px; font-weight: 700; color: #475569; background: #E2E8F0; }
.ujpg-pv-serp .ujsp-src__t { font-size: 13px; font-weight: 600; line-height: 1.35; color: #1D4ED8; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ujpg-pv-serp div.ujsp-src .ujsp-src__t { color: #1F2937; }
.ujpg-pv-serp .ujsp-src__sn { font-size: 12px; line-height: 1.45; color: #6B7280; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ujpg-pv-serp .ujsp-ai__links { display: flex; flex-wrap: wrap; gap: 6px; font-size: 11.5px; color: #6B7280; align-items: center; }
.ujpg-pv-serp .ujsp-ai__links a { color: #1D4ED8; text-decoration: none; padding: 0 6px; border: 1px solid var(--ujsp-line); border-radius: 999px; }
/* collapsed: about six lines of the answer, faded out */
.ujpg-pv-serp .ujsp-ai.is-collapsed .ujsp-ai__grid { max-height: 168px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
.ujpg-pv-serp .ujsp-ai__more { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 8px; padding: 7px 12px; font: 600 13px var(--ujsp-sans); color: #374151; background: #F3F4F6; border: 0; border-radius: 999px; cursor: pointer; }
.ujpg-pv-serp .ujsp-ai__more:hover { background: #E5E7EB; color: #111827; }
.ujpg-pv-serp .ujsp-ai.is-short .ujsp-ai__more { display: none; }
@container (max-width: 620px) {
  .ujpg-pv-serp .ujsp-ai__grid { grid-template-columns: minmax(0, 1fr); }
  .ujpg-pv-serp .ujsp-ai__src { flex-direction: row; overflow-x: auto; padding-bottom: 4px; }
  .ujpg-pv-serp .ujsp-ai__src .ujsp-src { flex: 0 0 200px; }
  .ujpg-pv-serp .ujsp-ai.is-collapsed .ujsp-ai__src { display: none; }
}
/* STATUS-FV: "Look up this job" on jobs cards (Request builder and playground) */
.ujpg-pv-serp .ujsp-job-lookup { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 4px 10px; font-family: var(--ujsp-sans); font-size: 12px; font-weight: 600; color: #9A3412; background: #FFF7ED; border: 1px solid #FED7AA; border-radius: 999px; cursor: pointer; }
.ujpg-pv-serp .ujsp-job-lookup:hover { background: #FFEDD5; }
.ujpg-pv-serp .ujsp-job-lookup:focus-visible { outline: 2px solid #EA580C; outline-offset: 2px; }
.ujpg-pv-serp .ujsp-job-apply { color: #1A0DAB; text-decoration: none; }
.ujpg-pv-serp .ujsp-job-apply:hover { text-decoration: underline; }