/* The collapsible filter rail: carets, section heads, the collapsed layout and the Clear control. */
/* Collapsible rail: master + per-section carets, rotation = open. Base chrome from .bf-*. UNSCOPED shared components. */
.nl-caret,
.app-nav-caret {
  flex: 0 0 auto; font-size: 0.82rem; line-height: 1; color: var(--ink-3);
  transition: transform 0.15s ease, color 0.15s ease;
}
.nl-filters-head {
  justify-content: space-between; gap: 8px;
  width: 100%; padding: 0; background: none; border: 0; cursor: pointer; font: inherit; text-align: left;
}
.nl-filters-rail:not(.nl-rail-collapsed) > .nl-filters-head .nl-master-caret {
  transform: rotate(90deg); color: var(--bronze-2);
}
.nl-filters-rail.nl-rail-collapsed > .bf-filters-body { display: none; }

/* The panel-head filters toggle (FilterRail.headToggle) is hidden until its layout collapses
   the rail. */
.nl-head-filters { display: none; }
/* A collapsed rail leaves the grid entirely — its toggle moves to the panel head, left of the
   tools — so the column goes with it and the list takes the full width. At EVERY width: on a
   phone the rail's own row cost a whole band above the table for one word. A layout opts in by
   carrying `data-rail-layout` plus FilterRail.layoutClass(id); one dispatcher flips the class,
   since a grid ITEM cannot restyle its own grid. (0,3,0) out-ranks the ≤768 `display: flex`
   above. */
[data-rail-layout].is-rail-collapsed {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "toolbar" "main";
}
[data-rail-layout].is-rail-collapsed .nl-filters-rail { display: none; }
[data-rail-layout].is-rail-collapsed .nl-head-filters.is-collapsed { display: inline-flex; }
.nl-fsec-head {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 0;
  background: none; border: 0; cursor: pointer; font: inherit;
  font-size: 0.66rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600;
}
.nl-fsec-head:hover .nl-fsec-lbl { color: var(--ink); }
.nl-fsec-extra { margin-left: auto; text-transform: none; letter-spacing: 0; }
.nl-date-val { color: var(--bronze-2); font-variant-numeric: tabular-nums; }
.nl-fsec:not(.is-collapsed) .nl-fsec-head .nl-caret { transform: rotate(90deg); color: var(--bronze-2); }
.nl-fsec.is-collapsed .nl-fsec-body { display: none; }

/* The rail's Clear control is a text button, not a .btn pill; .btn.nl-clear out-ranks the button skin. */
.btn.nl-clear {
  all: unset;
  cursor: pointer;
  font-size: 0.74rem;
  color: var(--ink-3);
  padding: 4px 2px;
}
.btn.nl-clear:hover { color: var(--porphyry-2); }
.btn.nl-clear:focus-visible { outline: 2px solid var(--bronze-2); outline-offset: 2px; }