/* markdown.css — shared styles for MarkdownEditor (edit) and MarkdownView (read-only).
   Global (not scoped) so both components share one ruleset. Colours map onto Kibo tokens. */

.md-editor {
    --md-border: var(--line, #d8dce3);
    --md-bg: var(--card, #ffffff);
    --md-fg: var(--ink, #1d2433);
    --md-muted: var(--ink-soft, #6b7280);
    --md-accent: var(--human, #3b5bdb);
    --md-toolbar-bg: var(--paper, #f6f7f9);
    --md-code-bg: color-mix(in srgb, var(--ink, #1d2433) 7%, transparent);

    border: 1px solid var(--md-border);
    border-radius: 10px;
    background: var(--md-bg);
    color: var(--md-fg);
    overflow: hidden;
}

.md-hidden { display: none !important; }

/* Toolbar */
.md-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    background: var(--md-toolbar-bg);
    border-bottom: 1px solid var(--md-border);
}
.md-toolbar-group { display: flex; gap: 2px; }
.md-toolbar-group:not(:last-child) {
    padding-right: 6px;
    margin-right: 4px;
    border-right: 1px solid var(--md-border);
}
.md-toolbar-spacer { flex: 1; }

/* Contextual group (image / table cell). Tinted so it reads as "these appeared because of where
   you are", rather than as buttons that were always there and the user had missed. */
.md-toolbar-ctx {
    background: color-mix(in srgb, var(--md-accent, #3b5bdb) 10%, transparent);
    border-radius: 7px;
    padding: 2px 4px;
}
.md-btn-del:hover:not(:disabled) { background: color-mix(in srgb, var(--md-danger, #c92a2a) 18%, transparent); }

/* Image properties dialog */
.md-img-dims { display: flex; gap: 12px; }
.md-img-dims > div { flex: 1; }
.md-img-aligns { display: flex; flex-wrap: wrap; gap: 6px; }

.md-btn {
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--md-fg);
    font-size: 14px;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}
.md-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--md-fg) 8%, transparent); }
.md-btn:disabled { opacity: .4; cursor: not-allowed; }
.md-btn-active { background: var(--md-accent); color: #fff; border-color: var(--md-accent); }

/* Editing surfaces */
.md-surface, .md-source, .md-preview {
    padding: 14px 16px;
    line-height: 1.6;
    outline: none;
    box-sizing: border-box;
    width: 100%;
}
.md-surface { overflow-y: auto; }
.md-surface:empty::before,
.md-surface[data-empty]::before {
    content: attr(data-placeholder);
    color: var(--md-muted);
    pointer-events: none;
}

.md-source {
    border: 0;
    resize: vertical;
    font-family: "Spline Sans Mono", "SF Mono", Consolas, monospace;
    font-size: 13px;
    background: var(--md-bg);
    color: var(--md-fg);
}

/* Rendered content (both surface and preview) */
.md-surface h1, .md-preview h1 { font-size: 1.7em; margin: .6em 0 .3em; }
.md-surface h2, .md-preview h2 { font-size: 1.4em; margin: .6em 0 .3em; }
.md-surface h3, .md-preview h3 { font-size: 1.2em; margin: .6em 0 .3em; }
.md-surface p, .md-preview p { margin: .4em 0; }

.md-surface code, .md-preview code {
    background: var(--md-code-bg, #f0f1f4);
    padding: .12em .35em;
    border-radius: 4px;
    font-family: "Spline Sans Mono", "SF Mono", Consolas, monospace;
    font-size: .9em;
}
.md-surface pre, .md-preview pre {
    background: var(--md-code-bg, #f0f1f4);
    padding: 12px 14px;
    border-radius: 8px;
    overflow-x: auto;
}
.md-surface pre code, .md-preview pre code { background: none; padding: 0; }

.md-surface blockquote, .md-preview blockquote {
    margin: .5em 0;
    padding: .2em 0 .2em 14px;
    border-left: 3px solid var(--md-accent, #3b5bdb);
    color: var(--md-muted, #6b7280);
}

.md-surface ul[data-task], .md-preview ul[data-task] { list-style: none; padding-left: 1.2em; }
.md-surface ul[data-task] li::before,
.md-preview ul[data-task] li::before { content: "\2610 "; }
.md-surface ul[data-task] li[data-checked="true"]::before,
.md-preview ul[data-task] li[data-checked="true"]::before { content: "\2611 "; }

.md-surface table, .md-preview table {
    border-collapse: collapse;
    margin: .6em 0;
    width: 100%;
}
.md-surface th, .md-surface td,
.md-preview th, .md-preview td {
    border: 1px solid var(--md-border, #d8dce3);
    padding: 6px 10px;
    text-align: left;
}
.md-surface th, .md-preview th { background: var(--md-toolbar-bg, #f6f7f9); }

/* height:auto is what keeps an image inside its box. The width/height attributes written at
   insertion are the pixel size of the stored file, and max-width alone squeezed the width while
   the attribute held the height — a screenshot came out narrow and metres tall, filling the whole
   editor. Both dimensions are left to the browser, which then scales on the aspect ratio.
   The viewport cap keeps an unsized image from swallowing a short surface; an image the user has
   sized explicitly carries .md-img-sized and is exempt. */
.md-surface img, .md-preview img {
    max-width: 100%;
    height: auto;
    max-height: 55vh;
    border-radius: 6px;
}
/* An explicitly sized image is exempt from the viewport cap: the user asked for those pixels. It is
   NOT exempt from max-width — the surface runs from a dock panel to a full screen, and a width
   chosen in one is meaningless in the other, so a too-wide image scales down rather than spilling
   out of the editor. A stretched image carries width + aspect-ratio (never an inline height), so
   that scaling takes the height with it instead of squashing the picture. */
.md-surface img.md-img-sized, .md-preview img.md-img-sized { max-height: none; }

/* Alignment (![alt|300|center](…)). Left/right float so the text runs alongside, which is the
   point of asking for them; centre is a block with auto margins. Shared by the writing surface and
   the read-only view so what is written is what is read. */
.md-surface img.md-align-center, .md-preview img.md-align-center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.md-surface img.md-align-left, .md-preview img.md-align-left { float: left; margin: .2em 1em .4em 0; }
.md-surface img.md-align-right, .md-preview img.md-align-right { float: right; margin: .2em 0 .4em 1em; }
/* A float that reaches the end of the content would otherwise hang outside the box. */
.md-surface::after, .md-preview::after { content: ""; display: block; clear: both; }

/* Selected image + resize handles. The overlay lives on <body> (like the table tools) so it is not
   part of the contenteditable: a handle inside the surface would be editable content, and typing
   or an undo could carry it into the text. */
.md-surface img.md-img-selected { outline: 2px solid var(--md-accent, #3b5bdb); outline-offset: 1px; }
.md-imgtools {
    position: fixed;
    z-index: 9998;
    display: none;
    pointer-events: none;   /* only the handles take the pointer; the image stays clickable */
}
.md-imghandle {
    position: absolute;
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    border: 1px solid #fff;
    border-radius: 2px;
    background: var(--md-accent, #3b5bdb);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
    pointer-events: auto;
    touch-action: none;
}
.md-imghandle[data-dir="n"], .md-imghandle[data-dir="s"] { cursor: ns-resize; }
.md-imghandle[data-dir="e"], .md-imghandle[data-dir="w"] { cursor: ew-resize; }
.md-imghandle[data-dir="nw"], .md-imghandle[data-dir="se"] { cursor: nwse-resize; }
.md-imghandle[data-dir="ne"], .md-imghandle[data-dir="sw"] { cursor: nesw-resize; }
/* Live size while dragging: the number is the thing being chosen, so it is shown, not guessed. */
.md-imgsize {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -24px;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--md-accent, #3b5bdb);
    color: #fff;
    font-size: 11px;
    white-space: nowrap;
    pointer-events: none;
}
.md-surface hr, .md-preview hr { border: 0; border-top: 1px solid var(--md-border, #d8dce3); margin: 1em 0; }

/* Status bar */
.md-statusbar {
    display: flex;
    gap: 16px;
    padding: 6px 12px;
    border-top: 1px solid var(--md-border, #d8dce3);
    background: var(--md-toolbar-bg, #f6f7f9);
    color: var(--md-muted, #6b7280);
    font-size: 12px;
}

/* Inline-media upload progress (19_Media.md F2). One row per image in flight, between the writing
   surface and the status bar, so it never covers what is being written. */
.md-uploads {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px 12px;
    border-top: 1px solid var(--md-border, #d8dce3);
    background: var(--md-toolbar-bg, #f6f7f9);
    font-size: 12px;
}
.md-upload {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--md-muted, #6b7280);
}
.md-upload-name {
    max-width: 40%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.md-upload-bar {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: var(--md-border, #d8dce3);
    overflow: hidden;
}
.md-upload-bar > span {
    display: block;
    height: 100%;
    background: var(--md-accent, #3b5bdb);
    transition: width .15s linear;
}
.md-upload-msg { flex-shrink: 0; }
.md-upload-error { color: var(--md-danger, #c92a2a); }

/* Dropping an image onto the writing surface */
.md-surface.md-drag-over { box-shadow: inset 0 0 0 2px var(--md-accent, #3b5bdb); }

/* Visible focus */
.md-surface:focus, .md-source:focus { box-shadow: inset 0 0 0 2px var(--md-accent, #3b5bdb); }

/* Table insert picker (hover grid) */
.md-table-pick { position: relative; display: inline-flex; }
.md-table-grid {
    position: absolute; top: calc(100% + 4px); left: 0; z-index: 30;
    background: var(--md-bg, #fff); border: 1px solid var(--md-border, #d8dce3);
    border-radius: 8px; padding: 8px; box-shadow: var(--shadow, 0 8px 24px rgba(0,0,0,.12));
}
.md-table-gridrow { display: flex; gap: 3px; }
.md-table-gridrow + .md-table-gridrow { margin-top: 3px; }
.md-table-gridcell {
    width: 16px; height: 16px; border: 1px solid var(--md-border, #d8dce3);
    border-radius: 3px; cursor: pointer; box-sizing: border-box;
}
.md-table-gridcell.on { background: var(--md-accent, #3b5bdb); border-color: var(--md-accent, #3b5bdb); }
.md-table-gridlabel { margin-top: 6px; text-align: center; font-size: 12px; color: var(--md-muted, #6b7280); }

/* Floating in-cell table tools (appended to <body>, positioned at the active cell) */
.md-tabletools {
    position: fixed; z-index: 9999; display: none; gap: 2px;
    background: var(--md-bg, #fff); border: 1px solid var(--md-border, #d8dce3);
    border-radius: 7px; padding: 2px; box-shadow: var(--shadow, 0 6px 18px rgba(0,0,0,.12));
}
.md-tabletools-row { flex-direction: column; }
.md-tabletools-col { flex-direction: row; }
.md-tbtn {
    width: 18px; height: 18px; padding: 0; line-height: 1;
    border: 0; border-radius: 4px; background: transparent; cursor: pointer;
    color: var(--md-fg, #1d2433); font-size: 13px; font-weight: 700;
}
.md-tbtn:hover { background: color-mix(in srgb, var(--md-fg, #1d2433) 10%, transparent); }
.md-tbtn.del { color: var(--alert, #d6336c); }

/* Read-only rendered description (inspector static value): no border/padding box. */
.md-view { padding: 0; color: var(--ink); }
.md-view:empty::before { content: "—"; color: var(--ink-soft); }

@media (prefers-reduced-motion: reduce) {
    .md-btn { transition: none; }
}