/* Navigation stays visually separate from automatic film results. */
.recommended-sites { margin: 22px 0; padding: 18px; border: 1px solid #dbe5ed; border-radius: 12px; background: #f8fbfd; color: #283c50; }
.recommended-sites summary { cursor: pointer; font-weight: 650; }
.recommended-sites summary span { font-size: 12px; color: #657e90; margin-left: 12px; font-weight: 400; }
.recommended-sites .discovery-note { color: #657586; line-height: 1.8; }
.recommended-sites a { color: #057fa9; }
.site-directory-controls { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0 10px; }
.site-directory-controls label { display: grid; gap: 6px; font-size: 12px; flex: 1 1 150px; }
.site-directory-controls input, .site-directory-controls select { width: 100%; min-width: 0; padding: 10px 12px; border: 1px solid #cbd8e2; border-radius: 8px; font: inherit; font-size: 14px; color: #283c50; background: #fff; }
.site-directory-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(235px,1fr)); gap: 12px; }
.site-directory-card { padding: 16px; background: #fff; border: 1px solid #e0e8ef; border-radius: 10px; display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.site-directory-card[hidden], .recommended-sites [hidden] { display: none !important; }
.site-directory-card h4, .site-directory-card p { margin: 0; }
.site-directory-card h4 { color: #253b50; font-size: 16px; }
.site-directory-card p { color: #617285; line-height: 1.7; font-size: 13px; }
.site-directory-card .site-host { font-size: 11px; color: #7b8c9c; overflow-wrap: anywhere; }
.site-category { color: #057fa9; background: #e8f6fc; border-radius: 4px; padding: 3px 7px; font-size: 11px; }
.site-status { margin-left: 7px; font-size: 11px; color: #7b6a48; }
.site-directory-card nav { margin-top: auto; padding-top: 9px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.site-directory-card button { background: none; border: 0; color: #557385; cursor: pointer; padding: 5px; font-size: 12px; }
.site-directory-card .discovery-primary { font-size: 13px; font-weight: 650; }
.site-exclusions { margin-top: 18px; font-size: 12px; color: #6f7e8c; }
.site-exclusions li { line-height: 1.8; margin-top: 6px; }
.site-launch { margin: 0; padding: 24px; background: #f5f8fc; font-family: system-ui,sans-serif; color: #2a3a4a; }
.site-launch main { max-width: 650px; margin: 8vh auto; padding: 30px; background: white; border-radius: 14px; line-height: 1.8; }
.site-launch a { color: #047ca9; margin-right: 12px; }
@media (max-width: 520px) { .site-directory-grid { grid-template-columns: 1fr; } .recommended-sites { padding: 12px; } .recommended-sites summary span { display: block; margin: 6px 0 0; } }