/* LAYER: modules — the top-level `@layer modules { … }` block below. This file
   is loaded as a plain <link>, so that block is top-level and really is that layer.
   Position 5 of 19 in accid-shared/accid-layers-order.css, which is the
   only file that states the order. Later layers win. This note is here because a
   sheet's NAME says what is in it, not where it sorts — site.css holds the Site
   column's values and sits in `defaults` so project_styles.css can override it,
   and reading the name instead of the layer has cost a day before now. */

/* ⚠ @layer modules DECLARED IN THE FILE (2026-09-26), because a <link> carries
   none and this ships as one — the same reason view-nav.css and accid-chrome.css
   declare their own. It was unlayered, which put search's filter bar above every
   rung a user can set. Ruled down to `modules` with view-nav.css and
   responsive.css: nothing here is a rung, so nothing here should outrank one.

   ⚠ THE REASON IS THE SWITCHOVER, not tidiness. User values used to be INLINE,
   so they beat an unlayered floor no matter where the floor sat. After the
   switchover they are `@layer module` rules — an unlayered sheet would then
   outrank a user's own setting. The floor moves to layer(modules) to stay
   BENEATH them. Cost, stated: this sheet now loses to layer(project) and to the
   site/page rung sheets, where before it beat every layered sheet. */

  /* ── THE POV BUTTON'S COLOUR ─────────────────────────────────────────────
     The "POV" trigger that opens the POV panel. Not a term colour: each POV
     pill inside the panel takes its own var(--term) from terms.css, like a
     category or a tag (Shawn, 2026-10-14). */
  :root {
    --afb-pov: var(--c5-r45);
  }

/* ── ACCID Shared Filter Bar ── shared/accid-filter.css ── */

#accid-filter-bar {
  max-width: 1100px;
  margin: 0 auto 16px;
  padding: 8px 16px;
  background: var(--page-surface);
  border-radius: 10px;
  box-shadow: 0 2px 8px color-mix(in oklab, var(--neutral-r70) 8%, transparent);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  position: relative;
  z-index: 100;
}

#accid-filter-bar input[type=text] {
  flex: 1;          /* fills the row: [ search ][Category][Tag] on one line */
  min-width: 160px;
  padding: 6px 12px;
  border: 1.5px solid var(--neutral-r20);
  border-radius: 20px;
  font-size: 13px;
  outline: none;
  font-family: inherit;
}
/* Focus takes c4, NOT c5 — c5 is POV's axis colour and a focus ring that
   matches one filter's identity reads as that filter being active. */
#accid-filter-bar input[type=text]:focus { border-color: var(--c4-r45); }

.afb-dropdown { position: relative; }

/* ⚠ THIS RULE WAS WHITE ON WHITE IN DARK MODE (measured 2026-09-30, live).
   `background:#fff` was a literal and `color` was never set, so the ground was
   pinned light while the text inherited and flipped:

       cat / tag trigger, dark   color rgb(255,255,255)  on  bg rgb(255,255,255)

   That is the "hard to read" Shawn reported, and it is the same shape as the
   nav and canvas faults earlier in this ticket: one half of a pair hard-coded,
   the other half free to follow the OS. A literal background is only safe if
   the text is a literal too, and then neither can ever theme.

   EVERY VALUE HERE IS NOW A RATIO-NAMED STEP, so the promise travels to both
   modes by construction (Shawn: "nothing should be a literal"):

     --page-surface   what the page actually paints — the control sits ON it
     --neutral-r70    7:1, AAA. A control LABEL should be crisp, not merely legible
     --neutral-r20    2:1, the ruled meaning of "subtle border"

   ⚠ THE ACTIVE STATE IS A STATE, NOT A BORROWED IDENTITY. It was #667eea, whose
   nearest tokens are --c5-r45 and --c5-r30 — the c5 family, which POV now owns.
   Painting Category and Tag with it would make all three triggers identical
   again, which is the thing #afb-pov-btn below exists to end. So active is the
   INVERSE of resting: ink becomes ground. That is guaranteed 7:1 in both modes
   for free, claims no hue, and leaves POV the only axis wearing a colour —
   which is the model. */
.afb-trigger {
  padding: 5px 14px;
  border: 1.5px solid var(--neutral-r20);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  background: var(--page-surface);
  color: var(--neutral-r70);
  white-space: nowrap;
  font-family: inherit;
}
.afb-trigger.has-active {
  background: var(--neutral-r70);
  color: var(--page-surface);
  border-color: var(--neutral-r70);
}

/* ── THE POV CONTROL WEARS THE POV COLOUR (Shawn, 2026-09-30) ────────────────
   "that is not on the search control — it should be though."

   The pills inside the panel took --afb-pov and the BUTTON that opens it did
   not, so the axis was identified everywhere except the one control you press.
   All three triggers were byte-identical: grey border, white ground, and the
   same #667eea when active — so an active POV filter looked exactly like an
   active Category filter.

   ⚠ ONLY POV GETS THIS, AND THAT IS THE POINT. Category and tag colour PER
   TERM (AccidTermColor), so neither axis HAS a single colour to put on its
   button — painting them one would be inventing an identity the panel then
   contradicts fifteen pills later. POV has one because it is a lens. The
   asymmetry in this file is the model, not an oversight.

   ⚠ BLACK ON THE ACTIVE STATE, MEASURED, NOT WHITE. --on-c5 is #000000 and the
   numbers say it is right: white on --c5-r45 is 4.50:1 in light and 3.90:1 in
   dark, which FAILS AA in dark. Black is 4.66:1 and 5.39:1 — passes in both.
   The instinct was white because that is what .has-active does above; the
   instinct was wrong and only the measurement said so.

   (#667eea and #dee2e6 above are gone too — see the note on .afb-trigger.) */
#afb-pov-btn { border-color: var(--afb-pov); color: var(--afb-pov); }
#afb-pov-btn.has-active {
  background: var(--afb-pov);
  border-color: var(--afb-pov);
  /* no fallback: the palette is the first sheet the page loads, and
     --afb-pov above relies on it the same way. */
  color: var(--on-c5);
}

.afb-panel {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 10001;
  background: var(--page-surface);
  border: 1px solid var(--neutral-r20);
  border-radius: 8px;
  box-shadow: 0 4px 16px color-mix(in oklab, var(--neutral-r70) 12%, transparent);
  padding: 8px;
  min-width: 40vw;
  max-height: 280px;
  overflow-y: auto;
}
.afb-panel.open { display: block; }

/* The bar's pills are the one display pill (accid-pill.css); the bar keeps
   only its spacing and its toggle: a selected pill is filled with its term's
   colour. */
.afb-pill { margin: 2px; }
.afb-pill.selected { background: var(--term); color: var(--page-surface); }

#afb-active-row {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  font-size: 12px;
}
#afb-active-row:empty { display: none; }


#afb-count {
  font-size: 12px;
  color: var(--neutral-r45);
  flex-basis: 100%;   /* drop to its own line so its auto-margin doesn't starve the search box */
  text-align: right;
  white-space: nowrap;
}

.afb-clear-all {
  font-size: 11px;
  color: var(--neutral-r45);
  cursor: pointer;
  text-decoration: underline;
}
.afb-clear-all:hover { color: var(--neutral-r70); }

/* ── Sort Bar ── */
#accid-sort-bar {
  max-width: 1100px;
  margin: 0 auto 10px;
  padding: 4px 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
#accid-sort-bar button {
  font-family: inherit;
  transition: all .15s;
}
#accid-sort-bar button:hover {
  opacity: .8;
}