/* Editor blocks: simple tables, columns, synced blocks, equations, code colours (assets/js/ext/editor_blocks.js) */

/* ---- simple tables ---- */
.stbl-wrap { position: relative; flex: 1; min-width: 0; padding: 4px 0 20px; }
.stbl-scroll { display: flex; align-items: stretch; overflow-x: auto; padding: 0 2px 2px 0; }
table.stbl { border-collapse: collapse; table-layout: fixed; flex: none; font-size: 15px; }
table.stbl td, table.stbl th { position: relative; border: 1px solid var(--border); padding: 0; vertical-align: top; text-align: left; font-weight: inherit; }
table.stbl.head-row tr:first-child > *, table.stbl.head-col tr > :first-child { background: var(--bg-hover); font-weight: 600; }
.tcell { min-height: 1.5em; padding: 6px 9px; outline: none; white-space: pre-wrap; word-break: break-word; line-height: 1.5; caret-color: var(--fg); }
.tcell code { font-family: var(--mono); font-size: 85%; background: var(--inline-code); color: #eb5757; border-radius: 4px; padding: .2em .4em; }
.tcell a { color: inherit; text-decoration: underline; text-decoration-color: var(--fg-faint); }
table.stbl td.active, table.stbl th.active { box-shadow: inset 0 0 0 2px var(--accent); }
.tcell-btn { position: absolute; top: 4px; right: 4px; display: none; border: 0; border-radius: 4px; padding: 0 5px; font-size: 12px; line-height: 18px;
  background: var(--bg-elev); box-shadow: var(--shadow); color: var(--fg-muted); cursor: pointer; z-index: 2; }
.active > .tcell-btn { display: block; }
.tcol-grip { position: absolute; top: -1px; right: -4px; width: 7px; height: calc(100% + 2px); cursor: col-resize; z-index: 3; }
.tcol-grip:hover { background: var(--accent); opacity: .45; }
.stbl-add { border: 0; border-radius: 4px; background: var(--bg-hover); color: var(--fg-muted); cursor: pointer; opacity: 0; transition: opacity .12s; font-size: 14px; line-height: 1; }
.stbl-wrap:hover .stbl-add, .stbl-wrap:focus-within .stbl-add { opacity: 1; }
.stbl-add:hover { background: var(--bg-active); color: var(--fg); }
.stbl-add-col { flex: none; width: 18px; margin-left: 4px; }
.stbl-add-row { position: absolute; left: 0; bottom: 0; height: 16px; max-width: 100%; }
.share-mode .stbl-add, .export .stbl-add, .export .tcol-grip { display: none; }

/* ---- columns ---- */
.cols-row { display: flex; gap: 0; flex: 1; min-width: 0; }
.cols-row > .block.b-column { flex: 1 1 0; min-width: 0; padding: 0 23px; margin-left: 0; }
.cols-row > .block.b-column:first-child { padding-left: 0; }
.cols-row > .block.b-column:last-child { padding-right: 0; }
.cols-row > .block.b-column > .gutter { display: none; }
.cols-row > .block.b-column > .body { flex: 1; min-width: 0; }
.col-inner { position: relative; flex: 1; min-width: 0; min-height: 1.5em; }
.col-grip { position: absolute; top: 0; bottom: 0; left: -26px; width: 6px; border-radius: 3px; cursor: col-resize; z-index: 2; }
.col-grip:hover, .col-resizing .col-grip:hover { background: var(--border); }
.cols-row > .block.b-column:first-child .col-grip { display: none; }
.col-resizing, .col-resizing * { cursor: col-resize !important; user-select: none; }
.b-columns.selected, .b-column.selected { background: none; }
.b-columns.selected > .body > .cols-row { background: var(--select); border-radius: 4px; }
.col-inner > .block > .gutter { left: -46px; }
@media (max-width: 700px) {
  .cols-row { flex-direction: column; }
  .cols-row > .block.b-column { padding: 0; }
  .col-grip { display: none; }
}
@media print { .col-grip { display: none; } }

/* ---- synced blocks ---- */
.synced-block { flex: 1; min-width: 0; position: relative; border: 2px solid transparent; border-radius: 6px; margin: 2px -6px; padding: 2px 4px; transition: border-color .12s; }
.synced-block:hover, .synced-block:focus-within { border-color: rgba(235, 87, 87, .55); }
.synced-head { position: absolute; top: -13px; left: 6px; display: none; align-items: center; gap: 2px; padding: 0 4px; z-index: 4;
  background: var(--bg); border-radius: 4px; font-size: 12px; color: var(--c-red); white-space: nowrap; }
.synced-block:hover > .synced-head, .synced-block:focus-within > .synced-head { display: flex; }
.synced-label { padding: 0 4px; font-weight: 500; }
.synced-head .mini { font-size: 12px; padding: 1px 5px; }
.synced-body > .editor { padding-bottom: 0; }
.synced-body .editor-tail { min-height: 6px; }
.synced-note { padding: 6px 2px; font-size: 14px; }
.share-mode .synced-block, .export .synced-block { border-color: transparent !important; }
.share-mode .synced-head, .export .synced-head { display: none !important; }

/* ---- equations ---- */
.eq-block { flex: 1; min-width: 0; padding: 10px 4px; border-radius: 4px; text-align: center; overflow-x: auto; outline: none; }
.eq-block.editable { cursor: pointer; }
.eq-block.editable:hover, .eq-block.editable:focus { background: var(--bg-hover); }
.eq-block.empty { text-align: left; background: var(--bg-hover); padding: 12px 14px; font-size: 14px; }
.eq-render .katex-display { margin: 0; }
span.eq { padding: 0 1px; border-radius: 3px; cursor: pointer; white-space: nowrap; }
span.eq:hover { background: var(--bg-hover); }
.eq-pop { display: flex; flex-direction: column; gap: 8px; padding: 10px; }
.eq-input { font-family: var(--mono); font-size: 13px; width: 100%; resize: vertical; }
.eq-preview { min-height: 24px; max-height: 200px; overflow: auto; padding: 4px 2px; color: var(--fg); }
.eq-preview.block { text-align: center; }
.eq-pop .row-end { display: flex; justify-content: flex-end; align-items: center; gap: 6px; }
.eq-hint { margin-right: auto; font-size: 12px; }

/* ---- code colours (Prism tokens) ---- */
.content.code .token.comment, .content.code .token.prolog, .content.code .token.doctype, .content.code .token.cdata { color: #708090; font-style: italic; }
.content.code .token.punctuation { color: #8a8f98; }
.content.code .token.property, .content.code .token.tag, .content.code .token.boolean, .content.code .token.number,
.content.code .token.constant, .content.code .token.symbol, .content.code .token.deleted { color: #c4553a; }
.content.code .token.selector, .content.code .token.attr-name, .content.code .token.string, .content.code .token.char,
.content.code .token.builtin, .content.code .token.inserted { color: #4a8a2c; }
.content.code .token.operator, .content.code .token.entity, .content.code .token.url { color: #9a6e3a; }
.content.code .token.atrule, .content.code .token.attr-value, .content.code .token.keyword { color: #0b75b5; }
.content.code .token.function, .content.code .token.class-name { color: #b23a6b; }
.content.code .token.regex, .content.code .token.important, .content.code .token.variable { color: #d18a00; }
.content.code .token.important, .content.code .token.bold { font-weight: 600; }
.content.code .token.italic { font-style: italic; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .content.code .token.comment { color: #7f8a99; }
  :root:not([data-theme="light"]) .content.code .token.property, :root:not([data-theme="light"]) .content.code .token.tag,
  :root:not([data-theme="light"]) .content.code .token.boolean, :root:not([data-theme="light"]) .content.code .token.number,
  :root:not([data-theme="light"]) .content.code .token.constant, :root:not([data-theme="light"]) .content.code .token.deleted { color: #f08d71; }
  :root:not([data-theme="light"]) .content.code .token.selector, :root:not([data-theme="light"]) .content.code .token.attr-name,
  :root:not([data-theme="light"]) .content.code .token.string, :root:not([data-theme="light"]) .content.code .token.builtin,
  :root:not([data-theme="light"]) .content.code .token.inserted { color: #9ccc65; }
  :root:not([data-theme="light"]) .content.code .token.atrule, :root:not([data-theme="light"]) .content.code .token.attr-value,
  :root:not([data-theme="light"]) .content.code .token.keyword { color: #6cb6ff; }
  :root:not([data-theme="light"]) .content.code .token.function, :root:not([data-theme="light"]) .content.code .token.class-name { color: #f47fb0; }
}
:root[data-theme="dark"] .content.code .token.comment { color: #7f8a99; }
:root[data-theme="dark"] .content.code .token.property, :root[data-theme="dark"] .content.code .token.tag, :root[data-theme="dark"] .content.code .token.boolean,
:root[data-theme="dark"] .content.code .token.number, :root[data-theme="dark"] .content.code .token.constant, :root[data-theme="dark"] .content.code .token.deleted { color: #f08d71; }
:root[data-theme="dark"] .content.code .token.selector, :root[data-theme="dark"] .content.code .token.attr-name, :root[data-theme="dark"] .content.code .token.string,
:root[data-theme="dark"] .content.code .token.builtin, :root[data-theme="dark"] .content.code .token.inserted { color: #9ccc65; }
:root[data-theme="dark"] .content.code .token.atrule, :root[data-theme="dark"] .content.code .token.attr-value, :root[data-theme="dark"] .content.code .token.keyword { color: #6cb6ff; }
:root[data-theme="dark"] .content.code .token.function, :root[data-theme="dark"] .content.code .token.class-name { color: #f47fb0; }