/* Custom report editor + WYSIWYG slide canvas */

/* The open-licensed fonts the exports embed, served as web fonts so the canvas
   shows the same faces the PDF/PowerPoint will use (see ReportFontStacks). */
@font-face {
    font-family: 'Carlito';
    src: url('../fonts/report/Carlito-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Carlito';
    src: url('../fonts/report/Carlito-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Carlito';
    src: url('../fonts/report/Carlito-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Carlito';
    src: url('../fonts/report/Carlito-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Liberation Sans';
    src: url('../fonts/report/LiberationSans-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Liberation Sans';
    src: url('../fonts/report/LiberationSans-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Liberation Sans';
    src: url('../fonts/report/LiberationSans-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Liberation Sans';
    src: url('../fonts/report/LiberationSans-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Liberation Serif';
    src: url('../fonts/report/LiberationSerif-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Liberation Serif';
    src: url('../fonts/report/LiberationSerif-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Liberation Serif';
    src: url('../fonts/report/LiberationSerif-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Liberation Serif';
    src: url('../fonts/report/LiberationSerif-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Comic Neue';
    src: url('../fonts/report/ComicNeue-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Comic Neue';
    src: url('../fonts/report/ComicNeue-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Comic Neue';
    src: url('../fonts/report/ComicNeue-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Comic Neue';
    src: url('../fonts/report/ComicNeue-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Bai Jamjuree';
    src: url('../fonts/report/BaiJamjuree-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Bai Jamjuree';
    src: url('../fonts/report/BaiJamjuree-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Bai Jamjuree';
    src: url('../fonts/report/BaiJamjuree-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Bai Jamjuree';
    src: url('../fonts/report/BaiJamjuree-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

.cre-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10010;
}

.custom-report-editor {
    background: #fff;
    width: 100vw;
    height: 100vh;
    max-height: none;
    border-radius: 0;
    overflow: hidden;
    padding: 12px;
    box-shadow: none;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.cre-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.cre-status {
    flex: 1;
    color: #008180;
    font-size: 13px;
}

.cre-body {
    display: grid;
    grid-template-columns: 220px 1fr 380px;
    gap: 10px;
    flex: 1;
    min-height: 0;
}

.cre-pages, .cre-inspector {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
    overflow: auto;
}

.cre-canvas {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    min-height: 0;
    overflow: auto;
}

.cre-canvas-head {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cre-section-title {
    font-weight: 600;
    font-size: 13px;
    color: #374151;
    margin-top: 4px;
}

.cre-page-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
}

.cre-page-item:hover {
    background: #e0f7f4;
}

.cre-page-actions {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

/* File input styled as a button; the native control itself is hidden. */
.cre-import {
    display: block;
    text-align: center;
    cursor: pointer;
}

.cre-import input {
    display: none;
}

.cre-page-item.selected {
    background: #d1f0ec;
    font-weight: 600;
}

/* Page drag-and-drop: the dragged page takes the highlighted page's slot. */
.cre-page-item.cre-drop-target {
    outline: 2px dashed #0d9488;
    outline-offset: -2px;
}

.cre-add-blocks {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.rc-master-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 12px;
    color: #6b7280;
}

.rc-master-bar label {
    display: flex;
    align-items: center;
    gap: 4px;
}

.rc-master-group {
    font-weight: 600;
    color: #374151;
}

.rc-master-bar .rc-size {
    width: 48px;
    padding: 2px 4px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
}

/* Option colours line up in even columns on their own row, not strung along
   after the label where each wrapped row would start at a different offset. */
.rc-option-colors {
    flex: 1 1 100%;
    display: grid;
    /* Wide enough for a swatch plus the move-left/right and delete buttons. */
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 6px 10px;
    align-items: center;
}

.rc-option-color {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.rc-inline {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #6b7280;
}

.cre-name {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
}

.cre-textarea {
    width: 100%;
    min-height: 80px;
    padding: 6px 8px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
}

.cre-inspector label {
    display: flex;
    flex-direction: column;
    font-size: 12px;
    gap: 2px;
    color: #6b7280;
}

.cre-block {
    margin-top: 6px;
}

.cre-mini {
    background: none;
    border: none;
    cursor: pointer;
    color: #9ca3af;
}

.cre-mini:hover {
    color: #dc2626;
}

.cre-empty, .cre-hint {
    color: #6b7280;
    font-size: 13px;
}

.cre-generated {
    margin-top: 10px;
    padding: 10px 12px;
    background: #e0f7f4;
    border: 1px solid #b6e3dd;
    border-radius: 8px;
    font-size: 13px;
    color: #0f5e5a;
}

.cre-log {
    max-height: 30vh;
    overflow: auto;
    background: #1f2937;
    color: #f3f4f6;
    padding: 10px;
    border-radius: 8px;
    font-size: 12px;
    white-space: pre-wrap;
}

/* PDF-export dialog: the picture-quality choices. */
.cre-pdf-dialog {
    max-width: 440px;
}

.cre-pdf-quality {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 6px 4px;
    font-size: 13px;
    cursor: pointer;
}

/* Per-respondent generation: the permission gate and the name rule. */
.cre-respondent-dialog {
    max-width: 520px;
}

.cre-respondent-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 10px 0 4px;
    font-size: 13px;
}

.cre-respondent-field > span {
    font-weight: 500;
    color: #374151;
}

.cre-respondent-field select {
    padding: 5px 6px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
    font-size: 13px;
}

/* How many people the gate lets through: the answer to "who gets a report". */
.cre-respondent-count {
    font-size: 13px;
    font-weight: 500;
    color: #008180;
    background: #d6f0ee;
    border-radius: 6px;
    padding: 6px 8px;
}

.cre-respondent-hint {
    font-size: 12px;
    color: #6b7280;
    margin-top: 4px;
}

/* Mailing the batch: the rules that compose the message, set apart from the gate
   above them because they decide how a report leaves the building, not who gets one. */
.cre-respondent-mail {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid #e5e7eb;
}

.cre-respondent-check {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
}

/* Native swatch + typed hex code, kept side by side. */
.rc-color {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.rc-color input[type="color"] {
    width: 42px;
    height: 26px;
    padding: 0;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: none;
    cursor: pointer;
    flex: none;
}

.rc-hex {
    width: 11ch;
    height: 26px;
    box-sizing: border-box;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    text-transform: lowercase;
    padding: 2px 4px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
}

/* Quick-pick swatches of the master option colours, shown under a colour input. */
.rc-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 2px 0 6px;
}

.rc-swatch {
    width: 18px;
    height: 18px;
    border: 1px solid rgba(0, 0, 0, .25);
    border-radius: 4px;
    padding: 0;
    cursor: pointer;
}

.rc-swatch:hover {
    outline: 2px solid #008180;
    outline-offset: 1px;
}

/* --- slide canvas --- */

.rc-stage {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    background: #e9edf1;
    padding: 48px;
    border-radius: 8px;
    overflow: auto;
}

.rc-slide:focus {
    outline: none;
}

.rc-slide {
    position: relative;
    width: 100%;
    max-width: 920px;
    aspect-ratio: 16 / 9;
    background: #fff;
    box-shadow: 0 1px 8px rgba(0, 0, 0, .2);
    container-type: size;
    /* Figures and pictures may bleed past the sheet edge (PowerPoint pasteboard
       behaviour), so the sheet itself does not clip. Text/tables stay inside the
       sheet because the canvas JS keeps them clamped to the slide bounds. */
    overflow: visible;
    outline: none;
}

.rc-block {
    position: absolute;
    box-sizing: border-box;
    overflow: hidden;
    cursor: move;
}

.rc-block.selected {
    outline: 1.5px solid #008180;
    z-index: 10;
}

.rc-block.rc-bg {
    pointer-events: none;
    cursor: default;
}

/* A master placeholder on a page: content is editable here, position is not. */
.rc-block.rc-placeholder {
    cursor: pointer;
}

.rc-block.rc-placeholder:hover {
    outline: 1.5px dashed #008180;
}

/* In-place placeholder controls: pick a picture / drop back to master content.
   Shown only while the block is hovered or selected. */
.rc-ph-chip {
    position: absolute;
    z-index: 12;
    display: none;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1px solid #008180;
    border-radius: 50%;
    background: #fff;
    color: #008180;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}

.rc-block.rc-placeholder:hover .rc-ph-chip,
.rc-block.rc-placeholder.selected .rc-ph-chip {
    display: flex;
}

/* Dataset picker while typing "{gegevensbron:" in a text box. Sits above the
   blocks at the caret; sized in px so it stays readable at any sheet scale. */
.rc-token-picker {
    position: absolute;
    z-index: 30;
    display: flex;
    flex-direction: column;
    min-width: 160px;
    max-width: 280px;
    padding: 4px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
}

.rc-token-item {
    padding: 4px 8px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: #373737;
    font-size: 12px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.rc-token-item:hover {
    background: #f3f4f6;
}

.rc-token-active {
    background: #008180;
    color: #fff;
}

.rc-token-active:hover {
    background: #008180;
}

.rc-ph-upload {
    right: 4px;
    bottom: 4px;
}

.rc-ph-upload input[type=file] {
    display: none;
}

.rc-ph-reset {
    right: 4px;
    top: 4px;
    padding: 0;
}

/* A rotated figure extends past its box; don't clip it (PowerPoint doesn't either). */
.rc-block.rc-block-shape {
    overflow: visible;
    /* A line block dragged (or imported) to a zero-size sliver must stay visible
       and clickable on the canvas — the exports draw it regardless. */
    min-width: 3px;
    min-height: 3px;
}

.rc-text-body {
    width: 100%;
    height: 100%;
    white-space: pre-wrap;
    /* PowerPoint lets text run past its box instead of cutting a line in half;
       the canvas does the same so a slightly-too-small box stays readable. */
    overflow: visible;
    outline: none;
    /* PowerPoint's single line spacing, instead of the app's UI line height;
       blocks with explicit spacing override this inline. */
    line-height: 1.2;
}

/* Links look as they will in the exports; the editor never follows them. */
.rc-text-body a {
    color: #0563c1;
    text-decoration: underline;
}

.rc-block:has(> .rc-text-body) {
    overflow: visible;
}

/* Text of a selected block is click-to-edit, so show the I-beam, not "move". */
.rc-block.selected .rc-text-body,
.rc-block.selected .rc-cell {
    cursor: text;
}

.rc-table {
    width: 100%;
    height: 100%;
    border-collapse: collapse;
}

.rc-cell {
    border: 1px solid #d1d5db;
    padding: 2px 4px;
    outline: none;
}

.rc-cell-header {
    background: #008180;
    color: #fff;
    font-weight: bold;
}

.rc-chart {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.rc-chart-title {
    font-weight: bold;
    text-align: center;
    /* font-size comes inline from the block's TitleFontSizePt, in cqh */
    line-height: 1.5;
}

.rc-chart-plot {
    flex: 1;
    display: flex;
    align-items: flex-end;
    gap: 2px;
    padding: 2px;
}

.rc-bar-col {
    flex: 1;
    min-width: 3px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}

.rc-bar-pct {
    font-size: 1.6cqh;
    line-height: 1;
    margin-bottom: 1px;
    color: #373737;
    white-space: nowrap;
}

.rc-bar {
    width: 100%;
    min-height: 1px;
}

.rc-chart-pie {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    min-height: 0;
}

.rc-chart-pie svg {
    width: 100%;
    height: 100%;
}

/* The circle diagram fills its block: the coordinate space (and the background
   picture stretched over it) is the whole plot area, not a centred square. The
   line and table diagrams share the box: they too are the export SVG as-is. */
.rc-chart-circles,
.rc-chart-line {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.rc-chart-circles svg,
.rc-chart-line svg {
    width: 100%;
    height: 100%;
}

.rc-chart-stack {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1cqh;
    padding: 2px;
    min-height: 0;
}

.rc-chart-hbars {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.4cqh;
    padding: 2px;
    min-height: 0;
    overflow: hidden;
}

.rc-hbar-row {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 1.2cqh;
    min-height: 0;
}

.rc-hbar-label {
    flex: 0 0 34%;
    font-size: 1.8cqh;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.rc-hbar-track {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.8cqh;
    min-width: 0;
    height: 100%;
}

.rc-hbar-fill {
    height: 84%;
    min-width: 1px;
    border-radius: 2px;
    flex: 0 0 auto;
}

.rc-hbar-value {
    font-size: 1.6cqh;
    white-space: nowrap;
    flex: 0 0 auto;
    color: #373737;
}

/* Multi-dataset bar charts: question label centred over its rows, dataset name by the bars */
.rc-stack-group,
.rc-hbar-group {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 1.2cqh;
    min-height: 0;
}

.rc-stack-qlabel,
.rc-hbar-qlabel {
    flex: 0 0 30%;
    font-size: 1.8cqh;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.rc-stack-group-rows,
.rc-hbar-group-rows {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.8cqh;
    min-width: 0;
    height: 100%;
}

.rc-hbar-ds-row {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.6cqh;
    min-height: 0;
}

/* Dataset label hugs the bars: narrow column, right-aligned, tight to the bar */
.rc-stack-ds,
.rc-hbar-ds {
    flex: 0 0 auto;
    min-width: 3cqh;
    text-align: right;
    font-size: 1.6cqh;
    white-space: nowrap;
}

.rc-hbar-ds-bars {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.4cqh;
    min-width: 0;
    height: 100%;
}

.rc-hbar-ds-bars .rc-hbar-label {
    flex: 0 0 24%;
}

.rc-stack-row {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.6cqh;
    min-height: 0;
}

.rc-stack-label {
    flex: 0 0 34%;
    font-size: 1.8cqh;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.rc-stack-bar {
    flex: 1;
    display: flex;
    height: 100%;
    min-width: 0;
}

.rc-stack-seg {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6cqh;
    overflow: hidden;
    white-space: nowrap;
    min-width: 0;
}

.rc-chart-cats {
    display: flex;
    gap: 2px;
    padding: 0 2px 2px;
}

.rc-chart-cat {
    flex: 1;
    min-width: 0;
    text-align: center;
    font-size: 1.8cqh;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rc-chart-legend {
    display: flex;
    align-items: flex-start;
    gap: 1.5cqh;
    padding: 0.5cqh 2px;
    margin-top: 2.5cqh;
}

.rc-legend-items {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5cqh;
    min-width: 0;
}

/* A pie has no axis to line its legend up with: the items sit centred under the
   circle, in the space left of the respondent count. */
.rc-chart-legend--center .rc-legend-items {
    justify-content: center;
}

.rc-chart-n {
    flex: 0 0 auto;
    margin-left: auto;
    align-self: flex-end;
    font-size: 1.8cqh;
    font-weight: 600;
    white-space: nowrap;
}

.rc-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.6cqh;
    font-size: 1.8cqh;
}

.rc-legend-swatch {
    width: 1.8cqh;
    height: 1.8cqh;
    border-radius: 2px;
    flex: 0 0 auto;
}

.rc-image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #6b7280;
    background: #f3f4f6;
    font-size: 2.4cqh;
}

.rc-image-img {
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
    -webkit-user-drag: none;
}

.rc-shape {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.rc-image-preview {
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rc-image-preview img {
    max-width: 100%;
    max-height: 120px;
    object-fit: contain;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    background: #fff;
}

.rc-image-error {
    color: #b91c1c;
}

/* resize handles */
.rc-handle {
    position: absolute;
    width: 9px;
    height: 9px;
    background: #fff;
    border: 1px solid #008180;
    border-radius: 2px;
    z-index: 11;
}

.rc-handle-nw { left: -5px; top: -5px; cursor: nwse-resize; }
.rc-handle-n { left: calc(50% - 5px); top: -5px; cursor: ns-resize; }
.rc-handle-ne { right: -5px; top: -5px; cursor: nesw-resize; }
.rc-handle-e { right: -5px; top: calc(50% - 5px); cursor: ew-resize; }
.rc-handle-se { right: -5px; bottom: -5px; cursor: nwse-resize; }
.rc-handle-s { left: calc(50% - 5px); bottom: -5px; cursor: ns-resize; }
.rc-handle-sw { left: -5px; bottom: -5px; cursor: nesw-resize; }
.rc-handle-w { left: -5px; top: calc(50% - 5px); cursor: ew-resize; }

/* alignment guides */
.rc-guide {
    position: absolute;
    background: #f43f5e;
    z-index: 50;
    pointer-events: none;
}

.rc-guide-v { top: 0; bottom: 0; width: 1px; }
.rc-guide-h { left: 0; right: 0; height: 1px; }

/* inspector helpers */
.rc-grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.rc-btn-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.rc-check {
    flex-direction: row !important;
    align-items: center;
    gap: 6px;
}

/* Bold/italic buttons acting on the text selection inside the canvas box. */
.rc-selection-format {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #555;
}

.rc-fmt-btn {
    width: 26px;
    height: 24px;
    padding: 0;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    font-size: 13px;
}

.rc-fmt-btn:hover {
    background: #f3f4f6;
}

.rc-selection-colors {
    flex-wrap: wrap;
}

.rc-fmt-swatch {
    width: 20px;
    height: 20px;
}

.rc-fmt-swatch:hover {
    outline: 2px solid #9ca3af;
}

.rc-fmt-color {
    width: 26px;
    height: 24px;
    padding: 0 2px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
}

.rc-series {
    display: flex;
    gap: 4px;
    align-items: center;
    margin-bottom: 4px;
}

.rc-series .cre-name {
    flex: 1;
    min-width: 0;
}

.rc-series-block {
    border: 1px solid #e3e3e3;
    border-radius: 6px;
    padding: 8px;
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rc-check-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid #e3e3e3;
    border-radius: 6px;
    padding: 8px;
    margin-bottom: 8px;
}

.rc-check-list .rc-check {
    align-items: flex-start;
    line-height: 1.35;
    padding: 2px 0;
}

/* Data-source picker: always keep room for at least three sources before scrolling. */
.rc-check-list-sources {
    min-height: 7.5em;
    flex: none;
}

.rc-check-list .rc-check input[type="checkbox"] {
    flex: 0 0 auto;
    margin-top: 2px;
}

/* question picker button + selected summary */
.rc-pick-btn {
    width: 100%;
    margin-bottom: 8px;
}

.rc-selected-list {
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rc-selected-list li {
    font-size: 12px;
    line-height: 1.3;
    color: #374151;
    background: #f1f5f5;
    border-radius: 6px;
    padding: 4px 8px;
}

/* alternative question labels: default label on top, editable override below */
.rc-alt-labels {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
}

.rc-alt-label-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rc-alt-label-default {
    font-size: 11px;
    line-height: 1.3;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rc-alt-label-input {
    font-size: 12px;
    color: #374151;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 4px 8px;
}

.rc-alt-label-input::placeholder {
    color: #9ca3af;
    font-style: italic;
}

/* question picker popup */
.rc-question-dialog {
    width: 520px;
    max-width: 90vw;
}

.rc-check-list-modal {
    max-height: 60vh;
    border: none;
    padding: 0;
    margin-bottom: 0;
}

/* dataset panel */
.cre-datasets {
    padding: 12px;
    overflow-y: auto;
}

.rc-dataset {
    border: 1px solid #e3e3e3;
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rc-dataset-head {
    display: flex;
    gap: 6px;
    align-items: center;
}

.rc-dataset-head .cre-name {
    flex: 1;
    min-width: 0;
}

.rc-dataset-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid #eee;
}

.rc-dataset-name {
    flex: 1;
    min-width: 0;
    font-weight: 600;
}

.rc-dataset-confirm {
    color: #b00020;
    font-size: 0.85em;
    white-space: nowrap;
}

/* Add / export / import row below the dataset list. */
.rc-dataset-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

/* File input styled as a button in the tool row; the native control is hidden. */
.rc-dataset-import {
    display: inline-block;
    cursor: pointer;
}

.rc-dataset-import input {
    display: none;
}

.rc-value-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
    padding: 8px;
    border: 1px solid #e0e7ff;
    border-radius: 6px;
    background: #f5f7ff;
}

.rc-value-line {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 12px;
}

.rc-value-line span {
    color: #64748b;
}

/* value details: the rows behind one node's value, opened from the inspector.
   Sits above the flow editor's own overlay, which is already full screen. */
.fvd-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10030;
}

.fvd-popup {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    width: min(900px, 92vw);
    max-height: 85vh;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
}

.fvd-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.fvd-title {
    font-weight: 600;
    font-size: 15px;
}

.fvd-count {
    font-size: 12px;
    color: #64748b;
}

/* The table scrolls, not the popup: the search box and the count stay in view
   while paging through a few hundred rows. */
.fvd-scroll {
    overflow: auto;
    min-height: 0;
}

.fvd-table {
    border-collapse: collapse;
    font-size: 12px;
    width: 100%;
}

.fvd-table th {
    position: sticky;
    top: 0;
    background: #fff;
    text-align: left;
    color: #777;
    font-weight: 500;
    padding: 4px 10px 4px 0;
    border-bottom: 1px solid #e3e3e3;
}

.fvd-table td {
    padding: 4px 10px 4px 0;
    border-bottom: 1px solid #f2f2f2;
    vertical-align: top;
    word-break: break-word;
}

/* A single value (a number, a text, an error message) shown in full. */
.fvd-single {
    font-size: 13px;
    white-space: pre-wrap;
    word-break: break-word;
    padding: 8px;
    border: 1px solid #e3e3e3;
    border-radius: 6px;
}

/* dataset flow editor */
.dfe-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10020;
}

/* Full screen: the flow canvas is the point of this editor, so it gets every
   pixel the viewport has. Sized off the fixed inset:0 overlay rather than in vw,
   which would count the scrollbar and overflow horizontally. */
.dfe-popup {
    background: #fff;
    border-radius: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.dfe-root {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.dfe-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-bottom: 1px solid #e3e3e3;
    flex-wrap: wrap;
}


.dfe-palette {
    width: 170px;
    flex-shrink: 0;
    border-right: 1px solid #e3e3e3;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow-y: auto;
}

.dfe-palette .popup-btn-outline {
    width: 100%;
    text-align: left;
}

.dfe-body {
    display: flex;
    flex: 1;
    min-height: 0;
}

.dfe-canvas {
    flex: 1;
    min-width: 0;
    position: relative;
}

.dfe-inspector {
    width: 260px;
    border-left: 1px solid #e3e3e3;
    padding: 10px;
    overflow-y: auto;
}

/* ── Chart statistics (Σ button + popup) ─────────────────────────────── */

.rc-chart {
    position: relative;
}

.rc-chart-stats-btn {
    position: absolute;
    top: 2px;
    right: 2px;
    z-index: 5;
    width: 22px;
    height: 22px;
    border: 1px solid #cfcfcf;
    border-radius: 50%;
    background: #fff;
    color: #555;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.rc-block:hover .rc-chart-stats-btn {
    opacity: 0.85;
}

.rc-chart-stats-btn:hover {
    opacity: 1;
    border-color: #7a7ae8;
    color: #4646d8;
}

/* PNG download button, directly below the Σ button. */
.rc-chart-export-btn {
    position: absolute;
    top: 26px;
    right: 2px;
    z-index: 5;
    width: 22px;
    height: 22px;
    border: 1px solid #cfcfcf;
    border-radius: 50%;
    background: #fff;
    color: #555;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.rc-block:hover .rc-chart-export-btn {
    opacity: 0.85;
}

.rc-chart-export-btn:hover {
    opacity: 1;
    border-color: #7a7ae8;
    color: #4646d8;
}

.csp-popup {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    width: min(1020px, 94vw);
    max-height: 85vh;
    overflow: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.csp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.csp-title {
    font-weight: 600;
    font-size: 15px;
}

.csp-vars {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* One column per variable: its picker and everything selectable about it. */
.csp-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: stretch;
}

.csp-column {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.csp-column + .csp-column {
    border-left: 1px solid #e2e2ec;
    padding-left: 16px;
}

@media (max-width: 720px) {
    .csp-columns {
        grid-template-columns: 1fr;
    }

    .csp-column + .csp-column {
        border-left: none;
        border-top: 1px solid #e2e2ec;
        padding-left: 0;
        padding-top: 12px;
    }
}

.csp-var {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: #555;
    min-width: 240px;
    flex: 1;
}

/* Inside a column (or as the full-width test row) a variable picker sizes to its
   content instead of stretching to fill the popup's height. */
.csp-column > .csp-var,
.csp-test-choice {
    flex: none;
    min-width: 0;
}

.csp-var select {
    padding: 5px 8px;
    border: 1px solid #d5d5d5;
    border-radius: 6px;
    font-size: 13px;
    background: #fff;
}

.csp-choices {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: #f8f8fc;
    border-radius: 6px;
    padding: 8px 10px;
}

.csp-choices-label {
    font-size: 12px;
    color: #555;
}

.csp-choices-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.csp-choices-actions {
    display: flex;
    gap: 10px;
    flex: none;
}

.csp-link-btn {
    border: none;
    background: none;
    padding: 0;
    color: #4646d8;
    font-size: 12px;
    cursor: pointer;
}

.csp-link-btn:hover {
    text-decoration: underline;
}

.csp-choices-remove {
    border: none;
    background: none;
    color: #888;
    font-size: 15px;
    line-height: 1;
    padding: 0 2px;
    cursor: pointer;
}

.csp-choices-remove:hover {
    color: #c0392b;
}

.csp-add-merged {
    align-self: flex-start;
    border: 1px dashed #c9c9d8;
    border-radius: 6px;
    background: none;
    color: #4646d8;
    font-size: 12px;
    padding: 5px 10px;
    cursor: pointer;
}

.csp-add-merged:hover {
    border-color: #7a7ae8;
    background: #f6f6fd;
}

.csp-choice-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
}

.csp-choice {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    cursor: pointer;
}

.csp-choice input {
    margin: 0;
}

.csp-results {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Previous numbers stay readable while the next ones are computed. */
.csp-results-stale {
    opacity: 0.45;
}

.csp-table-label {
    font-size: 12px;
    color: #555;
}

.csp-posthoc-title {
    font-size: 12px;
    font-weight: 600;
    color: #555;
}

.csp-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-top: 1px solid #ececec;
    padding-top: 10px;
}

.csp-group-title {
    font-weight: 600;
    font-size: 13px;
}

.csp-table {
    border-collapse: collapse;
    font-size: 12px;
    width: 100%;
}

.csp-table th {
    text-align: left;
    color: #777;
    font-weight: 500;
    padding: 3px 8px 3px 0;
    border-bottom: 1px solid #e3e3e3;
}

.csp-table td {
    padding: 3px 8px 3px 0;
    border-bottom: 1px solid #f2f2f2;
}

.csp-test {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 13px;
    background: #f8f8fc;
    border-radius: 6px;
    padding: 8px 10px;
}

.csp-sig {
    color: #1c7c33;
    background: #e3f5e8;
    border-radius: 10px;
    padding: 2px 10px;
    font-weight: 600;
}

.csp-nonsig {
    color: #777;
    background: #efefef;
    border-radius: 10px;
    padding: 2px 10px;
}

.csp-warning {
    color: #9a6b00;
    font-size: 12px;
}

.csp-loading {
    color: #777;
    font-size: 13px;
    padding: 12px 0;
}

/* --- rule dataflow editor -------------------------------------------------
   The rule's own flows, hosted in the same editor a report's datasets use. The
   root fills the popup body so the canvas gets a height to work with — width
   included: one host is a plain block body, the other a flex row, and without a
   width of its own the root shrinks to its content there and the canvas ends up
   a narrow column. */
.rfe-root {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.rfe-panel {
    padding: 12px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rfe-context {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: flex-end;
}

.rfe-context label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.85em;
    color: #555;
}