/* Geneograph module */
.geneo-home-page [data-geneo-import]:disabled {
    opacity: .45;
    cursor: not-allowed;
    filter: none;
}

.geneo-home-page [data-geneo-import]:disabled:hover {
    background: var(--surface-card-hover);
    filter: none;
}

.geneo-home-page {
    height:
        100%;
    min-width:
        0;
    overflow:
        auto;
    padding:
        var(--space-6);
    background:
        var(--surface-workspace);
}

.geneo-board-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-7, 28px);
}

.geneo-board-toolbar-left,
.geneo-board-toolbar-right {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.geneo-mobile-search-trigger,
.geneo-mobile-search-close {
    display: none;
}

.geneo-mobile-search-trigger:focus-visible,
.geneo-mobile-search-close:focus-visible {
    outline: 2px solid var(--brand-green-300);
    outline-offset: 2px;
}

.geneo-board-section {
    width:
        100%;

    min-width:
        0;

    margin-bottom:
        var(--space-8);
}

.geneo-board-grid {
    display:
        grid;

    grid-template-columns:
        repeat(auto-fill,
            min(100%, 328px));

    align-items:
        stretch;

    gap:
        var(--space-4);
}

.geneo-board-list {
    display:
        grid;

    gap:
        var(--space-3);
}

.geneo-board-card {
    position:
        relative;

    min-width:
        0;

    border:
        1px solid var(--border-default);

    border-radius:
        var(--radius-sm);

    background:
        var(--surface-card);

    overflow:
        hidden;

    text-align:
        left;

    cursor:
        pointer;

    transition:
        transform var(--ease),
        background var(--ease),
        border-color var(--ease),
        box-shadow var(--ease);
}

.geneo-board-card:hover {
    transform:
        translateY(-1px);

    border-color:
        var(--border-strong);

    background:
        var(--surface-card-hover);
}

.geneo-board-card:focus-within {
    border-color: var(--border-strong);
}

.geneo-board-open-area {
    position: absolute;
    z-index: 1;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.geneo-board-open-area:focus-visible {
    outline:
        2px solid var(--brand-green-500);

    outline-offset:
        -3px;

    border-radius: var(--radius-sm);
}

/* Grid card */

.geneo-board-grid .geneo-board-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(56px, auto);
}

.geneo-thumb {
    height:
        92px;

    flex:
        0 0 92px;

    border-bottom:
        1px solid var(--border-default);

    background: var(--surface-card);

    position:
        relative;

    overflow:
        hidden;
}

.geneo-board-grid .geneo-thumb {
    grid-column: 1 / -1;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
}

.geneo-thumb .geneo-preview-art {
    display: block;
    width: 100%;
    height: 100%;
}

.geneo-board-cover-shade {
    position: absolute;
    inset: 25% 0 0;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        color-mix(in srgb, var(--gg-scrim) 38%, transparent) 45%,
        color-mix(in srgb, var(--gg-scrim) 88%, transparent) 100%
    );
}

.geneo-board-cover-title {
    position: absolute;
    right: var(--space-3);
    bottom: var(--space-4);
    left: var(--space-3);
    margin: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--text-on-media);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    text-shadow: 0 1px 2px color-mix(in srgb, var(--gg-scrim) 35%, transparent);
}

.geneo-board-body {
    min-width:
        0;

    padding:
        var(--space-3);
}

.geneo-board-grid .geneo-board-body {
    padding-bottom: 0;
}

.geneo-board-grid .geneo-board-body h3 {
    display: none;
}

.geneo-board-body h3 {
    min-height:
        0;
    margin:
        0 0 6px;
    overflow:
        hidden;
    display:
        -webkit-box;
    color:
        var(--text-primary);
    font-size:
        15px;
    line-height:
        1.28;
    line-clamp:
        2;
    -webkit-line-clamp:
        2;
    -webkit-box-orient:
        vertical;
}

.geneo-collection-sidebar-empty,
.sidebar-entity-empty {
    padding:
        var(--space-3);
}

.geneo-board-section-description {
    max-width:
        760px;

    margin:
        calc(-1 * var(--space-2)) 0 var(--space-4);

    color:
        var(--text-tertiary);

    font-size:
        13px;

    line-height:
        1.5;
}

.geneo-board-collections {
    min-width: 0;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.geneo-board-collection-chip {
    box-sizing: border-box;
    flex: 0 0 auto;
    min-width: 0;
    max-width: 100%;
    min-height: 24px;

    padding: 0 8px;
    border-radius: 5px;
    background: color-mix(in srgb, var(--gg-text) 5.5%, transparent);
    color: var(--text-secondary);

    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-size: 11px;
    font-weight: 750;
    line-height: 24px;
}

.geneo-board-collection-chip.no-collection {
    background:
        color-mix(in srgb, var(--gg-text) 3%, transparent);

    color:
        var(--text-tertiary);

    font-weight:
        700;
}

.geneo-board-collection-chip.count {
    flex:
        0 0 auto;

    color:
        var(--text-tertiary);
}

.geneo-board-create-modal,
.geneo-board-settings-modal {
    width:
        min(720px,
            calc(100vw - 32px));

    max-height:
        calc(100vh - 48px);

    overflow:
        hidden;

    display:
        grid;

    grid-template-rows:
        auto minmax(0, 1fr);
}

.geneo-board-create-modal>form,
.geneo-board-settings-modal>form {
    min-height:
        0;

    display:
        grid;

    grid-template-rows:
        minmax(0, 1fr) auto;
}

.geneo-board-create-modal .modal-body,
.geneo-board-settings-modal .modal-body {
    min-height:
        0;

    overflow-y:
        auto;
}

.geneo-board-settings-modal {
    width: min(880px, calc(100vw - 32px));
}

.geneo-board-settings-modal #geneographSettingsDescription {
    field-sizing: content;
    min-height: 72px;
    max-height: 180px;
}

.geneo-collection-chooser {
    min-width:
        0;

    display:
        grid;

    gap:
        var(--space-3);
}

.geneo-collection-chooser-head {
    min-width:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        var(--space-3);
}

.geneo-collection-chooser-head>h3 {
    margin:
        0;

    color:
        var(--text-secondary);

    font-weight:
        700;

    font-size: 14px;
}

.geneo-collection-browse {
    min-width:
        0;

    gap:
        var(--space-2);
}

.geneo-collection-search-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: var(--space-3);
    min-width: 0;
}

.geneo-collection-search-row .album-picker-search {
    min-width: 0;
}

.geneo-collection-search-row :is(.app-search-field, .button) {
    background: var(--surface-input);
}

.geneo-collection-new-button {
    white-space: nowrap;
    height: var(--control-height);
    min-height: var(--control-height);
}

.geneo-collection-browse .album-picker-results-panel {
    display: block;
}

.geneo-collection-chooser .geneo-collection-results {
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
    overflow-x: visible;
    overflow-y: visible;
    scrollbar-gutter: auto;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
}

.geneo-collection-results .album-picker-result {
    min-height: 64px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: var(--space-2) var(--space-3);
}

.geneo-collection-status {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/*
    Important:
    collection checkboxes are choice controls,
    not standard .field text inputs.
*/
.geneo-collection-chooser .album-picker-result input[type="checkbox"] {
    width:
        18px;

    min-width:
        18px;

    max-width:
        18px;

    height:
        18px;

    min-height:
        18px;

    max-height:
        18px;

    padding:
        0;

    margin:
        0;

    accent-color:
        var(--brand-green-500);
}

.geneo-collection-create-panel {
    padding:
        var(--space-4);

    border:
        1px solid var(--border-default);

    border-radius:
        var(--radius-sm);

    background:
        color-mix(in srgb, var(--gg-text) 1.8%, transparent);
}

.geneo-inline-collection-actions {
    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        var(--space-3);
}

@media (max-width: 620px) {
    .geneo-board-create-modal,
    .geneo-board-settings-modal {
        width:
            min(100%,
                calc(100vw - 24px));

        max-height:
            calc(100vh - 24px);
    }

    .geneo-collection-new-button {
        width: var(--control-height);
        padding: 0;
        display: grid;
        place-items: center;
    }

    .geneo-collection-new-button span {
        display: none;
    }
}

.geneo-board-modified {
    min-width:
        0;

    color:
        var(--text-secondary);

    font-size:
        12px;

    line-height:
        1.35;
}

.geneo-board-grid .geneo-board-footer .geneo-board-modified-grid {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.geneo-board-grid .geneo-board-modified-list,
.geneo-board-list .geneo-board-modified-grid {
    display: none;
}

.geneo-board-footer {
    padding:
        var(--space-3);

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    align-self:
        center;

    position: relative;

    z-index: 2;

    gap:
        var(--space-2);
}

.geneo-star,
.geneo-more {
    width:
        40px;

    height:
        40px;

    min-width:
        40px;

    position: absolute;

    z-index: 2;

    top: var(--space-2);

    padding:
        0;

    border:
        1px solid color-mix(in srgb, var(--gg-text) 12%, transparent);

    border-radius:
        8px;

    background:
        color-mix(in srgb, var(--gg-background) 72%, transparent);

    color:
        color-mix(in srgb, var(--gg-text) 88%, transparent);

    display:
        inline-grid;

    place-items:
        center;

    transition:
        opacity var(--ease),
        background var(--ease),
        border-color var(--ease),
        color var(--ease);
}

.geneo-star {
    left: var(--space-2);
}

.geneo-more {
    right: var(--space-2);
}

.geneo-star svg {
    width:
        16px;

    height:
        16px;

    display:
        block;
}

.geneo-more svg {
    width:
        18px;

    height:
        18px;

    display:
        block;
}

.geneo-star:hover,
.geneo-more:hover {
    border-color:
        color-mix(in srgb, var(--gg-text) 28%, transparent);

    background:
        color-mix(in srgb, var(--gg-details) 94%, transparent);

    color:
        var(--text-primary);
}

.geneo-star:focus-visible,
.geneo-more:focus-visible {
    outline:
        2px solid var(--brand-green-500);

    outline-offset:
        2px;
}

.geneo-star.active {
    color:
        var(--gg-status-favorite-accent);
}

/*
    Non-favourite stars stay quiet until
    the card is being interacted with.
*/
.geneo-board-card .geneo-star:not(.active) {
    opacity:
        0;

    pointer-events:
        none;
}

.geneo-board-card:hover .geneo-star,
.geneo-board-card:focus-within .geneo-star {
    opacity:
        1;

    pointer-events:
        auto;
}

/* Dedicated list presentation */

.geneo-board-list .geneo-board-card {
    min-height:
        104px;

    display:
        grid;

    grid-template-columns:
        104px minmax(0, 1fr) auto;

    align-items:
        stretch;
}

.geneo-board-list .geneo-thumb {
    width:
        104px;

    height:
        100%;

    min-height:
        104px;

    border-right:
        1px solid var(--border-default);

    border-bottom:
        0;
}

.geneo-board-list .geneo-board-cover-shade,
.geneo-board-list .geneo-board-cover-title {
    display: none;
}

.geneo-board-list .geneo-star {
    left: 8px;
}

.geneo-board-list .geneo-more {
    right: auto;
    left: 56px;
}

.geneo-board-list .geneo-board-body {
    padding:
        var(--space-3);
}

.geneo-board-list .geneo-board-body h3 {
    min-height:
        0;

    margin-bottom:
        4px;

    line-clamp:
        1;

    -webkit-line-clamp:
        1;
}

.geneo-board-list .geneo-board-collections {
    margin-bottom:
        4px;
}

.geneo-board-list .geneo-board-footer {
    min-width:
        90px;

    padding:
        var(--space-3);

    justify-content:
        flex-end;

    align-self:
        center;
}

/* Create / import peer tile */

.geneo-board-action-tile {
    min-width:
        0;

    min-height:
        238px;

    padding:
        var(--space-4);

    border:
        1px dashed var(--border-strong);

    border-radius:
        var(--radius-sm);

    background:
        color-mix(in srgb, var(--gg-text) 1.2%, transparent);

    color:
        var(--text-primary);

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        var(--space-3);

    text-align:
        center;

    font:
        inherit;

    cursor:
        pointer;

    transition:
        transform var(--ease),
        background var(--ease),
        border-color var(--ease),
        box-shadow var(--ease);
}

.geneo-board-action-tile:hover {
    transform:
        translateY(-1px);

    border-color:
        color-mix(in srgb, var(--gg-primary) 42%, transparent);

    background:
        color-mix(in srgb, var(--gg-primary) 3.5%, transparent);
}

.geneo-board-action-tile:focus-visible {
    outline:
        2px solid var(--brand-green-500);

    outline-offset:
        2px;
}

.geneo-board-action-tile-icon {
    width:
        42px;

    height:
        42px;

    border:
        1px solid color-mix(in srgb, var(--gg-primary) 20%, transparent);

    border-radius:
        10px;

    background:
        color-mix(in srgb, var(--gg-primary) 10%, transparent);

    color:
        var(--brand-green-300);

    display:
        grid;

    place-items:
        center;
}

.geneo-board-action-tile-icon svg {
    width:
        21px;

    height:
        21px;

    display:
        block;
}

.geneo-board-action-copy {
    min-width:
        0;

    display:
        grid;

    justify-items:
        center;

    gap:
        4px;
}

.geneo-board-action-copy strong {
    color:
        var(--text-primary);

    font-size:
        15px;

    line-height:
        1.3;
}

.geneo-board-action-copy span {
    max-width:
        260px;

    color:
        var(--text-tertiary);

    font-size:
        12px;

    line-height:
        1.4;
}

.geneo-board-list .geneo-board-action-tile {
    min-height:
        104px;

    padding:
        var(--space-3);

    display:
        grid;

    grid-template-columns:
        44px minmax(0, 1fr);

    align-items:
        center;

    justify-items:
        start;

    gap:
        var(--space-3);

    text-align:
        left;
}

.geneo-board-list .geneo-board-action-tile-icon {
    width:
        44px;

    height:
        44px;
}

.geneo-board-list .geneo-board-action-copy {
    justify-items:
        start;

    text-align:
        left;
}

.geneo-board-empty {
    color:
        var(--text-tertiary);
}

@media (hover: none) {
    .geneo-board-card .geneo-star:not(.active) {
        opacity:
            1;

        pointer-events:
            auto;
    }
}