.map-card { 
    background:var(--navy-card);
    border:1px solid var(--border);
    border-radius:12px;
    overflow:hidden;
    margin-top:1.25rem;
}
.map-card-header { 
    padding:.8rem 1.1rem;
    border-bottom:1px solid var(--border);
    background:rgba(0,0,0,.15);
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:.5rem;
}
.map-card-header .mch-title { 
    font-family:'Space Grotesk',sans-serif;
    font-size:.82rem;
    font-weight:600;
    color:var(--white);
}
.map-hint { 
    font-size:.74rem;
    color:var(--text-dim);
    display:flex;
    align-items:center;
    gap:.4rem;
    flex-basis: 100%;   /* forces it to take the full row, pushing it to a new line */
    margin-left:60%;
}
.map-hint::before { 
    content:'●';
    color:var(--cyan);
    font-size:.5rem;
}
.map-placeholder { 
    background:#0a1a30;
    min-height:460px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:1rem;
    padding:2rem;
    text-align:center;
}
.map-placeholder svg { 
    opacity:.3;
}
.map-placeholder p { 
    color:var(--text-dim);
    font-size:.88rem;
}
.map-placeholder small { 
    color:var(--text-dim);
    font-size:.75rem;
    opacity:.6;
}
.map-caption { 
    padding:.7rem 1.1rem;
    font-size:.78rem;
    color:var(--text-dim);
    font-style:italic;
    border-top:1px solid var(--border);
}

.info-grid { 
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:.75rem;
    margin-top:1.25rem;
}
.info-card { 
    background:var(--navy-card);
    border:1px solid var(--border);
    border-left:3px solid var(--cyan);
    border-radius:0 10px 10px 0;
    padding:.9rem 1.1rem;
}
.info-card h3 { 
    font-family:'Space Grotesk',sans-serif;
    font-size:.8rem;
    font-weight:600;
    color:var(--white);
    margin-bottom:.35rem;
}
.info-card p { 
    font-size:.8rem;
    color:var(--text-dim);
    line-height:1.55;
}