/* ==========================================================================
   Inheris input mask and format guidance (shared across every console AND
   every public page).

   Companion to inheris-inputmask.js. Loaded on console pages next to
   inheris-board.css, and on light public pages with a plain <link>, because
   the pages that carry the most important fields (provider enrollment, the
   recipient application, the donor portal) never load the Command kit.

   Every paint is var(--inh-token, <light fallback>) per the fleet SKIN RULE,
   so one rule is correct under Command (dark), Atrium (light) and skin=off.

   Deliberately absent: any color, background or border-color on the input
   itself. The IPA skin paints .inh-cmd input with an !important background at
   specificity (0,1,1); competing with it produces dark on dark. Not competing
   is the only stable answer.

   Canonical source: demo-stack-runner/inheris-design-kit/inheris-inputmask.css,
   propagated to each app's static/inheris-kit/ by sync-kit.sh in that
   directory (never edit a console's copy directly). No em or en dashes.
   ========================================================================== */

/* The unfilled remainder of a template, e.g. the "YYYY" still to come in
   08/15/YYYY. Holds template characters ONLY, never anything the user typed.
   All geometry (left, top, font metrics) is written inline by the script, so a
   page that fails to load this stylesheet cannot render the tail as stray
   body text: the script probes for this file and disables the tail without it. */
.inh-mask-tail{
  position:absolute;
  z-index:2;
  pointer-events:none;
  user-select:none;
  -webkit-user-select:none;
  background:transparent;
  white-space:pre;                 /* preserves the space in ") " */
  /* The canonical muted fallback, not a lighter grey. #9AA7A7 on white reads
     at 2.48:1, under the fleet's 3.0:1 blocker threshold, so the template a
     person is meant to be reading would have been the least legible thing on
     the page. #637373 gives 4.96:1 and is still obviously lighter than the
     18.45:1 of the text they typed, which is the distinction that matters. */
  color:var(--inh-ink-3, #637373);
}

/* The format expectation as a real accessible description. Never the only
   place the format appears, and never added when the page already has one. */
.inh-mask-hint{
  display:block;
  color:var(--inh-ink-3, #637373);
  font:600 12px/1.4 "Nunito Sans", system-ui, sans-serif;
  margin:5px 0 2px;
}

/* Uniform digit advance, so the tail offset measured on a canvas matches what
   the input actually paints. */
.inh-mask-field{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

/* Composes with .inh-invalid rather than fighting it: that rule sets
   border-color with !important, so a second border-color would lose. */
.inh-mask-bad{
  box-shadow:0 0 0 2px rgba(226,128,102,.18);
}

/* Autofill probe. Chrome and Safari fill a field without firing an input
   event; an animation on :-webkit-autofill is the only reliable signal. */
@keyframes inh-mask-autofill{from{opacity:1}to{opacity:1}}
input:-webkit-autofill{
  animation-name:inh-mask-autofill;
  animation-duration:1ms;
}

/* Stylesheet-loaded probe. The script reads one known property off this and
   turns the tail off entirely when the answer is wrong. */
.inh-mask-probe{
  position:absolute;
  left:-9999px;
  top:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

/* ---- date of birth composite -------------------------------------------
   The original <input type="date"> stays in the DOM, keeps its id, its name,
   its handlers and its ISO value, and becomes the value carrier. The visible
   control is a masked MM/DD/YYYY text field plus a button that opens the
   native picker. Clipped rather than display:none so it stays focusable: a
   <label for> click and validateForm's focus() both land on it and are
   forwarded to the text field. */
.inh-mask-dob{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:6px;
  width:100%;
}
.inh-mask-dob .inh-mask-dobtext{
  flex:1 1 auto;
  min-width:0;
}
.inh-mask-carrier{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  border:0 !important;
  overflow:hidden !important;
  clip:rect(0 0 0 0) !important;
  clip-path:inset(50%) !important;
  white-space:nowrap !important;
}
.inh-mask-cal{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  padding:0;
  cursor:pointer;
  border-radius:var(--inh-radius-sm, 9px);
  border:1px solid var(--inh-line, #DEECEE);
  background:var(--inh-surface, #FFFFFF);
  color:var(--inh-ink-2, #213D51);
}
.inh-mask-cal:hover{
  background:var(--inh-surface-2, #E9F6FD);
}
.inh-mask-cal:focus-visible{
  outline:2px solid var(--inh-accent, #0D9B97);
  outline-offset:2px;
}
.inh-mask-cal svg{
  width:16px;
  height:16px;
  display:block;
}