/* ============================================================================
   filter.css — shared styling for the rich listing filter component
   (DATE popover, searchable CATEGORY dropdown, TAGS typeahead + pills, SORT/
   METHODOLOGY selects).

   Sprint 4 Session 2 (#49) extraction. This is the project's first shared
   static stylesheet. Previously this CSS lived inline and duplicated in
   news.html and research.html, page-class-prefixed (.news-page / .research-page).

   Scope + theming model (Sprint 4 PM decision — "canonical variables + per-page
   mapping"):
     - Every rule is scoped under `.filters-rich`, a marker class carried ONLY by
       the rich-filter pages (news, research). This deliberately does NOT bleed
       into /conditions, whose simpler filter (macros/listing.html) reuses the
       same `.filter-bar` / `.filter-select` class names with its own global CSS.
       `.filters-rich .filter-bar` (0,2,0) matches the prior `.news-page
       .filter-bar` specificity exactly, so the extraction is specificity-neutral.
     - Neutral palette (border / text / hover) is identical across consumers and
       is defined here as defaults on `.filters-rich`.
     - The ACCENT (selected/active surface) is the only per-page difference, so it
       is themed via two canonical vars the page maps to its own palette:
         .news-page     { --filter-accent-bg: <sage>;     --filter-accent-text: <sage-text>; }
         .research-page { --filter-accent-bg: <research>; --filter-accent-text: <research-text>; }
       A new consumer opts in by adding `filters-rich` to its wrapper and mapping
       the two accent vars — no edit to this file required (sister-site friendly).
============================================================================ */

.filters-rich {
  /* Neutral palette — identical across consumers (was --np-* / --rp-*). */
  --filter-border:        #D6D0C4;
  --filter-border-strong: #B5A98A;
  --filter-text-primary:  #3a3a3a;
  --filter-text-secondary:#9a9a8a;
  --filter-hover-outline: #6B7B8D;
  --filter-hover-bg:      #EEE9DF;
  /* Accent fallback (news/sage) — pages override per palette; this keeps a
     consumer that forgets to map the accent from rendering unstyled. */
  --filter-accent-bg:   #E8EDD8;
  --filter-accent-text: #4A5A2A;
}

/* ── Filter bar — labels ABOVE uppercase (search-results pattern) ──── */
.filters-rich .filter-bar {
  display: flex; align-items: flex-start; gap: 18px;
  margin-bottom: 14px; flex-wrap: wrap;
}
.filters-rich .fcell { display: flex; flex-direction: column; gap: 4px; }
.filters-rich .fcell-sort { margin-left: auto; }
.filters-rich .fcell-tags { min-width: 220px; }
.filters-rich .flabel {
  font-size: 10px; color: var(--filter-text-secondary);
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500;
}

/* Sort dropdown */
.filters-rich .filter-select {
  font-size: 12px; border: 1px solid var(--filter-border); border-radius: 8px;
  padding: 5px 28px 5px 10px; background: #fff;
  color: var(--filter-text-primary); cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%239a9a8a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; outline: none;
  min-width: 130px; height: 28px; font-family: inherit;
}
.filters-rich .filter-select:focus { border-color: var(--filter-hover-outline); }

/* Date / Category button + popover */
.filters-rich .fbtn-wrap { position: relative; display: inline-block; }
.filters-rich .fbtn {
  font-size: 12px; border: 1px solid var(--filter-border); border-radius: 8px;
  padding: 5px 28px 5px 10px; background: #fff;
  color: var(--filter-text-primary); cursor: pointer; outline: none; text-align: left;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%239a9a8a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center;
  min-width: 130px; height: 28px; font-family: inherit; display: inline-block;
}
.filters-rich .fbtn:hover { border-color: var(--filter-hover-outline); }
.filters-rich .fbtn.act  { border-color: var(--filter-border-strong); background: var(--filter-accent-bg); color: var(--filter-accent-text); font-weight: 500; }
.filters-rich .pop {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 50;
  background: #fff; border: 1px solid var(--filter-border); border-radius: 9px;
  padding: 6px; display: none; box-shadow: 0 4px 12px rgba(0,0,0,0.06); min-width: 180px;
}
.filters-rich .pop.show { display: block; }
.filters-rich .dpr { padding: 6px 10px; font-size: 12px; color: var(--filter-text-primary); cursor: pointer; border-radius: 5px; }
.filters-rich .dpr:hover { background: var(--filter-hover-bg); }
.filters-rich .dpr.sel { background: var(--filter-accent-bg); color: var(--filter-accent-text); font-weight: 500; }
.filters-rich .ddiv { height: 1px; background: var(--filter-border); margin: 5px 4px; }
.filters-rich .dcust { display: none; flex-direction: column; gap: 6px; margin-top: 6px; padding: 4px 6px; }
.filters-rich .dcust.show { display: flex; }
.filters-rich .dinrow { display: flex; align-items: center; gap: 6px; }
.filters-rich .din { font-size: 12px; border: 1px solid var(--filter-border); border-radius: 6px; padding: 4px 8px; width: 84px; outline: none; color: var(--filter-text-primary); font-family: inherit; }
.filters-rich .din:focus { border-color: var(--filter-hover-outline); }
.filters-rich .dsep { font-size: 11px; color: var(--filter-text-secondary); }
.filters-rich .darow { display: flex; justify-content: flex-end; margin-top: 4px; }
.filters-rich .dapply { background: var(--filter-accent-text); color: #fff; border: none; border-radius: 6px; padding: 5px 12px; font-size: 11px; cursor: pointer; font-family: inherit; }

/* Searchable category dropdown */
.filters-rich .cpop {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 50;
  background: #fff; border: 1px solid var(--filter-border); border-radius: 9px; padding: 6px;
  display: none; box-shadow: 0 4px 12px rgba(0,0,0,0.06); min-width: 200px;
  flex-direction: column; max-height: 320px;
}
.filters-rich .cpop.show { display: flex; }
.filters-rich .cpsearch { font-size: 12px; border: 1px solid var(--filter-border); border-radius: 6px; padding: 5px 10px; outline: none; color: var(--filter-text-primary); margin-bottom: 4px; font-family: inherit; }
.filters-rich .cpsearch:focus { border-color: var(--filter-hover-outline); }
.filters-rich .cplist { overflow-y: auto; flex: 1; max-height: 240px; }
.filters-rich .copt { padding: 6px 10px; font-size: 12px; color: var(--filter-text-primary); cursor: pointer; border-radius: 5px; }
.filters-rich .copt:hover { background: var(--filter-hover-bg); }
.filters-rich .copt.sel { background: var(--filter-accent-bg); color: var(--filter-accent-text); font-weight: 500; }
.filters-rich .copt.empty { color: var(--filter-text-secondary); font-style: italic; cursor: default; }
.filters-rich .copt.empty:hover { background: transparent; }

/* Tags typeahead with grouped results and removable pills */
.filters-rich .tags-wrap { position: relative; }
.filters-rich .tags-input {
  font-size: 12px; border: 1px solid var(--filter-border); border-radius: 8px;
  padding: 5px 10px; width: 200px; outline: none; color: var(--filter-text-primary);
  font-family: inherit; height: 28px;
}
.filters-rich .tags-input:focus { border-color: var(--filter-hover-outline); }
.filters-rich .tags-dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 50;
  background: #fff; border: 1px solid var(--filter-border); border-radius: 9px;
  padding: 4px; display: none; box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  min-width: 220px; max-height: 280px; overflow-y: auto;
}
.filters-rich .tags-dropdown.show { display: block; }
.filters-rich .tags-group-label {
  font-size: 9px; color: var(--filter-text-secondary);
  text-transform: uppercase; letter-spacing: 0.05em;
  padding: 6px 10px 3px; font-weight: 500;
}
.filters-rich .tags-option { padding: 5px 10px; font-size: 12px; color: var(--filter-text-primary); cursor: pointer; border-radius: 5px; }
.filters-rich .tags-option:hover { background: var(--filter-accent-bg); color: var(--filter-accent-text); }
.filters-rich .tags-option.empty { color: var(--filter-text-secondary); font-style: italic; cursor: default; padding: 8px 10px; }
.filters-rich .tags-option.empty:hover { background: transparent; color: var(--filter-text-secondary); }
.filters-rich .tags-pills { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; max-width: 280px; }
.filters-rich .tag-pill {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--filter-accent-bg); color: var(--filter-accent-text);
  font-size: 11px; padding: 2px 4px 2px 8px; border-radius: 999px;
}
.filters-rich .tag-pill-x { cursor: pointer; opacity: 0.7; font-size: 12px; padding: 0 4px; }
.filters-rich .tag-pill-x:hover { opacity: 1; }