.section-hkap-sgp form {
    margin-bottom: 1.5rem;
}

.section-hkap-sgp form > .flex-box > div fieldset {
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    padding: 1rem;
}

.section-hkap-sgp form > .flex-box > div fieldset legend {
    font-family: var(--font-header);
    font-size: var(--font-size-heading-5);
    padding: 0 0.5rem;
    text-align: left;
}

.section-hkap-sgp form > .flex-box > div fieldset select {
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--color-background-standard);
    background-image: url('data:image/svg+xml,<svg height="12" viewBox="0 0 30 12" xmlns="http://www.w3.org/2000/svg"><path fill="%23cf3a4e" d="M16,1.3c0,0.3-0.1,0.6-0.3,0.8L9.1,9C8.8,9.2,8.4,9.4,8,9.4S7.2,9.2,6.9,8.9L0.3,2C0.1,1.8,0,1.6,0,1.3c0-0.4,0.2-0.7,0.5-1C0.8,0.1,1.2,0,1.6,0c0.4,0,0.7,0.2,1,0.4L8,6.2l5.4-5.7C13.7,0.2,14,0,14.4,0c0.4,0,0.8,0.1,1.1,0.3C15.8,0.5,16,0.9,16,1.3z"/></svg>');
    background-position: right 1rem;
    background-repeat: no-repeat;
    background-size: initial;
    border: 2px solid var(--color-link-normal);
    border-radius: 100vw;
    box-sizing: border-box;
    height: 2.5rem;
    padding-right: 3rem;
}

.section-hkap-sgp form > .flex-box > div {
    margin-top: 1.5rem;
    width: 100%;
}

.section-hkap-sgp form > .flex-box fieldset > .flex-box {
    align-items: center;
    margin: 0 auto 0.5rem 0;
    max-width: 8rem;
}

.section-hkap-sgp form > .flex-box fieldset > .flex-box:last-of-type {
    margin-bottom: 0;
}

.section-hkap-sgp form > .flex-box fieldset > .flex-box input[type=radio] {
    accent-color: var(--color-link-normal);
    aspect-ratio: 1 / 1;
    height: 1.25rem;
    margin: 0 0.5rem 0 0;
}

.section-hkap-sgp form > .flex-box fieldset > .flex-box label {
    margin-bottom: 0;
}

.section-hkap-sgp form > .flex-box > div fieldset select {
    margin: 0 auto 0 0;
    max-width: 20rem;
}

.section-hkap-sgp .graph-intro {
    margin-top: 2.5rem;
}

.section-hkap-sgp .graph-intro p:last-child {
    margin-bottom: 0;
}

.section-hkap-sgp .hkap-sgp-graph .bar-x-axis, 
.section-hkap-sgp .hkap-sgp-graph .bar-y-axis, 
.section-hkap-sgp .hkap-sgp-compact-graph .bar-x-axis, 
.section-hkap-sgp .hkap-sgp-compact-graph .bar-y-axis {
    border-color: var(--color-bullet);
    border-style: solid;
    position: absolute;
    z-index: 10;
}

.section-hkap-sgp .hkap-sgp-graph .bar-x-axis, 
.section-hkap-sgp .hkap-sgp-compact-graph .bar-x-axis {
    border-bottom-width: 1px;
    height: 1px;
}

.section-hkap-sgp .hkap-sgp-graph .bar-y-axis, 
.section-hkap-sgp .hkap-sgp-compact-graph .bar-y-axis {
    border-left-width: 1px;
    width: 1px;
}

.section-hkap-sgp .hkap-sgp-graph .y-axis-tick, 
.section-hkap-sgp .hkap-sgp-compact-graph .y-axis-tick {
    border-bottom: 1px solid var(--color-bullet);
    height: 1px;
    position: absolute;
    width: 8px;
    z-index: 10;
}

.section-hkap-sgp .hkap-sgp-graph .y-axis-label, 
.section-hkap-sgp .hkap-sgp-compact-graph .y-axis-label {
    color: var(--color-foreground);
    font-size: var(--font-size-small);
    font-weight: vaR(--font-weight-bold);
    left: 0;
    position: absolute;
    text-align: left;
    width: max-content;
    z-index: 10;
}

.section-hkap-sgp .hkap-sgp-graph .x-axis-tick, 
.section-hkap-sgp .hkap-sgp-compact-graph .x-axis-tick {
    border-left: 1px solid var(--color-bullet);
    height: 8px;
    position: absolute;
    width: 1px;
    z-index: 10;
}

.section-hkap-sgp .hkap-sgp-graph .x-axis-label, 
.section-hkap-sgp .hkap-sgp-compact-graph .x-axis-label {
    color: var(--color-foreground);
    font-size: var(--font-size-small);
    font-weight: vaR(--font-weight-bold);
    margin-right: 0.5rem;
    position: absolute;
    text-align: right;
    width: 32px;
    z-index: 10;
}

.section-hkap-sgp .hkap-sgp-graph .bar-item, 
.section-hkap-sgp .hkap-sgp-compact-graph .bar-item {
    background-color: var(--color-link-normal);
    position: absolute;
    z-index: 15;
}

.section-hkap-sgp .hkap-sgp-graph .bar-circle, 
.section-hkap-sgp .hkap-sgp-compact-graph .bar-circle {
    animation-name: barCirclePulse;
    animation-duration: 2s;
    animation-iteration-count: 1;
    background-color: var(--color-dark-gray-0);
    border-radius: 50%;
    color: var(--color-dark-foreground);
    display: flex;
    flex-wrap: wrap;
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-bold);
    height: 48px;
    place-content: center;
    position: absolute;
    width: 48px;
    z-index: 100;
}

.section-hkap-sgp .hkap-sgp-graph {
    height: clamp(12rem,40vh,20rem);
    margin: 1.5rem auto 0 auto;
    max-width: 40rem;
    position: relative;
}

@keyframes barCirclePulse {
    0%   { scale: 1; }
    50%  { scale: 1.25; }	
    100% { scale: 1; }
}

.graph-explanation p {
    font-size: var(--font-size-small);
    margin: 1.5rem 0 0 0;
    text-align: center;
}

.section-hkap-sgp .hkap-sgp-split {
    gap: 1.5rem;
}

.section-hkap-sgp .hkap-sgp-split > div {
    width: 100%;
}

.section-hkap-sgp .hkap-sgp-split h3 {
    font-family: var(--font-body);
    font-size: var(--font-size-heading-4);
    font-weight: var(--font-weight-semibold);
}

.section-hkap-sgp .hkap-sgp-split h3 + p {
    font-size: var(--font-size-smaller);
    font-weight: var(--font-weight-bold);
    letter-spacing: calc(2 * var(--tracking-basis));
    margin: 0;
    text-transform: uppercase;
}

.section-hkap-sgp .hkap-sgp-split .hkap-sgp-compact-graph {
    aspect-ratio: 5 / 3;
    margin-top: 0.75rem;
    position: relative;
}

.section-hkap-sgp .hkap-sgp-split .hkap-sgp-compact-graph + p {
    font-size: var(--font-size-small);
    margin: 0.5rem 0 0 0;
}

@media (min-width: 48rem) { /* 768 px */
    .section-hkap-sgp form {
        margin: 1.5rem auto 1.5rem 0;
    }
    
    .section-hkap-sgp form > .flex-box {
        align-items: stretch;
        justify-content: space-between;
    }
    
    .section-hkap-sgp form > .flex-box > div:first-child {
        margin: 0 5% 0 0;
        width: 50%;
    }

    .section-hkap-sgp form > .flex-box > div:last-child {
        flex: 1;
        margin: 0;
        width: auto;
    }

    .section-hkap-sgp form > .flex-box fieldset {
        height: 100%;
        text-align: center;
    }

    .section-hkap-sgp .hkap-sgp-split {
        align-items: center;
        gap: 3rem;
    }

    .section-hkap-sgp .hkap-sgp-left {
        flex-direction: row-reverse;
    }

    .section-hkap-sgp .hkap-sgp-split > div {
        flex: 1;
        width: auto;
    }
}

@media (min-width: 64rem) { /* 1024 px */
    .section-hkap-sgp form > .flex-box fieldset > .flex-box {
        display: inline-flex;
        margin-right: 1rem;
        width: max-content;
    }

    .section-hkap-sgp form > .flex-box fieldset > .flex-box:last-child {
        margin-right: 0;
    }
}

@media (prefers-color-scheme: dark) {
    .section-hkap-sgp form > .flex-box > div fieldset select {
        background-image: url('data:image/svg+xml,<svg height="12" viewBox="0 0 30 12" xmlns="http://www.w3.org/2000/svg"><path fill="%23ed9798" d="M16,1.3c0,0.3-0.1,0.6-0.3,0.8L9.1,9C8.8,9.2,8.4,9.4,8,9.4S7.2,9.2,6.9,8.9L0.3,2C0.1,1.8,0,1.6,0,1.3c0-0.4,0.2-0.7,0.5-1C0.8,0.1,1.2,0,1.6,0c0.4,0,0.7,0.2,1,0.4L8,6.2l5.4-5.7C13.7,0.2,14,0,14.4,0c0.4,0,0.8,0.1,1.1,0.3C15.8,0.5,16,0.9,16,1.3z"/></svg>');
    }
}