@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300..700&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap");

/* ==========================================================================
   MI működik — Ledger theme for Docmost v0.95 (Mantine 9)
   --------------------------------------------------------------------------
   One plain CSS file, injected right before </head>, after Docmost's own
   bundles (vendor-mantine-*.css, index-*.css). No build step, no JS.

   Ground rules (DESIGN.md): two grounds only (warm paper / warm ink), one
   chartreuse accent spoken at three volumes (Quiet Kid rule), claims in
   Inter, proof in IBM Plex Mono, flat ink (no shadows, 2 px max radius),
   input-only motion, sentence case. Product register: the tool disappears
   into the task, every interactive state defined.

   How it works
   · Mantine paints almost everything through --mantine-* custom properties;
     §1–§2 remap them. Docmost's theme.ts also feeds a cssVariablesResolver,
     and Mantine emits that at runtime as a <style> inside #root — i.e. AFTER
     this file in document order. Its selectors are :root (0,1,0) and
     :root[data-mantine-color-scheme=…] (0,2,0), so every variable block here
     is written as html:root[data-mantine-color-scheme=…] (0,2,1) to win.
   · Docmost's CSS modules compile to _<localName>_<hash>; the hash is stable
     per file, the local name is stable per version, so [class*="_spaceItem_"]
     (note the trailing underscore) matches exactly one class. Hashes are
     only spelled out where a local name is reused across modules.
   · Component rules are prefixed with :root[data-mantine-color-scheme]
     (0,2,0): that beats Docmost's compiled light-dark() overrides
     ([data-mantine-color-scheme=dark] .x) and lets every rule be written
     once, scheme-agnostic, against the --mk-* tokens in §0.
   ========================================================================== */

/* --------------------------------------------------------------------------
   §0  House tokens (Ledger palette) — light on :root, inverted for dark.
   Everything below references these; the hex values live only here.
   -------------------------------------------------------------------------- */
:root,
:root[data-mantine-color-scheme="light"] {
  --mk-ground: #f5f2e9;            /* warm paper — page and editor ground   */
  --mk-panel: #e9e4d4;             /* aged paper — sidebar, toolbars, code  */
  --mk-hover: #f0ede2;             /* hover on the ground                    */
  --mk-selected: #e9e4d4;          /* selected row on the ground             */
  --mk-panel-hover: #f0ede2;       /* hover on an aged-paper panel           */
  --mk-panel-selected: #f5f2e9;    /* selected row on an aged-paper panel: the paper lifts out of the aged ground */
  --mk-line: #d6d0be;              /* hairline — every rule and border       */
  --mk-text: #23221c;              /* warm ink                               */
  --mk-text-2: #6b6858;            /* faded ink — placeholders (5.0:1 on paper) */
  --mk-text-dim: #605d4e;          /* dimmed text — one step past faded ink so it also clears AA on aged paper (5.2:1) */
  --mk-mark: #81b300;              /* chartreuse mark                        */
  --mk-mark-soft: rgb(129 179 0 / 0.22); /* comment marks, table cell selection */
  --mk-on-mark: #23221c;
  --mk-focus: #5f8000;             /* accessibility-deepened mark for rings  */
  --mk-primary: #23221c;           /* primary button fill                    */
  --mk-on-primary: #f5f2e9;
  --mk-secondary-bg: #f5f2e9;      /* secondary button ground: paper (transparent in dark) */
  --mk-pos: #0f766e;
  --mk-warn: #7a5200;
  --mk-neg: #b42318;
  --mk-neg-text: #b42318;
  --mk-tooltip-bg: #23221c;
  --mk-tooltip-fg: #ede6d4;
  --mk-overlay: rgb(35 34 28 / 0.55);
  --mk-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mk-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

:root[data-mantine-color-scheme="dark"] {
  /* Ink mode is a chalkboard, not a gamer dashboard: same warmth, inverted. */
  --mk-ground: #25231c;            /* chalkboard                             */
  --mk-panel: #1c1a15;             /* deep panel — sidebar, code, terminals  */
  --mk-hover: #2c2a22;
  --mk-selected: #1c1a15;
  --mk-panel-hover: #22201a;
  --mk-panel-selected: #25231c;    /* the board shows through the panel      */
  --mk-line: #3b382e;              /* chalk line                             */
  --mk-text: #ede6d4;              /* chalk                                  */
  --mk-text-2: #a49d87;            /* faded chalk (5.8:1 on the board)       */
  --mk-text-dim: #a49d87;
  --mk-mark: #94cc0a;              /* chalk chartreuse                       */
  --mk-mark-soft: rgb(148 204 10 / 0.24);
  --mk-on-mark: #23221c;
  --mk-focus: #b3e334;
  --mk-primary: #ede6d4;           /* chalk fill, ink text                   */
  --mk-on-primary: #23221c;
  --mk-secondary-bg: transparent;
  --mk-pos: #3aa79c;
  --mk-warn: #e0b85a;
  --mk-neg: #e0604f;               /* fills, icons, borders                  */
  --mk-neg-text: #e2705f;          /* body-size error text: #e0604f is 4.46:1 on the board, this tint clears 5.0:1 */
  --mk-tooltip-bg: #ede6d4;
  --mk-tooltip-fg: #23221c;
  --mk-overlay: rgb(28 26 21 / 0.7);
}

/* --------------------------------------------------------------------------
   §1  Mantine ramps, shape, type. Docmost leans on gray-* (light) and
   dark-* (dark) for sidebars, hovers and borders — remapping them is what
   removes the mid-greys. The ramps are anchored to house tokens, not
   linear: nothing sits between the strong hairline (step 4) and faded ink
   (step 5). Nothing in this block is touched by the runtime resolver.
   -------------------------------------------------------------------------- */
:root {
  --mantine-color-gray-0: #f0ede2;  /* hover on paper                        */
  --mantine-color-gray-1: #e9e4d4;  /* aged paper                            */
  --mantine-color-gray-2: #e0dac9;
  --mantine-color-gray-3: #d6d0be;  /* hairline                              */
  --mantine-color-gray-4: #c9c2ae;  /* strong hairline                       */
  --mantine-color-gray-5: #6b6858;  /* faded ink — placeholder floor         */
  --mantine-color-gray-6: #605d4e;  /* dimmed                                */
  --mantine-color-gray-7: #4e4b3f;
  --mantine-color-gray-8: #3a3830;
  --mantine-color-gray-9: #23221c;  /* ink                                   */

  --mantine-color-dark-0: #ede6d4;  /* chalk                                 */
  --mantine-color-dark-1: #cec7b2;
  --mantine-color-dark-2: #a49d87;  /* faded chalk                           */
  --mantine-color-dark-3: #9a9380;  /* lightest legal text on the board (5.1:1) */
  --mantine-color-dark-4: #3b382e;  /* chalk line                            */
  --mantine-color-dark-5: #34312a;  /* hover surface                         */
  --mantine-color-dark-6: #2c2a22;  /* raised surface (dropdowns)            */
  --mantine-color-dark-7: #25231c;  /* chalkboard                            */
  --mantine-color-dark-8: #201e18;
  --mantine-color-dark-9: #1c1a15;  /* deep panel                            */

  /* Shape and depth: square corners, flat ink. A shadow here is a bug.
     (--mantine-radius-default is re-emitted at runtime as var(--mantine-radius-sm), which resolves here to 2 px.) */
  --mantine-radius-xs: 2px;
  --mantine-radius-sm: 2px;
  --mantine-radius-md: 2px;
  --mantine-radius-lg: 2px;
  --mantine-radius-xl: 2px;
  --mantine-radius-default: 2px;
  --mantine-shadow-xs: none;
  --mantine-shadow-sm: none;
  --mantine-shadow-md: none;
  --mantine-shadow-lg: none;
  --mantine-shadow-xl: none;

  /* Type roles: claims in Inter, proof in Plex Mono. Product register keeps
     headings at 500–600, never the editorial display 300. */
  --mantine-font-family: var(--mk-font-sans);
  --mantine-font-family-headings: var(--mk-font-sans);
  --mantine-font-family-monospace: var(--mk-font-mono);
  --mantine-line-height: 1.55;
  --mantine-heading-font-weight: 600;
  --mantine-h1-font-weight: 600;
  --mantine-h2-font-weight: 600;
  --mantine-h3-font-weight: 600;
  --mantine-h4-font-weight: 500;
  --mantine-h5-font-weight: 500;
  --mantine-h6-font-weight: 500;
  --mantine-h1-line-height: 1.2;
  --mantine-h2-line-height: 1.25;
  --mantine-h3-line-height: 1.3;
}

/* --------------------------------------------------------------------------
   §2  Semantic Mantine variables, per scheme — html:root[…] (0,2,1) so they
   outrank the runtime resolver (Docmost's theme.ts sets dimmed #4b5563,
   placeholder #686868, green/orange light-colours, a custom blue and red
   ramp). Primary is "blue", so the blue ramp and the primary-color-* set are
   both remapped to ink/paper; blue steps are purpose-mapped to how Docmost
   uses them: 0–2 selected/hover fills, 4–5 focus rings and handles, 6–9
   text. Families other than the three semantic ones collapse to neutral.
   -------------------------------------------------------------------------- */
:root,
html:root[data-mantine-color-scheme="light"] {
  --mantine-color-white: #f5f2e9;   /* every "white" surface is paper        */
  --mantine-color-black: #23221c;   /* every "black" is ink                  */
  --mantine-color-body: #f5f2e9;
  --mantine-color-text: #23221c;
  --mantine-color-bright: #23221c;
  --mantine-color-dimmed: #605d4e;
  --mantine-color-placeholder: #6b6858;
  --mantine-color-anchor: #23221c;
  --mantine-color-error: #b42318;
  --mantine-color-default: #f5f2e9;
  --mantine-color-default-hover: #f0ede2;
  --mantine-color-default-color: #23221c;
  --mantine-color-default-border: #d6d0be;
  --mantine-color-disabled: #e9e4d4;
  --mantine-color-disabled-color: #6b6858;
  --mantine-color-disabled-border: #d6d0be;

  --mantine-primary-color-filled: #23221c;
  --mantine-primary-color-filled-hover: #81b300;  /* the "response" volume of the accent */
  --mantine-primary-color-light: #e9e4d4;         /* active NavLink / light buttons: aged paper + ink */
  --mantine-primary-color-light-hover: #e0dac9;
  --mantine-primary-color-light-color: #23221c;
  --mantine-primary-color-contrast: #f5f2e9;
  --mantine-primary-color-0: #e9e4d4; --mantine-primary-color-1: #e0dac9; --mantine-primary-color-2: #d6d0be;
  --mantine-primary-color-3: #c9c2ae; --mantine-primary-color-4: #5f8000; --mantine-primary-color-5: #5f8000;
  --mantine-primary-color-6: #23221c; --mantine-primary-color-7: #23221c; --mantine-primary-color-8: #23221c; --mantine-primary-color-9: #23221c;

  --mantine-color-blue-0: #e9e4d4; --mantine-color-blue-1: #e0dac9; --mantine-color-blue-2: #d6d0be; --mantine-color-blue-3: #c9c2ae;
  --mantine-color-blue-4: #5f8000; --mantine-color-blue-5: #5f8000;
  --mantine-color-blue-6: #23221c; --mantine-color-blue-7: #23221c; --mantine-color-blue-8: #23221c; --mantine-color-blue-9: #23221c;
  --mantine-color-blue-filled: #23221c; --mantine-color-blue-filled-hover: #81b300;
  --mantine-color-blue-light: #e9e4d4; --mantine-color-blue-light-hover: #e0dac9; --mantine-color-blue-light-color: #23221c;
  --mantine-color-blue-outline: #23221c; --mantine-color-blue-outline-hover: #81b300; --mantine-color-blue-text: #23221c;

  --mantine-color-gray-filled: #23221c; --mantine-color-gray-filled-hover: #81b300;
  --mantine-color-gray-light: #e9e4d4; --mantine-color-gray-light-hover: #e0dac9; --mantine-color-gray-light-color: #23221c;
  --mantine-color-gray-outline: #23221c; --mantine-color-gray-outline-hover: #e9e4d4; --mantine-color-gray-text: #605d4e;
  --mantine-color-dark-filled: #23221c; --mantine-color-dark-filled-hover: #81b300;
  --mantine-color-dark-light: #e9e4d4; --mantine-color-dark-light-hover: #e0dac9; --mantine-color-dark-light-color: #23221c;
  --mantine-color-dark-outline: #23221c; --mantine-color-dark-outline-hover: #e9e4d4; --mantine-color-dark-text: #23221c;

  /* Semantic only — negative (ledger red), positive (ledger teal), warning (ochre). Generated: step 6 = token, tints toward paper, shades toward ink. */
  --mantine-color-red-0: #edd9d0; --mantine-color-red-1: #e7c4bb; --mantine-color-red-2: #dea79e; --mantine-color-red-3: #d3867c; --mantine-color-red-4: #c86157;
  --mantine-color-red-5: #bc3c31; --mantine-color-red-6: #b42318; --mantine-color-red-7: #9a2319; --mantine-color-red-8: #802319; --mantine-color-red-9: #64221a;
  --mantine-color-red-filled: #b42318; --mantine-color-red-filled-hover: #9a2319; --mantine-color-red-light: #e7c4bb; --mantine-color-red-light-hover: #dea79e;
  --mantine-color-red-light-color: #802319; --mantine-color-red-outline: #b42318; --mantine-color-red-outline-hover: #edd9d0; --mantine-color-red-text: #b42318;

  --mantine-color-green-0: #d9e3da; --mantine-color-green-1: #c2d7ce; --mantine-color-green-2: #a2c5bd; --mantine-color-green-3: #7db2a9; --mantine-color-green-4: #549b93;
  --mantine-color-green-5: #2b857d; --mantine-color-green-6: #0f766e; --mantine-color-green-7: #13675f; --mantine-color-green-8: #165850; --mantine-color-green-9: #1a4841;
  --mantine-color-green-filled: #0f766e; --mantine-color-green-filled-hover: #13675f; --mantine-color-green-light: #c2d7ce; --mantine-color-green-light-hover: #a2c5bd;
  --mantine-color-green-light-color: #165850; --mantine-color-green-outline: #0f766e; --mantine-color-green-outline-hover: #d9e3da; --mantine-color-green-text: #0f766e;
  --mantine-color-teal-0: #d9e3da; --mantine-color-teal-1: #c2d7ce; --mantine-color-teal-2: #a2c5bd; --mantine-color-teal-3: #7db2a9; --mantine-color-teal-4: #549b93;
  --mantine-color-teal-5: #2b857d; --mantine-color-teal-6: #0f766e; --mantine-color-teal-7: #13675f; --mantine-color-teal-8: #165850; --mantine-color-teal-9: #1a4841;
  --mantine-color-teal-filled: #0f766e; --mantine-color-teal-filled-hover: #13675f; --mantine-color-teal-light: #c2d7ce; --mantine-color-teal-light-hover: #a2c5bd;
  --mantine-color-teal-light-color: #165850; --mantine-color-teal-outline: #0f766e; --mantine-color-teal-outline-hover: #d9e3da; --mantine-color-teal-text: #0f766e;
  --mantine-color-lime-4: #549b93; --mantine-color-lime-6: #0f766e; --mantine-color-lime-9: #1a4841; --mantine-color-lime-filled: #0f766e; --mantine-color-lime-light: #c2d7ce; --mantine-color-lime-light-color: #165850; --mantine-color-lime-text: #0f766e;

  --mantine-color-yellow-0: #e6dfcd; --mantine-color-yellow-1: #dacfb6; --mantine-color-yellow-2: #c9b895; --mantine-color-yellow-3: #b59f70; --mantine-color-yellow-4: #9f8246;
  --mantine-color-yellow-5: #89651c; --mantine-color-yellow-6: #7a5200; --mantine-color-yellow-7: #6a4905; --mantine-color-yellow-8: #5b410a; --mantine-color-yellow-9: #4a380f;
  --mantine-color-yellow-filled: #7a5200; --mantine-color-yellow-filled-hover: #6a4905; --mantine-color-yellow-light: #dacfb6; --mantine-color-yellow-light-hover: #c9b895;
  --mantine-color-yellow-light-color: #5b410a; --mantine-color-yellow-outline: #7a5200; --mantine-color-yellow-outline-hover: #e6dfcd; --mantine-color-yellow-text: #7a5200;
  --mantine-color-orange-0: #e6dfcd; --mantine-color-orange-1: #dacfb6; --mantine-color-orange-2: #c9b895; --mantine-color-orange-3: #b59f70; --mantine-color-orange-4: #9f8246;
  --mantine-color-orange-5: #89651c; --mantine-color-orange-6: #7a5200; --mantine-color-orange-7: #6a4905; --mantine-color-orange-8: #5b410a; --mantine-color-orange-9: #4a380f;
  --mantine-color-orange-filled: #7a5200; --mantine-color-orange-filled-hover: #6a4905; --mantine-color-orange-light: #dacfb6; --mantine-color-orange-light-hover: #c9b895;
  --mantine-color-orange-light-color: #5b410a; --mantine-color-orange-outline: #7a5200; --mantine-color-orange-outline-hover: #e6dfcd; --mantine-color-orange-text: #7a5200;

  /* Decorative families collapse to neutral: "note" callouts (grape), random badge hues, the callout-type menu icons. */
  --mantine-color-cyan-5: #23221c; --mantine-color-cyan-8: #23221c; --mantine-color-cyan-9: #23221c; --mantine-color-cyan-filled: #23221c; --mantine-color-cyan-light: #e9e4d4; --mantine-color-cyan-light-color: #23221c; --mantine-color-cyan-text: #23221c;
  --mantine-color-indigo-5: #23221c; --mantine-color-indigo-8: #23221c; --mantine-color-indigo-9: #23221c; --mantine-color-indigo-filled: #23221c; --mantine-color-indigo-light: #e9e4d4; --mantine-color-indigo-light-color: #23221c; --mantine-color-indigo-text: #23221c;
  --mantine-color-violet-3: #23221c; --mantine-color-violet-5: #23221c; --mantine-color-violet-7: #23221c; --mantine-color-violet-9: #23221c; --mantine-color-violet-filled: #23221c; --mantine-color-violet-light: #e9e4d4; --mantine-color-violet-light-color: #23221c; --mantine-color-violet-text: #23221c;
  --mantine-color-grape-5: #23221c; --mantine-color-grape-8: #23221c; --mantine-color-grape-9: #23221c; --mantine-color-grape-filled: #23221c; --mantine-color-grape-light: #e9e4d4; --mantine-color-grape-light-hover: #e0dac9; --mantine-color-grape-light-color: #23221c; --mantine-color-grape-text: #23221c;
  --mantine-color-pink-5: #23221c; --mantine-color-pink-7: #23221c; --mantine-color-pink-8: #23221c; --mantine-color-pink-9: #23221c; --mantine-color-pink-filled: #23221c; --mantine-color-pink-light: #e9e4d4; --mantine-color-pink-light-color: #23221c; --mantine-color-pink-text: #23221c;
}

html:root[data-mantine-color-scheme="dark"] {
  --mantine-color-white: #ede6d4;   /* "white" text and thumbs become chalk  */
  --mantine-color-black: #23221c;
  --mantine-color-body: #25231c;
  --mantine-color-text: #ede6d4;
  --mantine-color-bright: #ede6d4;
  --mantine-color-dimmed: #a49d87;
  --mantine-color-placeholder: #a49d87;
  --mantine-color-anchor: #ede6d4;
  --mantine-color-error: #e2705f;
  --mantine-color-default: #1c1a15;
  --mantine-color-default-hover: #2c2a22;
  --mantine-color-default-color: #ede6d4;
  --mantine-color-default-border: #3b382e;
  --mantine-color-disabled: #1c1a15;
  --mantine-color-disabled-color: #a49d87;
  --mantine-color-disabled-border: #3b382e;

  --mantine-primary-color-filled: #ede6d4;
  --mantine-primary-color-filled-hover: #94cc0a;
  --mantine-primary-color-light: #1c1a15;
  --mantine-primary-color-light-hover: #34312a;
  --mantine-primary-color-light-color: #ede6d4;
  --mantine-primary-color-contrast: #23221c;
  --mantine-primary-color-0: #ede6d4; --mantine-primary-color-1: #cec7b2; --mantine-primary-color-2: #a49d87;
  --mantine-primary-color-3: #ede6d4; --mantine-primary-color-4: #ede6d4; --mantine-primary-color-5: #b3e334;
  --mantine-primary-color-6: #b3e334; --mantine-primary-color-7: #ede6d4; --mantine-primary-color-8: #34312a; --mantine-primary-color-9: #1c1a15;

  /* blue-0 = light-color text, 3–4 = active icon / anchor, 5–6 = focus, 8–9 = selected-option fills */
  --mantine-color-blue-0: #ede6d4; --mantine-color-blue-1: #cec7b2; --mantine-color-blue-2: #a49d87; --mantine-color-blue-3: #ede6d4;
  --mantine-color-blue-4: #ede6d4; --mantine-color-blue-5: #b3e334; --mantine-color-blue-6: #b3e334; --mantine-color-blue-7: #ede6d4;
  --mantine-color-blue-8: #34312a; --mantine-color-blue-9: #1c1a15;
  --mantine-color-blue-filled: #ede6d4; --mantine-color-blue-filled-hover: #94cc0a;
  --mantine-color-blue-light: #1c1a15; --mantine-color-blue-light-hover: #34312a; --mantine-color-blue-light-color: #ede6d4;
  --mantine-color-blue-outline: #ede6d4; --mantine-color-blue-outline-hover: #94cc0a; --mantine-color-blue-text: #ede6d4;

  --mantine-color-gray-filled: #ede6d4; --mantine-color-gray-filled-hover: #94cc0a;
  --mantine-color-gray-light: #1c1a15; --mantine-color-gray-light-hover: #34312a; --mantine-color-gray-light-color: #ede6d4;
  --mantine-color-gray-outline: #ede6d4; --mantine-color-gray-outline-hover: #2c2a22; --mantine-color-gray-text: #a49d87;
  --mantine-color-dark-filled: #ede6d4; --mantine-color-dark-filled-hover: #94cc0a;
  --mantine-color-dark-light: #1c1a15; --mantine-color-dark-light-hover: #34312a; --mantine-color-dark-light-color: #ede6d4;
  --mantine-color-dark-outline: #ede6d4; --mantine-color-dark-outline-hover: #2c2a22; --mantine-color-dark-text: #ede6d4;

  /* Semantic, ink-mode variants. Generated: step 4 = token (Mantine's dark text step), tints toward chalk, shades toward the board. */
  --mantine-color-red-0: #e9beac; --mantine-color-red-1: #e7a392; --mantine-color-red-2: #e48877; --mantine-color-red-3: #e2705f; --mantine-color-red-4: #e0604f;
  --mantine-color-red-5: #bb5445; --mantine-color-red-6: #95483b; --mantine-color-red-7: #e2705f; --mantine-color-red-8: #59342a; --mantine-color-red-9: #432d24;
  --mantine-color-red-filled: #e0604f; --mantine-color-red-filled-hover: #bb5445; --mantine-color-red-light: #4a2f26; --mantine-color-red-light-hover: #59342a;
  --mantine-color-red-light-color: #e9beac; --mantine-color-red-outline: #e0604f; --mantine-color-red-outline-hover: #432d24; --mantine-color-red-text: #e2705f;

  --mantine-color-green-0: #b7d3c3; --mantine-color-green-1: #94c7b8; --mantine-color-green-2: #70baad; --mantine-color-green-3: #4fafa3; --mantine-color-green-4: #3aa79c;
  --mantine-color-green-5: #368d82; --mantine-color-green-6: #327269; --mantine-color-green-7: #2e5a52; --mantine-color-green-8: #2b4840; --mantine-color-green-9: #283830;
  --mantine-color-green-filled: #3aa79c; --mantine-color-green-filled-hover: #368d82; --mantine-color-green-light: #293d36; --mantine-color-green-light-hover: #2b4840;
  --mantine-color-green-light-color: #b7d3c3; --mantine-color-green-outline: #3aa79c; --mantine-color-green-outline-hover: #283830; --mantine-color-green-text: #3aa79c;
  --mantine-color-teal-0: #b7d3c3; --mantine-color-teal-1: #94c7b8; --mantine-color-teal-2: #70baad; --mantine-color-teal-3: #4fafa3; --mantine-color-teal-4: #3aa79c;
  --mantine-color-teal-5: #3aa79c; --mantine-color-teal-6: #327269; --mantine-color-teal-7: #3aa79c; --mantine-color-teal-8: #2b4840; --mantine-color-teal-9: #283830;
  --mantine-color-teal-filled: #3aa79c; --mantine-color-teal-filled-hover: #368d82; --mantine-color-teal-light: #293d36; --mantine-color-teal-light-hover: #2b4840;
  --mantine-color-teal-light-color: #b7d3c3; --mantine-color-teal-outline: #3aa79c; --mantine-color-teal-outline-hover: #283830; --mantine-color-teal-text: #3aa79c;
  --mantine-color-lime-4: #3aa79c; --mantine-color-lime-6: #327269; --mantine-color-lime-9: #283830; --mantine-color-lime-filled: #3aa79c; --mantine-color-lime-light: #293d36; --mantine-color-lime-light-color: #b7d3c3; --mantine-color-lime-text: #3aa79c;

  --mantine-color-yellow-0: #e9d8af; --mantine-color-yellow-1: #e7cf97; --mantine-color-yellow-2: #e4c67f; --mantine-color-yellow-3: #e2be69; --mantine-color-yellow-4: #e0b85a;
  --mantine-color-yellow-5: #e0b85a; --mantine-color-yellow-6: #957c41; --mantine-color-yellow-7: #746236; --mantine-color-yellow-8: #594d2d; --mantine-color-yellow-9: #433b26;
  --mantine-color-yellow-filled: #e0b85a; --mantine-color-yellow-filled-hover: #bb9a4e; --mantine-color-yellow-light: #4a4128; --mantine-color-yellow-light-hover: #594d2d;
  --mantine-color-yellow-light-color: #e9d8af; --mantine-color-yellow-outline: #e0b85a; --mantine-color-yellow-outline-hover: #433b26; --mantine-color-yellow-text: #e0b85a;
  --mantine-color-orange-0: #e9d8af; --mantine-color-orange-1: #e7cf97; --mantine-color-orange-2: #e4c67f; --mantine-color-orange-3: #e2be69; --mantine-color-orange-4: #e0b85a;
  --mantine-color-orange-5: #bb9a4e; --mantine-color-orange-6: #957c41; --mantine-color-orange-7: #746236; --mantine-color-orange-8: #594d2d; --mantine-color-orange-9: #e0b85a;
  --mantine-color-orange-filled: #e0b85a; --mantine-color-orange-filled-hover: #bb9a4e; --mantine-color-orange-light: #4a4128; --mantine-color-orange-light-hover: #594d2d;
  --mantine-color-orange-light-color: #e9d8af; --mantine-color-orange-outline: #e0b85a; --mantine-color-orange-outline-hover: #433b26; --mantine-color-orange-text: #e0b85a;

  --mantine-color-cyan-5: #ede6d4; --mantine-color-cyan-8: #ede6d4; --mantine-color-cyan-9: #ede6d4; --mantine-color-cyan-filled: #ede6d4; --mantine-color-cyan-light: #1c1a15; --mantine-color-cyan-light-color: #ede6d4; --mantine-color-cyan-text: #ede6d4;
  --mantine-color-indigo-5: #ede6d4; --mantine-color-indigo-8: #ede6d4; --mantine-color-indigo-9: #ede6d4; --mantine-color-indigo-filled: #ede6d4; --mantine-color-indigo-light: #1c1a15; --mantine-color-indigo-light-color: #ede6d4; --mantine-color-indigo-text: #ede6d4;
  --mantine-color-violet-3: #ede6d4; --mantine-color-violet-5: #ede6d4; --mantine-color-violet-7: #ede6d4; --mantine-color-violet-9: #ede6d4; --mantine-color-violet-filled: #ede6d4; --mantine-color-violet-light: #1c1a15; --mantine-color-violet-light-color: #ede6d4; --mantine-color-violet-text: #ede6d4;
  --mantine-color-grape-5: #ede6d4; --mantine-color-grape-8: #ede6d4; --mantine-color-grape-9: #ede6d4; --mantine-color-grape-filled: #ede6d4; --mantine-color-grape-light: #1c1a15; --mantine-color-grape-light-hover: #34312a; --mantine-color-grape-light-color: #ede6d4; --mantine-color-grape-text: #ede6d4;
  --mantine-color-pink-5: #ede6d4; --mantine-color-pink-7: #ede6d4; --mantine-color-pink-8: #ede6d4; --mantine-color-pink-9: #ede6d4; --mantine-color-pink-filled: #ede6d4; --mantine-color-pink-light: #1c1a15; --mantine-color-pink-light-color: #ede6d4; --mantine-color-pink-text: #ede6d4;
}

/* --------------------------------------------------------------------------
   §3  Motion. Every transition is a response to input and ≤150 ms ease-out.
   Docmost has a few 220–320 ms flourishes (card lift, icon rotate, details
   border, column rule); they are clamped here. Nothing animates on its own:
   the saving pulse, the streaming-cursor blink and the skeleton shimmer are
   stilled. Spinners (loading) are the deliberate exception.
   -------------------------------------------------------------------------- */
:root[data-mantine-color-scheme] .ProseMirror [data-type="details"],
:root[data-mantine-color-scheme] .ProseMirror [data-type="details"] .ProseMirror-icon,
:root[data-mantine-color-scheme] .ProseMirror div[data-type="columns"] > div[data-type="column"] + div[data-type="column"],
:root[data-mantine-color-scheme] [class*="_card_"],
:root[data-mantine-color-scheme] [class*="_card_"]::before,
:root[data-mantine-color-scheme] [class*="_iconStamp_"],
:root[data-mantine-color-scheme] [class*="_arrow_"],
:root[data-mantine-color-scheme] [class*="_mathInline_"],
:root[data-mantine-color-scheme] [class*="_mathBlock_"],
:root[data-mantine-color-scheme] .drag-handle {
  transition-duration: 150ms;
  transition-timing-function: ease-out;
}

:root[data-mantine-color-scheme] [class*="_card_"]:hover,
:root[data-mantine-color-scheme] [class*="_card_"]:active,
:root[data-mantine-color-scheme] [class*="_card_"]:hover [class*="_iconStamp_"],
:root[data-mantine-color-scheme] [class*="_card_"]:hover [class*="_arrow_"] {
  transform: none;               /* no lift, no scale, no rotate — depth is a ground change, never motion */
}

:root[data-mantine-color-scheme] [class*="_savingDot_"] {
  animation: none;
  opacity: 1;
  background-color: var(--mk-warn); /* pending = semantic warning, still, never pulsing */
}

:root[data-mantine-color-scheme] [class*="_streamingCursor_"] { animation: none; }   /* the punctuation never blinks */

:root[data-mantine-color-scheme] [class*="_skeleton_"],
:root[data-mantine-color-scheme] .ProseMirror .media-pulse,
:root[data-mantine-color-scheme] .mantine-Skeleton-root::after {
  animation: none;
  background: var(--mk-panel);     /* a flat aged-paper block instead of a gradient shimmer */
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important; /* reduced motion wins over inline Mantine transition durations */
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   §4  Typography. Body 17 px / 1.6 in the editor prose, headings 600 with
   −0.02 em tracking on h1/h2 only, mono for everything that is proof.
   -------------------------------------------------------------------------- */
:root[data-mantine-color-scheme] body {
  font-family: var(--mk-font-sans);
  -webkit-font-smoothing: antialiased;
}

:root[data-mantine-color-scheme] .ProseMirror {
  font-size: 1.0625rem;            /* 17 px reading size */
  line-height: 1.6;
  font-feature-settings: "cv11", "ss01"; /* Inter: single-storey a, open digits — quieter text */
}
:root[data-mantine-color-scheme] :is([class*="_editorContent_"], [class*="_commentEditor_"]) .ProseMirror {
  font-size: 0.9375rem;            /* comment and AI-chat editors keep Docmost's 15 px */
}

:root[data-mantine-color-scheme] .ProseMirror h1,
:root[data-mantine-color-scheme] .ProseMirror h2 {
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
:root[data-mantine-color-scheme] .ProseMirror h3 {
  font-weight: 600;
  letter-spacing: 0;
}
:root[data-mantine-color-scheme] .ProseMirror h4,
:root[data-mantine-color-scheme] .ProseMirror h5,
:root[data-mantine-color-scheme] .ProseMirror h6 { font-weight: 500; }

:root[data-mantine-color-scheme] .page-title .ProseMirror h1 {
  font-weight: 600;                /* Docmost sets 700 — the display weight is not a product-register weight */
  letter-spacing: -0.02em;
}

:root[data-mantine-color-scheme] [class*="_title_"] { font-family: var(--mk-font-sans); } /* Docmost asks for "Greycliff CF" first; it is not shipped */

/* The one sanctioned uppercase: 11 px mono labels (sidebar "Favorite spaces", AI empty-state brand line). */
:root[data-mantine-color-scheme] [class*="_sectionHeader_"],
:root[data-mantine-color-scheme] [class*="_emptyStateBrand_"],
:root[data-mantine-color-scheme] [class*="_configureEyebrow_"] {
  font-family: var(--mk-font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mk-text-dim);
}

/* Proof in mono: code, kbd, pre, inline code, and tabular numerals wherever numbers line up. */
:root[data-mantine-color-scheme] code,
:root[data-mantine-color-scheme] kbd,
:root[data-mantine-color-scheme] pre,
:root[data-mantine-color-scheme] samp,
:root[data-mantine-color-scheme] .mantine-Kbd-root,
:root[data-mantine-color-scheme] .mantine-Code-root,
:root[data-mantine-color-scheme] [class*="_kbd_"],
:root[data-mantine-color-scheme] [class*="_shortcut_"],
:root[data-mantine-color-scheme] .ProseMirror pre,
:root[data-mantine-color-scheme] .ProseMirror :not(pre) > code {
  font-family: var(--mk-font-mono);
  font-variant-ligatures: none;
}

:root[data-mantine-color-scheme] table,
:root[data-mantine-color-scheme] .mantine-Table-table,
:root[data-mantine-color-scheme] [class*="_bodyGrid_"],
:root[data-mantine-color-scheme] [class*="_headerCell_"],
:root[data-mantine-color-scheme] [class*="_cell_"] {
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   §5  App shell grounds. Two grounds: the page and editor sit on paper, the
   sidebar / aside / header / toolbars sit on aged paper, and the hairline
   between them is the only depth cue (Two Grounds rule, Flat Ink rule).
   Docmost's app-shell.module.css paints header+navbar+aside #f6f7f9.
   -------------------------------------------------------------------------- */
:root[data-mantine-color-scheme] body,
:root[data-mantine-color-scheme] .mantine-AppShell-main,
:root[data-mantine-color-scheme] .ProseMirror {
  background-color: var(--mk-ground);
  color: var(--mk-text);
}

:root[data-mantine-color-scheme] .mantine-AppShell-navbar,
:root[data-mantine-color-scheme] .mantine-AppShell-aside,
:root[data-mantine-color-scheme] .mantine-AppShell-header {
  background-color: var(--mk-panel);
  border-color: var(--mk-line);
}
:root[data-mantine-color-scheme] [class*="_resizeHandle_"]:is(:hover, :active) { background: var(--mk-line); }

/* Every rule Docmost draws with a gray/dark step becomes the hairline. */
:root[data-mantine-color-scheme] [class*="_section_"]:not(:last-of-type),
:root[data-mantine-color-scheme] [class*="_bottomSection_"],
:root[data-mantine-color-scheme] [class*="_title_1ivk4_"],
:root[data-mantine-color-scheme] [class*="_header_18f9g_"],
:root[data-mantine-color-scheme] [class*="_cardFooter_"],
:root[data-mantine-color-scheme] [class*="_leftBorder_"],
:root[data-mantine-color-scheme] [class*="_catBar_"],
:root[data-mantine-color-scheme] [class*="_popoverSearch_"],
:root[data-mantine-color-scheme] [class*="_fixedToolbar_"],
:root[data-mantine-color-scheme] .mantine-Divider-root,
:root[data-mantine-color-scheme] hr {
  border-color: var(--mk-line);
}
:root[data-mantine-color-scheme] [class*="_divider_"],
:root[data-mantine-color-scheme] [class*="_rule_"] { background-color: var(--mk-line); }

/* --------------------------------------------------------------------------
   §6  Interactive states — buttons, icon buttons, inputs, focus, selection,
   links, rows. "Quiet until active": flat bordered instruments at rest,
   the mark pours in on touch (Quiet Kid rule, volume 3).
   -------------------------------------------------------------------------- */

/* Buttons. Mantine's root rule reads background/border/color through
   var(--button-*, fallback) at (0,1,0) and hands the variant colours in as
   inline custom properties; setting the real properties here at (0,4,0)
   sidesteps that wiring entirely. Two families:
   · primary  = filled: ink fill, paper text → mark fill, ink text.
   · secondary = default / outline / light: paper ground (transparent in
     dark), 1 px ink border, ink text → mark fill, ink text. subtle /
     transparent are the same without the border.
   The filled background is left to Mantine's inline variable so that
   colour="red" (destructive) keeps its negative fill; primary resolves to
   ink through §2. Hover ≤150 ms (Mantine's own transition). */
:root[data-mantine-color-scheme] .mantine-Button-root { font-weight: 500; }
:root[data-mantine-color-scheme] .mantine-Button-root:is([data-variant="default"], [data-variant="outline"], [data-variant="light"]) {
  background-color: var(--mk-secondary-bg);
  color: var(--mk-text);
  border: 1px solid var(--mk-text);
}
:root[data-mantine-color-scheme] .mantine-Button-root:is([data-variant="subtle"], [data-variant="transparent"]) {
  background-color: transparent;
  color: var(--mk-text);
  border: 1px solid transparent;
}
:root[data-mantine-color-scheme] .mantine-Button-root:is([data-variant="default"], [data-variant="outline"], [data-variant="light"], [data-variant="subtle"], [data-variant="transparent"]):is(:hover, :active, :focus-visible):not(:disabled, [data-disabled], [data-loading]) {
  background-color: var(--mk-mark);
  color: var(--mk-on-mark);
  border-color: var(--mk-on-mark);
}
/* Filled. A <Button> with no variant prop IS filled (Mantine resolves
   `variant || 'filled'`) but carries no data-variant attribute — that is
   every "Sign In" / "Save" in Docmost — so :not([data-variant]) is filled
   too. Mantine's text colour for filled is var(--mantine-color-white), which
   this theme maps to chalk in dark (it is also the dark body text), hence
   the explicit colour: paper on ink in light, ink on chalk in dark; hover
   fills the mark and keeps ink text. */
:root[data-mantine-color-scheme] .mantine-Button-root:is([data-variant="filled"], :not([data-variant])) {
  --button-color: var(--mk-on-primary);
  color: var(--mk-on-primary);
}
:root[data-mantine-color-scheme] .mantine-Button-root:is([data-variant="filled"], :not([data-variant])):is(:hover, :active):not(:disabled, [data-disabled], [data-loading]) {
  color: var(--mk-on-mark);
}
/* A filled button whose inline variables name a semantic family keeps its
   own fill and text on hover (negative stays negative) — the style
   attribute is the only hook Mantine leaves for the colour prop. */
:root[data-mantine-color-scheme] .mantine-Button-root:is([data-variant="filled"], :not([data-variant])):is([style*="-red-"], [style*="-green-"], [style*="-teal-"], [style*="-lime-"], [style*="-yellow-"], [style*="-orange-"]):is(:hover, :active) {
  color: var(--mk-on-primary);
}
:root[data-mantine-color-scheme] .mantine-Button-root:is(:disabled, [data-disabled]):not([data-loading]) {
  background-color: var(--mk-selected);  /* disabled: aged paper, faded ink, no accent (e.g. Save until the form is dirty) */
  color: var(--mk-text-2);
  border: 1px solid var(--mk-line);
}

/* Filled badges, theme icons and icon buttons carry the same text-on-fill
   logic, with the same "no variant prop = filled" rule. (Pill's default
   variant is the grey "default", which the ramps already handle.) */
:root[data-mantine-color-scheme] .mantine-Badge-root:is([data-variant="filled"], :not([data-variant])) { --badge-color: var(--mk-on-primary); color: var(--mk-on-primary); }
:root[data-mantine-color-scheme] .mantine-ThemeIcon-root:is([data-variant="filled"], :not([data-variant])) { --ti-color: var(--mk-on-primary); color: var(--mk-on-primary); }
:root[data-mantine-color-scheme] .mantine-ActionIcon-root:is([data-variant="filled"], :not([data-variant])) { --ai-color: var(--mk-on-primary); color: var(--mk-on-primary); }
:root[data-mantine-color-scheme] .mantine-ActionIcon-root:is([data-variant="filled"], :not([data-variant])):is(:hover, :active):not(:disabled, [data-disabled]) { color: var(--mk-on-mark); }

/* Icon buttons stay quiet: hover is an aged-paper fill, never the mark (only real buttons take the mark). */
:root[data-mantine-color-scheme] .mantine-ActionIcon-root[data-variant="subtle"],
:root[data-mantine-color-scheme] .mantine-ActionIcon-root[data-variant="default"],
:root[data-mantine-color-scheme] .mantine-ActionIcon-root[data-variant="transparent"],
:root[data-mantine-color-scheme] .mantine-ActionIcon-root[data-variant="light"] {
  --ai-hover: var(--mk-selected);
  --ai-hover-color: var(--mk-text);
}

/* Inputs. Text-field boundaries carry meaning, so they get faded ink
   (5.0:1, clears the 3:1 non-text minimum) rather than the hairline; on
   focus the border turns ink and the ring below applies. Mantine defines
   these variables on the wrapper per scheme at (0,3,0); Docmost's
   a11y-overrides.css then hard-sets border-color on the input itself, so
   that is pointed back at the variable chain. */
:root[data-mantine-color-scheme] .mantine-Input-wrapper[data-variant="default"],
:root[data-mantine-color-scheme] .mantine-Input-wrapper:not([data-variant]) {
  --input-bd: var(--mk-text-2);
  --input-bd-focus: var(--mk-text);
  --input-bg: var(--mk-ground);
  --input-placeholder-color: var(--mk-text-2);
}
:root[data-mantine-color-scheme] .mantine-Input-wrapper[data-variant="filled"] {
  --input-bd: transparent;
  --input-bd-focus: var(--mk-text);
  --input-bg: var(--mk-panel);
}
:root[data-mantine-color-scheme] .mantine-Input-input[data-variant="default"] { border-color: var(--input-bd); }
:root[data-mantine-color-scheme] .mantine-Input-input:disabled,
:root[data-mantine-color-scheme] .mantine-Input-input[data-disabled] {
  background-color: var(--mk-selected);
  color: var(--mk-text-2);
  -webkit-text-fill-color: var(--mk-text-2);
  border-color: var(--mk-line);
  opacity: 1;
}

/* Focus-visible: one ring for everything interactive. The :is() list lifts
   specificity to (0,5,0) so it also beats Docmost's per-component blue rings
   (e.g. the page-tree node at (0,3,0)) without !important. The rich-text
   surfaces are excluded — a 2 px ring around the whole editor is noise. */
:root[data-mantine-color-scheme] :is(a, button, input, select, textarea, summary, [tabindex], [role]):focus-visible:not(.ProseMirror, [contenteditable="true"]) {
  outline: 2px solid var(--mk-focus);
  outline-offset: 2px;
  box-shadow: none;                /* Docmost draws some rings as blue box-shadows */
}
:root[data-mantine-color-scheme] [class*="_node_"]:focus-visible { outline-offset: -2px; } /* tree rows live in a clipping scroll box */
:root[data-mantine-color-scheme] .mantine-Switch-input:focus-visible + .mantine-Switch-track,
:root[data-mantine-color-scheme] .mantine-Checkbox-input:focus-visible,
:root[data-mantine-color-scheme] .mantine-Radio-radio:focus-visible,
:root[data-mantine-color-scheme] .mantine-SegmentedControl-input:focus-visible + .mantine-SegmentedControl-label {
  outline: 2px solid var(--mk-focus);
  outline-offset: 2px;
}
:root[data-mantine-color-scheme] .ProseMirror:focus,
:root[data-mantine-color-scheme] .ProseMirror:focus-visible { outline: none; }

/* Text selection: the mark with full ink text. Same for the editor's
   "fake" selection decoration shown while a bubble menu has focus. */
:root[data-mantine-color-scheme] ::selection,
:root[data-mantine-color-scheme] .ProseMirror ::selection,
:root[data-mantine-color-scheme] .ProseMirror .selection {
  background-color: var(--mk-mark);
  color: var(--mk-on-mark);
}

/* Links: ink, underlined with a hairline that darkens to ink on hover, 4 px offset. Breadcrumbs stay plain. */
:root[data-mantine-color-scheme] .mantine-Anchor-root,
:root[data-mantine-color-scheme] .mantine-TypographyStylesProvider-root a,
:root[data-mantine-color-scheme] [class*="_messageContent_"] a,
:root[data-mantine-color-scheme] [class*="_bannerLink_"],
:root[data-mantine-color-scheme] .ProseMirror a {
  color: var(--mk-text);
  font-weight: inherit;
  text-decoration: underline;
  text-decoration-color: var(--mk-line);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  border-bottom: 0;                /* Docmost fakes the underline with a border */
  transition: text-decoration-color 150ms ease-out;
}
:root[data-mantine-color-scheme] .mantine-Anchor-root:hover,
:root[data-mantine-color-scheme] .mantine-TypographyStylesProvider-root a:hover,
:root[data-mantine-color-scheme] [class*="_messageContent_"] a:hover,
:root[data-mantine-color-scheme] [class*="_bannerLink_"]:hover,
:root[data-mantine-color-scheme] .ProseMirror a:hover {
  text-decoration-color: var(--mk-text);
  text-decoration: underline;
}
:root[data-mantine-color-scheme] .mantine-Breadcrumbs-root a { text-decoration: none; color: var(--mk-text); }
:root[data-mantine-color-scheme] .mantine-Breadcrumbs-root a:hover { text-decoration: underline; text-decoration-color: var(--mk-line); text-underline-offset: 4px; }
:root[data-mantine-color-scheme] [class*="_shareLinkText_"] { border-bottom-color: var(--mk-line); }

/* Rows and menus on the paper ground: hover lifts to gray-0, selected/active
   sits on aged paper with full ink text — never a chartreuse row, never grey
   text on the mark. Mantine's NavLink/Combobox/Menu already read the
   remapped primary-light and gray steps; the combobox selected state is the
   one place Mantine hardcodes a filled row, so it is restated here. */
:root[data-mantine-color-scheme] [data-combobox-selected],
:root[data-mantine-color-scheme] .mantine-Menu-item[data-menu-active],
:root[data-mantine-color-scheme] [class*="_selectOptionActive_"],
:root[data-mantine-color-scheme] [class*="_selectOptionKeyboardActive_"],
:root[data-mantine-color-scheme] [class*="_rowSelected_"] [class*="_cell_"],
:root[data-mantine-color-scheme] [class*="_selectedItem_"],
:root[data-mantine-color-scheme] [class*="_menuItemSelected_"],
:root[data-mantine-color-scheme] [class*="_popoverItemHover_"],
:root[data-mantine-color-scheme] [class*="_catTabActive_"],
:root[data-mantine-color-scheme] [class*="_active_yw3i7_"],
:root[data-mantine-color-scheme] [class*="_active_gm1dh_"] {
  background-color: var(--mk-selected);
  color: var(--mk-text);
}
:root[data-mantine-color-scheme] [data-combobox-selected] > svg { color: inherit; } /* the check icon is "white" in Mantine */
:root[data-mantine-color-scheme] [class*="_row_"][class*="_rowSelected_"]:hover [class*="_cell_"] { background-color: var(--mk-hover); }

/* The same rows when they live on an aged-paper panel (global sidebar,
   space sidebar, settings sidebar, aside, header): hover brightens a step,
   the selected row is a sheet of paper lifted out of the aged ground,
   weight 500 carries the rest. Source: global-sidebar / space-sidebar /
   settings / tree / table-of-contents / chat-sidebar modules. */
:root[data-mantine-color-scheme] :is(.mantine-AppShell-navbar, .mantine-AppShell-aside, .mantine-AppShell-header, [class*="_navbar_"]) :is([class*="_link_"], [class*="_spaceItem_"], [class*="_pageLink_"], [class*="_chatItem_"], [class*="_node_"], [class*="_menu_"], [class*="_row_"], [class*="_workspace_"], [class*="_page_"]):hover {
  background-color: var(--mk-panel-hover);
  color: var(--mk-text);
}
:root[data-mantine-color-scheme] :is(.mantine-AppShell-navbar, .mantine-AppShell-aside, [class*="_navbar_"]) :is([class*="_link_"][data-active], [class*="_link_"][aria-current="page"], [class*="_chatItem_"][data-active], [class*="_activeButton_"], [class*="_node_"][data-selected="true"], [class*="_node_"][aria-current], .mantine-NavLink-root[data-active]) {
  background-color: var(--mk-panel-selected);
  color: var(--mk-text);
  font-weight: 500;
}
:root[data-mantine-color-scheme] :is(.mantine-AppShell-navbar, .mantine-AppShell-aside) .mantine-NavLink-root:hover { background-color: var(--mk-panel-hover); }
:root[data-mantine-color-scheme] [class*="_link_"][data-disabled] { opacity: 1; color: var(--mk-text-2); }
:root[data-mantine-color-scheme] [class*="_linkActive_"] { background-color: var(--mk-panel-selected) !important; color: var(--mk-text); } /* table of contents: Docmost marks it !important */
:root[data-mantine-color-scheme] [class*="_spaceName_"] { color: var(--mk-text); }

/* Editor toolbars: the active tool is ink on aged paper (Docmost: blue on blue-0). */
:root[data-mantine-color-scheme] [class*="_bubbleMenu_"] [class*="_active_"],
:root[data-mantine-color-scheme] [class*="_toolbar_"] [class*="_active_"],
:root[data-mantine-color-scheme] [class*="_active_1reye_"],
:root[data-mantine-color-scheme] [class*="_active_1reye_"]:hover {
  color: var(--mk-text);
  background-color: var(--mk-selected);
}

/* Tabs: active tab border in ink (Mantine reads primary-filled), hover aged paper. */
:root[data-mantine-color-scheme] .mantine-Tabs-tab:hover { background-color: var(--mk-hover); }

/* Switch, checkbox, radio, task-list boxes: checked = ink (chalk in dark) — the mark is optional here and ink is quieter. */
:root[data-mantine-color-scheme] .mantine-Switch-track { border-color: var(--mk-line); }
:root[data-mantine-color-scheme] .mantine-Switch-thumb { background-color: var(--mk-text); border-color: var(--mk-text); }
:root[data-mantine-color-scheme] .mantine-Switch-input:checked + .mantine-Switch-track .mantine-Switch-thumb {
  background-color: var(--mk-on-primary);
  border-color: var(--mk-on-primary);
}
:root[data-mantine-color-scheme] .mantine-Checkbox-icon,
:root[data-mantine-color-scheme] .mantine-Radio-icon { color: var(--mk-on-primary); } /* Mantine paints the check "white"; in dark the box is chalk */
:root[data-mantine-color-scheme] .mantine-Checkbox-input,
:root[data-mantine-color-scheme] .mantine-Radio-radio { border-color: var(--mk-text-2); background-color: var(--mk-ground); }
:root[data-mantine-color-scheme] .mantine-Checkbox-input:checked,
:root[data-mantine-color-scheme] .mantine-Checkbox-input[data-indeterminate],
:root[data-mantine-color-scheme] .mantine-Radio-radio:checked { background-color: var(--mk-primary); border-color: var(--mk-primary); }
:root[data-mantine-color-scheme] .ProseMirror ul[data-type="taskList"] input[type="checkbox"] { accent-color: var(--mk-primary); }

/* Initials avatars: CustomAvatar hashes a name to one of seven hues — collapsed to ink on aged paper. Image avatars are untouched. */
:root[data-mantine-color-scheme] .mantine-Avatar-placeholder {
  background-color: var(--mk-selected);
  color: var(--mk-text);
  border-color: var(--mk-line);
}
/* AvatarUploader (workspace icon, space icon, profile picture) renders the
   Avatar with component="button"; Mantine resets padding but not border, so
   the user-agent 2 px outset button border showed. Borders at rest are 1 px
   hairline everywhere — the placeholder above already carries it. */
:root[data-mantine-color-scheme] button.mantine-Avatar-root {
  border: 0;
  background: transparent;
  appearance: none;
}

/* --------------------------------------------------------------------------
   §7  Floating surfaces. Shadows are gone (§1), so every floating thing
   gets a 1 px hairline instead: menus, popovers, comboboxes, hover cards,
   modals, drawers, notifications, tooltips, the slash menu, the emoji
   picker, Docmost's own toolbars and drag previews. Tooltips invert the
   ground (ink with chalk text in light).
   -------------------------------------------------------------------------- */
:root[data-mantine-color-scheme] .mantine-Popover-dropdown,
:root[data-mantine-color-scheme] .mantine-Menu-dropdown,
:root[data-mantine-color-scheme] .mantine-Combobox-dropdown,
:root[data-mantine-color-scheme] .mantine-HoverCard-dropdown,
:root[data-mantine-color-scheme] .mantine-Select-dropdown,
:root[data-mantine-color-scheme] .mantine-DatePickerInput-dropdown {
  --popover-border-color: var(--mk-line);
  --popover-shadow: none;
  background-color: var(--mk-ground);
  border: 1px solid var(--mk-line);
  border-radius: 2px;
}
:root[data-mantine-color-scheme] .mantine-Modal-content,
:root[data-mantine-color-scheme] .mantine-Drawer-content,
:root[data-mantine-color-scheme] .mantine-Dialog-root,
:root[data-mantine-color-scheme] .mantine-Spotlight-content {
  background-color: var(--mk-ground);
  border: 1px solid var(--mk-line);
  border-radius: 2px;
  box-shadow: none;
}
:root[data-mantine-color-scheme] .mantine-Modal-header,
:root[data-mantine-color-scheme] .mantine-Drawer-header { background-color: var(--mk-ground); }
:root[data-mantine-color-scheme] .mantine-Modal-overlay,
:root[data-mantine-color-scheme] .mantine-Drawer-overlay,
:root[data-mantine-color-scheme] .mantine-Overlay-root { background-color: var(--mk-overlay); } /* a plain semi-transparent ink, never pure black */

:root[data-mantine-color-scheme] .mantine-Tooltip-tooltip {
  --tooltip-bg: var(--mk-tooltip-bg);
  --tooltip-color: var(--mk-tooltip-fg);
  background-color: var(--mk-tooltip-bg);
  color: var(--mk-tooltip-fg);
  border: 1px solid var(--mk-line);
  border-radius: 2px;
  font-size: 0.8125rem;
}
:root[data-mantine-color-scheme] .mantine-Tooltip-arrow { border-color: var(--mk-line); }

:root[data-mantine-color-scheme] .mantine-Notification-root {
  background-color: var(--mk-ground);
  border: 1px solid var(--notification-color, var(--mk-line)); /* the colour moves from the 6 px side bar to a 1 px full border */
  border-radius: 2px;
  box-shadow: none;
}
:root[data-mantine-color-scheme] .mantine-Notification-root::before { display: none; } /* a >1 px side stripe is a banned accent shape */
:root[data-mantine-color-scheme] .mantine-Notification-icon { border-radius: 2px; color: var(--mk-ground); }

:root[data-mantine-color-scheme] .mantine-Paper-root,
:root[data-mantine-color-scheme] .mantine-Card-root { box-shadow: none; }
:root[data-mantine-color-scheme] .mantine-Paper-root[data-with-border],
:root[data-mantine-color-scheme] .mantine-Card-root[data-with-border] { border-color: var(--mk-line); }

/* Docmost's own floating pieces: bubble menu, AI toolbar + AI prompt, link
   preview, tree/embed/row/card drag previews, the AI chat composer,
   the AI result preview, the search box in the header. */
:root[data-mantine-color-scheme] [class*="_bubbleMenu_"],
:root[data-mantine-color-scheme] [class*="_toolbar_"],
:root[data-mantine-color-scheme] [class*="_aiInput_"],
:root[data-mantine-color-scheme] [class*="_resultPreview_"],
:root[data-mantine-color-scheme] [class*="_preview_"],
:root[data-mantine-color-scheme] [class*="_floatingBar_"],
:root[data-mantine-color-scheme] [class*="_dragPreview_"],
:root[data-mantine-color-scheme] [class*="_rowDragPreview_"],
:root[data-mantine-color-scheme] [class*="_cardDragPreview_"],
:root[data-mantine-color-scheme] [class*="_inputWrapper_"],
:root[data-mantine-color-scheme] [class*="_inputWrapperFlat_"] {
  background-color: var(--mk-ground);
  border: 1px solid var(--mk-line);
  border-radius: 2px;
  box-shadow: none;
}
:root[data-mantine-color-scheme] [class*="_aiInput_"]:focus-within,
:root[data-mantine-color-scheme] [class*="_inputWrapper_"]:focus-within { border-color: var(--mk-text); box-shadow: none; }

/* emoji-mart picker (page icons) exposes its palette as custom properties on
   its host element; its shadow DOM cannot be reached otherwise. */
:root[data-mantine-color-scheme] em-emoji-picker {
  --rgb-background: 245, 242, 233;
  --rgb-color: 35, 34, 28;
  --rgb-input: 245, 242, 233;
  --rgb-accent: 129, 179, 0;
  --color-border: #d6d0be;
  --color-border-over: #d6d0be;
  --shadow: none;
  --border-radius: 2px;
  --font-family: var(--mk-font-sans);
  border: 1px solid var(--mk-line);
}
:root[data-mantine-color-scheme="dark"] em-emoji-picker {
  --rgb-background: 37, 35, 28;
  --rgb-color: 237, 230, 212;
  --rgb-input: 28, 26, 21;
  --rgb-accent: 148, 204, 10;
  --color-border: #3b382e;
  --color-border-over: #3b382e;
}

/* --------------------------------------------------------------------------
   §8  The editor (ProseMirror / Tiptap). Code on aged paper, highlights in
   the mark with ink text, hairline tables, a 1 px blockquote rule (the
   3 px stripe is a banned shape), focus-coloured selection outlines.
   -------------------------------------------------------------------------- */
:root[data-mantine-color-scheme] .ProseMirror :not(pre) > code,
:root[data-mantine-color-scheme] [class*="_messageContent_"] :not(pre) > code,
:root[data-mantine-color-scheme] .mantine-Code-root {
  background-color: var(--mk-panel);
  color: var(--mk-text);           /* Docmost hardcodes #616161 */
  border-radius: 2px;
  font-size: 0.9em;
}
:root[data-mantine-color-scheme] .ProseMirror pre,
:root[data-mantine-color-scheme] .ProseMirror .codeBlock,
:root[data-mantine-color-scheme] [class*="_messageContent_"] pre,
:root[data-mantine-color-scheme] [class*="_codeBlock"] {
  background-color: var(--mk-panel);
  color: var(--mk-text);
  border-radius: 2px;
  border: 1px solid var(--mk-line);
}
:root[data-mantine-color-scheme] .ProseMirror .codeBlock pre { border: 0; }
:root[data-mantine-color-scheme] .ProseMirror pre code { font-size: 0.8125rem; line-height: 1.7; } /* the receipt size */

/* Syntax highlighting: monochrome, weight-and-tone only. Zero decorative
   colour (the Semantic-Only rule) — red would otherwise mean "failing".
   Reversible in one cut if the team wants hues back. */
:root[data-mantine-color-scheme] .ProseMirror pre [class*="hljs-"] { color: var(--mk-text); font-weight: 400; font-style: normal; }
:root[data-mantine-color-scheme] .ProseMirror pre :is(.hljs-keyword, .hljs-selector-tag, .hljs-built_in, .hljs-builtin-name, .hljs-literal, .hljs-type) { font-weight: 600; }
:root[data-mantine-color-scheme] .ProseMirror pre :is(.hljs-title, .hljs-section, .hljs-name, .hljs-tag, .hljs-attribute, .hljs-attr) { font-weight: 500; }
:root[data-mantine-color-scheme] .ProseMirror pre :is(.hljs-comment, .hljs-quote, .hljs-meta) { color: var(--mk-text-dim); font-style: italic; }
:root[data-mantine-color-scheme] .ProseMirror pre :is(.hljs-string, .hljs-symbol, .hljs-bullet, .hljs-number, .hljs-regexp, .hljs-link) { color: var(--mk-text-dim); }

/* Highlights: the mark with full ink text. Docmost ships a nine-colour
   highlight palette (highlight.css) as inline styles plus per-colour
   !important rules, so this needs !important and the [data-color] hook to
   win in both schemes. */
:root[data-mantine-color-scheme] mark,
:root[data-mantine-color-scheme] .ProseMirror mark,
:root[data-mantine-color-scheme] .ProseMirror mark[data-color],
:root[data-mantine-color-scheme="dark"] .ProseMirror mark[data-color] {
  background-color: var(--mk-mark) !important;
  color: var(--mk-on-mark) !important;
  border-radius: 0;
  padding: 0 0.1em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Comment anchors: a soft mark wash with a 1 px mark underline (volume 1 — glyph scale). */
:root[data-mantine-color-scheme] .ProseMirror .comment-mark {
  background: var(--mk-mark-soft);
  border-bottom: 1px solid var(--mk-mark);
}
:root[data-mantine-color-scheme] .ProseMirror .comment-mark.resolved { background: none; border-bottom: 0; }
@keyframes flash-highlight { /* redefined: Docmost flashes red → yellow when a comment is opened; input-driven, so it may stay, in house colours */
  0% { background-color: var(--mk-mark); }
  100% { background-color: var(--mk-mark-soft); }
}

/* Find-in-page hits. */
:root[data-mantine-color-scheme] .search-result { background: var(--mk-mark-soft); color: var(--mk-text); }
:root[data-mantine-color-scheme] .search-result-current { background: var(--mk-mark) !important; color: var(--mk-on-mark); } /* Docmost marks the current hit with !important */

/* Selected nodes, handles and drop indicators take the focus colour. */
:root[data-mantine-color-scheme] .ProseMirror .ProseMirror-selectednode { outline: 2px solid var(--mk-focus); outline-offset: 2px; }
:root[data-mantine-color-scheme] .ProseMirror hr.ProseMirror-selectednode { border-top: 1px solid var(--mk-focus); }
:root[data-mantine-color-scheme] .ProseMirror table .column-resize-handle,
:root[data-mantine-color-scheme] [class*="_handleBar_"],
:root[data-mantine-color-scheme] [class*="_dropLine_"],
:root[data-mantine-color-scheme] [class*="_dropEdgeLine_"] { background-color: var(--mk-focus); }
:root[data-mantine-color-scheme] [class*="_dropLine_"]::before { color: var(--mk-focus); }
:root[data-mantine-color-scheme] [class*="_dropLine_"][data-blocked="true"] { background-color: var(--mk-neg); }
:root[data-mantine-color-scheme] [class*="_node_"][data-receiving-drop="make-child"] { background-color: var(--mk-mark-soft); outline-color: var(--mk-focus); }
:root[data-mantine-color-scheme] [class*="_node_"][data-receiving-drop="make-child-blocked"] { outline-color: var(--mk-neg); }

/* Tables: hairline cells, aged-paper header, mark wash for selected cells. */
:root[data-mantine-color-scheme] .ProseMirror table td,
:root[data-mantine-color-scheme] .ProseMirror table th { border: 1px solid var(--mk-line); } /* Docmost hardcodes #ced4da */
:root[data-mantine-color-scheme] .ProseMirror table th { background-color: var(--mk-panel); font-weight: 600; }
:root[data-mantine-color-scheme] .ProseMirror table .selectedCell::after { background: var(--mk-mark-soft); }
:root[data-mantine-color-scheme] .mantine-Table-table { --table-border-color: var(--mk-line); --table-striped-color: var(--mk-hover); --table-hover-color: var(--mk-hover); }

:root[data-mantine-color-scheme] .ProseMirror blockquote,
:root[data-mantine-color-scheme] [class*="_messageContent_"] blockquote {
  border-left: 1px solid var(--mk-text);   /* a rule, not a stripe */
  padding-left: 1rem;
  color: var(--mk-text);
}
:root[data-mantine-color-scheme] .ProseMirror hr { border-top: 1px solid var(--mk-line); }
:root[data-mantine-color-scheme] .ProseMirror div[data-type="columns"]:is(:hover, .has-focus) > div[data-type="column"] + div[data-type="column"] { border-left-color: var(--mk-line); }

:root[data-mantine-color-scheme] .ProseMirror [data-type="details"] { border-radius: 2px; }
:root[data-mantine-color-scheme] .ProseMirror [data-type="details"]:hover { border-color: var(--mk-line); }
:root[data-mantine-color-scheme] .ProseMirror [data-type="details"] [data-type="detailsButton"] > div { border-radius: 2px; }
:root[data-mantine-color-scheme] .ProseMirror [data-type="details"] [data-type="detailsButton"] > div:hover,
:root[data-mantine-color-scheme] .ProseMirror [data-type="details"] [data-type="detailsButton"] > div.active { background: var(--mk-selected); color: var(--mk-text); }

:root[data-mantine-color-scheme] .ProseMirror .is-editor-empty:first-child::before,
:root[data-mantine-color-scheme] .ProseMirror .is-empty::before,
:root[data-mantine-color-scheme] .ProseMirror p.is-editor-empty:first-child::before { color: var(--mk-text-2); }

:root[data-mantine-color-scheme] .drag-handle { border-radius: 2px; }
:root[data-mantine-color-scheme] .drag-handle:hover,
:root[data-mantine-color-scheme] .drag-handle:active { background-color: var(--mk-selected); }

:root[data-mantine-color-scheme] [class*="_mathInline_"],
:root[data-mantine-color-scheme] [class*="_mathBlock_"] { caret-color: var(--mk-text); border-radius: 2px; }

/* Embedded media frames, transclusions, PDF/video wrappers: square, hairline on hover instead of an ochre frame. */
:root[data-mantine-color-scheme] :is([class*="_imageWrapper_"], [class*="_videoWrapper_"], [class*="_video_"], [class*="_audioWrapper_"], [class*="_audio_"], [class*="_pdfWrapper_"], [class*="_pdfIframe_"], [class*="_pdfError_"], [class*="_embedIframe_"], [class*="_wrapper_"], [class*="_transclusionWrap_"], [class*="_includeWrap_"], [class*="_hoverMenu_"], .ProseMirror div[data-youtube-video] iframe) { border-radius: 2px; }
:root[data-mantine-color-scheme] :is([class*="_transclusionWrap_"], [class*="_includeWrap_"])[data-editable="true"]:is(:hover, :focus-within, [data-focused="true"], [data-menu-open="true"]) { border-color: var(--mk-line); }
:root[data-mantine-color-scheme] [class*="_hoverMenu_"] { background-color: var(--mk-overlay); }

/* Comments (comment.module.css): focused thread, quoted selection, the reply editor's rings (Docmost draws these borders as 0-blur box-shadows; recoloured, not blurred). */
:root[data-mantine-color-scheme] [class*="_focused-thread_"] { border-color: var(--mk-focus); }
:root[data-mantine-color-scheme] [class*="_textSelection_"] { border-left: 1px solid var(--mk-text-2); background: var(--mk-panel); }
:root[data-mantine-color-scheme] [class*="_commentEditor_"] .ProseMirror:not(.focused) { box-shadow: 0 0 0 1px var(--mk-text-2); border-radius: 2px; }
:root[data-mantine-color-scheme] [class*="_commentEditor_"] .focused { box-shadow: 0 0 0 2px var(--mk-focus); border-radius: 2px; }

/* Collaboration carets keep their per-user colour (inline); only the label corners are squared. */
:root[data-mantine-color-scheme] .collaboration-carets__label { border-radius: 2px 2px 2px 0; }

/* --------------------------------------------------------------------------
   §9  Docmost module clean-up: raw radii, raw shadows, raw colours that the
   variable remap cannot reach. Grouped by surface; class names come from
   the v0.95 source modules.
   -------------------------------------------------------------------------- */

/* Square corners wherever Docmost wrote a pixel radius (3–22 px, 50 %, 999 px). */
:root[data-mantine-color-scheme] :is(
  [class*="_container_1hztj_"], [class*="_userMention_"], [class*="_attachmentChip_"], [class*="_attachmentChipRemove_"],
  [class*="_sendButton_"], [class*="_plusButton_"], [class*="_stopButton_"], [class*="_arrow_"], [class*="_scrollToBottomButton_"],
  [class*="_userBubble_"], [class*="_messageAttachmentChip_"], [class*="_aiInput_"], [class*="_backButton_"],
  .tableReadonlySortChevron, .status-badge, [class*="_status_"], [class*="_swatch_"],
  [class*="_row_"], [class*="_rowWrapper_"], [class*="_node_"], [class*="_badge_"], [class*="_personTag_"], [class*="_trigger_"],
  [class*="_rowExpandButton_"], [class*="_addRowButton_"], [class*="_selectionActionBar"], [class*="_formulaIconBadge_"],
  [class*="_fnChip_"], [class*="_propChip_"], [class*="_column_"], [class*="_columnTitleButton_"], [class*="_card_"],
  [class*="_iconButton_"], [class*="_titleInput_"], [class*="_fieldShell_"], [class*="_workspace_"], [class*="_iconStamp_"],
  [class*="_buttonRoot_"], [class*="_kbd_"], [class*="_handle_kqlxi_"], [class*="_menuItem_"], [class*="_plusMenuItem_"],
  [class*="_notificationItem_"], [class*="_chip_"], [class*="_chipX_"], [class*="_addBtn_"], [class*="_addBtnOpen_"],
  [class*="_popoverItem_"], [class*="_popoverItemDot_"], [class*="_scopeDot_"], [class*="_avatarStackItem_"], [class*="_generalAccessIcon_"]
) { border-radius: 2px; }

/* Shadows Docmost draws by hand (auth card, AI composer, kanban cards, key caps, chevrons, carousel arrows, focus glows). */
:root[data-mantine-color-scheme] :is(
  [class*="_container_1hztj_"], [class*="_card_"], [class*="_cellChevron_"], [class*="_kbd_"], [class*="_arrow_"],
  [class*="_scrollToBottomButton_"], [class*="_titleInput_"], [class*="_fieldShell_"], [class*="_linkInput_"],
  [class*="_colorSwatch_"], [class*="_removeColor_"], [class*="_selectionActionBar_"], [class*="_paper_"], [class*="_handle_kqlxi_"]
),
:root[data-mantine-color-scheme] :is([class*="_titleInput_"], [class*="_fieldShell_"], [class*="_linkInput_"], [class*="_colorSwatch_"], [class*="_removeColor_"]):is(:focus, :focus-visible, :focus-within),
:root[data-mantine-color-scheme] [class*="_card_"]:is(:hover, :active, :focus-visible) { box-shadow: none; }
:root[data-mantine-color-scheme] [class*="_card_"]::before { content: none; } /* radial-gradient sheen on the page-verification chooser cards */

/* Auth card, workspace chooser, home and template cards: paper sheet with a hairline; hover/focus firms the border to ink. */
:root[data-mantine-color-scheme] [class*="_container_1hztj_"] { background: var(--mk-ground); border: 1px solid var(--mk-line); }
:root[data-mantine-color-scheme] [class*="_card_"],
:root[data-mantine-color-scheme] [class*="_workspace_"] { background: var(--mk-ground); border: 1px solid var(--mk-line); }
:root[data-mantine-color-scheme] :is([class*="_card_"], [class*="_workspace_"]):is(:hover, :focus-visible) { border-color: var(--mk-text); background: var(--mk-ground); }
:root[data-mantine-color-scheme] [class*="_card_"]:hover [class*="_iconStamp_"] { background: var(--mk-primary); color: var(--mk-on-primary); }
:root[data-mantine-color-scheme] [class*="_cardSection_"] { background: var(--mk-panel); }
:root[data-mantine-color-scheme] [class*="_iconStamp_"] { background: var(--mk-panel); color: var(--mk-text); }

/* Database views (row-detail-modal, grid, cells, formula): property fields, the record title, the selection action bar. */
:root[data-mantine-color-scheme] [class*="_fieldShell_"] { background-color: var(--mk-hover); border: 1px solid transparent; }
:root[data-mantine-color-scheme] :is([class*="_fieldShell_"]:focus-within, [class*="_fieldShellActive_"], [class*="_fieldShellActive_"]:hover) { background-color: var(--mk-ground); border-color: var(--mk-text); }
:root[data-mantine-color-scheme] [class*="_titleInput_"]:hover:not(:focus) { background-color: var(--mk-hover); }
:root[data-mantine-color-scheme] [class*="_titleInput_"]::placeholder { color: var(--mk-text-2); font-weight: 600; }
:root[data-mantine-color-scheme] [class*="_selectionActionBar_"] { background: var(--mk-tooltip-bg); color: var(--mk-tooltip-fg); border: 1px solid var(--mk-line); }
:root[data-mantine-color-scheme] [class*="_selectionActionBarClose_"] { color: var(--mk-tooltip-fg); }
:root[data-mantine-color-scheme] [class*="_selectionActionBarDelete_"] { color: #e2705f; } /* negative on an ink bar: the ink-mode red in both schemes */
:root[data-mantine-color-scheme] [class*="_overflowCount_"] { color: var(--mk-text-dim); } /* cells.module hardcodes #686868 */

/* AI chat (chat-input, chat-message, ai-chat modules): send button = primary, chips and bubbles on aged paper. */
:root[data-mantine-color-scheme] [class*="_sendButton_"] { background: var(--mk-primary); color: var(--mk-on-primary); }
:root[data-mantine-color-scheme] [class*="_sendButton_"]:hover:not(:disabled) { background: var(--mk-mark); color: var(--mk-on-mark); }
:root[data-mantine-color-scheme] :is([class*="_userBubble_"], [class*="_attachmentChip_"], [class*="_messageAttachmentChip_"], [class*="_fileBadge_"], [class*="_suggestionCard_"], [class*="_toolStepDetails_"]) { background: var(--mk-panel); color: var(--mk-text); }
:root[data-mantine-color-scheme] :is([class*="_plusButton_"], [class*="_stopButton_"], [class*="_arrow_1jfaw_"], [class*="_scrollToBottomButton_"]) { border-color: var(--mk-text-2); color: var(--mk-text); background: var(--mk-ground); } /* _arrow_1jfaw_ = the carousel arrow button; the bare prefix would also hit the page-tree chevron */

/* Key caps and the ⌘K hint: aged paper, hairline, mono. */
:root[data-mantine-color-scheme] [class*="_kbd_"],
:root[data-mantine-color-scheme] [class*="_shortcut_"],
:root[data-mantine-color-scheme] .mantine-Kbd-root {
  background-color: var(--mk-panel);
  border: 1px solid var(--mk-line);
  border-bottom-width: 1px;
  color: var(--mk-text);
  font-weight: 600;
  box-shadow: none;
}

/* Small labels and pills. */
:root[data-mantine-color-scheme] :is([class*="_badge_1iytf_"], [class*="_pagePill_"], [class*="_personTag_"], [class*="_linkChip_"], [class*="_formulaIconBadge_"], [class*="_propChip_"], [class*="_trigger_"]) { background: var(--mk-panel); color: var(--mk-text); border-color: var(--mk-line); } /* _badge_1iytf_ = sync-block reference count; _badge_q4l0o_ (database select options) keeps its user-chosen colours */
:root[data-mantine-color-scheme] :is([class*="_pagePill_"], [class*="_linkChip_"], [class*="_trigger_"]):hover { background: var(--mk-selected); }
:root[data-mantine-color-scheme] [class*="_fnChip_"] { color: var(--mk-text); background: var(--mk-ground); border-color: var(--mk-line); }
:root[data-mantine-color-scheme] [class*="_badgeAccent_"] { border: 1px solid var(--mk-mark); background: var(--mk-ground); } /* a chip border is volume-1 accent */

/* Permission panels: warning wash for inherited access, negative for restricted. Dark versions were raw orange/red alphas. */
:root[data-mantine-color-scheme] [class*="_inheritedSection_"] { background-color: var(--mantine-color-yellow-light); border: 1px solid var(--mantine-color-yellow-3); }
:root[data-mantine-color-scheme] [class*="_generalAccessIconRestricted_"] { background-color: var(--mantine-color-red-light); color: var(--mantine-color-red-text); }

/* Version history diff: additions positive, deletions negative — semantic, kept; Docmost's raw teal is !important. */
:root[data-mantine-color-scheme] [class*="_historyEditor_"] .history-diff-added { background: var(--mantine-color-teal-light) !important; color: var(--mantine-color-teal-light-color) !important; }
:root[data-mantine-color-scheme] [class*="_historyEditor_"] .history-diff-deleted { color: var(--mk-neg-text); background: var(--mantine-color-red-light); }
:root[data-mantine-color-scheme] [class*="_historyEditor_"] .history-diff-node-added { outline-color: var(--mk-pos); border-radius: 2px; }
:root[data-mantine-color-scheme] [class*="_historyEditor_"] .history-diff-node-deleted { outline-color: var(--mk-neg); border-radius: 2px; }

/* Read-only table sort chevron tooltip: ink ground, paper text. */
:root[data-mantine-color-scheme] .tableReadonlySortChevron::after { background: var(--mk-tooltip-bg); color: var(--mk-tooltip-fg); border-radius: 2px; }

/* Scrollbar thumbs in the database grid. */
:root[data-mantine-color-scheme] [class*="_bodyGrid_"]::-webkit-scrollbar-thumb { border-radius: 2px; background-color: var(--mk-line); }

/* Errors in math nodes and menus read the error tone. */
:root[data-mantine-color-scheme] :is([class*="_mathInline_"], [class*="_mathBlock_"])[class*="_error_"],
:root[data-mantine-color-scheme] [class*="_error_1mr4m_"] { color: var(--mk-neg-text); }

/* === DOM-dependent: verify selectors in the live app ========================
   The wordmark. Wherever Docmost shows its own logo or name, show
   `MI működik` in IBM Plex Mono 700 with the full stop in the mark
   (Wordmark signature); hover flips the header one to `Mi működik?`.

   1. App header — app-header.tsx renders
        <a class="_brand_18f9g_10" aria-label="Docmost" href="/home">
          <div class="_brandIcon_18f9g_18 mantine-hidden-from-sm"><img src="/icons/favicon-32x32.png" …></div>
          <p class="mantine-Text-root mantine-visible-from-sm">Docmost</p>
        </a>
      ≥ 48em the <p> is hidden and the wordmark is drawn on the <a>; < 48em
      Mantine already hides the <p>, the <img> is swapped for the sidecar's
      favicon tile and the wordmark stays off. `.brand`/`.brandIcon` exist
      only in app-header.module.css, so no hash is needed.
   2. Auth pages — auth-layout.tsx renders
        <div class="mantine-Group-root _logo_1hztj_1"><img …><p class="mantine-Text-root">Docmost</p></div>
      `.logo` exists only in auth.module.css.
   3. Not touched: the user-menu button top right (workspace avatar + name)
      and the space switcher — those show the workspace's own name, not a
      product logo. The <a aria-label="Docmost"> keeps that accessible
      name; CSS cannot change it (sidecar HTML rewrite if it matters).
   ========================================================================== */
:root[data-mantine-color-scheme] [class*="_brand_"],
:root[data-mantine-color-scheme] [class*="_logo_"] {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 0;
  font-family: var(--mk-font-mono);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--mk-text);
  text-decoration: none;
  white-space: nowrap;
}
:root[data-mantine-color-scheme] [class*="_brand_"] { font-size: 1rem; align-items: center; }
:root[data-mantine-color-scheme] [class*="_logo_"] { font-size: 1.75rem; width: 100%; }
:root[data-mantine-color-scheme] [class*="_brand_"] > p,
:root[data-mantine-color-scheme] [class*="_logo_"] > img,
:root[data-mantine-color-scheme] [class*="_logo_"] > p { display: none; } /* the original name and 32 px PNG */
:root[data-mantine-color-scheme] [class*="_brandIcon_"] img { content: url("/__mimukodik/favicon.svg"); width: 22px; height: 22px; } /* mobile tile from the sidecar */
:root[data-mantine-color-scheme] [class*="_brand_"]::before,
:root[data-mantine-color-scheme] [class*="_logo_"]::before { content: "MI működik"; }
:root[data-mantine-color-scheme] [class*="_brand_"]::after,
:root[data-mantine-color-scheme] [class*="_logo_"]::after { content: "."; color: var(--mk-mark); }
:root[data-mantine-color-scheme] [class*="_brand_"]:is(:hover, :focus-visible)::before { content: "Mi működik"; } /* the standing question, input-driven */
:root[data-mantine-color-scheme] [class*="_brand_"]:is(:hover, :focus-visible)::after { content: "?"; }
@media (max-width: 47.99em) { /* Mantine's sm breakpoint: below it the icon tile shows, the wordmark does not */
  :root[data-mantine-color-scheme] [class*="_brand_"]::before,
  :root[data-mantine-color-scheme] [class*="_brand_"]::after { content: none; }
}