/* Opt in with hn-ui; legacy pages and embedded widgets keep their own rules. */
body.hn-ui {
    background: var(--ui-bg);
    color: var(--ui-text);
    font-family: var(--ui-font);
}

.hn-ui *, .hn-ui *::before, .hn-ui *::after { box-sizing: border-box; }
.hn-ui :is(input[type="checkbox"], input[type="radio"], progress) { accent-color: var(--ui-primary); }
.hn-ui :is(input, textarea)::selection { background: var(--ui-primary-soft); color: var(--ui-text); }

.hn-ui button,
.hn-ui input,
.hn-ui textarea,
.hn-ui select {
    font-family: var(--ui-font);
}

.hn-ui button:focus-visible,
.hn-ui input:focus-visible,
.hn-ui textarea:focus-visible,
.hn-ui select:focus-visible,
.hn-ui a:focus-visible,
.hn-ui [tabindex]:focus-visible {
    outline: 2px solid var(--ui-primary) !important;
    outline-offset: 2px;
}

.hn-ui [v-cloak] { display: none; }

@media (prefers-reduced-motion: reduce) {
    .hn-ui *, .hn-ui *::before, .hn-ui *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}