/* Public examples of the existing Stream author/message/source and filter hierarchy. */
.sf-sections { padding-bottom: 110px; }
.sf-disclosure { width: calc(100% - 2 * var(--pg-gutter, 32px)); max-width: 1500px; margin: 0 auto 36px; color: #62665d; font-size: 17px; line-height: 1.5; }
.sf-section { padding: 68px var(--pg-gutter, 32px); scroll-margin-top: 112px; }
.sf-section + .sf-section { margin-top: 36px; }
.sf-clean-section { background: #f5f5f0; }
.sf-presets-section { background: #eee7f5; }
.sf-heading, .sf-surface { width: 100%; max-width: 1500px; margin-inline: auto; }
.sf-heading { margin-bottom: 36px; }
.sf-heading h2 { max-width: 1100px; margin: 0; font-family: inherit; font-size: clamp(38px,4.6vw,68px); font-weight: 500; letter-spacing: -.045em; line-height: 1.08; }
.sf-heading > p { max-width: 900px; margin: 24px 0 0; color: #5c6057; font-size: 21px; line-height: 1.5; }
.sf-surface { min-width: 0; overflow: hidden; border: 1px solid #dedfd6; border-radius: 20px; background: #fff; }
.sf-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; min-height: 92px; padding: 22px 28px; border-bottom: 1px solid #e5e6df; }
.sf-toolbar h3 { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -.03em; line-height: 1.25; }
.sf-result-count { margin: 0; color: #62665d; font-size: 17px; line-height: 1.4; font-variant-numeric: tabular-nums; }
.sf-switch { position: relative; display: none; align-items: center; gap: 13px; min-height: 48px; margin-left: auto; padding: 7px 0; font-size: 17px; font-weight: 500; line-height: 1.4; cursor: pointer; }
.sf-switch input { position: absolute; width: 48px; height: 28px; margin: 0; opacity: 0; cursor: pointer; }
.sf-switch-track { display: block; flex: 0 0 48px; width: 48px; height: 28px; border: 1px solid #797e72; border-radius: 20px; background: #e9eae4; }
.sf-switch-track::after { content: ''; display: block; width: 20px; height: 20px; margin: 3px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px #17181724; }
.sf-switch input:checked + .sf-switch-track { border-color: #171817; background: #171817; }
.sf-switch input:checked + .sf-switch-track::after { transform: translateX(20px); }
.sf-switch input:focus-visible + .sf-switch-track { outline: 2px solid #171817; outline-offset: 4px; }
.sf-clean-cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; padding: 28px; background: #f8f8f5; }
.sf-message { min-width: 0; display: flex; flex-direction: column; padding: 26px; border: 1px solid #e0e2d9; border-radius: 12px; background: #fff; }
.sf-message h4 { margin: 0 0 22px; font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: -.025em; overflow-wrap: anywhere; }
.sf-message-text { margin: 0 0 30px; font-size: 22px; line-height: 1.5; letter-spacing: -.018em; overflow-wrap: anywhere; }
.sf-message footer { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: auto; padding-top: 20px; border-top: 1px solid #e9eae3; font-size: 16px; line-height: 1.5; color: #62665d; overflow-wrap: anywhere; }
.sf-kind { padding: 6px 10px; border-radius: 6px; background: #f0f0eb; color: #5e6357; font-size: 16px; font-weight: 500; }
.sf-kind-request { background: var(--pg-sage, #cfe1bc); color: #2f3b23; }
.sf-filtered .sf-message-demand { grid-column: 1 / -1; max-width: none; border-color: #b5c69f; }
.sf-filtered .sf-message-demand .sf-message-text { max-width: 1000px; font-size: clamp(23px,2.4vw,34px); line-height: 1.4; }
.sf-sections [hidden] { display: none; }
.sf-presets { display: none; flex-wrap: wrap; gap: 8px; padding: 18px 24px; border-bottom: 1px solid #e5e6df; }
.sf-presets button { min-width: 44px; min-height: 48px; padding: 11px 22px; border: 1px solid transparent; border-radius: 9px; background: #f4f3f0; color: #5c6057; font-family: inherit; font-size: 17px; font-weight: 500; line-height: 1.4; }
.sf-presets button[aria-pressed="true"] { color: #fff; background: #171817; border-color: #171817; }
.sf-presets button:focus-visible { outline: 2px solid #171817; outline-offset: 4px; }
.sf-preset-panel { display: grid; grid-template-columns: 1fr 1.15fr; min-width: 0; border-bottom: 1px solid #e5e6df; }
.sf-preset-panel:last-child { border-bottom: 0; }
.sf-config { min-width: 0; padding: 34px; }
.sf-config > h3 { margin: 0 0 30px; font-size: 28px; font-weight: 500; letter-spacing: -.03em; line-height: 1.2; }
.sf-config-row + .sf-config-row { margin-top: 25px; }
.sf-config-row h4 { margin: 0 0 12px; font-size: 18px; font-weight: 500; line-height: 1.4; }
.sf-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.sf-chips span { display: block; max-width: 100%; padding: 10px 14px; border-radius: 8px; background: var(--pg-lemon, #eff098); font-size: 17px; line-height: 1.45; overflow-wrap: anywhere; }
.sf-exclusions span { background: #f4e6df; }
.sf-sources span { background: #f0f0ea; color: #505548; }
.sf-preview { min-width: 0; display: flex; flex-direction: column; padding: 34px; background: #f4f1f7; border-left: 1px solid #e5e6df; }
.sf-preview-label { margin: 0 0 20px; color: #63586d; font-size: 18px; font-weight: 500; line-height: 1.4; }
.sf-preview-message { flex: 1; padding: 30px; }
.sf-preview-message .sf-message-text { font-size: clamp(22px,2.2vw,30px); line-height: 1.45; }
.sf-sections.is-enhanced .sf-switch, .sf-sections.is-enhanced .sf-presets { display: flex; }
@media (hover: hover) and (pointer: fine) {
 .sf-presets button:not([aria-pressed="true"]):hover { border-color: #b9bcb1; background: #ecece5; }
}
@media (max-width: 1100px) {
 .sf-clean-cards { gap: 12px; padding: 20px; }
 .sf-message { padding: 22px; }
 .sf-message-text { font-size: 20px; }
 .sf-config, .sf-preview { padding: 27px; }
}
@media (max-width: 800px) {
 .sf-clean-cards { grid-template-columns: 1fr; gap: 16px; }
 .sf-message-text { font-size: 22px; }
 .sf-preset-panel { grid-template-columns: 1fr; }
 .sf-preview { border-left: 0; border-top: 1px solid #e5e6df; }
 .sf-switch { margin-left: 0; }
 .sf-toolbar { gap: 14px 20px; }
 .sf-toolbar h3 { flex-basis: 100%; }
 .sf-toolbar .sf-result-count { order: 2; }
 .sf-toolbar .sf-switch { width: 100%; order: 3; }
}
@media (max-width: 700px) {
 .sf-sections { padding-bottom: 72px; }
 .sf-disclosure { width: calc(100% - 40px); margin-bottom: 26px; }
 .sf-section { padding: 44px 20px; }
 .sf-section + .sf-section { margin-top: 24px; }
 .sf-heading { margin-bottom: 28px; }
 .sf-heading h2 { font-size: 37px; }
 .sf-heading > p { font-size: 20px; }
 .sf-surface { border-radius: 16px; }
 .sf-toolbar { padding: 22px; }
 .sf-toolbar h3 { font-size: 23px; }
 .sf-presets { padding: 14px; gap: 8px; }
 .sf-presets button { flex: 1 1 auto; padding-inline: 14px; font-size: 16px; }
 .sf-config, .sf-preview { padding: 24px; }
 .sf-preview-message { padding: 23px; }
 .sf-config > h3 { font-size: 26px; }
 .sf-preview-message .sf-message-text { font-size: 23px; }
}
@media (max-width: 359px) {
 .sf-section { padding-inline: 16px; }
 .sf-disclosure { width: calc(100% - 32px); }
 .sf-heading h2 { font-size: 33px; }
 .sf-toolbar, .sf-config, .sf-preview { padding: 20px; }
 .sf-clean-cards { padding: 14px; }
 .sf-message, .sf-preview-message { padding: 20px; }
 .sf-message-text, .sf-preview-message .sf-message-text { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) { .sf-sections *, .sf-sections *::after { animation: none; transition: none; } }
@media (forced-colors: active) {
 .sf-presets button[aria-pressed="true"] { color: HighlightText; background: Highlight; }
 .sf-switch input:checked + .sf-switch-track { border: 2px solid Highlight; background: Highlight; }
 .sf-switch-track::after { background: CanvasText; }
 .sf-kind, .sf-chips span { border: 1px solid CanvasText; }
}