/* 49-codex-filters.css — v42.55

   The filter consolidation the canvas drew is already in this build: the funnel
   beside the search field opens CodexFacets. What is left from that board is
   the rail on a wide screen — it was still a horizontal scroller at 1280px,
   where all nine types fit on two lines with room to spare. */

@media (min-width: 720px) {
  .codex-type-chips {
    flex-wrap: wrap;
    overflow-x: visible;
    -webkit-mask-image: none;
    mask-image: none;
    row-gap: 0;
  }
}

/* v42.56 — the condensed header, past the first screenful. */
#screen-codex.codex-condensed .codex-global-search {
  padding-top: 2px;
  padding-bottom: 2px;
}
#screen-codex.codex-condensed .codex-global-search input {
  min-height: 34px;
  font-size: var(--t0);
}
#screen-codex.codex-condensed .codex-global-search .rail-icon-btn {
  min-height: 34px; height: 34px; width: 34px;
}
#screen-codex.codex-condensed #codexCategoryRail { top: 44px; }
#screen-codex.codex-condensed .codex-type-chips .fchip { min-height: 38px; padding-bottom: 7px; }
/* v44.5: the icons stay when condensed — Alex found the rail harder to read without them. */
@media (prefers-reduced-motion: no-preference) {
  #screen-codex .codex-global-search input,
  #screen-codex .codex-type-chips .fchip { transition: min-height .16s ease, padding .16s ease; }
}

/* ---------- v42.59: the filter sheet (design/codex-tabs/Filters.html) ---------- */
#modal.codex-filter-sheet .modal-head { grid-template-columns: 0 minmax(0, 1fr) auto auto; gap: 8px; }
#modal.codex-filter-sheet .modal-head h2 { text-align: left; font-size: var(--t2, 18px); }
#modal.codex-filter-sheet .modal-head .cf-clear {
  min-height: 44px; padding: 0 6px; background: none; border: 0; border-radius: 6px; box-shadow: none; color: var(--ink-soft);
  font: inherit; font-size: var(--t0); cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px;
}
.cf-sheet { display: flex; flex-direction: column; gap: 14px; padding-top: 4px; }
.cf-group { margin: 0; padding: 0; border: 0; min-width: 0; }
.cf-group > legend, .cf-group > label {
  display: block; margin: 0 0 7px; padding: 0; font-size: var(--t0); font-weight: var(--fw-body); color: var(--ink-soft);
}
.cf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cf-chip {
  min-height: 36px; padding: 0 13px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid rgba(120, 92, 43, .38); background: #ece0bd; color: var(--ink);
  font: inherit; font-size: var(--t0); font-weight: var(--fw-body); cursor: pointer;
}
.cf-chip .cf-count { font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.cf-chip.active { background: var(--brass); border-color: transparent; color: #1b1105; font-weight: var(--fw-emph); }
.cf-chip.active .cf-count { color: #1b1105; }
.cf-chip:focus-visible, .cf-clear:focus-visible { outline: 2px solid var(--lagoon-deep); outline-offset: 2px; }
.cf-group select { width: 100%; min-height: 44px; border-radius: 11px; font-size: 16px; }
.cf-empty { margin: 0; color: var(--ink-soft); }
#modal.codex-filter-sheet .cf-actions { display: block; margin-top: 4px; }
#modal.codex-filter-sheet .cf-show { width: 100%; min-height: 48px; }
/* A bottom sheet on a phone, as drawn; the app's other dialogs hang from the top.
   styles.css (@layer legacy) forces flex-start with !important on phones, and an
   important rule in a layer beats any unlayered one — so, like 31-codex-editor,
   this goes in the earlier editor-pilot layer, which wins for important rules. */
@layer editor-pilot {
  @media (max-width: 699px) {
    .modal-backdrop.active:has(> #modal.codex-filter-sheet) { align-items: flex-end !important; padding: 0 !important; }
    #modal.codex-filter-sheet { width: 100% !important; max-width: none !important; }
  }
}
@media (max-width: 699px) {
  #modal.codex-filter-sheet { border-radius: 18px 18px 0 0; margin-bottom: 0; padding-bottom: env(safe-area-inset-bottom); }
}