/**
 * The three controls a Vordruck is built from, and how a filled value is inked.
 * Geometry comes from an inline style on each element; ink and paper from the
 * `.vo-page` scope.
 */

.vo-chk {
    position: absolute;
    border: var(--vo-hairline) solid var(--vo-line);
    background: var(--bg-surface);
    cursor: pointer;
    user-select: none;
}

.vo-chk:focus-visible,
.vo-in:focus-visible,
.vo-cell:focus-visible {
    outline: var(--focus-w) solid var(--focus-ring);
    outline-offset: var(--focus-offset);
}

/* The cross is printed matter, not handwriting: none of the entry faces
   carries U+2715, and a fallback glyph would jump around. */
.vo-chk.ticked::after {
    content: '\2715';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink1);
    opacity: var(--ink-alpha);
    font-family: var(--font-ui);
    font-weight: var(--fw-bold);
    font-size: var(--tick-size);
    line-height: var(--lh-none);
}

body[data-face="elite"] {
    --entry-font: 'Special Elite', monospace;
    --entry-size: 14px;
    --cell-size: 15px;
}

body[data-face="courier"] {
    --entry-font: 'Courier Prime', monospace;
    --entry-size: 15px;
    --cell-size: 16px;
}

body[data-face="sharetech"] {
    --entry-font: 'Share Tech Mono', monospace;
    --entry-size: 15px;
    --cell-size: 16px;
}

body[data-face="robotomono"] {
    --entry-font: 'Roboto Mono', monospace;
    --entry-size: 14px;
    --cell-size: 15px;
}

/* `--i1`…`--vc` are the contract a Vordruck overrides to give one group of
   entries a second ink — Muster 13's handwritten receipt table does. */
.vo-in,
.vo-cell {
    --i1: var(--ink1);
    --i2: var(--ink2);
    --ia: var(--ink-alpha);
    --vc: var(--var-color);

    --ink-flat-start: color-mix(in srgb, var(--i1) calc(var(--ia) * 100%), transparent);
    --ink-flat-end: color-mix(in srgb, var(--i2) calc(var(--ia) * 100%), transparent);
    --ink-run-start: color-mix(in srgb, var(--ink-flat-start), var(--ink-flat-end)
                     calc(var(--vc) * var(--jh, .5) * 1%));
    --ink-run-end: color-mix(in srgb, var(--ink-flat-start), var(--ink-flat-end)
                   calc(var(--vc) * 1%));

    background-color: transparent;
    background-image: linear-gradient(var(--ja, 120deg),
        var(--ink-run-start) 0%,
        var(--ink-run-end) calc(38% + var(--jg, 0%)),
        var(--ink-run-start) 70%,
        var(--ink-run-end) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    caret-color: var(--i1);
    filter: url(#vo-pen);
    font-family: var(--entry-font);
}

/* A signature is written, never typed, whatever face the Vordruck is set to.
   Set as the entry's own font property, so it beats the face inherited from
   the body without a fight over specificity. */
.vo-in.sig {
    --entry-font: 'Homemade Apple', cursive;
    --entry-size: 15px;
}

.vo-in {
    position: absolute;
    border: none;
    font-size: var(--entry-size);
    outline: none;
    padding: 0;
    text-align: left;
}

input.vo-in {
    display: flex;
    align-items: flex-end;
    line-height: var(--lh-none);
}

textarea.vo-in {
    resize: none;
    line-height: var(--lh-tight);
    vertical-align: top;
}

/* Borderless: most Vordrucke already print the cell's box, and a form that
   does not (Muster 13's IK row) draws its own. */
.vo-cell {
    position: absolute;
    border: none;
    font-size: var(--cell-size);
    font-weight: var(--fw-semibold);
    text-align: center;
    outline: none;
    padding: 0;
    text-transform: uppercase;
}

/* The glyphs are painted through a background, so focus cannot be shown with
   one — it would be clipped away with everything that is not a letter. */
.vo-in:focus,
.vo-cell:focus {
    outline: var(--focus-w-fine) solid var(--focus-ring);
    outline-offset: 0;
}

/* An overlapping neighbour must not swallow the text being typed. */
.vo-in:focus {
    z-index: var(--z-raise-4);
}

/* Above the printed layer, so a click lands on the control and never on a
   label or rule that happens to overlap it. The scroll margin clears the
   fixed mobile bar. */
.vo-chk,
.vo-in,
.vo-cell {
    z-index: var(--z-raise-1);
    scroll-margin: calc(var(--bar-height) + var(--sp-9)) 0;
    transition: box-shadow var(--t-base) var(--ease);
}

/* `Vo.Help` marks every control of the field the reader is on, so hovering a
   printed label lights up the box it belongs to and a value spelled across ten
   cells lights up as one field rather than as the one cell under the pointer. */
.vo-chk.hot,
.vo-in.hot,
.vo-cell.hot {
    box-shadow: var(--shadow-field-hot);
}

.vo-in.invalid,
.vo-cell.invalid {
    outline: var(--focus-w) solid var(--err-strong);
    outline-offset: var(--focus-inset);
    background: var(--err-wash);
}

.vo-chk.invalid {
    border-color: var(--err-strong);
    box-shadow: var(--shadow-invalid);
}