/* BIZAPI.Ui — pictures in rich text (TP482 S14, biz-rich.js): how a picture sits in the text, wherever rich text is
   drawn (the editor, a task's or comment's text, a pin), the picked picture's bar in the editor, and the crop window.
   The three placement classes are the only classes the API keeps on a picture (DocHtml). */

:root {
    --biz-crop-veil: color-mix(in srgb, var(--rz-base-900) 70%, transparent);
    --biz-crop-shade: color-mix(in srgb, var(--rz-base-900) 55%, transparent);
}

/* A picture never runs wider than its text, keeps its proportions, and a floated one stays inside the text's box. */
.docs-html, .rz-html-editor-content { display: flow-root; }
/* Always its own proportions (as .docs-html draws it), so a picture never stretches on a narrow screen. */
.rz-html-editor-content img { max-width: 100%; height: auto; }
img.docs-img-left { float: left; margin: .25em 1em .5em 0; }
img.docs-img-right { float: right; margin: .25em 0 .5em 1em; }
img.docs-img-center { display: block; margin: .5em auto; }

/* ── the picked picture's bar ──────────────────────────────────────────────────────────────────── */
.rz-html-editor { position: relative; }
.biz-imgbar { position: absolute; z-index: 3; display: flex; align-items: center; gap: 2px; padding: 3px; color: var(--rz-text-color);
    background: var(--rz-base-background-color); border: 1px solid var(--biz-line); border-radius: var(--rz-border-radius);
    box-shadow: 0 4px 14px var(--biz-float-shadow); }
.biz-imgbar[hidden] { display: none; }
.biz-imgbar button { display: inline-flex; align-items: center; gap: .25rem; height: 28px; padding: 0 .45rem; font: inherit; font-size: .78rem;
    color: inherit; background: transparent; border: 1px solid transparent; border-radius: calc(var(--rz-border-radius) - 1px); cursor: pointer; white-space: nowrap; }
.biz-imgbar button:hover { background: var(--rz-base-100); }
.biz-imgbar button.is-on { color: var(--rz-on-primary-lighter); background: var(--rz-primary-lighter); border-color: var(--rz-primary); }
.biz-imgbar .rzi { font-size: 1.15rem; }
.biz-imgbar-gap { width: 1px; align-self: stretch; margin: 3px 3px; background: var(--biz-line); }
:root[data-biz-theme="standard-dark"] .biz-imgbar button:hover { background: var(--rz-base-700); }

/* ── the crop window ───────────────────────────────────────────────────────────────────────────── */
.biz-crop { position: fixed; inset: 0; z-index: 2147482000; display: grid; place-items: center; padding: 16px; background: var(--biz-crop-veil); }
.biz-crop-card { display: flex; flex-direction: column; gap: .75rem; max-width: min(1100px, 100%); max-height: 100%; padding: 1rem 1.1rem;
    color: var(--rz-text-color); background: var(--rz-base-background-color); border-radius: var(--rz-border-radius);
    box-shadow: 0 12px 40px var(--biz-float-shadow); }
.biz-crop-title { font-weight: 700; color: var(--rz-text-title-color); }
.biz-crop-stage { position: relative; align-self: center; overflow: hidden; line-height: 0; touch-action: none; user-select: none; cursor: crosshair; }
.biz-crop-img { display: block; max-width: min(1060px, calc(100vw - 70px)); max-height: calc(100vh - 210px); }
.biz-crop-frame { position: absolute; box-sizing: border-box; border: 2px solid var(--rz-primary); box-shadow: 0 0 0 100vmax var(--biz-crop-shade); cursor: move; }
.biz-crop-handle { position: absolute; width: 12px; height: 12px; margin: -7px 0 0 -7px; background: var(--rz-base-background-color);
    border: 2px solid var(--rz-primary); border-radius: 2px; }
.biz-crop-handle.is-nw { left: 0; top: 0; cursor: nwse-resize; }
.biz-crop-handle.is-n { left: 50%; top: 0; cursor: ns-resize; }
.biz-crop-handle.is-ne { left: 100%; top: 0; cursor: nesw-resize; }
.biz-crop-handle.is-e { left: 100%; top: 50%; cursor: ew-resize; }
.biz-crop-handle.is-se { left: 100%; top: 100%; cursor: nwse-resize; }
.biz-crop-handle.is-s { left: 50%; top: 100%; cursor: ns-resize; }
.biz-crop-handle.is-sw { left: 0; top: 100%; cursor: nesw-resize; }
.biz-crop-handle.is-w { left: 0; top: 50%; cursor: ew-resize; }
.biz-crop-size { font-size: .8rem; color: var(--biz-muted); font-variant-numeric: tabular-nums; }
.biz-crop-actions { display: flex; justify-content: flex-end; gap: .5rem; flex-wrap: wrap; }