/* sl-resource-picker: A to Z picker (built by script), view toggle, letter heading, instructions */
.sl-resources-cards .sl-letter-picker.sl-az-ready > .view-content {
  display: none;
}
.sl-resources-cards .sl-res-help {
  margin: 1.25rem 0 0;
  padding: 1rem 1.25rem;
  background: #f6f8fa;
  border: 1px solid #d9dee4;
  border-left: 4px solid #1b1f24;
  border-radius: 8px;
  color: #374151;
  font-size: 1rem;
  line-height: 1.55;
}
.sl-resources-cards .sl-res-help__title {
  margin: 0 0 0.5rem;
  color: #1b1f24;
  font-size: 1.15rem;
  line-height: 1.3;
}
.sl-resources-cards .sl-res-help ul {
  margin: 0;
  padding-left: 1.25rem;
}
.sl-resources-cards .sl-res-help li {
  margin: 0.25rem 0;
}
.sl-resources-cards .sl-res-help__js {
  display: none;
}
.sl-resources-cards .sl-az-ready .sl-res-help__js {
  display: list-item;
}
.sl-resources-cards .sl-res-letter {
  margin: 1.25rem 0 0;
  font-size: 1.4rem;
  line-height: 1.3;
}
.sl-resources-cards .sl-az,
.sl-resources-cards .sl-vt {
  margin: 1rem 0 0;
}
.sl-resources-cards .sl-az__list,
.sl-resources-cards .sl-vt__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.sl-resources-cards .sl-az__list li,
.sl-resources-cards .sl-vt__list li {
  margin: 0;
  padding: 0;
}
.sl-resources-cards .sl-az__link,
.sl-resources-cards .sl-az__off,
.sl-resources-cards .sl-vt__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-width: 44px;
  min-height: 44px;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  box-sizing: border-box;
  font-size: 1rem;
  line-height: 1.2;
}
.sl-resources-cards .sl-az__link,
.sl-resources-cards .sl-vt__link {
  border: 2px solid #1b1f24;
  background: #fff;
  color: #1b1f24;
  font-weight: 700;
  text-decoration: none;
}
.sl-resources-cards .sl-az__link:hover,
.sl-resources-cards .sl-vt__link:hover {
  background: #eef1f4;
}
.sl-resources-cards .sl-az__link.is-current,
.sl-resources-cards .sl-vt__link.is-current {
  background: #1b1f24;
  color: #fff;
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
}
.sl-resources-cards .sl-az__n {
  font-size: 0.8rem;
  font-weight: 400;
}
.sl-resources-cards .sl-az__off {
  border: 2px dashed #cbd2d9;
  background: #f6f8fa;
  color: #5b6573;
  font-weight: 400;
}
.sl-resources-cards .sl-az__link:focus-visible,
.sl-resources-cards .sl-vt__link:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 3px;
}
@media (forced-colors: active) {
  .sl-resources-cards .sl-az__link,
  .sl-resources-cards .sl-vt__link {
    border: 2px solid ButtonText;
  }
  .sl-resources-cards .sl-az__link.is-current,
  .sl-resources-cards .sl-vt__link.is-current {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
    border-color: Highlight;
  }
  .sl-resources-cards .sl-az__off {
    border-style: dashed;
    color: GrayText;
  }
  .sl-resources-cards .sl-az__link:focus-visible,
  .sl-resources-cards .sl-vt__link:focus-visible {
    outline: 3px solid Highlight;
  }
}
/* sl-help-toggle: Show/Hide Instructions control */
.sl-res-help__toggle {
  min-width: 44px;
  min-height: 44px;
  margin: 0.5rem 0;
  padding: 0.4rem 1rem;
  border: 2px solid #1b1f24;
  border-radius: 999px;
  background: #fff;
  color: #1b1f24;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.sl-res-help__toggle:hover {
  background: #eef1f4;
}
.sl-res-help__toggle:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 3px;
}
.sl-res-help__body[hidden] {
  display: none;
}
/* sl-search: resource search inside the instructions */
.sl-res-search {
  margin: 0.75rem 0;
}
.sl-res-search__label {
  display: block;
  margin: 0 0 0.35rem;
  font-weight: 700;
}
.sl-res-search__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: stretch;
}
.sl-res-search__input {
  flex: 1 1 14rem;
  min-width: 0;
  min-height: 44px;
  padding: 0.4rem 0.75rem;
  border: 2px solid #1b1f24;
  border-radius: 8px;
  background: #fff;
  color: #1b1f24;
  font: inherit;
}
.sl-res-search__submit {
  min-width: 44px;
  min-height: 44px;
  padding: 0.4rem 1.1rem;
  border: 2px solid #1b1f24;
  border-radius: 999px;
  background: #1b1f24;
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.sl-res-search__submit:hover {
  background: #374151;
}
.sl-res-search__input:focus-visible,
.sl-res-search__submit:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 3px;
}
/* sl-az-compact:start */
/* Compact A to Z strip: every button is exactly 2rem x 2rem (32px at default text size; WCAG 2.5.8 minimum
   is 24px), round, with a 2px border, on a grid of exact 2rem columns and rows with a 0.5rem gap, left
   aligned. Nothing stretches, so every column and row sits at the same position in every line and the
   columns stay straight when the strip wraps. Link, current and empty buttons share the same size, border
   width and border style. No visible count. The count stays in each link's aria-label.
   Every selector starts with .sl-resources-cards .sl-letter-picker so these rules win over the older
   .sl-letter-picker rules in sl_resource_cards (44px minimum size, flex list), which otherwise override them.
   Delete this block to restore the large buttons. */
.sl-resources-cards .sl-letter-picker .sl-az {
  margin: 0.75rem 0 0;
}
.sl-resources-cards .sl-letter-picker ul.sl-az__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, 2rem);
  grid-auto-rows: 2rem;
  justify-content: start;
  align-items: start;
  flex-wrap: nowrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sl-resources-cards .sl-letter-picker .sl-az__list li {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin: 0;
  padding: 0;
}
.sl-resources-cards .sl-letter-picker .sl-az__list li a.sl-az__link,
.sl-resources-cards .sl-letter-picker .sl-az__list li .sl-az__off {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  min-height: 2rem;
  padding: 0;
  border-style: solid;
  border-width: 2px;
  border-radius: 999px;
  font-size: 0.95rem;
  line-height: 1;
  gap: 0;
}
.sl-resources-cards .sl-letter-picker .sl-az__list li .sl-az__off {
  position: relative;
  border-color: #cbd2d9;
}
/* The hidden ", no resources" text must never take space inside the box, whatever the theme does with
   .visually-hidden, or the dimmed letter is pushed off centre. Still read by screen readers. */
.sl-resources-cards .sl-letter-picker .sl-az__list li .sl-az__off .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.sl-resources-cards .sl-letter-picker .sl-az__list li .sl-az__ch {
  display: block;
  text-align: center;
}
.sl-resources-cards .sl-letter-picker .sl-az__list li .sl-az__n {
  display: none;
}
.sl-resources-cards .sl-letter-picker .sl-az__list li a.sl-az__link.is-current {
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
/* sl-az-compact:end */