/* ===========================================================================
   Footnotes to Plato — shared filter bar styles
   Uses the tokens already defined by each view's :root (--paper, --ink,
   --ink-soft, --rule, --lav, --lav-deep, --mono, --serif, --sans, --shadow).
   Saturated colour stays reserved for data; the bar is structural blue-grey.
   ======================================================================== */

.filterbar{
  background:#fff; border:1px solid var(--rule); border-radius:10px;
  box-shadow:var(--shadow); padding:14px 18px 16px; margin:18px 0 6px;
}

.fb-head{display:flex; align-items:baseline; gap:12px; margin-bottom:12px}
.fb-title{
  font-family:var(--mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--lav-deep);
}
.fb-summary{font-size:12.5px; color:var(--ink-soft); flex:1}
.fb-summary.on{color:var(--lav-deep); font-weight:500}
.fb-reset{
  font-family:var(--sans); font-size:12px; color:var(--ink-soft);
  background:none; border:1px solid var(--rule); border-radius:6px;
  padding:3px 10px; cursor:pointer;
}
.fb-reset:hover{border-color:var(--lav); color:var(--lav-deep)}

.fb-body{display:grid; grid-template-columns:1.25fr 1fr; gap:26px}
@media (max-width:820px){ .fb-body{grid-template-columns:1fr; gap:20px} }

.fb-label{
  font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-soft);
  display:flex; align-items:center; gap:8px; margin-bottom:8px;
}
.fb-mini button{
  font-family:var(--mono); font-size:10px; letter-spacing:.08em;
  background:none; border:0; color:var(--lav-deep); cursor:pointer;
  padding:0 1px; text-transform:lowercase;
}
.fb-mini button:hover{text-decoration:underline}
.fb-range{
  margin-left:auto; font-family:var(--mono); font-size:11px;
  color:var(--lav-deep); letter-spacing:.04em; text-transform:none;
}

/* ---- journal checkboxes, grouped by field -------------------------------- */
.fb-groups{display:grid; grid-template-columns:1fr 1fr; gap:0 18px}
@media (max-width:560px){ .fb-groups{grid-template-columns:1fr; gap:14px} }

.fb-group{min-width:0}
.fb-ghead{
  display:flex; align-items:baseline; gap:7px; padding:0 4px 5px;
  border-bottom:1px solid var(--rule); margin-bottom:5px;
}
.fb-gname{
  font-family:var(--serif); font-size:13px; font-weight:600; color:var(--ink);
}
.fb-gtot{
  font-family:var(--mono); font-size:10px; color:var(--ink-soft); opacity:.8;
}
.fb-gsel{margin-left:auto}
.fb-group.off .fb-gname{color:var(--ink-soft); opacity:.55}
.fb-group.partial .fb-gname{color:var(--lav-deep)}
.fb-glist{display:flex; flex-direction:column; gap:1px}

.fb-j{
  display:flex; align-items:center; gap:7px; cursor:pointer;
  padding:2px 4px; border-radius:5px; font-size:12.5px; min-width:0;
}
.fb-j:hover{background:#f4f6fc}
.fb-j input{accent-color:var(--lav-deep); margin:0; cursor:pointer; flex:none}
.fb-jn{
  flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  color:var(--ink);
}
.fb-j input:not(:checked) ~ .fb-jn{color:var(--ink-soft); opacity:.6}
.fb-jc{
  font-family:var(--mono); font-size:10.5px; color:var(--ink-soft);
  flex:none; opacity:.75;
}
/* what the numbers actually mean — asked for explicitly, easy to misread as
   "citations of the work currently shown" */
.fb-cnote{
  font-size:11px; color:var(--ink-soft); line-height:1.45; opacity:.85;
  margin-top:9px; padding-top:7px; border-top:1px solid var(--rule);
}
.fb-cnote em{font-style:italic}

/* ---- year slider + sparkline -------------------------------------------- */
.fb-slider{position:relative; height:52px; margin-top:2px}

.fb-spark{
  position:absolute; inset:0 0 14px 0; overflow:hidden;
  border-bottom:1px solid var(--rule);
  --fb-l:0%; --fb-r:100%;
}
.fb-sparksvg{width:100%; height:100%; display:block}
.fb-sparkarea{fill:#dfe4f5}
/* the excluded years are dimmed by two overlays sitting outside the selection */
.fb-spark::before, .fb-spark::after{
  content:""; position:absolute; top:0; bottom:0;
  background:rgba(247,248,251,.72); pointer-events:none;
}
.fb-spark::before{left:0; width:var(--fb-l)}
.fb-spark::after{left:var(--fb-r); right:0}

.fb-track{
  position:absolute; left:0; right:0; bottom:10px; height:3px;
  background:var(--rule); border-radius:2px;
}
.fb-sel{
  position:absolute; top:0; height:3px; background:var(--lav-deep);
  border-radius:2px;
}

/* two overlaid range inputs; only the thumbs are interactive */
.fb-slider input[type=range]{
  position:absolute; left:0; right:0; bottom:0; width:100%; height:22px;
  margin:0; background:none; -webkit-appearance:none; appearance:none;
  pointer-events:none;
}
.fb-slider input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; pointer-events:auto; cursor:grab;
  width:15px; height:15px; border-radius:50%;
  background:#fff; border:2px solid var(--lav-deep);
  box-shadow:0 1px 3px rgba(28,34,48,.25);
}
.fb-slider input[type=range]::-webkit-slider-thumb:active{cursor:grabbing}
.fb-slider input[type=range]::-moz-range-thumb{
  pointer-events:auto; cursor:grab;
  width:15px; height:15px; border-radius:50%;
  background:#fff; border:2px solid var(--lav-deep);
  box-shadow:0 1px 3px rgba(28,34,48,.25);
}
.fb-slider input[type=range]::-moz-range-track{background:none; border:0}

.fb-ticks{
  display:flex; justify-content:space-between; margin-top:2px;
  font-family:var(--mono); font-size:9.5px; color:var(--ink-soft); opacity:.7;
}

/* ---- host-view affordances ---------------------------------------------- */
/* shown by a view when a filter is active but the view can't honour it */
.fb-note{
  font-size:12.5px; color:var(--uncertain); background:#faf1ea;
  border:1px solid var(--uncertain-soft); border-radius:8px;
  padding:9px 13px; margin:10px 0 0; line-height:1.45;
}
.fb-empty{
  font-size:13.5px; color:var(--ink-soft); text-align:center;
  padding:40px 20px; font-family:var(--serif); font-style:italic;
}