/* ==========================================================================
   Live mode: rendered blocks, the block being edited (its Markdown source,
   styled like the rendered text), and the code and formula editors
   ========================================================================== */

.live-scroll:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.live-doc {
    max-width: var(--doc-width);
    padding: 40px 56px 140px 72px;
}

/* Typewriter mode: the last line can still scroll up to the middle */
.live-doc[data-typewriter="on"] {
    padding-bottom: 50vh;
}

/* An empty document */
.live-doc.is-empty:not(.has-active)::before {
    content: attr(data-placeholder);
    color: var(--faint);
    cursor: text;
}

/* --- Blocks ---------------------------------------------------------------- */

/* Margins live on the block, so they collapse between blocks as they would
   between the elements of one rendered page */
.lv-block {
    position: relative;
    margin: 0 0 1em;
    border-radius: 6px;
    cursor: text;
    /* Off-screen blocks skip layout and paint; "auto" remembers their size */
    content-visibility: auto;
    contain-intrinsic-size: auto 28px;
    transition: opacity 0.2s ease;
}

.live-doc > .lv-block:first-child {
    margin-top: 0;
}

.live-doc .lv-block > :first-child {
    margin-top: 0;
}

.live-doc .lv-block > :last-child {
    margin-bottom: 0;
}

.lv-k-h1 { margin: 2.64em 0 0.88em; }
.lv-k-h2 { margin: 2.7em 0 1.07em; }
.lv-k-h3 { margin: 2.28em 0 0.9em; }
.lv-k-h4 { margin: 2em 0 0.8em; }
.lv-k-h5 { margin: 1.9em 0 0.75em; }
.lv-k-h6 { margin: 1.8em 0 0.7em; }
.lv-k-hr { margin: 1.75em 0; }

/* The block being edited is on screen, and its focus ring must not be clipped */
.lv-block.is-active {
    content-visibility: visible;
}

.lv-block:not(.is-active):hover {
    background: color-mix(in oklab, var(--accent) 4%, transparent);
    box-shadow: 0 0 0 6px color-mix(in oklab, var(--accent) 4%, transparent);
}

.live-doc .task-check {
    cursor: pointer;
}

/* Focus mode: everything but the block being edited fades (live.js only
   turns it on while a block is being edited) */
.live-doc[data-focus="on"] .lv-block:not(.is-active) {
    opacity: 0.28;
}

/* Blocks that render to nothing (link definitions, comments) */
.lv-raw {
    font-family: var(--font-mono);
    font-size: 0.86em;
    color: var(--syntax);
    white-space: pre-wrap;
}

/* --- The block being edited ---------------------------------------------- */

.lv-src {
    position: relative;
    min-height: 1.85em;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    tab-size: 4;
    outline: none;
    caret-color: var(--accent);
}

.lv-src.is-empty::after {
    content: attr(data-placeholder);
    position: absolute;
    top: 0;
    left: 0;
    color: var(--faint);
    pointer-events: none;
}

.lv-src.lv-mono {
    font-family: var(--font-mono);
    font-size: 0.87em;
}

.lv-src.lv-table {
    white-space: pre;
    overflow-x: auto;
}

/* Markdown markers; the text keeps its rendered weight, size and colour */
.lv-src .t-mark {
    color: var(--syntax);
    font-weight: 400;
    font-style: normal;
    text-decoration: none;
}

.lv-src .t-heading {
    font-weight: inherit;
    color: inherit;
}

.lv-src .t-bold {
    font-weight: 600;
    color: var(--text-strong);
}

.lv-src .t-strike {
    text-decoration-color: var(--muted);
}

.lv-src .t-hl {
    padding: 1px 4px;
    border-radius: 4px;
}

.lv-src .t-code {
    padding: 2px 6px;
    margin: 0 1px;
    border-radius: 6px;
    background: var(--inline-code-bg);
    font-family: var(--font-mono);
    font-size: 0.86em;
}

.lv-src .t-math,
.lv-src .t-url,
.lv-src .t-html,
.lv-src .t-list {
    font-family: var(--font-mono);
    font-size: 0.88em;
}

.lv-src .t-math {
    color: var(--link);
}

.lv-src .t-url,
.lv-src .t-html {
    color: var(--syntax);
    text-decoration: none;
}

.lv-src .t-link {
    color: var(--link);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: color-mix(in oklab, var(--link) 40%, transparent);
    text-underline-offset: 3px;
}

.lv-mono .t-mark,
.lv-mono .t-code,
.lv-mono .t-math,
.lv-mono .t-url,
.lv-mono .t-html,
.lv-mono .t-list {
    font-size: inherit;
}

/* Lists and quotes being edited: only the lines with the caret or the
   selection (.is-caret) show their markers. The others keep them in place,
   transparent, and draw what the rendered list shows there (live.js sets
   data-m and data-n), so no text moves when the caret changes lines. */
.lv-line:not(.is-caret) .t-list > .t-mark,
.lv-line:not(.is-caret) .t-quote > .t-mark {
    color: transparent;
}

.lv-line:not(.is-caret) .t-list[data-m]::before {
    content: "";
    display: inline-block;
    box-sizing: border-box;
    width: 5px;
    height: 5px;
    margin: 0 -10px 0 5px;
    vertical-align: middle;
}

.lv-line:not(.is-caret) .t-list[data-m="disc"]::before {
    border-radius: 50%;
    background: var(--marker);
}

.lv-line:not(.is-caret) .t-list[data-m="circle"]::before {
    border: 1px solid var(--marker);
    border-radius: 50%;
}

.lv-line:not(.is-caret) .t-list[data-m="square"]::before {
    background: var(--marker);
}

/* The number in the text's font, from where the marker starts */
.lv-line:not(.is-caret) .t-list[data-m="num"]::before {
    content: attr(data-n);
    width: 0;
    height: auto;
    margin: 0;
    vertical-align: baseline;
    white-space: nowrap;
    font-family: var(--font-doc);
    font-size: calc(100% / 0.88);
    color: var(--marker);
}

/* A task's box, as .task-check in preview.css */
.lv-line:not(.is-caret) .t-list[data-m="task"]::before,
.lv-line:not(.is-caret) .t-list[data-m="done"]::before {
    width: 18px;
    height: 18px;
    margin: 0 -18px 0 0;
    vertical-align: -3px;
    border: 1.5px solid var(--border-strong);
    border-radius: 5px;
    background: var(--surface);
}

.lv-line:not(.is-caret) .t-list[data-m="done"]::before {
    border-color: var(--ink);
    background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / 12px no-repeat;
}

:root[data-theme="dark"] .lv-line:not(.is-caret) .t-list[data-m="done"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E1213' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E");
}

/* An image stays visible under its source line while it is edited. Each
   one is in a span as wide as it shows (its width attribute moves there);
   the selected one has a ring, corner handles that drag its width, and
   room above it for the image toolbar (live-tools.js). */
.lv-media {
    margin-top: 8px;
    cursor: default;
}

.lv-img {
    position: relative;
    display: block;
    width: fit-content;
    max-width: 100%;
}

.lv-img + .lv-img {
    margin-top: 8px;
}

.lv-img[data-align="center"] {
    margin-left: auto;
    margin-right: auto;
}

.lv-img[data-align="right"] {
    margin-left: auto;
}

.lv-img > img {
    display: block;
}

.lv-img.has-width > img {
    width: 100%;
}

/* (the toolbar is 42px tall, 8px above the image; this margin and that of
   .lv-media collapse) */
.lv-img.is-selected {
    margin-top: 56px;
}

.lv-img.is-selected > img {
    outline: 1px solid var(--accent);
    box-shadow: 0 0 0 3px var(--accent-ring);
}

/* 10px squares on the corners; what can be grabbed is a little larger
   (larger still on touch screens) */
.lv-img-handle {
    position: absolute;
    z-index: 1;
    width: 20px;
    height: 20px;
    margin: -10px;
    display: grid;
    place-items: center;
    touch-action: none;
}

.lv-img-handle::before {
    content: "";
    width: 10px;
    height: 10px;
    box-sizing: border-box;
    border: 2px solid var(--accent);
    border-radius: 3px;
    background: var(--surface);
}

.lv-img-handle[data-corner="nw"] { top: 0; left: 0; cursor: nwse-resize; }
.lv-img-handle[data-corner="ne"] { top: 0; right: 0; cursor: nesw-resize; }
.lv-img-handle[data-corner="sw"] { bottom: 0; left: 0; cursor: nesw-resize; }
.lv-img-handle[data-corner="se"] { bottom: 0; right: 0; cursor: nwse-resize; }

@media (pointer: coarse) {
    .lv-img.is-selected {
        margin-top: 64px;
    }

    .lv-img-handle {
        width: 32px;
        height: 32px;
        margin: -16px;
    }
}

/* The width while a handle is dragged */
.lv-img-size {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 22px;
    padding: 0 8px;
    display: none;
    align-items: center;
    transform: translate(-50%, -50%);
    border-radius: 6px;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

.lv-img.is-resizing .lv-img-size {
    display: inline-flex;
}

/* --- Table editor ------------------------------------------------------------ */
/* The table stays rendered; the cell with the caret shows its source */

/* Room above it for its toolbar (live-tools.js) */
.live-doc .lv-k-table.is-active {
    margin-top: 56px;
}

.live-doc .lv-k-table.is-active :is(td, th) {
    cursor: text;
}

.markdown-preview :is(td, th).is-current {
    box-shadow: inset 0 0 0 2px var(--accent);
}

/* Cells selected together (live.js "Selecting cells"); the open cell is
   one of them and keeps its caret, but not the text a drag selects in it */
.markdown-preview :is(td, th).is-picked {
    background: var(--accent-soft);
}

.markdown-preview table.has-range .lv-cell::selection {
    background: transparent;
}

/* Headers don't wrap (preview.css), and neither does their source */
.markdown-preview th > .lv-cell {
    white-space: pre;
}

/* --- Code block editor ----------------------------------------------------- */
/* A transparent textarea over the highlighted code, as in the source editor */

.markdown-preview .lv-code {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-ring);
}

/* The language chip: opens the language menu (live-tools.js) */
.lv-lang {
    max-width: 50%;
    height: 30px;
    margin-left: -10px;
    padding: 0 6px 0 10px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font-family: var(--font-mono);
    font-size: 12.5px;
    line-height: 1;
    color: var(--text-control);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.lv-lang-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lv-lang svg {
    flex: none;
    color: var(--muted);
}

.lv-lang:hover {
    border-color: var(--accent);
}

.lv-lang[aria-expanded="true"],
.lv-lang:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-ring);
}

/* An HTML block: 安全渲染 (opens up on hover to say what the sandbox
   allows) and 预览 in place of 复制 */
.lv-safe,
.lv-html-toggle,
.lv-code.is-html .code-copy {
    display: none;
}

.lv-code.is-html .lv-safe {
    display: inline-flex;
}

.lv-code.is-html .lv-html-toggle {
    display: flex;
}

.lv-safe {
    min-width: 0;
    height: 24px;
    margin: 0 auto 0 8px;
    padding: 0 9px;
    align-items: center;
    gap: 5px;
    overflow: hidden;
    border: 0;
    border-radius: 7px;
    background: var(--accent-soft);
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    color: var(--link);
    cursor: help;
}

.lv-safe svg {
    flex: none;
}

.lv-safe-more {
    display: none;
}

.lv-safe:hover,
.lv-safe:focus-visible {
    background: color-mix(in oklab, var(--accent) 16%, transparent);
}

.lv-safe:hover .lv-safe-more,
.lv-safe:focus-visible .lv-safe-more {
    display: inline;
}

.lv-html-toggle {
    height: 32px;
    flex: none;
    padding: 0 10px;
    align-items: center;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    font-size: 12.5px;
    color: var(--text-soft);
}

.lv-html-toggle:hover {
    background: var(--hover);
}

.lv-html-toggle[aria-pressed="true"] {
    background: var(--pressed);
    color: var(--text);
}

/* 预览: the frame under the code */
.lv-html-preview {
    position: relative;
    padding-top: 28px;
    border-top: 1px dashed var(--code-border);
    background: var(--surface);
}

.markdown-preview .lv-html-preview .html-block {
    margin: 0;
    border: 0;
    border-radius: 0;
}

.lv-code-area {
    position: relative;
    flex: 1;
    min-width: 0;
}

.markdown-preview .lv-code-view,
.lv-code-input {
    margin: 0;
    padding: 0 16px 0 0;
    border: 0;
    font: inherit;
    line-height: inherit;
    letter-spacing: normal;
    tab-size: 4;
    white-space: pre;
    font-kerning: none;
    font-variant-ligatures: none;
    font-feature-settings: "liga" 0, "calt" 0;
    font-synthesis: none;
}

.markdown-preview .lv-code-view {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.lv-code-input {
    position: relative;
    display: block;
    width: 100%;
    min-height: 24px;
    overflow-x: auto;
    overflow-y: hidden;
    resize: none;
    outline: none;
    background: transparent;
    color: transparent;
    caret-color: var(--text);
    -webkit-text-fill-color: transparent;
}

.lv-code-input::selection {
    background: var(--selection);
    color: transparent;
}

/* --- Formula block editor -------------------------------------------------- */

.lv-math {
    overflow: hidden;
    border: 1px solid var(--accent);
    border-radius: 12px;
    background: var(--code-bg);
    box-shadow: 0 0 0 3px var(--accent-ring);
}

.lv-math-head {
    height: 34px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    border-bottom: 1px solid var(--code-head-border);
    font-size: 12px;
    color: var(--muted);
}

.lv-math-lang {
    font-family: var(--font-mono);
    color: var(--text-control);
}

.lv-math-input {
    display: block;
    width: 100%;
    padding: 10px 16px;
    border: 0;
    outline: none;
    resize: none;
    overflow: hidden;
    background: transparent;
    font-family: var(--font-mono);
    font-size: 0.87em;
    line-height: 24px;
    color: var(--text-control);
    caret-color: var(--accent);
}

.lv-math-preview {
    position: relative;
    min-height: 64px;
    padding: 22px 16px 6px;
    overflow-x: auto;
    border-top: 1px dashed var(--code-border);
    background: var(--surface);
}

/* The 预览 label (formula and HTML blocks) */
.lv-math-tag {
    position: absolute;
    top: 8px;
    left: 12px;
    font-size: 11.5px;
    color: var(--muted);
}

.lv-math-out {
    text-align: center;
}

.lv-math-out .katex-display {
    margin: 0;
    padding: 8px 0;
}

.lv-math-empty {
    font-size: 13px;
    color: var(--faint);
}

/* --- Inline formula preview -------------------------------------------- */

.lv-bubble {
    position: absolute;
    z-index: 4;
    padding: 6px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow-pop);
    color: var(--text-strong);
    font-size: var(--preview-font-size);
    white-space: nowrap;
    pointer-events: none;
}

.lv-bubble .katex {
    font-size: 1.15em !important;
}

/* --- Block handle ---------------------------------------------------------- */
/* One handle for the whole view, placed beside a block's first line by
   live-blocks.js: faint beside the block under the pointer, on a light
   background beside the block being edited, "+" beside an empty line */

.lv-grip {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    width: 24px;
    height: 24px;
    margin-left: -42px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--faint);
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    animation: grip-in 0.15s ease-out;
    transition: background-color 0.15s ease, color 0.15s ease;
}

@keyframes grip-in {
    from {
        opacity: 0;
    }
}

.lv-grip.is-active {
    background: var(--hover-strong);
    color: var(--muted);
}

.lv-grip:hover,
.lv-grip[aria-expanded="true"],
.lv-grip.is-dragging {
    background: var(--pressed);
    color: var(--text);
}

.lv-grip[data-kind="add"] {
    cursor: pointer;
}

.lv-grip[data-kind="add"] .lv-grip-dots,
.lv-grip[data-kind="grip"] .lv-grip-add {
    display: none;
}

/* Dragging a block: it fades where it was, a line shows where it goes */
.lv-block.is-dragged {
    opacity: 0.4;
}

body.is-dragging-block,
body.is-dragging-block * {
    cursor: grabbing !important;
}

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

/* --- Small screens --------------------------------------------------------- */

@media (max-width: 860px) {
    .live-doc {
        padding: 24px 20px 96px 32px;
    }

    .lv-grip {
        margin-left: -30px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lv-block,
    .lv-grip {
        transition: none;
        animation: none;
    }
}