:root {
    --focusmodeopacity: 0.2;
}

body {
    --img-notfound-filter: none;
    --background-color: rgb(250, 250, 250);
    --menu-background-color: rgb(229, 229, 229);
    --no-focus-color: rgb(218, 218, 218);
    --menu-hover: rgba(50, 50, 50, 0.1);
    --main-button: rgb(42, 186, 255);
    --secondary-button: rgba(42, 186, 255, 0.18);
    --counter-div: rgb(241, 241, 241);
    --scroll-bar: rgb(190, 190, 190);
    --scroll-bar-hover: rgb(80, 80, 80);
    --selector-background: rgb(222, 224, 226);
    --default-text-color: rgb(60, 60, 60);
    --tooltip: white;
    --tooltip-fg: rgb(40, 40, 40);
    --tooltip-icon-filter: invert(1);
    --tooltip-hover: rgba(0, 0, 0, 0.08);
    --tooltip-shadow: rgb(0 0 0 / 15%) 0px 0px 10px;
    --toolbar-active-bg: rgba(42, 186, 255, 0.4);
    --shortcuts-bg: rgba(245, 245, 245, 0.85);
    --shortcuts-fg: rgba(30, 30, 30, 0.75);
    --close-tab: url(end_black.png);
    --input-uk: rgb(245, 245, 245);
    --modal: white;
    --shadow: rgb(0 0 0 / 25%) 0px 8px 20px;
    --comments: rgb(50, 50, 50);
    --selection-color-input: rgba(168, 209, 255, 0.3);
    --selection-color-main: rgba(168, 209, 255, 0.5);
    --focus-ring-color: rgba(42, 186, 255, 0.75);
}

body.darkmode {
    --img-notfound-filter: invert(1);
    --background-color: rgb(36, 36, 36);
    --menu-background-color: rgb(29, 29, 29);
    --no-focus-color: rgb(23, 23, 23);
    --menu-hover: rgba(50, 50, 50, 0.5);
    --main-button: rgb(42, 186, 255);
    --secondary-button: rgb(113 113 113 / 29%);
    --counter-div: rgb(29, 29, 29);
    --scroll-bar: rgb(100, 100, 100);
    --scroll-bar-hover: rgb(180, 180, 180);
    --selector-background: rgb(36, 36, 36);
    --default-text-color: rgb(230, 230, 230);
    --tooltip: rgb(0, 0, 0);
    --tooltip-fg: white;
    --tooltip-icon-filter: none;
    --tooltip-hover: rgb(40, 40, 40);
    --tooltip-shadow: var(--shadow);
    --toolbar-active-bg: rgb(42, 186, 255);
    --shortcuts-bg: rgba(15, 15, 15, 0.7);
    --shortcuts-fg: rgba(255, 255, 255, 0.64);
    --close-tab: url(end.png);
    --input-uk: rgb(47, 47, 47);
    --modal: black;
    --shadow: rgb(0 0 0 / 50%) 0px 0px 10px;
    --comments: rgb(0, 0, 0);
    --selection-color-input: #416792cc;
    --selection-color-main: #416792cc;
}

body.bluemode {
    --img-notfound-filter: invert(1);
    --background-color: rgb(36, 41, 49);
    --menu-background-color: rgb(26, 31, 36);
    --no-focus-color: rgb(20, 23, 26);
    --menu-hover: rgba(46, 51, 56, 0.9);
    --main-button: rgb(42, 186, 255);
    --secondary-button: rgb(45 58 72 / 56%);
    --counter-div: rgb(26, 31, 36);
    --scroll-bar: rgb(90, 100, 110);
    --scroll-bar-hover: rgb(175, 180, 185);
    --selector-background: rgb(36, 41, 46);
    --default-text-color: rgb(230, 230, 230);
    --tooltip: rgb(0, 0, 0);
    --tooltip-fg: white;
    --tooltip-icon-filter: none;
    --tooltip-hover: rgb(40, 40, 40);
    --tooltip-shadow: var(--shadow);
    --toolbar-active-bg: rgb(42, 186, 255);
    --shortcuts-bg: rgba(15, 15, 15, 0.7);
    --shortcuts-fg: rgba(255, 255, 255, 0.64);
    --close-tab: url(end.png);
    --input-uk: rgb(45, 47, 54);
    --modal: rgb(0, 5, 10);
    --shadow: rgb(0 0 0 / 50%) 0px 0px 10px;
    --comments: rgb(0, 0, 0);
    --selection-color-input: #416792cc;
    --selection-color-main: #416792cc;
}

body.blackmode {
    --img-notfound-filter: invert(1);
    --background-color: black;
    --menu-background-color: rgb(35, 35, 35);
    --no-focus-color: rgb(23, 23, 23);
    --menu-hover: rgba(50, 50, 50, 0.5);
    --main-button: rgb(42, 186, 255);
    --secondary-button: rgb(113 113 113 / 29%);
    --counter-div: rgb(35, 35, 35);
    --scroll-bar: rgb(100, 100, 100);
    --scroll-bar-hover: rgb(180, 180, 180);
    --selector-background: rgb(12, 12, 12);
    --default-text-color: rgb(230, 230, 230);
    --tooltip: rgb(30, 30, 30);
    --tooltip-fg: white;
    --tooltip-icon-filter: none;
    --tooltip-hover: rgb(40, 40, 40);
    --tooltip-shadow: var(--shadow);
    --toolbar-active-bg: rgb(42, 186, 255);
    --shortcuts-bg: rgba(15, 15, 15, 0.7);
    --shortcuts-fg: rgba(255, 255, 255, 0.64);
    --close-tab: url(end.png);
    --input-uk: rgb(47, 47, 47);
    --modal: rgb(30, 30, 30);
    --shadow: rgb(0 0 0 / 22%) 0px 9px 20px;
    --comments: rgb(30, 30, 30);
    --selection-color-input: #416792cc;
    --selection-color-main: #416792cc;
}

body.dunemode {
    --background-color: rgb(252, 246, 228);
    --menu-background-color: rgb(224 216 193);
    --no-focus-color: rgb(212 204 180);
    --menu-hover: rgba(54, 50, 46, 0.1);
    --main-button: rgb(43 113 146);
    --secondary-button: rgb(185 158 81 / 18%);
    --counter-div: rgb(239 234 216);
    --scroll-bar: rgb(206 194 174);
    --scroll-bar-hover: rgb(165 148 121);
    --selector-background: #d4c8ae;
    --default-text-color: rgb(53 48 37);
    --tooltip: white;
    --tooltip-fg: rgb(53 48 37);
    --tooltip-icon-filter: invert(1);
    --tooltip-hover: rgba(0, 0, 0, 0.06);
    --tooltip-shadow: rgb(0 0 0 / 15%) 0px 0px 10px;
    --toolbar-active-bg: rgba(42, 186, 255, 0.4);
    --shortcuts-bg: rgba(250, 244, 226, 0.9);
    --shortcuts-fg: rgba(53, 48, 37, 0.75);
    --close-tab: url(end_black.png);
    --input-uk: rgb(255 254 250);
    --modal: #fdf9ed;
    --shadow: rgb(0 0 0 / 12%) 0px 9px 20px;
    --comments: rgb(53 50 42);
    --selection-color-input: rgba(132, 122, 96, 0.3);
    --selection-color-main: rgba(132, 122, 96, 0.3);
}

body.oldschool {
    --img-notfound-filter: invert(1);
    --background-color: rgb(0, 0, 170);
    --menu-background-color: rgb(0 0 0);
    --no-focus-color: rgb(20, 23, 26);
    --menu-hover: rgb(169 165 204 / 10%);
    --main-button: rgb(42, 186, 255);
    --secondary-button: rgb(113 113 113 / 29%);
    --counter-div: rgb(28, 28, 175);
    --scroll-bar: rgb(167 183 199);
    --scroll-bar-hover: rgb(194 199 204);
    --selector-background: rgb(31 31 31);
    --default-text-color: rgb(230, 230, 230);
    --tooltip: rgb(0, 0, 0);
    --tooltip-fg: white;
    --tooltip-icon-filter: none;
    --tooltip-hover: rgb(40, 40, 40);
    --tooltip-shadow: var(--shadow);
    --toolbar-active-bg: rgb(42, 186, 255);
    --shortcuts-bg: rgba(15, 15, 15, 0.7);
    --shortcuts-fg: rgba(255, 255, 255, 0.64);
    --close-tab: url(end.png);
    --input-uk: rgb(47, 47, 47);
    --modal: rgb(0 0 0);
    --shadow: rgb(0 0 0 / 50%) 0px 0px 10px;
    --comments: rgb(0, 0, 0);
    --selection-color-input: rgba(175, 168, 175, 0.85);
    --selection-color-main: rgba(175, 168, 175, 0.85);
}

::-webkit-scrollbar {
    width: 14px;
}

::-webkit-scrollbar-button {
    width: 1px;
    height: 1px;
}

.wrapper::-webkit-scrollbar-track {
    background: transparent;
    margin-top: 36px;
}

::-webkit-scrollbar-thumb {
    background-color: var(--scroll-bar);
    border-width: 0px;
    border-left-width: 5px;
    border-right-width: 5px;
    border-color: var(--background-color);
    border-style: solid;
    transition: border-color 0.2s ease-out, background-color 0.2s ease-out;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--scroll-bar-hover);
    border-width: 0px;
    border-left-width: 4px;
    border-right-width: 4px;
    transition: border-color 0.2s ease-out, background-color 0.2s ease-out;
}

/* #options is a <nav>, not a .side_window, so it needs naming explicitly or it
   falls back to the generic thumb and looks different from the panels it sits
   next to — visible since the menu became scrollable on short viewports. */
.center_dialogwin pre::-webkit-scrollbar-thumb,
#options::-webkit-scrollbar-thumb,
.cw-tabs-menu::-webkit-scrollbar-thumb,
.side_window::-webkit-scrollbar-thumb {
    background-color: var(--scroll-bar);
    border-width: 6px;
    border-color: var(--menu-background-color);
    border-style: solid;
    transition: border-color 0.2s ease-out, background-color 0.2s ease-out;
}

.center_dialogwin pre::-webkit-scrollbar-thumb:hover,
#options::-webkit-scrollbar-thumb:hover,
.cw-tabs-menu::-webkit-scrollbar-thumb:hover,
.side_window::-webkit-scrollbar-thumb:hover {
    background-color: var(--scroll-bar-hover);
    border-width: 6px;
    transition: border-color 0.2s ease-out, background-color 0.2s ease-out;
}

/* A dialog's scrolling body sits on the dialog's background, not the editor's:
   the generic thumb's editor-coloured side borders showed as stripes there. */
.pre_proceed::-webkit-scrollbar-thumb {
    border-color: var(--modal);
}

.main pre::-webkit-scrollbar-thumb {
    background-color: var(--scroll-bar);
    border-width: 6px;
    border-color: var(--modal);
    border-style: solid;
    transition: border-color 0.2s ease-out, background-color 0.2s ease-out;
}

.tocdiv::-webkit-scrollbar-thumb {
    background-color: var(--scroll-bar);
    border-width: 6px;
    border-color: var(--modal);
    border-style: solid;
    transition: border-color 0.2s ease-out, background-color 0.2s ease-out;
}

.wrapper.disablescroll::-webkit-scrollbar-thumb {
    background-color: var(--background-color);
    border-width: 3px;
    border-color: var(--background-color);
    border-style: solid;
}

@font-face {
    font-family: 'Serif';
    font-style: normal;
    font-weight: 400;
    src: url('Merriweather-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Serif';
    font-style: normal;
    font-weight: 700;
    src: url('Merriweather-Black.ttf') format('truetype');
}

@font-face {
    font-family: 'Serif';
    font-style: italic;
    font-weight: 400;
    src: url('Merriweather-Italic.ttf') format('truetype');
}

@font-face {
    font-family: 'Serif';
    font-style: italic;
    font-weight: 700;
    src: url('Merriweather-BlackItalic.ttf') format('truetype');
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: url('OpenSans-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    src: url('OpenSans-Bold.woff2') format('woff2');
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 100;
    src: url('OpenSans-Light.woff2') format('woff2');
}

@font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 400;
    src: url('OpenSans-Italic.woff2') format('woff2');
}

@font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 700;
    src: url('OpenSans-BoldItalic.woff2') format('woff2');
}

@font-face {
    font-family: 'Roboto Mono';
    font-style: normal;
    font-weight: 100 1000;
    src: url('RobotoMono-VariableFont_wght.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto Mono';
    font-style: italic;
    font-weight: 100 1000;
    src: url('RobotoMono-Italic-VariableFont_wght.ttf') format('truetype');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    src: url('Inter-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    src: url('Inter-Medium.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    src: url('Inter-Bold.woff2') format('woff2');
}

@font-face {
    font-family: 'OpenDyslexic';
    font-style: normal;
    font-weight: 400;
    src: url('OpenDyslexic-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'OpenDyslexic';
    font-style: normal;
    font-weight: 700;
    src: url('OpenDyslexic-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'OpenDyslexic';
    font-style: italic;
    font-weight: 400;
    src: url('OpenDyslexic-Italic.ttf') format('truetype');
}

@font-face {
    font-family: 'OpenDyslexic';
    font-style: italic;
    font-weight: 700;
    src: url('OpenDyslexic-BoldItalic.ttf') format('truetype');
}

@font-face {
    font-family: 'OpenDyslexicMono';
    font-style: normal;
    font-weight: 400;
    src: url('OpenDyslexicMono-Regular.ttf') format('truetype');
}

html {
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    user-select: none;
    /* Block scroll on the root. `body` already has `overflow:hidden`, but the
       html root has its own scroll context. In narrow mode (≤699px) the
       editor wrapper goes to `left:100vw` while a submenu is open; if the
       editor still holds focus during that transition the browser auto-
       scrolls the document horizontally to keep the focused element in view
       and stays anchored there — leaving the editor leaking into the
       submenu's viewport. With nothing scrollable at the root, there's
       nowhere to scroll into. */
    overflow: hidden;
}

body {
    font-family: 'Inter', sans-serif;
    padding: 0px;
    margin: 0px;
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    /* `border-width: 0` matches what the resize-debounce in calmly.js used to
       force every resize. With 1px here, every boot/resize shifted all
       absolutely-positioned children (tabs, hamburger) by a pixel when the
       JS cleanup kicked in 120ms later. */
    border-style: solid;
    border-width: 0;
    border-color: var(--background-color);
    background-color: var(--background-color);
    font-size: 18px;
    line-height: 135%;
    overflow: hidden;
    z-index: -20;
    transition: background-color 0.2s ease-out, border-color 0.2s ease-out;
}

input[type="range"] {
    background: linear-gradient(to right, var(--default-text-color) 0%, var(--default-text-color) 50%, var(--selector-background) 50%, var(--selector-background) 100%);
    border: solid 1px var(--default-text-color);
    border-radius: 8px;
    height: 7px;
    outline: none;
    transition: background 0.2s ease-out;
    -webkit-appearance: none;
    appearance: none;
    width: 120px;
    border-radius: 20px;
    height: 4px;
    margin-left: 8px;
    margin-right: 8px;
    margin-bottom: 18px;
}

.main img.comments {
    border-radius: 2px;
    padding: 4px;
    width: 22px;
    border-width: 0px;
    box-sizing: border-box;
    vertical-align: middle;
    border-style: none;
    background-color: var(--comments);
    margin: 1px;
}

.main img.comments:hover {
    cursor: pointer;
}

.main span.cw-comment-anchor {
    background-color: rgba(88, 196, 131, 0.22);
    border-left: 2px solid rgba(41, 135, 82, 0.95);
    border-right: 2px solid rgba(41, 135, 82, 0.95);
    border-radius: 2px;
    cursor: text;
    padding-left: 2px;
    padding-right: 2px;
}

.main span.cw-comment-anchor[data-cw-comment-color='green'] {
    background-color: rgba(88, 196, 131, 0.22);
    border-left-color: rgba(41, 135, 82, 0.95);
    border-right-color: rgba(41, 135, 82, 0.95);
}

.main span.cw-comment-anchor[data-cw-comment-color='yellow'] {
    background-color: rgba(242, 201, 76, 0.24);
    border-left-color: rgba(190, 149, 16, 0.95);
    border-right-color: rgba(190, 149, 16, 0.95);
}

.main span.cw-comment-anchor[data-cw-comment-color='red'] {
    background-color: rgba(235, 87, 87, 0.2);
    border-left-color: rgba(185, 53, 53, 0.95);
    border-right-color: rgba(185, 53, 53, 0.95);
}

.oldschool .main span.cw-comment-anchor[data-cw-comment-color='green'] {
    background-color: rgba(120, 255, 150, 0.5);
    border-left-color: rgba(140, 230, 170, 0.95);
    border-right-color: rgba(140, 230, 170, 0.95);
}

.oldschool .main span.cw-comment-anchor[data-cw-comment-color='yellow'] {
    background-color: rgba(255, 220, 100, 0.5);
    border-left-color: rgba(255, 215, 90, 0.95);
    border-right-color: rgba(255, 215, 90, 0.95);
}

.oldschool .main span.cw-comment-anchor[data-cw-comment-color='red'] {
    background-color: rgba(255, 140, 140, 0.5);
    border-left-color: rgba(255, 150, 150, 0.95);
    border-right-color: rgba(255, 150, 150, 0.95);
}



.main span.cw-comment-anchor[data-cw-comment-inline='1'] {
    border-left-width: 1px;
    border-right-width: 1px;
    padding-left: 0;
    padding-right: 0;
}

textarea.textarea-comments {
    caret-color: rgb(42, 186, 255);
    outline: none;
    display: block;
    padding: 12px;
    overflow-y: scroll;
    border: none;
    width: 100%;
    box-sizing: border-box;
    height: 372px;
    background-color: var(--background-color);
    font-family: inherit;
    font-size: 16px;
    resize: none;
    color: var(--default-text-color);
}

.comment-color-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0px 12px 12px 0px;
}

.comment-color-label {
    min-width: 48px;
    font-size: 13px;
    color: var(--default-text-color);
    opacity: 0.85;
}

.comment-color-picker {
    display: flex;
    align-items: center;
}

.comment-color-picker .comment-dialog-colorpicker {
    cursor: pointer;
    margin-top: 0;
}

.comment-color-picker .comment-dialog-colorpicker:first-child {
    margin-left: 0;
}

body.opendyslexicfont {
    font-family: 'OpenDyslexic';
}

.main del,
.main s,
.main strike {
    text-decoration-color: inherit;
}

figure {
    padding: 0;
    margin: 0;
}

#loader_block_screen {
    display: none;
    position: fixed;
    top: 0px;
    bottom: 0px;
    right: 0px;
    left: 0px;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 9999;
}

#loader_block_bar {
    position: fixed;
    display: block;
    height: 5px;
    left: 0%;
    right: 0%;
    top: 0px;
    background-color: #77abe8;
}

#loader_block_svg {
    display: block;
    margin: auto;
    margin-top: 100px;
    width: 50px;
    height: 50px;
    padding: 10px;
    padding-left: 25px;
}

#loader_input_block {
    opacity: 0;
}

.wrapper {
    overflow-y: auto;
    overflow-x: hidden;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: var(--background-color);
    color: var(--default-text-color);
    transition: background-color 0.2s ease-out, color 0.2s ease-out;
    cursor: inherit;
}

div.wrapper,
#calmlylogo,
#options,
#tabcontainer {
    user-select: none;
}

div.main {
    word-wrap: break-word;
    margin: auto;
    caret-color: rgb(60, 60, 60);
    max-width: 800px;
    min-width: 100px;
    cursor: text;
    user-select: all;
    cursor: inherit;
    caret-color: var(--default-text-color);
    line-height: 150%;
    font-size: 100%;
    transition: color 0.2s ease-out;
}

.main.prnarrow  { max-width: 646px; }
.main.prmedium  { max-width: 846px; }
.main.prwide    { max-width: 1072px; }
.main.prxwide   { max-width: 1296px; }
.main.prxlwide  { max-width: calc(75% + 50px); }
.main.prfull    { max-width: 100%; }

/* Padding lives on the contenteditable so clicks in the lateral margin
   start a text selection (classic contenteditable behaviour).
   `display: block` overrides `.main div { display: inline }` (a leftover
   from when .main itself was the contenteditable). */
.main .ProseMirror {
    display: block;
    padding: 48px;
    padding-top: 50px;
    padding-bottom: 40vh;
    min-height: 200px;
    box-sizing: border-box;
    /* The side padding, again, for a numbered list's long numbers to hang
       into (ol[data-marker-digits]). Kept next to every padding it mirrors. */
    --list-page-margin: 48px;
}

.main.prfull .ProseMirror,.main.prxlwide .ProseMirror {
    padding-left: 18px;
    padding-right: 18px;
    --list-page-margin: 18px;
}

/* Reserve a line in every textblock, so one can never collapse to zero
   height while it is momentarily empty.
   ProseMirror keeps a trailing <br> inside an empty block to hold its line
   open, but while a deletion is being applied the block is already empty
   and that <br> is not there yet: for one layout pass the block has no line
   box at all. The wrapper's scrollHeight drops by a line, and if the
   wrapper happens to be scrolled exactly to its maximum the browser must
   clamp scrollTop to the new, smaller maximum; scroll anchoring puts it
   back one frame later. What the user sees is the whole document jumping up
   and back down on deleting the last character of a paragraph. Reported on
   a Xiaomi Pad 6, a Pixel 10 and a Chromebook, measured on the Xiaomi: 27px
   out and back in ~22ms, and never unless the scroll is pinned to the very
   bottom (at max - 60px the same deletion does not move it at all).
   Not `:last-child`: measured, a paragraph in the middle of the document
   does exactly the same, because what matters is the total height, not
   which block shrank. Not `overflow-anchor: none` on the wrapper either —
   measured, that only moves the displacement to the insertion and never
   undoes it, leaving the document parked a line off.
   1lh is the block's own computed line-height, so this follows the user's
   line-spacing setting (.main.lineheight*) instead of freezing a size. */
.main .ProseMirror p,
.main .ProseMirror h1,
.main .ProseMirror h2,
.main .ProseMirror h3,
.main .ProseMirror h4,
.main .ProseMirror h5,
.main .ProseMirror h6 {
    min-height: 1lh;
}

div.main input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 4px;
}

div.main.mono input[type="checkbox"] {
    vertical-align: text-bottom;
}

/* Task lists share the outer layout of plain <ul> so a checklist and a
   bullet list sit at the same horizontal indent and the same vertical rhythm.
   Concretely: the <ul> inherits .main ul's padding-left, the <li> stays as
   list-item (no flex), and the checkbox label is absolute-positioned into the
   marker slot where the • bullet would normally sit. */

div.main ul[data-type="taskList"] {
    list-style: none;
}

div.main ul[data-type="taskList"] li {
    display: list-item;
    position: relative;
}

div.main ul[data-type="taskList"] li > label {
    position: absolute;
    /* Pull the checkbox into the parent <ul>'s padding area so it lines up
       with where a <li>'s • bullet would be rendered. Using the logical
       `inset-inline-start` (instead of `left`) flips the checkbox to the
       right side automatically in RTL lists, matching how bullets and
       numbers already render in RTL. */
    inset-inline-start: -1.4em;
    top: 0;
    user-select: none;
    cursor: pointer;
}

/* The existing `.main ul li > p` rule that zeroes <p> padding inside list
   items doesn't reach the <p> here — it's two levels deep (li > div > p)
   because of the nodeView wrapper. Mirror the rule for this case so task
   list items have the same per-line spacing as bullet items. */
div.main ul[data-type="taskList"] li > div > p {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

div.main ul[data-type="taskList"] li[data-checked="true"] > div {
    text-decoration: line-through;
    opacity: 0.6;
}


div.main.lineheight125 {
    line-height: 175%;
}

div.main.lineheight15 {
    line-height: 200%;
}

div.main.lineheight175 {
    line-height: 250%;
}

div.main.lineheight2 {
    line-height: 300%;
}

div.main.bluecaret {
    caret-color: rgb(42, 186, 255);
}

div.main.pinkcaret {
    caret-color: #EC407A;
}

div.main.greencaret {
    caret-color: #4CAF50;
}

div.main.orangecaret {
    caret-color: #FF5722;
}

div.main.hidecaret {
    caret-color: transparent !important;
}

/* Caret shape (Chromium 144+) and steady caret (Chromium 140+). Both properties
   inherit, so setting them on div.main reaches the .ProseMirror inside — same as
   caret-color above. The classes are only applied where window.caretCss says the
   WebView implements them, so no @supports guard is needed here. The default
   'bar' shape adds no class at all. */
div.main.caretblock {
    caret-shape: block;
}

/* The block caret paints a rectangle over the next character and Chromium then
   draws that character in its own colour on top, with no contrast adjustment:
   "current Chrome behavior is effectively currentcolor" (csswg-drafts#13723).
   So with the default caret colour — which IS the text colour — the glyph under
   the block becomes invisible. CSS UI 4 fixes this with a second caret-color
   value (`caret-color: <caret> auto`) that no engine implements yet, and which
   cannot be shipped early: Chromium would drop the whole declaration as invalid.
   Until then, fade the caret when — and only when — it would collide with the
   text colour, so the character still reads through it. A caret colour the user
   picked on purpose is never touched. */
div.main.caretblock:not(.bluecaret):not(.pinkcaret):not(.greencaret):not(.orangecaret):not(.customcaret) {
    caret-color: color-mix(in srgb, var(--default-text-color) 25%, transparent);
}

div.main.caretunderscore {
    caret-shape: underscore;
}

div.main.caretsteady {
    caret-animation: manual;
}

div.main.bluetextcolor {
    color: rgb(83 179 220);
}

.dunemode div.main.bluetextcolor {
    color: rgb(18 73 97);
}

.darkmode div.main.bluetextcolor {
    color: rgb(74 180 224);
}

.oldschool div.main.bluetextcolor {
    color: rgb(160 208 228);
}

div.main.pinktextcolor {
    color: #d85682;
}

.darkmode div.main.pinktextcolor {
    color: #ef6e99;
}

.dunemode div.main.pinktextcolor {
    color: #b73a64;
}

.oldschool div.main.pinktextcolor {
    color: #eae417;
}

div.main.greentextcolor {
    color: #4CAF50;
}

.darkmode div.main.greentextcolor {
    color: #539656;
}

.dunemode div.main.greentextcolor {
    color: #364c37;
}

.oldschool div.main.greentextcolor {
    color: #06bd0e;
}

div.main.orangetextcolor {
    color: #dc6540;
}

.darkmode div.main.orangetextcolor {
    color: #cc6a4b;
}

.dunemode div.main.orangetextcolor {
    color: #7F6743;
}

.oldschool div.main.orangetextcolor {
    color: #ecba6d;
}

.focusmodeon * {
    opacity: var(--focusmodeopacity);
    transition: opacity 0.25s ease-out;
}

.focusmodeon *:before,
.focusmodeon *:after {
    opacity: var(--focusmodeopacity);
    transition: opacity 0.25s ease-out;
}

.focusmodeon ul,
.focusmodeon ol,
.focusmodeon dl,
.focusmodeon b,
.focusmodeon i,
.focusmodeon a,
.focusmodeon span,
.focusmodeon u,
.focusmodeon strong,
.focusmodeon em,
.focusmodeon code,
.focusmodeon s,
.focusmodeon mark,
.focusmodeon p img,
.focusmodeon input,
.focusmodeon table,
.focusmodeon tr,
.focusmodeon tbody,
.focusmodeon thead {
    opacity: 1;
    transition: opacity 0.1s ease-out;
}

/* The containers of the focused block (li, cell, term, quote) must not dim
   it: CustomFocus (editor.js) marks every block ancestor of the focused
   block with .blockfocus-ancestor and its direct parent with
   .blockfocus-parent. No `:has()` here on purpose: with a bare `p` as
   subject it makes Blink restyle every paragraph of the document on any
   attribute write under its anchor, per keystroke. */
.focusmodeon li.blockfocus-ancestor,
.focusmodeon td.blockfocus-ancestor,
.focusmodeon th.blockfocus-ancestor,
.focusmodeon dd.blockfocus-ancestor,
.focusmodeon dt.blockfocus-ancestor,
.focusmodeon blockquote.blockfocus-ancestor {
    opacity: 1;
    transition: opacity 0.1s ease-out;
}

/* In an unfocused container the container itself is already dimmed, so its
   paragraphs stay opaque instead of dimming twice. */
.focusmodeon li:not(.blockfocus-ancestor) > p,
.focusmodeon td:not(.blockfocus-ancestor) > p,
.focusmodeon th:not(.blockfocus-ancestor) > p,
.focusmodeon dd:not(.blockfocus-ancestor) > p,
.focusmodeon dt:not(.blockfocus-ancestor) > p,
.focusmodeon blockquote:not(.blockfocus-ancestor) > p {
    opacity: 1;
}

/* List markers (numbers/bullets) inherit from the li, so ancestor lis that
   contain the focused block would show fully opaque markers while their
   text is dimmed. Dim every marker and only restore opacity on the li whose
   direct child is the focused block. */
.focusmodeon ol li::marker,
.focusmodeon ul li::marker {
    color: color-mix(in srgb, currentColor calc(var(--focusmodeopacity) * 100%), transparent);
    transition: color 0.25s ease-out;
}
.focusmodeon ol li.blockfocus-parent::marker,
.focusmodeon ul li.blockfocus-parent::marker {
    color: currentColor;
    transition: color 0.1s ease-out;
}

.focusmodeon .blockfocus,
.focusmodeon .blockfocus *,
.focusmodeon .blockfocus:after,
.focusmodeon .blockfocus *:after,
.focusmodeon .blockfocus:before,
.focusmodeon .blockfocus *:before {
    opacity: 1;
    transition: opacity 0.1s ease-out;
}

input[type='color'] {
    display: inline-block;
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    padding: 0px;
    background-color: #fafafa;
    border-color: var(--selector-background);
    border: none;
    position: relative;
    vertical-align: top;
    box-sizing: border-box;
    display: inline-block;
    margin-left: 10px;
    height: 24px;
    border-radius: 2px;
    margin-top: 10px;
}

input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

input[type="color"]::-webkit-color-swatch {
    border-width: 3px;
    border-color: white;
    border-style: solid;
}

#themecolorselector input[type="color"] {
    margin: 0;
    width: 20px;
    height: 20px;
    border-radius: 4px;
}

#themecolorselector input[type="color"]::-webkit-color-swatch {
    border-width: 1px;
    border-color: var(--default-text-color);
    border-style: solid;
    border-radius: 4px;
}

input::selection {
    background: var(--selection-color-input);
}

div.main ::selection {
    background: var(--selection-color-main);
}

.darkmode div.main ::selection {
    background: var(--selection-color-main);
}

.bluemode div.main ::selection {
    background: var(--selection-color-main);
}

.blackmode div.main ::selection {
    background: var(--selection-color-main);
}

.dunemode div.main ::selection {
    background: var(--selection-color-main);
}

.oldschool div.main ::selection {
    background: var(--selection-color-main);
}

/* Phantom space at block boundaries inside a TextSelection that crosses them
   (rendered by the BlockBreakSelectionMarker extension). The widget itself
   has no content — it exists purely to make ProseMirror insert a
   trailingBreak after it for cursor positioning. The browser then paints
   ::selection on that trailingBreak, giving us the visible highlight with
   exactly the right width and height for the line. */
.main .ProseMirror .pm-block-break-sel {
    pointer-events: none;
}

div.main:focus {
    outline: none;
}

.main .ProseMirror:focus,
.main .ProseMirror:focus-visible,
.main [contenteditable="true"]:focus,
.main [contenteditable="true"]:focus-visible {
    outline: none !important;
}

.main p:focus,
.main p:focus-visible {
    outline: none;
}

.ProseMirror-selectednode {
    outline: none !important;
}

body.trial-locked .main .ProseMirror,
body.trial-locked .main .ProseMirror * {
    user-select: none !important;
    -webkit-user-select: none !important;
    caret-color: transparent;
    cursor: default;
}

.main img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* ProseMirror (prosemirror-view 1.42.6, with TipTap 3.31.4) puts an empty
   <img class="ProseMirror-separator"> in front of an image, a checkbox or a
   line break that opens a block or follows another one: a caret workaround for
   Safari and Firefox, put in whatever the browser. TipTap draws it inline, and
   in front of an image, which is a block here, the empty inline image took a
   line of its own: a blank line above every image that opens a paragraph, and
   between two images in a row. Chromium did without it (1.41.8 put none
   there), so it is not drawn. The separator ProseMirror has always put AFTER a
   non-editable node that ends a block, before its last <br>, is a different
   one, and stays: it is never a first child, nor followed by two siblings. */
.main img.ProseMirror-separator:first-child,
.main img.ProseMirror-separator:not(:last-child):not(:nth-last-child(2)) {
    display: none !important;
}

.main img:hover {
    cursor: default;
}

.main img.cw-img-notfound,
.main img[src$="notfound.png"] {
    filter: var(--img-notfound-filter);
}

/* An unreachable image keeps its original `src` untouched — the path the author
   wrote has to survive a save — so the placeholder is painted here instead of
   being written into the DOM. `content` replaces the browser's broken-image
   glyph (and its alt text) with the same notfound.png the old code assigned to
   `src`. The [src$=...] rule above stays for documents saved by earlier
   versions, whose image paths were already overwritten with the placeholder. */
.main img.cw-img-notfound {
    content: url('notfound.png');
}

.main p {
    white-space: pre-wrap;
    margin-top: 0;
    margin-bottom: 0;
}

.main p.pinline {
    display: inline !important;
}

.main table {
    white-space: normal;
}

.main a,
.main a:visited,
.main a:active,
a.oklink {
    text-decoration: underline;
    text-decoration-color: rgb(42 186 255 / 60%);
    color: inherit;
}

.main a::selection {
    text-decoration-color: rgb(42 186 255 / 60%);
}

.main u {
    text-decoration-thickness: 16%;
}

.oklink {
    text-align: right;
}

.oklink:after {
    content: ' \276f';
}

.main hr {
    width: 100%;
    border: 0px;
    height: 1px;
    margin: auto;
    margin-bottom: 24px;
    padding-top: 24px;
    border-bottom-color: var(--default-text-color);
    border-bottom-width: 1px;
    border-bottom-style: solid;
    opacity: 0.4;
    display: inline-block;
    transition: border-bottom-color 0.25s ease-out, opacity 0.25s ease-out;
}

.main hr.ProseMirror-selectednode {
    background-color: var(--selection-color-input);
    opacity: 1;
}

.main li[style*="direction:rtl"] {
    text-align: right;
}

.main li[style*="direction: rtl"] {
    text-align: right;
}

.main li[style*="direction:ltr"] {
    text-align: left;
}

.main li[style*="direction: ltr"] {
    text-align: left;
}

.main ul {
    display: block;
    list-style: disc;
    padding-left: 1.1em;
    padding-right: 1.1em;
    margin-top: 0;
    margin-bottom: 0;
}

.main ul li {
    display: list-item;
    position: relative;
    white-space: pre-wrap;
    padding-inline-start: 0.7em;
}

.main ol {
    display: block;
    padding-left: 1.8em;
    padding-right: 1.8em;
    margin-top: 0;
    margin-bottom: 0;
}

.main ol li {
    display: list-item;
    list-style-type: inherit;
    position: relative;
    white-space: pre-wrap;
}

/* A number longer than "99." hangs out of the list's padding into the page
   margin, and past that margin the editor clips it: on a phone (18px) a list
   that starts at 2024 showed "24.". The editor marks a list whose widest
   number has 2+ characters (data-marker-digits, a decoration: never saved),
   and the padding grows only by what that number needs beyond the margin:
   1ch a digit (the width of "0"; the marker's digits are tabular), then
   --marker-suffix for the ". " after it and a little air before the edge.
   A list up to 99 keeps its padding (but in OpenDyslexic's monospaced font,
   and where its number would be cut, below), and on a wide window 2024 still
   fits in the 48px margin and changes nothing. Both sides, as above, for a
   right-to-left list.
   Measured with every font of the app, at 400px and at 1200px (2024 →
   "2024." whole, 6px from the edge on a phone). */
.main ol {
    /* ". " is about 0.6em in a proportional font, 2ch in a monospaced one. */
    --marker-suffix: 1em;
}
.main.mono ol {
    --marker-suffix: calc(2ch + 0.4em);
}
.main ol[data-marker-digits="3"] { --marker-digits: 3; }
.main ol[data-marker-digits="4"] { --marker-digits: 4; }
.main ol[data-marker-digits="5"] { --marker-digits: 5; }
.main ol[data-marker-digits="6"] { --marker-digits: 6; }
.main ol[data-marker-digits="7"] { --marker-digits: 7; }
.main ol[data-marker-digits="8"] { --marker-digits: 8; }
.main ol[data-marker-digits="9"] { --marker-digits: 9; }
.main ol[data-marker-digits="10"] { --marker-digits: 10; }
.main ol[data-marker-digits="11"] { --marker-digits: 11; }
.main ol[data-marker-digits="12"] { --marker-digits: 12; }
/* OpenDyslexic's monospaced font has digits so wide (0.73em) that "99." does
   not fit either: past an 18px margin every number from 10 to 99 lost the
   left edge of its first digit, and half of it at 150%. So there a two-digit
   list gets the same room. In every other font "99." fits in 1.8em and the
   margin at the default size, so there a list marked "2" is left out of this
   rule (but for larger text and print, below). */
body.opendyslexicfont .main.mono ol[data-marker-digits="2"] { --marker-digits: 2; }
.main ol[data-marker-digits]:not([data-marker-digits="2"]),
body.opendyslexicfont .main.mono ol[data-marker-digits="2"] {
    padding-left: max(1.8em, calc(var(--marker-digits) * 1ch + var(--marker-suffix) - var(--list-page-margin, 18px)));
    padding-right: max(1.8em, calc(var(--marker-digits) * 1ch + var(--marker-suffix) - var(--list-page-margin, 18px)));
}
/* Up to 99, or up to 9, a number is cut only in larger text or in print (no
   margin there): Roboto Mono's "99." is 2.4em wide, past 1.8em and an 18px
   margin from 168%; OpenDyslexicMono's "9." is 2.2em, past them from 254%;
   OpenDyslexic's "99." is 1.98em, past 1.8em in print. Such a list gets room
   for its number (--marker-room). In OpenDyslexic and OpenDyslexicMono, for
   exactly the number and no air, so that one which fits today keeps its look
   at every size: it only grows where the number would be cut. In Roboto
   Mono, the default typography, also the air a long number has (0.4em, as
   "100." gets from --marker-suffix): with none, "99." came up to the
   window's edge in larger text (3px from it at 150%, where "100." is 13px
   from it). With it, 2.8em: 1.8em and an 18px margin at the default size
   (18px), so a list that fits there keeps its look, and grows past it. In
   OpenDyslexicMono a list that is not marked is one up to 9 (or lettered: a
   letter is as wide as a digit there). */
body:not(.opendyslexicfont) .main.mono ol[data-marker-digits="2"] { --marker-room: calc(4ch + 0.4em); }
body.opendyslexicfont .main.mono ol:not([data-marker-digits]) { --marker-room: 3ch; }
body.opendyslexicfont .main.serif ol[data-marker-digits="2"],
body.opendyslexicfont .main.opensans ol[data-marker-digits="2"] { --marker-room: calc(2ch + 0.68em); }
/* A monospaced font from the system list (Consolas, Courier New…), which the
   editor marks .monodigits (Editor.fn.updateListMarkerFont): its ". " is 2ch,
   not 1em, and past an 18px margin "2024." lost 2–4px of its first digit at
   the default size, "99." from about 170% as in Roboto Mono. The same room,
   for exactly the number: no air, so a list that fits keeps its look. */
.main.monodigits ol { --marker-suffix: 2ch; }
.main.monodigits ol[data-marker-digits="2"] { --marker-room: 4ch; }
body:not(.opendyslexicfont) .main.mono ol[data-marker-digits="2"],
.main.monodigits ol[data-marker-digits="2"],
body.opendyslexicfont .main.mono ol:not([data-marker-digits]),
body.opendyslexicfont .main.serif ol[data-marker-digits="2"],
body.opendyslexicfont .main.opensans ol[data-marker-digits="2"] {
    padding-left: max(1.8em, calc(var(--marker-room, 0px) - var(--list-page-margin, 18px)));
    padding-right: max(1.8em, calc(var(--marker-room, 0px) - var(--list-page-margin, 18px)));
}
/* A list numbered with letters or Roman numerals has no digits to count:
   "xviii." or "XXXVIII." is far wider than "99.", and it was cut like a long
   number (at 400px in Roboto Mono "viii." lost 14px and "xviii." 25px; in
   every typography "XXXVIII." lost 16-68px, more in larger text). The editor
   measures its widest marker in the font it is drawn in and gives it in em
   (data-marker-room, a decoration: never saved), and the list gets room for
   that marker and the air a long number has (0.4em, as "100." gets from
   --marker-suffix): given exactly its room, "XXXVIII." touched the window's
   edge (0-2px from it, where "100." is 9px from it). A list whose marker
   fits, with that air, in 1.8em and the margin keeps its look; also over the
   3ch of OpenDyslexic's monospaced font, above. Both sides, for a
   right-to-left list. A number in an attribute is a length only where attr()
   takes a type (Chromium 133 on): an older WebView keeps the room it had. */
@supports (width: attr(data-marker-room em)) {
    .main ol[data-marker-room],
    body.opendyslexicfont .main.mono ol[data-marker-room] {
        padding-left: max(1.8em, calc(attr(data-marker-room em) + 0.4em - var(--list-page-margin, 18px)));
        padding-right: max(1.8em, calc(attr(data-marker-room em) + 0.4em - var(--list-page-margin, 18px)));
    }
}

/* TipTap wraps block content in paragraphs inside structural containers.
   Keep those wrapper paragraphs visually neutral. */
.main ol li > p,
.main ul li > p,
.main blockquote > p,
.main td > p,
.main th > p {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}


/*.main ol li:before {
    content: counter(item) ".";
    counter-increment: item;
    position: absolute;
    text-align: right;
    width: 52px;
    display: inline-block;
    left: 0px;
    opacity: 0.7;
        }*/

.main .focusmodeon mark,
.main mark {
    background-color: transparent;
    opacity: 1;
    transition: opacity 0.25s ease-out;
}

b,
strong {
    font-weight: 700 !important;
}

h1 b,
h2 b,
h3 b,
h4 b,
h5 b,
h6 b {
    font-weight: inherit;
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

blockquote {
    white-space: pre-wrap;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 10px;
    padding-bottom: 10px;
    /* The side a quote starts from, not the left: in a right-to-left quote the
       browser's 40px stayed on the right, where it starts, and it sat 40px
       further in than a left-to-right one. */
    margin-inline-start: 0px;
    margin-bottom: 0px;
    margin-top: 0px;
    min-height: 28px;
    quotes: "\00AB""\00BB";
    transition: padding-top 0.1s, padding-bottom 0.1s;
}

/* The quote marks open the quote's first block and close its last, and each
   paragraph of a quote keeps a line of its own. They used to wrap the quote
   with its paragraphs drawn inline: a quote of two paragraphs showed them glued
   ("…de la cita.Segundo…"), and Enter in a quote made a paragraph with no line
   for the caret, so what was typed next went onto the end of the one above. */
blockquote > :first-child:before {
    content: "\00AB";
    color: inherit;
    position: relative;
    width: 0px;
    text-shadow: none;
    opacity: 0.5
}

blockquote > :last-child:after {
    content: "\00BB";
    color: inherit;
    margin-left: 5px;
    text-shadow: none;
    opacity: 0.5;
}

/* A quote at the start or the end of a quote: the outer quote's mark is that
   inner quote's own ::before / ::after, so it was drawn in the inner quote's
   box, one level in. Three quotes deep, the innermost line read "…anidamiento. »"
   with a second » under it at its own indent, and the outermost quote was never
   closed. The mark goes on a line of its own, back out of the inner quote's
   side padding (30px), at the indent of the quote it closes. */
blockquote > blockquote:first-child:before,
blockquote > blockquote:last-child:after {
    display: block;
    width: auto;
    margin-left: 0;
    margin-right: 0;
    margin-inline-start: -30px;
}

/* A code block or a table is a box of its own, and at an edge of a quote the
   mark was drawn inside that box: "«var y = 2;" in the code, "return x; »" on
   its last line, a row of its own inside the table's border. There the mark
   hangs outside the box instead, in the quote's side padding (30px), 5px from
   the box and level with its first or last line (where the mark would have
   been: the static position). It is positioned against the quote, so the box's
   own clipping (overflow) does not cut it; the quote is positioned for that
   and nothing else. In large text a mark wider than the quote's padding and
   the page margin (--list-page-margin) would be cut at the window's edge:
   there it comes in over the box's own padding instead (1em is wider than
   either mark in every font). */
blockquote {
    position: relative;
}
blockquote > pre:first-child:before,
blockquote > table:first-child:before {
    position: absolute;
    inset-inline-end: min(calc(100% - 25px), calc(100% - 1em + var(--list-page-margin, 18px)));
    width: auto;
}
blockquote > pre:last-child:after,
blockquote > table:last-child:after {
    position: absolute;
    inset-inline-start: min(calc(100% - 25px), calc(100% - 1em + var(--list-page-margin, 18px)));
    margin-left: 0;
}
/* A table's static positions are its top and bottom edges, not a line of
   text: move the marks onto its first and last rows (past the cells' 10px
   padding), the bottom one by its own height too. */
blockquote > table:first-child:before {
    margin-top: 10px;
}
blockquote > table:last-child:after {
    margin-top: -10px;
    transform: translateY(-100%);
}
/* Those marks are the quote's, so they take the quote's direction, not the
   box's own: a code block can have one of its own (dir), and its marks went
   by it. A right-to-left quote ending in left-to-right code hung its » at the
   right of the box (where the quote opens), not at its left, drawn as an LTR
   », not as the quote's last line draws it; one starting with such code hung
   its « at the left; an LTR quote around RTL code had them the other way
   round. :dir() follows the dir attributes the editor writes; where it is not
   known (Chromium before 120) the marks go by the box, as before. */
blockquote:dir(ltr) {
    --quote-direction: ltr;
}
blockquote:dir(rtl) {
    --quote-direction: rtl;
}
blockquote > pre:first-child:before,
blockquote > pre:last-child:after,
blockquote > table:first-child:before,
blockquote > table:last-child:after {
    direction: var(--quote-direction);
}

.nomarginsbetweenP .main blockquote {
    padding-top: 0px;
    padding-bottom: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    transition: padding-top 0.1s ease-out, padding-bottom 0.1s ease-out;
}

.editor_tooltip {
    font-size: 22px;
    position: relative;
    display: none;
    position: absolute;
    top: 80px;
    left: 100px;
    z-index: 998;
    pointer-events: none;
}

.editor_tooltip ul {
    border-color: var(--tooltip);
    border-style: solid;
    margin: 0px;
    padding: 0px;
    padding-left: 2px;
    padding-right: 2px;
    padding-top: 3px;
    position: absolute;
    width: 352px;
    color: var(--tooltip-fg);
    background-color: var(--tooltip);
    height: 33px;
    text-align: center;
    border-radius: 4px;
    display: block;
    box-shadow: var(--tooltip-shadow);
}

.editor_tooltip_extended ul {
 width: 512px;
}

.editor_tooltip_extended #btmoreoptions {
    display: none;
}
.editor_tooltip #btu,.editor_tooltip #bth4, .editor_tooltip #bth5, .editor_tooltip #bth6, .editor_tooltip #btcode, .editor_tooltip #btchecklist {
    display: none;
}

.editor_tooltip_extended #btu,.editor_tooltip_extended #bth4, .editor_tooltip_extended #bth5, .editor_tooltip_extended #bth6, .editor_tooltip_extended #btcode, .editor_tooltip_extended #btchecklist {
    display: block;
}



.editor_tooltip ul li {
    list-style: none;
    display: inline;
    float: left;
}

.editor_tooltip ul li a {
    border-radius: 2px;
    display: block;
    width: 30px;
    height: 30px;
    text-decoration: none;
    color: var(--tooltip-fg);
    margin-left: 1px;
    margin-right: 1px;
    pointer-events: all;
}

.editor_tooltip ul li a:hover {
    background-color: var(--tooltip-hover);
    transition: background-color 0.25s ease-out;
}

.editor_tooltip ul li a img {
    width: 22px;
    padding: 4px;
    filter: var(--tooltip-icon-filter);
}

#uldown {
    content: '';
    position: absolute;
    top: 38px;
    margin-left: 138px;
    width: 0;
    height: 0;
    border-top: 8px solid var(--tooltip);
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
}

#ulup {
    content: '';
    position: absolute;
    top: -6px;
    margin-left: 138px;
    width: 0;
    height: 0;
    border-bottom: 8px solid var(--tooltip);
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
}

.menumsg {
    vertical-align: -6%;
}

#calmlylogo {
    opacity: 0;
    padding: 0px;
    -webkit-app-region: no-drag;
    display: block;
    position: absolute;
    top: 0;
    left: 0px;
    /* Slide via `transform` (GPU-composited) rather than `top` (a layout
       property). Animating `top` repaints each frame and can leave a stale
       sliver of the strip behind near the top-left when the compositor is
       under load. `translateY` just re-positions the layer — no artifacts. */
    transform: translateY(-18px);
    pointer-events: none;
    /* Same rationale as #tabcontainer: keep a stable GPU layer so the strip
       never squashes with the scrolling .wrapper underneath. */
    will-change: transform, opacity;
    backface-visibility: hidden;
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}

.no_full_screen #calmlylogo {
    left: 68px;
}

/* macOS Tahoe (26+): larger/repositioned native traffic lights need the
   hamburger pushed further right. Only applies when the running OS is Tahoe
   (class added in app.html / calmly.js), so older macOS keeps left: 68px. */
.no_full_screen.macos-tahoe #calmlylogo {
    left: 74px;
}

/* Touch sizing: enlarge the hamburger to a >=44px finger target. The SVG carries
   inline padding (app.html) that beats a plain CSS padding rule, so we grow the
   #calmlylogo container (which holds the handler + role=button) plus the glyph.
   The left:0/68/74 position variants only set `left`, so they're unaffected. */
body.touch-mode #calmlylogo svg { width: 28px; height: 28px; }
body.touch-mode #calmlylogo { padding: 1px 4px; box-sizing: content-box; }

#calmlylogo svg rect {
    fill: var(--default-text-color);
}

#contentWrappers {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    /* The slide geometry lives in CSS via `.open-main` / `.open-sub`.
       `--wrapper-w` is the dynamic part (depends on the editor's text-width
       preset, which is runtime data) and is set inline by JS; CSS uses it
       via `width: var(--wrapper-w)`. Clearing the inline custom property
       lets this 100vw default take over for the closed state. */
    --wrapper-w: 100vw;
    width: var(--wrapper-w);
    user-select: none;
    cursor: inherit;
    ;
}

/* Menu open/close slide animation. Opt-in via `.anim-slide` class so the
   per-frame resize sync (which sets width inline) doesn't chase the cursor
   on resize and the instant `forceclosemenu(true)` path stays snap. JS adds
   the class on animated transitions and removes it on instant ones. */
#contentWrappers.anim-slide {
    transition: left 0.15s ease-out, width 0.15s ease-out;
}

/* Discrete menu states. JS toggles these classes; the pixel geometry lives
   here so it can be inspected and themed without touching code. */
#contentWrappers.open-main { left: 320px; }
#contentWrappers.open-sub  { left: 640px; }

#contentWrappers.booting {
    visibility: hidden;
}

#tabcontainer {
    position: absolute;
    overflow: hidden;
    /* `no-drag` while hidden; `.menu-visible` re-enables drag (see below).
       With the transform-based slide the layout box stays at top:0, so the
       drag region would otherwise cover the editor's top edge when the
       strip is hidden. */
    -webkit-app-region: no-drag;
    display: block;
    top: 0;
    left: 0;
    right: 0;
    height: 36px;
    padding-left: 32px;
    background-color: var(--menu-background-color);
    white-space: nowrap;
    opacity: 0;
    /* Slide via `transform` — see #calmlylogo above for the rationale. */
    transform: translateY(-18px);
    pointer-events: none;
    /* Pin a dedicated, stable GPU layer. Without this the transform/opacity
       animation only promotes a *temporary* layer, which Chromium squashes
       together with the scrolling `.wrapper` underneath. When the strip
       reappears while the wrapper is repainting (scrollbar coming back), that
       shared backing smears the strip's background below its 36px box — the
       "taller background" artifact, visible only when the document scrolls.
       A permanent layer (will-change) keeps the strip out of the scroller's
       squashing group. `backface-visibility` nudges layer creation on
       Chromium builds that ignore will-change for opacity-only promotion. */
    will-change: transform, opacity;
    backface-visibility: hidden;
    transition: background-color 0.2s ease-out, opacity 0.2s ease-out, transform 0.2s ease-out;
}

/* Top-bar visibility classes. JS toggles `.menu-visible` to show the
   hamburger + tab strip, and `.hide-delayed` (only via `hidemenus`) for the
   1-second-delayed slide-up + fade-out used when the mouse goes idle.
   The hidden state (no class) sits at `translateY(-18px)` so every show/hide
   is a slide + fade. `.hide-delayed` doesn't need to change the transform
   (already at -18 in base) — it just swaps the transition timing to add the
   1s idle delay. */
#calmlylogo.menu-visible, #tabcontainer.menu-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
#tabcontainer.menu-visible {
    -webkit-app-region: drag;
}
#calmlylogo.hide-delayed, #tabcontainer.hide-delayed {
    transition: opacity 0.25s ease-out 1s, transform 0.25s ease-out 1s;
}

.no_full_screen #tabcontainer {
    padding-left: 104px;
}

/* macOS Tahoe (26+): extra left padding so the tabs clear the larger native
   traffic lights + shifted hamburger. Older macOS keeps padding-left: 104px. */
.no_full_screen.macos-tahoe #tabcontainer {
    padding-left: 108px;
}

#onlytabs {
    display: inline;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
}

/* The "+" is drawn, not typed: as a character it followed the system text size
   (Android's WebView scales font-size AND line-height by it, not the box), so at
   115% it came out bigger than the close X and sat below the tabs. The box takes
   the tab's own top and height, so the centred cross lines up with the tab
   labels and the X on every platform. font-size: 0 hides the "+" text in the
   markup; the button is named by its aria-label.
   The cross is an SVG mask in the text colour rather than two thin boxes: box
   edges snap to whole device pixels, so on a 2.625x phone a 1.5-2px bar came out
   4 or 6 pixels depending on where it landed. Its stroke is 1/6 of the arm (1.5px
   on desktop, 2px on touch), the weight of the tab's close X it sits next to.
   Width: resizeTabs() reserves 36px (touch: 44px) after the last tab for this
   button. The box takes all but 4px of it, so once the tabs fill the strip the
   cross sits centred between the last tab (whose right margin is 4px) and the
   edge. */
#addtab {
    --plus-arm: 9px;
    display: none;
    -webkit-app-region: no-drag;
    position: relative;
    vertical-align: top;
    width: 32px;
    height: 28px;
    margin-top: 8px;
    font-size: 0;
}

#addtab::before {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: var(--plus-arm);
    height: var(--plus-arm);
    background-color: var(--default-text-color);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 0V12M0 6H12' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

/* "…": shown only while some tabs don't fit (tab_overflow.js); it lists them.
   Drawn like the "+" and for the same reasons. resizeTabs() reserves 36px
   (touch: 44px) for it: the box plus a 4px right margin, so it sits as far from
   the "+" as the last tab does. The badge counts the tabs in the list, like a
   notification count; resizeTabs() keeps data-count up to date. */
#moretabs {
    display: none;
    -webkit-app-region: no-drag;
    position: relative;
    vertical-align: top;
    width: 32px;
    height: 28px;
    margin-top: 8px;
    margin-right: 4px;
    font-size: 0;
    border-radius: 4px;
}
#tabcontainer.tabs-overflow #moretabs {
    display: inline-block;
}
#moretabs::before {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 14px;
    height: 4px;
    background-color: var(--default-text-color);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 4'%3E%3Ccircle cx='2' cy='2' r='1.6'/%3E%3Ccircle cx='7' cy='2' r='1.6'/%3E%3Ccircle cx='12' cy='2' r='1.6'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
#moretabs::after {
    content: attr(data-count);
    position: absolute;
    top: -7px;
    right: -6px;
    box-sizing: border-box;
    min-width: 19px;
    height: 19px;
    padding: 0 4px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    line-height: 15px;
    text-align: center;
    /* Quiet, not a notification red: the "…"'s own hover background, and the
       text colour toned down towards it. The border, in the strip's colour,
       cuts it out of the button when that takes the same background (hover,
       menu open). */
    border: 2px solid var(--menu-background-color);
    color: var(--default-text-color);
    color: color-mix(in srgb, var(--default-text-color) 65%, var(--no-focus-color));
    background-color: var(--no-focus-color);
}
#moretabs[aria-expanded="true"] {
    background-color: var(--no-focus-color);
}
@media (hover: hover) and (pointer: fine) {
    #moretabs:hover {
        background-color: var(--no-focus-color);
    }
}

.tab.tab-hidden {
    display: none;
}

/* The "…" list: tab names can be long, so cut them like the tabs do. Its
   scrollbar thumb is the main menu's (top of this file); the track keeps clear
   of the rounded corners. */
.cw-tabs-menu {
    max-width: min(320px, calc(100vw - 16px));
}
.cw-tabs-menu::-webkit-scrollbar-track {
    background: transparent;
    margin: 4px 0;
}
.cw-tabs-menu .tfb-overflow-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cw-tabs-menu .cw-tabs-unsaved {
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    margin-left: auto;
    border-radius: 50%;
    background-color: var(--default-text-color);
}

.darwin #opfull {
    display: none;
}

/* Find is only useful from the menu when there's no keyboard (no Ctrl+F).
   Hidden by default; shown when isTouchMode flips body.touch-mode on. */
#opfind {
    display: none;
}

body.touch-mode #opfind {
    display: block;
}

#opupdateavailable {
    display: none;
}

#opupdateavailable .icnmask {
    background-color: rgb(0, 149, 206);
}

.tab {
    -webkit-app-region: no-drag;
    position: relative;
    vertical-align: top;
    color: var(--default-text-color);
    margin-left: 4px;
    margin-right: 4px;
    background-color: var(--no-focus-color);
    display: inline-block;
    height: 28px;
    margin-top: 8px;
    padding: 3px;
    font-size: 14px;
    padding-left: 14px;
    padding-right: 14px;
    box-sizing: border-box;
    text-align: center;
    width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 24px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.tab.activeTab {
    background-color: var(--background-color);
}

.tab span.closetab {
    opacity: 0;
    position: absolute;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-image: var(--close-tab);
    background-repeat: no-repeat;
    background-position: center center;
    width: 26px;
    background-size: 8px 8px;
    background-color: var(--no-focus-color);
}

.tab span.closetab:hover {
    background-size: 10px 10px;
}

.tab span.icon_unsaved {
    opacity: 0;
    position: absolute;
    right: 0px;
    top: 0px;
    bottom: 0px;
    width: 26px;
    background-color: var(--no-focus-color);
}

.activeTab span.icon_unsaved {
    background-color: var(--background-color);
}

.tab span.icon_unsaved svg ellipse {
    fill: var(--default-text-color);
}

.tab span.closetab:hover {
    opacity: 1 !important;
}

.activeTab span.closetab {
    background-color: var(--background-color);
}

.tab span.closetab:hover {
    margin-top: 0px;
}

/* Touch adaptation (spec-touch-adaptation.md, T2, revised): no hover, so the
   affordance is driven by document state, not pointer position. The close
   action lives ONLY on the focal (active) tab — like the X always has:
   - Unsaved tab: show the dirty dot on every tab as an indicator, but only
     the FOCAL tab's dot is a close target (pointer-events below).
   - Saved tab: show the close X only on the FOCAL tab.
   - On a non-focal tab nothing is actionable, so its dot/X get
     pointer-events:none and a tap on that slot falls through to the tab
     itself and just focuses it — a non-focal tab is never closed from its
     dot/X corner. This also disables sticky touch :hover on the hidden X
     (a :hover element needs pointer-events).
   The dot's opacity is still set inline by documentSaved(); the .unsaved
   class mirrors that state so CSS can gate the X and pointer-events. */
body.touch-mode .tab span.closetab {
    opacity: 0;
    pointer-events: none;
}
body.touch-mode .tab.activeTab:not(.unsaved) span.closetab {
    opacity: 1;
    pointer-events: auto;
}
body.touch-mode .tab span.icon_unsaved {
    pointer-events: none;
}
body.touch-mode .tab.activeTab.unsaved span.icon_unsaved {
    pointer-events: auto;
}

/* Touch sizing: enlarge the tab strip to comfortable finger targets, matching
   the format bar's language (50px bar, ~40px controls). Gated on body.touch-mode
   so a tablet with keyboard/trackpad keeps the desktop sizes. The bar/tab are
   absolutely-positioned overlays (top:0), so growing them never reflows the
   editor — the only coupled value is the scrollbar-track top margin, bumped below.
   padding-left clears the enlarged hamburger at left:0; scoped :not(.no_full_screen)
   so it never clobbers the macOS 104/108px traffic-light offsets. */
body.touch-mode #tabcontainer { height: 46px; }
body.touch-mode:not(.no_full_screen) #tabcontainer { padding-left: 44px; }
body.touch-mode .tab {
    height: 38px;
    line-height: 32px;
    font-size: 16px;
    padding-left: 16px;
    padding-right: 16px;
    margin-top: 8px;
}
body.touch-mode #addtab {
    --plus-arm: 12px;
    width: 40px;
    height: 38px;
}
body.touch-mode #moretabs {
    width: 40px;
    height: 38px;
}
body.touch-mode #moretabs::before {
    width: 18px;
    height: 5px;
}
body.touch-mode #moretabs::after {
    top: -6px;
    min-width: 22px;
    height: 22px;
    padding: 0 5px;
    border-radius: 11px;
    font-size: 12px;
    line-height: 18px;
}
body.touch-mode .tab span.closetab,
body.touch-mode .tab span.icon_unsaved { width: 36px;padding-top:4px }
body.touch-mode .tab span.closetab { background-size: 12px 12px; }
body.touch-mode .wrapper::-webkit-scrollbar-track { margin-top: 50px; }

/* Touch drag-to-reorder (spec-touch-adaptation #7): own the touch gesture on the
   tab so the browser doesn't pan/scroll mid-drag, and fade the dragged tab as
   feedback. The strip clips overflow, so feedback is opacity (not a shadow). */
body.touch-mode .tab { touch-action: none; }
body.touch-mode .tab.dragging { opacity: 0.7; }

/* The tab strip is taller in touch mode (46px vs the desktop 36px), so the TOC
   icon and panel — pinned just below the desktop bar — would sit over the tabs.
   Push both down by the 10px height difference to clear the taller strip. */
body.touch-mode .toc { top: 52px; }
body.touch-mode .tocdiv { top: 58px; max-height: calc(100vh - 96px); }
/* Same reason for the find/replace box, pinned just below the desktop bar. */
body.touch-mode #search_box { top: 58px; }

/* Overlay on-screen keyboards (Windows 2-in-1, iPad) don't resize the window
   when the keyboard opens — only visualViewport shrinks — so the scroll area
   would run under the keyboard and hide the text. editor_touchbar.js publishes
   the keyboard height as --osk-inset; shrink the editor viewport by it so the
   text div ends above the keyboard. On Android (adjustResize) the window already
   shrinks and --osk-inset settles at 0, so this is a no-op there. */
body.touch-mode .wrapper { bottom: var(--osk-inset, 0px); }

/* T6b: with the format bar up, dock the word counter just above it
   (--tfb-bottom = keyboard height + bar height, set by editor_touchbar.js).
   z-index above the bar so it's never clipped behind it. */
body.touch-mode.tfb-visible #countdiv.alwaysvisible {
    bottom: var(--tfb-bottom, 50px);
    z-index: 9001;
}
/* When the table row is also docked (one 50px row above --tfb-bottom), lift the
   counter past both so it never sits under the table controls. */
body.touch-mode.tfb-visible.tfb-table-visible #countdiv.alwaysvisible {
    bottom: calc(var(--tfb-bottom, 50px) + 50px);
}

/* Touch format bar (spec-touch-adaptation.md, T6): fixed above the keyboard,
   horizontally scrollable so every control is reachable on narrow widths.
   JS sets `bottom` to the keyboard height and toggles display. */
#touch-format-bar {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9000;
    box-sizing: border-box;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    height: 50px;
    background-color: var(--menu-background-color);
    border-top: 1px solid var(--no-focus-color);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    /* The keyboard guard above also covers landscape safe-area on some devices. */
    padding-bottom: max(4px, env(safe-area-inset-bottom, 0px));
}
/* Fade gradient hints on left/right edges when content overflows. */
#touch-format-bar::before {
    content: '';
    position: fixed;
    left: 0;
    bottom: 0;
    width: 20px;
    height: 50px;
    box-sizing: border-box;
    background: linear-gradient(to right, var(--menu-background-color), transparent);
    pointer-events: none;
    z-index: 9001;
    padding-bottom: max(4px, env(safe-area-inset-bottom, 0px));
}
#touch-format-bar::after {
    content: '';
    position: fixed;
    right: 0;
    bottom: 0;
    width: 20px;
    height: 50px;
    box-sizing: border-box;
    background: linear-gradient(to left, var(--menu-background-color), transparent);
    pointer-events: none;
    z-index: 9001;
    padding-bottom: max(4px, env(safe-area-inset-bottom, 0px));
}
/* Hide the horizontal scrollbar completely; the fade gradient hints at more content. */
#touch-format-bar::-webkit-scrollbar {
    height: 0;
}
#touch-format-bar .tfb-group {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
}
/* Thin separators between groups. */
#touch-format-bar .tfb-group + .tfb-group {
    border-left: 1px solid var(--no-focus-color);
    padding-left: 8px;
    margin-left: -2px;
}
/* History group sits at the right edge. Higher specificity than the
   `.tfb-group + .tfb-group` separator rule so margin-left:auto wins. */
#touch-format-bar .tfb-group.tfb-group-right {
    margin-left: auto;
}
#touch-format-bar .tfb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--default-text-color);
    cursor: pointer;
    padding: 0;
    flex: 0 0 auto;
}
#touch-format-bar .tfb-btn:active {
    background-color: var(--menu-hover);
}
#touch-format-bar .tfb-btn.tfb-active {
    background-color: var(--toolbar-active-bg);
    color: #fff;
}
#touch-format-bar .tfb-btn:disabled {
    opacity: 0.35;
}
/* Reused desktop toolbar PNGs, themed exactly like the floating toolbar. */
#touch-format-bar .tfb-icon {
    width: 22px;
    height: 22px;
    filter: var(--tooltip-icon-filter);
    pointer-events: none;
}
/* Heading dropdown: a button showing the current style + chevron, with a
   menu that opens upward (the bar sits at the bottom). */
#touch-format-bar .tfb-heading-wrap {
    position: relative;
    flex: 0 0 auto;
}
#touch-format-bar .tfb-heading-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 38px;
    /* Fixed width (not min-width): the label swaps between "Normal" and
       "H1".."H6", and a min-width would let "Normal" stretch the button,
       shifting every toolbar icon when the caret moves heading↔body text. */
    width: 92px;
    flex: 0 0 auto;
    padding: 0 8px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--default-text-color);
    font-size: 15px;
    cursor: pointer;
}
#touch-format-bar .tfb-heading-label {
    flex: 1 1 auto;
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
/* The heading menu lives on document.body (not inside the bar, which clips),
   positioned fixed from the button rect by JS. */
.tfb-heading-menu {
    position: fixed;
    min-width: 150px;
    background-color: var(--menu-background-color);
    border: 1px solid var(--no-focus-color);
    border-radius: 4px;
    box-shadow: var(--shadow);
    padding: 4px;
    z-index: 9100;
}
.tfb-heading-menu .tfb-heading-item {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    color: var(--default-text-color);
    padding: 10px 12px;
    border-radius: 2px;
    cursor: pointer;
    font-size: 16px;
    white-space: nowrap;
}
.tfb-heading-menu .tfb-heading-item:active {
    background-color: var(--menu-hover);
}
.tfb-heading-menu .tfb-heading-item-h1 { font-size: 22px; font-weight: 700; }
.tfb-heading-menu .tfb-heading-item-h2 { font-size: 20px; font-weight: 700; }
.tfb-heading-menu .tfb-heading-item-h3 { font-size: 18px; font-weight: 600; }
.tfb-heading-menu .tfb-heading-item-h4 { font-size: 17px; font-weight: 600; }
.tfb-heading-menu .tfb-heading-item-h5 { font-size: 16px; font-weight: 600; }
.tfb-heading-menu .tfb-heading-item-h6 { font-size: 15px; font-weight: 600; }
/* Heading options reuse the desktop toolbar icons (h1.svg…h6.svg). The menu
   lives on document.body, outside #touch-format-bar, so it can't inherit the
   .tfb-icon rule — theme the icon here with the same filter. */
.tfb-heading-menu .tfb-heading-item .tfb-heading-icn {
    height: 24px;
    vertical-align: middle;
    filter: var(--tooltip-icon-filter);
    pointer-events: none;
}

/* Overflow (⋮) menu: same body-anchored mechanism as the heading menu, but
   right-aligned (the button sits at the bar's right edge). Each item has a
   leading check column, shown only on the active one (the direction pair). */
.tfb-overflow-menu {
    position: fixed;
    min-width: 200px;
    background-color: var(--menu-background-color);
    border: 1px solid var(--no-focus-color);
    border-radius: 4px;
    box-shadow: var(--shadow);
    padding: 4px;
    z-index: 9100;
}
.tfb-overflow-menu .tfb-overflow-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    color: var(--default-text-color);
    padding: 10px 12px;
    border-radius: 2px;
    cursor: pointer;
    font-size: 16px;
    white-space: nowrap;
}
.tfb-overflow-menu .tfb-overflow-item:active {
    background-color: var(--menu-hover);
}
.tfb-overflow-menu .tfb-overflow-check {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    opacity: 0; /* only the active item shows the check */
}
.tfb-overflow-menu .tfb-overflow-item.tfb-overflow-active .tfb-overflow-check {
    opacity: 1;
}
.tfb-overflow-menu .tfb-overflow-sep {
    height: 1px;
    background-color: var(--no-focus-color);
    margin: 4px 6px;
}

/* Context menu (Capacitor). Same chrome as the bar's overflow menu — it reuses
   that class — plus what a pointer-anchored, mouse-driven, much longer menu
   needs. Up to 15 items, so it must scroll rather than spill off-screen. */
.cw-context-menu {
    max-height: calc(100vh - 16px);
    overflow-y: auto;
}
/* The bar's menu is tap-only; this one is driven by a mouse or trackpad. Gate
   the hover tint on a real hover-capable pointer so a touch tap doesn't leave a
   stuck highlight behind. */
@media (hover: hover) and (pointer: fine) {
    .cw-context-menu .tfb-overflow-item:hover:not(:disabled) {
        background-color: var(--menu-hover);
    }
}
.cw-context-menu .tfb-overflow-item:disabled {
    opacity: 0.35;
    cursor: default;
}
/* Keyboard navigation: focus stays in the editor, so the active item is marked
   with a class rather than :focus (see popup_menu.js). */
.cw-context-menu .tfb-overflow-item.cwpm-active {
    background-color: var(--menu-hover);
}
/* Touch: the same menu as one row, like Android's own selection toolbar (the
   display:flex is set inline by popup_menu.js, which toggles the menu). */
.cw-context-menu.cwpm-bar {
    flex-direction: row;
    align-items: stretch;
    min-width: 0;
    max-width: calc(100vw - 16px);
    overflow-x: auto;
    overflow-y: hidden;
}
.cw-context-menu.cwpm-bar .tfb-overflow-item {
    width: auto;
    padding: 10px 14px;
}
.cw-context-menu.cwpm-bar .tfb-overflow-text {
    display: inline-flex;
    align-items: center;
}

#options,
.side_window {
    pointer-events: all;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;

    position: absolute;
    /* Never demand more height than there is: a phone in landscape is shorter
       than this menu (measured on a Pixel 10: a 562px menu in a 363px viewport),
       and a plain min-height left the overflow unreachable — the word counter
       docks into the menu when it opens, so its target and settings buttons sat
       below the fold with no way to scroll to them. */
    min-height: min(550px, 100%);
    overflow-y: auto;
    top: 0px;
    left: -320px;
    bottom: 0px;
    background-color: var(--menu-background-color);
    width: 320px;
    z-index: -1;
    /* Hide while closed so rapid resize can't briefly reveal the menu's
       content (the `left: -100vw` / `100vw` values lag the viewport for a
       frame or two during fast drags, and the transition on `.side_window`
       in narrow mode amplifies the gap). The 0.18s delay matches the slide
       duration so the menu stays visible long enough for the wrapper to
       cover it on close, then snaps to hidden. */
    visibility: hidden;
    transition: background-color 0.2s ease-out, visibility 0s linear 0.18s;
}

#options {
    padding-top: 12px;
}

/* Short viewport — a phone in landscape (measured on a Pixel 10: 363 CSS px).
   The menu items need ~304px and the word counter, which docks into the menu
   while it is open, another ~94: they do not both fit pinned. Let the counter
   flow after the last item instead of staying anchored to the menu's bottom
   edge, where it landed on top of "Preferences", and let the menu scroll. */
@media (max-height: 520px) {
    #options #countdiv {
        position: static;
        margin: 18px 0 12px 12px;
    }
}
#options.open {
    left: 0;
    visibility: visible;
    /* No visibility delay when opening — show immediately, then the wrapper
       slides off to reveal. */
    transition: background-color 0.2s ease-out, visibility 0s;
}
#openrecent_window {
    padding-top: 12px;
    color:var(--default-text-color);
    font-size: 14px;
}

.no_full_screen #options {
    padding-top: 36px;
}

.no_full_screen .side_window {
    padding-top: 18px;
}

body.opendyslexicfont #options,
body.opendyslexicfont .side_window,
body.opendyslexicfont #blogpublish_window {
    font-family: 'OpenDyslexic';
    font-size: 14px;
}

.side_window {
    left: 320px;
    width: 320px;
    text-align: left;
    display: none;
    border-left-style: solid;
    border-left-width: 2px;
    border-left-color: var(--menu-hover);
    overflow-y: auto;
    min-height: 300px;
    /* `visibility: hidden` is inherited from the shared `#options, .side_window`
       rule. Extend the transition list here so the delayed visibility flip
       survives this rule overriding the shared `transition`. */
    transition: background-color 0.2s ease-out, border-left-color 0.2s ease-out, visibility 0s linear 0.18s;
}
.side_window.open {
    display: block;
    visibility: visible;
    transition: background-color 0.2s ease-out, border-left-color 0.2s ease-out, visibility 0s;
}

/* Back-arrow header — only visible in narrow mode (see @media below).
   JS injects this empty element as the first child of each side_window
   during `remakePreferencesOptions` / `remakeOpenRecentOptions`; the click
   handler calls the corresponding hide function. The arrow itself is the
   `arrow_left.svg` masked with the theme's text color via a ::before
   pseudo-element, so the markup stays semantic and theming is automatic. */
.menuback {
    display: none;
    align-items: center;
    height: 36px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    cursor: pointer;
    user-select: none;
    /* Pin to the top of the scrolling side_window so the back arrow stays
       reachable while the rest of the menu scrolls underneath. Full-width
       opaque background covers the content behind it; `top: 0` aligns with
       the side_window's content edge (i.e., immediately below its
       padding-top), and `z-index: 2` keeps it above siblings. */
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: var(--menu-background-color);
}
.menuback::before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    -webkit-mask: url(arrow_left.svg) no-repeat center;
    mask: url(arrow_left.svg) no-repeat center;
    background-color: var(--default-text-color);
    opacity: 0.75;
}
.menuback:hover::before {
    opacity: 1;
}

/* === Narrow-window layout (≤ 699px) ===
   Main menu and submenus take the full viewport. The submenu covers the
   main menu (z-index) and slides in from the right via CSS transition on
   `left`. The `.menuback` chevron in each submenu acts as "back to main
   menu". The wrapper is pushed entirely off-screen to the right while any
   menu is open. */
@media (max-width: 699px) {
    #options {
        width: 100%;
        left: -100vw;
    }
    .side_window {
        display: block;
        left: 100vw;
        width: 100%;
        z-index: 1;
        border-left: none;
        transition: left 0.18s ease-out, background-color 0.2s ease-out, visibility 0s linear 0.18s;
    }
    .side_window.open {
        left: 0;
        transition: left 0.18s ease-out, background-color 0.2s ease-out, visibility 0s;
    }
    /* The sticky `.menuback` (top: 0) anchors at the content-box top, i.e.
       _after_ any `padding-top`. With the side_windows' default 12/18px
       padding-top, scrolled items would render in that gap above the
       menuback. In narrow mode the menuback IS the visual header, so the
       padding is no longer needed. */
    #preferences_window,
    #openrecent_window {
        padding-top: 0;
    }
    #contentWrappers.open-main,
    #contentWrappers.open-sub {
        left: 100vw;
    }
    /* Narrow widths: the docked word counter already spans almost the full
       width, so make it a clean full-width strip aligned with the format bar
       below it (bottom/z-index keep coming from the base .tfb-visible rule). */
    body.touch-mode.tfb-visible #countdiv.alwaysvisible {
        left: 0;
        right: 0;
        width: auto;
        border-radius: 0;
        text-align: right;
        padding: 2px 12px;
    }
    #easyclosemenu {
        display: none;
    }
    .menuback {
        display: flex;
    }
    /* On macOS the traffic-light controls sit in the top-left corner of the
       window when not in fullscreen — exactly where the narrow-mode back
       arrow lives. A margin (not padding) pushes the arrow below them while
       keeping the gap out of the clickable region.

       `margin-top` alone is not enough, because it only holds while the header
       is at its flow position. Once the panel scrolls and the header sticks,
       `top: 0` pins its BORDER box to the scrollport edge and the margin is
       discarded — measured in Electron: 36px unscrolled, 0px after scrolling,
       i.e. straight back under the traffic lights. Pinning the stuck state at
       the same 36px keeps the arrow reachable at any scroll offset. */
    .darwin.no_full_screen .menuback {
        margin-top: 36px;
        top: 36px;
        padding-top: 4px;
    }
    /* The 36px of clearance is margin, so rows scrolling past would show
       through it beside the traffic lights. Cap it with an opaque block that
       travels with the sticky header. `pointer-events: none` keeps the strip
       out of the click target, so clicking next to the lights cannot close
       the panel. */
    .darwin.no_full_screen .menuback::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: -36px;
        height: 36px;
        background-color: var(--menu-background-color);
        pointer-events: none;
    }
    /* On narrow/mobile widths the 48px lateral padding wastes too much of the
       text column, so tighten it to 18px — except in prnarrow, which keeps the
       roomy 48px margins on purpose. */
    .main:not(.prnarrow) .ProseMirror {
        padding-left: 18px;
        padding-right: 18px;
        --list-page-margin: 18px;
    }
}

.file_title {
    font-size: 15px;
    word-wrap: break-word;
    color: rgb(50, 50, 50);
    margin-bottom: 30px;
    max-width: 414px;
}

.hasbeensaved,
.hasbeennotsaved {
    margin-bottom: 20px;
    display: inline-block;
    border-radius: 2px;
    padding-left: 7px;
    padding-right: 7px;
    color: rgba(255, 255, 255, 0.9);
    text-transform: lowercase;
}

.hasbeensaved {
    background-color: rgb(0, 179, 114);
}

.hasbeennotsaved {
    background-color: rgb(50, 50, 50);
}

.inmac {
    display: none;
}

.darwin .inmac {
    display: inline;
}

.darwin .inwin {
    display: none;
}

#appName {
    text-transform: uppercase;
}

.option {
    position: relative;
    font-size: 14px;
    display: block;
    padding: 8px;
    padding-top: 4px;
    padding-bottom: 4px;
    margin: 12px;
    text-align: left;
    margin-top: 0px;
    margin-bottom: 0px;
    text-decoration: none;
    color: var(--default-text-color);
    min-height: 26px;
    text-shadow: none;
    outline: none;
    transition: background-color 0.25s ease-out;
    border-radius: 4px;
}

.icnmask {
    display: inline-block;
    width: 22px;
    height: 22px;
    background-color: var(--default-text-color);
   
    vertical-align: -30%;
    margin-right: 10px;
}

/* Touch sizing: 44px menu rows (Apple/Material minimum, also the spec's stated
   target) with flex-centered icon+label, plus a larger submenu back target. */
body.touch-mode .option {
    font-size: 15px;
    min-height: 28px;
    padding-top: 10px;
    padding-bottom: 10px;
    display: flex;
    align-items: center;
}
body.touch-mode .icnmask {
    width: 26px;
    height: 26px;
    vertical-align: middle;
}
/* Checkbox rows have no inline icon (the check mark is absolutely positioned at
   the top-left), so the flex `align-items: center` only centers the label —
   leaving the check mark stranded at the top when the label wraps to two lines.
   Fall back to the desktop block flow so label and check mark both hug the top. */
body.touch-mode .option.settings_item { display: block; }
/* Recent-file rows stack a name span over a path span (both display:block), so
   the menu `display: flex` would lay them side by side on one line. Keep them in
   block flow so name and path stay on their own lines, as on desktop. */
body.touch-mode .option:has(> .recent_name_file) { display: block; }
/* The version sits after the app name separated only by a whitespace text node.
   Flex collapses whitespace between items, so on desktop it reads "Pro 3.0.5"
   but in touch mode the gap vanishes ("Pro3.0.5"). Give it an explicit margin. */
body.touch-mode #spanappversion { margin-left: 0.4em; }
body.touch-mode .menuback { height: 48px; padding-top: 0; }
body.touch-mode .menuback::before { width: 22px; height: 22px; }

.option img.mbg {
    width: 30px;
}

/* Checkboxes and radio buttons: one box for the preferences (the Checkbox
   rows, whose box is a .check_box span) and for the dialogs (a real <input>
   inside a label.dialog_choice), which used to be a flat PNG square on one side
   and the browser's own controls on the other. Rounded and tinted like the
   segmented selectors (tokens on .prSelector), with a border strong enough to
   read as a control; chosen, it fills with the app's accent, as the main
   buttons do. A radio button is the same box made round, with a dot for the
   check mark. */
.check_box,
.dialog_choice input[type="checkbox"],
.dialog_choice input[type="radio"] {
    --check-border: color-mix(in srgb, var(--default-text-color) 45%, transparent);
    --check-border-hover: color-mix(in srgb, var(--default-text-color) 70%, transparent);
    position: absolute;
    left: 0;
    width: 18px;
    height: 18px;
    margin: 0;
    box-sizing: border-box;
    border: 1.5px solid var(--check-border);
    border-radius: 5px;
    background-color: var(--segmented-bg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 14px;
    transition: background-color 0.2s ease-out, border-color 0.2s ease-out;
}

.dialog_choice input[type="radio"] {
    border-radius: 50%;
}

/* The box is centred on the first line of its label, however many lines that
   wraps to: no top, so it starts where the row's text does (after a top
   padding that changes with touch mode and the screen height), then half a
   line (1lh) down, less half the box. The px values before each calc() are the
   same place for WebViews without lh. */
.option .check_box {
    display: block;
    margin-top: 3px;
    margin-top: calc(0.5lh - 9px);
}

.option_state_true .check_box,
.dialog_choice input[type="checkbox"]:checked,
.dialog_choice input[type="radio"]:checked {
    border-color: var(--main-button);
    background-color: var(--main-button);
}

.option_state_true .check_box,
.dialog_choice input[type="checkbox"]:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 7.4l2.6 2.6L11 4.4' fill='none' stroke='white' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.dialog_choice input[type="radio"]:checked {
    background-image: radial-gradient(circle, white 0 3px, transparent 3.5px);
}

@media (hover: hover) and (pointer: fine) {
    a.option:not(.option_state_true):hover .check_box,
    .dialog_choice:hover input[type="checkbox"]:not(:checked),
    .dialog_choice:hover input[type="radio"]:not(:checked) {
        border-color: var(--check-border-hover);
    }
}

/* Same 10px gap to the text as the preference rows (their 28px padding), and the
   text of a long label wraps under itself, not under the box. The box stands
   3px in to leave its focus ring room: the dialog body clips at the label's
   edge, and so does a spell-check language label (overflow: hidden, for its
   ellipsis). */
.dialog_choice {
    display: block;
    position: relative;
    padding-left: 31px;
    box-sizing: border-box;
    cursor: pointer;
}

/* The goal dialog's words / characters pair shares a line. */
.dialog_choice.uk-label {
    display: inline-block;
}

.dialog_choice input[type="checkbox"],
.dialog_choice input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    /* The label's font, so 1lh is the label's line and not the control's. */
    font: inherit;
    left: 3px;
    top: 3px;
    top: calc(0.5lh - 9px);
    cursor: pointer;
}

/* Keyboard focus: the ring goes round the box, which keeps its corners. */
.dialog_choice input[type="checkbox"]:focus-visible,
.dialog_choice input[type="radio"]:focus-visible {
    outline: 2px solid var(--focus-ring-color);
    outline-offset: 1px;
}

.suv {
    color: rgb(90, 90, 90);
    text-shadow: none;
    right: 20px;
    display: inline;
    position: absolute;
}

a.option:hover {
    background-color: var(--menu-hover);
}

.selected_option {
    background-color: var(--menu-hover);
}

.selected_option .menumsg {
    font-weight: 600;
}

a.settings_item:hover {
    background-color: transparent !important;    
}

.recent_name_file,.recent_path_file {
    display: block;
    text-overflow: ellipsis;
    overflow-x: hidden;
    white-space: nowrap;
}
.recent_path_file {
    opacity: 0.5;
    font-size: 12px;
    text-overflow: ellipsis;
    overflow-x: hidden;
    white-space: nowrap;
}

/* Second line of each entry in the document-versions list: an origin tag
   (autosave, save, external change…) followed by the date · word count. */
.version_meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}
.version_meta .recent_path_file {
    min-width: 0;
    flex: 0 1 auto;
}
.version_tag {
    flex: 0 0 auto;
    padding: 0px 8px;
    font-size: 11px;
    line-height: 17px;
    border-radius: 9px;
    border: 1px solid var(--default-text-color);
    color: var(--default-text-color);
    opacity: 0.5;
    white-space: nowrap;
    line-height: 160%;
}
/* Color-coded by origin. Mid-tone hues chosen to read on both light and dark
   themes; the colored variants drop the muting opacity so the hue shows. */
.version_tag.vt_save {
    border-color: #2e9e5b;
    color: #2e9e5b;
    background: rgba(46, 158, 91, 0.12);
    opacity: 1;
    
}
.version_tag.vt_migrated {
    border-color: #4a7fd0;
    color: #4a7fd0;
    background: rgba(74, 127, 208, 0.12);
    opacity: 1;
}
.version_tag.vt_incoming {
    border-color: #d98324;
    color: #d98324;
    background: rgba(217, 131, 36, 0.14);
    opacity: 1;
}
.version_tag.vt_overwritten {
    border-color: #d0455b;
    color: #d0455b;
    background: rgba(208, 69, 91, 0.14);
    opacity: 1;
}

#countdiv {
    color: var(--default-text-color);
    position: absolute;
    bottom: 10px;
    left: 12px;
    padding: 10px;
    text-align: left;
    display: block;
    width: 265px;
    pointer-events: none;
    z-index: -1;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    
    text-transform: lowercase;
    user-select: none;
}

#countdiv .countline {
    display: block;
}

#countdiv.alwaysvisible .countline {
    display: inline-block;
    padding-left: 12px;
    padding-right: 12px;
}

body.opendyslexicfont #countdiv {
    font-family: 'OpenDyslexic';
}

#countdiv.alwaysvisible {
    position: fixed;
    z-index: 20;
    right: 16px;
    bottom: 0px;
    left: initial;
    width: auto;
    padding: 1px;
    background-color: var(--counter-div);
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

#countdiv .settarget,
#countdiv #word_counter_config_button {
    pointer-events: all;
    background-color: var(--menu-hover);
    padding: 4px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    line-height: 0;
    vertical-align: middle;
}

#countdiv .settargeticn {
    width: 22px;
    height: 22px;
    margin: 0;
    vertical-align: middle;
}

/* Touch: bigger set-target + configure-counter icons (the 4px button padding
   then yields a ~40px finger target), matching the rest of the touch UI. */
body.touch-mode #countdiv .settargeticn {
    width: 32px;
    height: 32px;
}

.uk-input {
    outline: 0;
    border: 0;
    background-color: var(--input-uk);
    padding: 12px;
    box-sizing: border-box;
    border-radius: 2px;
    width: 100%;
    font-size: 16px;
    color: var(--default-text-color);
}

.uk-button {
    position: absolute;
    right: 12px;
    cursor: pointer;
    font-size: 16px;
    background-color: var(--main-button);
    border: 0;
    color: white;
    padding: 12px;
    padding-left: 24px;
    padding-right: 24px;
    bottom: 12px;
    border-radius: 4px;
    line-height: 100%;
}

.folderselect {
    cursor: pointer;
    font-size: 16px;
    background-color: rgb(42, 186, 255);
    border: 0;
    color: white;
    padding: 12px;
    padding-left: 24px;
    padding-right: 24px;
    bottom: 12px;
    border-radius: 4px;
    line-height: 100%;
}

.cancel-button {
    line-height: 100%;
    display: inline-block;
    background-color: var(--secondary-button);
    left: 12px;
    font-size: 16px;
    cursor: pointer;
    font-size: 16px;
    border-style: none;
    padding: 12px;
    padding-left: 24px;
    padding-right: 24px;
    bottom: 12px;
    border-radius: 4px;
    position: absolute;
    color: var(--default-text-color);
}

.uk-label {
    margin-right: 24px;
    font-size: 16px;
    margin-top: 12px;
    display: inline-block;
    color: var(--default-text-button);
}

.center_dialogwin {
    padding: 12px;
    background-color: var(--modal);
    box-shadow: var(--shadow);
    z-index: 9999;
    border-radius: 8px;
    color: var(--default-text-color);
    /* JS sets `--dlg-w` and `--dlg-h` to the dialog's preferred size in
       pixels; here we cap them at the viewport (minus a 16px safety margin
       per side) so a small app window never lets the dialog overflow.
       The margins are computed from the EFFECTIVE size so the dialog stays
       centered even when clamped. Auto-adapts on window resize without JS. */
    --dlg-eff-w: min(var(--dlg-w, 0px), calc(100vw - 32px));
    --dlg-eff-h: min(var(--dlg-h, 0px), calc(100vh - 32px));
    position: absolute;
    box-sizing: border-box;
    left: 50%;
    top: 50%;
    width: var(--dlg-eff-w);
    height: var(--dlg-eff-h);
    margin-left: calc(-1 * var(--dlg-eff-w) / 2);
    margin-top: calc(-1 * var(--dlg-eff-h) / 2);
}

.center_dialogwin pre {
    font-family: 'Inter';
    overflow-y: scroll;
    overflow-x: hidden;
    height: 350px;
    font-size: 14px;
    word-wrap: break-word;
    white-space: pre-wrap;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: rgb(41, 41, 41);
    border-top-style: solid;
    border-top-width: 1px;
    border-top-color: rgb(41, 41, 41);
    background-color: var(--background-color);
}

#countdiv.alwaysvisible .settarget {
    display: none;
}

#countdiv.alwaysvisible #word_counter_config_button {
    display: none;
}

.setgoallabel {
    color: var(--default-text-color);
    margin: 6px;
    margin-bottom: 16px;
    font-size: 16px;
}

/* The refusal under the box of the writing-goal dialog. */
.goal_status {
    margin: 8px 6px 0 6px;
    font-size: 13px;
    line-height: 1.4;
    color: #d0455b;
}

.goal_status:empty {
    display: none;
}

.of_word_target {
    opacity: 0.6;
}

.donewordtarget {
    color: rgb(42, 186, 255);
}

.main.serif * {
    font-family: 'Serif', 'Open Sans' !important;
}

body.opendyslexicfont .main.serif *,
body.opendyslexicfont .main.opensans * {
    font-family: 'OpenDyslexic' !important;
}

.main.mono * {
    font-family: 'Roboto Mono', 'Open Sans' !important;
}

body.opendyslexicfont .main.mono * {
    font-family: 'OpenDyslexicMono' !important;
}

.main.opensans * {
    font-family: 'Open Sans', 'Serif' !important;
}

.main h1 {
    font-size: 2em;
}
.main h2 {
    font-size: 1.5em;
}
.main h3 {
    font-size: 1.375em;
}
.main h4 {
    font-size: 1.250em;
}
.main h5 {
    font-size: 1.125em;
}
.main h6 {
    font-size: 1em;
}


.main h1,
.main h2,
.main h3,
.main h4,
.main h5,
.main h6 {
    font-weight: 700;
    line-height: 150%;
    white-space: pre-wrap;
    scroll-margin-top: 74px;
    margin-top: 0;
    margin-bottom: 0;
}

div.main.lineheight125 h1,
div.main.lineheight125 h2,
div.main.lineheight125 h3,
div.main.lineheight125 h4,
div.main.lineheight125 h5,
div.main.lineheight125 h6 {
    line-height: 150%;
}

div.main.lineheight15 h1,
div.main.lineheight15 h2,
div.main.lineheight15 h3,
div.main.lineheight15 h4,
div.main.lineheight15 h5,
div.main.lineheight15 h6 {
    line-height: 175%;
}

div.main.lineheight175 h1,
div.main.lineheight175 h2,
div.main.lineheight175 h3,
div.main.lineheight175 h4,
div.main.lineheight175 h5,
div.main.lineheight175 h6 {
    line-height: 200%;
}

div.main.lineheight2 h1,
div.main.lineheight2 h2,
div.main.lineheight2 h3,
div.main.lineheight2 h4,
div.main.lineheight2 h5,
div.main.lineheight2 h6 {
    line-height: 225%;
}

.main.mono a,
.main.mono a:visited,
.main.mono a:active {
    background-position: 0 95%;
}

body.opendyslexicfont .main.mono a,
body.opendyslexicfont .main.mono a:visited,
body.opendyslexicfont .main.mono a:active {
    background-position: 0 90%;
}

.main code {
    font-family: inherit;
    display: inline;
}

.main pre code {
    font-family: 'Roboto Mono', monospace !important;
}

.main pre {
    background-color: var(--modal);
    font-family: 'Roboto Mono', monospace !important;
    padding: 10px;
    border-style: solid;
    border-width: 1px;
    overflow-x: auto;
    border-color: var(--modal);
    transition: border-color 0.25s ease-out, background-color 0.25s ease-out;
}

a.searchb {
    display: block;
    float: left;
    margin-top: 3px;
}

a.searchb img {
    padding: 6px;
    vertical-align: middle;
}

.mbg {
    margin: 0px;
    margin-top: -3px;
    padding-left: 0px;
    cursor: pointer;
    border-radius: 2px;
}

.main div {
    display: inline;
}

.btdisabled {
    opacity: 0.3;
    cursor: default !important;
}

.editor_tooltip ul li a.btdisabled:hover {
    background-color: unset;
}

.prevSelector {
    display: block;
    color: var(--default-text-color);
   
    padding-left: 10px;
}

/* Preference selectors (theme, text width, font size, caret shape, line
   spacing, text direction) are segmented controls: a rounded track with the
   chosen option lifted onto a pill. The track and hover tints mix the text
   colour into transparency, so they read on every theme — including a custom
   one, whose pane colour is only known at runtime — without a token per theme.
   Light themes lift the pill onto --modal (white, or Dune's paper); on the dark
   ones --modal is darker than the track, so the pill is a lighter tint instead.
   The preference dropdowns (select.selectdropdown), the checkboxes and the radio
   buttons share the track colours so they sit with the selectors around them. */
.prSelector,
select.selectdropdown,
.check_box,
.dialog_choice input[type="checkbox"],
.dialog_choice input[type="radio"] {
    --segmented-bg: color-mix(in srgb, var(--default-text-color) 8%, transparent);
    --segmented-hover: color-mix(in srgb, var(--default-text-color) 7%, transparent);
    --segmented-thumb: var(--modal);
    --segmented-thumb-shadow: 0 0 0 0.5px rgb(0 0 0 / 8%), 0 1px 3px rgb(0 0 0 / 12%);
}

.prSelector {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin: 10px;
    background-color: var(--segmented-bg);
    border-radius: 9px;
    padding: 3px;
    user-select: none;
}

body.darkmode .prSelector,
body.oldschool .prSelector {
    --segmented-thumb: color-mix(in srgb, var(--default-text-color) 16%, transparent);
    --segmented-thumb-shadow: 0 1px 2px rgb(0 0 0 / 35%);
}

/* WebViews older than Chromium 111 have no color-mix(): fall back to the flat
   selector colours so the track and the pill still show. */
@supports not (color: color-mix(in srgb, red, blue)) {
    .prSelector,
    select.selectdropdown,
    body.darkmode .prSelector,
    body.oldschool .prSelector {
        --segmented-bg: var(--selector-background);
        --segmented-hover: var(--menu-hover);
        --segmented-thumb: var(--modal);
    }
    .check_box,
    .dialog_choice input[type="checkbox"],
    .dialog_choice input[type="radio"] {
        --segmented-bg: transparent;
        --check-border: var(--scroll-bar);
        --check-border-hover: var(--scroll-bar-hover);
    }
}

.numberinputbutton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 30px;
    border-radius: 6px;
    box-sizing: border-box;
    opacity: 0.75;
    transition: background-color 0.2s ease-out, box-shadow 0.2s ease-out, opacity 0.2s ease-out;
}

/* The font-size buttons are actions, not options: nothing stays selected, so
   the pill only shows while one is pressed. */
.prSelector .numberinputbutton:active {
    background-color: var(--segmented-thumb);
    box-shadow: var(--segmented-thumb-shadow);
    opacity: 1;
    transition: none;
}

.numberinputbutton .numinputicn {
    width: 18px;
    height: 18px;
    margin: 0;
}

.prSelector ul {
    display: flex;
    gap: 2px;
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}

.prSelector ul li,
.prSelector .prSegment {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    box-sizing: border-box;
    height: 30px;
    min-width: 44px;
    padding: 0 4px;
    font-weight: 400;
    opacity: 0.65;
    transition: background-color 0.2s ease-out, box-shadow 0.2s ease-out, opacity 0.2s ease-out;
}

/* The custom theme swatch must show its real colour, so it is never dimmed. */
.prSelector .prSegment {
    opacity: 1;
}

/* Hover tint only for a real hover-capable pointer, so a touch tap doesn't
   leave a stuck highlight behind (same gate as the context menu). */
@media (hover: hover) and (pointer: fine) {
    .prSelector ul li:hover,
    .prSelector .prSegment:hover,
    .numberinputbutton:hover {
        background-color: var(--segmented-hover);
        opacity: 1;
    }
}

.prSelector ul li svg {
    display: block;
}

.prSelector ul li svg circle,
.prSelector ul li svg rect,
.prSelector ul li svg path,
.prSelector ul li svg text,
.prSelector div svg circle,
.prSelector div svg rect,
.prSelector div svg path,
.prSelector div svg text,
.prSelector div svg polygon {
    fill: var(--default-text-color)
}

.prSelector .diricn {
    width: 24px;
    height: 24px;
    margin: 0;
    vertical-align: middle;
}

.sliderSelector svg circle,
.sliderSelector svg rect,
.sliderSelector svg path,
.sliderSelector svg text,
.sliderSelector svg circle,
.sliderSelector svg rect,
.sliderSelector svg path,
.sliderSelector svg text,
.sliderSelector svg polygon {
    fill: var(--default-text-color)
}

.sliderSelector .slidericn {
    width: 22px;
    height: 22px;
    margin: 0 6px;
    vertical-align: middle;
}

.prSelector ul li.prSelected,
.prSelector .prSegment.prSelected {
    background-color: var(--segmented-thumb);
    box-shadow: var(--segmented-thumb-shadow);
    font-weight: 500;
    opacity: 1;
}

/* Touch: the preference selector cells (incl. the selected one) and the
   font-size −/restore/+ buttons are 30px tall — too small for a finger. Grow
   them to 38px. Gated on body.touch-mode so desktop keeps the compact size. */
body.touch-mode .prSelector ul li,
body.touch-mode .prSelector .prSegment {
    height: 38px;
    min-width: 50px;
}
body.touch-mode .numberinputbutton {
    width: 52px;
    height: 38px;
}
body.touch-mode .numberinputbutton .numinputicn {
    width: 22px;
    height: 22px;
}
/* Above the narrow breakpoint the preferences pane is a fixed 320px side panel
   (not full-width), so the 50px touch cells × 6 items (theme + text-width
   selectors) overflow it and the last cell wraps. Trim the cell back to the
   44px desktop width there — still a comfortable finger target — so all six
   fit. Narrow/full-width mode keeps the roomier 50px cells. */
@media only screen and (min-width:700px) {
    body.touch-mode .prSelector ul li,
    body.touch-mode .prSelector .prSegment { min-width: 44px; }
}

.prTitle {
    display: block;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: var(--menu-hover);
    color: var(--default-text-color);
    opacity: 0.8;
    text-align: left;
    margin-left: 10px;
    margin-top: 24px;
    text-transform: uppercase;
    margin-bottom: 12px;
    font-weight: 600;
}

.nomarginsbetweenP .main ul,
.nomarginsbetweenP .main ol {
    margin-top: 0px;
    margin-bottom: 0px;
    transition: margin-top 0.1s, margin-bottom 0.1s;
}

#tooltip_make_links_openable {
    display: block;
    position: fixed;
    top: 100px;
    left: 300px;
    background-color: rgba(42, 186, 255, 0.95);
    color: rgb(255, 255, 255);
    font-size: 12px;
    border-radius: 18px;
    opacity: 0;
    display: none;
    padding: 0px;
    padding-left: 8px;
    padding-right: 8px;
    line-height: 140%;
    height: 18px;
    white-space: nowrap;
}
#tooltip_make_links_openable_text {
    display: inline-block;
    max-width: 300px;
    overflow-x: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    
}

#tooltip_make_links_openable svg {
    vertical-align: sub;
}

#tooltip_make_links_openable svg path {
    fill: rgb(255, 255, 255);
}

#tooltip_make_links_openable.tooltip_make_links_openable_show_doc {
    background-color: #b73a64;
}
#tooltip_make_links_openable.tooltip_make_links_openable_show_doc #tooltip_make_links_openable_text {
    direction: rtl;
}

.colorpicker {
    width: 24px;
    display: inline-block;
    margin-top: 10px;
    margin-left: 10px;
    height: 24px;
    border-radius: 2px;
}

.colorpicker.selected_colorpicker {
    background-image: url(check_color.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 16px;
}

input[type="color"].selected_colorpicker::after {
    content: url(check_color.png);
    position: absolute;
    left: 2px;
    top: 1px;
    mix-blend-mode: difference;
    transform: scale(0.7);
}

.default_colorpicker {
    background-color: rgb(100, 100, 100);
}

.darkmode .default_colorpicker {
    background-color: rgb(200, 200, 200);
}

.darkmode .colorpicker.default_colorpicker.selected_colorpicker {
    background-image: url(check_color_dark.png);
}

.blue_colorpicker {
    background-color: rgb(42, 186, 255);
}

.pink_colorpicker {
    background-color: #EC407A;
}

.green_colorpicker {
    background-color: #4CAF50;
}

.yellow_colorpicker {
    background-color: #F2C94C;
}

.red_colorpicker {
    background-color: #EB5757;
}

.orange_colorpicker {
    background-color: #FF5722;
}

.dunemode #textcolorselector .orange_colorpicker {
    background-color: #7F6743;
}

.dunemode #textcolorselector .green_colorpicker {
    background-color: #364c37;
    ;
}

.dunemode #textcolorselector .blue_colorpicker {
    background-color: rgb(18 73 97);
}

.oldschool #textcolorselector .pink_colorpicker {
    background-color: #eae417;
}


/* Animation keyframes - you need to add prefixes */

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}


/* Loading animation container */

.loading {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 28px;
    height: 28px;
    margin: -14px 0 0 -14px;
}


/* Spinning circle (inner circle) */

.loading .maskedCircle {
    width: 20px;
    height: 20px;
    border-radius: 12px;
    border: 3px solid white;
}


/* Spinning circle mask */

.loading .mask {
    width: 12px;
    height: 12px;
    overflow: hidden;
}


/* Spinner */

.loading .spinner {
    position: absolute;
    left: 1px;
    top: 1px;
    width: 26px;
    height: 26px;
    animation: spin 1s infinite linear;
}

.shortcuts {
    text-transform: uppercase;
    position: absolute;
    right: 12px;
    opacity: 0.33;
    top: 50%;
    margin-top: -11px;
    font-size: 12px;
}

/* The menu's keyboard accelerators only make sense with a keyboard. On native
   Android (body.platform-android, set in calmly.js) that means a Chromebook:
   ARC/ChromeOS always has one (body.chromeos), phones/tablets don't. So hide
   them on Android unless it's a Chromebook. Desktop/web never get
   .platform-android, so they keep showing shortcuts. */
body.platform-android:not(.chromeos) .shortcuts {
    display: none;
}

#jobdone {
    display: block;
    position: fixed;
    background-color: rgb(42, 186, 255);
    color: white;
    padding: 4px;
    padding-left: 10px;
    padding-right: 10px;
    right: 17px;
    bottom: 10px;
    z-index: 999;
    font-size: 14px;
    font-family: 'Inter';
    opacity: 0.5;
    border-radius: 4px;
}

#search_box {
    position: fixed;
    top: 44px;
    right: 12px;
    background-color: var(--modal);
    box-shadow: var(--shadow);
}

#search_box .search_row {
    height: 44px;
    white-space: nowrap;
}

#search_box .search_replace_row {
    display: none;
}

#search_box.search_expanded .search_replace_row {
    display: block;
}

#search_toggle {
    display: inline-block;
    vertical-align: top;
    padding: 12px;
    box-sizing: content-box;
    width: 12px;
    transform: rotate(90deg);
    transition: transform 0.15s ease;
}

#search_toggle path {
    fill: var(--default-text-color);
}

#search_box.search_expanded #search_toggle {
    transform: rotate(180deg);
}

.search_toggle_spacer {
    display: inline-block;
    vertical-align: top;
    width: 36px;
    height: 44px;
}

#search_box input {
    border: 0;
    box-sizing: border-box;
    padding: 12px;
    padding-top: 12px;
    padding-bottom: 12px;
    margin-top: 2px;
    font-family: 'Inter';
    vertical-align: top;
    background-color: var(--background-color);
    color: var(--default-text-color);
}

#search_box input:focus {
    outline: none;
}

#search_counter {
    display: inline-block;
    font-family: 'Inter';
    font-size: 12px;
    vertical-align: top;
    text-align: center;
    margin-top: 12px;
    width: 64px;
    color: rgb(165 165 165);
}

#search_box .search_buttons {
    display: inline-block;
    height: 44px;
}

#search_box .search_buttons svg {
    padding: 12px;
    box-sizing: content-box;
    width: 12px;
    margin: 0px;
}

#search_box .search_buttons svg path {
    fill: var(--default-text-color);
}

#search_box .search_replace_buttons {
    padding-right: 8px;
}

.search_replace_btn {
    display: inline-block;
    vertical-align: top;
    margin-top: 4px;
    margin-left: 4px;
    padding: 5px 10px;
    font-family: 'Inter';
    font-size: 12px;
    color: var(--default-text-color);
    border-radius: 3px;
    cursor: pointer;
    user-select: none;
}

.search_replace_btn:hover {
    background-color: rgba(127, 127, 127, 0.18);
}

.search_replace_btn.disabled {
    opacity: 0.4;
    pointer-events: none;
}

.searchResult {
    background-color: rgb(0, 0, 0, 0.4);
    color: white;
}

.darkmode .searchResult {
    background-color: rgb(250, 250, 250, 0.4);
    color: black;
}

/* Narrow viewport (phones): the search box is anchored only by `right`, so on a
   narrow screen its left edge — and the find/replace inputs — push off-screen.
   Anchor both edges and lay each visible row out as flex so the inputs absorb the
   leftover width while the toggle, counter and buttons keep their tap targets.
   Placed after the base #search_box rules so it wins on source order (the
   expanded-replace-row `display` rule has equal specificity). */
@media (max-width: 699px) {
    #search_box {
        left: 12px;
        right: 12px;
    }
    #search_box .search_find_row,
    #search_box.search_expanded .search_replace_row {
        display: flex;
        align-items: center;
    }
    #search_box .search_row > input {
        flex: 1 1 auto;
        min-width: 0;
        margin-top: 0;
    }
    #search_box #search_toggle,
    #search_box .search_toggle_spacer,
    #search_box #search_counter,
    #search_box .search_buttons {
        flex: 0 0 auto;
    }
    #search_box #search_counter {
        margin-top: 0;
    }
    /* Align the replace input's right edge with the find input's: the find row
       reserves counter (64px) + 3 nav buttons (108px) = 172px to the right of its
       input, so reserve the same beside the replace buttons. min-width keeps the
       replace input from ever growing wider than the find input. */
    #search_box .search_replace_buttons {
        box-sizing: border-box;
        min-width: 172px;
        text-align: right;
    }
}

.current_search_element {
    background-color: rgb(0, 0, 0, 0.95);
}

.darkmode .current_search_element {
    background-color: rgb(250, 250, 250, 0.95);
}

#spanappversion {
    opacity: 0.3;
    vertical-align: -6%;
}

.window-controls-container {
    display: none;
    flex-grow: 0;
    flex-shrink: 0;
    text-align: center;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 9999;
    -webkit-app-region: no-drag;
    height: 36px;
    margin-left: 5px;
}

.darwin .window-controls-container {
    display: none !important;
}

.cet-windows .resizer,
.cet-linux .resizer {
    -webkit-app-region: no-drag;
    position: absolute;
}

.cet-windows .resizer.top,
.cet-linux .resizer.top {
    top: 0;
    width: 100%;
    height: 6px;
}

.cet-windows .resizer.left,
.cet-linux .resizer.left {
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
}

.window-controls-container .window-icon-bg {
    display: inline-block;
    -webkit-app-region: no-drag;
    height: 100%;
    width: 46px;
}

.window-controls-container .window-icon-bg .window-icon {
    height: 100%;
    width: 100%;
    -webkit-mask-size: 23.1%;
    mask-size: 23.1%;
}

.window-controls-container .window-icon-bg .window-icon.window-close {
    display: block;
    -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg width='11' height='11' viewBox='0 0 11 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.279 5.5L11 10.221l-.779.779L5.5 6.279.779 11 0 10.221 4.721 5.5 0 .779.779 0 5.5 4.721 10.221 0 11 .779 6.279 5.5z' fill='%23000'/%3E%3C/svg%3E") no-repeat 50% 50%;
    mask: url("data:image/svg+xml;charset=utf-8,%3Csvg width='11' height='11' viewBox='0 0 11 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.279 5.5L11 10.221l-.779.779L5.5 6.279.779 11 0 10.221 4.721 5.5 0 .779.779 0 5.5 4.721 10.221 0 11 .779 6.279 5.5z' fill='%23000'/%3E%3C/svg%3E") no-repeat 50% 50%;
}

.window-controls-container .window-icon-bg .window-icon.window-close:hover {
    background-color: #ffffff !important;
}

.window-controls-container .window-icon-bg .window-icon.window-unmaximize {
    display: block;
    -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg width='11' height='11' viewBox='0 0 11 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 8.798H8.798V11H0V2.202h2.202V0H11v8.798zm-3.298-5.5h-6.6v6.6h6.6v-6.6zM9.9 1.1H3.298v1.101h5.5v5.5h1.1v-6.6z' fill='%23000'/%3E%3C/svg%3E") no-repeat 50% 50%;
    mask: url("data:image/svg+xml;charset=utf-8,%3Csvg width='11' height='11' viewBox='0 0 11 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 8.798H8.798V11H0V2.202h2.202V0H11v8.798zm-3.298-5.5h-6.6v6.6h6.6v-6.6zM9.9 1.1H3.298v1.101h5.5v5.5h1.1v-6.6z' fill='%23000'/%3E%3C/svg%3E") no-repeat 50% 50%;
}

.window-controls-container .window-icon-bg .window-icon.window-maximize {
    display: block;
    -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg width='11' height='11' viewBox='0 0 11 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 0v11H0V0h11zM9.899 1.101H1.1V9.9h8.8V1.1z' fill='%23000'/%3E%3C/svg%3E") no-repeat 50% 50%;
    mask: url("data:image/svg+xml;charset=utf-8,%3Csvg width='11' height='11' viewBox='0 0 11 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 0v11H0V0h11zM9.899 1.101H1.1V9.9h8.8V1.1z' fill='%23000'/%3E%3C/svg%3E") no-repeat 50% 50%;
}

.window-controls-container .window-icon-bg .window-icon.window-minimize {
    display: block;
    -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg width='11' height='11' viewBox='0 0 11 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 4.399V5.5H0V4.399h11z' fill='%23000'/%3E%3C/svg%3E") no-repeat 50% 50%;
    mask: url("data:image/svg+xml;charset=utf-8,%3Csvg width='11' height='11' viewBox='0 0 11 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 4.399V5.5H0V4.399h11z' fill='%23000'/%3E%3C/svg%3E") no-repeat 50% 50%;
}

.window-controls-container .window-icon-bg.window-close-bg:hover {
    background-color: rgba(232, 17, 35, 0.9) !important;
}

.window-controls-container .window-icon-bg.inactive {
    background-color: transparent !important;
}

.window-controls-container .window-icon-bg.inactive .window-icon {
    opacity: .4;
}

.window-controls-container .window-icon {
    background-color: #333333;
}

.darkmode .window-controls-container .window-icon,
.oldschool .window-controls-container .window-icon {
    background-color: #eeeeee;
}

.inactive .window-controls-container .window-icon {
    opacity: .7;
}

.window-controls-container .window-icon-bg:not(.inactive):hover {
    background-color: rgba(0, 0, 0, .1);
}

.darkmode .window-controls-container .window-icon-bg:not(.inactive):hover,
.oldschool .window-controls-container .window-icon-bg:not(.inactive):hover {
    background-color: rgba(255, 255, 255, .1);
}
.boxscroll {
        display: block;
    overflow-y: auto;
    border-radius: 6px;
    padding: 6px;
    box-sizing: border-box;
    height: 412px;
    max-height: calc(100vh - 150px);
    background-color: var(--background-color);
}
.pre_proceed {
    /* Cap the content to the dialog's own effective height (set by
       .center_dialogwin) minus the absolutely-positioned 48px button bar and
       the 12px box padding — NOT to 100vh, which let a tall body (e.g. the
       Support dialog) overflow a shorter, height-clamped box on mobile.
       The extra 16px leaves a visual gap between the (scrolled) text and the
       OK/Cancel button bar instead of the text butting right up against it. */
    max-height: calc(var(--dlg-eff-h, calc(100vh - 32px)) - 76px);
    overflow-y: auto;
}
.titleboxscroll {
    font-size: 15px;
    margin-top: 0px;
    margin-bottom: 12px;
}
#select_language_box label {
    display: block;
    width: 100%;
    font-size: 15px;
    font-family: 'Roboto mono';
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Row that pairs a checkbox with its three-dots action button. The button is
   absolutely positioned, so this wrapper is its positioning context. It carries
   the checkbox row's horizontal margin while the inner .option drops its own, so
   the result is pixel-identical to when the button lived inside the <a>. */
.settings_item_action_row {
    position: relative;
    margin-left: 12px;
    margin-right: 12px;
}

.option.in_action_row {
    margin-left: 0;
    margin-right: 0;
    /* The absolutely-positioned .donnerbutton intrudes ~28px into the row's
       right edge; reserve that width so long labels (de, fr) wrap instead of
       sliding under the button. */
    padding-right: 36px;
}

.donnerbutton {
    position: absolute;
    right: -4px;
    width: 18px;
    height: 18px;
    top: 50%;
    margin-top: -15px;
    padding: 6px;
    padding-left: 8px;
    border-radius: 4px;
}

.donnerbutton:hover {
    background-color: var(--menu-hover);
}

.donnerbutton circle {
    fill: var(--default-text-color);
}

select {
    -webkit-appearance: none;
    appearance: none;
    height: 39px;
    font-weight: 400;
    margin-left: 8px;
    padding-left: 8px;
    margin-bottom: 16px;
    border: none;
    background-color: transparent;
    min-width: 46px;
    background-image: url(dropdown.svg);
    background-repeat: no-repeat;
    background-position: right 8px center;
    outline-color: rgb(42, 186, 255);
    background-size: 16px;
}

option {
    background-color: var(--modal);
}

select {
    color: var(--default-text-color);
}

#shortcuts {
    display: none;
    width: 492px;
    position: fixed;
    margin-left: -246px;
    left: 50%;
    bottom: 48px;
    background-color: var(--shortcuts-bg);
    box-shadow: var(--shadow);
    border-radius: 4px;
    color: var(--shortcuts-fg);
    letter-spacing: 2px;
    text-transform: uppercase;
    backdrop-filter: blur(7px);
}

.darwin #shortcuts {
    width: 492px;
    margin-left: -246px;
}

#shortcuts ul {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(3, auto);
    height: auto;
    padding: 12px;
    margin: 0px;
    grid-column-gap: 18px;
}

#shortcuts ul li {
    display: inline-block;
    margin: 0px;
    padding: 0px;
    width: 120px;
    height: 36px;
    position: relative;
    box-sizing: border-box;
    font-size: 14px;
    text-align: left;
    line-height: 260%;
    margin-left: 12px;
    margin-right: 12px;
    padding-left: 40px;
}

.darwin #shortcuts ul li {
    width: 80px;
}

#shortcuts ul li img {
    width: 22px;
    padding: 4px;
    top: 3px;
    position: absolute;
    left: 0px;
    filter: var(--tooltip-icon-filter);
}

#easyclosemenu {
    display: block;
    position: fixed;
    left: 0px;
    width: 18px;
    top: 37px;
    bottom: 0px;
    opacity: 0;
    box-sizing: border-box;
    transition: opacity 0.1s ease-out;
}

#easyclosemenu:hover {
    opacity: 1;
    transition: opacity 0.2s ease-out;
}

#easyclosemenu div {
    -webkit-mask: url(leftsmall.svg) no-repeat center;
    mask: url(leftsmall.svg) no-repeat center;
    display: block;
    width: 12px;
    height: 12px;
    margin: auto;
    position: relative;
    top: 50%;
    background-color: var(--default-text-color);
    transform: scaleX(-1);
}

.main span {
    font-size: inherit !important;
    font-family: inherit !important;
    line-height: inherit !important;
    font-weight: inherit !important;
}

.main code {
    font-size: inherit !important;
    font-weight: inherit !important;
}

/* Rounded and tinted like the segmented selectors (tokens on .prSelector) and
   as tall as their track, so the font dropdown doesn't stand out between them. */
select.selectdropdown {
    width: 190px;
    margin-left: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: var(--segmented-bg);
    border-radius: 9px;
    height: 36px;
    padding-left: 12px;
    padding-right: 32px;
    background-position: right 10px center;
    outline: none;
    font-size: 14px;
    transition: background-color 0.2s ease-out;
}

@media (hover: hover) and (pointer: fine) {
    select.selectdropdown:hover {
        background-color: color-mix(in srgb, var(--default-text-color) 13%, transparent);
    }
}

body.touch-mode select.selectdropdown {
    height: 44px;
}

/* dropdown.svg is a fixed dark grey chevron that all but vanishes on the dark
   themes: give the preference dropdowns the same chevron drawn light there. */
body.darkmode select.selectdropdown,
body.oldschool select.selectdropdown {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M12.8,5.6L8,10.4L3.2,5.6' fill='none' stroke='%23e6e6e6' stroke-opacity='0.6' stroke-width='1.62'/%3E%3C/svg%3E");
}

select.selectdropdown::-webkit-scrollbar-thumb {
    border-width: 0px;
}

select.selectdropdown::-webkit-scrollbar-track {
    background-color: var(--modal);
}

.toc {
    position: fixed;
    display: block;
    -webkit-mask: url(./toc.svg) no-repeat center;
    mask: url(./toc.svg) no-repeat center;
    mask-size: 24px;
    top: 42px;
    padding-top: 6px;
    padding-left: 6px;
    padding-bottom: 6px;
    right: 12px;
    height: 24px;
    width: 24px;
    opacity: 0.5;
    background-color: var(--default-text-color);
    transition: opacity 200ms ease-out;


   
    
}

.toc:hover {
    opacity: 1;
    transition: all 0.125s;
}

.toc.tocfadeout {
    opacity: 0;
    pointer-events: none;
    transition: opacity 250ms ease-out 1000ms;
}

.tocdiv {
    display: block;
    outline: none;
    transform-origin: top right;
    position: fixed;
    top: 48px;
    font-size: 15px;
    right: 0px;
    width: 300px;
    pointer-events: none;
    background-color: var(--modal);
    z-index: 9999;
    overflow-y: scroll;
    
    border-radius: 3px;
    box-sizing: border-box;
    opacity: 0;
    max-height: calc(100vh - 86px);
}

.tocdivltr {
    direction: ltr;
    text-align: left;
}

.tocdivrtl {
    direction: rtl;
    text-align: right;
}

.tocdivrtl .tocitem {
    text-align: right;
}

/* Per-item RTL: when an individual heading is RTL inside an otherwise-LTR
   TOC, the dir="rtl" attribute sets direction but the parent's text-align
   would still inherit. Force it here so the entry visually mirrors the
   heading. Indent margins, highlight border and text-align all flip. */
.tocitem[dir="rtl"] {
    text-align: right;
}
.tocitem[dir="rtl"].toch2 { padding-left: 0; padding-right: 12px; }
.tocitem[dir="rtl"].toch3 { padding-left: 0; padding-right: 24px; }
.tocitem[dir="rtl"].toch4 { padding-left: 0; padding-right: 30px; }
.tocitem[dir="rtl"].toch5 { padding-left: 0; padding-right: 36px; }
.tocitem[dir="rtl"].toch6 { padding-left: 0; padding-right: 39px; }

.showtocdiv {
    opacity: 1;
    transition: all 0.25s;
    right: 16px;
    pointer-events: all;
}

.tocitem {
    display: block;
    text-decoration: none;
    color: var(--default-text-color);
    font-size: 15px;
    padding: 4px;
    padding-left: 6px;
    padding-right: 6px;
    box-sizing: border-box;

    min-height: 1em;
    word-break: break-word;
   border-left: 2px solid transparent;
    border-right: 2px solid transparent;


}

/* Mirror the editor's line-spacing preference: when the user picks a looser
   line-height, give TOC entries proportionally more vertical breathing room. */
.tocdiv.lineheight125 .tocitem { padding-top: 6px;  padding-bottom: 6px;  }
.tocdiv.lineheight15  .tocitem { padding-top: 8px;  padding-bottom: 8px;  }
.tocdiv.lineheight175 .tocitem { padding-top: 10px; padding-bottom: 10px; }
.tocdiv.lineheight2   .tocitem { padding-top: 12px; padding-bottom: 12px; }





.toch2 {

    padding-left: 12px;
}

.toch3 {

    padding-left: 24px;
}
.toch4 {

    padding-left: 30px;
}

.toch5 {

    padding-left: 36px;
}

.toch6 {

    padding-left: 39px;
}

.tocdivrtl .toch2 {
    padding-left: 0;
    padding-right: 12px;
}

.tocdivrtl .toch3 {
    padding-left: 0;
    padding-right: 24px;
}

.tocdivrtl .toch4 {
    padding-left: 0;
    padding-right: 30px;
}

.tocdivrtl .toch5 {
    padding-left: 0;
    padding-right: 36px;
}

.tocdivrtl .toch6 {
    padding-left: 0;
    padding-right: 39px;
}

.highlighttoc {
    
    border-left-color: var(--default-text-color);
     border-left-width: 2px;
    border-left-style: solid;
    font-weight: 500;
     
}

/* Flip the highlight border to the right edge for RTL TOCs and per-item RTL
   entries inside an LTR TOC. */
.tocdivrtl .highlighttoc,
.highlighttoc[dir="rtl"] {
    border-left-style: none;
    border-right-color: var(--default-text-color);
    border-right-width: 2px;
    border-right-style: solid;
}
/* An LTR heading in an RTL table of contents: its entry is drawn as in an LTR
   one, from the left, indented from the left, its highlight on the left. */
.tocdivrtl .tocitem[dir="ltr"] {
    text-align: left;
}
.tocdivrtl .tocitem[dir="ltr"].toch2 { padding-right: 6px; padding-left: 12px; }
.tocdivrtl .tocitem[dir="ltr"].toch3 { padding-right: 6px; padding-left: 24px; }
.tocdivrtl .tocitem[dir="ltr"].toch4 { padding-right: 6px; padding-left: 30px; }
.tocdivrtl .tocitem[dir="ltr"].toch5 { padding-right: 6px; padding-left: 36px; }
.tocdivrtl .tocitem[dir="ltr"].toch6 { padding-right: 6px; padding-left: 39px; }
.tocdivrtl .highlighttoc[dir="ltr"] {
    border-right-style: none;
    border-left-color: var(--default-text-color);
    border-left-width: 2px;
    border-left-style: solid;
}


    .main p,
    .main h1,
    .main h2,
    .main h3,
    .main h4,
    .main h5,
    .main h6,
    .main ul,
    .main ol {
        padding-top: 18px;
        padding-bottom: 18px;
        transition: padding-top 0.1s ease-out, padding-bottom 0.1s ease-out;
    }
    .nomarginsbetweenP .main p,
    .nomarginsbetweenP .main h1,
    .nomarginsbetweenP .main h2,
    .nomarginsbetweenP .main h3,
    .nomarginsbetweenP .main h4,
    .nomarginsbetweenP .main h5,
    .nomarginsbetweenP .main h6,
    .nomarginsbetweenP .main ul,
    .nomarginsbetweenP .main ol {
        padding-top: 0px;
        padding-bottom: 0px;
        transition: padding-top 0.1s ease-out, padding-bottom 0.1s ease-out;
    }

/* Nested lists: no vertical padding so sub-lists hug their parent item. */
.main ul ul,
.main ul ol,
.main ol ul,
.main ol ol {
    padding-top: 0;
    padding-bottom: 0;
}


@media only screen and (max-height:550px) {
    .option {
        padding-top: 3px;
        padding-bottom: 3px;
    }
}

/* Touch menu on short screens (e.g. iPhone SE 667px, Surface Duo 720px): the
   enlarged 48px rows (28px min-height + 2×10px) times ~12 items overflow and
   collide with the word counter anchored to the menu's bottom. Progressively
   trim the row padding, icon and counter footprint so the whole list fits.
   Gated on body.touch-mode + max-height, so roomy touch tablets keep 44px+
   rows. 760px covers small phones/foldables while leaving tablets untouched. */
@media only screen and (max-height:760px) {
    body.touch-mode .option {
        padding-top: 7px;
        padding-bottom: 7px;
    }
    body.touch-mode .icnmask {
        width: 24px;
        height: 24px;
    }
    body.touch-mode #countdiv .settargeticn {
        width: 26px;
        height: 26px;
    }
}
@media only screen and (max-height:600px) {
    body.touch-mode .option {
        padding-top: 4px;
        padding-bottom: 4px;
        min-height: 24px;
    }
    body.touch-mode #countdiv {
        font-size: 12px;
    }
    body.touch-mode #countdiv .settarget,
    body.touch-mode #countdiv #word_counter_config_button {
        margin-bottom: 4px;
    }
}





.main table {
    border: 0px;
    padding: 0px;
}

.main table th {
    vertical-align: bottom;
    font-weight: 700;
    /* start, not left: a cell's RTL paragraph was drawn at its left edge. */
    text-align: start;
    padding: 10px 8px;
    border: 0px;
    border-bottom: 2px solid var(--default-text-color);
}

.main table td {
    vertical-align: top;
    border: 0px;
    border-bottom: 1px solid var(--default-text-color);
    padding: 8px;
    line-height: 140%;
}

@media print {
    /* Only the document prints. All else is interface, wherever it hangs: on
       <body> (the touch format bar and its menus, the context and popup
       menus, the table and comment bubbles, tooltips, toasts), in #app beside
       #contentWrappers (tabs, menu, panels, dialogs, counters) or beside .main
       in a tab's wrapper. Naming each piece, as the rules below do, let
       through whatever was not named yet: the format bar came out at the foot
       of the printed page or PDF on Android. */
    body > :not(#app),
    #app > :not(#contentWrappers),
    #contentWrappers > :not(.wrapper),
    #contentWrappers > .wrapper > :not(.main),
    #contentWrappers > .wrapper > .main > :not(.ProseMirror) {
        display: none !important;
    }
    #options {
        display: none !important;
        left: -482px !important;
    }
    #calmlylogo,
    #editor_tooltip,
    .editor_tooltip,
    .cw-context-menu,
    #cancelb,
    .side_window,
    #tooltip_make_links_openable,
    #tabcontainer,
    #countdiv,
    #easyclosemenu,
    #shortcuts,
    #search_box,
    #loader_block_screen,
    #jobdone,
    .center_dialogwin,
    .background_dialogwin,
    .toc,
    .tocdiv {
        display: none !important;
    }
    /* Touch mode: the format bar, fixed at the foot of the window, came out
       at the foot of the printed page or PDF. Its two menus live on <body>,
       outside it, and go on their own. */
    #touch-format-bar,
    .tfb-heading-menu,
    .tfb-overflow-menu {
        display: none !important;
    }
    .focusmodeon * {
        opacity: 1 !important;
    }
    .focusmodeon *:before,
    .focusmodeon *:after {
        opacity: 1 !important;
    }
    body {
        background-color: white !important;
        border: 0 !important;
        position: relative;
        overflow: visible;
    }
    .wrapper,
    .main {
        background-color: white !important;
        overflow-y: visible !important;
        overflow-x: hidden !important;
        height: auto !important;
        border: 0;
        max-width: none !important;
        max-height: none !important;
        padding: 0px !important;
        -webkit-text-fill-color: black !important;
        box-shadow: none !important;
        text-shadow: none !important;
        position: relative !important;
        width: 100% !important;
        box-sizing: border-box !important;
        font-size: 78%;
    }
    #contentWrappers {
        padding: 24px !important;
        box-shadow: none;
        left: 0px !important;
        position: relative !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .main .ProseMirror {
        padding: 0 !important;
        min-height: 0 !important;
        /* No side padding, and .main clips: every number needs its own room.
           Important, as the padding above: the Full and XL widths and a
           narrow window set the margin with a stronger selector (18px), and
           in print a list over 99 lost its first digits to it. */
        --list-page-margin: 0px !important;
    }
    .main p,
    .main h1,
    .main h2,
    .main h3,
    .main h4,
    .main h5,
    .main h6,
    .main ul,
    .main ol {
        margin-top: 1.5em !important;
        margin-bottom: 1.5em !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    .nomarginsbetweenP .main p,
    .nomarginsbetweenP .main h1,
    .nomarginsbetweenP .main h2,
    .nomarginsbetweenP .main h3,
    .nomarginsbetweenP .main h4,
    .nomarginsbetweenP .main h5,
    .nomarginsbetweenP .main h6,
    .nomarginsbetweenP .main ul,
    .nomarginsbetweenP .main ol {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    .main p:empty,
    .main p:has(> br:only-child):last-child {
        display: none !important;
    }
    .main,
    .serif,
    .opensans,
    .mono {
        color: black !important;
        caret-color: transparent !important;
    }
    .main a,
    .main a:visited,
    .main a:active {
        color: black !important;
    }
    .main img {
        display: block !important;
        margin: auto !important;
        width: auto !important;
        max-width: 100% !important;
        page-break-before: auto !important;
        page-break-after: auto !important;
        page-break-inside: avoid !important;
    }
    .main img.comments {
        display: none !important;
        page-break-inside: auto !important;
        width: 0px !important;
        height: 0px !important;
    }
    .main span.cw-comment-anchor {
        background-color: transparent !important;
        border-left: none !important;
        border-right: none !important;
        padding: 0 !important;
    }
    b,
    strong {
        font-weight: 700;
    }
    i,
    em {
        font-style: italic;
    }
    .table-bubble-menu,
    .slash-popover,
    .cw-comment-popover,
    [data-tippy-root],
    .tippy-box {
        display: none !important;
    }
    /* What the editor marks in the text for the moment is interface too: the
       cells of a table selection and a selected horizontal rule, which stay
       selected through Print, and the find matches (Print and Export close
       the search first, but nothing here depends on that). */
    .main .searchResult,
    .main .current_search_element,
    .main table.editor-table .selectedCell,
    .main hr.ProseMirror-selectednode {
        background-color: transparent !important;
        color: inherit !important;
    }
    .main table.editor-table .selectedCell:after {
        display: none !important;
    }
    .main pre,
    .main :not(pre) > code {
        background-color: #f0f0f0 !important;
        border: 1px solid #999 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    .main pre {
        border-radius: 4px !important;
        padding: 8px 10px !important;
    }
    .main :not(pre) > code {
        border-radius: 3px !important;
        padding: 0 4px !important;
    }
}

/* ─── Tables (editable) ───────────────────────────────────────────────── */

.main table.editor-table {
    border-collapse: separate;
    border-spacing: 0;
    table-layout: auto;
    width: 100%;
    margin: 1.6em 0;
    font-size: 0.95em;
    line-height: 1.55;
    border: 2px solid var(--menu-background-color);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 1px 2px var(--menu-hover);
}

.main table.editor-table th,
.main table.editor-table td {
    padding: 10px 14px;
    vertical-align: top;
    /* start, not left: a cell's RTL paragraph was drawn at its left edge. */
    text-align: start;
    font-weight: inherit;
    position: relative;
    box-sizing: border-box;
    border-right: 2px solid var(--menu-background-color);
    border-bottom: 2px solid var(--menu-background-color);
    transition: background-color 0.12s ease-out;
    word-break: break-word;
    overflow-wrap: break-word;
}

.main table.editor-table th:last-child,
.main table.editor-table td:last-child {
    border-right: 0;
}

.main table.editor-table tr:last-child td {
    border-bottom: 0;
}

.main table.editor-table th {
    letter-spacing: normal;
    background-color: transparent;
}



.main table.editor-table td > p,
.main table.editor-table th > p {
    margin: 0;
}

.main table.editor-table td > p + p,
.main table.editor-table th > p + p {
    margin-top: 0.4em;
}

.main table.editor-table td > ul,
.main table.editor-table td > ol,
.main table.editor-table th > ul,
.main table.editor-table th > ol {
    margin: 0.2em 0;
    padding-left: 1.4em;
    padding-top: 0;
    padding-bottom: 0;
}

/* Selected-cell highlight — kept higher than zebra/hover via extra specificity. */
.main table.editor-table tbody tr td.selectedCell,
.main table.editor-table tbody tr:nth-child(even) td.selectedCell,
.main table.editor-table tbody tr:hover td.selectedCell,
.main table.editor-table tr th.selectedCell {
    background-color: var(--secondary-button);
}

.main table.editor-table .selectedCell:after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: var(--main-button);
    opacity: 0.08;
}

/* A table too tight for the column, drawn wider, up to the window
   (editor_tables.js, WideTables): data-wide-width is its width and
   data-wide-left where it starts, from the column's left edge, in px.
   Decorations: never saved. Both margins, so the width holds whatever the
   direction of what the table sits in; !important over the width TipTap
   writes on a table whose columns have one. On screen only: in print the
   table keeps to the page. A number in an attribute is a length only where
   attr() takes a type (Chromium 133 on): an older WebView keeps the table in
   the column. */
@supports (width: attr(data-wide-width px)) {
    @media screen {
        .main table.editor-table[data-wide-width] {
            width: attr(data-wide-width px) !important;
            max-width: none;
            margin-left: attr(data-wide-left px);
            margin-right: calc(100% - attr(data-wide-width px) - attr(data-wide-left px));
        }
    }
}

/* A table whose longest words all fit in the width it is drawn at
   (editor_tables.js, data-whole-words, a decoration): its cells break a word
   only where it runs past their edge, so no column is narrower than its
   longest word. Anywhere (word-break: break-word, above) every column could
   be one letter wide, and the browser broke short words with room to spare.
   One whose words do not all fit has the columns that do listed
   (data-whole-columns, numbered from 1, up to 12); the others still break
   theirs anywhere. On screen only: the page in print has another width. */
@media screen {
    .main table.editor-table[data-whole-words] th,
    .main table.editor-table[data-whole-words] td,
    .main table.editor-table[data-whole-columns~="1"] tr > :nth-child(1),
    .main table.editor-table[data-whole-columns~="2"] tr > :nth-child(2),
    .main table.editor-table[data-whole-columns~="3"] tr > :nth-child(3),
    .main table.editor-table[data-whole-columns~="4"] tr > :nth-child(4),
    .main table.editor-table[data-whole-columns~="5"] tr > :nth-child(5),
    .main table.editor-table[data-whole-columns~="6"] tr > :nth-child(6),
    .main table.editor-table[data-whole-columns~="7"] tr > :nth-child(7),
    .main table.editor-table[data-whole-columns~="8"] tr > :nth-child(8),
    .main table.editor-table[data-whole-columns~="9"] tr > :nth-child(9),
    .main table.editor-table[data-whole-columns~="10"] tr > :nth-child(10),
    .main table.editor-table[data-whole-columns~="11"] tr > :nth-child(11),
    .main table.editor-table[data-whole-columns~="12"] tr > :nth-child(12) {
        word-break: normal;
    }
}

/* Responsive wrapper: lets wide tables scroll horizontally without breaking
   the page layout. */
.main .tableWrapper {
    overflow-x: auto;
    margin: 1.6em 0;
    border-radius: 6px;
}

.main .tableWrapper > table.editor-table {
    margin: 0;
}

/* ─── Code block ─────────────────────────────────────────────────────── */

.main pre {
    background-color: var(--selector-background);
    border-radius: 6px;
    padding: 12px 14px;
    margin: 1em 0;
    font-size: 0.9em;
    line-height: 1.5;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

.main pre code {
    background: transparent;
    padding: 0;
    font-size: inherit;
    color: inherit;
}

.main :not(pre) > code {
    background-color: var(--selector-background);
    border-radius: 6px;
    padding: 1px 5px;
    font-size: 0.9em;
}

body.darkmode .main pre,
body.bluemode .main pre,
body.darkmode .main :not(pre) > code,
body.bluemode .main :not(pre) > code {
    background-color: var(--modal);
}

/* Force monospaced typography inside code blocks and inline code. The
   .main.serif/.main.mono/.main.opensans * rules above use !important with two
   classes of specificity (0,2,0), so we must match or exceed that. Duplicating
   `.main` (valid CSS — a single element can only carry the class once but the
   selector still adds up) pushes us to (0,2,1) and wins cleanly. */
.main.main pre,
.main.main pre *,
.main.main code,
.main.main code * {
    font-family: 'Roboto Mono', Menlo, Consolas, "Courier New", monospace !important;
}

body.opendyslexicfont .main.main pre,
body.opendyslexicfont .main.main pre *,
body.opendyslexicfont .main.main code,
body.opendyslexicfont .main.main code * {
    font-family: 'OpenDyslexicMono', 'Roboto Mono', Menlo, Consolas, monospace !important;
}

/* ─── Table bubble menu ───────────────────────────────────────────────── */

.table-bubble-menu {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px;
    background-color: var(--tooltip);
    color: var(--tooltip-fg);
    border: 0;
    border-radius: 4px;
    box-shadow: var(--tooltip-shadow);
    z-index: 9997;
    user-select: none;
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    transition: opacity 0.12s ease-out, visibility 0.12s ease-out;
}

.table-bubble-menu.is-hidden {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

/* Touch mode: instead of floating centred at the bottom (where it collided with
   the format bar), the table controls dock as a full-width row directly ABOVE
   the format bar, styled to match it so the two read as one stacked toolbar
   (spec-touch-adaptation.md). --tfb-bottom (keyboard height + format-bar height)
   is published by editor_touchbar.js; the fallback (50px) assumes the format bar
   alone, which is the steady state on the Chromebook (keyboard resizes the
   WebView, so kb ≈ 0). */
body.touch-mode .table-bubble-menu {
    left: 0;
    right: 0;
    bottom: var(--tfb-bottom, 50px);
    transform: none;
    box-sizing: border-box;
    justify-content: flex-start;
    gap: 14px;
    height: 50px;
    padding: 4px 10px;
    padding-bottom: max(4px, env(safe-area-inset-bottom, 0px));
    background-color: var(--menu-background-color);
    color: var(--default-text-color);
    border: 0;
    border-top: 1px solid var(--no-focus-color);
    border-radius: 0;
    box-shadow: none;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    z-index: 9000;
}
body.touch-mode .table-bubble-btn {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    color: var(--default-text-color);
    flex: 0 0 auto;
}
body.touch-mode .table-bubble-btn:hover,
body.touch-mode .table-bubble-btn:focus,
body.touch-mode .table-bubble-btn:active {
    background-color: var(--menu-hover);
}
body.touch-mode .table-bubble-btn svg {
    width: 22px;
    height: 22px;
}
body.touch-mode .table-bubble-sep {
    height: 24px;
    margin: 0 6px;
    background-color: var(--no-focus-color);
    opacity: 1;
    flex: 0 0 auto;
}

.table-bubble-btn {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
    border-radius: 2px;
    color: var(--tooltip-fg);
    cursor: pointer;
    transition: background-color 0.25s ease-out;
}

.table-bubble-btn:hover,
.table-bubble-btn:focus {
    outline: none;
    background-color: var(--tooltip-hover);
}

.table-bubble-btn svg {
    display: block;
    width: 20px;
    height: 20px;
}

.table-bubble-sep {
    width: 1px;
    height: 18px;
    margin: 0 4px;
    background-color: var(--tooltip-fg);
    opacity: 0.25;
    display: inline-block;
}

/* ─── Slash popover ─────────────────────────────────────────────────── */

.slash-popover {
    min-width: 240px;
    max-height: 280px;
    overflow-y: auto;
    background-color: var(--modal);
    color: var(--default-text-color);
    border: 1px solid var(--menu-hover);
    border-radius: 6px;
    box-shadow: var(--shadow);
    padding: 4px;
    font-family: inherit;
    user-select: none;
}

.slash-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 4px;
    cursor: pointer;
}

.slash-item.selected {
    background-color: var(--menu-hover);
}

.slash-item-icon {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 4px;
    background-color: var(--selector-background);
    color: var(--default-text-color);
}

.slash-item-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    min-width: 0;
}

.slash-item-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--default-text-color);
}

.slash-item-desc {
    font-size: 11px;
    opacity: 0.6;
    color: var(--default-text-color);
}

.slash-empty {
    padding: 10px;
    font-size: 12px;
    opacity: 0.6;
    text-align: center;
}

/* ─── Comment popover ─────────────────────────────────────────────────── */

.cw-comment-popover {
    --cw-popover-color: rgba(41, 135, 82, 0.95);
    position: fixed;
    z-index: 9998;
    width: 300px;
    box-sizing: border-box;
    background-color: var(--modal);
    color: var(--default-text-color);
    border: 1px solid var(--cw-popover-color);
    border-radius: 6px;
    box-shadow: var(--shadow);
    padding: 12px;
    font-family: inherit;
    user-select: none;
    transition: border-color 0.15s ease-out, opacity 0.12s ease-out;
}

.cw-comment-popover-trash {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--default-text-color);
    opacity: 0.6;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.12s ease-out, opacity 0.12s ease-out;
}

.cw-comment-popover-trash:hover {
    background-color: var(--menu-hover);
    opacity: 1;
}

.cw-comment-popover-trash-icn {
    width: 22px;
    height: 22px;
    background-color: currentColor;
    -webkit-mask: url(./delete.svg) no-repeat center / contain;
    mask: url(./delete.svg) no-repeat center / contain;
}

.cw-comment-popover-trash.is-hidden {
    display: none;
}

.cw-comment-popover.is-hidden {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.cw-comment-popover[data-color='green'] {
    --cw-popover-color: rgba(41, 135, 82, 0.95);
}

.cw-comment-popover[data-color='yellow'] {
    --cw-popover-color: rgba(190, 149, 16, 0.95);
}

.cw-comment-popover[data-color='red'] {
    --cw-popover-color: rgba(185, 53, 53, 0.95);
}

.cw-comment-popover-colors {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}

.cw-comment-popover-color {
    width: 30px;
    height: 30px;
    padding: 4px;
    border-radius: 6px;
    border: 0;
    background: transparent;
    color: var(--default-text-color);
    cursor: pointer;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    transition: background-color 0.12s ease-out;
}

.cw-comment-popover-color .cw-hl-icn {
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask: url(./highlight.svg) no-repeat center / contain;
    mask: url(./highlight.svg) no-repeat center / contain;
}

.cw-comment-popover-color .cw-hl-line {
    width: 14px;
    height: 3px;
    border-radius: 2px;
    background-color: currentColor;
}

.cw-comment-popover-color.green .cw-hl-line {
    background-color: rgba(41, 135, 82, 0.95);
}

.cw-comment-popover-color.yellow .cw-hl-line {
    background-color: rgba(190, 149, 16, 0.95);
}

.cw-comment-popover-color.red .cw-hl-line {
    background-color: rgba(185, 53, 53, 0.95);
}

.cw-comment-popover-color:hover {
    background-color: var(--menu-hover);
}

.cw-comment-popover-color.is-selected {
    background-color: var(--menu-hover);
}

.cw-comment-popover-textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-height: 115px;
    max-height: 240px;
    resize: vertical;
    padding: 6px;
    border: 0;
    border-radius: 0;
    background-color: var(--background-color);
    color: var(--default-text-color);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
    outline: none;
    caret-color: rgb(42, 186, 255);
}

.cw-comment-popover-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

.cw-comment-popover .cw-comment-popover-apply.uk-button {
    position: static;
    right: auto;
    bottom: auto;
   padding: 8px 16px;
    font-size: 15px;
    line-height: 100%;
}

/* Tippy.js — minimum positioning rules. Base CSS from node_modules is not
   imported because the bundler treats it as a runtime require(); the visual
   tippy theme is replaced entirely by the `calmly-slash` theme below. */
[data-tippy-root] {
    max-width: calc(100vw - 10px);
}

.tippy-box {
    position: relative;
    outline: 0;
}

.tippy-content {
    position: relative;
    padding: 0;
    z-index: 1;
}

.tippy-box[data-theme~="calmly-slash"] {
    background: transparent;
    box-shadow: none;
    color: inherit;
}

.tippy-box[data-theme~="calmly-slash"] > .tippy-arrow {
    display: none;
}

/* ===== Accessibility =====
   Screen-reader only utility: visible to assistive tech, hidden visually.
   Used by #count_announcer, #save_announcer and dialog labelledby targets. */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Visible keyboard focus indicator. Only fires for keyboard navigation
   (not mouse clicks), so it doesn't clutter the calm look. The editor's
   own .ProseMirror keeps its caret-only indicator (see rules above). */
:focus-visible {
    outline: 1px solid var(--focus-ring-color);
    outline-offset: -1px;
    border-radius: 2px;
    transition: none;
}

/* Suppress the browser's default focus ring when focus arrived via
   mouse/pointer (i.e. :focus matches but :focus-visible does not).
   Otherwise SVG/div elements with role="button" tabindex="0" — like
   the search arrows — show a default outline on click. */
:focus:not(:focus-visible) {
    outline: none;
}

/* Specific form controls have their own outline:none baseline rules
   that win the cascade against the plain :focus-visible selector.
   Restate the focus ring here with matching/higher specificity. */
input[type="range"]:focus-visible,
input[type="text"]:focus-visible,
input[type="color"]:focus-visible,
input[type="number"]:focus-visible,
select:focus-visible,
select.selectdropdown:focus-visible,
textarea:focus-visible {
    outline: 1px solid var(--focus-ring-color) !important;
    outline-offset: -1px !important;
    border-radius: 2px;
}

/* ...but the preference dropdowns keep their rounded shape under the ring. */
select.selectdropdown:focus-visible {
    border-radius: 9px;
}

.main .ProseMirror:focus-visible,
.main [contenteditable="true"]:focus-visible {
    outline: none;
}

/* The TOC panel receives focus programmatically when opened so keyboard
   users can arrow through entries; the container itself is not an actionable
   target, so suppress the focus ring. Individual .tocitem links keep theirs. */
.tocdiv:focus-visible {
    outline: none;
}

/* The currently-highlighted entry already carries a colored side border that
   marks the reading position, so suppress its keyboard focus ring to avoid a
   doubled-up indicator. Every other .tocitem keeps its focus ring. */
.tocitem.highlighttoc:focus-visible {
    outline: none;
}