/* Vue CoddyBlock (lecture seule) de la galerie : mêmes formes et couleurs que
   l'éditeur de blocs de l'application (blocks.js), sans les commandes d'édition. */

.cbv {
    --cb-tab: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 6' preserveAspectRatio='none'%3E%3Cpath d='M0 0h20v1.5A4.5 4.5 0 0 1 15.5 6h-11A4.5 4.5 0 0 1 0 1.5z'/%3E%3C/svg%3E");
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 400;
    line-height: normal;
    color: var(--text, #0f1419);
}

/* couleurs forcées en clair pendant l'export (l'image a toujours un fond blanc) */
.cbv.cbv-light {
    --surface: #ffffff;
    --text: #0f1419;
    --text-dim: #536471;
    --text-dimmer: #8b98a5;
    --comment: #8b9eb7;
}

.cbv-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    font-family: var(--font-text);
    font-size: 12px;
}

.cbv-stats {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-dim);
}

.cbv-stats .mdi {
    color: var(--accent);
    font-size: 15px;
}

.cbv-actions {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.cbv-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 12px;
    font: inherit;
    font-weight: 600;
    color: #fff;
    background: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    transition: filter .15s, transform .15s;
}

.cbv-btn:hover:not(:disabled) {
    filter: brightness(1.08);
}

.cbv-btn:active:not(:disabled) {
    transform: translateY(1px);
}

.cbv-btn:disabled {
    opacity: .6;
    cursor: progress;
}

.cbv-btn .mdi {
    font-size: 16px;
}

.cbv-btn.is-ghost {
    color: var(--text-dim);
    background: transparent;
    border-color: var(--border2);
}

.cbv-btn.is-ghost:hover {
    color: var(--accent);
    border-color: var(--accent);
    filter: none;
}

.cbv-ws {
    max-height: 560px;
    overflow: auto;
    padding: 20px 24px 28px;
    background-color: var(--bg, #f7f9fa);
    background-image: radial-gradient(var(--border2, rgba(15, 20, 25, .12)) 1px, transparent 1px);
    background-size: 22px 22px;
}

.cbv-err {
    padding: 28px 20px;
    text-align: center;
    color: var(--text-dim);
}

/* ===== blocs ===== */
.cbv .cb-list { min-height: 22px; }
.cbv .cb-root { width: max-content; min-width: 100%; }
.cbv .cb-blk { position: relative; width: max-content; min-width: min-content; margin-top: 2px; color: var(--text, #0f1419); }
.cbv .cb-blk.cb-gap { margin-top: 16px; }
.cbv .cb-row { position: relative; isolation: isolate; display: flex; align-items: center; flex-wrap: nowrap; gap: 6px; min-height: 30px; box-sizing: border-box; padding: 4px 11px 4px 13px; border-radius: 9px; }
.cbv .cb-row::before { content: ''; position: absolute; inset: 0; z-index: -1; box-sizing: border-box; border-radius: inherit; background: var(--cb-bg); border: 1px solid var(--cb-bd); border-left: 4px solid var(--cb-col); }
.cbv .cb-notch::before { -webkit-mask: var(--cb-tab) var(--cb-nx, 16px) 0/20px 6px no-repeat, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: var(--cb-tab) var(--cb-nx, 16px) 0/20px 6px no-repeat, linear-gradient(#000 0 0); mask-composite: exclude; }
.cbv .cb-bump::after { content: ''; position: absolute; left: var(--cb-bx, 18px); top: 100%; width: 16px; height: 6px; margin-top: -1px; background: var(--cb-col); opacity: .8; -webkit-mask: var(--cb-tab) 0 0/100% 100% no-repeat; mask: var(--cb-tab) 0 0/100% 100% no-repeat; pointer-events: none; z-index: 1; }
.cbv .cb-cap { border-bottom-left-radius: 9px; border-bottom-right-radius: 9px; }
.cbv .cb-hat { margin-top: 12px; }
.cbv .cb-root > .cb-hat:first-child { margin-top: 2px; }
.cbv .cb-hat > .cb-row:first-child { padding-top: 6px; padding-bottom: 6px; }
.cbv .cb-c > .cb-head { border-bottom-left-radius: 0; --cb-bx: 30px; }
.cbv .cb-clause { border-radius: 0 9px 9px 0; --cb-nx: 28px; --cb-bx: 30px; }
.cbv .cb-foot { min-height: 22px; padding-top: 3px; padding-bottom: 3px; border-radius: 0 9px 9px 9px; font-size: 10px; --cb-nx: 28px; }
.cbv .cb-foot > .cb-lbl { opacity: .8; }
.cbv .cb-arm { display: flex; }
.cbv .cb-armbar { position: relative; width: 12px; flex-shrink: 0; box-sizing: border-box; background: var(--cb-bg); border-left: 4px solid var(--cb-col); box-shadow: inset -1px 0 0 var(--cb-bd); }
.cbv .cb-armbar::before, .cbv .cb-armbar::after { content: ''; position: absolute; left: 100%; width: 9px; height: 9px; pointer-events: none; }
.cbv .cb-armbar::before { top: -1px; background: radial-gradient(circle at 100% 100%, transparent 8px, var(--cb-bd) 8.4px 8.9px, var(--cb-bg) 9.3px); }
.cbv .cb-armbar::after { bottom: -1px; background: radial-gradient(circle at 100% 0, transparent 8px, var(--cb-bd) 8.4px 8.9px, var(--cb-bg) 9.3px); }
.cbv .cb-arm > .cb-list { flex: 1; min-width: 130px; min-height: 28px; padding: 0 0 4px; }
.cbv .cb-ico { width: 13px; height: 13px; flex-shrink: 0; margin-right: -2px; fill: none; stroke: var(--cb-col); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.cbv .cb-hat > .cb-row:first-child > .cb-ico { width: 14px; height: 14px; }
.cbv .cb-lbl { font-weight: 600; white-space: nowrap; color: var(--cb-col); }
.cbv .cb-slash { margin-left: 6px; }

/* champs (en lecture seule : du texte, mis en forme comme les cases de l'éditeur) */
.cbv .cb-in { display: inline-flex; align-items: center; height: 22px; min-width: 16px; box-sizing: border-box; padding: 0 7px; white-space: pre; color: var(--text, #0f1419); background: var(--surface, #fff); border: 1px solid var(--cb-bd); border-radius: 11px; }
.cbv .cb-name { border-radius: 5px; }
.cbv .cb-wide:empty { min-width: 40px; }
.cbv .cb-fname { font-weight: 700; }
.cbv .cb-fn { border-radius: 5px; background: transparent; border-color: transparent; border-bottom: 1px dashed var(--cb-bd); color: var(--cb-col); font-weight: 700; padding: 0 3px; }
.cbv .cb-cmt { border-radius: 5px; background: transparent; border-style: dashed; font-style: italic; color: var(--comment, var(--text-dim, #536471)); }
.cbv .cb-sel { display: inline-flex; align-items: center; height: 22px; box-sizing: border-box; padding: 0 7px; font-weight: 600; white-space: pre; color: var(--cb-col); background-color: var(--cb-bg); border: 1px solid var(--cb-bd); border-radius: 5px; }
.cbv .cb-op { justify-content: center; min-width: 24px; border-radius: 11px; }
.cbv .cb-textrow { align-items: flex-start; }
.cbv .cb-textrow > .cb-lbl { padding-top: 4px; }
.cbv .cb-textrow > .cb-ico { margin-top: 4px; }
.cbv .cb-area { display: inline-block; min-width: 120px; box-sizing: border-box; padding: 2px 7px; line-height: 16px; white-space: pre; color: var(--text, #0f1419); background: var(--surface, #fff); border: 1px solid var(--cb-bd); border-radius: 5px; }
.cbv .cb-comment .cb-area { background: transparent; border-style: dashed; font-style: italic; color: var(--comment, var(--text-dim, #536471)); }

/* expressions */
.cbv .cb-slot { display: inline-flex; align-items: center; gap: 3px; border-radius: 13px; }
.cbv .cb-ex { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 4px 5px; min-height: 26px; box-sizing: border-box; padding: 1px 7px; border-radius: 13px; background: var(--cb-bg); border: 1px solid var(--cb-bd); color: var(--text, #0f1419); }
.cbv .cb-ex .cb-ex { background: transparent; padding: 0 5px; }
.cbv .cb-ex .cb-ex .cb-ex { border-color: transparent; padding: 0 2px; }
.cbv .cb-flat > .cb-op { opacity: .85; }
.cbv .cb-ex > .cb-lbl { color: var(--cb-col); }
.cbv .cb-quote, .cbv .cb-quote-end { font-weight: 700; color: var(--cb-col); padding: 0 1px; }
.cbv .cb-swatch { display: inline-block; width: 20px; height: 20px; flex: none; box-sizing: border-box; border: 1px solid var(--cb-bd); border-radius: 50%; background: linear-gradient(var(--sw, transparent), var(--sw, transparent)), repeating-conic-gradient(#ccc 0 25%, #fff 0 50%) 50%/8px 8px; }
.cbv .cb-off > .cb-row, .cbv .cb-off > .cb-arm { opacity: .45; filter: grayscale(.85); }

@media (max-width: 820px) {
    .cbv-ws { max-height: 70vh; padding: 14px 14px 22px; }
    .cbv-actions { margin-left: 0; width: 100%; }
    .cbv-btn { flex: 1; justify-content: center; }
}