markon-core 0.15.14

/* Design tokens (colours, typography, opacity, code palette) now live in
   tokens.css — loaded by every entry point including the chat pop-out — so the
   `--markon-*` variables resolve everywhere. This file is component styles. */

/* ============================================================
   SELECTION POPOVER
   Floating toolbar for text annotation actions.
   Design intent: "anti-theme" dark surface with white text in BOTH
   light and dark modes — keeps the floating toolbar visually distinct
   from page content. The surface uses the shared --markon-overlay-dark
   token (also dark in both themes); the small grey accents below stay
   fixed on purpose.
   ============================================================ */

.selection-popover {
    position: absolute;
    background-color: var(--markon-overlay-dark);
    border-radius: var(--markon-radius-sm);
    padding: 3px 6px 3px 3px;
    display: none;
    z-index: var(--markon-z-chrome-toolbar);
    box-shadow: var(--markon-shadow-pop);
    color: var(--markon-fg-on-emphasis);
}

/* Drag handle — the only region that initiates a popover drag. */
.popover-drag-handle {
    display: inline-block;
    position: relative;
    width: 8px;
    height: 18px;
    margin-right: 4px;
    vertical-align: middle;
    cursor: grab;
    user-select: none;
}

.popover-drag-handle::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 2px;
    height: 12px;
    background: var(--markon-overlay-line);
    border-radius: 1px;
    transition: background 0.15s;
}

.popover-drag-handle:hover::before {
    background: var(--markon-overlay-line-strong);
}

.popover-drag-handle:active {
    cursor: grabbing;
}

.selection-popover button {
    background: none;
    border: none;
    color: var(--markon-fg-on-emphasis);
    padding: 5px 8px;
    cursor: pointer;
    font-size: 12px;
    transition: background-color 0.2s;
}

.selection-popover button:hover {
    background-color: var(--markon-overlay-hover);
    border-radius: var(--markon-radius-sm);
}

.popover-separator {
    color: var(--markon-overlay-line);
    margin: 0 4px;
    font-size: 12px;
    user-select: none;
}

/* Temporary selection overlay (shown when note modal is open) */
.temp-selection-overlay {
    position: absolute;
    background-color: rgba(100, 150, 255, 0.3);
    pointer-events: none;
    z-index: var(--markon-z-modal-backdrop);
}

/* ============================================================
   LINK COLORS IN MARKDOWN BODY
   Override all states for consistency
   ============================================================ */

.markdown-body a:link,
.markdown-body a:visited,
.markdown-body a:hover,
.markdown-body a:active,
.markdown-body a:focus {
    /* Specificity (0,2,1) matches github-markdown's `.markdown-body a:hover`
       and beats `.markdown-body a` (0,1,1); later source order wins ties. */
    color: var(--markon-accent);
}

/* ============================================================
   TEXT HIGHLIGHTS
   Color-coded text highlighting with theme support
   ============================================================ */

/* Colour-pick highlights — theme-agnostic translucent washes (tokens). */
.highlight-orange {
    background-color: var(--markon-hl-orange);
}

.highlight-green {
    background-color: var(--markon-hl-green);
}

.highlight-yellow {
    background-color: var(--markon-hl-yellow);
}

/* ── Code syntax highlighting ───────────────────────────────────────────
   Server-side syntect emits class-based spans (prefix `mk-`, see
   markdown.rs); colours come from the `--markon-code-*` tokens so they track
   the theme and stay overridable. Default text (identifiers, operators,
   punctuation) inherits the code block's `--markon-fg-default` foreground. */
.markdown-body pre code.mk-code .mk-comment {
    color: var(--markon-code-comment);
    font-style: italic;
}
.markdown-body pre code.mk-code .mk-keyword,
.markdown-body pre code.mk-code .mk-storage {
    color: var(--markon-code-keyword);
}
.markdown-body pre code.mk-code .mk-string {
    color: var(--markon-code-string);
}
.markdown-body pre code.mk-code .mk-constant {
    color: var(--markon-code-constant);
}
.markdown-body pre code.mk-code .mk-entity {
    color: var(--markon-code-entity);
}
.markdown-body pre code.mk-code .mk-support {
    color: var(--markon-code-support);
}
.markdown-body pre code.mk-code .mk-variable {
    color: var(--markon-code-variable);
}

.markdown-body .math-block {
    display: block;
    overflow-x: auto;
    margin: 16px 0;
    padding: 12px 16px;
    border: 1px solid var(--markon-border-default);
    border-radius: var(--markon-radius-sm);
    background: var(--markon-bg-muted);
    color: var(--markon-fg-default);
    text-align: center;
}

.markdown-body .math-inline {
    color: var(--markon-fg-default);
}

.markdown-body .math-error {
    border-color: var(--markon-danger);
    color: var(--markon-danger);
    text-align: left;
}

.markdown-body .markon-diagram {
    margin: 16px 0;
    overflow-x: auto;
}

.markdown-body .markon-diagram-canvas {
    display: inline-block;
    max-width: 100%;
    padding: 12px;
    border: 1px solid var(--markon-border-default);
    border-radius: var(--markon-radius-sm);
    background: var(--markon-bg-default);
}

.markdown-body .markon-diagram svg {
    display: block;
    max-width: 100%;
    height: auto;
    overflow: visible;
}

.markdown-body .markon-source-fallback {
    margin: 16px 0;
    border: 1px solid var(--markon-border-default);
    border-radius: var(--markon-radius-sm);
    background: var(--markon-bg-default);
}

.markdown-body .markon-source-fallback-label {
    padding: 8px 12px;
    border-bottom: 1px solid var(--markon-border-default);
    color: var(--markon-fg-muted);
    font-size: 13px;
}

.markdown-body .markon-source-fallback-label code {
    color: var(--markon-fg-default);
}

.markdown-body .markon-source-fallback-message {
    color: var(--markon-danger);
}

.markdown-body .markon-source-fallback pre {
    margin: 0;
    border-radius: 0 0 var(--markon-radius-sm) var(--markon-radius-sm);
}

.strikethrough {
    text-decoration: line-through;
}

/* ── Annotation author identity (shared workspaces only) ─────────────────
   Each annotation carries its author's colour in --anno-author (set by
   annotation-manager). A left identity line attributes it at a glance; a
   canvas-coloured separator keeps that line from clashing with the content
   highlight fill (tracks the page background in both themes). Anonymous
   (pre-authorship) annotations fall back to a neutral grey.
   Gated on `.markon-shared` so a single local user sees no attribution noise. */
.markon-shared .highlight-orange,
.markon-shared .highlight-green,
.markon-shared .highlight-yellow,
.markon-shared .has-note {
    box-shadow:
        inset 2px 0 0 var(--anno-author, var(--markon-fg-muted)),
        inset 4px 0 0 var(--markon-bg-default);
}
/* Strikethrough: the line itself takes the author colour. */
.markon-shared .strikethrough {
    text-decoration-color: var(--anno-author, var(--markon-fg-muted));
}

/* Author attribution merged into the selection popover (dark toolbar) on an
   annotation click — a colour dot + nickname + compact time, before the
   actions. One menu instead of a separate tooltip. */
.selection-popover .popover-author {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 4px;
    font-size: 12px;
    white-space: nowrap;
}
.selection-popover .popover-author-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: 0 0 auto;
}
.selection-popover .popover-author-time {
    opacity: 0.6;
}

/* Author footer on a note card — the note's attribution home. */
.note-author {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--markon-border-default);
    font-size: 11px;
    color: var(--markon-fg-muted);
}
.note-author-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 auto;
}
.note-author-time {
    margin-left: auto;
    opacity: 0.75;
}

/* Body links: hover shifts colour only. GitHub's stylesheet adds an underline
   on hover; we override it here (editor.css loads after the vendored sheet). */
.markdown-body a:hover {
    text-decoration: none;
    color: var(--markon-accent-hover);
}

.markdown-body table {
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 4px;
}

.markdown-body table tr {
    border-top: 0;
}

.markdown-body table th,
.markdown-body table td {
    background-color: inherit;
    border: 0;
    border-right: 1px solid var(--markon-border-default);
    border-bottom: 1px solid var(--markon-border-default);
}

.markdown-body table tr > :first-child {
    border-left: 1px solid var(--markon-border-default);
}

.markdown-body table > :first-child > tr:first-child > * {
    border-top: 1px solid var(--markon-border-default);
}

.markdown-body table > :first-child > tr:first-child > :first-child {
    border-top-left-radius: 4px;
}

.markdown-body table > :first-child > tr:first-child > :last-child {
    border-top-right-radius: 4px;
}

.markdown-body table > :last-child > tr:last-child > :first-child {
    border-bottom-left-radius: 4px;
}

.markdown-body table > :last-child > tr:last-child > :last-child {
    border-bottom-right-radius: 4px;
}

/* Annotation focus indicator for keyboard navigation */
.annotation-focused {
    outline: 2px solid var(--markon-accent);
    outline-offset: 2px;
    border-radius: var(--markon-radius-sm);
}

/* Heading section container (generated by Rust renderer) */
.heading-section {
    position: relative;
    /* Add scroll offset so headings don't stick to top edge */
    scroll-margin-top: 40px;
    /* Border always exists to prevent layout shift */
    border: 2px solid transparent;
    /* Focus frame: round all four corners consistently. */
    border-radius: var(--markon-radius-lg);
    padding: 4px 8px;
    padding-bottom: 5px;
}

/* Change border color when heading inside is focused */
.heading-section:has(.heading-focused) {
    border-color: color-mix(in srgb, var(--markon-accent) 30%, transparent);
}

html[data-theme="dark"] .heading-section:has(.heading-focused) {
    border-color: color-mix(in srgb, var(--markon-accent) 40%, transparent);
}

/* Headings use negative margin to align with container border */
.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
    position: relative;
    margin-top: -4px;
    margin-left: -8px;
    margin-right: -8px;
    padding: 4px 8px;
}

/* Hierarchical indentation for wide screens (>= 1400px) */
@media (min-width: 1400px) {
    .heading-section { padding: 12px 12px 0 12px; }

    /* Adjust heading margins to match wider container padding */
    .markdown-body h1,
    .markdown-body h2,
    .markdown-body h3,
    .markdown-body h4,
    .markdown-body h5,
    .markdown-body h6 {
        margin-top: -14px;
        margin-left: -14px;
        margin-right: -14px;
        padding: 12px;
    }
}

/* Apply background to focused heading only (not content) */
.markdown-body h1.heading-focused,
.markdown-body h2.heading-focused,
.markdown-body h3.heading-focused,
.markdown-body h4.heading-focused,
.markdown-body h5.heading-focused,
.markdown-body h6.heading-focused {
    --markon-heading-focus-bg: color-mix(in srgb, var(--markon-accent) 10%, transparent);
    background-color: var(--markon-heading-focus-bg);
    /* Specificity (0,2,2) beats github-markdown's `.markdown-body h2` (0,1,1). */
    border-bottom: none;
    border-radius: var(--markon-radius-sm) var(--markon-radius-sm) 0 0;
}

html[data-theme="dark"] .markdown-body h1.heading-focused,
html[data-theme="dark"] .markdown-body h2.heading-focused,
html[data-theme="dark"] .markdown-body h3.heading-focused,
html[data-theme="dark"] .markdown-body h4.heading-focused,
html[data-theme="dark"] .markdown-body h5.heading-focused,
html[data-theme="dark"] .markdown-body h6.heading-focused {
    --markon-heading-focus-bg: color-mix(in srgb, var(--markon-accent) 15%, transparent);
}

.markdown-body h1.heading-focused::before,
.markdown-body h1.heading-focused::after,
.markdown-body h2.heading-focused::before,
.markdown-body h2.heading-focused::after,
.markdown-body h3.heading-focused::before,
.markdown-body h3.heading-focused::after,
.markdown-body h4.heading-focused::before,
.markdown-body h4.heading-focused::after,
.markdown-body h5.heading-focused::before,
.markdown-body h5.heading-focused::after,
.markdown-body h6.heading-focused::before,
.markdown-body h6.heading-focused::after {
    content: "";
    position: absolute;
    bottom: -5px;
    width: 5px;
    height: 5px;
    background-color: var(--markon-heading-focus-bg);
    pointer-events: none;
}

.markdown-body h1.heading-focused::before,
.markdown-body h2.heading-focused::before,
.markdown-body h3.heading-focused::before,
.markdown-body h4.heading-focused::before,
.markdown-body h5.heading-focused::before,
.markdown-body h6.heading-focused::before {
    left: 0;
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 5 5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 0H0V5Q0 0 5 0Z' fill='black'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 5 5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 0H0V5Q0 0 5 0Z' fill='black'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}

.markdown-body h1.heading-focused::after,
.markdown-body h2.heading-focused::after,
.markdown-body h3.heading-focused::after,
.markdown-body h4.heading-focused::after,
.markdown-body h5.heading-focused::after,
.markdown-body h6.heading-focused::after {
    right: 0;
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 5 5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0H5V5Q5 0 0 0Z' fill='black'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 5 5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0H5V5Q5 0 0 0Z' fill='black'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}

/* ============================================================
   NOTE INPUT MODAL
   Popup dialog for entering/editing note text
   ============================================================ */

.note-input-modal {
    position: fixed;
    width: calc(360px + (var(--markon-modal-frame-inset) * 2));
    height: calc(120px + (var(--markon-modal-frame-inset) * 2));
    min-width: calc(300px + (var(--markon-modal-frame-inset) * 2));
    min-height: calc(104px + (var(--markon-modal-frame-inset) * 2));
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
    overflow: hidden;
    resize: both;
}

.note-input-modal.markon-modal-frame::before,
.note-input-modal.markon-modal-frame::after {
    display: none;
    border: 0;
    box-shadow: none;
}

.note-input-drag-region {
    position: absolute;
    z-index: 2;
    pointer-events: auto;
}

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

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

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

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

.note-input-field {
    position: relative;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    border-radius: var(--markon-radius-lg);
    box-sizing: border-box;
    overflow: hidden;
}

.note-textarea {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 14px 72px 44px 14px;
    border: 1px solid var(--markon-border-emphasis);
    border-radius: inherit;
    background: var(--markon-bg-default);
    color: var(--markon-fg-default);
    font-size: 14px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
    resize: none;
    box-sizing: border-box;
}

.note-textarea:focus {
    border-color: var(--markon-accent);
    outline: 3px solid -webkit-focus-ring-color;
    outline-offset: 0;
}

.note-input-actions {
    position: absolute;
    right: 10px;
    bottom: 10px;
    display: flex;
    gap: 6px;
    align-items: center;
    pointer-events: auto;
    -webkit-user-select: none;
    user-select: none;
}

.note-input-actions button {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--markon-fg-muted);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background-color 0.15s, color 0.15s, opacity 0.15s;
}

.note-input-actions button svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.25;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.note-input-actions button:hover {
    background: var(--markon-bg-muted);
}

.note-input-actions button.note-save {
    background: var(--markon-success);
    color: var(--markon-fg-on-emphasis);
}

.note-input-actions button.note-save:disabled {
    background: color-mix(in srgb, var(--markon-success) 36%, var(--markon-bg-muted));
    color: color-mix(in srgb, var(--markon-fg-default) 42%, transparent);
    cursor: default;
    opacity: 1;
}

.note-input-actions button.note-save:disabled:hover {
    background: color-mix(in srgb, var(--markon-success) 36%, var(--markon-bg-muted));
}

.note-input-actions button.note-save:not(:disabled):hover {
    background: var(--markon-success-hover);
    color: var(--markon-fg-on-emphasis);
}

/* ============================================================
   NOTE MARGIN CARDS
   Sidebar notes displayed on the right side of content
   ============================================================ */

.note-card-margin {
    position: absolute;
    width: var(--markon-note-width, 280px); /* right-rail width — single source of truth in layout.html :root */
    padding: 12px 16px;
    background: var(--markon-bg-elevated);
    /* Flat: a 0.5px hairline border instead of a shadow, with a 3px left stripe
       for symmetry with the TOC. The stripe reuses the soft blue of the
       focused heading-section frame so it reads as a quiet accent, not a heavy
       bar. Single source of truth — layout.html no longer re-declares this. */
    border: 0.5px solid var(--markon-border-default);
    border-left: 3px solid color-mix(in srgb, var(--markon-accent) 30%, transparent);
    border-radius: var(--markon-radius-sm);
    font-size: 13px;
    line-height: 1.6;
    cursor: pointer;
    z-index: var(--markon-z-note-card);
    box-sizing: border-box;
}

.note-card-margin:hover {
    background: color-mix(in srgb, var(--markon-accent) 10%, var(--markon-bg-default));
    border-left-color: color-mix(in srgb, var(--markon-accent) 50%, transparent);
}

.note-card-margin::before {
    content: "";
    position: absolute;
    right: -10px;
    bottom: 100%;
    width: calc(100% + 20px);
    height: 30px;
    pointer-events: none;
    background: transparent;
    clip-path: polygon(54% 0, 100% 0, 100% 100%, 0 100%);
}

.note-card-margin:hover::before {
    pointer-events: auto;
}

.note-card-margin.highlight-active {
    background: color-mix(in srgb, var(--markon-accent) 12%, var(--markon-bg-default));
    /* Active: stripe deepens toward primary, but the rest of the hairline only
       picks up the same soft accent rather than a full-strength frame. */
    border-color: color-mix(in srgb, var(--markon-accent) 30%, transparent);
    border-left-color: var(--markon-accent);
}

.note-card-margin.note-link-target {
    animation: markon-note-link-card-pulse 1.8s ease-out;
}

@keyframes markon-note-link-card-pulse {
    0%,
    100% {
        background: color-mix(in srgb, var(--markon-accent) 12%, var(--markon-bg-default));
        border-color: color-mix(in srgb, var(--markon-accent) 30%, transparent);
        border-left-color: var(--markon-accent);
    }
    24% {
        background: color-mix(in srgb, var(--markon-accent) 22%, var(--markon-bg-default));
        border-color: color-mix(in srgb, var(--markon-accent) 55%, transparent);
        border-left-color: var(--markon-accent);
    }
}

/* ============================================================
   NOTE CONNECTOR
   Dashed S-curve linking the active source highlight to its card
   ============================================================ */

.note-connector-svg {
    z-index: var(--markon-z-note-connector); /* below note cards, above text */
}

.note-connector-path {
    fill: none;
    stroke: var(--markon-accent);
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-dasharray: 5 4;
    opacity: 0;
    transition: opacity 180ms ease;
}

.note-connector-path.is-visible {
    opacity: 0.7;
    animation: markon-note-connector-dash 12s linear infinite;
}

@keyframes markon-note-connector-dash {
    to { stroke-dashoffset: -180; }
}

/* ============================================================
   NOTE ACTION BUTTONS
   Edit and delete buttons for note cards
   ============================================================ */

.note-actions {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    gap: 2px;
    /* One backdrop chip behind the whole cluster so the icons stay legible
       floating over the note text. */
    padding: 1px;
    border-radius: var(--markon-radius-sm);
    background: var(--markon-bg-default);
    border: 0.5px solid var(--markon-border-default);
}

/* Margin card: the cluster floats over the text and only appears on hover, so
   the text uses the full width and no space is reserved for it. */
.note-card-margin .note-actions {
    top: -28px;
    right: 2px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease;
    z-index: 1;
}
.note-card-margin:hover .note-actions {
    opacity: 1;
    pointer-events: auto;
}

/* Flat line-icon actions: no filled circles, a muted stroke that warms on
   hover (delete warms to danger). Icons are stroked SVGs (see note-manager). */
.note-copy,
.note-link,
.note-edit,
.note-delete {
    width: 22px;
    height: 22px;
    border: none;
    background: none;
    border-radius: var(--markon-radius-sm);
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--markon-fg-muted);
    opacity: 0.85;
    transition: color 0.15s, background 0.15s, opacity 0.15s;
}

.note-copy svg,
.note-link svg,
.note-edit svg,
.note-delete svg {
    width: 15px;
    height: 15px;
}

.note-link svg {
    width: 16px;
    height: 16px;
}

.note-copy:hover,
.note-link:hover,
.note-edit:hover {
    color: var(--markon-fg-default);
    background: var(--markon-bg-muted);
    opacity: 1;
}

/* Successful-copy flash: the icon swaps to a check and turns green. */
.note-copy.is-copied {
    color: var(--markon-success);
    opacity: 1;
}

.note-link.is-copied {
    color: var(--markon-success);
    opacity: 1;
}

.note-delete:hover {
    color: var(--markon-danger);
    background: color-mix(in srgb, var(--markon-danger) 12%, transparent);
    opacity: 1;
}

.note-content {
    color: var(--markon-fg-default);
    white-space: pre-wrap;
    word-wrap: break-word;
}

.note-content a {
    color: var(--markon-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* The popup shows its actions persistently (no hover to reveal them). They sit
   as a bare row of icons tucked into the top-right corner — no chip backdrop,
   no separate layer — with the note text flowing full-width beneath. */
.note-popup .note-actions {
    position: static;
    align-self: flex-end;
    margin: 12px 16px 4px 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}
.note-popup .note-content {
    margin: 0 16px 12px;
    padding-right: 0;
}

/* ============================================================
   CONFIRM DIALOG
   Small confirmation popup for destructive actions
   ============================================================ */

.confirm-dialog {
    --markon-modal-surface-border: var(--markon-modal-border-danger);
    position: fixed;
    min-width: 180px;
    max-width: 250px;
}

.confirm-message {
    margin: 10px 12px 10px;
    font-size: 13px;
    color: var(--markon-fg-default);
    line-height: 1.4;
}

.confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin: 0 12px 10px;
}

.confirm-actions button {
    padding: 6px 14px;
    border-radius: var(--markon-radius-sm);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid var(--markon-border-emphasis);
    background: var(--markon-bg-default);
    color: var(--markon-fg-default);
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.confirm-actions button:hover {
    background: var(--markon-bg-muted);
}

/* Specificity raised to `.confirm-actions button.confirm-ok` (0,3,1) so it
   beats the earlier `.confirm-actions button` (0,2,0) generic style. */
.confirm-actions button.confirm-ok {
    background: var(--markon-danger);
    color: var(--markon-fg-on-emphasis);
    border-color: var(--markon-danger);
}

.confirm-actions button.confirm-ok:hover {
    background: var(--markon-danger-hover);
}

/* ============================================================
   HAS-NOTE HIGHLIGHT INTERACTIONS
   Styling for text elements with attached notes
   ============================================================ */

.has-note {
    background-color: var(--markon-hl-note);
    cursor: pointer;
    border-bottom: 2px dotted var(--markon-hl-note-line);
    transition: all 0.2s;
}

.has-note:hover {
    background-color: var(--markon-hl-note-strong);
    border-bottom-color: var(--markon-hl-note-line-strong);
}

.has-note.highlight-active {
    background-color: color-mix(in srgb, var(--markon-accent) 15%, transparent);
    border-bottom: 2px solid var(--markon-accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--markon-accent) 15%, transparent);
}

.has-note.note-link-target {
    animation: markon-note-link-underline-pulse 1.8s ease-out;
    border-bottom-style: solid;
    border-bottom-color: var(--markon-accent);
}

@keyframes markon-note-link-underline-pulse {
    0%,
    100% {
        background-color: color-mix(in srgb, var(--markon-accent) 15%, transparent);
        border-bottom-color: var(--markon-accent);
    }
    24% {
        background-color: color-mix(in srgb, var(--markon-accent) 28%, transparent);
        border-bottom-color: var(--markon-accent);
    }
}

/* ============================================================
   NOTE POPUP (Mobile)
   Floating note display for narrow screens
   ============================================================ */

.note-popup {
    position: fixed;
    display: flex;
    flex-direction: column;
    max-width: 300px;
    --markon-modal-surface-border: var(--markon-modal-border-accent);
    font-size: 13px;
    line-height: 1.6;
    cursor: default;
}

/* ============================================================
   TABLE OF CONTENTS (Mobile)
   Floating TOC button and menu for narrow screens
   ============================================================ */

#toc-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: var(--markon-z-chrome);
}

@media (max-width: 768px) {
    #toc-container {
        right: 10px;
    }
}

/* Collapsed TOC icon = 40×40 circle. When .active is toggled, the icon
   morphs into a close (X) button pinned at the menu's top-right rounded
   corner — same surface, same border, geometry is the only thing changing
   (mirror of how the Live sphere morphs into its panel). */
#toc-icon {
    width: 40px;
    height: 40px;
    background-color: var(--markon-bg-elevated);
    border-radius: 50%;
    cursor: pointer;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* 2.5px border matches the Live sphere's "off" stroke width — same
       visual weight across all three floating-layer family members
       (ToC, Live, Chat). */
    border: 2.5px solid var(--markon-border-emphasis);
    box-sizing: border-box;
}

#toc-icon .toc-bar {
    display: block;
    /* Sized so the ≡ glyph fills a similar share of the 40px sphere as the
       Chat / Live icons (~half); rounded caps echo the Live waves' round
       stroke ends so all three read as one thin-stroke family. */
    width: 20px;
    height: 2px;
    border-radius: 1px;
    background-color: var(--markon-fg-default);
    margin: 2px 0;
}

#toc-icon .toc-close {
    display: none;
    color: var(--markon-fg-default);
    pointer-events: none;
    transition: transform 0.35s ease;
}

/* Hover spin on the X when TOC is open — same playful affordance as the
   Live panel's close button. Rotation is on the icon only; the 40×40 hit
   area on #toc-icon is untouched. */
#toc-container.active #toc-icon:hover .toc-close {
    transform: rotate(180deg);
}

#toc-container .toc {
    --markon-modal-surface-border: var(--markon-modal-border-neutral);
}

/* Mobile TOC styles */
@media (max-width: 1400px) {
    #toc-icon {
        display: flex;
    }

    /* Specificity raised to (1,1,0) via `#toc-container` so this overrides
       the (0,1,0) `.toc` rule that layout.html declares for the same media
       range (position: relative; margin-bottom: 30px; max-width: 100%). */
    #toc-container .toc {
        display: none;
        position: absolute;
        top: 0;
        right: 0;
        left: auto;
        width: 280px;
        max-width: 280px;
        margin-bottom: 0;
        max-height: calc(100vh - 40px);
        overflow-y: auto;
        overscroll-behavior: contain;
        box-sizing: border-box;
    }

    #toc-container.active .toc {
        display: block;
    }

    /* Icon stays visible but becomes the menu's rounded top-right corner.
       The menu owns the border in the expanded state — drop the icon's own
       border so the two don't double up at the TR corner. */
    #toc-container.active #toc-icon {
        position: absolute;
        top: 0;
        right: 0;
        z-index: var(--markon-z-content-overlay);
        border-radius: 0 var(--markon-modal-frame-radius) 0 0;
        background-color: transparent;
        border: none;
    }
    #toc-container.active #toc-icon .toc-bar { display: none; }
    #toc-container.active #toc-icon .toc-close { display: block; }
}

/* TOC styles are now fully controlled by layout.html template based on --theme parameter.
   Do not add @media (prefers-color-scheme) rules here as they would override --theme light/dark. */

/* ============================================================
   SECTION VIEWED FEATURE
   GitHub PR-style "Viewed" checkboxes for sections
   ============================================================ */

.section-actions {
    display: none;
}

.markdown-body :is(h2, h3, h4, h5, h6).heading-focused > .section-actions {
    display: inline;
}

.viewed-checkbox-label {
    margin-left: 0.75rem;
    font-size: var(--markon-ui-font-size);
    font-family: var(--markon-ui-font);
    font-weight: normal;
    color: var(--markon-fg-muted);
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    vertical-align: middle;
    transition: opacity 0.2s;
    /* Prevent triggering annotation toolbar */
    pointer-events: auto;
}

.viewed-checkbox-label:hover {
    opacity: 0.8;
}

.viewed-checkbox {
    cursor: pointer;
    width: 15px;
    height: 15px;
    margin: 0;
    vertical-align: middle;
}

/* .viewed-text needs no rules of its own — it is styled entirely by
   .section-action below. */

/* Common section action button style */
.section-action {
    font-size: var(--markon-ui-font-size);
    font-family: var(--markon-ui-font);
    color: var(--markon-fg-muted);
    font-weight: normal;
    cursor: pointer;
    margin-left: 0.5em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    vertical-align: middle;
    transition: opacity 0.2s;
    pointer-events: auto;
}

.section-action:hover {
    color: var(--markon-fg-default);
}

.section-action.is-disabled,
.section-action[aria-disabled="true"] {
    color: var(--markon-fg-muted);
    cursor: default;
    opacity: 0.55;
}

.section-action.is-disabled:hover,
.section-action[aria-disabled="true"]:hover {
    color: var(--markon-fg-muted);
}

/* Section action that immediately follows a separator needs no extra left margin */
.section-action-separator + .section-action {
    margin-left: 0;
}

/* Section action separator */
.section-action-separator {
    margin: 0 0.25rem;
    font-size: var(--markon-ui-font-size);
    color: var(--markon-fg-muted);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    vertical-align: middle;
}

/* Print section container - hidden by default */
.print-section-container {
    display: none;
}

/* Collapsed section styles */
.section-collapsed {
    cursor: pointer;
    opacity: var(--markon-collapsed-opacity);
    transition: opacity 0.2s ease;
    position: relative;
}

.section-collapsed:hover {
    opacity: var(--markon-collapsed-opacity-hover);
}

/* The expand/collapse toggle (.section-expand-toggle) needs no rules of its
   own — it is styled entirely by .section-action above. */

/* Temporarily expanded section (viewed but expanded) */
.section-collapsed.section-temp-expanded {
    opacity: 1;
}

/* Placeholder row shown below a collapsed heading */
.section-collapsed-placeholder {
    cursor: pointer;
    padding: 4px 10px;
    margin: 2px 0 12px;
    font-size: 12px;
    color: var(--color-fg-muted, var(--markon-fg-muted));
    font-style: italic;
    opacity: 0.65;
    transition: opacity 0.15s ease, background 0.15s ease;
    border-radius: var(--markon-radius-sm);
    -webkit-user-select: none;
    user-select: none;
}
.section-collapsed-placeholder::before {
    content: "⋯ ";
    margin-right: 4px;
    letter-spacing: 1px;
}
.section-collapsed-placeholder:hover {
    opacity: 1;
    background: var(--color-neutral-muted, rgba(175,184,193,0.15));
}

/* Hide section content when collapsed with smooth animation.
   Specificity raised to (0,2,0) via `.markdown-body` so margin / padding
   zero-out beats github-markdown's `.markdown-body p|ul|ol|table|pre` rules
   (each 0,1,1). The element this class lands on is a direct child of
   .markdown-body so the descendant combinator is sufficient. */
.markdown-body .section-content-hidden {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
    /* Collapse: fade out quickly, then shrink height */
    transition: opacity 0.2s ease-out, max-height 0.35s ease-out 0.05s, margin 0.35s ease-out 0.05s, padding 0.35s ease-out 0.05s;
}

/* Show content when temporarily expanded (controlled by JS).
   Same specificity-raise logic as `.section-content-hidden` above. */
.markdown-body .section-content-temp-visible {
    max-height: 10000px;
    opacity: 1;
    /* Expand: completely reverse of collapse - expand height, and fade in with 0.05s delay */
    transition: max-height 0.35s ease-out, margin 0.35s ease-out, padding 0.35s ease-out, opacity 0.2s ease-out 0.05s;
}

/* Add transition to elements that might be collapsed (performance optimization) */
.markdown-body > * {
    transition: opacity 0.2s ease-out, max-height 0.35s ease-out, margin 0.35s ease-out, padding 0.35s ease-out;
}

/* Dark theme adjustments — handled automatically by --markon-fg-muted token */


/* ============================================================
   VIEWED TOOLBAR
   Lightweight text-based controls for viewed sections (inline in H1)
   ============================================================ */

.viewed-toolbar {
    margin-left: 0.75rem;
    font-size: var(--markon-ui-font-size);
    font-family: var(--markon-ui-font);
    font-weight: normal;
    color: var(--markon-fg-muted);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    /* Plain inline flow so the items wrap line-by-line naturally (like the
       per-section action rows) — no inline-flex atomic box, no JS placement. */
    display: inline;
    vertical-align: middle;
}

/* "| label" is the atomic unit: it never breaks internally (separator stays
   with its label, multi-word labels stay whole). Wrapping happens only at the
   whitespace BETWEEN units. */
.viewed-toolbar-item {
    white-space: nowrap;
}

.viewed-toolbar a {
    color: var(--markon-accent);
    text-decoration: none;
    cursor: pointer;
    padding: 2px 4px;
    transition: color 0.2s;
    font-size: 0.8125rem;
}

.viewed-toolbar a:hover {
    color: var(--markon-accent-hover);
}

.viewed-toolbar a.is-disabled,
.viewed-toolbar a[aria-disabled="true"],
.viewed-toolbar a.is-disabled:hover,
.viewed-toolbar a[aria-disabled="true"]:hover {
    color: var(--markon-fg-muted);
    cursor: default;
    text-decoration: none;
}

.viewed-toolbar-separator {
    color: var(--markon-fg-muted);
    margin: 0 4px;
    font-size: var(--markon-ui-font-size);
}

/* The All-Viewed toggle now lives inside the toolbar row; the row's gap +
   separators handle spacing, so drop its standalone left margin. */
.viewed-toolbar .viewed-checkbox-label {
    margin-left: 0;
}

/* When the bar can't fit after the title it's relocated below the heading as
   its own row (JS toggles this) — a normal flex line, not wrapped in the H1. */

/* Dark theme adjustments — now handled by CSS variables above */

/* ============================================================
   TOC VIEWED STATE HIGHLIGHTING
   Highlight TOC items based on viewed state
   ============================================================ */

/* `.toc-item.viewed > a` is (0,3,0); beats layout.html's `.toc-item a` (0,2,0)
   on specificity, so no !important is needed. The dark variants add an
   attribute selector for theme switching. */
.toc-item.viewed > a {
    color: var(--markon-success);
    font-weight: 500;
}

.toc-item.viewed > a:hover {
    color: var(--markon-success-hover);
}
/* Dark adjustments are automatic — --markon-success carries a dark variant. */

/* ============================================================
   TOC Keyboard Navigation Focus Styles
   ============================================================ */

/* Keyboard focus (destination) - hollow border, no background */
.toc-item a.toc-focused {
    outline: 2px solid var(--markon-accent);
    outline-offset: 2px;
    border-radius: var(--markon-radius-sm);
}

/* Current page position - solid background (already defined in layout.html) */
/* .toc-item a.active has solid background */

/* Note: TOC navigation active border styles are defined in layout.html template
   to match the theme setting (dark/light/auto) */

/* ============================================================
   TOC Collapse/Expand Indicators
   ============================================================ */

.toc-collapse-indicator {
    display: inline-block;
    width: 1em;
    font-size: 0.75em;
    opacity: 0.6;
    user-select: none;
}

/* ============================================================
   PRINT STYLES
   Hide viewed UI elements when printing.
   All `!important` declarations inside this block are intentional:
   print rules must force-override the screen cascade (including
   github-markdown.css and the inline <style> rules in layout.html)
   so layout doesn't leak into printed output.
   ============================================================ */

@media print {
    /* When printing a specific section, hide everything else */
    /* With unique marker IDs in cloned SVG, we can safely use display:none */
    body:has(.print-section-container) > *:not(.print-section-container) {
        display: none !important;
    }

    /* Show only the print section container */
    .print-section-container {
        display: block !important;
    }

    /* Hide interactive elements in print section container */
    .print-section-container .section-action-separator,
    .print-section-container .section-print-btn {
        display: none !important;
    }

    /* Hide viewed checkboxes and labels */
    .viewed-checkbox-label {
        display: none !important;
    }

    /* Hide expand/collapse toggle */
    .section-expand-toggle {
        display: none !important;
    }

    /* Hide viewed toolbar */
    .viewed-toolbar {
        display: none !important;
    }

    /* Remove collapsed state - show all content when printing */
    .section-collapsed {
        opacity: 1 !important;
        cursor: default !important;
    }

    .section-content-hidden {
        max-height: none !important;
        opacity: 1 !important;
        margin: inherit !important;
        padding: inherit !important;
    }

    /* Reset heading section for print */
    .heading-section {
        padding: 0 !important;
        border: none !important;
    }

    /* Reset heading margins for print */
    .markdown-body h1,
    .markdown-body h2,
    .markdown-body h3,
    .markdown-body h4,
    .markdown-body h5,
    .markdown-body h6 {
        margin-top: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 !important;
    }

    /* Remove TOC viewed highlighting in print */
    .toc-item.viewed > a {
        color: inherit !important;
        font-weight: normal !important;
    }
}

/* Highlight flash animation for navigation */
@keyframes highlight-flash {
    0% {
        background-color: transparent;
        box-shadow: none;
    }
    50% {
        background-color: rgba(255, 223, 0, 0.3);
        box-shadow: 0 0 8px rgba(255, 223, 0, 0.5);
    }
    100% {
        background-color: transparent;
        box-shadow: none;
    }
}

.highlight-flash {
    animation: highlight-flash 1s ease-in-out;
}

/* ============================================================
   WORKSPACE SPOTLIGHT
   Reusable workspace file/content search used by document and workspace pages.
   ============================================================ */

.workspace-spotlight-trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: 145px;
    height: 34px;
    padding: 0 12px;
    border: 1px solid var(--markon-border-default);
    border-radius: calc(var(--markon-radius-lg) * 2);
    background: var(--markon-bg-default);
    color: var(--markon-fg-muted);
    cursor: pointer;
    box-sizing: border-box;
}

.workspace-spotlight-trigger:hover,
.workspace-spotlight-trigger:focus-visible {
    color: var(--markon-fg-default);
    background: var(--markon-bg-muted);
    border-color: var(--markon-border-emphasis);
    outline: none;
}

.workspace-spotlight-trigger-icon {
    display: block;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.workspace-spotlight-trigger-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: var(--markon-fg-muted);
    font: 0.875rem/1 var(--markon-ui-font);
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workspace-spotlight-trigger-kbd {
    min-width: 20px;
    padding: 2px 6px;
    border: 1px solid var(--markon-border-default);
    border-radius: var(--markon-radius-sm);
    background: var(--markon-bg-muted);
    color: var(--markon-fg-muted);
    font: 0.72rem/1 var(--markon-mono);
    text-align: center;
    box-sizing: border-box;
}

body.workspace-spotlight-open {
    overflow: hidden;
}

.workspace-spotlight-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(42px, 12vh, 96px) 18px 18px;
    box-sizing: border-box;
    overscroll-behavior: none;
}

.workspace-spotlight-overlay.is-open {
    display: flex;
}

.workspace-spotlight-scrim {
    position: fixed;
    inset: 0;
}

.workspace-spotlight-panel {
    position: relative;
    z-index: 1;
    width: min(720px, 100%);
    max-height: min(720px, calc(100vh - 72px));
    backdrop-filter: blur(18px) saturate(1.35);
    -webkit-backdrop-filter: blur(18px) saturate(1.35);
    color: var(--markon-fg-default);
    overscroll-behavior: contain;
}

.workspace-spotlight-input-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 52px;
    padding: 0 14px;
    border-bottom: 1px solid var(--markon-border-default);
    box-sizing: border-box;
}

.workspace-spotlight-search-icon {
    position: relative;
    top: -1px;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    border: 2px solid var(--markon-fg-muted);
    border-radius: 50%;
    box-sizing: border-box;
    opacity: 0.9;
}

.workspace-spotlight-search-icon::after {
    content: "";
    position: absolute;
    right: -5px;
    bottom: -4px;
    width: 8px;
    height: 2px;
    border-radius: 2px;
    background: var(--markon-fg-muted);
    transform: rotate(45deg);
}

.workspace-spotlight-input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--markon-fg-default);
    font: 17px/1.35 var(--markon-ui-font);
}

.workspace-spotlight-input::placeholder {
    color: var(--markon-fg-muted);
}

.workspace-spotlight-results {
    position: relative;
    z-index: 1;
    max-height: calc(min(720px, 100vh - 72px) - 64px);
    margin: 0;
    padding: 8px;
    overflow: auto;
    list-style: none;
    overscroll-behavior: contain;
}

.workspace-spotlight-results li {
    margin: 0;
    padding: 0;
}

.workspace-spotlight-section-label {
    padding: 10px 10px 5px;
    color: var(--markon-fg-muted);
    font: 700 11px/1.2 var(--markon-ui-font);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.workspace-spotlight-results li:not(.workspace-spotlight-section-label):not(.workspace-spotlight-status-row) + .workspace-spotlight-section-label {
    margin-top: 16px;
    padding-top: 12px;
}

.workspace-spotlight-result {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 7px 10px;
    border-radius: var(--markon-radius-sm);
    color: var(--markon-fg-default) !important;
    font: 15px/1.35 var(--markon-ui-font);
    text-decoration: none !important;
    box-sizing: border-box;
}

.workspace-spotlight-result--content {
    align-items: flex-start;
    min-height: 68px;
}

.workspace-spotlight-result:hover {
    background: var(--markon-bg-muted);
}

.workspace-spotlight-result.is-active {
    background: color-mix(in srgb, var(--markon-accent) 12%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--markon-accent) 45%, transparent);
}

.workspace-spotlight-result.is-current .workspace-spotlight-result-path {
    font-weight: 650;
}

.workspace-spotlight-file-icon {
    position: relative;
    flex: 0 0 18px;
    width: 15px;
    height: 18px;
    border: 2px solid var(--markon-fg-muted);
    border-radius: 2px;
    box-sizing: border-box;
    opacity: 0.8;
}

.workspace-spotlight-file-icon::after {
    content: "";
    position: absolute;
    top: -2px;
    right: -2px;
    width: 7px;
    height: 7px;
    border-left: 2px solid var(--markon-fg-muted);
    border-bottom: 2px solid var(--markon-fg-muted);
    background: var(--markon-bg-overlay);
    box-sizing: border-box;
}

.workspace-spotlight-result.is-active .workspace-spotlight-file-icon::after {
    background: color-mix(in srgb, var(--markon-accent) 12%, var(--markon-bg-overlay));
}

.workspace-spotlight-result-path {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workspace-spotlight-result-main {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.workspace-spotlight-result-title {
    min-width: 0;
    overflow: hidden;
    color: var(--markon-fg-default);
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workspace-spotlight-result-main .workspace-spotlight-result-path {
    color: var(--markon-fg-muted);
    font-size: 12px;
}

.workspace-spotlight-result-snippet {
    display: -webkit-box;
    overflow: hidden;
    color: var(--markon-fg-muted);
    font-size: 12px;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.workspace-spotlight-result-snippet b {
    color: var(--markon-fg-default);
    font-weight: 750;
}

.workspace-spotlight-result-path strong {
    font-weight: 750;
    color: var(--markon-fg-default);
}

.workspace-spotlight-result-badge {
    flex: 0 0 auto;
    color: var(--markon-fg-muted);
    font-size: 12px;
    font-weight: 600;
}

.workspace-spotlight-empty {
    position: relative;
    z-index: 1;
    padding: 28px 16px 32px;
    color: var(--markon-fg-muted);
    font: 14px/1.45 var(--markon-ui-font);
    text-align: center;
}

.workspace-spotlight-status-row {
    padding: 8px 10px 12px;
    color: var(--markon-fg-muted);
    font: 12px/1.35 var(--markon-ui-font);
}

/* ============================================================
   EDITOR MODAL
   Minimalist Markdown source editor with line numbers
   ============================================================ */

.editor-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--markon-z-chrome);
    background-color: var(--mk-editor-bg);
    display: flex;
    flex-direction: column;
}

/* Header */
.editor-header {
    display: flex;
    align-items: center;
    gap: 16px;
    /* Shared overlay-bar metrics — same fixed height as the export header. */
    height: var(--markon-bar-height);
    flex-shrink: 0;
    padding: 0 var(--markon-bar-pad-x);
    box-sizing: border-box;
    background-color: var(--mk-editor-header-bg);
    border-bottom: 1px solid var(--mk-editor-header-border);
}

.editor-close {
    background: none;
    border: none;
    color: var(--mk-editor-chrome-fg);
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
    transition: color 0.2s;
    flex-shrink: 0;
}

.editor-close:hover {
    color: var(--mk-editor-chrome-fg-strong);
}

.editor-file-name {
    flex: 1;
    font-family: monospace;
    color: var(--mk-editor-chrome-fg-strong);
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Body */
.editor-body {
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

/* Split layout */
.editor-split {
    display: flex;
    height: 100%;
    overflow: hidden;
    --editor-split-left: 50%;
}

.editor-pane {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

.editor-pane-source {
    width: var(--editor-split-left);
    flex-shrink: 0;
}

.editor-pane-preview {
    flex: 1;
    overflow-y: auto;
    background-color: var(--markon-bg-default);
}

.editor-split-divider {
    width: 5px;
    flex-shrink: 0;
    background-color: var(--mk-editor-divider);
    cursor: col-resize;
    transition: background-color 0.15s;
}

.editor-split-divider:hover,
.editor-split-divider:active {
    background-color: var(--mk-editor-accent);
}

/* Preview content: reset body styles, use markdown-body */
.editor-preview-content {
    padding: 20px 24px;
    box-sizing: border-box;
    min-height: 100%;
    background-color: var(--markon-bg-default);
    color: var(--markon-fg-default);
}

/* Narrow-screen tab bar */
.editor-tab-bar {
    display: none;
    gap: 0;
}

.editor-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--mk-editor-chrome-fg);
    font-size: 13px;
    padding: 4px 14px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

.editor-tab:hover {
    color: var(--mk-editor-chrome-fg-strong);
}

.editor-tab.active {
    color: var(--mk-editor-chrome-fg-strong);
    border-bottom-color: var(--mk-editor-accent);
}

.editor-container {
    display: flex;
    height: 100%;
    overflow: hidden;
}

/* Line numbers gutter */
.editor-line-numbers {
    flex-shrink: 0;
    width: 50px;
    overflow-y: hidden;
    overflow-x: hidden;
    background-color: var(--mk-editor-gutter-bg);
    border-right: 1px solid var(--mk-editor-gutter-border);
    padding: 0;
    user-select: none;
    text-align: right;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.6;
    color: var(--mk-editor-gutter-fg);
}

.editor-line-number {
    padding-right: 12px;
    height: 22.4px; /* Match line-height of textarea (14px * 1.6) */
}

/* Text container (holds both highlight layer and textarea) */
.editor-text-container {
    flex: 1;
    position: relative;
    height: 100%;
    overflow: hidden;
}

/* Highlight layer (background, with syntax coloring) */
.editor-highlight-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 0 0 0 12px;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-y: auto;
    overflow-x: auto;
    pointer-events: none;
    background-color: var(--mk-editor-bg);
    color: var(--mk-editor-fg);
    tab-size: 4;
    scrollbar-width: none; /* Firefox */
}

.editor-highlight-layer::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.editor-highlight-layer code {
    display: block;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    white-space: inherit;
    word-wrap: inherit;
}

/* Textarea (foreground, transparent) */
.editor-textarea {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: transparent;
    color: transparent;
    caret-color: var(--mk-editor-caret);
    border: none;
    outline: none;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.6;
    padding: 0 0 0 12px;
    resize: none;
    tab-size: 4;
    overflow-y: auto;
    overflow-x: auto;
}

.editor-textarea::selection {
    background-color: var(--mk-editor-selection);
    color: transparent;
}

/* Markdown syntax highlighting — colours come from the active editor
   preset (--mk-editor-syn-*; follow-page tracks data-theme). */
.md-header {
    color: var(--mk-editor-syn-header);
    font-weight: bold;
}

.md-header-text {
    color: var(--mk-editor-syn-header-text);
    font-weight: bold;
}

.md-bold {
    color: var(--mk-editor-syn-bold);
    font-weight: bold;
}

.md-italic {
    color: var(--mk-editor-syn-italic);
    font-style: italic;
}

.md-code {
    color: var(--mk-editor-syn-code);
    background-color: var(--mk-editor-syn-code-bg);
}

.md-code-fence {
    color: var(--mk-editor-syn-fence);
}

.md-link {
    color: var(--mk-editor-syn-link);
}

.md-image {
    color: var(--mk-editor-syn-image);
}

.md-quote {
    color: var(--mk-editor-syn-quote);
}

.md-list {
    color: var(--mk-editor-syn-list);
}

.md-hr {
    color: var(--mk-editor-syn-hr);
}


.editor-save-btn {
    background-color: var(--mk-editor-btn-bg);
    color: var(--mk-editor-btn-fg);
    border: none;
    padding: 6px 16px;
    font-size: 13px;
    cursor: pointer;
    border-radius: 2px;
    transition: background-color 0.2s;
    flex-shrink: 0;
}

.editor-save-btn:hover {
    background-color: var(--mk-editor-btn-bg-hover);
}

.editor-save-btn:active {
    background-color: var(--mk-editor-btn-bg-active);
}

.editor-save-btn:disabled {
    background-color: var(--mk-editor-btn-disabled-bg);
    color: var(--mk-editor-btn-disabled-fg);
    cursor: not-allowed;
}

.editor-save-btn.has-changes {
    background-color: var(--mk-editor-btn-changes-bg);
}

.editor-save-btn.has-changes:hover {
    background-color: var(--mk-editor-btn-changes-bg-hover);
}

/* Editor status text — theme-following like the rest of the chrome. The
   old prefers-color-scheme light override is gone: the editor now themes
   through the --mk-editor-* preset layer (default "follow page"), so a
   single base rule covers both themes. */
.editor-status {
    color: var(--markon-fg-muted);
}

/* ============================================================
   EDITOR LAYOUT TOGGLE
   Segmented control for split ↔ full-width layout
   ============================================================ */

/* Segmented control: [ split | full ]. One unified pill framed by a single
   primary-coloured border; the active segment fills with the same primary
   token. The inner segments never carry a border in any state, keeping the
   control as simple as possible. Vertical padding matches the sibling Copy /
   Download buttons so the whole control sits level with them. */
.editor-layout-toggle {
    display: inline-flex;
    align-items: stretch;
    background: var(--markon-bg-muted);
    border-radius: var(--markon-radius-sm);
    /* Frame drawn as an inset outline rather than a border: a border would sit
       between the rounded `overflow:hidden` clip and the filled segment, leaving
       a 1px ring of the track colour at the corners. An outline paints on top of
       the segments and isn't clipped by the element's own overflow, so the
       active fill reaches the edge cleanly with no seam. */
    outline: 1px solid var(--markon-border-default);
    outline-offset: -1px;
    overflow: hidden;
    padding: 0;
    flex-shrink: 0;
}

.editor-layout-btn {
    background: none;
    border: none;
    color: var(--markon-fg-muted);
    padding: 6px 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background-color 0.15s;
    line-height: 1;
}

.editor-layout-btn:hover:not(.active) {
    color: var(--markon-fg-default);
    background-color: color-mix(in srgb, var(--markon-fg-default) 8%, transparent);
}

/* Selected segment: a soft brand tint — a pale-blue pill (clearly lighter +
   bluer than the grey track) with a blue icon. Clearly legible without the
   saturated fill that pulled the eye before. */
.editor-layout-btn.active {
    color: var(--markon-accent);
    background-color: color-mix(in srgb, var(--markon-accent) 15%, var(--markon-bg-default));
}

/* ============================================================
   RESPONSIVE: narrow screens (≤768px)
   Single pane + top tab bar
   ============================================================ */
@media (max-width: 768px) {
    .editor-tab-bar {
        display: flex;
    }

    /* Hide layout toggle on narrow screens — tab bar takes over */
    .editor-layout-toggle {
        display: none;
    }

    .editor-split {
        flex-direction: column;
    }

    .editor-split-divider {
        display: none;
    }

    .editor-pane-source {
        width: 100%;
        flex: 1;
    }

    .editor-pane-preview {
        flex: 1;
        display: none; /* shown via JS when tab=preview */
    }
}

/* ============================================================
   DARK THEME: preview pane / split / tab overrides
   Preview canvas + text are driven by --markon-bg-default / --markon-fg-default
   tokens (see :root + html[data-theme="dark"] at top of file). The
   rules below remain dark-only because the *light* IDE chrome
   (split-divider, tab) intentionally uses VS Code chrome colors.
   ============================================================ */
html[data-theme="dark"] .editor-split-divider {
    background-color: var(--markon-border-default);
}

html[data-theme="dark"] .editor-split-divider:hover,
html[data-theme="dark"] .editor-split-divider:active {
    background-color: var(--markon-accent);
}

html[data-theme="dark"] .editor-tab {
    color: var(--markon-fg-muted);
}

html[data-theme="dark"] .editor-tab:hover {
    color: var(--markon-fg-default);
}

html[data-theme="dark"] .editor-tab.active {
    color: var(--markon-fg-default);
    border-bottom-color: var(--markon-accent);
}

/* ─────────────────────────────────────────────────────────────────────────
   Notes export: per-item quick copy + export editor
   ───────────────────────────────────────────────────────────────────────── */

/* Note-card / popup quick-copy button is styled with .note-edit / .note-delete
   as one flat line-icon family (see the rule near the note-actions block). */

/* Transient "Copied" feedback shown beside an icon copy button (clipboard.ts
   flashBeside) — just text, no pill, fading next to the anchor. */
.markon-copy-flash {
    position: fixed;
    z-index: var(--markon-z-chrome-top);
    transform: translate(-100%, -50%) translateX(-8px);
    color: var(--markon-fg-muted);
    font-size: 12px;
    line-height: 1.4;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.markon-copy-flash.is-visible {
    opacity: 1;
}

.markon-notification-stack {
    position: fixed;
    top: calc(16px + env(safe-area-inset-top));
    right: calc(18px + env(safe-area-inset-right));
    z-index: var(--markon-z-modal-layer);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    width: min(390px, calc(100vw - 32px));
    pointer-events: none;
}

.markon-notification {
    --markon-notification-accent: var(--markon-accent);
    width: min(360px, 100%);
    max-width: 100%;
    max-height: 240px;
    overflow: hidden;
    opacity: 0;
    transform: translateX(14px) scale(0.985);
    pointer-events: auto;
    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        max-height 0.24s ease,
        margin 0.24s ease;
}

.markon-notification.is-success {
    --markon-notification-accent: var(--markon-success);
    --markon-modal-surface-border: var(--markon-modal-border-success);
}

.markon-notification.is-warning {
    --markon-notification-accent: var(--markon-warning);
    --markon-modal-surface-border: var(--markon-modal-border-accent);
}

.markon-notification.is-danger {
    --markon-notification-accent: var(--markon-danger);
    --markon-modal-surface-border: var(--markon-modal-border-danger);
}

.markon-notification-content {
    display: grid;
    grid-template-columns: 8px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: start;
    padding: 10px 11px 10px 10px;
}

.markon-notification-dot {
    width: 8px;
    height: 8px;
    margin-top: 6px;
    border-radius: 999px;
    background: var(--markon-notification-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--markon-notification-accent) 13%, transparent);
}

.markon-notification-title {
    margin-bottom: 2px;
    color: var(--markon-fg-default);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
}

.markon-notification-message {
    color: var(--markon-fg-muted);
    font-size: 13px;
    line-height: 1.35;
    overflow-wrap: anywhere;
    text-align: left;
}

.markon-notification-close {
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--markon-fg-muted);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    display: grid;
    place-items: center;
}

.markon-notification-close:hover {
    background: var(--markon-bg-muted);
    color: var(--markon-fg-default);
}

.markon-notification.is-visible {
    opacity: 1;
    transform: translateX(0) scale(1);
}

.markon-notification.is-leaving {
    margin: 0;
    opacity: 0;
    transform: translateX(14px) scale(0.985);
}

/* Background scroll lock applied to <html> while a full-screen editor is open
   — blocks wheel scroll-through to the page behind. */
.markon-scroll-lock {
    overflow: hidden !important;
}

/* ── Export-mode editor (Copy / Download / optional Back) ──────────────── */
.editor-copy-btn,
.editor-back-btn {
    border: 1px solid var(--markon-border-emphasis);
    background: var(--markon-bg-default);
    color: var(--markon-fg-default);
    padding: 6px 14px;
    font-size: 13px;
    border-radius: var(--markon-radius-sm);
    cursor: pointer;
    flex-shrink: 0;
}

.editor-copy-btn:hover,
.editor-back-btn:hover {
    background: var(--markon-bg-muted);
}

/* Download = the primary-filled twin of the outlined Copy / Back buttons:
   same radius, padding and height so the header reads as one button family. */
/* Download is a peer of Copy, not a primary CTA — same outline style. */
.editor-download-btn {
    display: block;
    padding: 6px 14px;
    font-size: 13px;
    border: 1px solid var(--markon-border-emphasis);
    border-radius: var(--markon-radius-sm);
    background: var(--markon-bg-default);
    color: var(--markon-fg-default);
    cursor: pointer;
}

.editor-download-btn:hover {
    background: var(--markon-bg-muted);
    border-color: var(--markon-border-emphasis);
}