/* The subject picker stays within Vibel's reading palette, including its top layer. */
.nav-filter select[hidden] { display: none !important; }
.subject-trigger {
  display: flex; align-items: center; gap: .625rem; width: 100%; min-width: 0;
  min-height: 3.5rem; padding: .625rem .75rem;
  border: 1px solid var(--nav-control-line); border-radius: .875rem;
  color: var(--nav-ink); background: var(--nav-canvas); text-align: left; cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}
.subject-trigger[aria-expanded="true"] { border-color: var(--nav-accent); background: var(--nav-selected); box-shadow: 0 0 0 2px color-mix(in srgb, var(--nav-accent) 12%, transparent); }
.subject-trigger:focus-visible { outline: 2px solid var(--nav-accent); outline-offset: 3px; }
.subject-trigger__icon, .subject-option__icon {
  display: grid; place-items: center; flex: none; width: 2rem; height: 2rem;
  border-radius: .625rem; color: var(--nav-muted); background: var(--nav-surface);
}
.subject-trigger__text { display: flex; flex: 1; flex-direction: column; gap: .125rem; min-width: 0; }
.subject-trigger__name { font-size: .9375rem; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.subject-trigger__context { font-size: .6875rem; line-height: 1.4; color: var(--nav-muted); }
.subject-trigger__arrow { display: flex; flex: none; color: var(--nav-muted); transition: transform 200ms cubic-bezier(.2,.7,.2,1); }
.subject-trigger[aria-expanded="true"] .subject-trigger__arrow { transform: rotate(180deg); }
.subject-trigger svg, .subject-popover svg { display: block; width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.subject-popover {
  position: fixed; inset: auto; z-index: 90; display: flex; flex-direction: column;
  box-sizing: border-box; margin: 0; padding: .375rem; min-width: 0;
  border: 1px solid var(--nav-line); border-radius: 1rem;
  color: var(--nav-ink); background: var(--nav-canvas);
  box-shadow: 0 14px 44px #0003, 0 3px 10px #0001;
  overflow: hidden; overscroll-behavior: contain;
  opacity: 0; transform: translateY(-6px) scale(.985); transform-origin: top left;
  transition: opacity 140ms ease, transform 180ms cubic-bezier(.2,.7,.2,1);
}
.subject-popover[hidden] { display: none !important; }
.subject-popover[popover]:not(:popover-open) { display: none; }
.subject-popover[data-open="true"] { opacity: 1; transform: translateY(0) scale(1); }
.subject-popover[data-open="false"] { pointer-events: none; }
.subject-popover[data-side="above"] { transform-origin: bottom left; }
.subject-popover[data-side="above"][data-open="false"] { transform: translateY(6px) scale(.985); }
.subject-popover__title { flex: none; padding: .625rem .75rem .75rem; font-size: .8125rem; font-weight: 600; line-height: 1.4; }
.subject-options { min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--nav-control-line) transparent; }
.subject-group { margin-top: .375rem; padding-top: .375rem; border-top: 1px solid var(--nav-line); }
.subject-group__label { padding: .625rem .75rem .375rem; color: var(--nav-muted); font-size: .6875rem; font-weight: 600; letter-spacing: .07em; line-height: 1.5; text-transform: uppercase; }
.subject-option {
  display: flex; align-items: center; gap: .625rem; min-height: 2.875rem;
  padding: .375rem .625rem; border: 1px solid transparent; border-radius: .625rem;
  color: var(--nav-ink); cursor: pointer;
  transition: background-color 110ms ease, border-color 110ms ease;
}
.subject-option__name { flex: 1; min-width: 0; font-size: .875rem; font-weight: 500; line-height: 1.45; overflow-wrap: anywhere; }
.subject-option__check { display: flex; flex: none; visibility: hidden; color: var(--nav-accent); }
.subject-option__icon { width: 1.875rem; height: 1.875rem; background: transparent; }
.subject-option[data-active="true"] { border-color: var(--nav-control-line); background: var(--nav-surface); }
.subject-option[aria-selected="true"] { color: var(--nav-accent); background: var(--nav-selected); }
.subject-option[aria-selected="true"] .subject-option__check { visibility: visible; }
.subject-option[aria-selected="true"] .subject-option__icon { color: var(--nav-accent); }
.subject-option[aria-disabled="true"] { opacity: .4; cursor: default; }
@media (hover: hover) { .subject-trigger:hover { border-color: var(--nav-accent); } }
@media (max-width: 940px) and (max-height: 560px) {
  .subject-trigger { flex: 1; min-height: 2.75rem; padding-block: .375rem; }
  .subject-trigger__context { display: none; }
  .subject-popover__title { padding-block: .375rem; }
}
@media (prefers-reduced-motion: reduce) {
  .subject-trigger, .subject-trigger__arrow, .subject-popover, .subject-option { transition: none !important; }
}