/* /policies/ only — loaded from the page's own pageCss.
   Everything here is scoped by being on this page alone, so the plain
   .doclist rule below cannot reach the document lists on any other page. */

/* ── The search field ──────────────────────────────────────────
   Hidden until assets/js/policy-search.js removes the attribute, so a reader
   with no JavaScript is never shown a box that cannot search. The full list
   is underneath either way.

   The visible name is the section's own h2, set like every other heading on
   the page. The field keeps a label of its own all the same, visually hidden:
   a heading is not a label, and the input needs an accessible name. */
.polsearch[hidden] { display: none; }
.polsearch {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  max-width: 32rem;
  margin: 0 0 var(--sp-6);
}
.polsearch-input {
  min-height: 44px;
  padding: var(--sp-3) var(--sp-4);
  font: inherit;
  font-size: var(--step-0);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--ink-muted);
  border-radius: var(--radius);
}
.polsearch-input::placeholder { color: var(--ink-muted); }
.polsearch-input:focus-visible {
  outline: 2px solid var(--bms-blue-700);
  outline-offset: 2px;
  border-color: var(--bms-blue-700);
}
/* Reserves its line whether or not it has anything to say, so the lists below
   do not jump up and down as the count changes. */
.polsearch-status {
  min-height: 1.6em;
  margin: 0 0 var(--sp-3);
  font-size: var(--step--1);
  color: var(--ink-muted);
}

/* The exam-policies note carries its own spacing rather than inheriting the
   page's section rhythm. It used to sit in a .prose block, which overflowed
   its section by 26px and made the gap below it a sum of three things none of
   which said 26. Sean asked for half the space above and below; setting both
   here is the only way that number means anything. */
.polsearch-note {
  margin: 0;
  max-width: var(--measure);
}
/* Was --sp-16 from the page's own section spacing. */
.page-section:has(.polsearch) + .page-section { margin-top: var(--sp-8); }

/* ── Two columns ───────────────────────────────────────────────
   Forty-six documents in one column made a very long page. Grid rather than
   CSS columns: filtering removes items from the middle of the list, and a
   column-balanced layout reflows the survivors into a different shape on
   every keystroke. A grid keeps each row where it is and simply closes up. */
@media (min-width: 700px) {
  .doclist {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--sp-8);
  }
  /* The list's own rule runs across both columns; each item keeps the rule
     under it, so the two columns read as two ruled lists rather than a table
     with a gap down the middle. */
  .doclist-item { border-bottom: 1px solid var(--hairline); }
}