/* ============================================================
   The reference layer's kit — the five parts every page shares.

   Approved from the "A Way In" canvas, board 7: one filter bar, one
   row spark, one brush, one reveal row, and the rules they obey.
   Built once here so the people index, the places index, When, the
   dictionary and the book pages all behave the same way.

   Three rules hold across all of it:
     · every row stays in the HTML — a filtered row is dimmed and
       skipped, never removed from the document;
     · filtering never mints a URL — the state lives in the page;
     · with no JavaScript the page is still complete, and every
       control that needs script is hidden until `html.js` is set.

   Tokens are reference.css's own (:root there).
   ============================================================ */

/* ---- 1 · the filter bar ---- */
.fbar{display:none}
.js .fbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:10px 12px;border-radius:14px;margin:14px 0 6px;
  border:1px solid rgba(232,184,115,.26);background:rgba(11,16,36,.8)}
.js .fbar.stick{position:sticky;top:54px;z-index:12;backdrop-filter:blur(8px)}
.fField{display:flex;align-items:center;gap:8px;flex:1 1 200px;max-width:270px;min-height:36px;
  border-radius:10px;border:1px solid rgba(142,153,194,.32);background:rgba(13,18,40,.75);padding:0 11px}
.fField input{flex:1;min-width:0;background:none;border:0;outline:none;color:var(--starlight);
  font:400 13px var(--font-body)}
.fField input::placeholder{color:rgba(142,153,194,.75)}
.fField svg{flex:none;color:var(--faint)}
.fSep{width:1px;height:22px;background:rgba(142,153,194,.22);flex:none}
.fCount{margin-left:auto;font-size:11.5px;color:var(--faint);white-space:nowrap;padding-left:6px}
.fCount b{color:var(--starlight);font-weight:600}
.fLbl{font:600 9.5px var(--font-body);letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}

/* the facet chip — a pill that carries a count and a pressed state */
.facet{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 11px;border-radius:999px;
  border:1px solid rgba(142,153,194,.3);background:none;color:#B4BDDD;
  font:400 11.5px var(--font-body);cursor:pointer;white-space:nowrap;
  transition:border-color .15s,color .15s,background .15s}
.facet:hover{border-color:var(--hairline);color:var(--starlight)}
.facet:focus-visible{outline:1px solid var(--gold);outline-offset:2px}
.facet .n{color:var(--faint);font-size:10.5px;font-variant-numeric:tabular-nums}
.facet[aria-pressed="true"]{background:rgba(232,184,115,.16);border-color:var(--gold);
  color:#F5D9A8;font-weight:600}
.facet[aria-pressed="true"] .n{color:var(--gold)}
.facet .dot{width:9px;height:9px;border-radius:2px;flex:none}
.facet.empty{opacity:.4;cursor:default}

/* ---- 2 · the row spark ---- */
.rspark{flex:none;display:inline-block;line-height:0}
.rspark rect.bg{fill:rgba(142,153,194,.18)}
.rspark rect.fg{fill:rgba(232,184,115,.75)}

/* ---- 3 · the brush ---- */
.brush{position:relative;user-select:none;touch-action:none}
.brush svg{display:block;width:100%;height:auto}
.brushSel{fill:rgba(232,184,115,.14);stroke:var(--gold);stroke-opacity:.9;stroke-width:1.6;
  pointer-events:none}
.brushGrip{fill:var(--gold);fill-opacity:.85;cursor:ew-resize}
.brushRead{font-size:11.5px;color:var(--faint);white-space:nowrap}
.brushRead b{color:var(--starlight);font-weight:600}

/* ---- 4 · the reveal row ---- */
.revealRow{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
/* styles.css already owns `.reveal` for the home page's scroll-in effect
   (opacity:0 until script adds `.in`), and the reference pages do not load
   that script — so this rule has to hand the button its visibility back. */
.reveal{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:0 13px;border-radius:999px;
  border:1px solid rgba(232,184,115,.4);background:rgba(232,184,115,.07);color:var(--gold);
  font:500 12px var(--font-body);cursor:pointer;text-decoration:none;
  opacity:1;transform:none;transition:border-color .15s,background .15s,color .15s}
.reveal:hover{border-color:var(--gold);background:rgba(232,184,115,.14);text-decoration:none}
.reveal.quiet{border-color:rgba(142,153,194,.3);background:none;color:#B4BDDD}
.reveal.quiet:hover{border-color:var(--hairline);color:var(--gold)}
.reveal[aria-busy="true"]{opacity:.6;cursor:progress}

/* ---- 5 · what a filter does to a row ---- */
.filtered{display:none}
.js .showDimmed .filtered{display:flex;opacity:.24}
.noHits{display:none;padding:26px 4px;color:var(--faint);font-size:13.5px;line-height:1.6}
.noHits.on{display:block}
.noHits b{color:var(--starlight);font-weight:500}

/* a run of rows the filter works over */
.fList{display:flex;flex-direction:column}

@media(max-width:900px){
  .js .fbar.stick{position:static}
  .fField{max-width:none}
  .fCount{margin-left:0;flex-basis:100%}
}
@media(prefers-reduced-motion:reduce){
  .facet{transition:none}
}

/* the attribute must win over the kit's own display rules */
.facet[hidden],.fbar [hidden]{display:none !important}