* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    color-scheme: light dark;
    --text: light-dark(#1c1b18, #ecebe8);
    --bg: light-dark(#fbfaf7, #141414);
    --muted: light-dark(#6c6960, #9b9890);
    --border: light-dark(#e2dfd6, #33322f);
    --link: light-dark(#385cc7, #9ab3ff);
    --accent: light-dark(#a03232, #de8c8c);
    --pair-hl: light-dark(#f4ecce, #3a3418);
    --word-hl: light-dark(#8dd3c7, #24544d);
    --match-hl: light-dark(#ffe289, #7a5d00);
    --titlebar: light-dark(#f1eee6, #1e1e1c);
    --border-radius: 0.5rem;
    --ui-font: system-ui, sans-serif;
}

html { scroll-behavior: smooth; }
[id] { scroll-margin-block-start: 15vh; }

body {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem);
    line-height: 1.55;
    color: var(--text);
    background: var(--bg);
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

a {
    color: var(--link);
    text-decoration: none;

    &:hover, &:focus-visible { text-decoration: underline; }
}

cite { font-style: italic; }
var {
    padding: 0.08em 0.3em;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.92em;
    font-style: normal;
    white-space: nowrap;
    background: var(--titlebar);
    border: 1px solid var(--border);
    border-radius: 0.25em;
}
.last-name { font-variant-caps: small-caps; }

header.site {
    position: sticky;
    top: 0;
    z-index: 10;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    padding: 0.7rem 1rem;
    background: var(--bg);
    border-bottom: 1px solid var(--border);

    & .brand {
        font-family: var(--ui-font);
        text-transform: uppercase;
        letter-spacing: 0.2em;
        font-size: 1rem;
        color: var(--text);
    }

    & .home-link {
        justify-self: start;
        display: inline-flex;
        padding: 0.3rem;
        color: var(--text);

        & svg { width: 1.2rem; height: 1.2rem; }
    }

    & .locale-switcher {
        justify-self: end;
        display: flex;
        align-items: baseline;
        gap: 0.35em;
        font-family: var(--ui-font);
        font-size: 0.8rem;

        & a { color: var(--muted); }
        & [aria-current="page"] { color: var(--text); font-weight: 600; }
    }
}

main {
    width: min(72rem, 100% - 2.5rem);
    margin-inline: auto;
    padding-block: 1.5rem 3rem;
    flex: 1;
}

footer.site {
    padding: 1rem;
    text-align: center;
    font-family: var(--ui-font);
    font-size: 0.8rem;
    color: var(--muted);
    border-top: 1px solid var(--border);
}

form.search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 42rem;
    margin-inline: auto;
    font-family: var(--ui-font);
    font-size: 0.95rem;

    & select, & input, & button {
        font: inherit;
        color: var(--text);
        background: var(--bg);
        border: 1px solid var(--border);
        border-radius: 0.4rem;
        padding: 0.45rem 0.6rem;
    }

    & input[type="search"] { flex: 1; min-width: 6rem; }

    & button { cursor: pointer; }
}

details, .doclist, .notfound, .citation {
    max-width: 42rem;
    margin: 2rem auto 0;

    & h2 { font-size: 1.1rem; margin-block-end: 0.6rem; }
}

details {
    font-family: var(--ui-font);
    font-size: 0.85rem;
    color: var(--muted);
    border: 1px solid var(--border);
    border-radius: var(--border-radius);

    /* the summary is the window's titlebar */
    & summary {
        cursor: pointer;
        padding: 0.4rem 0.9rem;
        background: var(--titlebar);
        border-radius: calc(var(--border-radius) - 1px);
    }

    &[open] summary {
        border-block-end: 1px solid var(--border);
        border-end-start-radius: 0;
        border-end-end-radius: 0;
    }

    & p { padding: 0.8rem 0.9rem; }
}

.doclist ul {
    list-style: none;

    & li { margin-block-start: 0.3rem; }
}

/* ---- parallel document view ---- */

.doc {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem clamp(1.25rem, 4vw, 3rem);
    align-items: baseline;

    /* headings render like paragraph text, just bold (UA default) */
    & .cell { font-size: 1em; }
}

.s, .w { border-radius: 2px; }
.s.hl-pair,
.s:target,
.s.targeted { background: var(--pair-hl); }
.w.hl-search { background: var(--match-hl); }
.w.hl-pair {
    background: var(--word-hl);
    box-shadow: 0 0 0 1px var(--word-hl);
}
.s:target,
.s.targeted { box-shadow: 0 0 0 2px var(--pair-hl), 0 2px 0 2px var(--accent); }

mark { background: var(--match-hl); color: inherit; border-radius: 2px; }
.w.hl-pair mark.hl { background: var(--word-hl); }

.docnav {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    max-width: 42rem;
    margin: 2.5rem auto 0;
    font-family: var(--ui-font);
    font-size: 0.85rem;
}

.citation {
    padding: 0.9rem 1.1rem;
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    font-size: 0.85em;

    & h2 {
        font-family: var(--ui-font);
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--muted);
    }
}

/* ---- search results ---- */

#search-status {
    max-width: 42rem;
    margin: 1.2rem auto 0;
    font-family: var(--ui-font);
    font-size: 0.85rem;
    color: var(--muted);
}

#results {
    max-width: 56rem;
    margin-inline: auto;

    & h2 {
        font-family: var(--ui-font);
        font-size: 0.8rem;
        margin-block-start: 1.1rem;

        & a { color: var(--text); }
    }

    & .result {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: clamp(1.25rem, 3vw, 2.5rem);
        align-items: baseline;
        padding-block: 0.3rem;
        border-block-start: 1px solid var(--border);
        color: inherit;
        text-decoration: none;
        font-size: 0.85em;
        line-height: 1.45;

        & .other { color: var(--muted); }
    }
}

@media (max-width: 44rem) {
    header.site {
        padding-inline: 0.75rem;

        & .brand { font-size: 0.9rem; letter-spacing: 0.12em; }
    }
    form.search { flex-wrap: wrap; }
}