.projects-controls > * {
    padding-top: var(--paragraph-spacing);
}

.projects-search-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--paragraph-spacing);
}

.projects-search {
    width: 100%;
    padding: var(--paragraph-spacing);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius);
    font-family: var(--font-family);
}

.projects-search:focus {
    outline: 0.125rem solid var(--color-accent);
    outline-offset: 0.0625rem;
}

.projects-controls__actions {
    padding-right: var(--block-padding-x);
}

.projects-note {
    color: var(--color-on-dark-muted);
}

.projects-note > :first-child {
    margin-top: 0;
}

.projects-note .intro-stats > :first-child {
    margin-top: var(--paragraph-spacing);
}

/* ── Filtrid (rajatise otstarve / süsteemid / aasta) — üksteise all ── */
.projects-filters {
    display: flex;
    flex-direction: column;
    gap: var(--paragraph-spacing);
}

.multiselect {
    position: relative;
}

.multiselect__toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--paragraph-spacing);
    padding: var(--paragraph-spacing);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius);
    background-color: var(--color-white);
    color: var(--color-text);
    font-family: var(--font-family);
    text-align: left;
    cursor: pointer;
}

.multiselect__toggle:focus-visible {
    outline: 0.125rem solid var(--color-accent);
    outline-offset: 0.0625rem;
}

.multiselect__text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.multiselect__arrow {
    flex: 0 0 auto;
    width: 0;
    height: 0;
    border-left: 0.3125rem solid transparent;
    border-right: 0.3125rem solid transparent;
    border-top: 0.375rem solid currentColor;
    transition: var(--transition);
}

.multiselect.is-open .multiselect__arrow {
    transform: rotate(180deg);
}

.multiselect__panel {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    right: 0;
    z-index: 20;
    max-height: 16rem;
    overflow-y: auto;
    padding: var(--paragraph-spacing);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius);
    background-color: var(--color-white);
    color: var(--color-text);
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.12);
}

.multiselect__option {
    display: flex;
    align-items: center;
    gap: var(--paragraph-spacing);
    padding: 0.25rem 0;
    cursor: pointer;
}

.multiselect__option input {
    flex: 0 0 auto;
    cursor: pointer;
}

/* ── Aasta vahemik: kaks number-inputit + kahe pidemega slider ──────── */
.year-range {
    display: flex;
    align-items: center;
    gap: var(--paragraph-spacing);
}

.year-range[hidden] {
    display: none;
}

.year-range__inputs {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--paragraph-spacing);
}

.year-range__input {
    width: 4.5rem;
    padding: var(--paragraph-spacing);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius);
    background-color: var(--color-white);
    color: var(--color-text);
    font-family: var(--font-family);
}

.year-range__input:focus-visible {
    outline: 0.125rem solid var(--color-accent);
    outline-offset: 0.0625rem;
}

/* Mõlemad range-inputid asuvad ülestikku samal ribal; nähtav track +
   valitud vahemiku täide joonistatakse ::before gradientina. Protsendid
   --range-min / --range-max seab projects-search.js. */
.year-range__slider {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    height: 1.5rem;
}

.year-range__slider::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 0.25rem;
    border-radius: var(--radius);
    background: linear-gradient(to right,
        var(--color-border) var(--range-min, 0%),
        var(--color-accent) var(--range-min, 0%),
        var(--color-accent) var(--range-max, 100%),
        var(--color-border) var(--range-max, 100%));
}

.year-range__thumb {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1.5rem;
    margin: 0;
    background: none;
    pointer-events: none;          /* track ei püüa klikke — ainult pide allpool */
    -webkit-appearance: none;
    appearance: none;
}

.year-range__thumb::-webkit-slider-runnable-track {
    height: 1.5rem;
    background: transparent;
}

.year-range__thumb::-moz-range-track {
    background: transparent;
}

.year-range__thumb::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    pointer-events: auto;
    margin-top: 0.25rem;           /* tsentreeri 1rem pide 1.5rem tracki sees */
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: var(--color-accent);
    border: var(--border-width) solid var(--color-white);
    cursor: pointer;
}

.year-range__thumb::-moz-range-thumb {
    pointer-events: auto;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: var(--color-accent);
    border: var(--border-width) solid var(--color-white);
    cursor: pointer;
}

/* Projektiloendil pole otsest pealkirja, mis kannaks tulba 3rem ülamargini →
   annab selle loend ise (üks margin; esimese kaardi ülapadding 0, et vahe ei
   tekiks padding + margin liitumisest ja kaart joonduks parema tulba pealkirjaga). */
.design-line__left > .projects-list {
    margin-top: var(--heading-margin-top);
}

.projects-list .project-card:first-child {
    padding-top: 0;
}

/* Kahe-tulba paigutus + kitsa vaate kokkupanek elab design-line.css-is. */