/*
 * Editor writing areas and survey typography.
 *
 * Every rich-text editor that edits survey text carries
 * data-survey-size="<profile>" (macros in components/rich_editor.html and
 * RichEditor.createMiniEditorHTML). Each profile names the size the
 * participant survey uses for that field (--editor-field-px, a plain number
 * of pixels) plus its weight, line height, font and alignment.
 *
 * The editor does not show the participant size itself: every field shows
 * its text at one comfortable size (--editor-normal-size), so a page of
 * editors stays even (user, 21.10.2026). A size chosen in the toolbar is
 * shown in proportion: "chosen size / field size" times the normal size.
 * Text set larger than the field's survey size therefore looks larger than
 * the rest in the editor too, and smaller looks smaller. The size select
 * still names the participant sizes ("Default (20)").
 *
 * Values that follow the project settings use the --editor-survey-* custom
 * properties that base.html emits for project pages
 * (app/services/survey_typography.py). Desktop sizes only (decision E1).
 * Colors are not mirrored: the editor background stays white.
 *
 * The "body" prefix keeps these rules above page rules such as
 * ".footer-editor-body .rich-editor" or ".settings-card .rich-editor".
 */

/* Registered as a number so getComputedStyle returns the resolved value,
   which the size select reads for "Default (N)" (rich-editor.js). */
@property --editor-field-px {
    syntax: '<number>';
    inherits: true;
    initial-value: 16;
}

body :is(.rich-editor, .mini-rich-editor)[data-survey-size] {
    --editor-normal-size: 15px;
    --editor-field-px: var(--editor-survey-base-px, 16);
    font-family: var(--editor-survey-font, var(--font-sans));
    font-size: var(--editor-normal-size);
    font-weight: 400;
    line-height: var(--editor-survey-line-height, 1.4);
}

/* Explicit sizes relative to the field's survey size (overrides the fixed
   pixel sizes of rich_text_formatting.css inside profiled editors only). */
body [data-survey-size] .rt-size-8 { font-size: calc(var(--editor-normal-size, 15px) * 8 / var(--editor-field-px, 16)) !important; }
body [data-survey-size] .rt-size-10 { font-size: calc(var(--editor-normal-size, 15px) * 10 / var(--editor-field-px, 16)) !important; }
body [data-survey-size] .rt-size-12 { font-size: calc(var(--editor-normal-size, 15px) * 12 / var(--editor-field-px, 16)) !important; }
body [data-survey-size] .rt-size-14 { font-size: calc(var(--editor-normal-size, 15px) * 14 / var(--editor-field-px, 16)) !important; }
body [data-survey-size] .rt-size-16 { font-size: calc(var(--editor-normal-size, 15px) * 16 / var(--editor-field-px, 16)) !important; }
body [data-survey-size] .rt-size-18 { font-size: calc(var(--editor-normal-size, 15px) * 18 / var(--editor-field-px, 16)) !important; }
body [data-survey-size] .rt-size-20 { font-size: calc(var(--editor-normal-size, 15px) * 20 / var(--editor-field-px, 16)) !important; }
body [data-survey-size] .rt-size-24 { font-size: calc(var(--editor-normal-size, 15px) * 24 / var(--editor-field-px, 16)) !important; }
body [data-survey-size] .rt-size-28 { font-size: calc(var(--editor-normal-size, 15px) * 28 / var(--editor-field-px, 16)) !important; }
body [data-survey-size] .rt-size-32 { font-size: calc(var(--editor-normal-size, 15px) * 32 / var(--editor-field-px, 16)) !important; }

/* Headings keep their fixed survey sizes (Bootstrap desktop rem sizes), so
   they scale like explicit sizes. */
body [data-survey-size] h1 { font-size: calc(var(--editor-normal-size, 15px) * 40 / var(--editor-field-px, 16)); }
body [data-survey-size] h2 { font-size: calc(var(--editor-normal-size, 15px) * 32 / var(--editor-field-px, 16)); }
body [data-survey-size] h3 { font-size: calc(var(--editor-normal-size, 15px) * 28 / var(--editor-field-px, 16)); }
body [data-survey-size] h4 { font-size: calc(var(--editor-normal-size, 15px) * 24 / var(--editor-field-px, 16)); }
body [data-survey-size] h5 { font-size: calc(var(--editor-normal-size, 15px) * 20 / var(--editor-field-px, 16)); }
body [data-survey-size] h6 { font-size: calc(var(--editor-normal-size, 15px) * 16 / var(--editor-field-px, 16)); }

/* Question and instruction prompts (theme heading size, weight 400, 1.3). */
body :is(.rich-editor, .mini-rich-editor)[data-survey-size="heading"] {
    --editor-field-px: var(--editor-survey-heading-px, 20);
    line-height: 1.3;
    text-align: var(--editor-survey-question-align, left);
}

/* Options, rows, page content, concept descriptions: the project base size. */
body :is(.rich-editor, .mini-rich-editor)[data-survey-size="body"] {
    --editor-field-px: var(--editor-survey-base-px, 16);
}

body :is(.rich-editor, .mini-rich-editor)[data-survey-size="footer"] {
    --editor-field-px: var(--editor-survey-footer-px, 15.2);
    text-align: var(--editor-survey-question-align, left);
}

/* Regular survey items */
body :is(.rich-editor, .mini-rich-editor)[data-survey-size="sd-item"] {
    --editor-field-px: calc(var(--editor-survey-base-px, 16) * 1.125);
}

body :is(.rich-editor, .mini-rich-editor)[data-survey-size="sd-pole"] {
    --editor-field-px: calc(var(--editor-survey-base-px, 16) * 0.9);
    line-height: calc(1em * 24 / var(--editor-field-px, 14.4)); /* participants: fixed 24px */
}

body :is(.rich-editor, .mini-rich-editor)[data-survey-size="likert-row"] {
    --editor-field-px: calc(var(--editor-survey-base-px, 16) * var(--editor-likert-factor, 1));
}

body :is(.rich-editor, .mini-rich-editor)[data-survey-size="likert-col"] {
    --editor-field-px: 13.6;
    font-weight: 600;
    line-height: 1.3;
}

body :is(.rich-editor, .mini-rich-editor)[data-survey-size="inline-label"] {
    --editor-field-px: 17.6;
}

body :is(.rich-editor, .mini-rich-editor)[data-survey-size="ranking-label"] {
    --editor-field-px: 12.8;
    font-weight: 600;
}

body :is(.rich-editor, .mini-rich-editor)[data-survey-size="cs-label"] {
    --editor-field-px: var(--editor-survey-base-px, 16);
    font-weight: 500;
}

/* Product evaluation */
body :is(.rich-editor, .mini-rich-editor)[data-survey-size="pe-product"] {
    --editor-field-px: var(--editor-survey-base-px, 16);
    font-weight: 600;
}

body :is(.rich-editor, .mini-rich-editor)[data-survey-size="pe-char-label-horizontal"] {
    --editor-field-px: 14;
    font-weight: 500;
}

body :is(.rich-editor, .mini-rich-editor)[data-survey-size="pe-char-value-horizontal"] {
    --editor-field-px: 15;
    font-weight: 600;
}

body :is(.rich-editor, .mini-rich-editor)[data-survey-size="pe-char-label-vertical"] {
    --editor-field-px: 13;
    line-height: 1.4;
}

body :is(.rich-editor, .mini-rich-editor)[data-survey-size="pe-char-value-vertical"] {
    --editor-field-px: 15;
    font-weight: 700;
    line-height: 1.4;
}

body :is(.rich-editor, .mini-rich-editor)[data-survey-size="pe-char-label-compact"] {
    --editor-field-px: 15;
    font-weight: 600;
}

body :is(.rich-editor, .mini-rich-editor)[data-survey-size="pe-char-value-compact"] {
    --editor-field-px: 15;
}

/* Market research: prompt, Kano feature and Gabor-Granger question at the
   title size, Kano sub-questions and Van Westendorp prices at 1.125x base. */
body :is(.rich-editor, .mini-rich-editor)[data-survey-size="mr-instructions"] {
    --editor-field-px: var(--editor-survey-heading-px, 20);
    line-height: 1.3;
}

body :is(.rich-editor, .mini-rich-editor)[data-survey-size="mr-kano-feature"] {
    --editor-field-px: var(--editor-survey-heading-px, 20);
    font-weight: 700;
    line-height: 1.3;
}

body :is(.rich-editor, .mini-rich-editor)[data-survey-size="mr-sub"] {
    --editor-field-px: calc(var(--editor-survey-base-px, 16) * 1.125);
    line-height: 1.4;
}

/* Van Westendorp price questions: survey line height. */
body :is(.rich-editor, .mini-rich-editor)[data-survey-size="mr-price"] {
    --editor-field-px: calc(var(--editor-survey-base-px, 16) * 1.125);
}

body :is(.rich-editor, .mini-rich-editor)[data-survey-size="mr-gg"] {
    --editor-field-px: var(--editor-survey-heading-px, 20);
    text-align: center;
}

/* Choice families */
body :is(.rich-editor, .mini-rich-editor)[data-survey-size="followup"] {
    --editor-field-px: 18;
    text-align: center;
}

body :is(.rich-editor, .mini-rich-editor)[data-survey-size="block2-intro"] {
    --editor-field-px: 15;
    text-align: center;
}

body :is(.rich-editor, .mini-rich-editor)[data-survey-size="bw-button"] {
    --editor-field-px: 13;
    font-weight: 600;
}

body :is(.rich-editor, .mini-rich-editor)[data-survey-size="conj-attr-standard"] {
    --editor-field-px: 14;
    font-weight: 600;
}

body :is(.rich-editor, .mini-rich-editor)[data-survey-size="conj-level-standard"] {
    --editor-field-px: 14;
}

body :is(.rich-editor, .mini-rich-editor)[data-survey-size="conj-attr-stacked"] {
    --editor-field-px: 12;
    font-weight: 500;
}

body :is(.rich-editor, .mini-rich-editor)[data-survey-size="conj-level-stacked"] {
    --editor-field-px: 15;
    font-weight: 600;
    line-height: 1.25;
}

body :is(.rich-editor, .mini-rich-editor)[data-survey-size="conj-attr-matrix"] {
    --editor-field-px: 15;
    font-weight: 600;
}

body :is(.rich-editor, .mini-rich-editor)[data-survey-size="conj-level-matrix"] {
    --editor-field-px: 15;
}

body :is(.rich-editor, .mini-rich-editor)[data-survey-size="md-item"] {
    --editor-field-px: 17;
    font-weight: 500;
}

body :is(.rich-editor, .mini-rich-editor)[data-survey-size="md-item-rows"] {
    --editor-field-px: 16;
    font-weight: 600;
    line-height: 1.3;
}

body :is(.rich-editor, .mini-rich-editor)[data-survey-size="md-header"] {
    --editor-field-px: 16;
    font-weight: 600;
    text-align: center;
}

body :is(.rich-editor, .mini-rich-editor)[data-survey-size="md-calib-option"] {
    --editor-field-px: 15;
}

/* Project settings texts */
body :is(.rich-editor, .mini-rich-editor)[data-survey-size="branding-title"] {
    --editor-field-px: 14;
    font-weight: 500;
}

body :is(.rich-editor, .mini-rich-editor)[data-survey-size="branding-footer"] {
    --editor-field-px: calc(var(--editor-survey-base-px, 16) * 0.875);
}

body :is(.rich-editor, .mini-rich-editor)[data-survey-size="privacy"] {
    --editor-field-px: var(--editor-survey-base-px, 16);
    line-height: 1.65;
    text-align: justify;
}

/* Images: the participant output shows an inserted image at its own width
   (up to the column; rich_text_formatting.css). The compact editor's 150px
   cap in edit_item.css only applies to editors without a survey profile.
   Choice cells keep their 220px participant cap. */
body .mini-rich-editor[data-survey-size^="conj-"] .rich-inserted-image {
    max-height: 220px;
    object-fit: contain;
}

/* DR-CBC / BW-CBC configurator: example of the buy / none follow-up question
   (participants: 18px, weight 400, line height 1.4). */
.survey-followup-preview {
    font-family: var(--editor-survey-font, inherit);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
}

/* Plain-text fields: the survey shows them without formatting, so the editor
   offers no formatting either. */
.mini-rich-editor-wrapper.is-plain-text .mini-rich-toggle,
.mini-rich-editor-wrapper.is-plain-text .mini-rich-toolbar,
.rich-editor-container.is-plain-text .rich-toolbar {
    display: none !important;
}