/* ==========================================================================
   LIVE MARKDOWN EDITOR — edição e pré-visualização no mesmo campo (sem alternar
   "Editar"/"Visualizar"). O textarea[data-markdown] original vira .lw-source,
   escondido mas ainda parte do form (validação/required continuam funcionando).
   ========================================================================== */
.lw-source {
    position: absolute !important; width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important; overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}

.lw-editor {
    position: relative; width: 100%; min-height: 140px; padding: 14px 16px;
    background: var(--color-surface); border: 1.5px solid var(--color-border); border-radius: var(--radius);
    font-size: 14px; line-height: 1.65; color: var(--color-text); cursor: text;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.lw-editor:focus { outline: none; border-color: var(--color-blue); box-shadow: 0 0 0 3px rgba(31, 111, 235, .14); }
.lw-editor.is-drag-over { border-color: var(--color-violet); background: rgba(124, 78, 234, .05); }
.lw-editor.is-empty::before {
    content: attr(data-placeholder); position: absolute; top: 14px; left: 16px;
    color: var(--color-text-dim); pointer-events: none;
}

.lw-line { min-height: 1.65em; }
.lw-mark { color: var(--color-text-dim); opacity: .55; }
.lw-h1, .lw-h2, .lw-h3 { font-weight: 700; margin: .25em 0; }
.lw-h1 { font-size: 1.55em; }
.lw-h2 { font-size: 1.3em; }
.lw-h3 { font-size: 1.12em; }
.lw-quote { padding-left: 12px; border-left: 3px solid var(--color-border-strong); color: var(--color-text-muted); }
.lw-ul, .lw-ol { padding-left: 2px; }

.lw-checklist { display: flex; align-items: baseline; gap: 6px; }
.lw-checkbox {
    display: inline-flex; flex-shrink: 0; width: 15px; height: 15px; border-radius: 4px;
    border: 1.5px solid var(--color-border-strong); cursor: pointer; vertical-align: middle;
    position: relative; transition: background-color .12s ease, border-color .12s ease;
}
.lw-checklist.is-checked .lw-checkbox { background: var(--color-blue); border-color: var(--color-blue); }
.lw-checklist.is-checked .lw-checkbox::after {
    content: ''; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px;
    border: solid #fff; border-width: 0 1.6px 1.6px 0; transform: rotate(40deg);
}
.lw-checklist.is-checked { color: var(--color-text-dim); text-decoration: line-through; }

.lw-code { font-family: var(--font-mono); font-size: .9em; background: var(--color-surface-alt); padding: 1px 5px; border-radius: 4px; }
.lw-code-fence, .lw-code-line { font-family: var(--font-mono); font-size: .9em; background: var(--color-surface-alt); }
.lw-code-fence { color: var(--color-text-dim); }
.lw-img { max-width: 100%; border-radius: 8px; display: block; margin: 6px 0; }
.lw-link {
    color: var(--color-blue);
    font-weight: 500;
    text-decoration: none;
    border-radius: 2px;
}
.lw-link:hover {
    text-decoration: underline;
    text-underline-offset: var(--link-underline-offset, 3px);
    text-decoration-thickness: var(--link-underline-thickness, 1px);
    text-decoration-color: var(--link-underline-color, color-mix(in srgb, var(--color-blue) 36%, transparent));
}
.lw-hr-or-fence { color: var(--color-text-dim); }

.lw-table-row { display: flex; }
.lw-table-cell { flex: 1; padding: 4px 8px; min-width: 0; }
.lw-table-row:not(.lw-table-sep) + .lw-table-row:not(.lw-table-sep) { border-top: 1px solid var(--color-border); }
.lw-table-sep { min-height: 6px; border-top: 1px solid var(--color-border-strong); }
.lw-table-sep .lw-table-cell { opacity: 0; padding: 0 8px; }

.lw-floating-toolbar {
    position: absolute; z-index: 200; display: flex; gap: 2px; padding: 4px;
    background: var(--color-text); border-radius: 9px; box-shadow: var(--shadow-lg);
}
.lw-floating-toolbar[hidden] { display: none; }
.lw-floating-toolbar button {
    display: flex; align-items: center; justify-content: center; width: 28px; height: 28px;
    border: none; background: none; border-radius: 6px; color: var(--color-surface); cursor: pointer;
}
.lw-floating-toolbar button:hover { background: rgba(255, 255, 255, .15); }
.lw-floating-toolbar svg { width: 14px; height: 14px; }