:root {
    --brand-green: #68815C;
    --brand-moss: #90a784;
    --brand-accent: #b45c2c;
    --ink: #213028;
    --muted: #5d6b63;
    --line: #dfe6e0;
    --card-bg: #ffffff;
    --chip-bg: rgba(104,129,92,.08);
    --chip-soft-bg: rgba(0,0,0,.05);
    --shadow: 0 6px 20px rgba(20,35,30,.08);
    --radius: 14px;
}

body {
    font-family: system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
    margin: 0;
    background: #f7f8f6;
    color: var(--ink)
}

.wrap {
    max-width: 1000px;
    margin: 2rem auto;
    padding: 0 1rem
}

/* Search bar */
.searchbar {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1rem
}

    .searchbar input {
        flex: 1 1 280px;
        padding: .7rem .85rem;
        border: 1px solid var(--line);
        border-radius: 10px;
        font-size: 1rem;
        background: #fff
    }

    .searchbar button {
        padding: .7rem 1rem;
        border: 1px solid var(--line);
        border-radius: 10px;
        background: #fafaf9;
        color: var(--ink);
        font-size: 1rem;
        cursor: pointer
    }

        .searchbar button:hover {
            background: #fff;
            border-color: rgba(0,0,0,.18)
        }

/* Result header bar */
.results-wrap {
    margin: 1rem 0 3rem;
}

.results-bar {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    font-size: .95rem;
    color: var(--muted);
    border-left: 4px solid var(--brand-accent);
    padding-left: .75rem
}

.results-count {
    font-weight: 600;
    color: var(--ink)
}


.results-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem
}

.result-card {
    background: var(--card-bg);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: clip;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease
}

    .result-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 28px rgba(20,35,30,.12);
        border-color: rgba(104,129,92,.35)
    }
.result-more {
    border-top: 1px dashed var(--line);
    margin-top: .5rem;
    padding: .75rem 1rem 1rem;
}

    .result-more details summary {
        cursor: pointer;
        color: var(--brand-green);
        font-size: .95rem;
    }
.result-more {
    border-top: 1px dashed var(--line);
    margin-top: .5rem;
    padding: .75rem 1rem 1rem;
}

    .result-more details summary {
        cursor: pointer;
        color: var(--brand-green);
        font-size: .95rem;
        list-style: none; /* hide default marker in Chrome */
    }

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

        /* Add a custom caret and rotate it on open */
        .result-more details summary::after {
            content: "▸";
            display: inline-block;
            margin-left: .5rem;
            transform: translateY(-1px);
            transition: transform .25s ease;
            opacity: .8;
        }

    .result-more details[open] summary::after {
        transform: rotate(90deg) translateY(-1px);
    }

/* Smooth slide for the content */
.more-content {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height .35s ease, opacity .25s ease;
}

.more[open] .more-content {
    /* Set a comfortably large max-height to allow the slide; adjust if needed */
    max-height: 1200px;
    opacity: 1;
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .more-content {
        transition: none;
    }

    .result-more details summary::after {
        transition: none;
    }
}

.result-head {
    padding: 1rem 1rem .5rem;
    border-bottom: 1px solid var(--line)
}

.result-title {
    margin: 0 0 .5rem;
    line-height: 1.2;
    font-size: 1.2rem
}

    .result-title small {
        font-weight: 400;
        color: var(--muted)
    }

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .25rem .55rem;
    font-size: .8rem;
    border-radius: 999px;
    background: var(--chip-bg);
    color: var(--brand-green);
    border: 1px solid rgba(104,129,92,.15)
}

.chip-soft {
    background: var(--chip-soft-bg);
    color: var(--muted);
    border-color: rgba(0,0,0,.05)
}

.result-body {
    padding: 1rem;
    display: grid;
    gap: .75rem
}

.facts {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: .75rem 1rem;
    margin: 0
}

    .facts > div {
        display: grid;
        gap: .15rem
    }

    .facts dt {
        font-size: .8rem;
        font-weight: 600;
        color: var(--muted);
    }

    .facts dd {
        font-size: .95rem;
    }

details.more {
    border-top: 1px dashed var(--line);
    padding-top: .75rem
}

    details.more summary {
        cursor: pointer;
        font-size: .95rem;
        color: var(--brand-green)
    }

/* Pagination */
.pagination {
    display: flex;
    gap: .5rem;
    justify-content: center;
    margin-top: 1.25rem
}

    .pagination button {
        padding: .55rem .85rem;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: #fff;
        cursor: pointer
    }

        .pagination button[disabled] {
            opacity: .5;
            cursor: not-allowed
        }


@media (min-width:700px) {
    .result-title {
        font-size: 1.3rem
    }

    .result-body {
        grid-template-columns: 3fr 2fr;
        align-items: start
    }
}

@media (min-width:980px) {
    .facts {
        grid-template-columns: repeat(3,minmax(0,1fr))
    }
}

.alias {
    margin-top: .25rem;
    color: var(--muted);
    font-size: .9rem;
}

 body {
}
.key-facts {
    margin-top: .4rem;
    font-size: .96rem;
    color: var(--ink);
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1.25rem;
}

    .key-facts .fact strong {
        color: var(--brand-accent);
        font-weight: 600;
    }
.result-more {
    border-top: 1px dashed var(--line);
    margin-top: .5rem;
    padding: .75rem 1rem 1rem;
}

    .result-more details summary {
        cursor: pointer;
        color: var(--brand-green);
        font-size: .95rem;
        list-style: none;
    }

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

        .result-more details summary::after {
            content: "▸";
            margin-left: .5rem;
            transition: transform .25s ease;
        }

    .result-more details[open] summary::after {
        transform: rotate(90deg);
    }

.more-content {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height .35s ease, opacity .25s ease;
}

.more[open] .more-content {
    max-height: 1200px;
    opacity: 1;
}

.key-facts {
    margin-top: .4rem;
    font-size: .96rem;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1.25rem;
}

    .key-facts .fact strong {
        color: var(--brand-accent);
        font-weight: 600;
    }