/*
 * The shape a field wants, drawn behind the field.
 *
 * A contact number is `+93 XX XXX XXXX` and a tazkira is `0000-0000-00000`,
 * and neither of those is obvious from an empty box. So the remainder of the
 * pattern is painted underneath the caret and eaten away as digits arrive:
 * `XX XXX XXXX` becomes `74 XXX XXXX` becomes `74 476 XXXX`.
 *
 * It is a sibling laid over the input rather than anything inside it, because
 * an <input> cannot hold two colours of text. The part the user has already
 * typed is repeated here in transparent ink purely to take up the right amount
 * of room, so the hint always begins exactly where the real text stops — the
 * geometry is copied from the input itself in input-masks.js, which is what
 * keeps this honest across the admin theme, the public site and RTL.
 */
/*
 * A telephone number and a tazkira read left to right in every language this
 * system speaks. Left to inherit an RTL page's `text-align: right`, the input
 * would flush `74 4` against one edge while the hint behind it flushed
 * `74 4XX XXXX` against the same edge, and the two would sit on top of each
 * other. So a masked field is an LTR island, the way `.ltr-num` already is.
 *
 * `input.hms-masked` rather than a bare class: assets/css/rtl.css already
 * right-aligns `input[type="tel"]`, and a class loses to an attribute selector.
 * Matching its specificity and loading after it is enough — no !important.
 */
input.hms-masked {
    direction: ltr;
    text-align: left;
    unicode-bidi: embed;
}

.hms-mask-ghost {
    position: absolute;
    z-index: 3;
    margin: 0;
    display: block;
    overflow: hidden;
    box-sizing: border-box;
    white-space: pre;
    background: none;
    border-style: solid;
    border-color: transparent;

    /* Never take the click, the caret or the selection away from the input. */
    pointer-events: none;
    user-select: none;
}

.hms-mask-ghost > span {
    white-space: pre;
}

/* Occupies the width of what is typed without ever being seen. */
.hms-mask-ghost .hms-mask-typed {
    color: transparent;
}

/* The part still to come. `currentColor` so it follows the theme — the ghost
   is given the input's own colour, and only the opacity marks it as a hint. */
.hms-mask-ghost .hms-mask-rest {
    opacity: 0.38;
}

/*
 * The "Old tazkira" tick inside a tazkira field.
 *
 * An old (paper) tazkira has no pattern to type against, so the field carries
 * its own switch for it, at the far end where a unit or a clear button would
 * sit. Positioned in pixels by input-masks.js, like the ghost above, and it
 * names every property a container rule might hand it: it is a span beside an
 * input, which is exactly what form layouts like to restyle.
 */
span.hms-tazkira-old {
    position: absolute;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 2px 7px 2px 5px;
    border-radius: 999px;
    background: rgba(127, 140, 155, 0.16);
    color: inherit;
    font-size: 11px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}

span.hms-tazkira-old.is-on {
    background: color-mix(in srgb, var(--hms-primary, #0090a8) 16%, transparent);
    color: var(--hms-primary, #0090a8);
}

body.theme-dark span.hms-tazkira-old.is-on {
    color: #4fc3d6;
}

span.hms-tazkira-old > span {
    opacity: 0.8;
}

span.hms-tazkira-old.is-on > span {
    opacity: 1;
}

span.hms-tazkira-old > input[type="checkbox"] {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    min-height: 0;
    margin: 0;
    padding: 0;
    accent-color: var(--hms-primary, #0090a8);
    cursor: pointer;
}