/* BENTO IDE: the C tab and the Example Explorer's C examples (js/c-editor/ide-c.js, owner 2026-10-30).
   Colours, type and radii are the IDE's tokens (css/style.css). Thai text is 20 px or more (house rule). */

/* the C tab takes the code panel's place: the editor frame fills it, the terminal stays below */
.c-tab-panel { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
.c-tab-panel[hidden] { display: none; }
.c-tab-frame { flex: 1; width: 100%; min-height: 0; border: 0; display: block; background: var(--bg-code); }

/* "C" on a card that has a C version */
.type-badge.type-c { background: var(--tesa-primary); color: #fff; }

/* the filter "มีโค้ด C" */
.examples-chip.examples-chip-th { line-height: 1.4; }

/* the preview: each board's C status, beside Open in C */
.preview-c-status { font-size: 12px; color: var(--text-secondary); margin-right: 4px; }
.preview-c-status[hidden] { display: none; }

/* over the Python tab while it holds a C-only example (the Game Console's games): "ตัวอย่างนี้มีเฉพาะ C" */
.c-only-note { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: var(--tesa-primary-subtle); border-bottom: 1px solid var(--border-color); }
.c-only-note[hidden] { display: none; }
.c-only-note [lang="th"] { flex: 1; line-height: 1.5; }

/* the preview's "Open in Python" / "Open in C": the IDE's own button size (the 20 px rule is for the board's screen, not IDE
   buttons; owner 2026-10-30 13:0x); one row, nothing wraps; the one that does not apply is disabled */
.preview-actions { flex-wrap: nowrap; align-items: center; }   /* the counter on the buttons' line */
.preview-actions .btn { white-space: nowrap; flex-shrink: 0; }
.preview-actions .preview-position { white-space: nowrap; }
#btnOpenInEditor .c-btn-th, #btnOpenInC .c-btn-th { line-height: 1.4; }
#btnOpenInEditor:disabled, #btnOpenInC:disabled { opacity: 0.55; cursor: not-allowed; }
/* the preview's C tab: each board's status, then the code read-only (CodeMirror, as in the C tab) */
.preview-c-container { display: flex; flex-direction: column; }
.preview-c-container.hidden { display: none; }
.preview-c-boards { flex: none; padding: 6px 12px; font-size: 12px; color: var(--text-secondary); border-bottom: 1px solid var(--border-color); }
.preview-c-code { flex: 1; min-height: 0; overflow: auto; }
.preview-c-code .cm-editor { height: 100%; }