/* Anmerkungs-Ebene des geteilten Dokument-Viewers — 1:1 zur abgenommenen Vorschau
   VORSCHAU-Dokument-Viewer-Werkzeuge.html (Abschnitt 1 und 3). Die Ebene erzeugt
   fn-docviewer-annotations.js zur Laufzeit; deshalb globales CSS statt bereichsbezogenem.
   Ausschliesslich --fn-*-Tokens. */

.fna-layer {
    position: absolute;
    transform-origin: center center;
    pointer-events: none;
    z-index: 4;
}

/* Ein Werkzeug ist gewaehlt: die Ebene faengt die Maus. */
.fna-layer.fna-armed {
    pointer-events: auto;
    cursor: crosshair;
}

.fna-svg {
    position: absolute;
    inset: 0;
    overflow: visible;
    pointer-events: none;
}

/* Farben der Palette — gespeichert wird nur der Schluessel. */
.fna-c-gold   { color: var(--fn-cat-gold); }
.fna-c-teal   { color: var(--fn-cat-teal); }
.fna-c-pink   { color: var(--fn-cat-pink); }
.fna-c-purple { color: var(--fn-cat-purple); }
.fna-c-orange { color: var(--fn-cat-orange); }
.fna-c-blue   { color: var(--fn-cat-blue); }
.fna-c-red    { color: var(--fn-danger); }
.fna-c-ink    { color: var(--fn-contrast-dark); }

.fna-arrow {
    transition: opacity .12s ease;
}

.fna-stroke {
    stroke: currentColor;
    stroke-linecap: round;
    fill: none;
}

.fna-fill {
    fill: currentColor;
}

/* Breite, unsichtbare Trefferlinie — damit man den Pfeil mit der Maus findet. */
.fna-hit {
    stroke: transparent;
    stroke-width: 12;
    pointer-events: stroke;
}

/* Rahmen beim Aufziehen eines Bereichs (wie .marked der Vorschau). */
.fna-marking {
    fill: var(--fn-accent-soft);
    stroke: var(--fn-primary);
    stroke-width: 1.5;
    stroke-dasharray: 4 3;
}

/* Jedes Objekt ruht bei 30 % und wird unter der Maus deckend (Vorschau §3). */
.fna-obj {
    position: absolute;
    pointer-events: auto;
    opacity: .3;
    transition: opacity .12s ease;
}

.fna-obj.fna-hot,
.fna-obj:focus-within {
    opacity: 1;
    z-index: 5;
}

.fna-arrow-host {
    width: 22px;
    height: 22px;
}

/* Bemerkung: ein Zettel auf dem Papier. */
.fna-note {
    min-width: 110px;
    min-height: 24px;
    padding: 5px 7px;
    font-size: 10.5px;
    line-height: 1.45;
    color: var(--fn-contrast-dark);
    background: var(--fn-cat-gold-soft);
    border: 1px solid var(--fn-cat-gold);
    border-radius: 3px;
    box-shadow: var(--fn-elevation-2);
    white-space: pre-wrap;
    word-break: break-word;
    outline: none;
    cursor: text;
}

.fna-note:focus {
    outline: 2px solid var(--fn-primary);
}

.fna-note:empty::before {
    content: attr(data-placeholder);
    color: var(--fn-text-tertiary);
}

/* Stift und Papierkorb, 22 x 22, oben rechts ausserhalb der Flaeche. */
.fna-tools {
    position: absolute;
    top: -12px;
    right: -12px;
    display: none;
    gap: 4px;
    z-index: 9;
}

.fna-obj.fna-hot .fna-tools {
    display: flex;
}

.fna-tool {
    width: 22px;
    height: 22px;
    padding: 0;
    border-radius: 6px;
    border: 1px solid var(--fn-border-strong);
    background: var(--fn-surface);
    color: var(--fn-text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--fn-elevation-2);
}

.fna-tool:hover {
    color: var(--fn-primary);
    border-color: var(--fn-accent-line);
}

.fna-tool.fna-tool-delete:hover {
    color: var(--fn-danger);
    border-color: var(--fn-danger);
}