/* =====================================================================
   editor.css — как выглядит документ в визуальном режиме.

   Общий для продукта (index.html) и стендов в /lab/. Страница вокруг
   редактора — в своих файлах.
   ===================================================================== */

/* --- Шрифты --------------------------------------------------------------
   Системные, без загрузки (plan.md, п.8.2). Одни на продукт, статьи и
   CodeMirror (editor.js берёт их темой).                                  */
:root {
  --font-text: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, Menlo, Consolas, monospace;
}

/* --- Токены цвета -------------------------------------------------------
   Светлая палитра — BAZA TZ глазами (plan.md, п.8.2), тёмная — та же
   синяя гамма в ночи. Тёмная включается системой (prefers-color-scheme)
   или вручную: theme.js ставит <html data-theme="light|dark">, ручной
   выбор сильнее системы. Токены здесь, а не в app.css: editor.css
   грузят и страница продукта, и стенды /lab/.                          */
:root {
  color-scheme: light;
  --c-field: #f2f4f7;        /* поле вокруг листа, панели */
  --c-surface: #fff;         /* лист, тулбар, меню */
  --c-sunken: #f6f8fa;       /* блок кода, цитата, свойства, заглушки */
  --c-zebra: #fafbfd;
  --c-border: #dbe1ea;
  --c-border-strong: #c6cdd8;
  --c-text: #1a1a2e;
  --c-text-2: #445;
  --c-muted: #6b7384;
  --c-faint: #8a94a3;
  --c-disabled: #b5bfcc;
  --c-brand: #163a63;        /* заголовки, значки тулбара, шапка таблицы */
  --c-accent: #ff9f1c;
  --c-accent-hover: #ffb24d;
  --c-on-accent: #1a1a2e;    /* текст на оранжевом — тёмный в обеих темах */
  --c-link: #1257a5;
  --c-link-line: #9db8d9;
  --c-focus: #1e6fd9;
  --c-hover: #eef2f7;
  --c-pressed: #dde7f4;
  --c-row-hover: #f3f7fc;
  --c-code-bg: #eef1f5;
  --c-code-text: #8a3b12;    /* инлайн-код в режиме «Код» */
  --c-html: #8a6d3b;
  --c-md-mark: #b45309;      /* режим «Код»: служебные знаки разметки */
  --c-md-accent: #c2410c;    /* …маркеры заголовков, списков, галочки */
  --c-md-quote: #2d6a3e;
  --c-md-quote-bar: #7fb08a;
  --c-md-chip: #f6ede6;      /* подложка инлайн-кода */
  --c-danger: #b32;
  --c-sel: #d9dee6;
  --c-sel-focus: #cfe0f7;
  --c-shadow: 22, 58, 99;
  --c-header: #163a63;
  --c-header-text: #fff;
  --c-header-muted: #c9d6e6;
  --c-header-dirty: #ffd39a;
  /* Рамки и подсветка кнопок на шапке — белым поверх её цвета, в обеих
     темах одинаковые, поэтому в тёмных блоках их нет */
  --c-header-line: rgba(255, 255, 255, .35);
  --c-header-line-soft: rgba(255, 255, 255, .2);
  --c-header-hover: rgba(255, 255, 255, .1);
  --c-header-pressed: rgba(255, 255, 255, .18);
  --c-note-bg: #fff6e5;
  --c-note-text: #6b4a00;
  --c-err-bg: #fdecea;
  --c-err-text: #8a1f11;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --c-field: #0f1620;
  --c-surface: #18212d;
  --c-sunken: #1f2935;
  --c-zebra: #1b2430;
  --c-border: #2d3a4b;
  --c-border-strong: #405066;
  --c-text: #e2e7ee;
  --c-text-2: #b9c3d0;
  --c-muted: #93a0b2;
  --c-faint: #748196;
  --c-disabled: #4a5668;
  --c-brand: #a9c9ef;
  --c-accent: #ff9f1c;
  --c-accent-hover: #ffb24d;
  --c-link: #82b4f0;
  --c-link-line: #3e5f88;
  --c-focus: #4d94ff;
  --c-hover: #243142;
  --c-pressed: #2c3f58;
  --c-row-hover: #212c3a;
  --c-code-bg: #263243;
  --c-code-text: #eba57f;
  --c-html: #d6b46e;
  --c-md-mark: #e8a15a;
  --c-md-accent: #ffab5e;
  --c-md-quote: #a6d7a0;
  --c-md-quote-bar: #4f7a58;
  --c-md-chip: #2e2a28;
  --c-danger: #ff8579;
  --c-sel: #2c3a4c;
  --c-sel-focus: #284a78;
  --c-shadow: 0, 0, 0;
  --c-header: #0b1522;
  --c-header-text: #e8eef6;
  --c-header-muted: #9fb0c6;
  --c-header-dirty: #ffd39a;
  --c-note-bg: #3a2f14;
  --c-note-text: #f1d692;
  --c-err-bg: #3e1c19;
  --c-err-text: #ffb3a8;
}
/* Система в тёмной, а вручную ничего не выбрано — та же тёмная палитра.
   Копия блока выше: CSS не умеет «применить правило из другого». */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --c-field: #0f1620; --c-surface: #18212d; --c-sunken: #1f2935; --c-zebra: #1b2430;
    --c-border: #2d3a4b; --c-border-strong: #405066;
    --c-text: #e2e7ee; --c-text-2: #b9c3d0; --c-muted: #93a0b2; --c-faint: #748196; --c-disabled: #4a5668;
    --c-brand: #a9c9ef; --c-accent: #ff9f1c; --c-accent-hover: #ffb24d;
    --c-link: #82b4f0; --c-link-line: #3e5f88; --c-focus: #4d94ff;
    --c-hover: #243142; --c-pressed: #2c3f58; --c-row-hover: #212c3a;
    --c-code-bg: #263243; --c-code-text: #eba57f; --c-html: #d6b46e; --c-danger: #ff8579;
    --c-md-mark: #e8a15a; --c-md-accent: #ffab5e; --c-md-quote: #a6d7a0; --c-md-quote-bar: #4f7a58; --c-md-chip: #2e2a28;
    --c-sel: #2c3a4c; --c-sel-focus: #284a78; --c-shadow: 0, 0, 0;
    --c-header: #0b1522; --c-header-text: #e8eef6; --c-header-muted: #9fb0c6; --c-header-dirty: #ffd39a;
    --c-note-bg: #3a2f14; --c-note-text: #f1d692; --c-err-bg: #3e1c19; --c-err-text: #ffb3a8;
  }
}

/* --- Служебные цвета CodeMirror --------------------------------------
   Базовая тема красит курсор чёрным, выделение серым, панель поиска
   светлой — в тёмной теме курсор пропадал бы. Её правила сильнее по
   специфичности, отсюда !important.                                     */
.cm-editor { color: var(--c-text); }
.cm-editor .cm-content { caret-color: var(--c-text) !important; }
.cm-editor .cm-cursor, .cm-editor .cm-dropCursor { border-left-color: var(--c-text) !important; }
.cm-editor .cm-selectionBackground { background: var(--c-sel) !important; }
.cm-editor.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground { background: var(--c-sel-focus) !important; }
.cm-editor .cm-panels { background-color: var(--c-field) !important; color: var(--c-text) !important; border-color: var(--c-border) !important; }
.cm-editor .cm-textfield { background-color: var(--c-surface) !important; color: var(--c-text); border: 1px solid var(--c-border-strong) !important; }
.cm-editor .cm-button { background-image: none !important; background-color: var(--c-surface) !important; color: var(--c-text);
                        border: 1px solid var(--c-border-strong) !important; }

/* --- Лист ---------------------------------------------------------------
   Серое поле вокруг, белый лист с тенью посередине: видно, где документ и
   куда можно печатать. Лист — это сам .cm-content, поэтому клик по его
   полям ставит курсор. Отступы вокруг листа — margin у .cm-content внутри
   .cm-scroller (флекс), CodeMirror меряет его по getBoundingClientRect и
   это переносит; у блочных виджетов внутри листа margin нельзя (см. .md-table). */
.md-visual .cm-scroller { font-size: 17px; line-height: 1.6; background: var(--c-field); }
/* min-width: 0 — содержимое редактора флекс-элемент, и его минимальная
   ширина по умолчанию равна самой широкой таблице: тогда вбок уезжает вся
   страница, а не одна таблица. Разрешаем ему сжиматься. */
.md-visual .cm-content {
    flex-grow: 0; width: 100%; min-width: 0; max-width: 52em; margin: 24px auto 32px; padding: 44px 56px 30vh; }
/* Телефон: лист во всю ширину, без полей вокруг и тени — экран и так узкий */
@media (max-width: 600px) {
  .md-visual .cm-scroller { background: var(--c-surface); }
  .md-visual .cm-content { margin: 0; padding: 20px 16px 30vh; }
}
.md-visual .cm-gutters { display: none; }
/* Исходник — тот же лист на сером поле, что и документ: в «Двух окнах»
   окна одного вида и отступ сверху одинаковый. Ширина не ограничена —
   строки кода бывают длинными. */
.md-source .cm-scroller { background: var(--c-field); }
.md-source .cm-content { flex-grow: 0; width: calc(100% - 48px); margin: 24px 24px 32px; padding: 20px 24px 30vh; }
/* Подсветка разметки: классы ставит HighlightStyle в editor.js. Роль
   видна и цветом, и формой строки: блок кода на подложке — внутри него
   Markdown не работает, звёздочки там не жирный; у цитаты полоса слева —
   `>` стоит только в начале, а цитата тянется на несколько строк.
   У таблицы подложки нет: трубы и так видны. Префикс src- — чтобы не
   совпасть с классами визуального режима (.md-code, .md-html). */
.md-source .src-h { font-weight: 700; color: var(--c-brand); }
.md-source .src-strong { font-weight: 700; }
.md-source .src-em { font-style: italic; }
.md-source .src-strike { text-decoration: line-through; color: var(--c-muted); }
.md-source .src-link { color: var(--c-link); }
.md-source .src-url { color: var(--c-muted); text-decoration: none; }
.md-source .src-code { color: var(--c-code-text); background: var(--c-md-chip); border-radius: 3px; }
.md-source .src-codeline .src-code { background: none; }
.md-source .src-quote { color: var(--c-md-quote); }
.md-source .src-html { color: var(--c-html); }
/* Маркер внутри зачёркнутого получает оба класса — зачёркивание снимаем */
.md-source .src-mark { color: var(--c-md-mark); text-decoration: none; }
/* Тег списка висит на всём тексте пункта, красится только маркер */
.md-source .src-h.src-mark, .md-source .src-task { color: var(--c-md-accent); }
.md-source .src-list.src-mark { color: var(--c-md-accent); font-weight: 700; }
.md-source .src-task { font-weight: 700; }
.md-source .cm-line.src-codeline { background: var(--c-sunken); }
.md-source .cm-line.src-quoteline { box-shadow: inset 3px 0 var(--c-md-quote-bar); }
@media (max-width: 600px) {
  .md-source .cm-scroller { background: var(--c-surface); }
  .md-source .cm-content { width: 100%; margin: 0; padding: 12px 16px 30vh; }
}
/* Белый лист — не фон .cm-content, а подложка под ним. Выделение
   CodeMirror рисует слоем под текстом (z-index -2 в .cm-scroller), и
   непрозрачный фон .cm-content его закрывал: после двойного клика слово
   выделено, а на экране только курсор в конце слова. Подложка с -3
   ложится под слой выделения. `>` — чтобы не достаться редактору ячейки. */
.md-visual > .cm-scroller > .cm-content, .md-source > .cm-scroller > .cm-content { position: relative; }
.md-visual > .cm-scroller > .cm-content::before, .md-source > .cm-scroller > .cm-content::before {
    content: ''; position: absolute; inset: 0; z-index: -3; pointer-events: none;
    background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 4px;
    box-shadow: 0 1px 3px rgba(var(--c-shadow), .08), 0 6px 24px rgba(var(--c-shadow), .06); }
@media (max-width: 600px) {
  .md-visual > .cm-scroller > .cm-content::before, .md-source > .cm-scroller > .cm-content::before {
    border: 0; border-radius: 0; box-shadow: none; }
}
.md-visual.cm-focused { outline: none; }
/* Ширину читаемой строки держат строки текста, а не весь редактор:
   таблице нужна вся ширина, иначе широкая таблица сжимается в столбики */
.md-visual .cm-line { padding: 0; max-width: 46em; }

/* --- Заголовки: вся строка ------------------------------------------- */
.cm-line.md-h1 { font-size: 1.75em; font-weight: 700; color: var(--c-brand); line-height: 1.25; padding-top: .6em; }
.cm-line.md-h2 { font-size: 1.4em; font-weight: 700; color: var(--c-brand); line-height: 1.3; padding-top: .5em; }
.cm-line.md-h3 { font-size: 1.18em; font-weight: 700; color: var(--c-text); padding-top: .4em; }
.cm-line.md-h4, .cm-line.md-h5, .cm-line.md-h6 { font-size: 1.05em; font-weight: 700; color: var(--c-text-2); padding-top: .3em; }
/* Подчёркивание setext-заголовка (=== / ---) — пока курсор не в заголовке */
.cm-line.md-setext-under { font-size: 0; line-height: 0; padding: 0; height: 2px; }

/* --- Строчная разметка ----------------------------------------------- */
/* Проявленные маркеры (`**`, `~~`, `[`, `](адрес)`) — серым, без стиля того, что они обрамляют */
.md-mark { color: var(--c-faint); font-weight: 400; font-style: normal; text-decoration: none; }
.md-strong { font-weight: 700; }
.md-em { font-style: italic; }
.md-strike { text-decoration: line-through; color: var(--c-faint); }
.md-code { font-family: var(--font-mono); font-size: .88em;
           background: var(--c-code-bg); border-radius: 4px; padding: 1px 4px; }
.md-link { color: var(--c-link); text-decoration: underline; text-decoration-color: var(--c-link-line); text-underline-offset: 2px; }
.md-html { font-family: var(--font-mono); font-size: .85em; color: var(--c-html); }
.md-fnref { font-size: .75em; vertical-align: super; line-height: 0; color: var(--c-link); }
.md-fndef { font-weight: 600; color: var(--c-link); }
.md-linkref { color: var(--c-muted); font-size: .9em; }
.md-img-src { color: var(--c-muted); }
.md-data-chip { display: inline-block; font-size: .8em; padding: 0 6px; border-radius: 4px;
                background: var(--c-hover); color: var(--c-brand); border: 1px solid var(--c-border); }

/* --- Цитата: полоса слева на каждую строку, вложенность — шире ------- */
/* Полоса на каждый уровень: 3px полосы через 14px повтором, а правее
   последнего уровня всё закрывает заливка фона цитаты */
.cm-line.md-quote { padding-left: calc(var(--depth, 1) * 14px + 8px); color: var(--c-text-2);
                    background:
                      linear-gradient(var(--c-sunken), var(--c-sunken)) calc(var(--depth, 1) * 14px) 0 / 100% 100% no-repeat,
                      linear-gradient(90deg, var(--c-border-strong) 3px, var(--c-sunken) 3px) 0 0 / 14px 100% repeat-x; }

/* --- Списки: висячий отступ, перенос встаёт под текст пункта --------- */
.cm-line.md-li { padding-left: calc(var(--lead, 0) * .6em + 1.5em);
                 text-indent: calc(-1 * (var(--lead, 0) * .6em + 1.5em)); }
.md-lead { font-family: var(--font-mono); font-size: 1em; }
.md-bullet, .md-olmark { display: inline-block; min-width: 1.5em; text-indent: 0; }
.md-bullet { color: var(--c-muted); text-align: center; }
.md-olmark { color: var(--c-text-2); }
.md-task-box { display: inline-block; width: 1em; height: 1em; margin-right: .1em; vertical-align: -.12em;
               text-indent: 0; border: 1.5px solid var(--c-faint); border-radius: 3px; cursor: pointer;
               font-size: .95em; line-height: .95em; text-align: center; color: #fff; /* галочка на синем — в обеих темах */ }
.md-task-box.md-task-done { background: var(--c-focus); border-color: var(--c-focus); }
.md-task-text-done { color: var(--c-faint); text-decoration: line-through; }

/* --- Блок кода: фон на всю строку, язык — табличкой ------------------ */
.cm-line.md-fence-line { background: var(--c-sunken); font-family: var(--font-mono);
                         font-size: .86em; max-width: none; padding: 0 12px; }
.cm-line.md-fence-first { border-radius: 8px 8px 0 0; padding-top: 4px; }
.cm-line.md-fence-last { border-radius: 0 0 8px 8px; padding-bottom: 4px; }
.cm-line.md-fence-close { line-height: .5; }
.md-fence-label { font-family: var(--font-text); font-size: .8em;
                  color: var(--c-faint); text-transform: lowercase; }
.cm-line.md-html-line { font-family: var(--font-mono); font-size: .85em; color: var(--c-html); }
/* Свойства документа (YAML в начале файла) */
.cm-line.md-front { font-family: var(--font-mono); font-size: .82em; color: var(--c-muted);
                    background: var(--c-sunken); padding: 0 12px; max-width: none; }
.cm-line.md-front-first { border-radius: 8px 8px 0 0; }
.cm-line.md-front-last { border-radius: 0 0 8px 8px; }

/* --- Линия ------------------------------------------------------------ */
.md-hr-w { display: inline-block; width: 100%; height: 0; border-top: 2px solid var(--c-border); vertical-align: middle; }

/* --- Картинка --------------------------------------------------------- */
.md-imgbox { display: inline-block; vertical-align: middle; max-width: 100%; }
.md-img { max-width: 100%; max-height: 420px; border-radius: 6px; vertical-align: middle; display: block; }
.md-imgstub {
    display: inline-block; border: 1px dashed var(--c-border-strong); border-radius: 6px;
    padding: 6px 10px; color: var(--c-muted); font-size: .88em; background: var(--c-sunken); overflow-wrap: anywhere; }

/* --- Панель поиска: цвета — у служебных цветов CodeMirror выше ------- */
.md-visual .cm-panels { font-size: 14px; }

/* --- Таблица: настоящая <table> поверх исходника --------------------
   Рисует app/editor/table.js. Ячейка в правке — вложенный CodeMirror,
   поэтому ниже гасятся правила, которые иначе достались бы ему от
   внешнего редактора: высота 70vh, отступы .cm-content и строк.      */

/* Отступы — padding, не margin: CodeMirror мерит блочный виджет по
   offsetHeight, margin в его карту высот не попадает, и всё ниже каждой
   таблицы сдвигалось — клик попадал в соседнюю строку. */
.md-table { position: relative; margin: 0; padding: 10px 0 14px; max-width: 100%; }
.md-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.md-table table {
    /* Не мельче 16px: иначе iOS Safari приближает страницу при фокусе в ячейке */
    border-collapse: collapse; font-size: 16px; line-height: 1.45;
    min-width: 40%; }
.md-table th, .md-table td {
    border: 1px solid var(--c-border); padding: 7px 11px; vertical-align: top;
    min-width: 3em; max-width: 26em; white-space: normal; cursor: text;
    /* перенос строк CodeMirror рвёт слова где попало — в ячейке так нельзя */
    overflow-wrap: normal; word-break: normal; }
/* Длинный текст не сжимаем в столбик по слогу: такому столбцу минимум
   ширины, а таблица целиком уезжает в скролл вбок */
.md-table .md-cell-long { min-width: 14em; }
.md-table th { background: var(--c-hover); font-weight: 700; color: var(--c-brand); text-align: left; }
.md-table tbody tr:nth-child(even) td { background: var(--c-zebra); }
.md-table td:hover, .md-table th:hover { background: var(--c-row-hover); }
/* Ячейки нет в исходнике (короткая строка) — видно, но не кричит */
.md-table .md-cell-missing { background: repeating-linear-gradient(135deg, var(--c-surface) 0 6px, var(--c-sunken) 6px 12px); }
.md-table .md-cell-active,
.md-table .md-cell-active:hover { background: var(--c-surface); box-shadow: inset 0 0 0 2px var(--c-focus); }

.md-table .cm-editor { height: auto; background: transparent; }
.md-table .cm-editor.cm-focused { outline: none; }
.md-table .cm-scroller { font: inherit; line-height: inherit; overflow: visible; background: transparent; }
/* Лист основного редактора (.md-visual .cm-content) не должен достаться ячейке */
.md-table .cm-content { padding: 0; margin: 0; width: auto; max-width: none; min-height: 1.45em; caret-color: var(--c-focus) !important;
                        flex-grow: 2; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.md-table .cm-line { padding: 0; max-width: none; }
/* У открытого редактора ячейки перенос свой: lineWrapping ставит .cm-content
   overflow-wrap: anywhere, и сброс на td до него не доходит — слово рвалось
   посреди («Источни|к»), как только ячейка открывалась */
.md-table .cm-content.cm-lineWrapping { overflow-wrap: normal; word-break: normal; }
.md-br { color: var(--c-faint); font-size: .85em; padding: 0 2px; }
.md-img-inline { color: var(--c-muted); }

/* Кнопки строк и колонок — над таблицей, только когда правится ячейка */
.md-table-bar {
    display: none; position: absolute; left: 0; bottom: 100%; z-index: 5;
    gap: 4px; flex-wrap: wrap; padding: 4px; margin-bottom: 4px; max-width: 100%;
    background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 8px;
    box-shadow: 0 4px 14px rgba(var(--c-shadow), .12); font-size: 13px; }
.md-table-active .md-table-bar { display: flex; }
.md-table-bar button {
    border: 0; background: var(--c-hover); color: var(--c-brand); border-radius: 6px;
    padding: 5px 9px; font: inherit; cursor: pointer; white-space: nowrap; }
.md-table-bar button:hover { background: var(--c-pressed); }
.md-table-bar button[data-op^="del"] { color: var(--c-danger); }


/* --- Тулбар ----------------------------------------------------------
   Кнопки крупные: палец на телефоне, человек без синтаксиса. Меню
   (заголовок, «⋯») открываются вниз и закрываются кликом мимо.          */
.toolbar { display: flex; flex-wrap: nowrap; gap: 2px; align-items: center; padding: 6px;
           background: var(--c-surface); border-bottom: 1px solid var(--c-border); position: relative; z-index: 10;
           font: 15px/1.2 var(--font-text); }
.toolbar > button, .toolbar > .tb-menu-wrap { flex-shrink: 0; }
.toolbar > .tb-menu-wrap[hidden] { display: none; }
/* Счётчик слов: справа, ужимается первым — кнопкам место важнее.
   Уже 900 px кнопки занимают весь ряд, и от счётчика оставалось «Слов…» —
   там он скрыт. */
.toolbar > .tb-count { order: 99; margin-left: auto; padding: 0 10px; min-width: 0; flex-shrink: 1;
                       font-size: 13px; color: var(--c-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
                       font-variant-numeric: tabular-nums; }
@media (max-width: 899px) { .toolbar > .tb-count { display: none; } }
.toolbar button { min-width: 38px; height: 38px; padding: 0 9px; border: 0; border-radius: 8px;
                  background: transparent; color: var(--c-brand); font: inherit; cursor: pointer;
                  -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.toolbar button:hover { background: var(--c-hover); }
.toolbar button[aria-pressed="true"] { background: var(--c-pressed); }
.toolbar button:disabled { color: var(--c-disabled); background: transparent; cursor: default; }
.toolbar .tb-bold { font-weight: 800; }
.toolbar .tb-italic { font-style: italic; font-family: Georgia, serif; }
.toolbar .tb-strike { text-decoration: line-through; }
.toolbar .tb-strike.tb-in-menu { text-decoration: none; }
.toolbar .tb-mono { font-family: var(--font-mono); font-size: 13px; }
.toolbar .tb-heading { min-width: 118px; text-align: left; }
.toolbar .tb-heading::after { content: " ▾"; color: var(--c-faint); font-size: .8em; }
.tb-menu-wrap { position: relative; }
.tb-menu { display: none; position: absolute; top: 100%; left: 0; margin-top: 4px; min-width: 190px;
           flex-direction: column; padding: 4px; background: var(--c-surface); border: 1px solid var(--c-border);
           border-radius: 10px; box-shadow: 0 8px 24px rgba(var(--c-shadow), .16); }
.tb-menu.tb-menu-open { display: flex; }
.tb-menu button { text-align: left; width: 100%; white-space: nowrap; font-weight: 400; font-style: normal;
                  font-family: inherit; font-size: inherit; }
.tb-menu-wrap:last-child .tb-menu { left: auto; right: 0; }
.cm-editor .cm-placeholder { color: var(--c-faint) !important; }