svg {
    width: 100%; /* Scale the SVG to fit the container width */
    height: auto; /* Maintain the aspect ratio */
    max-width: 500px; /* Optional: Set a maximum width for larger screens */
}

.question {
    margin-bottom: 30px;
}

.slider-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
}

.slider-container span {
    width: 20%;
    text-align: center;
    font-size: 0.9em;
    color: color-mix(in lab, var(--text-color, white), #333 60%);
}

.quadrant.strength {
    border-color: hsla(120, 50%, 50%, 0.75);
    background-color: hsla(120, 50%, 50%, 0.1);
}

.quadrant.weakness {
    border-color: hsla(60, 50%, 50%, 0.75);
    background-color: hsla(60, 50%, 50%, 0.1);
}

.quadrant.opportunity {
    border-color: hsla(240, 50%, 50%, 0.75);
    background-color: hsla(240, 50%, 50%, 0.1);
}

.quadrant.threat {
    border-color: hsla(300, 50%, 50%, 0.75);
    background-color: hsla(300, 50%, 50%, 0.1);
}

#results:not(:has(*)) {
    display: none;
}

#results {
    background-color: ;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

#results h2 {
    margin-top: 0;
    text-align: center;
}

.suggestion:has(input[type="checkbox"]:not(:checked)) > label {
    opacity: 0.3;
    text-decoration: line-through;
    transition: all ease-in-out 0.1s;
}

.result-summary {
    margin-top: 1rem;
    margin-bottom: 2rem;
    text-align: center;
    background: hsla(210,100%, 100%, 0.05);
    border: 1px solid color-mix(in lab, var(--background-color), #333 70%);
    border-radius: 0.5rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.result-summary h2 {
    margin: 0;
    padding: var(--spacing-lg);
    background-color: var(--color-primary);
    color: var(--color-text-light);
    border-top-left-radius: var(--border-radius-md);
    border-top-right-radius: var(--border-radius-md);
}

.result-summary .result-body {
    margin-block: var(--spacing-lg);
    margin-inline: var(--spacing-sm);
    & p {font-size: 0.85rem; opacity: 0.5;}
    & p,form {text-align: left;}
}

.radarChartLegend {
    display: flex;
    justify-content: center; /* Center the legend items horizontally */
    align-items: center; /* Align items vertically */
    gap: 20px; /* Add space between legend items */
    margin-top: 20px; /* Add space above the legend */
    font-family: Arial, sans-serif; /* Clean font style */
    font-size: 14px; /* Text size */
}

.legendEntry {
    position: relative; /* Needed for the :before pseudo-element */
    padding-left: 25px; /* Space for the dot */
    color: color-mix(in lab, var(--text-color), #333 70%); /* Default text color */
    cursor: default; /* Show pointer is not active for these items */
}

.legendEntry:before {
    content: ''; /* Creates the dot */
    position: absolute; /* Position it relative to the parent */
    left: 0; /* Place it before the text */
    top: 50%; /* Center it vertically */
    transform: translateY(-50%); /* Adjust for alignment */
    width: 15px; /* Dot width */
    height: 15px; /* Dot height */
    border-radius: 50%; /* Make it circular */
    opacity: 0.5; /* Set semi-transparency */
}

/* Dynamic colors based on data-category */
.legendEntry[data-category="internal"]:before {
    background-color: green; /* Green dot for internal factors */
}

.legendEntry[data-category="external"]:before {
    background-color: purple; /* Purple dot for external factors */
}

.axis-label {
    fill: color-mix(in lab, var(--text-color, white), hsla(210,0%,0%) 10%);
    stroke: color-mix(in lab, var(--text-color, white), hsla(210,0%,0%) 80%);
    stroke-width: 0.1;
}

.radar-line {
    stroke: color-mix(in lab, var(--text-color, white), hsl(210,0%,0%,10%) 80%);
    opacity: 0.5;
}

.radar-web-line {
    stroke: color-mix(in lab, var(--text-color, white), hsla(210,0%,0%,10%) 90%);
    opacity: 0.7;
    stroke-dasharray: 3 5;
    fill: none;
}

@media (max-width: 600px) {
    .slider-container span {
        font-size: 0.8em;
    }
}

    .extreme-A.highlight{
        color: color-mix(in lab, var(--text-color), #22a 50%);
    }
    .extreme-B.highlight{
        color: color-mix(in lab, var(--text-color), #824 50%);
    }

@media (orientation: portrait) {

    .slider-container {
        flex-direction: column;
        align-items: stretch;
    }

    .slider-container span {
        width: 100%;
        margin-bottom: 5px;
    }

    .highlight {
        font-weight: bold;
    }

}