/* ── Tool info grid ──────────────────────────────────────────── */
.tool-info {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    margin-top: 1.5rem;
}
.tool-info .item-box .font-alt {
    line-height: 1.1;
}
@media (max-width: 1199px) {
    .tool-info {
        gap: .7rem;
    }
    .tool-info .item-box {
        padding: 20px 10px;
    }
}
@media (max-width: 991px) {
    .tool-info {
        grid-template-columns: repeat(3, 1fr);
    }
    .tool-info .item-box {
        padding: 17px 10px;
    }
}
@media (max-width: 592px) {
    .tool-info {
        grid-template-columns: repeat(2, 1fr);
        gap: .7rem;
        font-size: 0.9rem !important;
        line-height: 1.3;
    }
    .tool-info .item-box {
        padding: 15px 10px;
    }
    .tool-info .item-box .font-alt {
        line-height: 1.1;
        font-size: 1.2rem !important;
        margin-bottom: 10px;
    }
}

.galaxy-holder {
    background: var(--color-paper);
    border: 1px solid var(--color-brown);
    padding: 0px;
    padding-top: 20px;
    width: 100%;
}

/* ── Galaxy map wrapper ───────────────────────────────────────── */
.galaxy-map {
    position: relative;
    display: block;
    width: 100%;
    user-select: none;
}
.galaxy-map > img {
    display: block;
    width: 100%;
    height: auto;
    /* Hide the SVG's own circles/text since we're overlaying HTML */
}

/* ── Dots ────────────────────────────────────────────────────── */

.galaxy-dot,
.galaxy-label-text {
    position: absolute;
    transform: translate(-50%, -50%);
}

.galaxy-dot {
    width:  2%;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 2px solid var(--color-orange);
    background: var(--color-paper);
    transition: background 0.2s;
    cursor: pointer;
    box-sizing: border-box;
}

/* Collaborator has a larger dot (r=3.47 vs 2.92) 
.galaxy-dot[data-type="collaborator"] {
    width: 1.384%;
}*/

.galaxy-dot.active,
.galaxy-dot:hover {
    background: var(--color-orange);
}

/* ── Label text ──────────────────────────────────────────────── */
.galaxy-label-text {
    /*font-size: clamp(0.4rem, 0.9vw, 0.65rem);
    letter-spacing: 0.04em;*/
    
    color: var(--color-brown);
    cursor: pointer;
    line-height: 1;
    pointer-events: auto;
    cursor: pointer;
    
}
.galaxy-label-text .active, .galaxy-label-text:hover {
    color: var(--color-orange);
}
.galaxy-label-text .text {
    font-weight: 500;
    white-space: nowrap;
}

/* ── Dot positions — left/top = cx/vw%, cy/vh% ───────────────── */
.galaxy-dot[data-type="collaborator"] { left: 42.739%; top:  9%; }
.galaxy-dot[data-type="champion"]     { left: 62.9%; top: 24.034%; }
.galaxy-dot[data-type="craftsperson"] { left: 28.0%; top: 18.4%; }
.galaxy-dot[data-type="explorer"]     { left: 51.3%; top: 39%; }
.galaxy-dot[data-type="guardian"]     { left: 29.5%; top: 66.0%; }
.galaxy-dot[data-type="strategist"]   { left: 92.5%; top: 51.184%; }
.galaxy-dot[data-type="maverick"]     { left: 74.9%; top: 79%; }
.galaxy-dot[data-type="pragmatist"]   { left: 50.2%; top: 88.8%; }

/* ── Label text positions  ── */
.galaxy-label-text[data-type="collaborator"] { left: 42.5%; top:  6%; }
.galaxy-label-text[data-type="champion"]     { left: 65.3%; top: 23.9%; transform: translate(0%, -50%)  }
.galaxy-label-text[data-type="craftsperson"] { left: 29.5%; top: 21.23%; }
.galaxy-label-text[data-type="explorer"]     { right: 51%; top: 38.7%; transform: translate(0%, -50%) }
.galaxy-label-text[data-type="guardian"]     { left: 27.0%; top: 68.8%; }
.galaxy-label-text[data-type="strategist"]   { right: 10%; top: 51%; transform: translate(0%, -50%) }
.galaxy-label-text[data-type="maverick"]     { left: 73.2%; top: 75.7%; }
.galaxy-label-text[data-type="pragmatist"]   { left: 50.0%; top: 85.8%; }

/* ── Principle popup ─────────────────────────────────────────── */

.principle-popup {
    position: absolute;
    width: clamp(250px, 40%, 400px);
    background: var(--color-paper);
    border: 1px solid var(--color-brown);
    padding: clamp(14px, 2vw, 30px) clamp(16px, 2.2vw, 26px);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 10;
    box-sizing: border-box;
    text-align: center;
}
.principle-popup.visible {
    opacity: 1;
    pointer-events: auto;
}
.principle-popup .popup-title {
    margin-bottom: clamp(8px, 1.2vw, 12px);
}
.principle-popup .popup-body {
    color: var(--color-brown);
}
.popup-principle {
    font-weight: 600;
    color: var(--color-brown);
    font-style: italic;
    letter-spacing: 0.01em;
}

@media (max-width: 991px) {
    .galaxy-holder {}
    .principle-popup { width: clamp(160px, 42%, 260px);  }
}

@media (max-width: 592px) {

    /* Desktop popup hidden on mobile */
    .principle-popup { display: none; }
    
    .galaxy-dot[data-type="guardian"]     { left: 34.5%; top: 63.0%; }
    .galaxy-dot[data-type="maverick"]     { left: 71.9%; top: 75%; }
    .galaxy-dot[data-type="pragmatist"]   { left: 46.5%; top: 87%; }
    
    /* ── Label text positions — derived from SVG text group centres ── */
    .galaxy-label-text[data-type="collaborator"] { left: 42.5%; top:  4%; }
    .galaxy-label-text[data-type="champion"]     { left: 66%; top: 23.9%; transform: translate(0%, -50%)  }
    .galaxy-label-text[data-type="craftsperson"] { left: 29.5%; top: 23%; }
    .galaxy-label-text[data-type="explorer"]     { right: 52%; top: 38.7%; transform: translate(0%, -50%) }
    .galaxy-label-text[data-type="guardian"]     { left: 27.0%; top: 68%; }
    .galaxy-label-text[data-type="strategist"]   { right: 11%; top: 51%; transform: translate(0%, -50%) }
    .galaxy-label-text[data-type="maverick"]     { left: 64%; top: 79.5%; }
    .galaxy-label-text[data-type="pragmatist"]   { left: 45.0%; top: 92%; }
    
    .galaxy-label-text[data-type="champion"] .text { white-space: pre-wrap; line-height: 105%;  }

    /* Mobile popup */
    .mobile-popup {
        display: none;
        position: absolute;
        inset: 0;
        z-index: 20;
        align-items: center;
        justify-content: center;
        padding: 20px;
        box-sizing: border-box;
        margin-top: -20px
    }
    .mobile-popup.visible {
        display: flex;
    }
    
    .galaxy-dot {
        width:  3%;
        border: 1px solid var(--color-orange);
    }

    /* Hide only principle name labels when popup is open; dots + SVG stay visible */
    .galaxy-map.popup-active .galaxy-label-text {
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s;
    }

    .mobile-popup-card {
        background: var(--color-paper);
        border: 1px solid var(--color-brown);
        padding: 32px 24px;
        text-align: center;
        width: 100%;
        max-width: 320px;
        box-sizing: border-box;
    }
    .mobile-popup .popup-title {
        color: var(--color-brown);
        margin-bottom: 15px;
        font-size: 1.5rem;
    }
    .mobile-popup .popup-principle {
        
        color: var(--color-brown);
        margin-bottom: 15px;
        line-height: 1.3;
        opacity: 0.75;
    }
    .mobile-popup .popup-body {
        line-height: 1.4;
        color: var(--color-brown);
    }
}