/*
 * Catalog style "demo8" — style tools add-on (loaded instead of _tools.css).
 */
/* style tools: download / upload — inherit the style bar's own colours and type */
.stylebar__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; width: 100%; font-size: 13px; }
.stylebar__guide, .stylebar__download, .stylebar__upload-toggle { color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.stylebar__upload-toggle { list-style: none; }
.stylebar__upload-toggle::-webkit-details-marker { display: none; }
.stylebar__upload-toggle::before { content: "+ "; }
.stylebar__upload[open] .stylebar__upload-toggle::before { content: "− "; }
.upload-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 10px; }
.upload-form__label { font-size: 12px; opacity: 0.8; }
.upload-form__input, .upload-form__file { max-width: 100%; padding: 6px 9px; border: 1px solid currentColor; border-radius: 6px; background: transparent; color: inherit; font: inherit; }
.upload-form__input { width: 12em; }
.upload-form__submit { cursor: pointer; font-family: inherit; }
.upload-form__note { flex-basis: 100%; opacity: 0.75; font-size: 12px; }
.stylebar__flash { width: 100%; margin: 8px 0 0; }

/* the scene strip grows upwards when the upload form opens */
.stylebar { height: auto; min-height: var(--strip); max-height: 75vh; overflow-y: auto; }
.stylebar__inner { height: auto; grid-template-areas: "label value copy" "list list list" "tools tools tools" "flash flash flash"; }
.stylebar__tools { grid-area: tools; color: var(--soft); }
.stylebar__flash { grid-area: flash; }
@media (max-width: 720px) {
    .stylebar__inner { grid-template-areas: "label value" "copy copy" "list list" "tools tools" "flash flash"; }
}