: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)
        }

/* one convict result */
.convict-result {
    border: 1px solid var(--line);
    background: #f8faf5;
    border-radius: 6px;
    padding: 1rem 1.25rem 1.25rem;
    margin-bottom: 1.5rem;
}

/* header with name and ship/year summary */
.convict-header {
    margin-bottom: 0.75rem;
}

.convict-name {
    margin: 0 0 0.25rem;
    font-size: 1.15rem;
    font-weight: 600;
}

.convict-ship-summary {
    margin: 0.2rem 0 0;
    color: var(--muted);
}

/* three boxed panels */
.convict-panels {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

/* stack on tablet / mobile */
@media (max-width: 900px) {
    .convict-panels {
        grid-template-columns: 1fr;
    }
}

.panel {
    position: relative;
    border: 1px solid #d8dfd0;
    background: #fff;
    border-radius: 4px;
    padding: 0.9rem 0.85rem 0.75rem;
}

/* “tab” headings */
.panel-title {
    position: absolute;
    top: -0.9rem;
    left: 0.75rem;
    padding: 0 0.5rem;
    background: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    color: #444;
    border-radius: 3px 3px 0 0;
    border: 1px solid #d8dfd0;
}

/* definition list styling */
.panel dl {
    margin: 0.3rem 0 0;
}

.panel dt {
    font-weight: 600;
    display: inline;
}

.panel dd {
    margin: 0 0 0.25rem;
    display: inline;
}

    .panel dd::after {
        content: "";
        display: block;
    }

.more-section {
    margin-top: 1rem;
}

details.more summary {
    cursor: pointer;
    font-weight: 600;
    padding: .4rem 0;
}

details.more .more-content {
    padding: .5rem 0 .2rem;
}

.more-content dl div {
    display: grid;
    grid-template-columns: 150px 1fr;
    padding: .2rem 0;
}

.more-content dt {
    font-weight: 600;
}

.more-content dd {
    margin: 0;
}