:root {
    --bg-a: #e8f1ef;
    --bg-b: #d3e6f7;
    --panel: #f7fbff;
    --panel-border: #b9c7d8;
    --ped-bg: #eef9f7;
    --text: #1b2733;
    --muted: #4c6175;
    --accent: #0f766e;
    --accent-strong: #0b5d57;
    --line: #7b8795;
    --input-bg: #ffffff;
    --input-focus: #d8f3ef;
    --danger: #b42318;
    --shadow: 0 10px 26px rgba(17, 35, 57, 0.12);
}

html {
    height: 100%;
    font-size: 14px;
    font-family: "Segoe UI", "Noto Sans", "Liberation Sans", sans-serif;
}

body {
    min-height: 100%;
    margin: 0;
    padding: 20px;
    color: var(--text);
    background:
        radial-gradient(circle at 8% 8%, rgba(255, 255, 255, 0.55), transparent 32%),
        linear-gradient(145deg, var(--bg-a), var(--bg-b));
    box-sizing: border-box;
}

h2 {
    margin: 0;
    font-size: 2rem;
    letter-spacing: 0.01em;
}

body > p:first-of-type {
    margin: 6px 0 16px;
    color: var(--muted);
    font-size: 0.98rem;
}

#controls {
    width: 28%;
    min-height: calc(100vh - 80px);
    float: left;
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: 16px;
    box-shadow: var(--shadow);
    padding: 16px;
    box-sizing: border-box;
}

body.results #controls {
    width: 35%;
}

.result {
    margin-top: 0;
    margin-bottom: 12px;
}

#result {
    color: #0b4f9d;
}

#breakdown {
    max-height: 22vh;
    overflow-y: auto;
    margin: 0 0 12px;
    padding-left: 0;
    border-radius: 8px;
}

#breakdown > li {
    list-style: none;
    margin-left: 20px;
    text-indent: -24px;
    margin-bottom: 4px;
}

#breakdown > li.closed,
#breakdown > li.open {
    cursor: pointer;
}

#breakdown > li::before {
    margin-right: 8px;
    content: '\26ab';
    color: #738499;
}

#breakdown > li.closed::before {
    margin-right: 6px;
    content: '\25ba';
    color: var(--text);
}

#breakdown > li.open::before {
    margin-right: 4px;
    content: '\25bc';
    color: var(--text);
}

#breakdown > li ul {
    padding-left: 20px;
}

#breakdown > li ul li {
    list-style-type: none;
    margin-left: 0;
    text-indent: 0;
    overflow-y: hidden;
    transition: max-height .35s cubic-bezier(0, 1, 0.5, 1);
}

#breakdown > li.closed ul li {
    max-height: 0;
}

#breakdown > li.open ul li {
    max-height: 200vh;
}

#breakdown .coefficient {
    color: #0b4f9d;
}

#breakdown .through {
    font-size: .9em;
}

button {
    border: 1px solid #9db0c4;
    background: linear-gradient(180deg, #ffffff, #edf3f9);
    color: var(--text);
    padding: 6px 10px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: transform .08s ease, box-shadow .15s ease, border-color .15s ease;
}

button:hover {
    border-color: #879db4;
    box-shadow: 0 2px 10px rgba(16, 32, 52, 0.12);
}

button:active {
    transform: translateY(1px);
}

button:disabled {
    opacity: 0.52;
    cursor: not-allowed;
    box-shadow: none;
}

#calculate {
    border-color: var(--accent-strong);
    background: linear-gradient(180deg, #22a99e, var(--accent));
    color: #fff;
}

#clear, #clear-selected {
    border-color: #d0a1a1;
}

#textarea {
    width: 100%;
    min-height: 16rem;
    max-height: 36vh;
    resize: vertical;
    box-sizing: border-box;
    border: 1px solid #a9b9cb;
    border-radius: 10px;
    padding: 10px;
    background: #fff;
}

#pedigree {
    padding: 8px 14px 14px 8px;
    border: 1px solid var(--panel-border);
    background: linear-gradient(180deg, var(--ped-bg), #f8fdfc);
    border-radius: 16px;
    box-shadow: var(--shadow);
    box-sizing: border-box;
    float: right;
    width: calc(72% - 16px);
    min-height: calc(100vh - 120px);
    overflow: auto;
}

body.results #pedigree {
    width: calc(65% - 16px);
}

table {
    border-collapse: collapse;
    font-size: 1em;
}

td {
    padding: 0;
}

#pedigree td:first-child {
    width: 8em;
    padding: 3px;
    position: relative;
}

tr.s > td:first-child::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 2px;
    height: 50%;
    border: solid var(--line);
    border-width: 1px 0 0 1px;
}

tr.d > td:first-child::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 50%;
    width: 2px;
    height: 50%;
    border: solid var(--line);
    border-width: 0 0 1px 1px;
}

input.ind {
    width: 10em;
    border: 1px solid #a4b4c6;
    border-radius: 6px;
    padding: 2px 4px;
    background: var(--input-bg);
    color: var(--text);
}

input.ind:focus,
#textarea:focus {
    outline: none;
    border-color: #5ea09a;
    box-shadow: 0 0 0 3px rgba(62, 160, 150, 0.18);
    background: var(--input-focus);
}

.more {
    white-space: nowrap;
    cursor: pointer;
    color: #0b4f9d;
    font-weight: 700;
}

.more:hover {
    text-decoration: underline;
}

ul.name-choices {
    position: absolute;
    z-index: 2;
    margin: 0;
    padding: 0;
    border: 1px solid #9fb1c5;
    border-top: none;
    background-color: #fff;
    color: #4c6175;
    list-style: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 8px 14px rgba(18, 34, 58, 0.12);
}

ul.name-choices > li {
    margin: 0;
    padding: 2px 6px;
    cursor: pointer;
}

ul.name-choices > li:hover {
    background-color: #e8f5f3;
    color: #12403b;
}

#confirmDialog {
    position: absolute;
    z-index: 10;
    width: 320px;
    background: #fff;
    border: 1px solid #9eb0c4;
    text-align: center;
    border-radius: 12px;
    box-shadow: var(--shadow);
    padding: 8px 12px;
}

@media (max-width: 1100px) {
    body {
        padding: 12px;
    }

    #controls,
    body.results #controls,
    #pedigree,
    body.results #pedigree {
        float: none;
        width: 100%;
        min-height: auto;
    }

    #controls {
        margin-bottom: 12px;
    }

    #pedigree {
        min-height: 62vh;
    }
}