/* MIMO Archive — global styles */

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
    line-height: 1;
}

/* Grayscale card images with colour on hover */
.instrument-card-img {
    filter: grayscale(30%);
    transition: filter 0.3s ease;
}
.instrument-card-img:hover {
    filter: grayscale(0%);
}

/* Input focus bottom-bar (design system "sunk" style) */
.input-sunk:focus {
    outline: none;
    border-bottom: 2px solid #420003;
}

/* Blazor error */
.blazor-error-boundary {
    background: #b32121;
    padding: 1rem;
    color: white;
}
.blazor-error-boundary::after {
    content: "An error has occurred."
}

/* Map cluster bubbles — MIMO palette instead of markercluster's default green/orange.
   Outer div = translucent halo, inner div = solid disc with the count. */
.marker-cluster span {
    color: #ffffff;
    font-weight: 600;
    font-family: Inter, sans-serif;
}
.marker-cluster-small { background-color: rgba(137, 114, 111, 0.35); }
.marker-cluster-small div { background-color: #89726f; }
.marker-cluster-medium { background-color: rgba(99, 16, 16, 0.35); }
.marker-cluster-medium div { background-color: #631010; }
.marker-cluster-large { background-color: rgba(66, 0, 3, 0.4); }
.marker-cluster-large div { background-color: #420003; }

/* Country hover tooltip on the collections map */
.mimo-country-tooltip {
    background: #ffffff;
    border: 1px solid #ddc0bd;
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(66, 0, 3, 0.15);
    color: #420003;
    font-family: Inter, sans-serif;
    font-size: 12px;
    padding: 6px 10px;
}
.mimo-country-tooltip::before { display: none; }   /* no callout arrow */

/* Scrollbar styling */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f0eded; }
::-webkit-scrollbar-thumb { background: #ddc0bd; border-radius: 3px; }

/* ── Sandbox banner ───────────────────────────────────────────────────────
   Sits above the navbar on every page while the visitor is browsing the
   preview copy. Not dismissible: the sandbox is a faithful-looking copy of
   the real collection, so this bar is the only thing telling the two apart. */
.sandbox-banner {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    padding: .5rem 1rem;
    background: #8a3d12;
    color: #fff;
    font-size: .8125rem;
    line-height: 1.4;
}
.sandbox-banner__label {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: .1rem .5rem;
    border: 1px solid currentColor;
    border-radius: 3px;
    flex: none;
}
.sandbox-banner a {
    color: #fff;
    text-decoration: underline;
    margin-left: auto;
    flex: none;
}