/* WebEditor document styles, shared by DocumentViewer and DocumentEditor. */

.we-doc {
    container: we-doc / inline-size;
    --we-text: var(--ddt-text);
    --we-muted: var(--ddt-text-muted);
    --we-border: var(--ddt-border);
    --we-accent: var(--ddt-accent);
    --we-code-bg: var(--ddt-code-bg);
    /* Vertical spacing: after paragraphs and lists, and around quotes, code, tables, images. */
    --we-paragraph-gap: 0.35em;
    --we-block-gap: 0.55em;
    color: var(--we-text);
    font-family: Calibri, Carlito, "Segoe UI", Arial, sans-serif;
    font-size: 11pt;
    line-height: 1.5;
    overflow-wrap: break-word;
}

.we-doc p,
.we-doc h1,
.we-doc h2,
.we-doc h3,
.we-doc h4,
.we-doc h5,
.we-doc h6,
.we-doc .we-li,
.we-doc .we-cell,
.we-doc td,
.we-doc th {
    white-space: pre-wrap;
}

.we-doc p {
    margin: 0 0 var(--we-paragraph-gap);
}

/* The document's title and subtitle: larger than headings, not in the table of contents. */
.we-doc p.we-title {
    margin: 0.4em 0 0.1em;
    font-size: 2.5em;
    font-weight: 700;
    line-height: 1.2;
    /* Long titles wrap into lines of similar length (no single word on the last line). */
    text-wrap: balance;
}

.we-doc p.we-subtitle {
    margin: 0 0 0.9em;
    font-size: 1.3em;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.22em;
    font-weight: 600;
    /* Room between the underlines of wrapped lines. */
    line-height: 1.45;
    text-wrap: balance;
}

/* A legal paragraph ("§ 1. Subject of the contract"): bold, its number from the renderer (data-we-number). */
.we-doc p.we-section {
    margin: 1.2em 0 0.5em;
    font-size: 1.15em;
    font-weight: 700;
}

.we-doc p.we-section[data-we-number]::before {
    margin-right: 0.35em;
}

/* A legal paragraph without text: its number alone, centered ("§ 1"), unless another alignment was chosen (left is
   the automatic one: centered alone, left with a title). */
.we-doc p.we-section.we-section-alone:not(.we-align-center, .we-align-right, .we-align-justify) {
    text-align: center;
}

.we-doc p.we-section.we-section-alone[data-we-number]::before {
    margin-right: 0;
}

/* An amount with its unit ("1 245 000 zł") is not broken between lines. */
.we-doc .we-nowrap {
    white-space: nowrap;
}

/* Spaced letters and capitals (text marks). */
.we-doc .we-spaced {
    letter-spacing: 0.15em;
}

.we-doc .we-caps {
    text-transform: uppercase;
}

.we-doc h1,
.we-doc h2,
.we-doc h3,
.we-doc h4,
.we-doc h5,
.we-doc h6 {
    margin: 0.75em 0 0.25em;
    line-height: 1.25;
    font-weight: 600;
}

.we-doc > :first-child {
    margin-top: 0;
}

/* A new chapter starts below images and charts floated left or right, not beside them. */
.we-doc h1,
.we-doc h2 {
    clear: both;
}

.we-doc h1 { font-size: 2em; }
.we-doc h2 { font-size: 1.6em; }
.we-doc h3 { font-size: 1.3em; }
.we-doc h4 { font-size: 1.12em; }
.we-doc h5 { font-size: 1em; }
.we-doc h6 { font-size: 0.92em; color: var(--we-muted); }

/* Quotes hold blocks (paragraphs, lists, code, images, tables...), with the author below. */
.we-doc blockquote {
    margin: var(--we-block-gap) 0;
    padding: 0.15em 1em;
    border-left: 4px solid var(--we-border);
    color: var(--we-muted);
}

.we-doc .we-quote-body > :first-child {
    margin-top: 0;
}

.we-doc .we-quote-body > :last-child {
    margin-bottom: 0;
}

.we-doc .we-quote-author {
    margin-top: 0.35em;
    font-size: 0.92em;
    font-style: italic;
}

/* Lists: markers are drawn with ::before (not part of the editable text).
   Numbered lists are hierarchical (1. / 1.1. / 1.1.1.); bullets are the same dot at every level. */
.we-doc ul,
.we-doc ol {
    margin: 0 0 var(--we-paragraph-gap);
    padding-left: 1.6em;
    list-style: none;
}

/* Next to a floating image, lists and quotes sit beside it as a whole (flow-root), so the numbers,
   bullets and the quote bar are not drawn over the image. */
.we-doc ul,
.we-doc ol,
.we-doc blockquote {
    display: flow-root;
}

.we-doc li {
    position: relative;
    margin: 0;
}

/* A comment reached from a comments list is highlighted for a moment. */
.we-doc .we-flash {
    animation: we-flash 2s ease-out;
}

@keyframes we-flash {
    0%, 35% { background-color: rgba(var(--ddt-flash-rgb), 0.55); box-shadow: 0 0 0 3px rgba(var(--ddt-flash-rgb), 0.55); }
    100% { box-shadow: 0 0 0 3px transparent; }
}

/* Text reached by moving the selection stays below the sticky toolbar. */
.we-surface [data-we-path] {
    scroll-margin-top: calc(var(--we-toolbar-height, 0px) + 12px);
    scroll-margin-bottom: 12px;
}

/* Viewer with a comments panel next to the document (below it on narrow pages). */
.we-viewer-with-comments {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.we-viewer-with-comments > .we-doc {
    flex: 1;
    min-width: 0;
}

.we-comments-panel {
    position: sticky;
    top: 12px;
    width: 260px;
    max-height: calc(100vh - 24px);
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    border: 1px solid var(--we-border);
    border-radius: var(--ddt-radius-lg);
    /* Set apart from the document like the editor's side panel: its own background, entries as white cards. */
    background: var(--we-panel-bg, var(--ddt-surface-subtle));
    box-shadow: inset 0 1px 2px rgba(var(--ddt-shadow-rgb), 0.06);
    font-size: 13px;
}

.we-side-panel .we-comment-entry,
.we-comments-panel .we-comment-entry {
    background: var(--we-page-bg, var(--ddt-surface));
}

.we-comments-panel h3 {
    margin: 0 0 4px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--we-muted);
}

@media (max-width: 800px) {
    .we-viewer-with-comments {
        flex-direction: column-reverse;
    }

    .we-comments-panel {
        position: static;
        width: auto;
        max-height: none;
    }
}

/* Comments list in the side panel. */
.we-comment-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.we-comment-entry {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--we-border);
    border-radius: var(--ddt-radius);
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.we-comment-entry:hover,
.we-comment-entry.we-active {
    border-color: var(--we-accent);
}

.we-comment-entry-quote {
    color: var(--we-muted);
    font-size: 12px;
}

/* Drag handles of tables, code blocks and callouts (editor only), shown when the pointer is over the block. */
.we-surface .we-movable,
.we-surface .we-callout,
.we-surface .we-quote,
.we-surface .we-code-block {
    position: relative;
}

/* The frame of a table takes over the placement of the table wrapper it holds: below floating images
   (clear inside it would only clear its own floats) and with its margins. */
.we-surface .we-movable {
    display: flow-root;
    clear: both;
    margin: var(--we-block-gap) 0;
}

.we-surface .we-movable > .we-table-wrap {
    margin: 0;
}

.we-surface .we-drag-handle {
    position: absolute;
    top: 4px;
    left: -18px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 22px;
    border-radius: var(--ddt-radius-sm);
    color: var(--we-muted);
    font-size: 14px;
    line-height: 1;
    cursor: grab;
    opacity: 0;
    user-select: none;
    transition: opacity 0.15s;
}

.we-surface .we-movable:hover > .we-drag-handle,
.we-surface .we-callout:hover > .we-drag-handle,
.we-surface .we-quote:hover > .we-drag-handle,
.we-surface .we-code-block:hover > .we-drag-handle {
    opacity: 1;
}

.we-surface .we-drag-handle:hover {
    background: var(--we-border);
}

/* Callouts: info / warning / error boxes with an icon and an optional title. */
.we-doc .we-callout {
    --we-callout-accent: var(--ddt-info);
    --we-callout-bg: var(--ddt-info-bg);
    --we-callout-border: var(--ddt-info-border);
    display: flex;
    gap: 10px;
    margin: var(--we-block-gap) 0;
    padding: 10px 14px;
    border: 1px solid var(--we-callout-border);
    border-left-width: 4px;
    border-radius: var(--ddt-radius);
    background: var(--we-callout-bg);
}

/* Tips ("did you know"). */
.we-doc .we-callout-tip {
    --we-callout-accent: var(--ddt-success);
    --we-callout-bg: var(--ddt-success-bg);
    --we-callout-border: var(--ddt-success-border);
}

.we-doc .we-callout-warning {
    --we-callout-accent: var(--ddt-warning);
    --we-callout-bg: var(--ddt-warning-bg);
    --we-callout-border: var(--ddt-warning-border);
}

.we-doc .we-callout-error {
    --we-callout-accent: var(--ddt-danger);
    --we-callout-bg: var(--ddt-danger-bg);
    --we-callout-border: var(--ddt-danger-border-strong);
}

.we-doc .we-callout-icon {
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    color: var(--we-callout-accent);
    user-select: none;
}

.we-doc .we-callout-content {
    flex: 1;
    min-width: 0;
    display: flow-root;
}

.we-doc .we-callout-title {
    margin-bottom: 2px;
    color: var(--we-callout-accent);
    font-weight: 600;
    user-select: none;
}

.we-doc .we-callout-body > :first-child {
    margin-top: 0;
}

.we-doc .we-callout-body > :last-child {
    margin-bottom: 0;
}

/* Columns: at most --we-columns per row, each at least --we-column-min wide (never wider than the page);
   on narrow pages they wrap, down to one column below another. */
.we-doc .we-columns {
    display: grid;
    gap: 0.4em 1.6em;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, max(var(--we-column-min), calc((100% - (var(--we-columns) - 1) * 1.6em) / var(--we-columns)))), 1fr));
    margin: var(--we-block-gap) 0;
}

.we-doc .we-column {
    min-width: 0;
    display: flow-root;
}

/* Blocks that keep their own box beside a floating image (lists, quotes, boxes, columns, tables, code, the table of
   contents) have a width they never go below: when less is left beside the image, the browser puts them below it
   instead of squeezing them (an image of the full width left none). Columns keep at least one column's width. */
.we-doc :is(ul, ol, blockquote, .we-callout, .we-table-wrap, .we-code-block, .we-toc) {
    min-width: min(100%, var(--we-beside-min, 14em));
}

.we-doc .we-columns {
    min-width: min(100%, var(--we-column-min));
}

.we-doc .we-column > :first-child {
    margin-top: 0;
}

.we-doc .we-column > :last-child {
    margin-bottom: 0;
}

/* In the editor the column edges are visible. */
.we-surface .we-column {
    outline: 1px dashed var(--we-border);
    outline-offset: 4px;
}

/* Empty item or cell text before its blocks (e.g. only an image): a thin line in the editor, where text can
   still be added; the viewer does not render it. */
.we-surface .we-text-empty {
    font-size: 0.5em;
    line-height: 1;
    min-height: 0.6em;
    border-radius: 3px;
}

.we-surface .we-text-empty:hover {
    background: var(--we-border);
}

.we-doc li > .we-li.we-text-empty + :not(ul, ol),
.we-doc td > .we-cell.we-text-empty + *,
.we-doc th > .we-cell.we-text-empty + * {
    margin-top: 0;
}

/* Items with blocks (images, tables, code) contain their floats; the blocks start at the item text. */
.we-doc li.we-li-blocks {
    display: flow-root;
}

/* A sub-list keeps its indentation: it starts below the images of its item instead of moving beside them. */
.we-doc li > ul,
.we-doc li > ol {
    clear: both;
}

.we-doc td > .we-cell + *,
.we-doc th > .we-cell + *,
.we-doc li > .we-li + :not(ul, ol) {
    margin-top: 0.3em;
}

/* Hierarchical numbers (1. / 1.1.) come from the renderer (data-we-number), so lists inside columns,
   cells and items are numbered on their own. */
.we-doc li[data-we-number]::before {
    content: attr(data-we-number);
    position: absolute;
    right: 100%;
    margin-right: 0.4em;
    white-space: nowrap;
}

.we-doc ul > li::before {
    content: "";
    position: absolute;
    left: -1em;
    top: 0.55em;
    width: 0.42em;
    height: 0.42em;
    border-radius: 50%;
    background: currentColor;
}

.we-doc ol ol {
    padding-left: 2.2em;
}

.we-doc li ul,
.we-doc li ol {
    margin-bottom: 0;
}

.we-doc a {
    color: var(--we-accent);
    text-decoration: underline;
}

/* Superscript and subscript do not make their line taller. */
.we-doc sup,
.we-doc sub {
    font-size: 0.75em;
    line-height: 0;
}

.we-doc code {
    font-family: var(--ddt-font-mono);
    font-size: 0.92em;
}

/* Inline code looks like a small code block: the same background, border and font. */
.we-doc :not(pre) > code {
    padding: 0.05em 0.35em;
    border: 1px solid var(--ddt-border);
    border-radius: var(--ddt-radius-sm);
    background: var(--we-code-bg);
    color: var(--ddt-text);
}

.we-doc .we-code-block {
    margin: var(--we-block-gap) 0;
    border: 1px solid var(--ddt-border);
    border-radius: var(--ddt-radius-lg);
    background: var(--we-code-bg);
}

/* The header sticks below the toolbar only in long code blocks: in short ones it would cover the code. */
.we-doc .we-code-long > .we-code-header {
    position: sticky;
    top: var(--we-sticky-top, 0px);
}

.we-doc .we-code-header {
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 6px 4px 12px;
    border-bottom: 1px solid var(--ddt-border);
    border-radius: 8px 8px 0 0;
    background: var(--ddt-surface-muted);
    font-family: var(--ddt-font);
    font-size: 12px;
    white-space: normal;
    user-select: none;
}

.we-doc .we-code-language {
    color: var(--ddt-text-muted);
    font-weight: 600;
}

.we-doc .we-code-copy {
    padding: 2px 10px;
    border: 1px solid var(--ddt-border);
    border-radius: var(--ddt-radius);
    background: var(--ddt-surface);
    color: var(--ddt-text);
    font: inherit;
    cursor: pointer;
}

.we-doc .we-code-copy:hover {
    background: var(--ddt-surface-muted);
}

.we-doc .we-code-copy {
    position: relative;
}

.we-doc .we-code-copy.we-copied {
    border-color: var(--ddt-success-mark);
    color: transparent;
}

.we-doc .we-code-copy.we-copied::after {
    content: attr(data-we-copied);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ddt-success-text);
}

.we-doc .we-code-body {
    display: flex;
    align-items: stretch;
    line-height: 1.5;
}

.we-doc .we-code-gutter {
    flex: none;
    padding: 10px 10px 10px 12px;
    border-right: 1px solid var(--ddt-border-soft);
    color: var(--ddt-text-faint);
    font-family: var(--ddt-font-mono);
    font-size: 0.83em;
    text-align: right;
    white-space: pre;
    user-select: none;
}

.we-doc pre.we-code {
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 10px 14px;
    overflow-x: auto;
    white-space: pre;
    /* A tab is 4 spaces wide, as in the desktop editor (DdtGuiEditor's InlineLayout). */
    tab-size: 4;
    /* The same font as the line number gutter, so the lines match. */
    font-family: var(--ddt-font-mono);
    font-size: 0.83em;
}

.we-doc pre.we-code code {
    font-family: inherit;
    font-size: 1em;
}

/* Read-only code with line numbers: the number is part of each line (looks like the editor's gutter). */
.we-doc pre.we-code-numbered {
    padding-left: 0;
}

.we-doc .we-code-line {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    min-width: 100%;
    padding-left: 4.3em;
    vertical-align: top;
}

.we-doc .we-code-line::before {
    content: attr(data-line);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3.3em;
    padding-right: 0.7em;
    border-right: 1px solid var(--ddt-border-soft);
    box-sizing: border-box;
    color: var(--ddt-text-faint);
    text-align: right;
    user-select: none;
}

/* Read-only code wraps long lines instead of scrolling sideways; a numbered line keeps its number on every row
   (.we-code-line). The editor (pre with data-we-path) keeps one row per line beside its gutter. */
.we-doc pre.we-code:not([data-we-path]) {
    overflow-x: visible;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.we-doc pre.we-code-numbered:not([data-we-path]) .we-code-line {
    width: 100%;
}

/* In a colored table cell the cell color shows through code blocks, and code keeps its own text colors. */
.we-doc .we-code-block {
    color: var(--ddt-text);
}

.we-doc .we-cell-color .we-code-block,
.we-doc .we-cell-color .we-code-header {
    background-color: rgba(var(--ddt-surface-rgb), 0.55);
}

/* Syntax highlighting tokens (see WebEditor.Highlighting). */
.we-tok-keyword { color: var(--ddt-syntax-keyword); }
.we-tok-type { color: var(--ddt-syntax-type); }
.we-tok-string { color: var(--ddt-syntax-string); }
.we-tok-number { color: var(--ddt-syntax-number); }
.we-tok-comment { color: var(--ddt-syntax-comment); font-style: italic; }
.we-tok-function { color: var(--ddt-syntax-function); }
.we-tok-operator { color: var(--ddt-syntax-keyword); }
.we-tok-punctuation { color: var(--ddt-syntax-punctuation); }
.we-tok-variable { color: var(--ddt-syntax-type); }
.we-tok-constant { color: var(--ddt-syntax-number); }
.we-tok-tag { color: var(--ddt-syntax-tag); }
.we-tok-attribute { color: var(--ddt-syntax-number); }
.we-tok-property { color: var(--ddt-syntax-number); }

/* Color sets: classes we-color-{name} are generated from TextColors.Palette by <ColorPaletteStyles />
   (CSS variables, dark theme support). Frames add a rounded frame in the set's border color. */
.we-frame {
    padding: 0 0.3em;
    border: 1px solid var(--ddt-border);
    border-radius: var(--ddt-radius-sm);
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/* The frame of an alias (uncertain, illegible, handwritten): dashed, thicker and in the set's text color (readable on
   its marker, the same hue) - what the text is, not a plain label. More specific than the palette's frame colors. */
.we-doc .we-frame.we-frame-alias,
.we-color-picker .we-frame.we-frame-alias {
    border: 1.5px dashed currentColor;
}

.we-doc [class*="we-color-"] {
    border-radius: 2px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.we-doc .we-comment {
    text-decoration: underline dotted var(--ddt-warning);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
    cursor: help;
}

.we-doc .we-table-wrap {
    margin: var(--we-block-gap) 0;
    overflow-x: auto;
}

/* Tables fit the page: long words and URLs break instead of causing horizontal scrolling. */
.we-doc table {
    border-collapse: collapse;
    min-width: 30%;
    max-width: 100%;
}

.we-doc td,
.we-doc th {
    overflow-wrap: anywhere;
    word-break: normal;
}

.we-doc td,
.we-doc th {
    min-width: 3em;
    padding: 5px 9px;
    border: 1px solid var(--ddt-border);
    vertical-align: top;
    text-align: left;
}

.we-doc th {
    border-color: var(--ddt-table-head-border);
    background: var(--ddt-table-head-bg);
    color: var(--ddt-table-head-text);
    font-weight: 600;
    letter-spacing: var(--ddt-table-head-spacing);
    text-transform: var(--ddt-table-head-case);
}

/* Images: width is a percentage of the page (inline style). Left and right images float and the
   following text wraps around them; centered images stand on their own line. */
.we-doc .we-figure {
    position: relative;
    box-sizing: border-box;
    margin: var(--we-block-gap) 0;
}

.we-doc .we-figure img {
    display: block;
    width: 100%;
    height: auto;
}

.we-doc .we-float-left {
    float: left;
    clear: left;
    margin: 0.2em 1.2em 0.6em 0;
}

.we-doc .we-float-right {
    float: right;
    clear: right;
    margin: 0.2em 0 0.6em 1.2em;
}

.we-doc .we-figure.we-align-center {
    clear: both;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* Tables, code and dividers do not squeeze next to a floating image. */
.we-doc .we-table-wrap,
.we-doc .we-code-block,
.we-doc .we-divider,
.we-doc .we-toc {
    clear: both;
}

.we-doc::after {
    content: "";
    display: block;
    clear: both;
}

/* In a narrow document (small screen, narrow column, chat) floating images take the full width.
   The width of the document decides, not the width of the window. */
@container we-doc (max-width: 560px) {
    .we-doc .we-float-left,
    .we-doc .we-float-right {
        float: none;
        width: 100% !important;
        margin: var(--we-block-gap) 0;
    }
}

.we-doc figcaption {
    margin-top: 0.3em;
    color: var(--we-muted);
    font-size: 0.9em;
}

.we-doc .we-image-blocked {
    display: inline-block;
    padding: 12px 16px;
    border: 1px dashed var(--ddt-danger);
    color: var(--ddt-danger);
}

.we-doc .we-divider {
    padding: 0.5em 0;
}

.we-doc .we-divider hr {
    margin: 0;
    border: none;
    border-top: 1px solid var(--we-border);
}

/* Headings reached from the table of contents stay below the sticky editor toolbar. */
.we-doc h1[id],
.we-doc h2[id],
.we-doc h3[id] {
    scroll-margin-top: calc(var(--we-toolbar-height, 0px) + 16px);
}

/* Heading numbers (document setting headingNumbering) are not part of the text. */
.we-doc [data-we-number]::before {
    content: attr(data-we-number);
    margin-right: 0.45em;
}

/* Table of contents */
.we-doc .we-toc {
    margin: var(--we-block-gap) 0;
    padding: 10px 18px;
    border: 1px solid var(--we-border);
    border-radius: var(--ddt-radius-lg);
    background: var(--ddt-surface-raised);
}

/* The title looks like a level 1 heading (never numbered). */
.we-doc .we-toc-title {
    margin: 0 0 6px;
    font-size: 2em;
    font-weight: 600;
    line-height: 1.25;
}

/* Entries are slightly spaced on every level (it suits a table of contents). */
.we-doc .we-toc-list {
    margin: 0;
    padding: 0;
    letter-spacing: 0.04em;
    list-style: none;
}

/* Whole-row links with a soft highlight. */
.we-doc .we-toc-list > li > :is(a, .we-toc-entry) {
    display: block;
    padding: 1px 8px;
    border-radius: var(--ddt-radius-sm);
    color: var(--we-text);
    text-decoration: none;
}

.we-doc .we-toc-list a:hover {
    background: rgba(var(--ddt-info-rgb), 0.08);
    color: var(--we-accent);
}

/* Hierarchy by type and size: level 1 bold capitals with space above each group, level 2 bold
   and a bit smaller, level 3 regular and smaller still. */
.we-doc .we-toc-level-1 {
    font-size: 1.02em;
    font-weight: 700;
    text-transform: uppercase;
}

.we-doc .we-toc-level-1:not(:first-child) {
    margin-top: 4px;
}

.we-doc .we-toc-level-2 {
    padding-left: 1.2em;
    font-size: 0.95em;
    font-weight: 600;
}

.we-doc .we-toc-level-3 {
    padding-left: 2.7em;
    font-size: 0.88em;
    font-weight: 400;
}

/* Without numbering level 1 has a marker in the text's color and size (--we-toc-marker, a section sign), lower levels get bullets:
   a dot for level 2, a ring for level 3. */
.we-doc .we-toc:not(.we-toc-numbered) .we-toc-level-1 > :is(a, .we-toc-entry)::before {
    content: var(--we-toc-marker, "\00A7");
    display: inline-block;
    width: 0.9em;
    margin-right: 0.3em;
    text-align: center;
}


.we-doc .we-toc:not(.we-toc-numbered) .we-toc-level-2 > :is(a, .we-toc-entry)::before,
.we-doc .we-toc:not(.we-toc-numbered) .we-toc-level-3 > :is(a, .we-toc-entry)::before {
    content: "";
    display: inline-block;
    width: 0.36em;
    height: 0.36em;
    margin-right: 0.6em;
    border: 1px solid currentColor;
    border-radius: 50%;
    background: currentColor;
    vertical-align: 0.15em;
}

.we-doc .we-toc:not(.we-toc-numbered) .we-toc-level-3 > :is(a, .we-toc-entry)::before {
    background: transparent;
}

/* With numbering the level 1 numbers hang to the left of the text, like in books: the title and the level 1 texts
   form one column, the numbers (--we-toc-n1 wide, the widest level 1 number, set by the renderer, plus a gap) stand
   before it. Level 2 numbers start in that column. The hang is in level 1 em (1.02), converted where needed. */
.we-doc .we-toc-numbered {
    --we-toc-hang: calc((var(--we-toc-n1, 2.4) + 0.3) * 1.02em);
    /* The hanging numbers already keep the text off the edge. */
    padding-left: 8px;
}

.we-doc .we-toc-numbered .we-toc-list {
    padding-left: var(--we-toc-hang);
}

/* The title stays at the left edge (the numbers hang to the left of the entries only). */
.we-doc .we-toc-numbered .we-toc-title {
    padding-left: 8px;
}

.we-doc .we-toc-numbered .we-toc-level-1 .we-toc-number {
    margin-left: calc(-1 * (var(--we-toc-n1, 2.4) + 0.3) * 1em);
}

.we-doc .we-toc-numbered .we-toc-level-2,
.we-doc .we-toc-numbered .we-toc-level-3 {
    padding-left: 0;
}

.we-doc .we-toc-numbered .we-toc-level-3 > :is(a, .we-toc-entry) {
    padding-left: calc(8px + 2.38em);
}

/* Level 1 (roman) numbers are right-aligned in a column (the dots line up, I. / IV. / VIII.) just before the text;
   a longer number widens its column instead of touching the text. */
.we-doc .we-toc-number {
    display: inline-block;
    min-width: calc(var(--we-toc-n1, 2.4) * 1em);
    margin-right: 0.3em;
    text-align: right;
}

/* Lower levels start exactly under the text of the level above, so their numbers are left-aligned. */
.we-doc .we-toc-level-2 .we-toc-number { min-width: 1.9em; text-align: left; }
.we-doc .we-toc-level-3 .we-toc-number { min-width: 2.6em; text-align: left; }

.we-doc .we-toc-empty {
    margin: 0;
    color: var(--we-muted);
    font-style: italic;
}

/* Remove button in the top right corner of a table of contents in the editor. */
.we-surface .we-toc-remove {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid var(--ddt-danger);
    border-radius: 5px;
    background: var(--ddt-danger);
    color: var(--ddt-on-accent);
    font: inherit;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
}

.we-surface .we-toc-remove:hover {
    border-color: var(--ddt-danger-strong);
    background: var(--ddt-danger-strong);
    color: var(--ddt-on-accent);
}

.we-surface .we-toc {
    position: relative;
    cursor: default;
}

.we-doc .we-align-center { text-align: center; }
.we-doc .we-align-right { text-align: right; }
.we-doc .we-align-justify { text-align: justify; }

.we-doc .we-empty {
    color: var(--we-muted);
}

/* ---- Editor ---- */

.we-editor {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ddt-border);
    border-radius: 10px;
    background: var(--ddt-surface-muted);
    overflow: clip;
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
}

.we-toolbar {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid var(--ddt-border);
    background: var(--ddt-surface-raised);
}

/* Import panel (Insert → Import): text on the left, live preview on the right, notes and actions below. */
.we-import-panel {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

.we-import-panel > * {
    width: 100%;
    box-sizing: border-box;
}

.we-import-head,
.we-import-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.we-import-head .we-hint {
    margin: 0;
}

.we-import-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
}

.we-import-input {
    min-height: 200px;
    padding: 8px;
    border: 1px solid var(--ddt-border);
    border-radius: var(--ddt-radius);
    font: 13px Consolas, "Cascadia Mono", monospace;
    resize: vertical;
}

.we-import-preview {
    max-height: 320px;
    overflow: auto;
    padding: 8px 12px;
    border: 1px solid var(--ddt-border);
    border-radius: var(--ddt-radius);
    background: var(--ddt-surface);
}

.we-import-notes {
    margin: 0;
    padding-left: 18px;
    color: var(--ddt-warning);
    font-size: 12px;
}

/* ToggleSwitch: a native checkbox (role="switch") drawn as a track with a thumb. */
.we-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ddt-text);
    font-size: 13px;
    cursor: pointer;
    user-select: none;
}

.we-switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.we-switch-track {
    position: relative;
    flex: none;
    width: 30px;
    height: 17px;
    border-radius: 999px;
    background: var(--ddt-border);
    transition: background 0.15s;
}

.we-switch-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--ddt-surface);
    box-shadow: 0 1px 2px rgba(var(--ddt-shadow-rgb), 0.25);
    transition: transform 0.15s;
}

.we-switch input:checked + .we-switch-track {
    background: var(--ddt-accent);
}

.we-switch input:checked + .we-switch-track .we-switch-thumb {
    transform: translateX(13px);
}

.we-switch input:focus-visible + .we-switch-track {
    outline: 2px solid var(--ddt-accent);
    outline-offset: 2px;
}

.we-switch input:disabled + .we-switch-track {
    opacity: 0.5;
}

.we-switch:has(input:disabled) {
    cursor: default;
}

/* A switch with its label in a rounded badge. */
.we-switch-badge {
    padding: 4px 12px 4px 8px;
    border: 1px solid var(--ddt-border);
    border-radius: 999px;
    background: var(--ddt-surface-subtle);
}

.we-switch-badge:hover {
    background: var(--ddt-surface-muted);
}

/* Ribbon toolbar (ToolbarMode.Ribbon): tabs and labeled groups; context rows and panels follow as in compact mode. */
.we-ribbon-tabs {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    padding: 4px 10px 0;
    border-bottom: 1px solid var(--ddt-border-soft);
}

.we-ribbon-tab {
    margin-bottom: -1px;
    padding: 6px 14px;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    background: transparent;
    color: var(--ddt-text-muted);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.we-ribbon-tab:hover {
    background: var(--ddt-surface-muted);
    color: var(--ddt-text);
}

.we-ribbon-tab.we-active {
    border-color: var(--ddt-border-soft);
    background: var(--ddt-surface);
    color: var(--ddt-info);
    font-weight: 600;
}

.we-ribbon-tabs .we-toolbar-end {
    padding-bottom: 4px;
}

/* One row of groups; on a narrow page it scrolls sideways instead of wrapping into a second row (a thin scrollbar). */
.we-ribbon-panel {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
    align-items: stretch;
    row-gap: 6px;
    /* A fixed height with room for the thin scrollbar, so every tab is as high with or without scrolling. */
    box-sizing: border-box;
    height: 101px;
    overflow-y: hidden;
    padding: 6px 4px 2px;
    background: var(--ddt-surface);
}

.we-ribbon-group {
    display: flex;
    flex: none;
    flex-direction: column;
    padding: 0 4px;
    border-right: 1px solid var(--ddt-border-soft);
}

.we-ribbon-group:last-child {
    border-right: none;
}

.we-ribbon-group-body {
    display: flex;
    flex: 1;
    align-items: center;
}

.we-ribbon-group-label {
    padding: 3px 0 1px;
    color: var(--ddt-text-subtle);
    font-size: 11px;
    text-align: center;
    white-space: nowrap;
}

.we-ribbon-rows {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.we-ribbon-row {
    display: flex;
    gap: 2px;
}

.we-ribbon-buttons {
    display: flex;
    gap: 1px;
}

.we-ribbon-styles {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.we-ribbon-styles-row {
    display: flex;
    gap: 4px;
}

/* When the groups do not fit, only the style gallery gets narrower and scrolls (like a word processor gallery);
   the other groups always stay whole. */
.we-ribbon-group.we-ribbon-group-styles {
    flex: 0 1 auto;
    min-width: 200px;
}

.we-ribbon-group-styles .we-ribbon-group-body,
.we-ribbon-group-styles .we-ribbon-styles {
    min-width: 0;
}

.we-ribbon-group-styles .we-ribbon-styles {
    width: 100%;
}

.we-ribbon-group-styles .we-ribbon-styles-row {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: thin;
}

.we-ribbon-style {
    flex: none;
}

/* A group name with an option next to it (Styles + Numbered headings). */
.we-ribbon-group-label-option {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
    padding-top: 1px;
}

.we-ribbon-group-label-option > span {
    grid-column: 2;
}

/* The option sits at the right edge of the group, the group name stays centered. */
.we-ribbon-numbering {
    grid-column: 3;
    justify-self: end;
    gap: 5px;
    color: var(--ddt-text);
    font-size: 11px;
}

.we-ribbon-numbering .we-switch-track {
    width: 24px;
    height: 13px;
}

.we-ribbon-numbering .we-switch-thumb {
    top: 2px;
    left: 2px;
    width: 9px;
    height: 9px;
}

.we-ribbon-numbering input:checked + .we-switch-track .we-switch-thumb {
    transform: translateX(11px);
}

/* The gallery previews are a bit smaller than the side panel ones (the buttons have a fixed height). */
.we-ribbon-style .we-preview-h1 { font-size: 16px; }
.we-ribbon-style .we-preview-title { font-size: 17px; }
.we-ribbon-style .we-preview-subtitle { font-size: 13.5px; }
.we-ribbon-style .we-preview-h2 { font-size: 14.5px; }
.we-ribbon-style .we-preview-h3 { font-size: 13.5px; }
.we-ribbon-style .we-preview-h4 { font-size: 12.5px; }

/* Large button: icon above a short label. */
.we-rbutton {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 40px;
    padding: 6px 2px 4px;
    border: 1px solid transparent;
    border-radius: var(--ddt-radius);
    background: transparent;
    color: var(--ddt-text);
    font: inherit;
    font-size: 11px;
    line-height: 1.2;
    cursor: pointer;
}

.we-rbutton-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 26px;
}

.we-rbutton-icon svg {
    width: 24px;
    height: 24px;
}

/* Labels of several words may take two lines, so the buttons stay narrow. */
.we-rbutton-label {
    max-width: 66px;
    line-height: 1.15;
    text-align: center;
}

/* A button whose label stays on one line (all groups keep the same height). */
.we-rbutton-wide .we-rbutton-label {
    max-width: none;
    white-space: nowrap;
}

/* Letters as icons (B, I, U, S, x², x₂) in large buttons. */
.we-rbutton-glyph {
    font-size: 19px;
    line-height: 1;
}

.we-rbutton-glyph.we-mark-bold { font-weight: 700; }
.we-rbutton-glyph.we-mark-italic { font-style: italic; font-family: Georgia, serif; }
.we-rbutton-glyph.we-mark-script { font-size: 17px; font-weight: 700; }
.we-rbutton-glyph.we-mark-spaced { font-size: 14px; font-weight: 700; letter-spacing: 0.2em; }
.we-rbutton-glyph.we-mark-caps { font-size: 15px; font-weight: 700; }

.we-rbutton:hover:not(:disabled),
.we-ribbon-style:hover:not(:disabled) {
    background: var(--ddt-hover);
}

.we-rbutton.we-active,
.we-ribbon-style.we-active {
    border-color: var(--ddt-accent-border);
    background: var(--ddt-info-bg);
}

.we-rbutton:disabled,
.we-ribbon-style:disabled {
    opacity: 0.45;
    cursor: default;
}

/* A style that cannot be used here is crossed out diagonally. */
.we-ribbon-style:disabled,
.we-style-item:disabled {
    border-color: var(--ddt-border);
    background: linear-gradient(to top right, transparent calc(50% - 1px), var(--ddt-border-strong) calc(50% - 0.5px), var(--ddt-border-strong) calc(50% + 0.5px), transparent calc(50% + 1px)) var(--ddt-surface);
}

.we-rbutton-info .we-rbutton-icon { color: var(--ddt-info); }
.we-rbutton-tip .we-rbutton-icon { color: var(--ddt-success); }
.we-rbutton-warning .we-rbutton-icon { color: var(--ddt-warning); }
.we-rbutton-error .we-rbutton-icon { color: var(--ddt-danger); }

/* The color sets in the Annotations tab: swatches in two rows, the frame switch next to them. */
.we-ribbon-colors .we-color-picker {
    display: flex;
    align-items: center;
    gap: 12px;
}

.we-ribbon-colors .we-swatches {
    max-width: 420px;
}

/* Named color sets in the Colors tab: compact chips in three rows, as many columns as needed. */
.we-ribbon-colors .we-color-chips {
    grid-template-columns: none;
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    grid-auto-columns: minmax(76px, auto);
    gap: 3px 4px;
    margin-bottom: 0;
}

.we-ribbon-colors .we-color-chip {
    padding: 1px 4px;
    font-size: 11px;
    line-height: 1.3;
}

.we-ribbon-colors .we-color-chip span {
    padding: 0 3px;
}

/* Style gallery: each style shown as it looks. */
.we-ribbon-style {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 54px;
    height: 58px;
    padding: 4px 7px;
    /* Dark frame when the style can be chosen, light when not (see :disabled). */
    border: 1px solid var(--ddt-border-contrast);
    border-radius: var(--ddt-radius);
    background: var(--ddt-surface);
    color: var(--ddt-text);
    font: inherit;
    white-space: nowrap;
    cursor: pointer;
}

.we-toolbar-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    padding: 6px 10px;
}

.we-toolbar-row + .we-toolbar-row {
    border-top: 1px solid var(--ddt-border-soft);
}

.we-group {
    display: flex;
    align-items: center;
    gap: 2px;
    padding-right: 10px;
    border-right: 1px solid var(--ddt-border-soft);
}

.we-group:last-child {
    border-right: none;
}

.we-button,
.we-text-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: var(--ddt-radius);
    background: transparent;
    color: var(--ddt-text);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}

.we-button {
    min-width: 32px;
    height: 32px;
    padding: 0 6px;
}

.we-text-button {
    height: 30px;
    padding: 0 10px;
    border-color: var(--ddt-border);
    background: var(--ddt-surface);
    font-size: 13px;
}

/* A link styled as a button (Open in the link context row). */
a.we-text-button {
    box-sizing: border-box;
    text-decoration: none;
}

.we-button:hover:not(:disabled),
.we-text-button:hover:not(:disabled) {
    background: var(--ddt-hover);
}

.we-button.we-active {
    border-color: var(--ddt-accent-border);
    background: var(--ddt-accent-soft);
    color: var(--ddt-accent-strong);
}

.we-button:disabled,
.we-text-button:disabled,
.we-select:disabled {
    opacity: 0.4;
    cursor: default;
}

.we-text-button.we-primary {
    border-color: var(--ddt-accent-strong);
    background: var(--ddt-accent);
    color: var(--ddt-on-accent);
}

.we-text-button.we-primary:hover {
    background: var(--ddt-accent-strong);
}

/* Buttons that delete content: red everywhere (the icon of an icon button turns white). */
.we-button.we-danger,
.we-text-button.we-danger {
    border-color: var(--ddt-danger);
    background: var(--ddt-danger);
    color: var(--ddt-on-accent);
}

.we-rbutton.we-danger {
    border-color: var(--ddt-danger);
    background: var(--ddt-danger);
    color: var(--ddt-on-accent);
}

.we-rbutton.we-danger .we-rbutton-label {
    color: var(--ddt-on-accent);
}

.we-rbutton.we-danger:hover:not(:disabled) {
    border-color: var(--ddt-danger-strong);
    background: var(--ddt-danger-strong);
}

.we-button.we-danger:hover:not(:disabled),
.we-text-button.we-danger:hover:not(:disabled) {
    border-color: var(--ddt-danger-strong);
    background: var(--ddt-danger-strong);
    color: var(--ddt-on-accent);
}

.we-table-button.we-danger .we-icon-remove {
    stroke: currentColor;
}

.we-mark-bold { font-weight: 700; }
.we-mark-italic { font-style: italic; font-family: Georgia, serif; }
.we-mark-underline { text-decoration: underline; }
.we-mark-strike { text-decoration: line-through; }
.we-mark-script { font-size: 13px; }
.we-mark-spaced { font-size: 12px; font-weight: 700; letter-spacing: 0.2em; }
.we-mark-caps { font-size: 12px; font-weight: 700; }
.we-inline-code-icon { font: 600 12px Consolas, "Cascadia Mono", monospace; }
.we-mark-code { font-family: Consolas, monospace; font-size: 12px; }

/* A short list (e.g. the image's max size): as wide as its longest option. */
.we-select.we-select-small {
    min-width: 0;
}

.we-select {
    height: 32px;
    min-width: 140px;
    padding: 0 8px;
    border: 1px solid var(--ddt-border);
    border-radius: var(--ddt-radius);
    background: var(--ddt-surface);
    font: inherit;
    font-size: 13px;
}

/* Table icons: green "+" adds, red "×" removes (gray when the button is disabled, white on a red button). */
.we-icon-add {
    stroke: var(--ddt-success);
}

.we-icon-remove {
    stroke: var(--ddt-danger);
}

button:disabled .we-icon-add,
button:disabled .we-icon-remove,
.we-danger .we-icon-remove {
    stroke: currentColor;
}

/* The table options in the ribbon: groups like the main ribbon on the context row's gray background. */
.we-context-ribbon {
    align-items: stretch;
    gap: 0;
    padding: 4px 6px 2px;
    border-top: 1px solid var(--ddt-border);
}

.we-context-ribbon .we-rbutton-label {
    max-width: none;
    white-space: nowrap;
}

/* Ribbon options rows have the same height, so the page does not move when switching between objects. */
.we-context-ribbon {
    box-sizing: border-box;
    height: 93px;
}

/* On a narrow page the row scrolls sideways (thin scrollbar in reserved space) instead of wrapping, so its height
   stays the same. */
.we-context-ribbon {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}

/* A text button with an icon before its text (side panel actions). */
.we-icon-text-button {
    gap: 6px;
}

.we-icon-text-button svg {
    width: 15px;
    height: 15px;
}

.we-rbutton.we-primary {
    border-color: var(--ddt-accent);
    background: var(--ddt-accent);
    color: var(--ddt-on-accent);
}

.we-rbutton.we-primary:hover:not(:disabled) {
    border-color: var(--ddt-accent-strong);
    background: var(--ddt-accent-strong);
}

.we-ribbon-error {
    align-self: center;
    margin-left: 8px;
    white-space: nowrap;
}

/* A field (text, number, list) as a ribbon group: the group name below is its label. */
.we-ribbon-field {
    gap: 6px;
    padding: 0 6px;
}

.we-ribbon-input {
    width: 200px;
    height: 30px;
    padding: 0 8px;
    border: 1px solid var(--ddt-border);
    border-radius: var(--ddt-radius);
    background: var(--ddt-surface);
    font: inherit;
    font-size: 13px;
}

/* Percentages up to 100 and the spin buttons. */
.we-ribbon-input.we-ribbon-number {
    width: 60px;
}

.we-ribbon-input.we-ribbon-url {
    width: 280px;
}

.we-context-ribbon a.we-rbutton {
    text-decoration: none;
}

/* Callout kinds in their colors. */
.we-callout-kind-info .we-rbutton-icon { color: var(--ddt-info); }
.we-callout-kind-tip .we-rbutton-icon { color: var(--ddt-success); }
.we-callout-kind-warning .we-rbutton-icon { color: var(--ddt-warning); }
.we-callout-kind-error .we-rbutton-icon { color: var(--ddt-danger); }

/* A switch with its label below, like a ribbon button. */
.we-switch.we-switch-stacked {
    flex-direction: column;
    gap: 9px;
    padding: 6px 2px 4px;
    color: var(--ddt-text);
    font-size: 11px;
    line-height: 1.15;
    white-space: nowrap;
}

/* A ribbon group with one control (the header switch, the cell color list), centered above the group name. */
.we-table-option {
    justify-content: center;
    padding: 0 8px;
}

.we-context,
.we-panel {
    background: var(--ddt-surface-subtle);
    font-size: 13px;
}

.we-context-label {
    color: var(--ddt-text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 11px;
}

.we-field {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ddt-text-muted);
}

.we-field input {
    height: 30px;
    padding: 0 8px;
    border: 1px solid var(--ddt-border);
    border-radius: var(--ddt-radius);
    font: inherit;
    font-size: 13px;
}

.we-field.we-grow {
    flex: 1 1 260px;
}

.we-field.we-grow input {
    flex: 1;
    min-width: 160px;
}

.we-field.we-narrow input {
    width: 80px;
}

.we-check {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--ddt-text-muted);
}

.we-error {
    color: var(--ddt-danger);
}

/* Page size and margins can be changed by the host page with these variables. */
.we-editor {
    /* The page fills the editor; the gray area around it is 10px above and 20px (twice that) at the sides. */
    --we-page-max-width: none;
    --we-page-padding: 20px 28px;
    --we-page-area-padding: 10px 20px;
}

.we-page-area {
    flex: 1;
    padding: var(--we-page-area-padding);
}

/* Code headers stick below the editor toolbar (height set by web-editor.js). */
.we-editor .we-doc {
    --we-sticky-top: var(--we-toolbar-height, 0px);
}

.we-page {
    max-width: var(--we-page-max-width);
    margin: 0 auto;
    padding: var(--we-page-padding);
    background: var(--ddt-surface);
    box-shadow: 0 1px 3px rgba(var(--ddt-shadow-rgb), 0.12);
}

.we-surface {
    outline: none;
    caret-color: var(--ddt-caret);
}

.we-surface[data-empty="true"] > p:first-child::before {
    content: attr(data-placeholder);
    position: absolute;
    color: var(--ddt-text-faint);
    pointer-events: none;
}

.we-surface .we-figure,
.we-surface .we-divider {
    cursor: pointer;
    border-radius: var(--ddt-radius-sm);
}

.we-surface .we-figure.we-selected {
    cursor: grab;
}

/* Resize handle of the selected image and the drop marker while moving it. */
.we-resize-handle {
    position: absolute;
    right: -6px;
    bottom: -6px;
    width: 14px;
    height: 14px;
    border: 2px solid var(--ddt-surface);
    border-radius: 3px;
    background: var(--ddt-accent);
    box-shadow: 0 0 0 1px var(--ddt-accent);
    cursor: nwse-resize;
}

.we-float-right .we-resize-handle {
    right: auto;
    left: -6px;
    cursor: nesw-resize;
}

.we-caption-placeholder {
    margin-top: 0.3em;
    color: var(--we-accent);
    font-size: 0.9em;
    font-style: italic;
    cursor: text;
}

.we-caption-placeholder:hover {
    text-decoration: underline;
}

.we-resize-label {
    position: absolute;
    top: 6px;
    left: 6px;
    padding: 1px 6px;
    border-radius: var(--ddt-radius-sm);
    background: rgba(var(--ddt-overlay-rgb), 0.75);
    color: var(--ddt-on-accent);
    font: 600 12px var(--ddt-font);
    pointer-events: none;
}

.we-drop-marker {
    position: absolute;
    z-index: 5;
    height: 3px;
    border-radius: 2px;
    background: var(--ddt-accent);
    pointer-events: none;
}

.we-surface.we-dragging,
.we-surface.we-dragging * {
    cursor: grabbing !important;
}

.we-surface .we-selected {
    outline: 2px solid var(--ddt-accent);
    outline-offset: 2px;
}

/* A selected table of contents is shown by its outline only: the DOM selection spans the whole
   object (so copy/delete work) but its text should not look highlighted. */
.we-surface .we-toc.we-selected::selection,
.we-surface .we-toc.we-selected *::selection {
    background: transparent;
}

.we-surface a {
    cursor: text;
}

.we-toolbar-end {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.we-stats {
    color: var(--ddt-text-muted);
    font-size: 12px;
    white-space: nowrap;
}

.we-color-button {
    padding: 0 2px;
    border-bottom: 3px solid currentColor;
    font-weight: 700;
    line-height: 1.1;
}

.we-swatch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 28px;
    border: 1px solid var(--ddt-border);
    border-radius: var(--ddt-radius);
    background: var(--ddt-surface);
    font: 700 13px var(--ddt-font);
    cursor: pointer;
}

.we-swatch span {
    padding: 1px 3px;
    border-radius: 3px;
}

/* Side panel: color sets as named chips in two columns. */
.we-color-chips {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin-bottom: 6px;
}

.we-color-chip {
    min-width: 0;
    padding: 4px 6px;
    border: 1px solid var(--ddt-border);
    border-radius: var(--ddt-radius);
    background: var(--ddt-surface);
    font: 12px var(--ddt-font);
    text-align: left;
    cursor: pointer;
}

.we-color-chip span {
    display: inline-block;
    max-width: 100%;
    padding: 1px 4px;
    border-radius: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

.we-color-chip:hover:not(:disabled) {
    background: var(--ddt-surface-subtle);
}

.we-color-chip.we-active {
    border-color: var(--ddt-accent);
    box-shadow: 0 0 0 2px var(--ddt-accent-border);
}

.we-color-chip:disabled {
    opacity: 0.4;
    cursor: default;
}

.we-swatch.we-active {
    border-color: var(--ddt-accent);
    box-shadow: 0 0 0 2px var(--ddt-accent-border);
}

.we-swatch:disabled {
    opacity: 0.4;
    cursor: default;
}

/* Editor body: page and side panel */

.we-editor-body {
    display: flex;
    align-items: flex-start;
}

.we-editor-body .we-page-area {
    flex: 1;
    min-width: 0;
}

.we-side-panel {
    position: sticky;
    top: var(--we-toolbar-height, 0px);
    flex: none;
    width: 262px;
    max-height: calc(100vh - var(--we-toolbar-height, 0px));
    overflow-y: auto;
    padding: 10px;
    border-left: 1px solid var(--ddt-border);
    /* The panel ends below its content: closed with a bottom edge and a rounded corner. */
    border-bottom: 1px solid var(--ddt-border);
    border-bottom-left-radius: 8px;
    background: var(--ddt-surface-subtle);
    font-size: 13px;
}

/* Side panel tabs: Styles, Colors, Comments. */
/* Tabs as a segmented control: the active tab is a raised white button in a light gray bar. The panel itself is
   light gray, so the white tiles (styles, color sets, comments) stand out. */
/* The tabs wrap to a second row when they do not fit (e.g. with Changes), instead of squeezing their names. */
.we-side-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin-bottom: 12px;
    padding: 3px;
    border-radius: var(--ddt-radius-lg);
    background: var(--ddt-surface-sunken);
}

.we-side-tab {
    display: flex;
    flex: 1 0 auto;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 5px 6px;
    border: none;
    border-radius: var(--ddt-radius);
    background: transparent;
    color: var(--ddt-text-muted);
    font: inherit;
    font-size: 12.5px;
    white-space: nowrap;
    cursor: pointer;
}

.we-side-tab:hover:not(.we-active) {
    background: rgba(var(--ddt-surface-rgb), 0.5);
    color: var(--ddt-text);
}

.we-side-tab.we-active {
    background: var(--ddt-surface);
    color: var(--ddt-text);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(var(--ddt-shadow-rgb), 0.15), 0 0 0 1px rgba(var(--ddt-shadow-rgb), 0.06);
}

/* The number of comments / changes on a tab: a blue badge, so it is noticed. */
.we-side-tab-count {
    min-width: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--ddt-info);
    color: var(--ddt-on-accent);
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.we-side-section + .we-side-section {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--ddt-border-soft);
}

.we-side-section h3 {
    margin: 0 0 8px;
    color: var(--ddt-text-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.we-side-section h3:not(:first-child) {
    margin-top: 12px;
}

.we-style-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Like the style gallery of the ribbon: framed tiles, dark when the style can be chosen. */
.we-style-item {
    width: 100%;
    min-height: 34px;
    padding: 5px 10px;
    border: 1px solid var(--ddt-border-contrast);
    border-radius: var(--ddt-radius);
    background: var(--ddt-surface);
    color: var(--ddt-text);
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.we-style-item:hover:not(:disabled) {
    background: var(--ddt-hover);
}

.we-style-item.we-active {
    border-color: var(--ddt-accent-border);
    background: var(--ddt-accent-soft);
}

.we-style-item:disabled {
    opacity: 0.45;
    cursor: default;
}

.we-preview-normal { font-size: 13px; }
.we-preview-h1 { font-size: 20px; font-weight: 600; }
.we-preview-h2 { font-size: 17px; font-weight: 600; }
.we-preview-h3 { font-size: 15px; font-weight: 600; }
.we-preview-h4 { font-size: 13px; font-weight: 700; }
.we-preview-quote { padding-left: 8px; border-left: 3px solid var(--ddt-border); color: var(--ddt-text-muted); }
.we-preview-title { font-size: 22px; font-weight: 700; }
.we-preview-section { font-size: 14.5px; font-weight: 700; }
.we-preview-section::before { content: "§ 1. "; }
.we-preview-subtitle { font-size: 15px; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.we-preview-code { padding: 1px 6px; border-radius: var(--ddt-radius-sm); background: var(--ddt-surface-muted); font-family: Consolas, monospace; font-size: 12px; }
.we-preview-bullet::before { content: "\2022  "; }
.we-preview-numbered::before { content: "1.  "; }

.we-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* The selected comment: a larger note so it reads well (long comments keep their line breaks). */
.we-comment-text {
    min-height: 96px;
    margin: 0 0 10px;
    padding: 12px 14px;
    border: 1px solid var(--ddt-highlight-border);
    border-radius: var(--ddt-radius-lg);
    background: var(--ddt-warning-bg);
    color: var(--ddt-warning-text);
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.we-comment-input {
    width: 100%;
    min-height: 96px;
    padding: 10px 12px;
    border: 1px solid var(--ddt-border);
    border-radius: var(--ddt-radius);
    font: inherit;
    font-size: 14px;
    line-height: 1.5;
    resize: vertical;
}

.we-side-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 6px;
}

/* Switches (numbered headings, framed text) centered below their tiles. */
.we-side-panel .we-switch-badge {
    display: flex;
    width: fit-content;
    margin: 12px auto 0;
    background: var(--ddt-surface);
    white-space: nowrap;
}

.we-side-panel .we-check {
    align-items: flex-start;
    line-height: 1.35;
}

.we-hint {
    margin: 4px 0 0;
    color: var(--ddt-text-faint);
    font-size: 12px;
}

/* Hints in the side panel look like an info box (like the info callout). */
.we-hint.we-hint-info {
    padding: 8px 10px;
    border: 1px solid var(--ddt-info-border);
    border-left-width: 4px;
    border-radius: var(--ddt-radius);
    background: var(--ddt-info-bg);
    color: var(--ddt-info-text);
}

@media (max-width: 1100px) {
    .we-editor-body {
        flex-direction: column;
        align-items: stretch;
    }

    .we-side-panel {
        position: static;
        width: auto;
        max-height: none;
        border-left: none;
        border-top: 1px solid var(--ddt-border);
    }
}

@media (max-width: 720px) {
    .we-editor {
        --we-page-padding: 12px 14px;
        --we-page-area-padding: 0;
    }

    .we-group {
        padding-right: 4px;
    }
}

/* "Choose file…" in the image panel: a label with a hidden file input. */
.we-file-button {
    position: relative;
    cursor: pointer;
}

.we-file-button input[type=file] {
    position: absolute;
    inset: 0;
    width: 100%;
    opacity: 0;
    cursor: pointer;
}

/* The gallery under the toolbar: the panels' gray, the image cards stay white. */
.we-image-picker {
    display: block;
    border-top: 1px solid var(--ddt-border);
    max-height: 420px;
    overflow: auto;
}

/* Upload progress and errors below the toolbar. */
.we-notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 12px;
    border-bottom: 1px solid var(--ddt-border);
    background: var(--ddt-info-bg);
    color: var(--ddt-info-text);
    font-size: 13px;
}

.we-notice-error {
    background: var(--ddt-danger-bg);
    color: var(--ddt-danger-strong);
}

.we-notice-close {
    border: none;
    background: transparent;
    color: inherit;
    font-size: 16px;
    cursor: pointer;
}

/* Comments as numbered notes (CommentDisplay.Footnotes): the number after the text, the list at the end. */
.we-doc .we-comment-ref {
    margin-left: 0.1em;
    color: var(--ddt-warning);
    font-size: 0.72em;
    font-weight: 600;
    line-height: 0;
}

.we-doc .we-comment-notes {
    margin-top: 2em;
    padding-top: 0.6em;
    border-top: 1px solid var(--ddt-border);
    font-size: 0.92em;
}

.we-doc .we-comment-notes-title {
    margin-bottom: 0.3em;
    font-weight: 700;
}

.we-doc .we-comment-notes ol {
    margin: 0;
    padding-left: 2em;
    list-style: decimal;
}

.we-doc .we-comment-notes li {
    margin: 0.15em 0;
}

.we-doc .we-comment-notes li::before {
    content: none;
}

.we-doc .we-comment-ref a,
.we-doc .we-comment-notes a {
    color: inherit;
    text-decoration: none;
}

.we-doc .we-comment-notes a:hover {
    text-decoration: underline;
}

.we-doc .we-comment-note-quote {
    color: var(--ddt-text-muted);
    font-style: italic;
}

/* Printing an editor or a viewer: only the document, with its colors, and no page breaks inside tables, images,
   code or boxes. */
@media print {
    .we-toolbar,
    .we-side-panel,
    .we-drag-handle,
    .we-resize-handle,
    .we-toc-remove,
    .we-comments-panel,
    .we-code-copy {
        display: none !important;
    }

    .we-editor,
    .we-page-area,
    .we-page {
        padding: 0 !important;
        border: none !important;
        background: var(--ddt-surface) !important;
        box-shadow: none !important;
    }

    .we-doc {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Short blocks stay whole. Long code (we-code-long, 10+ lines), tables and quotes may continue on the next page,
       otherwise they would leave most of a page empty; their header or first row stays with the content. */
    .we-doc figure,
    .we-doc .we-callout,
    .we-doc .we-toc,
    .we-doc .we-code-block:not(.we-code-long),
    .we-doc tr,
    .we-doc li {
        break-inside: avoid;
    }

    .we-doc .we-code-header {
        position: static !important;
        break-after: avoid;
    }

    .we-doc .we-code-long .we-code-body,
    .we-doc .we-code-long pre {
        break-inside: auto;
    }

    .we-doc thead {
        display: table-header-group;
    }

    .we-doc h1,
    .we-doc h2,
    .we-doc h3,
    .we-doc h4,
    .we-doc .we-toc-title {
        break-after: avoid;
    }

    /* Paper cannot scroll: long code lines wrap (numbered lines keep their number, see .we-code-line). */
    .we-doc pre,
    .we-doc pre code {
        overflow: visible !important;
        white-space: pre-wrap !important;
        overflow-wrap: anywhere;
    }

    .we-doc .we-code-line {
        width: 100%;
    }
}

/* Insert → Symbol: the characters in columns of three, like ribbon buttons. */
.we-symbol-grid {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(3, 22px);
    gap: 1px;
    align-content: center;
}

.we-symbol {
    width: 24px;
    height: 22px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--ddt-radius-sm);
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.we-symbol:hover {
    border-color: var(--ddt-border);
    background: var(--ddt-surface);
}

/* Touch screens. Handles and a selected object take the finger's gesture (no page scrolling) so they can be dragged;
   an image that is not selected scrolls the page. */
.we-surface .we-drag-handle,
.we-resize-handle,
.we-surface .we-selected[data-we-block] {
    touch-action: none;
}

@media (pointer: coarse) {
    /* No hover on touch screens: the drag handles are always visible, and larger. */
    .we-surface .we-drag-handle {
        left: -26px;
        width: 24px;
        height: 32px;
        opacity: 0.6;
    }

    .we-resize-handle {
        right: -12px;
        bottom: -12px;
        width: 24px;
        height: 24px;
    }

    .we-float-right .we-resize-handle {
        left: -12px;
    }

    /* Finger-sized toolbar buttons. */
    .we-button {
        min-width: 40px;
        height: 40px;
    }

    .we-symbol {
        width: 32px;
        height: 28px;
    }

    .we-symbol-grid {
        grid-template-rows: repeat(3, 28px);
    }

    .we-context-ribbon.we-symbols {
        height: auto;
    }

    /* iOS zooms the page in when a field with a font smaller than 16px gets the focus. */
    .we-toolbar input,
    .we-toolbar select,
    .we-toolbar textarea,
    .we-editor input,
    .we-editor select,
    .we-editor textarea {
        font-size: 16px;
    }
}

/* Message mode (forum, chat): a text field with a small toolbar, no page around the text. */
.we-editor.we-message {
    --we-page-padding: 8px 12px;
    --we-page-area-padding: 0;
    background: var(--ddt-surface);
}

.we-message .we-page {
    box-shadow: none;
}

.we-message-toolbar .we-toolbar-end {
    margin-left: auto;
}

.we-send:disabled {
    opacity: 0.5;
    cursor: default;
}

/* Suggestions at the caret (emoji after ":", mentions after "@"). Fixed: not cut off by the editor's edges. */
.we-suggest {
    position: fixed;
    z-index: 30;
    min-width: 180px;
    max-width: 320px;
    padding: 4px;
    border: 1px solid var(--ddt-border);
    border-radius: var(--ddt-radius-lg);
    background: var(--ddt-surface);
    box-shadow: 0 6px 20px rgba(var(--ddt-shadow-rgb), 0.18);
    font-size: 14px;
}

.we-suggest-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border-radius: 5px;
    cursor: pointer;
}

.we-suggest-item.we-active,
.we-suggest-item:hover {
    background: var(--ddt-info-bg);
}

.we-suggest-label {
    min-width: 1.4em;
    font-size: 16px;
}

.we-suggest-hint {
    overflow: hidden;
    color: var(--ddt-text-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The emoji panel: a search field and the emoji in rows. */
.we-emoji-panel {
    align-items: flex-start;
    border-top: 1px solid var(--ddt-border);
}

.we-emoji-search {
    width: 180px;
    height: 30px;
    padding: 0 8px;
    border: 1px solid var(--ddt-border);
    border-radius: var(--ddt-radius);
    font: inherit;
    font-size: 13px;
}

.we-emoji-grid {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    gap: 2px;
    max-height: 120px;
    overflow-y: auto;
}

.we-emoji {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--ddt-radius);
    background: transparent;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.we-emoji:hover {
    border-color: var(--ddt-border);
    background: var(--ddt-surface);
}

.we-suggest-user .we-suggest-label {
    font-size: 14px;
    font-weight: 600;
}

/* A mention of a user (@Name). */
.we-doc .we-mention {
    padding: 0 0.15em;
    border-radius: var(--ddt-radius-sm);
    background: var(--ddt-info-bg);
    color: var(--ddt-syntax-number);
    font-weight: 500;
    white-space: nowrap;
}

/* The × closing a panel: at the right end, sticky when a wide panel scrolls sideways. */
.we-panel {
    position: relative;
}

.we-panel-close {
    position: sticky;
    right: 0;
    flex: none;
    align-self: flex-start;
    width: 26px;
    height: 26px;
    margin-left: auto;
    padding: 0;
    border: 1px solid var(--ddt-border);
    border-radius: var(--ddt-radius);
    background: var(--ddt-surface);
    color: var(--ddt-text);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.we-panel-close:hover {
    border-color: var(--ddt-info-border);
    background: var(--ddt-info-bg);
    color: var(--ddt-info);
}

.we-image-picker > .we-panel-close {
    position: absolute;
    top: 6px;
    right: 8px;
    z-index: 1;
}

/* Message mode with the full toolbar: Send below the text. */
.we-message-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 6px 10px;
    border-top: 1px solid var(--ddt-border-soft);
    background: var(--ddt-surface-subtle);
}

.we-icon-text-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.we-icon-text-button svg {
    width: 16px;
    height: 16px;
}

/* "Simple view" at the top right: shown as on, like the format button that opened the full toolbar. */
.we-simple-view {
    border-color: var(--ddt-accent-border);
    background: var(--ddt-info-bg);
    color: var(--ddt-syntax-number);
}

.we-simple-view:hover {
    border-color: var(--ddt-info-border);
}

/* The compact toolbar's top bar (view buttons at the right), the height of the ribbon's tab row. */
.we-compact-top {
    justify-content: flex-end;
    min-height: 38px;
    padding-bottom: 3px;
}

.we-compact-top .we-toolbar-end {
    margin-left: auto;
}

/* Plugin objects: placed like images; a frame until configured (or when the plugin is not available). */
.we-doc .we-plugin {
    margin-top: 0.4em;
    margin-bottom: 0.6em;
}

.we-doc .we-plugin-frame {
    padding: 14px 16px;
    border: 1px dashed var(--ddt-border-strong);
    border-radius: var(--ddt-radius-lg);
    background: var(--ddt-surface-subtle);
    color: var(--ddt-text-muted);
    font-size: 0.92em;
}

.we-doc .we-plugin-frame strong {
    color: var(--ddt-text);
}

.we-doc .we-plugin-missing {
    border-color: var(--ddt-warning-border);
    background: var(--ddt-warning-bg);
}

.we-surface .we-plugin.we-selected {
    outline: 2px solid var(--ddt-accent);
    outline-offset: 2px;
    border-radius: var(--ddt-radius);
}

/* The plugin's groups, the first part of the object's row: each one line of the plugin's own controls. */
.we-plugin-settings {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px 12px;
    white-space: nowrap;
}

/* A plugin object is one piece in the editor: its text is not selected with the page's text. */
.we-surface .we-plugin {
    user-select: none;
}

.we-plugin-group-label {
    color: var(--ddt-text-muted);
    font-size: 12px;
}

/* Charts: the type buttons, the two-line fields of the chart row and the data grid. */
.we-doc .we-chart svg {
    border-radius: var(--ddt-radius);
}

.we-surface .we-chart {
    user-select: none;
}

.we-surface .we-chart.we-selected {
    outline: 2px solid var(--ddt-accent);
    outline-offset: 2px;
    border-radius: var(--ddt-radius);
}

.we-chart-types {
    display: grid;
    grid-template-columns: repeat(3, 30px);
    gap: 2px;
}

.we-chart-types .we-button {
    min-width: 30px;
    height: 28px;
    padding: 0;
}

.we-chart-fields {
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 4px;
}

.we-chart-fields .we-ribbon-input {
    width: 170px;
    height: 26px;
}

.we-chart-options-body {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    gap: 4px 10px;
    font-size: 12px;
}

.we-chart-option,
.we-chart-check {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.we-chart-decimals {
    width: 44px;
    height: 24px;
    padding: 0 4px;
    border: 1px solid var(--ddt-border);
    border-radius: 5px;
    font: inherit;
}

.we-chart-data {
    position: relative;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    min-width: 0;
    padding-right: 42px;
    border-top: 1px solid var(--ddt-border);
}

/* The × in the top right corner, next to the grid (like the image gallery's). */
.we-chart-data > .we-panel-close {
    position: absolute;
    top: 6px;
    right: 8px;
    z-index: 1;
}

/* Many series or rows scroll inside the grid (both ways), never past the editor's edge. */
.we-chart-grid-wrap {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    max-height: 260px;
    overflow: auto;
    scrollbar-width: auto;
    border: 1px solid var(--ddt-border);
    border-radius: var(--ddt-radius);
    background: var(--ddt-surface);
}

.we-chart-grid {
    border-collapse: collapse;
    font-size: 13px;
}

.we-chart-grid th,
.we-chart-grid td {
    padding: 0;
    border: 1px solid var(--ddt-border-soft);
}

.we-chart-grid thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--ddt-surface-subtle);
}

.we-chart-grid tbody th {
    background: var(--ddt-surface-subtle);
}

.we-chart-grid input {
    width: 110px;
    height: 28px;
    padding: 0 6px;
    border: none;
    background: transparent;
    font: inherit;
}

.we-chart-grid input:focus {
    outline: 2px solid var(--ddt-accent);
    outline-offset: -2px;
    background: var(--ddt-surface);
}

.we-chart-grid .we-chart-value {
    width: 80px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.we-chart-grid thead input,
.we-chart-grid tbody th input {
    font-weight: 600;
}

.we-chart-series-head {
    display: flex;
    align-items: center;
    gap: 2px;
    padding-left: 6px;
}

.we-chart-swatch {
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

.we-chart-remove {
    flex: none;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: var(--ddt-radius-sm);
    background: transparent;
    color: var(--ddt-text-muted);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.we-chart-remove:hover {
    background: var(--ddt-danger-bg);
    color: var(--ddt-danger);
}

.we-chart-add-cell {
    padding: 0 4px !important;
    border: none !important;
    background: transparent !important;
}

.we-chart-add-row {
    padding: 3px 4px !important;
    border: none !important;
}

.we-chart-data-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.we-chart-hint {
    color: var(--ddt-text-muted);
    font-size: 12px;
}

/* "Edit data" stands out: charts are made by their data. */
.we-rbutton.we-chart-data-button,
.we-text-button.we-chart-data-button {
    border-color: var(--ddt-warning-border);
    background: var(--ddt-warning-bg);
}

.we-rbutton.we-chart-data-button:hover,
.we-text-button.we-chart-data-button:hover {
    background: var(--ddt-highlight);
}

.we-rbutton.we-chart-data-button.we-active,
.we-text-button.we-chart-data-button.we-active {
    border-color: var(--ddt-warning-mark);
    background: var(--ddt-highlight);
}

.we-chart-axis {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
}

.we-chart-axis span {
    width: 10px;
    color: var(--ddt-text-muted);
}

.we-chart-axis .we-ribbon-input {
    width: 150px;
    height: 26px;
    font-weight: normal;
}

.we-chart-axes-inline {
    display: flex;
    gap: 10px;
}

/* The row numbers of the chart grid (only to see how many rows there are). */
.we-chart-grid .we-chart-rownum {
    min-width: 28px;
    padding: 0 6px;
    background: var(--ddt-surface-subtle);
    color: var(--ddt-text-faint);
    font-size: 11px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    user-select: none;
}

/* Resizing a chart: the outline of its new height (the proportions). */
.we-resize-outline {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    border: 2px dashed var(--ddt-accent);
    border-radius: var(--ddt-radius-sm);
    pointer-events: none;
}

/* A chart in a thin frame with its numbered caption below ("Chart 1. Sales"), as in publications. */
.we-doc .we-chart-frame {
    padding: 6px;
    border: 1px solid var(--ddt-border);
    border-radius: var(--ddt-radius-sm);
    background: var(--ddt-surface);
}

.we-doc .we-chart figcaption {
    margin-top: 6px;
    color: var(--ddt-text-muted);
    font-size: 0.88em;
    text-align: left;
}

/* The data table below a chart: centered, as wide as its content (at least half the chart), the numbers right. */
.we-doc .we-chart-table {
    min-width: 50%;
    margin: 6px auto 4px;
    font-size: 0.85em;
}

/* The table beside the chart: the drawing takes the rest of the frame (the table on the left comes after it in
   the markup, like the one on the right, and is shown before it). */
.we-doc .we-chart-table-left,
.we-doc .we-chart-table-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.we-doc .we-chart-table-left {
    flex-direction: row-reverse;
}

/* A narrow chart (a column, a small width) has no room beside it: the table goes below the drawing
   (the same width as ChartBlock.NarrowFramePixels). */
.we-doc .we-chart {
    container-type: inline-size;
}

@container (max-width: 520px) {
    .we-doc .we-chart-table-left,
    .we-doc .we-chart-table-right {
        display: block;
    }

    .we-doc .we-chart-table-left > .we-chart-table,
    .we-doc .we-chart-table-right > .we-chart-table {
        margin: 6px auto 4px;
    }
}

/* The drawing keeps at least 60% of the frame (a wide table would shrink it to a stamp). */
.we-doc .we-chart-table-left > svg,
.we-doc .we-chart-table-right > svg {
    flex: 1 1 0;
    min-width: 60%;
}

.we-doc .we-chart-table-left > .we-chart-table,
.we-doc .we-chart-table-right > .we-chart-table {
    flex: none;
    /* As wide as its content, also when the host page styles all tables as width: 100%. */
    width: auto;
    min-width: 0;
    margin: 0;
}

.we-doc .we-chart-table th,
.we-doc .we-chart-table td {
    min-width: 0;
    padding: 3px 8px;
    white-space: normal;
}

/* Row headers (the categories) sit on a light background: they take the text color, not the header row's
   (which is made for the table head background and can be light in themes with a dark table head). */
.we-doc .we-chart-table tbody th {
    background: var(--ddt-surface-subtle);
    color: var(--ddt-text);
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
}

.we-doc .we-chart-table .we-chart-table-number {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.we-doc .we-chart-number {
    color: var(--ddt-text);
    font-weight: 600;
}

.we-chart-caption {
    width: 320px;
}

/* The Stacked switch next to the chart type buttons. */
.we-chart-toggle {
    display: flex;
    align-items: center;
    padding-left: 6px;
    font-size: 12px;
}

/* The low second row of a chart: caption, axis titles and legend in one line. */
.we-chart-texts {
    flex-wrap: nowrap;
    border-top: 1px solid var(--ddt-border-soft);
}

.we-chart-texts-label {
    color: var(--ddt-text-muted);
    font-size: 12px;
    white-space: nowrap;
}

.we-chart-texts .we-chart-caption {
    width: 100%;
}

/* "Chart type" at the left of its group label, the stacking switch at the right. */
.we-ribbon-group-label.we-chart-type-label {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-left: 4px;
    text-align: left;
}

/* A field with its name above it, centered in its group (the precision of the values). */
.we-chart-precision-body {
    justify-content: center;
}

.we-chart-precision {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--ddt-text);
    font-size: 11px;
    line-height: 1.15;
}

/* Separators between the parts of the chart's texts row. */
.we-chart-sep {
    flex: none;
    align-self: stretch;
    width: 1px;
    margin: 2px 4px;
    background: var(--ddt-border);
}

.we-text-button.we-changes-button {
    height: 26px;
    padding: 0 9px;
    font-size: 12px;
}

.we-text-button.we-changes-button.we-active {
    border-color: var(--ddt-info-border);
    background: var(--ddt-info-bg);
    color: var(--ddt-info);
}

/* The changes since the previous version: bars in the page's left margin (a layer of the page, drawn by
   web-editor.js), a mark between blocks where one was removed. */
.we-page {
    position: relative;
    /* Its own layer: what is placed in the page (the change bars) stays under the sticky toolbar. */
    z-index: 0;
    isolation: isolate;
}

.we-change-gutter {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    pointer-events: none;
}

/* One clickable zone per changed place in the margin, holding a thick bar for the content (green: added, yellow:
   changed; a red mark: removed here) and a thinner blue one for the style. */
.we-change-zone {
    position: absolute;
    left: 3px;
    display: flex;
    gap: 2px;
    width: 20px;
    padding: 0 2px;
    border-radius: var(--ddt-radius-sm);
    pointer-events: auto;
    cursor: pointer;
}

.we-change-zone:hover {
    background: rgba(var(--ddt-info-rgb), 0.08);
}

.we-change-bar {
    flex: none;
    border-radius: 2px;
}

.we-change-bar.we-change-content {
    width: 8px;
    background: var(--ddt-warning-border);
}

.we-change-bar.we-change-added { background: var(--ddt-success-mark); }

.we-change-bar.we-change-style {
    width: 5px;
    background: var(--ddt-info-mark);
}

.we-change-zone-removed {
    z-index: 1;
    height: 10px;
    align-items: center;
}

/* The mark of blocks removed next to a changed block, at the bottom of its zone (at the top: above the first block). */
.we-change-bar.we-change-removed-bottom,
.we-change-bar.we-change-removed-top {
    position: absolute;
    left: 2px;
}

.we-change-bar.we-change-removed-bottom { bottom: -5px; }
.we-change-bar.we-change-removed-top { top: -5px; }

.we-change-bar.we-change-removed-mark {
    width: 16px;
    height: 6px;
    background: var(--ddt-danger);
}

.we-change-gutter.we-has-selection .we-change-zone:not(.we-selected) {
    opacity: 0.3;
}

.we-change-zone.we-selected {
    box-shadow: 0 0 0 2px var(--ddt-info);
}

/* The block of the selected place. */
.we-surface > [data-we-change-selected],
.we-compare-doc > [data-we-change-selected] {
    border-radius: 3px;
    background-color: var(--ddt-warning-bg);
    box-shadow: 0 0 0 6px var(--ddt-warning-bg);
}

.we-doc .we-change-flash {
    animation: we-change-flash 1.2s ease-out;
}

@keyframes we-change-flash {
    from { box-shadow: 0 0 0 4px rgba(var(--ddt-focus-rgb), 0.45); }
    to { box-shadow: 0 0 0 4px rgba(var(--ddt-focus-rgb), 0); }
}

/* The list of changes (the side panel's Changes tab). */
/* The panel's head: the tabs and, on Changes, a card with the counts and the navigation; pinned with its own
   background, so the list does not show through while it scrolls. */
.we-side-head {
    position: sticky;
    top: -10px;
    z-index: 2;
    margin: -10px -10px 10px;
    padding: 10px 10px 8px;
    background: var(--ddt-surface-subtle);
    box-shadow: 0 6px 6px -6px rgba(var(--ddt-shadow-rgb), 0.18);
}

.we-side-head .we-side-tabs {
    margin-bottom: 0;
}

.we-changes-head {
    margin-top: 8px;
    padding: 8px 9px;
    border: 1px solid var(--ddt-border);
    border-radius: var(--ddt-radius-lg);
    background: var(--ddt-surface);
}

.we-changes-counts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px 12px;
    font-size: 12px;
}

.we-changes-position {
    margin-top: 8px;
    padding-top: 7px;
    border-top: 1px solid var(--ddt-border-soft);
    text-align: center;
    color: var(--ddt-text-muted);
    font-size: 12px;
    font-weight: 600;
}

.we-changes-nav {
    display: flex;
    gap: 6px;
    margin-top: 5px;
}

/* Previous / Next: buttons with an arrow and a name. */
.we-change-nav-button {
    display: inline-flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 26px;
    padding: 0 8px 0 5px;
    border: 1px solid var(--ddt-border);
    border-radius: var(--ddt-radius);
    background: var(--ddt-surface-subtle);
    color: var(--ddt-text);
    font: 600 12px var(--ddt-font);
    cursor: pointer;
}

.we-change-nav-button:hover {
    border-color: var(--ddt-info-border);
    background: var(--ddt-info-bg);
    color: var(--ddt-info);
}

.we-change-nav-button svg {
    width: 15px;
    height: 15px;
}

/* The counts: a badge with the number in the color of its bars, the name next to it. */
.we-changes-count {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--ddt-text-muted);
    font-weight: 600;
}

.we-change-badge {
    min-width: 18px;
    padding: 1px 6px;
    border-radius: 9px;
    background: var(--ddt-warning-border);
    color: var(--ddt-on-accent);
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

.we-change-added .we-change-badge { background: var(--ddt-success-mark); }
.we-change-removed .we-change-badge { background: var(--ddt-danger); }
.we-change-changed .we-change-badge { background: var(--ddt-warning-mark); }
.we-change-format .we-change-badge { background: var(--ddt-info-mark); }

.we-change-entry {
    display: block;
    width: 100%;
    margin: 0 0 6px;
    padding: 6px 8px 6px 10px;
    border: 1px solid var(--ddt-border);
    border-left: 4px solid var(--ddt-warning-border);
    border-radius: var(--ddt-radius);
    background: var(--ddt-surface);
    color: var(--ddt-text);
    font: 12.5px/1.4 var(--ddt-font);
    text-align: left;
    cursor: pointer;
}

button.we-change-entry:hover {
    border-color: var(--ddt-info-border);
    background: var(--ddt-info-bg-subtle);
}

.we-change-entry.we-change-added { border-left-color: var(--ddt-success-mark); }
/* A removed block: a red box, the text as it was (not struck through, it stays readable). */
.we-change-entry.we-change-removed {
    border-color: var(--ddt-danger-border);
    border-left-color: var(--ddt-danger);
    background: var(--ddt-danger-bg-subtle);
}
.we-change-entry.we-change-format { border-left-color: var(--ddt-info-mark); }

/* The selected place: its entries highlighted, the others dimmed. */
.we-changes-list.we-has-selection .we-change-entry:not(.we-selected) {
    opacity: 0.45;
}

.we-change-entry.we-selected {
    box-shadow: 0 0 0 1px var(--ddt-info-border);
}


.we-change-entry-label {
    display: block;
    margin-bottom: 2px;
    color: var(--ddt-text-muted);
    font-size: 11px;
    font-weight: 600;
}

.we-change-entry-text {
    overflow-wrap: anywhere;
}

.we-change-entry-line {
    display: block;
}

.we-change-entry ins {
    border-radius: 2px;
    background: var(--ddt-success-bg);
    color: var(--ddt-success-text);
    text-decoration: none;
}

.we-change-entry del {
    margin-right: 2px;
    border-radius: 2px;
    background: var(--ddt-danger-bg);
    color: var(--ddt-danger-strong);
}

/* The Review tab's summary: the numbers of changes in two columns. */
.we-ribbon-change-counts {
    display: grid;
    grid-template-columns: auto auto;
    gap: 6px 14px;
    padding: 0 6px;
    font-size: 12px;
}

.we-ribbon-change-counts .we-changes-count.we-none {
    opacity: 0.4;
}

/* The version compared with: a low row under the ribbon while the changes are shown. */
.we-version-row {
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    border-top: 1px solid var(--ddt-border-soft);
}

.we-version-row .we-field {
    flex: 1;
    min-width: 0;
}

.we-version-select {
    flex: 1;
    min-width: 0;
    max-width: none;
}

/* How old the compared version is: green for the newest one, yellow when newer ones came. */
.we-version-age {
    flex: none;
    padding: 2px 9px;
    border: 1px solid;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.we-version-age.we-newest {
    border-color: var(--ddt-success-border);
    background: var(--ddt-success-bg);
    color: var(--ddt-success-text);
}

.we-version-age.we-older {
    border-color: var(--ddt-warning-border);
    background: var(--ddt-warning-bg);
    color: var(--ddt-warning-text);
}

.we-version-note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    padding: 3px 8px;
    border: 1px solid var(--ddt-warning-border);
    border-radius: var(--ddt-radius);
    background: var(--ddt-warning-bg);
    color: var(--ddt-warning-text);
    font-size: 12px;
}

.we-version-note {
    flex-wrap: nowrap;
    align-items: flex-start;
    padding: 6px 9px;
    line-height: 1.4;
}

.we-version-note-icon {
    flex: none;
    color: var(--ddt-warning);
}

.we-version-note-icon svg {
    display: block;
    width: 17px;
    height: 17px;
}

.we-changes-head .we-version-note {
    margin-bottom: 8px;
}

.we-text-button.we-version-step {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 4px;
    height: 28px;
    padding: 0 9px;
    font-size: 12.5px;
}

.we-text-button.we-version-step svg {
    width: 15px;
    height: 15px;
}

/* A confirmation over the editor (restoring a version). */
.we-dialog-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--ddt-overlay-rgb), 0.35);
}

.we-dialog {
    width: min(460px, calc(100vw - 32px));
    padding: 18px 20px 16px;
    border-radius: 10px;
    background: var(--ddt-surface);
    box-shadow: 0 12px 32px rgba(var(--ddt-shadow-rgb), 0.3);
    color: var(--ddt-text);
    font: 14px/1.5 var(--ddt-font);
}

.we-dialog h3 {
    margin: 0 0 8px;
    font-size: 16px;
}

.we-dialog p {
    margin: 0 0 16px;
}

.we-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* "Cut out a part" of an image: the image with a frame over it; outside the frame the image is dimmed. */
.we-cut-dialog {
    width: min(920px, calc(100vw - 32px));
}

.we-cut-dialog .we-cut-hint {
    margin-bottom: 12px;
    color: var(--ddt-text-muted);
}

.we-cut-dialog .we-dialog-actions {
    flex-wrap: wrap;
}

.we-cut-stage {
    position: relative;
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 14px;
    overflow: hidden;
    touch-action: none;
    user-select: none;
    cursor: crosshair;
}

.we-cut-stage img {
    display: block;
    /* small images (an icon, a logo) are shown larger, so the frame can be placed */
    min-width: min(100%, 240px);
    max-width: 100%;
    height: auto;
    max-height: min(60vh, 640px);
    object-fit: contain;
    pointer-events: none;
}

.we-cut-frame {
    position: absolute;
    box-sizing: border-box;
    border: 2px solid var(--ddt-accent);
    box-shadow: 0 0 0 9999px rgba(var(--ddt-overlay-rgb), 0.45);
    cursor: move;
    outline: none;
}

.we-cut-frame:focus-visible {
    border-style: dashed;
}

.we-cut-handle {
    position: absolute;
    width: 14px;
    height: 14px;
    border: 2px solid var(--ddt-accent);
    border-radius: 3px;
    background: var(--ddt-surface);
}

/* inside the corners: the stage clips everything outside the image */
.we-cut-handle[data-we-cut-handle="nw"] { left: -2px; top: -2px; cursor: nwse-resize; }
.we-cut-handle[data-we-cut-handle="ne"] { right: -2px; top: -2px; cursor: nesw-resize; }
.we-cut-handle[data-we-cut-handle="sw"] { left: -2px; bottom: -2px; cursor: nesw-resize; }
.we-cut-handle[data-we-cut-handle="se"] { right: -2px; bottom: -2px; cursor: nwse-resize; }

.we-cut-error {
    color: var(--ddt-danger);
}

.we-text-button.we-danger-button {
    border-color: var(--ddt-danger);
    background: var(--ddt-danger);
    color: var(--ddt-on-accent);
}

.we-text-button.we-danger-button:hover {
    border-color: var(--ddt-danger-strong);
    background: var(--ddt-danger-strong);
}

/* The change of the look in an entry: "align: Left Right" with the old value struck through. */
.we-change-entry-format {
    display: block;
    margin-top: 4px;
    padding: 3px 6px;
    border-radius: var(--ddt-radius-sm);
    background: var(--ddt-info-bg);
    color: var(--ddt-info-text);
    font-size: 12px;
}

.we-change-entry-text:empty + .we-change-entry-format {
    margin-top: 0;
}

.we-version-select option.we-current-version {
    color: var(--ddt-text-faint);
}

.we-change-entry.we-change-settings {
    cursor: default;
}

/* Who made a change and when: at the bottom of the entry, below a thin line. */
.we-change-entry-origin {
    display: block;
    margin-top: 6px;
    padding-top: 4px;
    border-top: 1px solid var(--ddt-border-soft);
    color: var(--ddt-text-muted);
    font-size: 11px;
    font-weight: 600;
    text-align: right;
}

a.we-text-button.we-version-preview {
    display: inline-flex;
    flex: none;
    align-items: center;
    height: 28px;
    padding: 0 10px;
    color: inherit;
    font-size: 12.5px;
    text-decoration: none;
}

/* Two documents compared, read only (DocumentCompareView): the editor's page and side panel, without a toolbar. */
.we-compare .we-compare-title {
    margin-bottom: 6px;
    font-weight: 600;
}

.we-compare .we-side-panel {
    top: 0;
    max-height: 100vh;
}

/* A document with its changes in the text (DocumentChangesInline, the PDF with changes): a yellow frame at the top,
   the boxes of the list of changes under each changed place. */
.we-changes-inline {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.we-changes-inline-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 18px;
    padding: 10px 14px;
    border: 1px solid var(--ddt-warning-border);
    border-radius: var(--ddt-radius);
    background: var(--ddt-warning-bg);
    color: var(--ddt-warning-text);
    font: 13px/1.45 var(--ddt-font);
    break-inside: avoid;
}

.we-changes-inline-icon {
    flex: none;
    color: var(--ddt-warning);
}

.we-changes-inline-icon svg {
    display: block;
    width: 22px;
    height: 22px;
}

.we-changes-inline-about {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.we-changes-inline-about strong {
    font-size: 14px;
}

.we-changes-inline-about .we-changes-counts {
    justify-content: flex-start;
    margin-top: 4px;
}

.we-changes-inline-about .we-change-entry {
    margin: 6px 0 0;
}

.we-changes-inline-place {
    margin: 4px 0 12px;
    break-inside: avoid;
}

.we-changes-inline .we-change-entry {
    cursor: default;
    break-inside: avoid;
}

/* An added block in the text: the box only says so (the text is right above it). */
.we-changes-inline .we-change-entry-text:empty {
    display: none;
}

.we-changes-inline .we-change-entry-text:empty ~ .we-change-entry-origin {
    margin-top: 0;
}

/* Undo the selected place: a button under its entries; asked first, in a red frame. */
.we-change-revert {
    display: flex;
    justify-content: flex-end;
    margin: -2px 0 8px;
}

.we-change-revert.we-confirm {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 6px 8px;
    border: 1px solid var(--ddt-danger-border);
    border-radius: var(--ddt-radius);
    background: var(--ddt-danger-bg-subtle);
    color: var(--ddt-danger-strong);
    font-size: 12px;
    line-height: 1.4;
}

.we-change-revert-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
}

.we-change-revert .we-text-button {
    height: 26px;
    padding: 0 10px;
    font-size: 12px;
}


/* Charts: the SVG carries its light colors as attributes (so exported charts keep them); on the page the theme's
   chart colors replace them. The series colors stay (they are the data's). */
.wc-chart > rect:first-of-type[fill="#ffffff"] { fill: var(--ddt-chart-bg); }
.wc-chart text[fill="#1f2328"] { fill: var(--ddt-chart-text); }
.wc-chart text[fill="#57606a"] { fill: var(--ddt-chart-muted); }
.wc-chart [stroke="#e5e7eb"] { stroke: var(--ddt-chart-grid); }
.wc-chart [stroke="#b8c0c9"] { stroke: var(--ddt-chart-frame); }
.wc-chart line[stroke="#57606a"] { stroke: var(--ddt-chart-muted); }
.wc-chart [stroke="#ffffff"] { stroke: var(--ddt-chart-bg); }
.wc-chart rect[rx="3"][fill="#ffffff"] { fill: var(--ddt-chart-bg); }