/*
 * A quiet two-column picture shelf on phones; the reading layouts stay separate.
 */
.catalog-filter-menu {
  flex-shrink: 0; }
.catalog-filter-menu > summary { display: none; }
.catalog-filter-options {
  display: flex; align-items: center;
  gap: 16px; }

@media (max-width: 699px) {
  body[data-view="library"] { background-color: #f7f4e8; background-image: none; }
  body[data-view="library"] .shell { padding-left: 12px; padding-right: 12px; }
  body[data-view="library"] main { padding-top: 0; }
  .library-view { padding-top: 0; }
  .library-view .collection-heading,
  .library-view .catalog-results-heading,
  .library-view .catalog-version-notice,
  .library-view .catalog-meta,
  .library-view .recitation-scope,
  .library-view .planned-note,
  body[data-view="library"] footer { display: none; }
  .library-view .catalog-controls {
    display: flex; flex-direction: column; position: sticky; top: var(--header-height);
    z-index: 25; padding: 10px 0 0; margin: 0 0 16px; border: 0;
    background: #f7f4e8; backdrop-filter: blur(12px);
  }
  .library-view .catalog-search-row { order: -1; display: flex; align-items: center; gap: 8px; }
  .library-view .search-field {
    flex: 1; width: auto; min-width: 0; min-height: 44px; background: #eaeadd;
    border: 1px solid #e2e3d3; border-radius: 10px;
  }
  .library-view .search-field > span { font-size: 21px; padding-left: 12px; padding-right: 8px; }
  .library-view .search-field input { min-width: 0; }
  .library-view .search-field input { min-height: 44px; padding: 10px 10px 10px 0; font-size: 16px; }
  .catalog-filter-menu { position: relative; margin: 0; }
  .catalog-filter-menu > summary {
    list-style: none; display: flex; align-items: center; justify-content: center;
    gap: 5px; min-height: 44px; min-width: 64px; padding: 8px 10px;
    border: 1px solid #dad9c7; border-radius: 9px; background: #fffbed;
    color: #5b6c50; font-size: 12px; white-space: nowrap; cursor: pointer;
  }
  .catalog-filter-menu > summary::-webkit-details-marker { display: none; }
  .catalog-filter-menu > summary svg { width: 16px; height: 16px; }
  .catalog-filter-menu[open] > summary { border-color: #9eae8f; background: #e9eedb; }
  .catalog-filter-options {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 35;
    display: grid; align-items: center; gap: 14px; width: 252px;
    padding: 18px 16px; background: #fffbed; border: 1px solid #dad6bf;
    border-radius: 10px; box-shadow: 0 10px 36px #41472f26;
  }
  .catalog-filter-options .filter-label {
    display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px;
    font-size: 13px; color: #68715b;
  }
  .catalog-filter-options select { width: 100%; min-height: 44px; font-size: 14px; }
  .library-view .book-filters {
    display: flex; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
    margin: 6px 0 0; padding: 0 0 7px; gap: 2px; scrollbar-width: none;
  }
  .library-view .book-filters::-webkit-scrollbar { display: none; }
  .library-view .book-filters button {
    flex-shrink: 0; min-height: 44px; font-size: 13px; padding: 10px 12px 8px;
    background: transparent; border: 0; border-bottom: 2px solid transparent;
    border-radius: 0; color: #68715a;
  }
  .library-view .book-filters button.active {
    border-bottom-color: #718264; color: #425b3d; font-weight: 600;
  }
  .library-view .catalog-grid {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 12px; align-items: start;
  }
  .library-view .catalog-item,
  .library-view .catalog-ready {
    display: flex; flex-direction: column; min-width: 0; border: 0;
    border-radius: 10px; overflow: hidden; background: #fffdf4; box-shadow: none;
  }
  .library-view .catalog-cover {
    display: block; width: 100%; height: auto; min-height: 0; aspect-ratio: 4 / 5;
    overflow: hidden; border: 0; background: #e6e8d8;
  }
  .library-view .catalog-cover .cover-sprite {
    width: 100%; height: 100%; max-width: none; aspect-ratio: auto;
  }
  .library-view .catalog-copy,
  .library-view .catalog-ready .catalog-copy {
    display: block; padding: 11px 10px 12px; min-width: 0;
  }
  .library-view .catalog-copy h3 {
    font-size: 17px; line-height: 1.5; font-weight: 600; letter-spacing: 0;
    margin: 0 0 7px; overflow-wrap: anywhere;
  }
  .library-view .catalog-author {
    font-size: 12px; line-height: 1.6; margin: 0; color: #68715a;
  }
  .library-view .catalog-grid .enter-lesson {
    position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%;
    min-height: 0; padding: 0; margin: 0; border: 0; border-radius: inherit;
    font-size: 0; color: transparent; background: transparent; box-shadow: none;
  }
  .library-view .catalog-grid .enter-lesson:hover { background: transparent; color: transparent; }
  .library-view .catalog-grid .enter-lesson > span { display: none; }
  .library-view .catalog-grid .enter-lesson:focus-visible {
    outline: 2px solid var(--sage); outline-offset: -3px;
  }
  .library-view .catalog-empty { margin-top: 18px; padding: 28px 16px; font-size: 15px; }
  .library-view .catalog-empty .text-action { min-height: 44px; }
  .library-view .catalog-planned .catalog-copy { min-height: 110px; padding: 14px 10px; }
  .library-view .catalog-planned .planned-mark { right: 10px; bottom: 14px; font-size: 50px; }
  .library-view .catalog-planned .catalog-author { position: relative; z-index: 1; }
}