/* textedit.css - on-page chrome for the Edit text and text markup tools (textedit.js):
   the hover box around an existing text line, its "Edit" pill, the keyboard focus box and
   the live preview of a highlight / underline / strikethrough selection.

   Everything lives in the page's .tool-layer, where 1 CSS px = 1 pt and the layer is
   scaled/rotated with the page; sizes that must stay constant on screen divide by var(--s).
   None of it takes pointer events: interaction is handled through interact.js. */

/* ---------------------------------------------------------------- hover / focus box */

.tool-layer .te-hover {
    position: absolute;
    box-sizing: border-box;
    pointer-events: none;
    background: var(--select-soft);
    border: calc(1px / var(--s, 1)) solid var(--select);
    border-radius: calc(2px / var(--s, 1));
    animation: te-fade var(--dur-fast) var(--ease);
}

/* an existing text object: outline only, so its content reads clearly */
.tool-layer .te-hover.is-object {
    background: transparent;
    border-style: dashed;
}

/* keyboard focus: a heavier ring so it is findable without a pointer */
.tool-layer .te-hover.is-kbd {
    border-width: calc(2px / var(--s, 1));
    box-shadow: 0 0 0 calc(3px / var(--s, 1)) var(--select-soft);
}

/* ---------------------------------------------------------------- the "Edit" pill */

/* zero-size anchor at the box's displayed top-left corner; counter-rotated by JS */
.tool-layer .te-pin {
    position: absolute;
    width: 0;
    height: 0;
    transform-origin: 0 0;
    pointer-events: none;
    z-index: 1;
}

.tool-layer .te-pill {
    position: absolute;
    left: calc(-1px / var(--s, 1));
    bottom: calc(4px / var(--s, 1));
    padding: calc(3px / var(--s, 1)) calc(8px / var(--s, 1));
    border-radius: var(--pill);
    background: var(--select);
    color: var(--marker-text);          /* white on orange fails AA; near-black is 5.9:1 */
    font-family: var(--font-ui);
    font-size: calc(11px / var(--s, 1));
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.01em;
    white-space: nowrap;
    user-select: none;
    animation: te-fade var(--dur-fast) var(--ease);
}

/* too close to the page's top edge: hang the pill below the box instead */
.tool-layer .te-pin.is-below .te-pill {
    bottom: auto;
    top: calc(4px / var(--s, 1));
}

/* ---------------------------------------------------------------- markup preview */

.tool-layer .te-marks {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.tool-layer .te-mark {
    position: absolute;
    box-sizing: border-box;
    pointer-events: none;
}

/* the span a rule will be drawn under / through */
.tool-layer .te-mark-span {
    background: var(--select-soft);
    border-radius: calc(1px / var(--s, 1));
}

/* free box (Alt-drag or a drag away from text) */
.tool-layer .te-mark.is-free {
    outline: calc(1px / var(--s, 1)) dashed var(--select);
}

/* ---------------------------------------------------------------- cursor */

/* set on the .page by textedit.js while the pointer is over text these tools act on */
.page.te-text-cursor,
.page.te-text-cursor * {
    cursor: text !important;
}

@keyframes te-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .tool-layer .te-hover,
    .tool-layer .te-pill {
        animation: none;
    }
}