/* Shared receptor / scent-vis styles — news and whitepaper */

/* ---------------------Receptor scale layout */
.receptor-scale-inner {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 1lh;

    @media (max-width: 1150px) {
        flex-direction: column;
        align-items: center;
    }
}

.receptor-scale-panel {
    text-align: center;
}

.receptor-scale-label {
    font-size: 0.82rem;
    margin-top: 0.5rem;
}

.molecule {
    margin-bottom: 1.25rem;
}

/* ---------------------Receptor scale grid */
.receptor-scale-wrap {
    margin: 2rem 0;
}

.receptor-scale-grid {
    display: inline-grid;
    align-self: center;
}

.rgb-grid,
.olf-grid,
.scent-grid-inner,
.xr-ye-inner {
    grid-template-columns: repeat(20, 1fr);
}

.olf-grid,
.scent-grid,
.scent-grid-inner,
.receptor-shorthand,
.xr-ye-inner {
    filter: grayscale(1);
}

.rgb-grid {
    grid-template-rows: repeat(20, 1fr);
}

.olf-grid {
    width: fit-content;
}

.receptor-scale-cell {
    width: 1lh;
    height: 1lh;
    cursor: pointer;
    position: relative;
}

.receptor-scale-cell[data-name]:hover {
    border: .5px solid #000000;
    cursor: crosshair;
}

.receptor-scale-cell:not([data-name]) {
    cursor: default;
    pointer-events: none;
}

/* ---------------------Scent grid panel */
.scent-grid-panel {
    background-color: white;
    border: var(--border);
    padding: 1lh;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: fit-content;
}

.olf-count {
    font-family: 'Mercure-Mono';
    letter-spacing: 0.02em;
    margin: 0 !important;
    align-self: flex-end;
}

.receptor-label {
    min-height: 1.4em;
    text-align: left;
    font-family: 'Mercure-Mono';
    margin-top: 0.4rem;
    letter-spacing: 0.02em;
}

.molecule-name {
    text-align: center;
    margin: 1lh 0;
    width: 100%;
}

/* ---------------------Scent grid (React component) */
.demo-container {
    margin: auto 0;
}

.scent-grid-figure {
    position: relative;
    width: fit-content;
    margin: 0 auto;
}

.viz-caption {
    font-size: 0.75em;
    text-align: left;
    max-width: 29.33lh;
    padding: 1lh;
}

.scent-grid-inner {
    display: grid;
    background: white;
    width: fit-content;
}

.grid-cell {
    width: 1lh;
    height: 1lh;
}

.grid-cell:hover {
    border: .5px solid #000000;
    cursor: crosshair;
}

.receptor-shorthand {
    display: flex;
    /* gap: 2px; */
    margin-top: 4px;
    align-self: flex-end;
}

.receptor-shorthand:hover {
    filter: initial;
}

.receptor-shorthand-cell {
    cursor: default;
}

/* ---------------------Explore the Receptor Code interactive card */
.xr-container {
    display: flex;
    width: fit-content;
    margin: 0 auto;
    gap: 1lh;
    align-items: flex-start;
}

.xr-container+.viz-caption {
    padding-top: 1lh;
    max-width: fit-content;
    margin: auto;
}

.xr-grid-wrap {
    display: flex;
    flex-direction: column;
}

.xr-grid-side {
    flex-shrink: 0;
}

/* Hide ye's internal caption — replaced by our viz-caption below the panel */
.xr-ye-figure>p {
    display: none;
}

.xr-ye-figure {
    position: relative;
}

.xr-ye-inner {
    display: grid;
    width: fit-content;
}

.xr-ye-inner .grid-cell:hover {
    cursor: crosshair;
}

.xr-ye-inner .grid-cell:hover,
.xr-ye-inner .grid-cell.receptor-selected {
    border: var(--border);
}

.xr-panel {
    background-color: white;
    border: var(--border);
    padding: 1lh;
    width: 22lh;
    height: 27lh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.xr-receptor-name {
    font-family: 'Mercure-Mono';
    font-size: 1em;
    font-weight: normal;
    margin-bottom: 0.5lh;
}

.xr-profile-subtitle {
    font-size: 1em;
    font-weight: normal;
    margin-bottom: 0.5lh;
}

.xr-descriptor-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0lh 1lh;
    font-family: 'Mercure-Mono';
    font-size: 0.75em;
}

.xr-descriptor-row {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
}

.xr-descriptor-r {
    flex-shrink: 0;
}

.xr-empty-msg {
    font-size: 0.75em;
    line-height: 1.6;
}

@media (max-width: 668px) {

    .scent-grid-figure,
    .scent-grid-panel,
    .scent-grid-inner {
        width: 100%;
    }

    .scent-grid-inner .grid-cell {
        width: auto;
        height: auto;
        aspect-ratio: 1;
    }

    .receptor-scale-grid {
        width: 100%;
    }

    .receptor-scale-cell {
        width: auto;
        height: auto;
        aspect-ratio: 1;
    }

    .receptor-shorthand-cell {
        width: calc((100vw - 4lh) / 20);
        height: calc((100vw - 4lh) / 20);
    }

    .viz-caption {
        max-width: 100%;
    }
}