markon-core 0.15.14

/* Markon design tokens.
 *
 * Centralised z-index vocabulary. Every project-owned stylesheet references
 * these custom properties instead of hard-coding numeric layers — bumping a
 * tier here cascades to every site without a project-wide search.
 *
 * Layer hierarchy, bottom to top (effective stacking order):
 *
 *   --markon-z-content-overlay  ( 2) Pseudo-stack inside a container (close-button
 *                                    face pinned to corner, focus pulse ring,
 *                                    scroll-to-bottom pill, expanded TOC corner).
 *   --markon-z-popover-inline   ( 5) Inline popover hovering above its parent
 *                                    panel surface (chat thread-list menu).
 *   --markon-z-note-connector   ( 9) SVG connector that sits below note cards
 *                                    but above body text.
 *   --markon-z-note-card        (10) Margin note cards in the sidebar.
 *   --markon-z-modal-inline     (1001) Inline modal anchored near content
 *                                      (note-input modal).
 *   --markon-z-modal-backdrop   (9998) Backdrop overlay shown beneath an
 *                                      inline modal (temp selection overlay).
 *   --markon-z-modal            (9999) Floating modal popup above the backdrop
 *                                      (mobile note popup).
 *   --markon-z-chrome           (10000) Floating chrome: spheres, full-screen
 *                                       modals, confirm dialog, TOC container,
 *                                       shortcuts help, editor modal.
 *   --markon-z-chrome-toolbar   (10001) One tier above chrome — the floating
 *                                       selection toolbar so it clears spheres.
 *   --markon-z-chrome-top       (10010) Autocomplete popups and drag previews.
 *   --markon-z-modal-layer      (10020) Topmost modal layers; business chrome
 *                                       must not cover these.
 *
 * Note: values 2 and 1 are reused for different *semantic* tiers in some
 * inline contexts (e.g. layout.html stacks article / toc / footer inside the
 * root context with 1..3). Those are local stacking and unrelated to the
 * floating-overlay scale above.
 */

:root {
    --markon-z-content-overlay: 2;
    --markon-z-popover-inline: 5;
    --markon-z-note-connector: 9;
    --markon-z-note-card: 10;
    --markon-z-modal-inline: 1001;
    --markon-z-modal-backdrop: 9998;
    --markon-z-modal: 9999;
    --markon-z-chrome: 10000;
    --markon-z-chrome-toolbar: 10001;
    --markon-z-chrome-top: 10010;
    --markon-z-modal-layer: 10020;
}

/* ============================================================
   MARKON DESIGN TOKENS
   Colours, typography and opacity. Defined here (not editor.css) so that
   every entry point — the main page, the directory listing AND the chat
   pop-out window (which loads only tokens.css + chat.css) — resolves the
   same `--markon-*` variables. Override via Settings → Page styles.
   ============================================================ */
:root {
    /* ── Base palette (light) — Primer-style role/modifier names ──────────
       Roles: bg- (surfaces) / fg- (ink) / border- / accent (brand).
       Modifiers: default / muted / subtle / emphasis / elevated / overlay /
       on-emphasis. See .internal/color-system design notes. Legacy flat names
       saved in Page Styles are mapped to these canonical tokens by
       `canonical()` in settings.rs. */
    --markon-accent:        #0969da; /* brand: links, buttons, TOC selected, accents */
    --markon-fg-default:    #1f2328; /* body text */
    --markon-fg-muted:      #656d76; /* secondary text, toolbar, separators */
    --markon-fg-subtle:     #656d76; /* secondary text on elevated/chrome surfaces */
    --markon-fg-on-emphasis: #ffffff; /* text/icon on a solid fill (accent/danger button) */
    --markon-bg-default:    #ffffff; /* page / editor canvas base */
    --markon-bg-muted:      #f6f8fa; /* subtle backgrounds: code blocks, cards, bars */
    --markon-bg-elevated:   #f6f8fa; /* one step up: floats, note cards, TOC icon */
    --markon-bg-elevated-2: #f1f5f9; /* one step above elevated: chat user bubble */
    --markon-bg-overlay:    #ffffff; /* popover / dropdown / modal background */
    --markon-border-default: #d1d9e0; /* heading underlines, panel borders, hairlines */
    --markon-border-emphasis: #d0d7de; /* stronger border: float edges, strokes on dark */

    /* ── Semantic status (theme-agnostic) ──────────────────── */
    --markon-danger:        #dc3545; /* destructive fg/solid: delete, stop */
    --markon-danger-hover:  #c82333;
    --markon-success:       #2da44e; /* success fg: confirm, TOC viewed */
    --markon-success-hover: #2c974b;
    --markon-success-emphasis: #238636; /* solid success button (save) */
    --markon-success-emphasis-hover: #2ea043;
    --markon-warning:       #bf8700; /* attention/pending fg */
    --markon-warning-hover: #9a6700;

    /* ── Chat edit-flow (chat.css pending-edit card / bar) ───
       --markon-{mono,chat-bg,chat-text-muted} used to be undefined and
       resolved through their var() fallbacks in chat.css; they are pinned
       here with the same values so Page Styles can target them. (The
       --markon-chat-border var() sites keep per-use alpha fallbacks inline,
       and --markon-chat-text falls back to `inherit`, which a custom
       property cannot express.) Status colors are theme-agnostic except
       the diff inks, which brighten in the dark block below. */
    --markon-mono: monospace;
    --markon-chat-bg: rgba(0, 0, 0, 0.02);
    --markon-chat-text-muted: #6b7280;
    --markon-chat-applied:        #16a34a; /* applied accent / Apply button */
    --markon-chat-applied-strong: #15803d; /* Apply button border + hover */
    --markon-chat-applied-fg:     #166534; /* APPLIED status pill ink */
    --markon-chat-neutral:        #6b7280; /* rejected / reverted accent */
    --markon-chat-neutral-fg:     #4b5563; /* rejected / reverted pill ink */
    --markon-chat-diff-del-bg:     rgba(220, 38, 38, 0.10);
    --markon-chat-diff-del-fg:     #991b1b;
    --markon-chat-diff-del-strike: rgba(153, 27, 27, 0.45);
    --markon-chat-diff-add-bg:     rgba(22, 163, 74, 0.10);
    --markon-chat-diff-add-fg:     #166534;

    /* ── Annotation highlights (theme-agnostic) ──────────────
       Translucent washes painted over body text; the same alpha reads on
       both canvases, so there are no per-theme variants. The colour-pick
       trio (orange/green/yellow) plus the amber note marker. */
    --markon-hl-orange:           rgba(224, 108, 43, 0.35);
    --markon-hl-green:            rgba(46, 160, 67, 0.35);
    --markon-hl-yellow:           rgba(187, 128, 9, 0.35);
    --markon-hl-note:             rgba(187, 128, 9, 0.15); /* note fill */
    --markon-hl-note-strong:      rgba(187, 128, 9, 0.25); /* note fill, hover */
    --markon-hl-note-line:        rgba(187, 128, 9, 0.4);  /* dotted underline */
    --markon-hl-note-line-strong: rgba(187, 128, 9, 0.6);  /* underline, hover */

    /* ── Search hit + textarea selection (theme-divergent) ───
       Search hit is amber-on-yellow; the active hit glows brighter with a
       ring. Selection is the source-editor textarea highlight. Dark values
       live in the dark block below. */
    --markon-search-hit:        rgba(255, 235, 59, 0.4);
    --markon-search-hit-active: rgba(255, 193, 7, 0.6);
    --markon-search-hit-ring:   rgba(255, 193, 7, 0.3);
    --markon-selection:         rgba(173, 214, 255, 0.6);
    /* Dark tooltip / popover surface, kept dark in BOTH themes. */
    --markon-overlay-dark:  #2c2c2c;
    /* Standard hover wash over a surface (overridden per theme below). */
    --markon-bg-hover:      rgba(0, 0, 0, 0.05);

    /* ── Code syntax palette (light) ───────────────────────── */
    /* GitHub-light palette: high contrast on the #f6f8fa code background.
       Comments reuse the muted token; the rest are overridable like any other. */
    --markon-code-comment:  var(--markon-fg-muted); /* comments */
    --markon-code-keyword:  #cf222e;             /* keywords, storage (fn/let/if) */
    --markon-code-string:   #0a3069;             /* strings */
    --markon-code-constant: #0550ae;             /* numbers, booleans, constants */
    --markon-code-entity:   #8250df;             /* function / type / class names */
    --markon-code-support:  #0550ae;             /* built-in types & functions */
    --markon-code-variable: #953800;             /* variables, parameters */

    /* ── Typography ────────────────────────────────────────── */
    --markon-ui-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --markon-ui-font-size: 0.80rem;

    /* ── Opacity ───────────────────────────────────────────── */
    --markon-panel-opacity: 0.96;
    --markon-collapsed-opacity: 0.6;
    --markon-collapsed-opacity-hover: 0.85;

    /* ── Radius ────────────────────────────────────────────── */
    --markon-radius-sm: 6px;  /* default: buttons, inputs, cards, chips */
    --markon-radius-lg: 8px;  /* large containers: modals, panels */

    /* ── Overlay top bars ──────────────────────────────────── */
    /* One fixed height + horizontal inset for every full-screen overlay's top
       bar (export editor, source editor, search …) so they all match and their
       controls sit vertically centred. The skirt is breathing room applied to
       the *content region's* top — never to the bar's own padding, which would
       push the bar controls off-centre. */
    --markon-bar-height: 52px;
    --markon-bar-pad-x: 20px;
    --markon-bar-skirt: 14px;

    /* ── Elevation (floating surfaces) ─────────────────────── */
    --markon-shadow-pop:   0 2px 8px rgba(0, 0, 0, 0.12);   /* popovers, dialogs, mobile note */
    --markon-shadow-modal: 0 8px 24px rgba(0, 0, 0, 0.14);  /* full modals */

    /* ── Modal frame component ───────────────────────────────
       Shared shell for floating popups. The outer rim is translucent; the
       inner surface is opaque. Component-specific accent colors belong on
       --markon-modal-surface-border, not the outer rim. */
    --markon-modal-frame-inset: 6px;
    --markon-modal-frame-radius: calc(var(--markon-radius-lg) + var(--markon-modal-frame-inset));
    --markon-modal-border-neutral: color-mix(in srgb, var(--markon-border-emphasis) 86%, var(--markon-bg-overlay));
    --markon-modal-border-accent: color-mix(in srgb, var(--markon-accent) 18%, var(--markon-modal-border-neutral));
    --markon-modal-border-success: color-mix(in srgb, var(--markon-success) 22%, var(--markon-modal-border-neutral));
    --markon-modal-border-danger: color-mix(in srgb, var(--markon-danger) 22%, var(--markon-modal-border-neutral));
    --markon-modal-surface-border: var(--markon-modal-border-neutral);

    /* ── On the dark overlay surface (--markon-overlay-dark, dark in both
          themes): chrome grays that must read against a dark fill. ──────── */
    --markon-overlay-line:        #666;     /* grip / separator */
    --markon-overlay-line-strong: #aaa;     /* grip hover */
    --markon-overlay-hover:       #4a4a4a;  /* button hover wash */

    /* ── Derived (auto-computed, not user-configurable) ───── */
    --markon-accent-hover:   color-mix(in srgb, var(--markon-accent) 80%, black);
    --markon-fg-muted-hover: color-mix(in srgb, var(--markon-fg-muted) 60%, black);
    --markon-accent-muted:   color-mix(in srgb, var(--markon-accent) 10%, transparent);

    /* ── Source-editor preset layer ──────────────────────────
       editor.css references only these --mk-editor-* vars. The defaults
       below are the "follow page" preset: chrome maps to the page tokens
       (so it tracks data-theme) and markdown syntax uses the light GitHub
       palette here + the GitHub-dark palette in the dark block. A named
       preset overrides the whole set under html[data-editor-theme="…"]
       (see "VSCode Dark" below). Adding a preset = one such block + one
       settings option; nothing in editor.css changes. */
    --mk-editor-bg:               var(--markon-bg-default);
    --mk-editor-fg:               var(--markon-fg-default);
    --mk-editor-header-bg:        var(--markon-bg-muted);
    --mk-editor-header-border:    var(--markon-border-default);
    --mk-editor-chrome-fg:        var(--markon-fg-muted);    /* close/tab idle */
    --mk-editor-chrome-fg-strong: var(--markon-fg-default);  /* filename, hover/active */
    --mk-editor-gutter-bg:        var(--markon-bg-default);
    --mk-editor-gutter-border:    var(--markon-border-default);
    --mk-editor-gutter-fg:        var(--markon-fg-muted);
    --mk-editor-divider:          var(--markon-border-default);
    --mk-editor-accent:           var(--markon-accent);      /* divider hover, tab active, save */
    --mk-editor-caret:            var(--markon-fg-default);
    --mk-editor-selection:        var(--markon-selection);
    --mk-editor-btn-fg:           var(--markon-fg-on-emphasis);
    --mk-editor-btn-bg:           var(--markon-accent);
    --mk-editor-btn-bg-hover:     var(--markon-accent-hover);
    --mk-editor-btn-bg-active:    var(--markon-accent-hover);
    --mk-editor-btn-changes-bg:       var(--markon-success);
    --mk-editor-btn-changes-bg-hover: var(--markon-success-hover);
    --mk-editor-btn-disabled-bg:  var(--markon-bg-muted);
    --mk-editor-btn-disabled-fg:  var(--markon-fg-subtle);
    /* markdown syntax — light (GitHub-light, preserves the prior light editor) */
    --mk-editor-syn-header:       #0550ae;
    --mk-editor-syn-header-text:  #0a3069;
    --mk-editor-syn-bold:         #8250df;
    --mk-editor-syn-italic:       #cf222e;
    --mk-editor-syn-code:         #a40e26;
    --mk-editor-syn-code-bg:      rgba(175, 184, 193, 0.2);
    --mk-editor-syn-fence:        #57606a;
    --mk-editor-syn-link:         #0969da;
    --mk-editor-syn-image:        #8250df;
    --mk-editor-syn-quote:        #1a7f37;
    --mk-editor-syn-list:         #8250df;
    --mk-editor-syn-hr:           #57606a;
}

/* ── Shared modal frame component ─────────────────────────────
   Use `.markon-modal-frame` on popups that can use the pseudo-element inner
   surface. Use `.markon-modal-frame-shell` with `.markon-modal-surface` when
   the popup already owns a dedicated content/body element. */
.markon-modal-backdrop {
    background: transparent;
}

.markon-modal-layer.markon-modal-layer,
.markon-modal-frame.markon-modal-frame,
.markon-modal-frame-shell.markon-modal-frame-shell,
.markon-chat-container.expanded.markon-chat-container.expanded,
.markon-live-container.expanded.markon-live-container.expanded {
    z-index: var(--markon-z-modal-layer);
}

:where(.markon-modal-frame, .markon-modal-frame-shell),
.toc.markon-modal-frame,
.markon-chat-container.expanded,
.markon-live-container.expanded {
    position: relative;
    padding: var(--markon-modal-frame-inset);
    border: 1px solid color-mix(in srgb, var(--markon-fg-on-emphasis) 52%, transparent);
    border-radius: var(--markon-modal-frame-radius);
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--markon-fg-on-emphasis) 58%, transparent),
            color-mix(in srgb, var(--markon-fg-on-emphasis) 24%, transparent)
        );
    background-clip: padding-box;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--markon-fg-on-emphasis) 76%, transparent),
        inset 0 0 18px color-mix(in srgb, var(--markon-fg-on-emphasis) 34%, transparent),
        var(--markon-shadow-modal);
    box-sizing: border-box;
    color: var(--markon-fg-default);
    isolation: isolate;
    opacity: 1;
    overflow: hidden;
}

.markon-modal-frame::before,
.markon-modal-frame::after {
    content: "";
    position: absolute;
    inset: var(--markon-modal-frame-inset);
    border-radius: var(--markon-radius-lg);
    pointer-events: none;
}

.markon-modal-frame::before {
    z-index: 0;
    background: var(--markon-bg-overlay);
}

.markon-modal-frame::after {
    z-index: var(--markon-z-popover-inline);
    border: 1px solid var(--markon-modal-surface-border);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--markon-fg-on-emphasis) 30%, transparent);
}

.markon-modal-frame > * {
    position: relative;
    z-index: 1;
}

.markon-modal-drag-handle {
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.markon-modal-frame.markon-modal-drag-handle > * {
    cursor: auto;
    user-select: auto;
}

.markon-modal-frame-drag-region {
    position: absolute;
    z-index: var(--markon-z-content-overlay);
    pointer-events: auto;
}

.markon-modal-frame-drag-top {
    top: 0;
    right: 24px;
    left: 0;
    height: var(--markon-modal-frame-inset);
}

.markon-modal-frame-drag-right {
    top: 0;
    right: 0;
    bottom: 24px;
    width: var(--markon-modal-frame-inset);
}

.markon-modal-frame-drag-bottom {
    right: 24px;
    bottom: 0;
    left: 0;
    height: var(--markon-modal-frame-inset);
}

.markon-modal-frame-drag-left {
    top: 0;
    bottom: 24px;
    left: 0;
    width: var(--markon-modal-frame-inset);
}

.shortcuts-help-modal.markon-modal-drag-handle .shortcuts-help-header {
    cursor: grab;
    user-select: none;
}

.markon-modal-drag-handle.is-dragging {
    cursor: grabbing;
}

.markon-modal-surface,
.markon-chat-container.expanded .markon-chat-body,
.markon-live-container.expanded .markon-live-body {
    border: 1px solid var(--markon-modal-surface-border);
    border-radius: var(--markon-radius-lg);
    background: var(--markon-bg-overlay);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--markon-fg-on-emphasis) 30%, transparent);
}

@media (max-width: 1400px) {
    #toc-container .toc.markon-modal-frame {
        padding: calc(15px + var(--markon-modal-frame-inset));
    }
}

@media (min-width: 1401px) {
    #toc-container.toc-nav-active .toc.markon-modal-frame {
        padding: calc(15px + var(--markon-modal-frame-inset));
    }
}

html[data-theme="dark"] {
    /* Only the canonical role names need dark values. */
    --markon-accent:         #58a6ff;
    --markon-fg-default:     #f0f6fc;
    --markon-fg-muted:       #8b949e;
    --markon-fg-subtle:      #adbac7;
    --markon-bg-default:     #0d1117;
    --markon-bg-muted:       #161b22;
    --markon-bg-elevated:    #2d333b;
    --markon-bg-elevated-2:  #373e47;
    --markon-bg-overlay:     #21262d;
    --markon-border-default: #30363d;
    --markon-border-emphasis: #484f58;
    --markon-accent-hover:   color-mix(in srgb, var(--markon-accent) 80%, white);
    --markon-fg-muted-hover: color-mix(in srgb, var(--markon-fg-muted) 60%, white);
    --markon-accent-muted:   color-mix(in srgb, var(--markon-accent) 15%, transparent);
    --markon-bg-hover:       rgba(255, 255, 255, 0.06);

    /* ── Code syntax palette (dark) — GitHub-dark, high contrast ──── */
    --markon-code-comment:  var(--markon-fg-muted);
    --markon-code-keyword:  #ff7b72;
    --markon-code-string:   #a5d6ff;
    --markon-code-constant: #79c0ff;
    --markon-code-entity:   #d2a8ff;
    --markon-code-support:  #79c0ff;
    --markon-code-variable: #ffa657;

    /* Status — GitHub-dark variants (success fg brighter on the dark canvas). */
    --markon-success:       #3fb950;
    --markon-success-hover: #56d364;
    --markon-warning:       #d29922;
    --markon-warning-hover: #e3b341;

    /* Chat diff inks — the only chat edit-flow tokens with dark variants. */
    --markon-chat-diff-del-fg: #fca5a5;
    --markon-chat-diff-add-fg: #86efac;

    /* Search hit + selection — softer amber alphas read better on dark. */
    --markon-search-hit:        rgba(255, 193, 7, 0.25);
    --markon-search-hit-active: rgba(255, 193, 7, 0.4);
    --markon-search-hit-ring:   rgba(255, 193, 7, 0.2);
    --markon-selection:         rgba(31, 111, 235, 0.6);

    /* Source editor "follow page" dark — GitHub-dark markdown syntax.
       The chrome vars need no dark entries: they reference page tokens
       that already switch in this block. */
    --mk-editor-syn-header:       #79c0ff;
    --mk-editor-syn-header-text:  #7ee787;
    --mk-editor-syn-bold:         #d2a8ff;
    --mk-editor-syn-italic:       #ff7b72;
    --mk-editor-syn-code:         #ffa657;
    --mk-editor-syn-code-bg:      rgba(255, 255, 255, 0.1);
    --mk-editor-syn-fence:        #8b949e;
    --mk-editor-syn-link:         #58a6ff;
    --mk-editor-syn-image:        #d2a8ff;
    --mk-editor-syn-quote:        #7ee787;
    --mk-editor-syn-list:         #d2a8ff;
    --mk-editor-syn-hr:           #8b949e;

    /* Elevation needs more depth on a dark canvas. */
    --markon-shadow-pop:   0 2px 8px rgba(0, 0, 0, 0.4);
    --markon-shadow-modal: 0 10px 28px rgba(0, 0, 0, 0.5);
}

/* ── "VSCode Dark" source-editor preset (opt-in) ─────────────────────────
   Reproduces the editor's original dark look as a named preset, applied via
   html[data-editor-theme="vscode-dark"]. Always dark regardless of the page
   theme — this is the template for plugging in further editor presets. */
html[data-editor-theme="vscode-dark"] {
    --mk-editor-bg:               #1e1e1e;
    --mk-editor-fg:               #d4d4d4;
    --mk-editor-header-bg:        #2d2d2d;
    --mk-editor-header-border:    #3e3e3e;
    --mk-editor-chrome-fg:        #cccccc;
    --mk-editor-chrome-fg-strong: #ffffff;
    --mk-editor-gutter-bg:        #1e1e1e;
    --mk-editor-gutter-border:    #3e3e3e;
    --mk-editor-gutter-fg:        #858585;
    --mk-editor-divider:          #3e3e3e;
    --mk-editor-accent:           #0e639c;
    --mk-editor-caret:            #ffffff;
    --mk-editor-selection:        rgba(38, 79, 120, 0.6);
    --mk-editor-btn-fg:           #ffffff;
    --mk-editor-btn-bg:           #0e639c;
    --mk-editor-btn-bg-hover:     #1177bb;
    --mk-editor-btn-bg-active:    #0d5a8f;
    --mk-editor-btn-changes-bg:       #0e7a0d;
    --mk-editor-btn-changes-bg-hover: #13a10e;
    --mk-editor-btn-disabled-bg:  #4d4d4d;
    --mk-editor-btn-disabled-fg:  #808080;
    --mk-editor-syn-header:       #569cd6;
    --mk-editor-syn-header-text:  #4ec9b0;
    --mk-editor-syn-bold:         #dcdcaa;
    --mk-editor-syn-italic:       #ce9178;
    --mk-editor-syn-code:         #d16969;
    --mk-editor-syn-code-bg:      rgba(255, 255, 255, 0.1);
    --mk-editor-syn-fence:        #808080;
    --mk-editor-syn-link:         #3794ff;
    --mk-editor-syn-image:        #c586c0;
    --mk-editor-syn-quote:        #6a9955;
    --mk-editor-syn-list:         #dcdcaa;
    --mk-editor-syn-hr:           #808080;
}