/* =====================================================================
   Muster 13 — Heilmittelverordnung, pixel geometry only.

   Loaded after shell.css, which owns the design tokens and every shared
   control. This file holds the 707 x 1000 coordinate space, the printed
   primitives unique to this Vordruck, and its QR-code feature.

   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);
    /* Hairline for the printed rules and vertical ticks — the shell keeps it
       on whole device pixels, so every line has the same weight. */
    --line-width: var(--vo-hairline);
    --vo-page-width: 707px;
    --vo-page-height: 1000px;
    /* The context card stands the same width as the Vordruck beside it. */
    --vo-card-width: 707px;
}

/* 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 — the reverse's
   Rechnungs-, Beleg- und Abbruchnummern and its IK — 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;
    background: var(--bg-surface);
}

/* 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);
}

/* =====================================================================
   Form primitives (absolute-positioned via inline style on each element)
   ===================================================================== */
.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: Arial, Helvetica, sans-serif;
    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: 2;
    color: var(--vo-ink);
    font-family: Arial, Helvetica, sans-serif;
    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: Arial, Helvetica, sans-serif;
    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;
}

/* =====================================================================
   Handwriting — the receipt table on the reverse

   The table 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. The
   entries take a second ink, a written face and their own noise; everything
   else on the Vordruck keeps the Formular panel's first setting.

   Each entry carries a fixed deviation of its own (`--js`, `--jx`, `--jy` …
   in its inline style), mostly inherited from its row, because a line is
   written in one go. 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: 45;
    --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; }

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);
    /* A hand keeps neither the size nor the line: at Versatz 100 an entry may
       sit 14 px sideways and 9 px up or down — well past its own cell — and at
       Größe 100 it ranges over a third of the nominal size. */
    font-size: calc(var(--hand-size) *
                    (1 + var(--js, 0) * var(--var-size) * .0035));
    transform: translate(calc(var(--jx, 0) * var(--var-offset) * .14px),
                         calc(var(--jy, 0) * var(--var-offset) * .09px));
}

/* Same for the handwritten table: its own ink, laid down flat. */
body.rendering-pdf[data-hand="on"] .vo-in.hand {
    color: var(--hink1);
    -webkit-text-fill-color: var(--hink1);
    opacity: var(--hink-alpha);
}

/* The reverse prints its date guides as a lighter tint. */
.hint {
    color: rgba(189, 72, 91, 0.42);
}

.hint[hidden] {
    display: none;
}

.b {
    font-weight: 700;
}

.c {
    text-align: center;
}

/* =====================================================================
   Optional QR code (Therapieziele box) + its dialog
   ===================================================================== */
/* Drawn above the Therapieziele textarea; absolute-positioned via inline
   left/top/width/height like the other form primitives. */
.qr-render {
    position: absolute;
    background: #fff;
}

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

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

.qr-dialog__input {
    width: 100%;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
    padding: 8px 10px;
    border: 1px solid var(--border-control);
    border-radius: 4px;
    resize: vertical;
}

.qr-dialog__error {
    font-size: 13px;
    font-weight: 600;
    color: var(--vo-ink);
    margin: 0;
}

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

.qr-dialog__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* Mobile Ausfüllen preview */
.mform__qr-btn {
    align-self: flex-start;
    padding: 10px 14px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    background: var(--bg-surface);
    border: 1px solid var(--border-control);
    border-radius: 6px;
    color: var(--text-control);
    cursor: pointer;
}

.mform__qr {
    margin-top: 10px;
}

.mform__qr[hidden] {
    display: none;
}

.mform__qr img {
    display: block;
    width: 180px;
    max-width: 100%;
    height: auto;
    image-rendering: pixelated;
}