:root {
    --sample-width: 840px;
    --sample-border-width: 1px;
    --sample-focus-width: 2px;
    --sample-focus-offset: 3px;
    --sample-control-height: 48px;
    --sample-disabled-opacity: 0.55;
    --sample-line-height: 1.5;
    --sample-weight: 600;
    --sample-motion-off: 0s;
    --sample-success-heading-size: 1.5rem;
}
.bh-sample-container { max-width: var(--sample-width); }
.bh-sample-rhythm-value {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    min-height: var(--sample-control-height);
    padding-inline: var(--spacing-xs);
    border: var(--sample-border-width) solid var(--color-border);
    border-radius: var(--rounded-xs);
    font-size: var(--font-size-body);
    color: var(--color-ink);
}
.bh-sample-panel {
    margin-top: var(--spacing-lg);
}
.bh-sample-page .bh-sample-success {
    padding: var(--spacing-lg);
    border: var(--sample-border-width) solid var(--color-border);
    border-radius: var(--rounded-md);
    background: var(--color-surface);
    text-align: center;
}
.bh-sample-page .bh-sample-panel:has(.bh-sample-success) {
    padding: 0;
    border: 0;
    background: transparent;
}
.bh-sample-page .bh-sample-success-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0 auto var(--spacing-sm);
    border-radius: 50%;
    background: var(--color-success-surface);
    color: var(--color-success);
}
.bh-sample-page .bh-sample-success h2 {
    margin: 0 0 var(--spacing-xs);
    font-family: var(--font-display);
    font-size: var(--sample-success-heading-size);
    font-weight: 300;
    color: var(--color-ink);
}
.bh-sample-page .bh-sample-success-copy {
    max-width: 52ch;
    margin-inline: auto;
    font-family: var(--font-body);
    font-size: var(--font-size-body);
    line-height: var(--sample-line-height);
    color: var(--color-ink-muted);
}
.bh-sample-page .bh-sample-success-copy > :last-child { margin-bottom: 0; }
.bh-sample-page main a:not(.uk-button) {
    color: var(--color-ink);
    text-decoration: underline;
    text-underline-offset: var(--sample-focus-offset);
}
.bh-sample-page main .uk-button {
    min-height: var(--sample-control-height);
    line-height: var(--sample-line-height);
    white-space: normal;
    max-width: 100%;
}
.bh-sample-page .bh-btn-primary:hover,
.bh-sample-page .bh-btn-primary:focus {
    box-shadow: none;
    transform: none;
}
.bh-sample-page :focus-visible {
    outline: var(--sample-focus-width) solid var(--color-ink);
    outline-offset: var(--sample-focus-offset);
}
.bh-sample-page [disabled] { cursor: not-allowed; opacity: var(--sample-disabled-opacity); }
.bh-sample-page .uk-description-list dd { overflow-wrap: anywhere; }
.bh-sample-page ::selection { background: var(--color-accent-rose); color: var(--color-ink); }
.bh-sample-page input,
.bh-sample-page textarea { caret-color: var(--color-ink); }
/* Apply website typography to the native FormBuilder controls. */
.bh-sample-page .Inputfields label.InputfieldHeader {
    font-family: var(--font-body);
    font-size: var(--font-size-label);
    font-weight: var(--sample-weight);
    color: var(--color-ink);
}
.bh-sample-page .Inputfields input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
.bh-sample-page .Inputfields select,
.bh-sample-page .Inputfields textarea {
    font-family: var(--font-body);
    font-size: var(--font-size-body);
    border-radius: var(--rounded-xs);
    border-color: var(--color-border);
    color: var(--color-ink);
}
.bh-sample-page .Inputfields button[type=submit] {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: fit-content;
    margin-inline: auto;
    border: none;
    border-radius: var(--rounded-btn) !important;
    padding: var(--button-padding-y) var(--button-padding-x) !important;
    min-height: 0 !important;
    line-height: var(--line-height-flat) !important;
    letter-spacing: 0.05em;
    font-family: var(--font-body);
    font-size: var(--font-size-button);
    font-weight: var(--sample-weight);
    text-transform: uppercase;
}
@media (prefers-reduced-motion: reduce) {
    .bh-sample-page *,
.bh-sample-page *::before,
.bh-sample-page *::after { animation: none !important; transition-duration: var(--sample-motion-off) !important; scroll-behavior: auto !important; }
}