/* objects.css - document objects inside each page's .object-layer (objects.js).

   Inside .page-space one CSS pixel is one PDF point, so object boxes use the model's
   numbers directly; anything that must keep a constant *screen* size (edit-mode link and
   redaction decorations) divides by var(--s). Object colours come from the document
   (they are content); UI colours come from tokens.css. Selection chrome is interact.js'. */

/* ------------------------------------------------------------------ every object */

.object-layer .obj {
    position: absolute;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    transform-origin: 50% 50%;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.object-layer .obj > svg {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    overflow: visible;
}

.object-layer .obj > svg.obj-clip { overflow: hidden; }

/* The text under the inline editor is hidden while it is being edited. */
.object-layer .obj.editing { visibility: hidden; }

/* ------------------------------------------------------------------ text */

.object-layer .obj-text {
    overflow: visible;
    letter-spacing: 0;
    word-spacing: 0;
    font-kerning: normal;
    font-synthesis: none;
    text-transform: none;
    text-align: left;
    direction: ltr;
}

.object-layer .obj-text-line {
    position: absolute;
    margin: 0;
    padding: 0;
    white-space: pre;
    text-decoration-skip-ink: none;
}

/* ------------------------------------------------------------------ image */

.object-layer .obj-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
}

.object-layer .obj-image-missing {
    background: repeating-linear-gradient(135deg, var(--surface-2) 0 calc(6px / var(--s)),
                                          var(--surface-3) calc(6px / var(--s)) calc(12px / var(--s)));
    outline: calc(1px / var(--s)) dashed var(--line-strong);
    outline-offset: calc(-1px / var(--s));
}

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

.object-layer .obj-markup-bar {
    position: absolute;
    left: 0;
    right: 0;
}

/* ------------------------------------------------------------------ redaction (edit-mode marks) */

.object-layer .obj-redact { overflow: hidden; }

.object-layer .obj-redact-mark,
.object-layer .obj-redact-label { display: none; }

body[data-mode="edit"] .object-layer .obj-redact-mark {
    display: block;
    position: absolute;
    inset: calc(2px / var(--s));
    border: calc(1px / var(--s)) dashed var(--red-paper);   /* pages stay white in dark mode */
    pointer-events: none;
}

body[data-mode="edit"] .object-layer .obj-redact-label {
    display: block;
    position: absolute;
    left: calc(4px / var(--s));
    top: calc(4px / var(--s));
    padding: 0 calc(4px / var(--s));
    border-radius: calc(3px / var(--s));
    background: var(--red-paper);     /* white on crimson 6.3:1 in both themes */
    color: var(--paper);
    font: 600 calc(9px / var(--s)) / 1.5 var(--font-ui);
    letter-spacing: 0.02em;
    white-space: nowrap;
    pointer-events: none;
}

/* ------------------------------------------------------------------ note (comment icon) */

.object-layer .obj-note {
    pointer-events: auto;
    cursor: default;
}

.object-layer .obj-note-body {
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    border: 0.75px solid transparent;   /* colour set from the note's own colour */
    border-radius: 3px;
    /* the top-right corner is folded over */
    clip-path: polygon(0 0, 68% 0, 100% 32%, 100% 100%, 0 100%);
}

.object-layer .obj-note-fold {
    position: absolute;
    right: 0;
    top: 0;
    width: 32%;
    height: 32%;
    border-bottom-left-radius: 2px;
    clip-path: polygon(0 0, 100% 100%, 0 100%);
    filter: brightness(0.78);
}

.object-layer .obj-note > svg.obj-note-icon {
    position: absolute;
    left: 50%;
    top: 55%;
    width: 13px;
    height: 13px;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

body[data-mode="view"] .object-layer .obj-note { cursor: pointer; }

.object-layer .obj-note:focus-visible {
    outline: calc(2px / var(--s)) solid var(--select);
    outline-offset: calc(2px / var(--s));
}

/* Read-only comment popup (hover / focus / tap). Lives in document.body. */
.obj-note-pop {
    position: fixed;
    z-index: 900;
    box-sizing: border-box;
    min-width: 160px;
    max-width: min(300px, calc(100vw - 16px));
    padding: 10px 12px;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-pop);
    font: 400 var(--fs-s) / 1.45 var(--font-ui);
    pointer-events: none;
    opacity: 0;
    transform: translateY(2px);
    transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.obj-note-pop.open {
    opacity: 1;
    transform: none;
}

.obj-note-pop[hidden] { display: none; }

.obj-note-pop-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
    margin-bottom: 4px;
}

.obj-note-pop-author {
    font-weight: 600;
    color: var(--text);
}

.obj-note-pop-date {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--text-3);
}

.obj-note-pop-text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    max-height: 240px;
    overflow: hidden;
    color: var(--text-2);
}

.obj-note-pop-empty {
    color: var(--text-3);
    font-style: italic;
}

/* Comment editor (content of a ui.popover) */
.obj-note-editor {
    display: grid;
    /* A lone `auto` track would grow to the footer row's min-content and push the editor
       past its width (a horizontal scrollbar in the popover): pin it to the container. */
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    width: min(300px, calc(100vw - 48px));
    font: 400 var(--fs-s) / 1.4 var(--font-ui);
    color: var(--text);
}

.obj-note-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
}

.obj-note-label {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--text-2);
}

.obj-note-editor .obj-note-input {
    min-height: 96px;
    resize: vertical;
    font: inherit;
    line-height: 1.45;
}

.obj-note-hint {
    margin: 0;
    font-size: var(--fs-xs);
    color: var(--text-3);
}

.obj-note-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.obj-note-actions > .btn { flex: none; }

/* The date is the row's only shrinkable item: on a narrow screen or with a long locale
   date it ellipsises (full text in its title) instead of widening the row. */
.obj-note-when {
    flex: 0 1 auto;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.obj-note-spacer { flex: 1; }

/* ------------------------------------------------------------------ link */

/* Invisible outside Edit mode; View mode makes it clickable. */
.object-layer .obj-link-glyph { display: none; }

body[data-mode="edit"] .object-layer .obj-link {
    border: calc(1.25px / var(--s)) dashed var(--select);
    background: var(--select-soft);
}

body[data-mode="edit"] .object-layer .obj-link-glyph {
    display: grid;
    place-items: center;
    position: absolute;
    right: calc(2px / var(--s));
    top: calc(2px / var(--s));
    width: calc(16px / var(--s));
    height: calc(16px / var(--s));
    border-radius: calc(4px / var(--s));
    background: var(--surface);
    color: var(--select);
    box-shadow: var(--shadow-1);
    pointer-events: none;
}

body[data-mode="edit"] .object-layer .obj-link-glyph svg {
    width: calc(11px / var(--s));
    height: calc(11px / var(--s));
}

body[data-mode="view"] .object-layer .obj-link {
    pointer-events: auto;
    cursor: pointer;
}

body[data-mode="view"] .object-layer .obj-link:hover {
    background: var(--select-soft);
}

body[data-mode="view"] .object-layer .obj-link:focus-visible {
    outline: calc(2px / var(--s)) solid var(--select);
    outline-offset: calc(1px / var(--s));
}

/* ------------------------------------------------------------------ inline text editor */

.object-layer .obj-editor {
    position: absolute;
    z-index: 10;
    box-sizing: border-box;
    display: block;
    min-width: 0;
    min-height: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    outline: none;
    box-shadow: none;
    resize: none;
    overflow: hidden;
    background: transparent;
    /* Pages are always white paper, in both themes: use the selection orange (not --ink,
       which turns white in dark mode and would vanish on the page). */
    caret-color: var(--select);
    pointer-events: auto;
    letter-spacing: 0;
    word-spacing: 0;
    font-kerning: normal;
    font-synthesis: none;
    text-transform: none;
    text-indent: 0;
    tab-size: 4;
    overflow-wrap: anywhere;
    scrollbar-width: none;
    -webkit-appearance: none;
    appearance: none;
    touch-action: manipulation;
}

.object-layer .obj-editor::-webkit-scrollbar { display: none; }

.object-layer .obj-editor:focus,
.object-layer .obj-editor:focus-visible { outline: none; }

@media (prefers-reduced-motion: reduce) {
    .obj-note-pop { transition: none; }
}