/**
 * Muster 13 — Heilmittelverordnung: the printed sheet only.
 *
 * A number in this file is a measurement of the scan, in the same category as
 * the inline left/top/width on every printed element — not a design decision,
 * and deliberately not a token. Everything that is chrome rather than paper
 * (the QR dialog, the Ausfüllen preview) uses the shell's tokens and controls.
 *
 * The sheet is DIN A, so the canvas is the closest whole-pixel A ratio that
 * only ever *adds* paper: 704 x 1000 was 0.44 % too narrow, and the three
 * pixels are added at the right edge, where the Vordruck prints nothing. No
 * coordinate moves.
 */

/* Exactly one form stylesheet is loaded per page, so this Vordruck's ink,
   paper and page size can simply be the document's. */
:root {
    --vo-ink: rgb(189, 72, 91);
    --vo-line: rgb(189, 72, 91);
    --vo-paper: rgb(212, 230, 242);
    --vo-print-font: Arial, Helvetica, sans-serif;
    /* The shell keeps this on whole device pixels, so every printed rule and
       tick has the same weight. */
    --line-width: var(--vo-hairline);
    --vo-page-width: 707px;
    --vo-page-height: 1000px;
}

/* The front's IK row is the one place on this Vordruck where the boxes are not
   printed, so those cells draw their own. Every other cell row sits inside a
   printed box already, and a border here would double every line. */
.vo-page--m13 .vo-cell[data-field="ik"] {
    border: var(--line-width) solid var(--vo-line);
    border-top: none;
}

/* The four header tick boxes are large enough for a bigger cross. */
.vo-page--m13 .vo-chk[data-group="left"].ticked::after {
    font-size: 31px;
}

.bg-tint {
    position: absolute;
    left: 0;
    top: 0;
    width: 707px;
    height: 1000px;
    background: var(--vo-paper);
}

.box,
.cell {
    position: absolute;
    border: var(--line-width) solid var(--vo-line);
    background: var(--bg-surface);
}

.label,
.section-h,
.muster-footer {
    position: absolute;
    color: var(--vo-ink);
    font-family: var(--vo-print-font);
    line-height: 1;
}

.label {
    white-space: nowrap;
}

.section-h {
    font-weight: 700;
    white-space: nowrap;
}

.muster-footer {
    font-size: 8px;
}

/* Sits inside the four header tick boxes, which are controls and therefore
   raised — the caption has to be raised further or the box paints over it. */
.small-label {
    position: absolute;
    z-index: var(--z-raise-2);
    color: var(--vo-ink);
    font-family: var(--vo-print-font);
    font-size: 8px;
    line-height: 1.08;
    text-align: center;
    font-weight: 400;
    pointer-events: none;
}

.rule {
    position: absolute;
    background: var(--vo-ink);
    height: var(--line-width);
}

.vtick {
    position: absolute;
    background: var(--vo-ink);
    width: var(--line-width);
}

.fill {
    position: absolute;
    background: var(--bg-surface);
}

.title {
    position: absolute;
    font-family: var(--vo-print-font);
    font-weight: 700;
    color: var(--vo-ink);
    font-size: 22px;
    /* The only fractional value in the stylesheets. Rendering it as an em
       equivalent moves the glyphs, so it stays as authored — the printed
       title must not change. */
    letter-spacing: -0.3px;
    line-height: 1;
}

.ital {
    font-style: italic;
}

/**
 * The receipt table on the reverse is signed by the practice that carried out
 * each treatment, so it is the one thing on either sheet that is written
 * rather than printed: a second ink, a written face and its own noise.
 *
 * Each entry's deviation (`--js`, `--jx`, `--jy` …) is baked into its inline
 * style. The panel scales those deviations; it does not generate them, or the
 * form would look freshly rewritten on every reload.
 */
:root {
    --hink1: #16276b;
    --hink2: #3b57b5;
    --hink-alpha: 1;
    --hvar-color: 45;
    --var-offset: 22;
    --hand-scale: 1;
    --var-size: 40;
    --hand-font: 'Homemade Apple', cursive;
    --hand-size: 15px;
}

body[data-handface="architect"] { --hand-font: 'Architects Daughter', cursive; --hand-size: 17px; }
body[data-handface="caveat"] { --hand-font: 'Caveat', cursive; --hand-size: 22px; }
body[data-handface="kalam"] { --hand-font: 'Kalam', cursive; --hand-size: 16px; }
body[data-handface="gloria"] { --hand-font: 'Gloria Hallelujah', cursive; --hand-size: 15px; }
body[data-handface="homemade"] { --hand-font: 'Homemade Apple', cursive; --hand-size: 15px; }
body[data-handface="cedarville"] { --hand-font: 'Cedarville Cursive', cursive; --hand-size: 19px; }

/* A name is signed in one connected stroke whichever hand fills in the rest of
   the table. Set on the entry itself, so it overrides the inherited value
   whatever the body carries. */
.vo-in.hand[data-field="leistung-unterschrift"] {
    --hand-font: 'Homemade Apple', cursive;
    --hand-size: 15px;
}

body[data-hand="on"] .vo-in.hand {
    --i1: var(--hink1);
    --i2: var(--hink2);
    --ia: var(--hink-alpha);
    --vc: var(--hvar-color);
    filter: url(#vo-penhand);
    font-family: var(--hand-font);
    /* The deviations are centred on zero, so an entry is as likely to run over
       its ruling as to sit inside it. */
    font-size: calc(var(--hand-size) * var(--hand-scale, 1) *
                    (1 + var(--js, 0) * var(--var-size) * .0055));
    transform: translate(calc(var(--jx, 0) * var(--var-offset) * .14px),
                         calc(var(--jy, 0) * var(--var-offset) * .09px));
}

body.rendering-pdf[data-hand="on"] .vo-in.hand {
    color: var(--hink1);
    -webkit-text-fill-color: var(--hink1);
    opacity: var(--hink-alpha);
}

.hint {
    color: rgba(189, 72, 91, 0.42);
}

.hint[hidden] {
    display: none;
}

.b {
    font-weight: 700;
}

.c {
    text-align: center;
}

/* The QR code sits over the Therapieziele box, positioned by an inline style
   like every other printed element. */
.qr-render {
    position: absolute;
    background: var(--bg-surface);
}

.qr-render[hidden] {
    display: none;
}

.qr-render__img {
    display: block;
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
}

.vo-fill__qr {
    margin-top: var(--sp-5);
}

.vo-fill__qr[hidden] {
    display: none;
}

.vo-fill__qr img {
    display: block;
    width: var(--thumb);
    max-width: 100%;
    height: auto;
    image-rendering: pixelated;
}