/* Field hints (29 Oct 2026, owner: "add ! next to each field so people understand what it is for").
   Any label, legend or button with data-hint="..." gets a small round "!" after it (hints.js); tapping it opens the
   plain-words note in one floating bubble. Shared by the main site and the admin portal, so colours come from
   whichever family's tokens are on the page: the main site's names first, then the admin's, then a safe fallback. */
.vk-hint-row { display: flex; align-items: center; gap: 4px; min-width: 0; }
.vk-hint-row > label { flex: 0 1 auto; min-width: 0; margin-bottom: 0; overflow-wrap: anywhere; }

.vk-hint {
    /* 24 x 24 target (WCAG 2.2 target size); the visible ring inside is 18 px. */
    flex: 0 0 auto; display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; margin: 0;
    border: 0; border-radius: 50%; background: transparent; cursor: pointer; vertical-align: middle;
    color: var(--text2, var(--text-2, #4A5059)); touch-action: manipulation; -webkit-tap-highlight-color: transparent;
    font: 800 12px/1 var(--body, var(--font, system-ui, sans-serif)); text-transform: none; letter-spacing: 0;
}
.vk-hint > span {
    display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
    border: 1.5px solid currentColor; transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.vk-hint:hover > span, .vk-hint[aria-expanded="true"] > span {
    background: var(--lime, var(--accent-fill, #1F56AE)); border-color: var(--lime, var(--accent-fill, #1F56AE));
    color: var(--on-fill, var(--on-accent-fill, #fff));
}
.vk-hint:focus { outline: none; }
.vk-hint:focus-visible > span { outline: 3px solid var(--blue-ink, #1F56AE); outline-offset: 2px; }
@media (pointer: coarse) {
    /* Fingers: a 44 px target (Apple HIG) around the same 18 px ring, pulled in so the line doesn't grow. */
    .vk-hint { width: 44px; height: 44px; margin: -10px -10px -10px -8px; }
}

.vk-hint-tip {
    position: fixed; z-index: 1080; left: 0; top: 0; max-width: min(300px, calc(100vw - 24px));
    padding: 10px 12px; border-radius: 12px; white-space: pre-line; overflow-wrap: anywhere; font: 500 .88rem/1.45 var(--body, var(--font, system-ui, sans-serif));
    background: var(--raised, var(--surface-2, #fff)); color: var(--text, #0A0C10);
    border: 1px solid var(--line3, var(--border-strong, #C8C4B8));
    box-shadow: 0 12px 32px -12px rgba(0, 0, 0, .45);
    opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .14s ease, transform .14s ease;
}
.vk-hint-tip:empty { padding: 0; border: 0; }
.vk-hint-tip.open { opacity: 1; transform: none; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
    .vk-hint > span, .vk-hint-tip { transition: none; }
}

/* A control and its "!" on one row (5 Nov 2026). */
.vk-hint-ctl { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; }
.vk-hint-ctl > :first-child { flex: 1 1 auto; min-width: 0; }
.vk-hint-ctl.is-inline { display: inline-flex; width: auto; vertical-align: middle; }
.vk-hint-ctl.is-inline > :first-child { flex: 0 1 auto; }
.vk-hint-ctl > .vk-hint { flex: none; }

/* Dates in words beside date boxes; Show on passwords (5 Nov 2026). */
.date-words { display: block; margin-top: 4px; }
.pw-wrap { position: relative; display: block; width: 100%; }
.pw-wrap > input { width: 100%; padding-right: 70px; }
.pw-show { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); min-height: 32px; padding: 4px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text2); font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; }
.pw-show:hover, .pw-show:focus-visible { background: var(--raised); color: var(--text); }