/* The supplied artwork is 1:3. Cover the width while retaining its proportions. */
.route-library-page {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  background: var(--bg);
}
.route-library-background {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(rgba(7,10,14,.48),rgba(7,10,14,.68)),url('/assets/images/route-library-background.png');
  background-size: max(100vw,100vh) auto;
  background-position: center top;
  background-repeat: no-repeat;
}
.route-library-content { position: relative; padding-bottom: 24px; }
.route-library-page .site-header {
  background: var(--header-background);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.route-library-page .library-intro,
.route-library-page .filters,
.route-library-page .card,
.route-library-page .results-toolbar,
.route-library-page .import-help,
.route-library-page #load-note:not(:empty) {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--panel-shadow);
}
.route-library-page .library-intro { max-width: none; padding: 28px; margin: 28px 0 24px; }
.route-library-page .results-toolbar { padding: 12px 20px; }
.route-library-page .import-help { padding: 24px; margin-top: 24px; }
.route-library-page #load-note:not(:empty) { padding: 16px 20px; }

@media(max-width:800px) {
  .route-library-background { background-size: max(100vw,73.334vh) auto; }

  .route-library-page .card { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .route-library-page .library-intro { padding: 20px; }
}