/*  ══════════════════════════════════════════════════════════════════════════
    TOOLS — the markdown editor and the document tool.

    Moved out of Zybron.UI.Web/wwwroot/css/site.css: the editor is a kit control
    (Zybron.UI.Kit/Controls/MarkdownEditor.razor) and a control whose appearance
    lives in one host is a control the next host renders naked.

    Selectors are unchanged from site.css, so the composer keeps the look it had.
    Document-tool refinements are scoped under .zc-doctool at the foot of the file.
    ══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   Tiptap WYSIWYG Editor — Dark Theme
   ══════════════════════════════════════════════════════════════ */

.tiptap-editor-wrapper {
    display: flex;
    flex-direction: column;
    background: var(--surface-2, #1A2030);
    border: 1px solid var(--border, #232B3A);
    border-radius: 8px;
    overflow: hidden;
}

.tiptap-editor-wrapper.tiptap-fill {
    flex: 1;
    min-height: 0;
    height: 100%;
    border: none;
    border-radius: 0;
}

/* Toolbar */
.tiptap-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    padding: 4px 8px;
    background: var(--surface-2, #1A2030);
    border-bottom: 1px solid var(--border, #232B3A);
}

.tiptap-toolbar button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: var(--text-secondary, #7A8599);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.tiptap-toolbar button .material-symbols-outlined {
    font-size: 20px;
}

.tiptap-toolbar button:hover {
    color: var(--brand-jade, #00D68F);
    background: rgba(0, 214, 143, 0.1);
    border-color: rgba(0, 214, 143, 0.2);
}

.tiptap-toolbar button.active {
    color: var(--brand-jade, #00D68F);
    background: rgba(0, 214, 143, 0.15);
    border-color: rgba(0, 214, 143, 0.3);
}

.tiptap-separator {
    width: 1px;
    height: 20px;
    margin: 0 4px;
    background: var(--border, #232B3A);
}

/* Editor content area */
.tiptap-editor-area {
    flex: 1;
    overflow-y: auto;
}

.tiptap-editor-area .tiptap-content {
    padding: 16px;
    min-height: 300px;
    outline: none;
    color: var(--text-primary, #E6E9EF);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.7;
}

.tiptap-fill .tiptap-editor-area {
    min-height: 0;
}

.tiptap-fill .tiptap-editor-area .tiptap-content {
    min-height: 0;
}

/* Placeholder */
.tiptap-content p.is-editor-empty:first-child::before {
    content: attr(data-placeholder);
    color: var(--text-secondary, #7A8599);
    opacity: 0.5;
    float: left;
    height: 0;
    pointer-events: none;
}

/* Typography */
.tiptap-content h1 { font-size: 1.6em; font-weight: 700; margin: 24px 0 8px; border-bottom: 1px solid var(--border, #232B3A); padding-bottom: 8px; }
.tiptap-content h2 { font-size: 1.35em; font-weight: 700; margin: 20px 0 8px; }
.tiptap-content h3 { font-size: 1.15em; font-weight: 600; margin: 16px 0 6px; }
.tiptap-content h4 { font-size: 1em; font-weight: 600; margin: 14px 0 6px; }

.tiptap-content p { margin: 0 0 8px; }

.tiptap-content strong { font-weight: 700; }
.tiptap-content em { font-style: italic; }
.tiptap-content s { text-decoration: line-through; color: var(--text-secondary, #7A8599); }
.tiptap-content u { text-decoration: underline; }

/* Links */
.tiptap-content a {
    color: var(--brand-secondary, #3B82F6);
    text-decoration: underline;
    cursor: pointer;
}

/* Lists */
.tiptap-content ul, .tiptap-content ol { padding-left: 24px; margin: 4px 0 8px; }
.tiptap-content li { margin-bottom: 2px; }
.tiptap-content li p { margin: 0; }

/* Task lists */
.tiptap-content ul[data-type="taskList"] {
    list-style: none;
    padding-left: 0;
}

.tiptap-content ul[data-type="taskList"] li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.tiptap-content ul[data-type="taskList"] li label {
    flex-shrink: 0;
    margin-top: 2px;
}

.tiptap-content ul[data-type="taskList"] li input[type="checkbox"] {
    accent-color: var(--brand-jade, #00D68F);
    width: 16px;
    height: 16px;
}

.tiptap-content ul[data-type="taskList"] li div {
    flex: 1;
}

/* Blockquote */
.tiptap-content blockquote {
    border-left: 3px solid var(--brand-jade, #00D68F);
    padding: 8px 16px;
    margin: 8px 0;
    background: rgba(0, 214, 143, 0.04);
    color: var(--text-secondary, #7A8599);
}

/* Code */
.tiptap-content code {
    background: var(--surface-2, #1A2030);
    color: var(--brand-jade, #00D68F);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 13px;
}

.tiptap-content pre {
    background: var(--surface-2, #1A2030);
    border: 1px solid var(--border, #232B3A);
    border-radius: 8px;
    padding: 12px 16px;
    margin: 8px 0;
    overflow-x: auto;
}

.tiptap-content pre code {
    background: transparent;
    padding: 0;
    color: var(--text-primary, #E6E9EF);
    font-size: 13px;
    line-height: 1.5;
}

/* Horizontal rule */
.tiptap-content hr {
    border: none;
    border-top: 1px solid var(--border, #232B3A);
    margin: 24px 0;
}

/* Tables */
.tiptap-content table {
    border-collapse: collapse;
    width: 100%;
    margin: 12px 0;
}

.tiptap-content th, .tiptap-content td {
    border: 1px solid var(--border, #232B3A);
    padding: 8px 12px;
    text-align: left;
    min-width: 80px;
}

.tiptap-content th {
    background: var(--surface-2, #1A2030);
    font-weight: 600;
}

.tiptap-content td {
    background: var(--surface-1, #141922);
}

/* Images */
.tiptap-content img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 8px 0;
}

/* Selection */
.tiptap-content ::selection {
    background: rgba(0, 214, 143, 0.2);
}

/* Viewer (read-only) */
.tiptap-viewer-container {
    width: 100%;
}

.tiptap-viewer-container.tiptap-fill {
    height: 100%;
    overflow-y: auto;
}

.tiptap-rendered-content {
    color: var(--text-primary, #E6E9EF);
    line-height: 1.6;
    padding: 16px;
}

.tiptap-rendered-content h1, .tiptap-rendered-content h2, .tiptap-rendered-content h3 {
    color: var(--text-primary, #E6E9EF);
    margin-top: 24px;
    margin-bottom: 8px;
}

.tiptap-rendered-content h1 { font-size: 24px; border-bottom: 1px solid var(--border, #232B3A); padding-bottom: 8px; }
.tiptap-rendered-content h2 { font-size: 20px; }
.tiptap-rendered-content h3 { font-size: 16px; }

.tiptap-rendered-content table { border-collapse: collapse; width: 100%; margin: 16px 0; }
.tiptap-rendered-content th, .tiptap-rendered-content td { border: 1px solid var(--border, #232B3A); padding: 8px 12px; text-align: left; }
.tiptap-rendered-content th { background: var(--surface-2, #1A2030); font-weight: 600; }
.tiptap-rendered-content code { background: var(--surface-2, #1A2030); padding: 2px 6px; border-radius: 4px; font-size: 13px; }
.tiptap-rendered-content pre { background: var(--surface-2, #1A2030); padding: 16px; border-radius: 8px; overflow-x: auto; }
.tiptap-rendered-content blockquote { border-left: 3px solid var(--brand-jade, #00D68F); padding-left: 16px; margin-left: 0; color: var(--text-secondary, #7A8599); }
.tiptap-rendered-content ul, .tiptap-rendered-content ol { padding-left: 24px; }
.tiptap-rendered-content hr { border: none; border-top: 1px solid var(--border, #232B3A); margin: 24px 0; }
.tiptap-rendered-content a { color: var(--brand-secondary, #3B82F6); }

.tiptap-empty-content {
    color: var(--text-secondary, #7A8599);
    font-style: italic;
    padding: 40px;
    text-align: center;
}

/* Fallback textarea */
.tiptap-fallback-textarea {
    width: 100%;
    flex: 1;
    min-height: 400px;
    background: var(--surface-1, #141B2A);
    color: var(--text-primary, #E6E9EF);
    border: none;
    padding: 16px;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 14px;
    line-height: 1.6;
    resize: none;
    outline: none;
}

.tiptap-fill .tiptap-fallback-textarea {
    min-height: 0;
}



/*  ══════════════════════════════════════════════════════════════════════════
    DOCUMENT TOOL — the editor as a document, not as a form field.

    The base styles above are tuned for the composer card, where the editor is one
    element among several on a canvas card. Filling a whole surface it needs to read
    like a page: a measure you can actually write prose in, a toolbar that gets out
    of the way, and headings with a scale rather than four sizes of bold.
    ══════════════════════════════════════════════════════════════════════════ */

/*  Quiet. On a card the toolbar is chrome around a field; on a full surface it is
    the only chrome there is, and a row of 32px boxed buttons competes with the
    document for attention. Hairline underneath, no fill until you touch it. */
.zc-doctool .tiptap-toolbar {
    background: transparent;
    border-bottom: 1px solid var(--border, rgba(148,163,184,.22));
    padding: 2px 0 6px;
    gap: 1px;
}
.zc-doctool .tiptap-toolbar button {
    width: 30px; height: 30px;
    border-color: transparent;
    color: var(--text-secondary, #7A8599);
}
.zc-doctool .tiptap-toolbar button:hover {
    background: var(--surface-2, rgba(148,163,184,.12));
    border-color: transparent;
    color: var(--text-primary, inherit);
}
.zc-doctool .tiptap-toolbar button.active {
    background: rgba(0, 214, 143, .12);
    border-color: transparent;
    color: var(--brand-jade, #00D68F);
}
.zc-doctool .tiptap-separator { height: 16px; margin: 0 5px; }

.zc-doctool .tiptap-editor-wrapper { background: transparent; }

/*  A MEASURE. Full-width prose at 1240px is ~200 characters a line — unreadable and
    unwritable. 72ch is the width a document wants; the surface stays wide, the text
    does not. Tables and code blocks still take the full width below. */
.zc-doctool .tiptap-editor-area .tiptap-content,
.zc-doctool .tiptap-rendered-content {
    max-width: 72ch;
    margin: 0 auto;
    padding: 22px 8px 60px;
    font-size: 15px;
    line-height: 1.72;
}

/*  A scale, so structure is visible at a glance while writing. The base sheet gives
    h1–h4 four weights of nearly the same size, which reads as one flat wall. */
.zc-doctool .tiptap-content h1 { font-size: 1.7em;  line-height: 1.25; margin: 26px 0 10px; }
.zc-doctool .tiptap-content h2 { font-size: 1.35em; line-height: 1.3;  margin: 24px 0 8px; }
.zc-doctool .tiptap-content h3 { font-size: 1.12em; margin: 20px 0 6px; }
.zc-doctool .tiptap-content h4 { font-size: 1em; text-transform: uppercase;
                                 letter-spacing: .06em; opacity: .75; margin: 18px 0 6px; }
.zc-doctool .tiptap-content p { margin: 0 0 12px; }
.zc-doctool .tiptap-content > :first-child { margin-top: 0; }

/*  Wide content escapes the measure rather than being squeezed into it. */
.zc-doctool .tiptap-content table,
.zc-doctool .tiptap-content pre { max-width: none; }
.zc-doctool .tiptap-content pre { overflow-x: auto; }

/*  ── Code surface (JSON, CSV) ───────────────────────────────────────────────
    Not the markdown editor: bold and headings mean nothing in JSON, and a rich
    editor would return a file that no longer parses. What it needs instead is to
    look like somewhere you write code — a named strip, a monospace field that does
    not wrap, and Tab that indents. */
.zc-code {
    flex: 1; min-height: 0; display: flex; flex-direction: column;
    border: 1px solid var(--border, rgba(148,163,184,.22)); border-radius: 10px;
    overflow: hidden; background: var(--surface-1, #fff);
}
.zc-code-bar {
    flex: none; display: flex; align-items: center; gap: 10px;
    padding: 7px 12px;
    border-bottom: 1px solid var(--border, rgba(148,163,184,.18));
    background: var(--surface-2, rgba(148,163,184,.07));
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
    color: var(--text-secondary, #7A8599);
}
.zc-code-stat { margin-left: auto; text-transform: none; letter-spacing: .02em; }
.zc-code-ro { color: var(--brand-jade, #00D68F); }

/*  Border and radius belong to the frame above, not to the field inside it. */
.zc-code .zc-doctool-raw {
    border: none; border-radius: 0; padding: 14px 16px;
    background: transparent; overflow: auto; tab-size: 2;
}
.zc-code .zc-doctool-raw:focus { border: none; }
.zc-code:focus-within { border-color: var(--brand-jade, #00D68F); }

/*  Prose in the code surface: wraps, and takes a measure like the markdown editor —
    a .txt is still a document even without markup to render. */
.zc-code.is-prose .zc-doctool-raw {
    white-space: pre-wrap; word-break: break-word;
    max-width: 78ch; margin: 0 auto; width: 100%;
    font-family: inherit; font-size: 14.5px; line-height: 1.7;
}

/*  Save state. An editor with no Save button has to say what it has done — silence is
    indistinguishable from not saving — but it says it quietly, in the corner, because
    the answer is almost always "saved" and that is not news. */
.zc-doctool-note.is-state {
    align-self: flex-end;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10px; letter-spacing: .04em;
    opacity: .7;
}