/**
 * Compact category tiles above the larger picture previews.
 * Author: Rolf-Peter Blümlein. Version: 1.4.10.
 * Every selector is scoped to this component; no template files are required.
 */
/* Use the available content width instead of the former 1200 px ceiling. */
.coloring-gallery {
    box-sizing: border-box;
    width: 90%;
    max-width: none;
    margin-inline: auto;
}

.coloring-gallery .category-navigation {
    margin: 0 0 1.25rem;
    padding: 0 0 .75rem;
    /* Match cassiopeia_takealion's menu divider; allow a future template override. */
    border-bottom: 1px solid var(--ausmalbilder-menu-divider-color, rgba(215, 170, 132, .42));
}

/* Keep the tiles in one horizontal row, including on touch devices. */
.coloring-gallery .category-navigation__list {
    display: flex;
    gap: .65rem;
    align-items: stretch;
    overflow-x: auto;
    list-style: none;
    margin: 0;
    padding: .25rem;
    max-width: 100%;
}

.coloring-gallery .category-navigation__list > li {
    flex: 0 0 7rem;
    margin: 0;
    padding: 0;
}

.coloring-gallery .category-tile {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 7rem;
    height: 100%;
    overflow: hidden;
    border: 1px solid #cbd1da;
    border-radius: .35rem;
    /* Match the sand background and readable dark text of the header dropdowns. */
    background: var(--ausmalbilder-tile-background, #cdaa8e);
    color: #181713;
    text-decoration: none;
}

.coloring-gallery .category-tile:hover,
.coloring-gallery .category-tile[aria-current="page"] {
    border-color: #181713;
    background: var(--ausmalbilder-tile-background, #cdaa8e);
}

.coloring-gallery .category-tile:focus-visible {
    outline: 2px solid #d7aa84;
    outline-offset: 2px;
}

/* Give pointer hover and keyboard focus the same white caption text. */
.coloring-gallery .category-tile:hover,
.coloring-gallery .category-tile:focus-visible,
.coloring-gallery .picture-card a:hover,
.coloring-gallery .picture-card a:focus-visible {
    color: #fff;
}

.coloring-gallery .category-tile__image,
.coloring-gallery .category-tile__placeholder {
    display: grid;
    flex: 0 0 4rem;
    place-items: center;
    width: 100%;
    height: 4rem;
    background: transparent;
}

/* Match the normal menu text colour around the untouched category image. */
.coloring-gallery .category-tile__top {
    display: block;
    padding: .5rem;
    background: var(--ausmalbilder-tile-top-background, #b9b1a4);
}

/* The enclosing top area provides the inset; frame only the actual preview. */
.coloring-gallery .category-tile__image {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    overflow: hidden;
    border: 1px solid #000;
}

/* Fit uploaded images inside the preview frame without increasing tile size. */
.coloring-gallery .category-tile__image img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 100%;
    object-fit: contain;
    background: transparent;
}

.coloring-gallery .category-tile__placeholder {
    font-size: 1.4rem;
}

.coloring-gallery .category-tile__title {
    display: block;
    padding: .4rem;
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

/* Colour the picture tiles as well; the actual black-and-white artwork stays white. */
.coloring-gallery .picture-card {
    background: var(--ausmalbilder-tile-background, #cdaa8e);
    color: #181713;
}

/* Let heading and category text follow the link's normal/hover/focus colour. */
.coloring-gallery .picture-card__body,
.coloring-gallery .picture-card__body h2 {
    color: inherit;
}

/* Give picture tiles the same two-colour structure as the category tiles. */
.coloring-gallery .picture-card__preview {
    display: grid;
    place-items: center;
    box-sizing: border-box;
    padding: .5rem;
    background: var(--ausmalbilder-tile-top-background, #b9b1a4);
}

.coloring-gallery .picture-card__preview > img:not(.picture-progress-overlay) {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    aspect-ratio: auto;
    object-fit: contain;
    background: transparent;
}

/* Keep saved paint overlays aligned with the inset artwork, not the coloured rim. */
.coloring-gallery .picture-card__preview > .picture-progress-overlay {
    inset: .5rem;
    width: calc(100% - 1rem) !important;
    height: calc(100% - 1rem) !important;
}

/* A real link styled as a graphical button retains keyboard and browser navigation. */
.coloring-app .paint-navigation {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: .5rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--ausmalbilder-menu-divider-color, rgba(215, 170, 132, .42));
}

.coloring-app .paint-navigation .category-return {
    flex: 0 1 auto;
    margin-bottom: 0;
}

/* Centre the loader in the remaining space beside the navigation button. */
.coloring-app .canvas-shell.is-loading {
    pointer-events: none;
}

.coloring-app .canvas-shell.is-loading [data-lineart] {
    visibility: hidden;
}

.coloring-app .paint-loading {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: .35rem;
    flex: 1 1 12rem;
    min-width: 0;
    text-align: center;
    font-size: .85rem;
}

.coloring-app .paint-loading progress {
    width: min(100%, 20rem);
    height: .65rem;
    accent-color: #cdaa8e;
}

.coloring-app .paint-loading.has-error {
    color: #a51d2d;
}

@media (max-width: 520px) {
    .coloring-app .paint-navigation {
        flex-wrap: wrap;
        gap: .65rem 1rem;
    }

    .coloring-app .paint-loading {
        flex-basis: 10rem;
    }
}

.coloring-app .category-return {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    box-sizing: border-box;
    max-width: 100%;
    margin-bottom: .25rem;
    padding: .5rem .75rem .5rem .5rem;
    border: 1px solid rgba(24, 23, 19, .3);
    border-radius: .5rem;
    background: var(--ausmalbilder-tile-background, #cdaa8e);
    color: #181713;
    text-decoration: none;
}

.coloring-app .category-return:hover {
    border-color: #181713;
    color: #181713;
}

.coloring-app .category-return:focus-visible {
    outline: 2px solid #d7aa84;
    outline-offset: 2px;
}

.coloring-app .category-return__preview {
    display: grid;
    flex: 0 0 5rem;
    place-items: center;
    box-sizing: border-box;
    width: 5rem;
    height: 3rem;
    overflow: hidden;
    border: 1px solid #000;
    background: transparent;
}

.coloring-app .category-return__preview img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: transparent;
}

.coloring-app .category-return__caption {
    display: grid;
    gap: .15rem;
    min-width: 0;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.coloring-app .category-return__caption > span {
    font-weight: 600;
}

.coloring-app .category-return__caption small {
    font-size: .8rem;
}

/* Compact the whole painting header so canvas and tools begin closer to the link. */
.coloring-app header {
    margin-bottom: .5rem;
}

.coloring-app header h1 {
    margin-block: 0 .25rem;
}

.coloring-app header p {
    margin: 0;
}

.coloring-app header p:empty {
    display: none;
}

@media (max-width: 520px) {
    .coloring-gallery .category-navigation__list > li {
        flex-basis: 6rem;
    }

    .coloring-gallery .category-tile {
        width: 6rem;
    }
}