/* ==========================================================================
   typst.giit.ch - the compiled pages: one <svg> per page from the Typst
   renderer, the text layer for selecting, the frame of the cursor's place
   and the field for editing text on the page.
   ========================================================================== */

@font-face { font-family: "Libertinus Serif"; src: url(../fonts/LibertinusSerif-Regular.otf) format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }

.blatt {
    position: relative; flex: none; overflow: hidden;
    background: #ffffff; color: #000000; color-scheme: light;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.blatt svg.typst-seite { display: block; width: 100%; height: 100%; overflow: hidden; }
.blatt svg, .typst-defs { fill: none; }
.typst-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Text layer: transparent text over the glyphs, so the text can be selected and copied. */
.blatt .typst-text { pointer-events: bounding-box; }
.blatt .tsel, .blatt .tsel span {
    position: fixed; left: 0; width: 100%; height: 100%;
    white-space: pre; text-align: justify; text-align-last: justify;
    color: transparent; line-height: 1;
}
.blatt .tsel::selection, .blatt .tsel span::selection { color: transparent; background: rgba(26, 115, 232, 0.3); }
.blatt .outline_glyph path, .blatt path.outline_glyph { fill: var(--glyph_fill); stroke: var(--glyph_stroke); }
.blatt .pseudo-link { fill: transparent; pointer-events: all; }

/* The cursor's place in the code */
.blatt .quelle { position: absolute; pointer-events: none; outline: 2px solid rgba(26, 115, 232, 0.55); border-radius: 2px; background: rgba(26, 115, 232, 0.07); }

/* Editing text on the page: the field is white with black text like the page in
   every theme; #pages outweighs the general rule for fields (style.css). */
#pages .blatt .text-vor-ort {
    position: absolute; z-index: 5; box-sizing: border-box; margin: 0; padding: 0 2px;
    field-sizing: content; width: auto; max-width: none; box-shadow: none;
    font-family: "Libertinus Serif", Georgia, serif; line-height: 1; color: #000000;
    background: #ffffff; border: 0; border-radius: 2px;
    outline: 2px solid rgba(26, 115, 232, 0.8); outline-offset: 1px; caret-color: #1a73e8;
}

/* While the compiler loads, compiles, or the code has errors */
.buehne.veraltet .seiten .blatt { opacity: .55; }
.buehne.laedt .veraltet-hinweis { display: block; background: var(--flaeche); color: var(--leise); }

@media print { .blatt .quelle, .blatt .text-vor-ort { display: none; } }

/* Export: vector pictures need no sharpness */
#export[data-vektor="true"] .nur-raster { display: none; }

/* Problems from the compiler: message and hints */
.probleme .pr-text { display: flex; flex-direction: column; gap: 2px; }
.probleme .pr-hinweis { color: var(--leise); font-size: .95em; }