/*
 * Placeholder shown when thumbnail.ws cannot render a preview.
 *
 * Kept in this plugin rather than the theme: the fallback has to look right
 * whether or not modern-ui is active, and it is this plugin's own markup.
 */

/*
 * The logo is painted as a mask, not as an image.
 *
 * The artwork is a single flat shape, so the file only supplies the silhouette
 * and the colour comes from background-color. That removes the failure mode of
 * the two previous attempts: filter: invert() turned the white mark black
 * rather than #002554, and swapping between two PNGs meant the wrong file could
 * be picked. Here there is one file and one colour declaration per theme, so
 * white-on-dark and navy-on-light cannot disagree.
 *
 * The element keeps a 1x1 transparent pixel as its src (set by the onerror
 * handler) so the browser has a valid image and never draws its broken icon.
 */
.tn-placeholder {
    /* Deliberately much smaller than the cell -- it is a "nothing here" marker,
       not a picture, and at full width it competes with the real previews. */
    width: 46px;
    height: 46px;
    display: block;
    margin: 0 auto;

    -webkit-mask-image: url('placeholder.png');
            mask-image: url('placeholder.png');
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;

    /* Light is the default, matching modern-ui: corporate navy. */
    background-color: #002554;
}

/*
 * Dark comes from either the OS preference or an explicit choice, and an
 * explicit choice always wins over the OS -- the same three states the theme
 * uses, so this follows the theme toggle and not just the system setting.
 */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .tn-placeholder { background-color: #ffffff; }
}

:root[data-theme="dark"]  .tn-placeholder { background-color: #ffffff; }
:root[data-theme="light"] .tn-placeholder { background-color: #002554; }

/* The cached thumbnail is fetched at 500px; keep it to a tidy size in the Preview
   column. Excludes .tn-placeholder so the 46px logo mark keeps its fixed size. */
#main_table td.preview img:not(.tn-placeholder) {
    display: block;
    max-width: 160px;
    height: auto;
    border-radius: 4px;
}