/* Preserve reference highlights through the shared light-markup sanitizer. */
body .sb-search .sb-search-hit { background: color-mix(in srgb,var(--pb-secondary) 20%,transparent); color:inherit; padding:0 .08em; }
/* Topic icons are editable SVG attachments rather than inline drawings. */
body .sb-search .s04-g img.ic { width:24px; height:24px; object-fit:contain; }
/* Local filtering must win over the reference's grid and flex display rules. */
body .sb-search [hidden] { display:none !important; }
body .sb-search :is(a,button,input):focus-visible { outline:var(--st-focus-w) solid var(--st-focus-color); outline-offset:var(--st-focus-offset); }
/* On the primary band the search field retains its light surface and dark ink. */
body .sb-search.sb-look-16 .s16-bar { --pb-text:var(--pb-ink); --pb-muted:color-mix(in srgb,var(--pb-ink) 72%,#fff); --pb-border:rgb(0 0 0 / .18); }
@media (prefers-reduced-motion:reduce) { body .sb-search .s19-sk span { animation:none; } }
/* The edge frame's general .wrap width overrides the photo band's narrow search column. */
body .sb-search.sb-look-18 .s18-in { max-width:var(--st-narrow); }
/* Theme heading weights and fonts must not replace the reference's small UI labels. */
body .sb-search .s09-h { font:var(--pb-ui-weight) var(--fs-small-titles-size)/1.2 var(--pb-body-font); }
/* Keep the finder grid and long topic names inside the frame on 320px phones. */
body .sb-search .s12-f, body .sb-search .s12-f > * { min-width:0; max-width:100%; }
body .sb-search .s04-n { overflow-wrap:anywhere; }
/* Generated paragraph resets otherwise override the reference's small type and suggestion title. */
body .sb-search .s05-tt { font-size:clamp(calc(var(--fs-medium) * 0.75), 2.65625vw, var(--fs-medium)) !important; line-height:var(--st-lh-h3) !important; }
body .sb-search :is(.r-type,.r-path) { font-size:var(--fs-small-titles-size) !important; line-height:1.3 !important; }
body .sb-search :is(.s05-g,.s19-lab) { font-size:var(--fs-small-titles-size) !important; line-height:1 !important; }
body .sb-search .s09-h { font-family:var(--pb-body-font) !important; font-size:var(--fs-small-titles-size) !important; }
/* The theme resets link underlines; the design underlines these links. */
body .sb-search :is(.s01-t,.s09-l,.s18-q,.s19-dym) a, body .sb-search .s09-m .lead a, body .sb-search a.s20-p { text-decoration: underline; }
/* The generated body rule clips x overflow; that cut off the suggestion panel's drop shadow (SRC-05). */
body .sb-search { overflow: visible; }
body .sb-search .s09-h { color:var(--pb-muted) !important; }
/* sb_a() prints the arrow in its own span; the design has it as part of the link text (one underline, no flex gap). */
body .sb-search a:is(.tlink, .btn) > span[aria-hidden="true"] { display: contents; }
/* Branding text sizes. Kept here so Studio library re-extraction preserves these roles. */
body .sb-search { font-size: var(--fs-copy); }
body .sb-search .demo-top h1 { font-size: clamp(calc(var(--fs-medium) * 0.75), 2.65625vw, var(--fs-medium)); }
body .sb-search .demo-top p { font-size: var(--fs-small) !important; }
body .sb-search .demo-ctl { font-size: var(--fs-small) !important; }
body .sb-search .demo-ctl button { font-size: var(--fs-small); }
body .sb-search .eyebrow { font-size: var(--fs-small-titles-size); }
body .sb-search .h { font-size: clamp(calc(var(--fs-titles) * 0.65), 3.75vw, var(--fs-titles)); }
body .sb-search .d { font-size: clamp(calc(var(--fs-titles) * 0.65), 3.75vw, var(--fs-titles)); }
body .sb-search .h3 { font-size: clamp(calc(var(--fs-medium) * 0.75), 2.65625vw, var(--fs-medium)); }
body .sb-search .lead { font-size: var(--fs-lead) !important; }
body .sb-search .cap { font-size: var(--fs-small) !important; }
body .sb-search .btn { font-size: var(--fs-buttons); }
body .sb-search .sf input { font-size: var(--fs-copy); }
body .sb-search .sel select { font-size: var(--fs-copy); }
body .sb-search .r-type { font-size: var(--fs-small-titles-size); }
body .sb-search .r-path { font-size: var(--fs-small-titles-size); }
body .sb-search .r-t { font-size: clamp(calc(var(--fs-medium) * 0.75), 2.65625vw, var(--fs-medium)); }
body .sb-search .qline h2 { font-size: clamp(calc(var(--fs-medium) * 0.75), 2.65625vw, var(--fs-medium)); }
body .sb-search .s01-f input { font-size: var(--fs-copy) !important; }
body .sb-search .s04-n { font-size: clamp(calc(var(--fs-medium) * 0.75), 2.65625vw, var(--fs-medium)); }
body .sb-search .s05-tt { font-size: clamp(calc(var(--fs-medium) * 0.75), 2.65625vw, var(--fs-medium)); }
body .sb-search .s05-g { font-size: var(--fs-small-titles-size); }
body .sb-search .s07-f legend { font-size: var(--fs-small-titles-size); }
body .sb-search .s08-t button { font-size: var(--fs-buttons); }
body .sb-search .s09-h { font-size: var(--fs-small-titles-size); }
body .sb-search .s10-dt { font-size: var(--fs-small); }
body .sb-search .s10-dt b { font-size: var(--fs-copy); }
body .sb-search .s14-r time { font-size: var(--fs-small); }
body .sb-search .s14-r time b { font-size: var(--fs-copy); }
body .sb-search .s15-a summary { font-size: clamp(calc(var(--fs-medium) * 0.75), 2.65625vw, var(--fs-medium)); }
body .sb-search .s17 .r-t { font-size: var(--fs-lead) !important; }
body .sb-search .s19-lab { font-size: var(--fs-small-titles-size); }
body .sb-search .s02 h2.h3 { font-size: clamp(calc(var(--fs-titles) * 0.65), 3.75vw, var(--fs-titles)) !important; }
body .sb-search .s06 h2 { font-size: clamp(calc(var(--fs-titles) * 0.65), 3.75vw, var(--fs-titles)) !important; }

/* 3.6.10: SRC-04 phones: two tiles per row with names at 36px ran past the screen; the names scale with the screen. */
@media (max-width: 767px) {
	body:not(.cc-look-pre-3-6-10) .sb-search .s04-g { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	body:not(.cc-look-pre-3-6-10) .sb-search .s04-n { font-size: clamp(18px, 5.4vw, calc(var(--fs-medium) * .75)) !important; }
	body:not(.cc-look-pre-3-6-10) .sb-search .s04-g a { padding: 20px 16px; }
}

/* 3.6.10: looks drawn as a brand band (.on-primary) sit on the row's Background, which paints the band. On a light row their
   words and buttons follow the row (dark text), not white (SRC-16 printed its heading and note white on white). On a Secondary row they follow that color's
   lightness; Main, Black and photo rows keep the white design. */
body:not(.cc-look-pre-3-6-10) .sb-blk.sb-blk.sb-search:not(.sb-edge):not(.sb-dark, :is(.bg-sec, .bg-main, .bg-black, .bg-image) *) > .on-primary { --pb-on-dark: var(--pb-text); --pb-muted-on-dark: var(--color-muted); --pb-muted: var(--color-muted); --pb-border: var(--color-line); --pb-rule-on-dark: var(--color-line); color: var(--pb-text); }
body:not(.cc-look-pre-3-6-10) .bg-sec .sb-blk.sb-blk.sb-search:not(.sb-edge):not(.sb-dark) > .on-primary { --pb-on-dark: oklch(from var(--color-sec) clamp(0, (0.62 - l) * 1000, 1) 0 0); }
body:not(.cc-look-pre-3-6-10) .sb-blk.sb-blk.sb-blk.sb-blk.sb-search:not(.sb-edge):not(.sb-dark, :is(.bg-sec, .bg-main, .bg-black, .bg-image) *) > .on-primary .btn:not(.ghost) { background: var(--btn-fill); color: var(--btn-color) !important; border-color: var(--btn-border); }
body:not(.cc-look-pre-3-6-10) .sb-blk.sb-blk.sb-blk.sb-blk.sb-search:not(.sb-edge):not(.sb-dark, :is(.bg-sec, .bg-main, .bg-black, .bg-image) *) > .on-primary .btn:not(.ghost):hover { background: var(--btn-fill-hover); color: var(--btn-color-hover) !important; border-color: var(--btn-border-hover); }