/*
 * Detail-sheet extras (2026-09-17): the photo strip, and the small amount of
 * rich text a description may now contain.
 *
 * Lives in its own file, loaded unconditionally by layouts/menu.php, because the
 * layout loads EITHER menu/css/menu.css (classic) OR the design's own menu.css -
 * never both. Anything added to menu.css would therefore style exactly one of the
 * 20 designs.
 *
 * Every class here is new. Each design restyles .ym-sheet-img in its own
 * stylesheet, so the strip deliberately avoids that name rather than fighting a
 * specificity battle it would lose to whichever file loads last.
 */

.ym-sheet-thumbs {
    display: flex;
    gap: 8px;
    padding: 8px 12px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.ym-sheet-thumbs::-webkit-scrollbar { display: none; }

.ym-sheet-thumb {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    background: none;
    cursor: pointer;
    opacity: .65;
    transition: opacity .15s ease, border-color .15s ease;
}

.ym-sheet-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ym-sheet-thumb.is-active {
    opacity: 1;
    /* currentColor follows whatever the design paints its sheet text in, so the
       active outline suits all 20 palettes without naming a single colour. */
    border-color: currentColor;
}

/* Touch devices get no hover state - the tap IS the interaction. */
@media (hover: hover) and (pointer: fine) {
    .ym-sheet-thumb:hover { opacity: 1; }
}


/*
 * Rich-text descriptions. The server allows p, br, ul, ol, li and nothing else
 * (App\Core\HtmlSanitizer), so this is the whole surface. Without these rules a
 * bulleted list renders with no marker and no indent in most of the 20 designs,
 * because their stylesheets never anticipated a list inside the sheet.
 */

.ym-sheet-desc p { margin: 0 0 .6em; }
.ym-sheet-desc p:last-child { margin-bottom: 0; }

.ym-sheet-desc ul,
.ym-sheet-desc ol {
    margin: 0 0 .6em;
    padding-left: 1.25em;
}

.ym-sheet-desc ul { list-style: disc; }
.ym-sheet-desc ol { list-style: decimal; }
.ym-sheet-desc li { margin: 0 0 .25em; }
.ym-sheet-desc li:last-child { margin-bottom: 0; }