.tree {
  overflow-y: auto;
  appearance: none;
  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
  --pico-background-color: var(--pico-form-element-background-color);
  --pico-border-color: var(--pico-form-element-border-color);
  --pico-color: var(--pico-form-element-color);
  --pico-box-shadow: none;
  border: var(--pico-border-width) solid var(--pico-border-color);
  border-radius: var(--pico-border-radius);
  outline: 0;
  background-color: var(--pico-background-color);
  box-shadow: var(--pico-box-shadow);
  color: var(--pico-color);
  font-weight: var(--pico-font-weight);
  transition:
    background-color var(--pico-transition),
    border-color var(--pico-transition),
    color var(--pico-transition),
    box-shadow var(--pico-transition);
}

.tree-item > i {
  color: var(--pico-primary);
}

.tree-item > input[type="radio"] {
  display: none;
}

.tree-item > label,
.tree-item > input[type="radio"] + label {
  display: inline-block;
  border-radius: var(--pico-border-radius);
  padding: calc(0px - var(--pico-border-width)) calc(10px - var(--pico-border-width))
    calc(-3px - var(--pico-border-width)) calc(10px - var(--pico-border-width));
  background-color: transparent;
  color: var(--pico-color);
  cursor: pointer;
  transition:
    background-color var(--pico-transition),
    color var(--pico-transition);
}

.tree-item > label > i,
.tree-item > input[type="radio"] + label > i {
  color: var(--pico-primary);
  transition: color var(--pico-transition);
}

.tree-item > label > input[type="radio"],
.tree-item > input[type="radio"] + label > input[type="radio"] {
  display: none;
}

.tree-item > label:not(:has(> input[type="radio"]:checked)):hover,
.tree-item > input[type="radio"]:not(:checked) + label:hover {
  background-color: var(--pico-primary-hover);
  color: var(--pico-primary-inverse);
}

.tree-item > label:not(:has(> input[type="radio"]:checked)):hover > i,
.tree-item > input[type="radio"]:not(:checked) + label:hover > i {
  color: var(--pico-primary-inverse);
}

.tree-item > label:has(> input[type="radio"]:checked),
.tree-item > input[type="radio"]:checked + label {
  background-color: var(--pico-primary-background);
  color: var(--pico-primary-inverse);
}

.tree-item > label:has(> input[type="radio"]:checked) > i,
.tree-item > input[type="radio"]:checked + label > i {
  color: var(--pico-primary-inverse);
}

/* Browse trees with context menus: keep tree look, allow menus over card edges. */
.library-browse-tree {
  overflow: visible;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

.library-browse-tree details.inline_menu {
  position: relative;
  overflow: visible;
}

.library-browse-tree details.inline_menu[open] {
  z-index: 30;
}

/* Compact menu; JS overrides left/top when open and pinned. */
.library-browse-tree details.inline_menu.dropdown > summary + ul {
  width: max-content;
  min-width: 11rem;
  max-width: min(16rem, calc(100vw - 1rem));
}

.library-browse-tree details.inline_menu.dropdown--viewport-pinned > summary + ul {
  margin: 0;
  transition: none !important;
}

.school-page-content:has(.library-browse-tree),
article:has(.library-browse-tree),
article:has(.library-browse-tree) > .library-browse-tree {
  overflow: visible;
}