.qlw-wheel {
    --qlw-gold: #C9A24A;
    --qlw-max-width: 1254px;
    width: 100%;
    max-width: var(--qlw-max-width);
    margin: 0 auto;
    margin-inline: auto !important;
    box-sizing: border-box;
}

.qlw-wheel__stage {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    line-height: 0;
    isolation: isolate;
}

/*
 * Main wheel image.
 *
 * Imagify and similar WebP optimisers can replace:
 *
 *   <img class="qlw-wheel__image">
 *
 * with:
 *
 *   <picture class="qlw-wheel__image">
 *       <source ...>
 *       <img ...>
 *   </picture>
 *
 * The sizing therefore has to support both the original <img>
 * and an optimiser-generated <picture> wrapper.
 */
.qlw-wheel__stage > .qlw-wheel__image {
    display: block;
    width: 100%;
    height: 100%;
}

.qlw-wheel__stage > img.qlw-wheel__image,
.qlw-wheel__stage > picture.qlw-wheel__image > img,
.qlw-wheel__stage > picture > img.qlw-wheel__image {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: contain;
    object-position: center center;
    user-select: none;
    -webkit-user-drag: none;
}

/*
 * Ensure an optimiser-generated <picture> itself fills the square stage
 * and does not introduce inline baseline spacing or alter the overlay geometry.
 */
.qlw-wheel__stage > picture.qlw-wheel__image {
    line-height: 0;
    overflow: hidden;
}

.qlw-wheel__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    touch-action: manipulation;
}

.qlw-region {
    fill: rgba(201, 162, 74, 0);
    stroke: rgba(201, 162, 74, 0);
    stroke-width: 3;
    vector-effect: non-scaling-stroke;
    cursor: default;
    outline: none;
    transition: fill 180ms ease, stroke 180ms ease, filter 180ms ease;
}

.qlw-region[data-qlw-url] {
    cursor: pointer;
}

.qlw-region.is-primary {
    fill: rgba(201, 162, 74, 0.20);
    stroke: rgba(201, 162, 74, 0.96);
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.24));
}

/* Related category and principles stay deliberately subtle. */
.qlw-region.is-related {
    fill: rgba(201, 162, 74, 0.09);
    stroke: rgba(201, 162, 74, 0.58);
    filter: drop-shadow(0 0 3px rgba(201, 162, 74, 0.20));
}

.qlw-region:focus-visible {
    stroke-width: 5;
}

.qlw-tooltip {
    position: absolute;
    z-index: 4;
    left: 50%;
    top: 50%;
    min-width: 190px;
    max-width: min(340px, 78vw);
    padding: 11px 14px 12px;
    border: 1px solid rgba(201, 162, 74, 0.72);
    border-radius: 8px;
    background: rgba(24, 24, 24, 0.95);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
    color: #fff;
    line-height: 1.3;
    text-align: left;
    pointer-events: none;
    transform: translate(-50%, calc(-100% - 14px));
    will-change: left, top, transform;
}

.qlw-tooltip.is-below {
    transform: translate(-50%, 14px);
}

.qlw-tooltip[hidden],
.qlw-tooltip [hidden] {
    display: none;
}

.qlw-tooltip__eyebrow {
    display: block;
    margin-bottom: 3px;
    color: #e6c979;
    font-family: Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.qlw-tooltip__label {
    display: block;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 15px;
    font-weight: 600;
}

.qlw-tooltip__category,
.qlw-tooltip__principles,
.qlw-tooltip__action {
    display: block;
    font-family: Arial, sans-serif;
    line-height: 1.35;
}

.qlw-tooltip__category {
    margin-top: 5px;
    font-size: 11px;
    font-weight: 700;
}

.qlw-tooltip__category--qly { color: #D84A4A !important; }
.qlw-tooltip__category--qli { color: #D4B23C !important; }
.qlw-tooltip__category--qlt { color: #4F8A4A !important; }
.qlw-tooltip__category--qlo { color: #4A78B8 !important; }

.qlw-tooltip__principles {
    margin-top: 6px;
    font-size: 11px;
    font-weight: 600;
}

.qlw-tooltip__principles-heading {
    display: block;
    margin-bottom: 4px;
    color: #9aa0a6 !important;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.qlw-tooltip__principle {
    display: block;
    line-height: 1.45;
}

.qlw-tooltip__principle--active,
.qlw-tooltip__principle--active .qlw-tooltip__bullet {
    color: #ffffff !important;
}

.qlw-tooltip__principle--inactive,
.qlw-tooltip__principle--inactive .qlw-tooltip__bullet {
    color: #7f858d !important;
}

.qlw-tooltip__action {
    margin-top: 7px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 10px;
}

.qlw-wheel__instruction {
    margin: 10px 0 0;
    color: #5b5666;
    font-family: Arial, sans-serif;
    font-size: 13px;
    line-height: 1.4;
    text-align: center;
}

/* Keep the wheel more contained on laptop and desktop screens.
   The image and SVG overlay scale together, so all hover/tap regions stay aligned. */
@media (min-width: 1025px) {
    .qlw-wheel {
        width: min(100%, 840px);
        max-width: min(var(--qlw-max-width), 840px);
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

@media (hover: none) {
    .qlw-wheel__instruction {
        font-size: 12px;
    }

    .qlw-region[data-qlw-url] {
        cursor: pointer;
    }
}

@media (prefers-reduced-motion: reduce) {
    .qlw-region {
        transition: none;
    }
}

.qlw-tooltip__strapline,
.qlw-tooltip__description {
    display: block;
    font-family: Arial, sans-serif;
    line-height: 1.4;
}

.qlw-tooltip__strapline {
    margin-top: 5px;
    color: #e6c979;
    font-size: 11px;
    font-weight: 700;
}

.qlw-tooltip__description {
    margin-top: 6px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 11px;
    font-weight: 400;
}