/* 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. */

  /* ── POV IS ONE COLOUR, ON PURPOSE (Shawn, 2026-09-30) ──────────────────────
     Category and tag pills get a colour PER TERM, derived by AccidTermColor —
     which is why they are not colours anyone picked. POV does not, and that is
     the ruling rather than an omission: a POV is a LENS, not a kind of thing, so
     the whole axis reads as one identity.

     ⚠ AccidTermColor COULD NOT HAVE ANSWERED ANYWAY. Its _norm() is two-way —
     `tag`, or `category` for everything else (accid-term-color.js:88) — with
     only TAG_PALETTE and CAT_PALETTE behind it. Asking it for a POV colour
     returns a CATEGORY colour silently, so cat-alpha and pov-up could come out
     identical. That is presumably why the value below started as a literal.

     ⚠ IT WAS #764ba2 IN FOUR PLACES in accid-filter.js — the stock gradient
     purple, hand-written into inline styles at :87, :218, :284 (twice) and :563.
     Stated once, here. The POV LIST is already centralised for exactly this
     reason (AccidPovTerm.termCounts, SPI-588 — "One POV list, not two"); the
     colour was the half that never followed.

     ⚠ NOT EVERY #764ba2 WAS A POV. :483 is the Similarity-Tiebreaker button's
     `linear-gradient(90deg,#667eea,#764ba2)` — the stock purple PAIR, a
     different job that happens to share a hex. A blind replace took it too and
     it was put back. One hex, two meanings, which is the whole argument for
     naming it.

     --c5-r45 rather than the old hex: r45 is the 4.5:1 step, the promise a
     pill's TEXT needs against the page in both modes. The literal made none.
     Picked by ROLE, not by matching the old RGB.

     ⚠ THIS IS THE SEAM FOR "USERS PICK IT" (Shawn: "REALLY users should pick the
     color — maybe for all of them but for POV for sure — but that can wait").
     When that lands it sets --afb-pov and nothing else changes. */
  :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; }

.afb-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  margin: 2px;
  border-radius: 14px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid var(--neutral-r20);
  background: var(--page-surface);
  transition: all .15s;
  font-family: inherit;
}
.afb-pill:hover { opacity: .8; }
.afb-pill.selected { 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-active-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  background: var(--neutral-r12);
  border: 1.5px solid var(--neutral-r20);
}
/* ── SECONDARY INK IS A STEP, NOT A GREY (Shawn, 2026-09-30: "nothing should be
   a literal", "let the code decide the colour") ──────────────────────────────
   The six greys below were #999 / #888 for resting and #333 for hover — three
   hand-picked values for what is really two roles:

     resting   quieter than the label but still legible   --neutral-r45  (4.5:1)
     hover     the strongest ink on the page               --neutral-r70  (7:1)

   Ratio-named, so both hold in light AND dark. The literals could not, and the
   measurement is worse than it looks — HOVER was the broken one:

                  on white       on #151a1f
       #888        3.54:1          4.94:1     resting
       #333       12.63:1          1.39:1     hover

   In dark mode the hover state is 1.39:1 — effectively invisible — while the
   RESTING state it replaces is 4.94:1. Pointing at the control made it harder
   to read, not easier. (My first draft of this note guessed #888 was the dark
   failure; it is the one value here that happens to do BETTER in dark. The
   numbers above are measured, and they are why the note was rewritten.)

   Nobody would find this by looking: a hover state only exists while the
   pointer is on it, so the one moment it is wrong is the one moment you are
   not reading the rest of the page. */
.afb-active-pill button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  color: var(--neutral-r45);
  padding: 0 0 0 2px;
}
.afb-active-pill button:hover { color: var(--neutral-r70); }

#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;
}