/* CSP-safe rich text formatting generated by app/static/js/rich-editor.js. */

.rt-align-left { text-align: left !important; }
.rt-align-center { text-align: center !important; }
.rt-align-right { text-align: right !important; }
.rt-align-justify { text-align: justify !important; }

.rt-size-8 { font-size: 8px !important; }
.rt-size-10 { font-size: 10px !important; }
.rt-size-12 { font-size: 12px !important; }
.rt-size-14 { font-size: 14px !important; }
.rt-size-16 { font-size: 16px !important; }
.rt-size-18 { font-size: 18px !important; }
.rt-size-20 { font-size: 20px !important; }
.rt-size-24 { font-size: 24px !important; }
.rt-size-28 { font-size: 28px !important; }
.rt-size-32 { font-size: 32px !important; }

.rt-color-black { color: #000000 !important; }
.rt-color-slate { color: #374151 !important; }
.rt-color-gray { color: #6b7280 !important; }
.rt-color-light-gray { color: #9ca3af !important; }
.rt-color-pale-gray { color: #d1d5db !important; }
.rt-color-white { color: #ffffff !important; }
.rt-color-red { color: #ef4444 !important; }
.rt-color-orange { color: #f97316 !important; }
.rt-color-yellow { color: #eab308 !important; }
.rt-color-green { color: #22c55e !important; }
.rt-color-blue { color: #3b82f6 !important; }
.rt-color-purple { color: #8b5cf6 !important; }
.rt-color-soft-red { color: #fca5a5 !important; }
.rt-color-soft-orange { color: #fdba74 !important; }
.rt-color-soft-yellow { color: #fde047 !important; }
.rt-color-soft-green { color: #86efac !important; }
.rt-color-soft-blue { color: #93c5fd !important; }
.rt-color-soft-purple { color: #c4b5fd !important; }

.rt-highlight-black { background-color: #000000 !important; color: #ffffff !important; }
.rt-highlight-slate { background-color: #374151 !important; color: #ffffff !important; }
.rt-highlight-gray { background-color: #6b7280 !important; color: #ffffff !important; }
.rt-highlight-light-gray { background-color: #9ca3af !important; }
.rt-highlight-pale-gray { background-color: #d1d5db !important; }
.rt-highlight-white { background-color: #ffffff !important; }
.rt-highlight-red { background-color: #ef4444 !important; color: #ffffff !important; }
.rt-highlight-orange { background-color: #f97316 !important; color: #ffffff !important; }
.rt-highlight-yellow { background-color: #eab308 !important; }
.rt-highlight-green { background-color: #22c55e !important; }
.rt-highlight-blue { background-color: #3b82f6 !important; color: #ffffff !important; }
.rt-highlight-purple { background-color: #8b5cf6 !important; color: #ffffff !important; }
.rt-highlight-soft-red { background-color: #fca5a5 !important; }
.rt-highlight-soft-orange { background-color: #fdba74 !important; }
.rt-highlight-soft-yellow { background-color: #fde047 !important; }
.rt-highlight-soft-green { background-color: #86efac !important; }
.rt-highlight-soft-blue { background-color: #93c5fd !important; }
.rt-highlight-soft-purple { background-color: #c4b5fd !important; }

.rt-swatch-black { background-color: #000000; }
.rt-swatch-slate { background-color: #374151; }
.rt-swatch-gray { background-color: #6b7280; }
.rt-swatch-light-gray { background-color: #9ca3af; }
.rt-swatch-pale-gray { background-color: #d1d5db; }
.rt-swatch-white { background-color: #ffffff; }
.rt-swatch-red { background-color: #ef4444; }
.rt-swatch-orange { background-color: #f97316; }
.rt-swatch-yellow { background-color: #eab308; }
.rt-swatch-green { background-color: #22c55e; }
.rt-swatch-blue { background-color: #3b82f6; }
.rt-swatch-purple { background-color: #8b5cf6; }
.rt-swatch-soft-red { background-color: #fca5a5; }
.rt-swatch-soft-orange { background-color: #fdba74; }
.rt-swatch-soft-yellow { background-color: #fde047; }
.rt-swatch-soft-green { background-color: #86efac; }
.rt-swatch-soft-blue { background-color: #93c5fd; }
.rt-swatch-soft-purple { background-color: #c4b5fd; }

.rich-inserted-image,
.text-content .rich-inserted-image,
.rich-editor .rich-inserted-image,
.mini-rich-editor .rich-inserted-image {
    max-width: 100%;
    height: auto;
}

/* Participant pages: any image in the survey content stays inside its column,
   also one that lacks the rich-inserted-image class. :where() keeps the
   specificity at zero, so logo, button and level-image rules still win. */
:where(.survey-runtime-main img) {
    max-width: 100%;
    height: auto;
}

/* Choice-task cells and cards: a portrait image must not stretch the whole
   row. Same 220px cap as dedicated level images; object-fit keeps the ratio
   while the author's width attribute still sets the box width. */
:where(.value-cell, .label-cell, .option-card, .alternative-card, .chosen-product-card, .shop-attr-cell) .rich-inserted-image {
    max-height: 220px;
    object-fit: contain;
}

.rich-image-block {
    clear: both;
    margin: 0.75rem 0;
}

.rich-image-block .rich-inserted-image {
    margin-top: 0;
    margin-bottom: 0;
}

.rich-image-align-center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.rich-image-align-inline {
    display: inline-block;
    margin: 0 0.25rem;
    vertical-align: middle;
}

.rich-image-align-left {
    float: left;
    margin-right: 15px;
    margin-bottom: 10px;
}

.rich-image-align-right {
    float: right;
    margin-left: 15px;
    margin-bottom: 10px;
}

.rich-image-style-rounded {
    border-radius: 8px;
}

.rich-image-style-shadow {
    box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
}

.rich-image-style-border {
    border: 2px solid #ddd;
    padding: 5px;
}