/* Manifest Text Edit */

@layer base, components, utilities;

/* Self-contained. The editable area is a field first — it borrows the tokens inputs
   and textareas use, so it sits in a form without looking bolted on. Controls are
   styled where they are, not by where they sit, because they can be anywhere. */

@layer components {

    :where([data-text-edit]) {
        min-height: var(--text-edit-min-height, 8rem);
        max-height: var(--text-edit-max-height, none);
        overflow-y: auto;
        padding: var(--text-edit-padding, 0.75rem);
        background: var(--text-edit-background, var(--color-surface-1));
        border: 1px solid var(--color-line);
        border-radius: var(--radius);
        outline: none;

        /* Page-level styling — set by .page controls, read back by $text.page.
           Presentation, so it lives here rather than inside the stored markup. */
        font-family: var(--text-edit-font, inherit);
        font-size: var(--text-edit-size, inherit);
        line-height: var(--text-edit-leading, inherit);
        text-align: var(--text-edit-align, start);
        color: var(--text-edit-color, inherit);

        &:focus {
            border-color: var(--color-content-subtle);
        }

        /* Flagged from script: :empty never matches the <br> a contenteditable
           keeps, and the tag holding it is not predictable after a wipe. */
        &[data-text-edit-empty]::before {
            content: attr(placeholder);
            color: var(--color-content-subtle);
            pointer-events: none;
        }
    }

    /* ---- Controls ----
       A control is marked wherever it lives, so a toolbar is optional markup and
       never a requirement. The reset already dims [aria-disabled=true]. */
    :where([data-text-edit-control]) {
        &[data-text-edit-active] {
            background: color-mix(in oklch, var(--color-content-stark) 10%, transparent);
            color: var(--color-content-stark);
        }

        & > svg {
            width: 1rem;
            height: 1rem;
        }
    }

    :where(button[data-text-edit-control]) {
        padding: 0.35rem;
        line-height: 0;
    }

    /* ---- Editable content ----
       The editor authors real block elements, so style them as elements. Deliberately
       lighter than the .prose class, which sets a reading measure this field can't use. */
    :where([data-text-edit]) {

        & > * + * {
            margin-block-start: 0.75em;
        }

        & :where(h1, h2, h3, h4, h5, h6) {
            font-weight: 600;
            line-height: 1.25;
        }

        & h1 { font-size: 1.6em }
        & h2 { font-size: 1.35em }
        & h3 { font-size: 1.15em }

        & :where(ul, ol) {
            padding-inline-start: 1.5em;
        }

        & li {
            list-style: revert;
        }

        & blockquote {
            padding-inline-start: 0.85em;
            border-inline-start: 2px solid var(--color-line);
            color: var(--color-content-neutral);
        }

        & code {
            padding: 0.1em 0.3em;
            border-radius: 4px;
            font-size: 0.9em;
            background: color-mix(in oklch, var(--color-content-stark) 8%, transparent);
        }

        & pre {
            padding: 0.75em;
            border-radius: var(--radius);
            overflow-x: auto;
            background: color-mix(in oklch, var(--color-content-stark) 8%, transparent);

            & code {
                padding: 0;
                background: none;
            }
        }

        & a {
            color: var(--color-brand-content);
            text-decoration: underline;
        }

        & hr {
            margin-block: 1em;
        }

        & img {
            max-width: 100%;
        }

        & table {
            width: 100%;
            table-layout: fixed;

            & :where(td, th) {
                padding: 0.35em 0.5em;
                border: 1px solid var(--color-line);
                vertical-align: top;
            }

            & th {
                font-weight: 600;
                text-align: start;
                background: var(--color-surface-2);
            }
        }

        /* A block selection across cells. The browser can only highlight text, so an
           empty cell shows nothing — this is what makes a spreadsheet-style
           selection visible. */
        & :where(td, th)[data-text-edit-cell] {
            background: color-mix(in oklch, var(--color-brand-content) 18%, transparent);
        }

        /* Borders read as grabbable only when the pointer is on one */
        &[data-text-edit-border="x"] { cursor: col-resize }
        &[data-text-edit-border="y"] { cursor: row-resize }
        &[data-text-edit-resizing] { user-select: none }
        &[data-text-edit-resizing="x"] { cursor: col-resize }
        &[data-text-edit-resizing="y"] { cursor: row-resize }

        /* Task lists — the checkbox replaces the marker */
        & :where(ul[data-checklist]) {
            padding-inline-start: 0.25em;
            list-style: none;

            & li {
                display: flex;
                align-items: baseline;
                gap: 0.5em;
                list-style: none;
            }
        }

        & :where(dt) {
            font-weight: 600;
        }

        & :where(dd) {
            margin-inline-start: 1.5em;
        }

        & :where(kbd) {
            padding: 0.1em 0.35em;
            border: 1px solid var(--color-line);
            border-radius: 4px;
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
            font-size: 0.85em;
        }

        & :where(mark) {
            background: color-mix(in oklch, var(--color-brand-content) 25%, transparent);
            color: inherit;
        }

        & :where(small) {
            font-size: 0.8em;
        }

        & :where(figcaption) {
            font-size: 0.8em;
            color: var(--color-content-neutral);
        }

        & :where(abbr, dfn) {
            text-decoration: underline dotted;
        }
    }
}