/*
 *  The marker of an asset that is not there.
 *
 *  It takes the SPACE an image would have taken, so a card does not jump
 *  when one is missing, and it is quiet enough to sit in a gallery without
 *  shouting -- it reports a fact, it is not an error dialog.
 */
.ASSET_MISSING {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    min-width: 5rem;
    min-height: 5rem;
    padding: 0.5rem;
    border: 1px dashed var(--bulma-border, #dbdbdb);
    border-radius: var(--bulma-radius, 4px);
    color: var(--bulma-text-weak, #7a7a7a);
    background: var(--bulma-scheme-main-bis, transparent);
    text-align: center;
}

.ASSET_MISSING_ICON {
    font-size: 1.25rem;
    opacity: 0.7;
}

.ASSET_MISSING_LABEL {
    font-size: 0.75rem;
}

/*
 *  The detail is a name or a path: it must not stretch the card, and it is
 *  the one thing a person can act on, so it stays readable rather than
 *  being cut to nothing.
 */
.ASSET_MISSING_DETAIL {
    font-size: 0.7rem;
    opacity: 0.75;
    max-width: 12rem;
    overflow-wrap: anywhere;
}

/*
 *  A PDF, in the browser's own viewer. It has no height of its own, so it
 *  gets one; a host that wants it bigger sizes it through its own class.
 */
.ASSET_DOCUMENT {
    display: block;
    width: 100%;
    min-height: 24rem;
    border: 1px solid var(--bulma-border, #dbdbdb);
    border-radius: var(--bulma-radius, 4px);
    background: var(--bulma-scheme-main, #fff);
}

/*
 *  A kind nothing here can draw: what it is, and the way to open it. The
 *  same footprint as the missing marker, and solid where that one is
 *  dashed -- this asset IS there.
 */
.ASSET_OTHER {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-width: 5rem;
    min-height: 5rem;
    padding: 0.75rem;
    border: 1px solid var(--bulma-border, #dbdbdb);
    border-radius: var(--bulma-radius, 4px);
    text-align: center;
}

.ASSET_OTHER_TYPE {
    font-family: monospace;
    font-size: 0.85rem;
}

.ASSET_OTHER_DETAIL {
    font-size: 0.75rem;
    opacity: 0.75;
    max-width: 16rem;
    overflow-wrap: anywhere;
}

.ASSET_OPEN {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
}