/* Search within the server-rendered teaching examples. */
.example-library [hidden] { display: none !important; }
.example-library-filter { margin-top: 24px; padding: 20px; border: 1px solid #d8d3c4; border-radius: 10px; background: #fff; }
.example-library-filter-row { display: flex; gap: 16px; align-items: flex-end; }
.example-library-query { flex: 1; min-width: 0; }
.example-library-query label { display: block; font-size: 15px; font-weight: 650; line-height: 1.5; margin-bottom: 8px; }
.example-library-query input { width: 100%; min-width: 0; min-height: 48px; border: 1px solid #8d897f; border-radius: 6px; padding: 11px 13px; font: 16px/1.5 Inter, Arial, sans-serif; background: #fff; color: #202020; }
.example-library-filter button { min-height: 48px; border: 1px solid #aaa399; border-radius: 6px; padding: 11px 16px; background: #f7f5ef; color: #202020; font: 650 14px/1.5 Inter, Arial, sans-serif; cursor: pointer; }
.example-library-filter button:disabled { opacity: .5; cursor: default; }
.example-library-filter button:not(:disabled):hover { background: #202020; color: #fff; }
.example-library-filter :is(input, button):focus-visible { outline: 3px solid #2357ff; outline-offset: 3px; }
.example-library-filter #exampleFilterHint { font-size: 13px; line-height: 1.6; color: #605b51; margin: 12px 0 0; }
.example-library-filter #exampleFilterStatus { font-size: 14px; line-height: 1.6; font-weight: 650; margin: 10px 0 0; }
.example-library #exampleFilterEmpty { margin-top: 20px; }
.example-library #exampleFilterEmpty p { margin: 0; font-size: 15px; line-height: 1.7; }
@media (max-width: 680px) {
  .example-library-filter { padding: 16px; }
  .example-library-filter-row { align-items: stretch; flex-direction: column; gap: 12px; }
  .example-library-filter button { width: 100%; }
}