/* THE COMPANY FILTER ON /member/{bioguide_id}.

   WHY THIS FILE EXISTS AT ALL. member_history.html shipped on 09/08 with
   six class names and this note attached to them: "the class names below
   are hooks for a later CSS-only commit, and until then this renders as a
   legible row of links rather than as a broken component". The later
   commit never happened. `.ticker-pill` has had no declaration anywhere in
   the nine stylesheets since, so the filter has been a bare row of
   underlined anchors - correct markup, passing tests, and not the control
   anyone designed.

   That is worth naming because it is the mirror image of the failure
   APP_ASSET_V exists to prevent: there, a rule is edited and never
   reaches the browser; here, markup is written and no rule is ever
   authored. Both are green in CI and both are only visible by opening the
   page. tests/test_ticker_filter_style.py now checks that every class the
   template uses has a rule here.

   SAME ARRANGEMENT AS lifecycle.css, signal.css, row-click.css AND
   stacked-names.css: one file, one feature, linked last in base.html, so
   "take the filter back to plain links" is deleting this file and one
   line rather than excavating rules out of a 34 KB brand layer.

   NOTHING IS INVENTED HERE. The pill is .q-chip's geometry from
   quorum.css - mono, 0.62rem, 0.08em tracking, 2px radius, one hairline
   border - and its active state is the .q-chip-2 / .band-strong treatment
   the rest of the site already uses for "this one", gold on a translucent
   gold plate. A seventh visual register for a filter would be a decision
   nobody asked for.

   THE SPECIFICITY TRAP DOES NOT APPLY HERE, and it is worth saying so
   because it applies almost everywhere else. style.css declares
   `table.leaderboard a` at 0-1-2, which beats any single-class rule - it
   is how the anonymous CTA button ended up Bone on Bone. This <nav> sits
   OUTSIDE the table, so the one-class rules below bind. Do not copy this
   file's simplicity into anything that lives in a row.

   NO :hover-ONLY AFFORDANCE. The resting state already reads as a
   control: bordered, monospaced, spaced apart. A pill that only looks
   clickable under the pointer is not a control on a touch screen, which
   is where a table this wide is most likely to be read. */

.ticker-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem;
  margin: 0 0 1.1rem;
}

.ticker-filter-label {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: .2rem;
}

/* The resting pill. `a` and `strong` both carry the class - the active
   one is a <strong> because it is not a link to anywhere - so neither
   the element nor the default anchor colour may be relied on. */
.ticker-pill {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .06em;
  padding: .22rem .5rem;
  border: 1px solid var(--border);
  border-radius: 2px;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}

a.ticker-pill:hover,
a.ticker-pill:focus-visible {
  color: var(--gold);
  border-color: var(--gold-dim);
  background: rgba(212, 185, 90, .08);
}

/* THE CURRENT FILTER. Same treatment as .q-chip-2 and .band-strong:
   gold text on a translucent gold plate, never the solid gold fill -
   that is reserved for the strongest signal on the leaderboard and
   handing it to a filter chip would flatten the one distinction it
   makes. aria-current="true" is on the same element and is what actually
   conveys this to a screen reader; the colour is the sighted half of the
   same statement. */
.ticker-pill.is-active {
  color: var(--gold);
  border-color: var(--gold-dim);
  background: rgba(212, 185, 90, .08);
  font-weight: 600;
}

/* The per-company count. Dimmer than the symbol it follows: it is the
   reason to click, not the thing clicked. Modelled on `.trend-pill b`
   in style.css. */
.ticker-pill-count {
  font-size: .62rem;
  font-weight: 400;
  opacity: .7;
}

/* THE OTHER SHAPE OF THE SAME CONTROL. Above PILL_LIMIT companies the
   template renders a GET form instead of a row of links - see the note
   in member_history.html for the measured distribution behind that
   threshold. It gets the same register so the two shapes do not read as
   two different features. */
.ticker-filter-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
}

.ticker-filter-form label {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.ticker-filter-form input {
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .3rem .5rem;
  width: 9rem;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 2px;
}

.ticker-filter-form input:focus-visible {
  outline: none;
  border-color: var(--gold-dim);
}

.ticker-filter-form button {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .3rem .7rem;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 2px;
  cursor: pointer;
}

.ticker-filter-form button:hover,
.ticker-filter-form button:focus-visible {
  color: var(--gold);
  border-color: var(--gold-dim);
}

.ticker-filter-clear {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .06em;
  color: var(--muted);
}

/* The sentence explaining why this member got a search box and the last
   one got pills. It is an explanation, not a control, so it sits on its
   own line below and reads as one. */
.ticker-filter-note {
  flex-basis: 100%;
  margin: .1rem 0 0;
  font-size: .72rem;
  color: var(--muted);
}
