:root {
    --fog: #E9EEF1;
    --paper: #F6F8F9;
    --ink: #1D2833;
    --ink-soft: #52606D;
    --current: #2554C7;
    --current-ink: #FFFFFF;
    --stream: #AEBCC8;
    --rule: #C9D3DB;
    --signal: #D99A12;

    --sans: "Schibsted Grotesk", system-ui, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, monospace;

    /* Type scale: a 1.25 ratio from a 17px base. */
    --step-0: 1.0625rem;
    --step--1: 0.875rem;
    --step-1: 1.328rem;
    --step-2: 1.66rem;
    --step-4: clamp(2.4rem, 6vw, 4.1rem);

    --gutter: clamp(16px, 5vw, 64px);
    --measure: 72rem;

    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --fog: #121A22;
        --paper: #18222C;
        --ink: #DCE4EA;
        --ink-soft: #93A2AF;
        --current: #7FA2F5;
        --current-ink: #0E1620;
        --stream: #364553;
        --rule: #2A3743;
        --signal: #F0B43A;
        color-scheme: dark;
    }
}

:root[data-theme="dark"] {
    --fog: #121A22;
    --paper: #18222C;
    --ink: #DCE4EA;
    --ink-soft: #93A2AF;
    --current: #7FA2F5;
    --current-ink: #0E1620;
    --stream: #364553;
    --rule: #2A3743;
    --signal: #F0B43A;
    color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

/* The streamline SVG spans the full viewport; clipping keeps it from adding a horizontal scrollbar. */
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }

body {
    margin: 0;
    background: var(--fog);
    color: var(--ink);
    font: 400 var(--step-0)/1.55 var(--sans);
    font-feature-settings: "ss01";
    overflow-x: hidden;
}

a { color: var(--current); text-underline-offset: 0.18em; }

code, kbd { font-family: var(--mono); font-size: 0.86em; }

:focus-visible {
    outline: 3px solid var(--signal);
    outline-offset: 2px;
    border-radius: 3px;
}

.visually-hidden {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}

/* Masthead */

.masthead {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    max-width: var(--measure);
    margin: 0 auto;
    padding: 1.25rem var(--gutter);
    position: relative;
    z-index: 2;
}

.wordmark {
    color: var(--ink);
    text-decoration: none;
    font-weight: 800;
    font-size: var(--step-1);
    letter-spacing: -0.02em;
}

.wordmark span {
    font-weight: 400;
    color: var(--ink-soft);
    margin-left: 0.3em;
}

.masthead nav { display: flex; gap: 1.25rem; font-size: var(--step--1); }
.masthead nav a { color: var(--ink-soft); text-decoration: none; }
.masthead nav a:hover { color: var(--ink); text-decoration: underline; }

/* Hero: streamlines bend around the search field. */

.hero {
    position: relative;
    max-width: var(--measure);
    margin: 0 auto;
    padding: clamp(2rem, 7vw, 5rem) var(--gutter) clamp(3.5rem, 9vw, 6.5rem);
}

.flow {
    position: absolute;
    inset: 0 calc(50% - 50vw);
    width: 100vw;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.flow path {
    fill: none;
    stroke: var(--stream);
    stroke-width: 1.25;
    vector-effect: non-scaling-stroke;
}

.flow path.lead { stroke: var(--current); stroke-width: 1.6; opacity: 0.55; }

.flow.drawing path {
    stroke-dasharray: var(--len);
    stroke-dashoffset: var(--len);
    animation: draw 1.8s cubic-bezier(.25, .6, .3, 1) forwards;
    animation-delay: var(--delay);
}

@keyframes draw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
    .flow.drawing path { animation: none; stroke-dashoffset: 0; }
}

.hero-copy { position: relative; z-index: 1; max-width: 40rem; }

.hero h1 {
    margin: 0 0 0.9rem;
    font-size: var(--step-4);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.035em;
    text-wrap: balance;
}

.hero p {
    margin: 0;
    max-width: 40rem;
    color: var(--ink-soft);
    font-size: var(--step-1);
    line-height: 1.45;
}

.hero p code {
    color: var(--ink);
    background: var(--paper);
    padding: 0.08em 0.35em;
    border-radius: 4px;
    overflow-wrap: anywhere;
}

.search {
    position: relative;
    z-index: 1;
    max-width: 38rem;
    margin-top: clamp(2.25rem, 6vw, 3.75rem);
}

.search input {
    width: 100%;
    padding: 1.05rem 3.25rem 1.05rem 1.35rem;
    font: 500 var(--step-1) var(--sans);
    color: var(--ink);
    background: var(--paper);
    border: 1.5px solid var(--ink);
    border-radius: 999px;
    box-shadow: 0 0 0 7px var(--fog);
    appearance: none;
}

.search input::placeholder { color: var(--ink-soft); font-weight: 400; }
.search input:focus-visible { outline-offset: 9px; }
.search input::-webkit-search-cancel-button { cursor: pointer; }

.search kbd {
    position: absolute;
    right: 1.15rem;
    top: 50%;
    transform: translateY(-50%);
    padding: 0.05rem 0.45rem;
    border: 1px solid var(--rule);
    border-radius: 5px;
    color: var(--ink-soft);
    font-size: var(--step--1);
    pointer-events: none;
}

.search input:not(:placeholder-shown) + kbd,
.search input:focus + kbd { display: none; }

/* Catalog */

.catalog {
    max-width: var(--measure);
    margin: 0 auto;
    padding: 0 var(--gutter);
    position: relative;
}

.catalog-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--ink);
}

.catalog-head h2 {
    margin: 0;
    font-size: var(--step-2);
    font-weight: 800;
    letter-spacing: -0.02em;
}

#count { margin: 0; color: var(--ink-soft); font-size: var(--step--1); }

.modules { list-style: none; margin: 0; padding: 0; }

.module {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    column-gap: 1.5rem;
    border-bottom: 1px solid var(--rule);
}

.module summary {
    display: grid;
    grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr) 6rem;
    gap: 0.25rem 1.5rem;
    align-items: baseline;
    padding: 1.15rem 0;
    cursor: pointer;
    list-style: none;
}

.module summary::-webkit-details-marker { display: none; }

.m-name { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.m-name strong { font-weight: 600; font-size: var(--step-1); letter-spacing: -0.01em; }
.m-id { color: var(--ink-soft); font-size: 0.78rem; overflow-wrap: anywhere; }

.m-desc { color: var(--ink-soft); max-width: 60ch; }
.m-desc:empty::before { content: "No description provided."; font-style: italic; }

.m-version {
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    text-align: right;
}

.module summary:hover strong { color: var(--current); }

.module details[open] summary strong { color: var(--current); }

.get {
    margin-top: 1.05rem;
    display: inline-block;
    padding: 0.5rem 1.05rem;
    border-radius: 999px;
    background: var(--current);
    color: var(--current-ink);
    font-weight: 600;
    font-size: var(--step--1);
    text-decoration: none;
    white-space: nowrap;
}

.get:hover { background: var(--ink); color: var(--fog); }

.m-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.25rem 2.5rem;
    padding: 0.25rem 0 1.5rem;
    animation: open 0.22s ease-out;
}

@keyframes open { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .m-detail { animation: none; } }

.facts {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0.35rem 1.25rem;
    margin: 0;
    font-size: var(--step--1);
}

.facts dt { color: var(--ink-soft); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.facts code { font-size: 0.8rem; }

.versions h3 { margin: 0 0 0.4rem; font-size: var(--step--1); font-weight: 600; color: var(--ink-soft); }
.versions ol { list-style: none; margin: 0; padding: 0; font-size: var(--step--1); }
.versions li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.2rem 0; }
.versions li span { color: var(--ink-soft); }

.copy {
    justify-self: start;
    font: 500 var(--step--1) var(--sans);
    color: var(--ink);
    background: transparent;
    border: 1.5px solid var(--ink);
    border-radius: 999px;
    padding: 0.4rem 0.95rem;
    cursor: pointer;
}

.copy:hover { background: var(--ink); color: var(--fog); }

.empty {
    padding: 3rem 0;
    max-width: 36rem;
    color: var(--ink-soft);
}

.empty strong { display: block; color: var(--ink); font-size: var(--step-1); margin-bottom: 0.3rem; }

.empty button {
    margin-top: 1rem;
    font: 500 var(--step--1) var(--sans);
    color: var(--current);
    background: none;
    border: 0;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 0.18em;
    cursor: pointer;
}

.foot {
    max-width: var(--measure);
    margin: clamp(4rem, 10vw, 7rem) auto 0;
    padding: 1.5rem var(--gutter) 2.5rem;
    color: var(--ink-soft);
    font-size: var(--step--1);
}

.foot p { margin: 0; border-top: 1px solid var(--rule); padding-top: 1.25rem; }

/* Narrow screens: the row collapses to name/version over description. */

@media (max-width: 760px) {
    .module { column-gap: 1rem; }

    .module summary { grid-template-columns: minmax(0, 1fr); }

    .m-version { display: none; }
    .m-desc { font-size: var(--step--1); }

    /* The version moves onto the download button's line, where it labels the jar. */
    .module .get::after { content: " " attr(data-version); font-weight: 400; }

    .m-detail { grid-template-columns: minmax(0, 1fr); }

    .masthead nav a[href^="https"] { display: none; }
}