@font-face {
    font-family: Manrope;
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("manrope-cyrillic-ext.woff2") format("woff2");
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
    font-family: Manrope;
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("manrope-cyrillic.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: Manrope;
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("manrope-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --ink: #102547;
    --muted: #425775;
    --accent: #0755bd;
    --accent-dark: #063a83;
    --blue-bright: #0874d9;
    --green: #157445;
    --green-dark: #0f5736;
    --sun: #ffc629;
    --sun-ink: #6b4a08;
    --page: #f3f7fc;
    --paper: #fff;
    --sky: #eff7ff;
    --tint: #e5f1ff;
    --mint: #e6f6ee;
    --warning-tint: #fff5d8;
    --warning: var(--sun-ink);
    --action-surface: #edf4fe;
    --line: #dce7f2;
    --control-line: #7083a0;
    --disabled: #edf1f6;
    --map-surface: #eaf3fb;
    --control-shadow: 0 4px 16px #17376121;
    --panel-shadow: 0 8px 28px #183a6610;
    --text-small: .875rem;
    --text-body: 1rem;
    --text-title: 1.2rem;
    --radius-control: 11px;
    --radius-tile: 14px;
    --radius-panel: 20px;
    --gutter: clamp(14px, 3vw, 48px);
    --content-max: 1740px;
    --header-height: 67px;
    font-family: Manrope, system-ui, "Segoe UI", sans-serif;
    line-height: 1.5;
}

.edu-icon {
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.workspace { max-width: var(--content-max); padding: 0 var(--gutter) 12px; }
.masthead {
    min-height: var(--header-height);
    padding: 9px max(var(--gutter), calc((100% - var(--content-max)) / 2 + var(--gutter)));
}
.brand { gap: 11px; min-width: 0; line-height: 1.2; }
.brand img { width: 44px; height: 44px; flex: 0 0 auto; }
.brand-copy { min-width: 0; }
.brand strong { font-size: 1.12rem; font-weight: 800; }
.brand small { margin-top: 3px; font-size: .7rem; letter-spacing: .1em; }
.account .button { min-height: 42px; }

.button {
    border-radius: var(--radius-control);
    font-size: var(--text-small);
    font-weight: 750;
}
.button.quiet:not(:disabled) { background: var(--sky); }
.button.secondary:not(:disabled) { background: var(--paper); }
.button[aria-pressed="true"] { background: var(--tint); }
.button.secondary[aria-pressed="true"] { background: var(--tint); }
#login-open {
    padding-inline: 19px;
    background: var(--green);
    border-color: var(--green);
    color: var(--paper);
}
#login-open:is(:hover, :active) { background: var(--green-dark); border-color: var(--green-dark); }

.intro {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 365px);
    align-items: center;
    gap: 20px;
    margin: 16px 0 14px;
    padding: 18px 22px;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid var(--line);
    border-radius: var(--radius-panel);
    background: linear-gradient(115deg, var(--sky), var(--paper) 82%);
}
.intro::after {
    content: '';
    position: absolute;
    z-index: -1;
    top: -175px;
    right: -90px;
    width: 330px;
    height: 330px;
    border: 1px solid #c4e1fc;
    border-radius: 50%;
    box-shadow: 0 0 0 16px #e1f0ff, 0 0 0 17px #d3eafa, 0 0 0 36px #edf7ff;
}
.intro .eyebrow {
    display: inline-flex;
    gap: 7px;
    align-items: center;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--tint);
    color: var(--accent-dark);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}
.intro .eyebrow::before { width: 7px; height: 7px; border-radius: 50%; background: var(--sun); }
.intro h1 {
    margin: 6px 0 0;
    font-size: clamp(1.85rem, 3vw, 2.75rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.048em;
    text-wrap: balance;
}
.intro h1 span { color: var(--green-dark); }
.intro-copy { max-width: 68ch; margin-top: 8px; font-size: var(--text-body); line-height: 1.45; }

.metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    background: transparent;
    border: 0;
}
.metrics .metric {
    --metric-color: var(--accent-dark);
    --metric-surface: var(--tint);
    position: relative;
    display: flex;
    min-width: 0;
    padding: 11px 9px 10px;
    border: 0;
    border-radius: var(--radius-tile);
    background: var(--metric-surface);
    color: var(--metric-color);
}
.metrics .metric-map { --metric-color: var(--green-dark); --metric-surface: var(--mint); }
.metrics .metric-missing { --metric-color: var(--sun-ink); --metric-surface: var(--warning-tint); }
.metric dt { margin-top: 4px; color: inherit; font-size: .76rem; font-weight: 700; line-height: 1.3; }
.metric dd { font-size: clamp(1.4rem, 2.2vw, 1.92rem); font-weight: 800; line-height: 1; }
.metric .edu-icon { position: absolute; top: 10px; right: 9px; width: 16px; height: 16px; }

.map-layout {
    grid-template-columns: minmax(310px, 360px) minmax(0, 1fr);
    gap: 14px;
    height: max(520px, calc(100dvh - 236px));
    border: 0;
    border-radius: 0;
    overflow: visible;
    background: transparent;
}
.directory, .map-panel {
    border: 1px solid var(--line);
    border-radius: var(--radius-panel);
    box-shadow: var(--panel-shadow);
}
.map-panel { overflow: hidden; }
.directory { overflow: hidden; }
.directory-filters {
    gap: 12px;
    padding: 14px;
    max-height: min(76%, calc(100% - 148px));
    scroll-padding: 8px;
}
.directory-search { display: grid; gap: 10px; min-width: 0; }
.directory-search .section-heading { gap: 8px; }
.directory-search h2, .results-heading h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-title);
    font-weight: 750;
    letter-spacing: -.025em;
}
.directory-search h2 .edu-icon {
    width: 34px;
    height: 34px;
    padding: 7px;
    border-radius: 10px;
    background: var(--tint);
    color: var(--accent);
}
.directory-search #reset { min-height: 44px; color: var(--accent-dark); }
.search-field { position: relative; min-width: 0; }
.search-field > .edu-icon {
    position: absolute;
    top: 50%;
    left: 13px;
    translate: 0 -50%;
    color: var(--accent);
    pointer-events: none;
}
.search-field #search {
    min-height: 46px;
    padding-inline: 42px 11px;
    border-radius: var(--radius-control);
    background: var(--sky);
    font-size: var(--text-body);
}
.nearby-controls { padding: 0; }
#nearby-request { gap: 9px; min-height: 44px; padding-inline: 13px; }
#nearby-request:not(:disabled) {
    background: linear-gradient(180deg, var(--accent), var(--accent-dark));
    border-color: var(--accent);
}
#nearby-request:not(:disabled):is(:hover, :active) { background: var(--accent-dark); }
.nearby-controls .button.quiet { min-height: 44px; }

.filters-expander {
    padding: 4px;
    border-radius: var(--radius-tile);
    background: var(--sky);
}
.filters-expander > summary {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    padding: 9px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    list-style: none;
    font-size: var(--text-body);
    font-weight: 750;
}
.filters-expander > summary::-webkit-details-marker { display: none; }
.filters-expander > summary::before {
    content: '';
    width: 16px;
    height: 16px;
    color: var(--accent);
    background:
        linear-gradient(currentColor, currentColor) center 3px / 15px 2px,
        linear-gradient(currentColor, currentColor) center 7px / 11px 2px,
        linear-gradient(currentColor, currentColor) center 11px / 6px 2px;
    background-repeat: no-repeat;
}
.filters-expander > summary::after {
    content: '';
    width: 7px;
    height: 7px;
    margin-inline: auto 4px;
    rotate: 45deg;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
}
.filters-expander[open] > summary::after { rotate: 225deg; }
.filters-expander:is([open], :has(select option:checked:not([value=""]))) > summary {
    border-color: transparent;
    box-shadow: inset 2px 0 var(--accent);
}
.directory-filters .form-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 8px;
}
.directory label { font-size: var(--text-small); font-weight: 700; }
.directory select {
    appearance: none;
    min-height: 40px;
    padding-inline-end: 23px;
    border-radius: 9px;
    background-image: url("education-chevron.svg");
    background-position: right 7px center;
    background-size: 13px;
    background-repeat: no-repeat;
}
#age-help { font-size: var(--text-small); }

.directory-results { display: flex; flex: 1; min-height: 0; flex-direction: column; }
.results-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 9px;
    padding: 9px 14px;
    border-block: 1px solid var(--line);
    background: var(--page);
}
.results-heading h3 { font-size: 1rem; }
.results-heading .edu-icon { width: 17px; height: 17px; color: var(--accent); }
.result-count { border: 0; background: transparent; padding: 0; color: var(--muted); font-size: .82rem; font-weight: 650; }
.results { flex: 1; padding: 5px 8px 9px; scroll-padding: 6px; }
.result {
    position: relative;
    gap: 9px;
    padding: 10px 10px 10px 9px;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 9px;
    min-height: 66px;
}
.result::after {
    content: '';
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    align-self: center;
    margin-inline-start: auto;
    rotate: -45deg;
    border-bottom: 1.5px solid var(--blue-bright);
    border-right: 1.5px solid var(--blue-bright);
}
.result[aria-pressed="true"] { box-shadow: inset 3px 0 var(--accent); }
.result-copy { flex: 1 1 auto; }
.result-copy strong { font-size: 1rem; font-weight: 740; }
.result-copy small { font-size: var(--text-small); line-height: 1.45; }
.result-copy .coord-note { font-size: var(--text-small); }
.result-number { background: var(--mint); color: var(--green-dark); }
.result-number.school, .result[aria-pressed="true"] .result-number { background: var(--tint); color: var(--accent-dark); }

.maplibregl-ctrl-group { border-radius: var(--radius-control); }
.maplibregl-ctrl-group button:first-child { border-radius: 10px 10px 0 0; }
.maplibregl-ctrl-group button:last-child { border-radius: 0 0 10px 10px; }
.map-tools .button, .map-styles > summary, .legend, .map-style-options { border-radius: var(--radius-control); }
.map-tools .button { min-height: 42px; }
#fit-map .edu-icon { display: none; }
.legend summary { font-weight: 750; }
.place-card {
    padding: 15px;
    border-radius: 16px;
    border: 1px solid var(--line);
    border-inline-start: 3px solid var(--accent);
    box-shadow: 0 10px 30px #12284e2b;
}
.place-card .eyebrow { color: var(--accent-dark); }
.place-card h2 { font-size: 1.32rem; font-weight: 780; }
.place-card .vacancy-summary { background: var(--sky); }
.place-card .position-warning { border-inline-start-color: var(--sun-ink); }
.public-footnote {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 1px 0;
    color: var(--muted);
    font-size: var(--text-small);
}
.public-footnote .edu-icon { width: 17px; height: 17px; margin-top: 1px; color: var(--accent); }

@media (min-width: 801px) {
    .workspace {
        display: flex;
        flex-direction: column;
        height: calc(100dvh - var(--header-height));
    }
    .intro, .directory-mode, .public-footnote { flex: 0 0 auto; }
    .map-layout {
        flex: 1 0 500px;
        grid-template-rows: minmax(0, 1fr);
        min-height: 500px;
        height: auto;
    }
}

@media (min-width: 1001px) {
    .directory-filters .form-grid { grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr); }
}

@media (max-width: 1000px) {
    .intro { grid-template-columns: minmax(0, 1fr) minmax(270px, 325px); }
    .metric .edu-icon { width: 14px; height: 14px; right: 7px; }
    .map-layout { grid-template-columns: minmax(285px, 330px) minmax(0, 1fr); }
}

@media (max-width: 800px) {
    :root { --gutter: 12px; --header-height: 61px; }
    .masthead { padding-block: 7px; }
    .brand img { width: 38px; height: 38px; }
    .brand strong { font-size: 1rem; }
    .brand small { font-size: .67rem; }
    .account .button { min-height: 44px; }
    #login-open { padding-inline: 12px; }
    .intro { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-block: 10px; padding: 13px; }
    .intro h1 { font-size: clamp(1.65rem, 4.2vw, 2.5rem); text-wrap: initial; }
    .intro-copy { font-size: .93rem; }
    .metrics { max-width: 430px; }
    .metrics .metric { padding: 8px; }
    .metric dd { font-size: 1.4rem; }
    .metric dt { font-size: .76rem; }
    .metric .edu-icon { top: 7px; }
    .mobile-switch { gap: 7px; margin-bottom: 9px; }
    .map-layout { grid-template-columns: minmax(0, 1fr); gap: 9px; }
    .directory-filters { max-height: none; }
    .directory-results { display: block; }
    .sheet-bar { min-height: 52px; }
    .map-tools .button { min-height: 44px; }
    .place-card { padding: 12px; }
    .place-card h2 { font-size: 1.17rem; }
}

@media (max-width: 480px) {
    .brand { gap: 8px; }
    .brand strong { font-size: .91rem; }
    .intro { padding: 11px; }
    .intro .eyebrow { font-size: .67rem; }
    .metric .edu-icon { width: 13px; height: 13px; }
    .metric dt { font-size: .72rem; }
    .directory-filters { padding: 12px; }
    .results-heading { padding-inline: 12px; }
    .map-actions > .button, .map-styles > summary { font-size: .84rem; padding-inline: 7px; }
    .workspace[data-view="list"] #fit-map { width: 44px; }
    .workspace[data-view="list"] #fit-map span { display: none; }
    .workspace[data-view="list"] #fit-map .edu-icon { display: block; }
    .workspace[data-view="list"] #map .maplibregl-ctrl-group { display: flex; }
    .workspace[data-view="list"] #map .maplibregl-ctrl-group button:first-child { border-radius: 10px 0 0 10px; }
    .workspace[data-view="list"] #map .maplibregl-ctrl-group button:last-child { border-radius: 0 10px 10px 0; }
    .workspace[data-view="list"] #map .maplibregl-ctrl-group button + button {
        border-top: 0;
        border-left: 1px solid var(--control-line);
    }
}