/* =========================================================
   MOBILE LIST FILTER UTILITY
   ========================================================= */

@media (max-width: 1099px), (max-height: 699px) {
  #codex-content.codex-list-page {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-bottom: 12px !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #codex-content.codex-list-page .codex-mobile-filter-toggle {
    display: none !important;
  }

  #codex-content.codex-list-page .codex-list-page-shell {
    height: auto !important;
    min-height: 100% !important;
    display: block !important;
  }

  .codex-mobile-list-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 10px;

    margin: 0 0 10px;
    padding: 4px 2px 8px;

    font-family: 'Marcellus SC', Georgia, serif;
    font-size: clamp(0.78rem, 3.15vw, 0.92rem);
    line-height: 1.2;
    letter-spacing: 0.035em;
    color: #3a2614;
    opacity: 0.86;

    overflow: hidden;
    white-space: nowrap;
  }

  .codex-mobile-list-summary-filters {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: left;
  }

  .codex-mobile-list-summary-sort {
    white-space: nowrap;
    text-align: right;
  }

  #codex-content.codex-list-page .codex-list-control-rail {
    display: none !important;
  }

  #codex-content.codex-list-page .codex-list-control-split-view {
    display: block !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  #codex-content.codex-list-page .codex-list-scroll-shell {
    height: auto !important;
    min-height: 0 !important;
    padding-right: 0;
    overflow: visible !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  #codex-content.codex-list-page .codex-list-scroll-shell.codex-scroll-fade {
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  .codex-mobile-list-controls-mount,
  .codex-mobile-list-controls-mount * {
    box-sizing: border-box !important;
  }

  .codex-mobile-list-controls-mount {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
  }

  .codex-mobile-list-controls-mount .codex-list-controls-shell,
  .codex-mobile-list-controls-mount .codex-mobile-controls-panel {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .codex-mobile-list-controls-mount .codex-mobile-controls-heading,
  .codex-mobile-list-controls-mount .codex-mobile-controls-apply {
    display: none !important;
  }

  .codex-mobile-list-controls-mount .codex-filter-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .codex-mobile-list-controls-mount .codex-dynamic-filter,
  .codex-mobile-list-controls-mount .codex-sort-label {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;

    margin: 0 !important;
    padding: 0 0 12px !important;

    border-bottom: 1px solid rgba(72, 43, 18, 0.16) !important;
    background: transparent !important;
    box-shadow: none !important;

    font-family: 'Marcellus SC', Georgia, serif;
    font-size: 0.76rem;
    letter-spacing: 0.055em;
    text-transform: uppercase;
    color: rgba(47, 29, 16, 0.82);
  }

  .codex-mobile-list-controls-mount .codex-dynamic-filter:last-child,
  .codex-mobile-list-controls-mount .codex-sort-label:last-child {
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  .codex-mobile-list-controls-mount select,
  .codex-mobile-list-controls-mount .codex-dynamic-filter select,
  .codex-mobile-list-controls-mount .codex-dynamic-filter select:not(.codex-filter-field-select),
  .codex-mobile-list-controls-mount .codex-filter-field-select,
  .codex-mobile-list-controls-mount .codex-sort-label select,
  .codex-mobile-list-controls-mount .codex-sort-direction {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 40px !important;

    align-self: stretch !important;

    margin: 0 !important;
    padding: 0 34px 0 10px !important;

    border-radius: 4px !important;
    border: 1px solid rgba(72, 43, 18, 0.28) !important;
    background-color: rgba(246, 232, 196, 0.58) !important;
    color: #2f1d10 !important;

    font-family: 'Spectral', Georgia, serif !important;
    font-size: 0.94rem !important;
    line-height: 1.1 !important;

    box-shadow: none !important;
  }

  .codex-mobile-list-controls-mount .codex-filter-field-select,
  .codex-mobile-list-controls-mount .codex-sort-direction {
    font-family: 'Marcellus SC', Georgia, serif !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
  }

  #codex-mobile-utility-panel.open .codex-mobile-list-controls-mount select.codex-filter-field-select,
  #codex-mobile-utility-panel.open .codex-mobile-list-controls-mount .codex-dynamic-filter > select.codex-filter-field-select,
  #codex-overlay #codex-mobile-utility-panel.open .codex-mobile-list-controls-mount .codex-dynamic-filter > select.codex-filter-field-select {
    display: inline-block !important;
    width: 67% !important;
    inline-size: 67% !important;
    max-width: 67% !important;
    max-inline-size: 67% !important;
    min-width: 0 !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    flex: none !important;
    align-self: flex-start !important;
    justify-self: start !important;
  }

  .codex-mobile-list-controls-mount .codex-sort-topline {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;

    width: 100% !important;
    min-width: 0 !important;
  }

  .codex-mobile-list-controls-mount .codex-sort-direction {
    width: auto !important;
    min-width: 88px !important;
    padding: 0 10px !important;
  }

  #codex-mobile-utility-panel.open .codex-mobile-utility-sheet:has(.codex-hex-region-filter-panel) {
    max-height: min(94dvh, calc(100dvh - 20px)) !important;
    padding-top: clamp(22px, 5.5vw, 34px) !important;
    padding-bottom: clamp(20px, 5vw, 30px) !important;
  }

  #codex-mobile-utility-panel.open .codex-mobile-utility-sheet:has(.codex-hex-region-filter-panel)::before {
    inset: -30px -26px !important;
  }

  #codex-mobile-utility-panel.open .codex-mobile-utility-sheet:has(.codex-hex-region-filter-panel) .codex-mobile-utility-body {
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  #codex-mobile-utility-panel.open .codex-mobile-list-controls-mount .codex-hex-region-filter-panel {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #codex-mobile-utility-panel.open .codex-mobile-list-controls-mount .codex-hex-region-filter-heading {
    margin: 0 0 6px !important;
    padding: 0 !important;
    font-family: 'Marcellus SC', Georgia, serif !important;
    font-size: 0.76rem !important;
    letter-spacing: 0.055em !important;
    text-transform: uppercase !important;
    color: rgba(47, 29, 16, 0.82) !important;
  }

  #codex-mobile-utility-panel.open .codex-mobile-list-controls-mount .codex-hex-region-checklist {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 4px !important;
    width: 100% !important;
    max-height: none !important;
    padding: 2px 0 0 !important;
    overflow: visible !important;
  }

  #codex-mobile-utility-panel.open .codex-mobile-list-controls-mount .codex-hex-region-check-row {
    display: grid !important;
    grid-template-columns: 22px minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: 8px !important;

    width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 5px 0 !important;

    font-family: 'Spectral', Georgia, serif !important;
    font-size: 0.92rem !important;
    line-height: 1.15 !important;
    color: #2f1d10 !important;
    text-align: left !important;
  }

  #codex-mobile-utility-panel.open .codex-mobile-list-controls-mount .codex-hex-region-check-row input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    margin: 0 !important;
    justify-self: center !important;
    align-self: center !important;
    accent-color: #6d451f;
  }

  #codex-mobile-utility-panel.open .codex-mobile-list-controls-mount .codex-hex-region-check-row span {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #codex-mobile-utility-panel.open .codex-mobile-list-controls-mount .codex-hex-region-check-all-row {
    padding-bottom: 7px !important;
    margin-bottom: 3px !important;
    border-bottom: 1px solid rgba(72, 43, 18, 0.14) !important;
    font-family: 'Marcellus SC', Georgia, serif !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.04em !important;
  }
}

/* Mobile list scroll shell sizing/fade. Kept after the utility rules so it
   preserves the old late-loaded cascade from codex-mobile-list-content-fade.css. */
@media (max-width: 1099px), (max-height: 699px) {
  #codex-content.codex-list-page {
    overflow: hidden !important;
    padding-bottom: 0 !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  #codex-content.codex-list-page .codex-list-page-shell {
    height: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 10px !important;
    overflow: hidden !important;
  }

  #codex-content.codex-list-page .codex-mobile-list-summary {
    margin: 0 0 2px !important;
    padding: 4px 2px 8px !important;
  }

  #codex-content.codex-list-page .codex-list-control-split-view {
    height: 100% !important;
    min-height: 0 !important;
    display: block !important;
    overflow: hidden !important;
  }

  #codex-content.codex-list-page .codex-list-scroll-shell {
    height: 100% !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #codex-content.codex-list-page .codex-list-scroll-shell.codex-scroll-fade {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%) !important;
    mask-image: linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%) !important;
    -webkit-mask-size: 100% 100% !important;
    mask-size: 100% 100% !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
  }
}